/* Curso detail page styles. The hero reuses the page-hero language (deep
   gradient + soft radial light + diagonal texture), tinted by the app color. */

.curso-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46rem 18rem at 88% -30%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--app-color, var(--mzki-brand)) 68%, #000) 0%,
      color-mix(in srgb, var(--app-color, var(--mzki-brand)) 90%, #000) 55%,
      var(--app-color, var(--mzki-brand)) 100%
    );
  background-color: var(--app-color, var(--mzki-brand));
  color: #fff;
  padding: 3.5rem 0;
}

.curso-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -48deg,
    rgba(255, 255, 255, 0.028) 0 2px,
    rgba(255, 255, 255, 0) 2px 16px
  );
  pointer-events: none;
}

.curso-hero .container {
  position: relative;
}

.curso-hero h1 {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.curso-hero__level {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  margin-left: 0.5rem;
  background-color: rgba(255, 255, 255, 0.25);
}

.curso-meta .info-card {
  height: 100%;
}

.curso-text {
  line-height: 1.7;
  color: #444;
  font-size: 1.05rem;
}

.curso-text :last-child {
  margin-bottom: 0;
}

.curso-modulos {
  background: linear-gradient(135deg, var(--mzki-bg-soft) 0%, var(--mzki-bg-softer) 100%);
  border-top: 5px solid var(--app-color, var(--mzki-brand));
}

.modulo-card__title {
  color: var(--app-color, var(--mzki-brand));
}

.modulo-accordion__item {
  border-left: 5px solid var(--app-color, var(--mzki-brand));
  margin-bottom: 0.75rem;
  border-radius: 4px;
  overflow: hidden;
}

.modulo-accordion__item .accordion-button:not(.collapsed) {
  color: var(--app-color, var(--mzki-brand));
  background-color: var(--mzki-bg);
}