/* ============================================================================
   ESCUELA DE SALUD · Hoja de estilo del frontend público
   ----------------------------------------------------------------------------
   Dirección "salud cálida y editorial" (aprobada 2026-07-15):
   papel cálido + tinta + dorado de Lourdes + verde herbal. Serif editorial
   para titulares, sans para lectura y ABC Favorit Mono (marca) para etiquetas,
   precios y duraciones. Tema claro (decisión de marca: el sitio no invierte a
   oscuro para mantener la identidad).
   ========================================================================== */

/* --- Fuente de marca (servida desde nuestro dominio) --------------------- */
@font-face {
  font-family: "ABC Favorit Mono";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/ABCFavoritMono-Regular.otf") format("opentype");
}
@font-face {
  font-family: "ABC Favorit Mono";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/ABCFavoritMono-Medium.otf") format("opentype");
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --paper:#F5F1E6; --surface:#FBF8F0; --surface-2:#EFE9D9;
  --ink:#1B1A16; --ink-soft:#4C483C; --stone:#8B8676; --line:#E4DDCB;
  --gold-solid:#C08423; --gold-text:#8F6414;
  --herbal:#33443A; --herbal-2:#26332B; --on-herbal:#F1ECDD; --on-herbal-soft:#B9C3B4;

  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-body:-apple-system,"Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --font-mono:"ABC Favorit Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:1120px; --radius:5px;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* El atributo `hidden` debe ganar SIEMPRE, incluso a componentes con display
   propio (p. ej. .curso-card usa display:flex). Sin esto, ocultar una tarjeta
   por JS (filtro de etiquetas) no surtiría efecto. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1;
  text-wrap: balance; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.stone { color: var(--stone); }

/* --- Botones ------------------------------------------------------------- */
.btn { font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; display: inline-flex;
  align-items: center; justify-content: center; gap: .5em; padding: 13px 22px;
  border-radius: var(--radius); cursor: pointer; border: 1px solid transparent;
  transition: all .18s ease; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--gold-solid); color: #1B1A16; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-gold { background: var(--gold-solid); color: #1B1A16; }
.btn-gold:hover { filter: brightness(1.06); }
.btn-block { width: 100%; }

/* --- Navegación ---------------------------------------------------------- */
.nav { display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; border-bottom: 1px solid var(--line); max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
/* En mono cada carácter ocupa lo mismo: el punto de "Dra." se come una celda
   casi vacía y el espacio otra, y el letter-spacing las ensancha más todavía.
   Con word-spacing negativo apretamos SOLO los huecos entre palabras y dejamos
   intacto el tracking de las letras, que es lo que da el aire de marca. */
.brand .sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  word-spacing: -.32em; text-transform: uppercase; color: var(--stone); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a, .nav-salir { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); }
.nav-links a:hover, .nav-salir:hover { color: var(--ink); }
/* "Salir" es un botón (va dentro de un form POST) pero debe verse como un enlace.
   line-height heredado: los botones traen `normal` de serie y su caja quedaba
   más baja que la de los enlaces. */
.nav-salir { background: none; border: 0; padding: 0; cursor: pointer; line-height: inherit; }
/* El form del logout no debe existir para el layout: sin esto es él (y no el
   botón) el que hace de elemento flex, y "Salir" cae más abajo que el resto de
   enlaces porque su caja de línea no es la misma. Con display:contents el botón
   pasa a ser hijo directo del flex y se alinea con los demás. */
.nav-links form { display: contents; }
/* Quién ha iniciado sesión. Muy discreto: el mismo mono del menú pero en gris
   piedra y sin ser enlace — basta para saber que la sesión está abierta sin
   competir con la navegación. Se recorta si el nombre es largo. */
.nav-yo { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stone); cursor: default;
  white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

/* --- Botón de menú móvil (mismo patrón que lou.art) ---------------------- */
/* Tres líneas de 1px; al abrir, la del medio gira 90º. Oculto en escritorio. */
.nav-toggle { display: none; border: none; background: transparent; width: 40px; height: 40px;
  padding: 0; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 50%; width: 100%; height: 1px; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease; }
.nav-toggle span:nth-child(1) { top: 25%; transform: translateX(-50%); }
.nav-toggle span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span:nth-child(3) { top: 75%; transform: translateX(-50%); }
.nav-toggle.is-open span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }

/* --- Hero (home) --------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 76px 40px 68px; }
.hero h1 { font-size: 56px; margin: 18px 0 22px; }
/* "cuidarte" en el verde herbal del proyecto (antes iba en dorado). */
.hero h1 em { font-style: italic; color: var(--herbal); }
.hero .lead { font-size: 20px; color: var(--ink-soft); max-width: 32ch; margin-bottom: 30px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* Retrato de la doctora. El marco lleva la proporción EXACTA de la foto
   (945x1417), así que no se recorta nada: se ve entera, con todo el cuerpo.
   Ocupa 2/3 del ancho de su columna (un tercio menos) y se pega a la derecha,
   contra el margen de la página. Al llevar aspect-ratio, al estrecharla baja
   también de alto y el hero deja de ser tan largo. */
/* La figura (foto + pie) ocupa el 80% de su columna (un 20% menos) y se alinea
   a la IZQUIERDA de ella: se acerca al texto y el aire queda contra el margen
   derecho. La foto es CUADRADA y va recortada de cerca (dra-lourdes-hero.webp):
   en vertical quedaba muy alargada y no acompañaba al titular de su izquierda. */
.hero-figura { width: 80%; margin: 0 auto 0 0; }
/* Proporción nativa de la foto (1600x1412): se ve entera, sin recorte. */
.hero-art { position: relative; aspect-ratio: 1600 / 1412; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-cap { margin-top: 12px; text-align: center; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; word-spacing: -.3em; text-transform: uppercase;
  color: var(--stone); }

/* --- Secciones ----------------------------------------------------------- */
.section { max-width: 1200px; margin: 0 auto; padding: 68px 40px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 34px; }
.section-head h2 { font-size: 34px; }

/* --- Barra de filtros por etiqueta (formato Lou.art) --------------------- */
/* Chips cuadradas (border-radius 0), tipografía mono, la activa rellena en
   tinta. Mismo patrón que las galerías de lou.art, con la paleta de la escuela. */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: -14px 0 30px; }
.filtro-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 0; padding: 8px 12px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; cursor: pointer;
  transition: all .15s ease; }
.filtro-btn:hover { border-color: var(--ink); }
.filtro-btn.activo { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filtro-vacio { color: var(--ink-soft); margin-top: 22px; }

/* --- Catálogo de cursos -------------------------------------------------- */
/* Rejilla que se adapta al nº de cursos: cada tarjeta es autónoma (con su
   borde), así con un solo curso no quedan celdas vacías. */
.grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.curso-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; }
.curso-card:hover { border-color: var(--ink); }

/* Portada apaisada arriba de la tarjeta. */
.curso-portada { aspect-ratio: 16/10; background: var(--surface-2); border-bottom: 1px solid var(--line);
  overflow: hidden; display: grid; place-items: center; }
.curso-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.curso-card:hover .curso-portada img { transform: scale(1.02); }
.curso-portada img { transition: transform .4s ease; }
/* Sin imagen: fondo cálido con el motivo botánico, para que no quede un hueco. */
.curso-portada.vacia { background: radial-gradient(120% 120% at 30% 20%, rgba(192,132,35,.14), transparent 55%), var(--surface-2); }

.curso-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.curso-card .k { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; }
.curso-card h3 { font-size: 22px; margin-bottom: 8px; color: var(--ink); }
.curso-card .d { color: var(--ink-soft); font-size: 14.5px; flex: 1; }
/* Progreso del curso dentro de la tarjeta de "Mis cursos". */
.prog { margin-top: 18px; }
.prog-barra { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.prog-barra span { display: block; height: 100%; background: var(--herbal); border-radius: 2px;
  transition: width .3s ease; }
.prog-txt { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--stone); }
.prog-txt span:first-child { color: var(--gold-text); }

.curso-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }

/* Prueba social al pie de la tarjeta: valoración + alumnos. */
.card-social { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--stone); }
.card-social b { color: var(--ink); font-weight: 500; }
.curso-card .price { font-family: var(--font-mono); font-weight: 500; font-size: 15px; }
.tag-free { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--herbal); background: color-mix(in srgb, var(--herbal) 12%, transparent); padding: 4px 8px; border-radius: 3px; }

/* --- Tarjeta de un curso que el alumno YA HA COMPRADO -------------------- */
/* En dorado y no en verde herbal (el de "clases gratis") a propósito: el oro
   es el color de la marca para lo que ya es tuyo, y el contraste con las
   tarjetas de al lado hace que se localice de un vistazo en la parrilla. */
.tag-mio { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-text); background: color-mix(in srgb, var(--gold-solid) 14%, transparent);
  padding: 4px 8px; border-radius: 3px; }
/* Aspecto de botón, pero es un <span>: el enlace es la tarjeta entera (un
   enlace dentro de otro sería HTML inválido). De ahí `pointer-events:none`,
   para que el cursor siga siendo el de la tarjeta y no parezca otro destino. */
.curso-card .btn-card { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink); border-bottom: 1px solid var(--gold-solid); padding-bottom: 2px; pointer-events: none; }
.curso-card.es-mio:hover .btn-card { color: var(--gold-text); }

/* --- Cómo funciona (secuencia) ------------------------------------------ */
.pasos { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
.paso { border-top: 1px solid var(--line); padding-top: 18px; }
.paso .n { font-family: var(--font-mono); font-size: 13px; color: var(--gold-text); font-weight: 500; }
.paso h3 { font-size: 21px; margin: 12px 0 8px; color: var(--ink); }
.paso p { color: var(--ink-soft); font-size: 15px; }

/* --- Cita ---------------------------------------------------------------- */
.quote { max-width: 1200px; margin: 0 auto; padding: 72px 40px; }
/* Retrato redondo sobre la cita: pequeño, solo para dar calidez al cierre. */
.quote-cara { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 26px; border: 1px solid var(--line); }
.quote blockquote { font-family: var(--font-display); font-size: 30px; line-height: 1.28;
  max-width: 22ch; margin: 0 auto; text-align: center; font-style: italic; }
.quote .by { text-align: center; margin-top: 22px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* --- Sobre mí ------------------------------------------------------------ */
/* Hereda del hero de la home, pero con el titular más contenido: aquí el peso
   lo lleva el texto largo, no la portada. */
.sm-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 40px 40px 62px; }
.sm-hero h1 { font-size: 44px; margin: 16px 0 20px; }
.sm-hero h1 em { font-style: italic; color: var(--herbal); }
.sm-hero .lead { font-size: 18px; color: var(--ink-soft); max-width: 42ch; }
.sm-figura { width: 84%; margin: 0 auto 0 auto; }
.sm-art { position: relative; aspect-ratio: 1600 / 1412; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.sm-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Columna de lectura: ancho de medida cómoda (~68 caracteres), no toda la
   página, que a 1200px sería ilegible. */
.sm-texto { max-width: 68ch; }
.sm-texto p { color: var(--ink-soft); font-size: 17px; line-height: 1.62; margin-bottom: 20px; }
.sm-texto strong { color: var(--ink); font-weight: 600; }
.sm-texto em { font-style: italic; }
.sm-intro { max-width: 68ch; color: var(--ink-soft); font-size: 17px; line-height: 1.62;
  margin-bottom: 34px; }
/* Los párrafos de las dos columnas necesitan aire entre sí: .muted no trae
   margen propio y quedaban pegados unos a otros. */
.two-col p.muted + p.muted { margin-top: 16px; }
.two-col p.muted { line-height: 1.6; }

/* Cita dentro del relato: barra dorada, sin comillas gigantes. */
.sm-cita { border-left: 2px solid var(--gold-solid); padding: 4px 0 4px 22px; margin: 30px 0; }
.sm-cita p { font-family: var(--font-display); font-size: 20px; line-height: 1.45;
  color: var(--ink); margin: 0; }

/* Las dos medicinas de la Antigua Grecia, enfrentadas. La del hombre libre va
   destacada: es la que ella practica y la que explica esta escuela. */
.sm-grecia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.sm-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  background: var(--surface); }
.sm-col.destacada { background: var(--herbal); border-color: var(--herbal); }
.sm-col-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 12px; }
.sm-col.destacada .sm-col-t { color: var(--gold-solid); }
.sm-col p { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.sm-col.destacada p { color: var(--on-herbal); }
.sm-col.destacada strong { color: #fff; }

/* Las fuerzas generadoras: misma retícula que "Cómo funciona" de la home. */
.sm-fuerzas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 36px; }
.sm-f { border-top: 1px solid var(--line); padding-top: 18px; }
.sm-f .n { font-family: var(--font-mono); font-size: 13px; color: var(--gold-text); font-weight: 500; }
.sm-f h3 { font-size: 20px; margin: 10px 0 8px; color: var(--ink); }
.sm-f p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* El sueño de la Escuela de Vida: banda verde, el momento más alto de la página. */
.sm-sueno { background: var(--herbal); color: var(--on-herbal); padding: 68px 40px;
  text-align: center; }
.sm-sueno blockquote { font-family: var(--font-display); font-size: 27px; line-height: 1.34;
  max-width: 30ch; margin: 18px auto 0; font-style: italic; color: var(--on-herbal); }
.sm-sueno blockquote em { color: var(--gold-solid); font-style: italic; }
.sm-sueno .by { margin-top: 20px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-herbal-soft); }
.sm-sueno-p { max-width: 62ch; margin: 34px auto 0; color: var(--on-herbal-soft);
  font-size: 16px; line-height: 1.6; }
.sm-sueno-p strong { color: var(--on-herbal); font-weight: 600; }

/* Formación: lista sobria, el título en negro y el centro en gris. */
.sm-cv { list-style: none; padding: 0; margin: 0; }
.sm-cv li { border-top: 1px solid var(--line); padding: 13px 0; }
.sm-cv b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sm-cv span { font-family: var(--font-mono); font-size: 11.5px; color: var(--stone); }
.sm-cv-nota { margin-top: 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* Cifras de trayectoria. */
.sm-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sm-cifras > div { border-top: 1px solid var(--line); padding-top: 14px; }
.sm-cifras b { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  color: var(--gold-text); }
.sm-cifras span { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 14px;
  line-height: 1.45; }

/* Cierre con sus cursos. */
.sm-cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sm-curso { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: var(--surface); display: block; color: inherit; transition: border-color .15s; }
.sm-curso:hover { border-color: var(--gold-solid); }
/* Pictograma del curso, arriba de la tarjeta: una banda verde (el mismo herbal
   de la portada) con el motivo ENTERO. background-size:contain encaja la portada
   completa por su alto; el sobrante a los lados es del mismo verde, así que se
   funde sin costuras. La caja alta (170px) da presencia al icono. */
.sm-curso-icono { height: 170px; margin: -24px -24px 20px; border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--herbal); background-repeat: no-repeat;
  background-position: center; background-size: contain; }
.sm-curso h3 { font-size: 21px; margin-bottom: 8px; }
.sm-curso p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.sm-curso .ver { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-text); }

@media (max-width: 860px) {
  /* Igual que en la home: en móvil manda el texto y la foto solo estorbaría. */
  .sm-hero { grid-template-columns: 1fr; padding: 24px 22px 40px; }
  .sm-figura { display: none; }
  .sm-hero h1 { font-size: 32px; }
  .sm-grecia, .sm-fuerzas, .sm-cursos, .sm-cifras { grid-template-columns: 1fr; }
  .sm-sueno { padding: 48px 22px; }
  .sm-sueno blockquote { font-size: 22px; }
}

/* --- Pie ----------------------------------------------------------------- */
.foot-band { background: var(--herbal); color: var(--on-herbal); padding: 52px 40px 40px; }
.foot-inner { max-width: 1120px; margin: 0 auto; }
.foot-band .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-band h3 { font-size: 24px; color: var(--on-herbal); }
.foot-band a { color: var(--on-herbal-soft); font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; display: block; margin: 8px 0; }
.foot-band a:hover { color: var(--on-herbal); }
.foot-note { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-mono); font-size: 11px; color: var(--on-herbal-soft); letter-spacing: .04em; }

/* --- Landing de curso ---------------------------------------------------- */
.crumbs { max-width: 1200px; margin: 0 auto; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--stone); padding: 20px 40px 0; }
.crumbs a { color: var(--stone); }
.lp-hero { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start;
  max-width: 900px; margin: 0 auto; padding: 30px 40px 40px; }
.lp-hero h1 { font-size: 48px; margin: 14px 0 18px; }
/* Sin tope de 36ch: se estiraba hacia abajo dejando hueco a la derecha. Ocupa
   su columna, que ya la limita a una longitud de línea cómoda de leer. */
.lp-hero .promesa { font-size: 19px; color: var(--ink-soft); margin-bottom: 24px; }
/* Recuadro con los datos del curso: usa el mismo filete que separaba las filas,
   ahora como borde. Sin línea interior y con el interlineado apretado, para que
   las dos filas se lean como un bloque. */
.lp-datos { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 7px; line-height: 1.5; }
.lp-meta, .lp-social { display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.lp-meta b, .lp-social b { color: var(--ink); font-weight: 500; }
.lp-social .val { display: inline-flex; align-items: center; gap: 8px; }
.estrellas { display: inline-flex; gap: 1px; letter-spacing: .05em; }
.estrellas span { color: var(--line); font-size: 14px; line-height: 1; }
.estrellas span.on { color: var(--gold-solid); }

/* La celda del precio se estira a la altura de la columna izquierda (el hero usa
   align-items:start, que la dejaba corta). Solo así el recuadro sticky tiene
   recorrido: acompaña el scroll a lo largo de toda la ficha y se suelta al
   acabar el hero —bastante antes del pie verde, así que nunca lo tapa. */
.price-col { align-self: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 26px; position: sticky; top: 20px; }
.price-card .amt { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--ink); }
.price-card .amt small { font-family: var(--font-mono); font-size: 13px; color: var(--stone);
  display: block; letter-spacing: .04em; text-transform: uppercase; margin-top: 8px; }
/* Pago fraccionado, justo bajo el precio. Va en verde herbal sobre su propio
   fondo tenue para que se lea como una alternativa real al importe de arriba y
   no como otra línea de letra pequeña. */
.price-plazos { margin-top: 12px; padding: 9px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--herbal) 9%, transparent);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.price-plazos b { color: var(--herbal); font-weight: 600; }

.price-card ul { list-style: none; padding: 0; margin: 14px 0 0; }
.price-card li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); padding: 5px 0; }
.price-card li b { color: var(--gold-text); }

.free-strip { background: var(--herbal); color: var(--on-herbal); border-radius: 8px; padding: 22px 26px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* El texto toma solo el espacio sobrante (flex-basis 0) y su línea envuelve si
   hace falta: en escritorio encoge y deja al emblema y al botón en la misma fila;
   en móvil, el flex-wrap deja caer el botón abajo (como antes) en vez de cortarlo. */
.free-strip-texto { flex: 1 1 220px; min-width: 0; }
.free-strip .t { font-family: var(--font-display); font-size: 22px; }
.free-strip .s { color: var(--on-herbal-soft); font-size: 14px; }
.free-strip .btn { flex: 0 0 auto; }
/* Emblema del curso: el CENTRO de la portada (object-position center → el brote,
   el cuerpo de la mariposa, la cresta de la ola). Como la portada tiene el mismo
   verde herbal de la banda, se ve solo el motivo, sin borde. Es un elemento del
   flex —con su hueco reservado entre el texto y el botón—, así que nunca pisa el
   texto. El degradado por la izquierda lo funde con la banda. */
.free-strip-arte { flex: 0 0 auto; width: 96px; height: 74px; pointer-events: none;
  /* background-size 150% + center: acerca el motivo y deja fuera el marco fino
     de la portada (que con object-fit asomaba como un recuadro). */
  background-repeat: no-repeat; background-position: center; background-size: 150%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%);
  mask-image: linear-gradient(to right, transparent, #000 42%); }
/* Al apilarse la banda en móvil, el emblema entre texto y botón sobra: fuera. */
@media (max-width: 560px) { .free-strip-arte { display: none; } }

.temario { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.temario li { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 16px;
  padding: 16px 6px; border-bottom: 1px solid var(--line); }
.temario .num { font-family: var(--font-mono); font-size: 13px; color: var(--stone); }
.temario .tt { font-size: 17px; }
.temario .dur { font-family: var(--font-mono); font-size: 12.5px; color: var(--stone); }
.temario .state { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.temario .state.free { color: var(--herbal); }
.temario .state.lock { color: var(--stone); }
/* Separador de módulo: un rótulo discreto (mismo lenguaje que los eyebrow) que
   encabeza su grupo de lecciones. Sin banda ni recuadro: lo que separa los
   grupos es el aire de arriba, y la línea de la lección anterior. Así el
   temario conserva su ritmo de filas. Sin borde abajo para que el rótulo quede
   pegado a las lecciones que encabeza. */
.temario li.sec { display: block; padding: 30px 6px 3px; border-bottom: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text); }
/* La primera no necesita el aire de arriba: ya lo da el rótulo "Temario". */
.temario li.sec:first-child { padding-top: 14px; }
/* Sección PRINCIPAL (nivel 1) en la landing: aquí NO es un rótulo, es un titular.
   Cuando los dos niveles eran mono en versalitas y solo se distinguían por 1,5 px
   de cuerpo y el color, un temario con muchos módulos (ansiedad tiene 16, diez de
   ellos seguidos) quedaba como una escalera de rótulos iguales donde no se veía
   dónde empezaba cada bloque. Cambiando de familia —serif de titulares, caja
   normal, sin letter-spacing— el contraste con el módulo es de tipo, no de grado,
   y los rótulos dorados vuelven a leerse como subdivisiones.
   OJO: al quitar el text-transform, las mayúsculas guardadas en la BD dejan de
   ser invisibles y se ven tal cual; los títulos de nivel 1 deben ir en caja
   normal. El índice del reproductor NO usa esto: allí la columna es estrecha y se
   navega mientras se ve el vídeo, así que el rótulo compacto con su banda de
   fondo (.lz-sec-1) sigue siendo lo correcto. */
.temario li.sec-1 { padding: 44px 2px 8px; font-family: var(--font-display);
  font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); border-bottom: 1px solid var(--ink); }
.temario li.sec-1:first-child { padding-top: 10px; }

/* --- Landing de venta (bloques de la ficha del curso) -------------------- */
/* Mismo lenguaje que el resto: filas con línea, serif para lo emocional y
   mono para los rótulos. Nada de colores nuevos. */

/* Preguntas gancho: en serif itálica, como una voz interior. */
.lp-dolores { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lp-dolores li { font-family: var(--font-display); font-style: italic; font-size: 19px;
  line-height: 1.4; color: var(--ink); padding: 13px 6px; border-bottom: 1px solid var(--line); }

/* El problema: texto corrido con medida de lectura. */
.lp-problema p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.62;
  margin-bottom: 16px; max-width: 62ch; }
.lp-problema p:last-child { margin-bottom: 0; }

/* Beneficios: retícula de dos columnas, patrón .sm-f / .paso. */
.lp-beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.lp-b { border-top: 1px solid var(--line); padding-top: 14px; }
.lp-b h3 { font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.lp-b p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }

/* Testimonios: tarjetas sobrias sobre superficie, nombre en mono. */
.lp-testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-t { margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 22px 24px; }
.lp-t blockquote { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.lp-t figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text); }

/* Aviso sanitario: discreto pero visible. */
/* Cierra las preguntas frecuentes, dentro de su columna: por eso lleva aire
   arriba en vez de max-width (el ancho se lo da ya la columna). */
.lp-aviso { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 14px 18px; font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); }
.lp-aviso b { color: var(--ink); }

/* Cierre de venta: banda herbal, el mismo momento alto que el sueño de Sobre mí. */
.lp-final { background: var(--herbal); color: var(--on-herbal); padding: 64px 40px;
  text-align: center; }
.lp-final blockquote { font-family: var(--font-display); font-size: 30px; font-style: italic;
  line-height: 1.3; max-width: 24ch; margin: 16px auto 0; color: var(--on-herbal); }
.lp-final-precio { margin-top: 22px; font-family: var(--font-mono); font-size: 26px;
  font-weight: 500; }
.lp-final-precio small { font-size: 12px; font-weight: 400; color: var(--on-herbal-soft);
  letter-spacing: .04em; }
/* El fraccionado en el cierre: sobre la banda verde, el dorado es el color que
   contrasta sin romper la paleta. */
.lp-final-plazos { margin-top: 8px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .03em; color: var(--gold-solid); }
.lp-final-ctas { margin-top: 26px; display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; }
/* Botón fantasma sobre fondo herbal (el .btn-ghost normal es para fondo papel). */
.btn-ghost-claro { display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: var(--radius); border: 1px solid var(--on-herbal-soft);
  color: var(--on-herbal); font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; }
.btn-ghost-claro:hover { border-color: var(--on-herbal); }

@media (max-width: 860px) {
  .lp-beneficios, .lp-testimonios { grid-template-columns: 1fr; }
  .lp-final { padding: 46px 22px; }
  .lp-final blockquote { font-size: 24px; }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.qa { border-top: 1px solid var(--line); padding: 18px 0; }
.qa h3 { font-size: 18px; font-family: var(--font-body); font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.qa p { color: var(--ink-soft); font-size: 15px; }

/* --- Formularios (registro / login / recuperar) -------------------------- */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 60px 24px 90px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 30px; }
.auth-wrap h1 { font-size: 32px; margin-bottom: 6px; color: var(--ink); }
.auth-wrap .sub { color: var(--ink-soft); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 15px; background: var(--paper); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--gold-solid); box-shadow: 0 0 0 3px rgba(192,132,35,.15); }
/* Campo de código de 4 dígitos (estilo "código por email"): 4 cuadrados. */
.pin { display: flex; gap: 12px; justify-content: center; }
.pin-box { width: 58px; height: 66px; text-align: center; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums;
  caret-color: var(--gold-solid); transition: border-color .15s ease, box-shadow .15s ease;
  /* El dígito se oculta (como una contraseña) pero se mantiene el teclado
     numérico en móvil; el valor real se envía igual. */
  -webkit-text-security: disc; text-security: disc; }
.pin-box:focus { outline: none; border-color: var(--gold-solid); box-shadow: 0 0 0 3px rgba(192,132,35,.18); }
.pin-box.filled { border-color: var(--ink); }
@media (max-width: 420px) { .pin-box { width: 100%; height: 60px; font-size: 26px; } }

/* Fila del formulario con "Recordarme" a la izquierda y el enlace de
   recuperación a la derecha. */
.field-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; color: var(--ink-soft); user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--gold-solid); cursor: pointer; margin: 0; }
.link-sm { font-size: 13.5px; color: var(--gold-text); font-weight: 500; }
.link-sm:hover { text-decoration: underline; }

/* Aviso a los alumnos que llegan de la plataforma antigua. Más cuerpo que un
   .alert normal porque no informa de un resultado: es la primera explicación
   que reciben del cambio, y lleva dentro la salida para quien aún no tiene
   código. En herbal, no en rojo: es una bienvenida, no un error. */
.aviso-migracion { border-left: 3px solid var(--herbal); border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--herbal) 8%, transparent);
  padding: 14px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); }
.aviso-migracion b { color: var(--ink); display: block; margin-bottom: 2px; }
.aviso-migracion a { display: inline-block; margin-top: 8px; color: var(--herbal);
  font-weight: 600; }

.alert { border-radius: var(--radius); padding: 11px 14px; font-size: 14px; margin-bottom: 18px; }
.alert-error { background: #fbeaea; border: 1px solid #e6c9c9; color: #8a2b2b; }
/* Los enlaces de un aviso heredan su color (si no, salen en azul de navegador
   sobre el fondo del aviso). Sin display:block: hay avisos con el enlace dentro
   de una frase ("Ya hay una cuenta con ese email. Inicia sesión.") y partirlos
   dejaría el punto final huérfano en la línea de arriba. */
.alert a { color: inherit; text-decoration: underline; }
/* La salida de un aviso SÍ va en bloque: es la acción que resuelve el problema,
   no parte del texto. */
.alert a.salida { display: block; margin-top: 7px; font-weight: 600; }
.alert-ok { background: color-mix(in srgb, var(--herbal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--herbal) 30%, transparent); color: var(--herbal); }
.alert-info { background: color-mix(in srgb, var(--gold-solid) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold-solid) 26%, transparent); color: var(--ink); }

/* --- Checkout (pago con Stripe) --- */
.checkout-card { text-align: center; }
.checkout-precio { font-family: var(--font-display); font-size: 42px; line-height: 1; margin: 6px 0 4px; }
.checkout-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; }
.checkout-card #tarjeta-elemento { text-align: left; }
/* Mientras Stripe monta su formulario (va en un iframe suyo), avisamos de que
   está cargando para que no parezca que se ha quedado colgado. */
.pago-cargando { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--stone); text-align: center; padding: 34px 0; }
.check-desist { display: flex; gap: 10px; align-items: flex-start; text-align: left;
  margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.check-desist input { margin-top: 2px; flex: 0 0 auto; }
.checkout-legal { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--stone); }
.checkout-legal a { color: var(--gold-text); text-decoration: underline; }
.gracias-check { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--paper); background: var(--herbal); }
.auth-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.auth-legal { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--stone); text-align: center; }
.auth-legal a { color: var(--gold-text); text-decoration: underline; }
.auth-alt a { color: var(--gold-text); font-weight: 500; }

/* --- Visualizador de vídeo ---------------------------------------------- */
.player-shell { display: grid; grid-template-columns: 1fr 360px; max-width: 1280px; margin: 0 auto;
  min-height: calc(100vh - 66px); }
.player-main { padding: 26px 34px 46px; min-width: 0; }
.player-main .back { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stone); }
.video-box { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); margin-top: 14px; background: #14201a; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-locked { position: relative; aspect-ratio: 16/9; border-radius: 8px; margin-top: 14px;
  display: grid; place-items: center; text-align: center; color: var(--on-herbal);
  background: radial-gradient(120% 120% at 50% 30%, #2b3a30, #14201a); padding: 24px; }
.video-locked .pw-t { font-family: var(--font-display); font-size: 26px; }
.video-locked .pw-p { font-family: var(--font-mono); font-size: 26px; font-weight: 500; margin: 8px 0 2px; }
.video-locked .pw-s { color: var(--on-herbal-soft); font-size: 13px; margin-bottom: 18px; }
.lesson-meta { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; }
/* Botón "Completar" a la derecha de la línea de la lección. margin-left:auto lo
   empuja al extremo. Sin completar: contorno; completada: verde herbal relleno. */
.btn-valorar, .btn-completar { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; transition: all .15s; }
.btn-valorar:hover, .btn-completar:hover { border-color: var(--herbal); color: var(--ink); }
.btn-valorar .tic, .btn-completar .tic { font-size: 12px; line-height: 1; }
.btn-valorar.hecho, .btn-completar.hecho { background: var(--herbal); border-color: var(--herbal); color: var(--on-herbal); }
.btn-valorar.hecho:hover, .btn-completar.hecho:hover { background: var(--herbal-2); color: var(--on-herbal); }
.btn-valorar:disabled, .btn-completar:disabled { opacity: .55; cursor: default; }
@media (max-width: 560px) {
  /* En móvil el botón baja a su propia línea (la meta envuelve). */
  .lesson-meta { flex-wrap: wrap; }
  .btn-completar { margin-left: 0; }
}
.player-main h1.lt { font-size: 30px; }
.player-main .desc { color: var(--ink-soft); font-size: 16px; max-width: 64ch; margin-top: 12px; }
/* Navegación anterior/siguiente al pie del reproductor. Discreta: gris tenue,
   se aviva al pasar el ratón. Un extremo a cada lado (space-between). */
.lec-nav { display: flex; justify-content: space-between; align-items: stretch; gap: 16px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
/* Si va justo después de los recursos, estos ya cierran con su propia línea:
   quitamos la de la nav para no duplicarla. */
.recursos-lista + .lec-nav { border-top: 0; padding-top: 0; margin-top: 22px; }
.lec-nav-link { display: inline-flex; align-items: center; gap: 12px; color: var(--stone);
  max-width: 46%; transition: color .15s; }
.lec-nav-link.next { text-align: right; }
.lec-nav-link:hover { color: var(--ink); }
.lec-nav-link .fl { font-size: 18px; line-height: 1; color: var(--stone); transition: color .15s, transform .15s; }
.lec-nav-link:hover .fl { color: var(--gold-solid); }
.lec-nav-link.prev:hover .fl { transform: translateX(-3px); }
.lec-nav-link.next:hover .fl { transform: translateX(3px); }
.lec-nav-link .lbl { display: flex; flex-direction: column; min-width: 0; }
.lec-nav-link.next .lbl { align-items: flex-end; }
.lec-nav-link .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone); }
.lec-nav-link .t { font-size: 14.5px; color: inherit; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }

/* Recursos de la clase: cada uno con título, descripción opcional y su botón.
   Filas con línea, mismo lenguaje que el resto de la ficha. */
.recursos-lista { margin-top: 28px; }
.recurso-item { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
/* --- Reproductor de audio propio (recursos) ------------------------------ */
/* El <audio controls> del navegador no se puede estilar, así que pintamos los
   controles nosotros: botón en tinta, barra dorada y tiempo en mono. Ocupa toda
   la fila, debajo del título y del botón (por eso .recurso-item envuelve). */
.ap { flex: 0 0 100%; width: 100%; display: flex; align-items: center; gap: 14px;
  margin-top: 12px; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; }
.ap-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--paper); cursor: pointer; display: grid;
  place-items: center; padding: 0; transition: background .15s; }
.ap-play:hover { background: var(--gold-solid); color: #1B1A16; }
.ap-play:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 2px; }
.ap-play svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.ap-bar { flex: 1 1 auto; height: 18px; position: relative; cursor: pointer;
  touch-action: none; border-radius: 3px; }
.ap-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 4px; background: var(--line); border-radius: 3px; }
.ap-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 4px; width: 0; background: var(--gold-solid); border-radius: 3px; }
.ap-bar:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 3px; }
.ap-time { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--stone); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.recurso-item:last-child { border-bottom: 1px solid var(--line); }
.recurso-info { min-width: 0; }
.recurso-titulo { font-size: 16px; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.recurso-titulo .ty { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-text); }
.recurso-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-top: 4px; max-width: 60ch; }
.recurso-btn { flex: 0 0 auto; padding: 9px 16px; font-size: 12px; }

.player-side { background: var(--surface); border-left: 1px solid var(--line); padding: 20px 0; }
.player-side .ph { padding: 4px 22px 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stone); display: flex;
  justify-content: space-between; align-items: center; }
/* Derecha de la cabecera: el contador y la ✕ de ocultar, juntos. */
.ph-der { display: flex; align-items: center; gap: 12px; }
/* Dice "Ocultar", no una ✕: una aspa sola no explica que lo que hace es dar
   más pantalla al vídeo. En dorado porque en esta casa el dorado es lo
   accionable, y así se distingue del gris de la cabecera. Los botones no
   heredan la tipografía del padre, de ahí que se repita la del rótulo. */
.temario-ocultar { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 1;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
.temario-ocultar:hover { text-decoration: underline; }

/* --- Índice oculto: el vídeo se lo queda todo ---------------------------- */
/* La clase la pone el <html> (ver temario-lateral.js y el script del <head>).
   Al soltar los 360px del índice, el shell además se ensancha: el salto de
   ancho del vídeo es lo que hace que merezca la pena esconderlo. */
.temario-oculto .player-shell { grid-template-columns: 1fr; max-width: 1440px; }
.temario-oculto .player-side { display: none; }
/* Sin índice, el vídeo tiene que caber de alto CON el título de la lección
   debajo, y el texto tiene que arrancar justo donde arranca el vídeo.
   Limitamos el ANCHO, no el alto: con aspect-ratio el alto sale del ancho, así
   que capando el ancho el vídeo encoge entero y conserva su proporción. Si
   limitáramos el alto, el ancho seguiría al 100% y Vimeo metería bandas negras
   a los lados.
     --video-arriba: lo que queda por encima (cabecera + padding + "volver").
     --video-abajo:  el rótulo "Lección 01" y el título, que deben verse sin
                     bajar la página.
   Ambos están medidos en el propio reproductor. */
/* Este estrechado del vídeo cuando se oculta el índice es SOLO de escritorio:
   usa 100vh y el layout de dos columnas. En móvil el vídeo va a ancho completo,
   así que lo dejamos fuera del media para que nunca desborde (100vh en móvil es
   traicionero y `margin:auto` en un ítem de grid anula el stretch). */
@media (min-width: 861px) {
  .temario-oculto .player-main {
    --video-arriba: 148px;
    --video-abajo: 112px;
    --video-ancho: calc((100vh - var(--video-arriba) - var(--video-abajo)) * 16 / 9);
    /* Estrechamos la COLUMNA ENTERA, no solo el vídeo: así el texto de debajo
       queda alineado con él. El +68 es el padding lateral de la columna. */
    width: min(100%, calc(var(--video-ancho) + 68px));
    margin-left: auto; margin-right: auto;
  }
}

/* Pestaña para recuperar el índice: asoma pegada al borde derecho de la
   ventana, con el texto girado. Solo existe mientras el índice está oculto. */
.temario-abrir { display: none; position: fixed; right: 0; top: 50%; z-index: 40;
  transform: translateY(-50%); writing-mode: vertical-rl;
  background: var(--herbal); color: var(--on-herbal); border: 0;
  border-radius: 6px 0 0 6px; padding: 20px 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; box-shadow: 0 2px 12px rgba(27,26,22,.16); }
.temario-abrir:hover { background: var(--herbal-2); padding-right: 13px; }
.temario-oculto .temario-abrir { display: block; }
.lz { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 22px; border-top: 1px solid var(--line); color: inherit; }
.lz:hover { background: var(--paper); }
.lz.active { background: var(--paper); box-shadow: inset 3px 0 0 var(--gold-solid); }
.lz .ix { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.lz .nm { font-size: 14.5px; line-height: 1.3; }
/* Columna derecha del índice: tiempo arriba y, debajo, el % visto en pequeño. */
.lz .dr { font-family: var(--font-mono); font-size: 11.5px; color: var(--stone);
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.lz .pct { font-size: 10px; letter-spacing: .04em; color: var(--gold-text); white-space: nowrap; }
.lz .pct.ok { color: var(--herbal); }
.lz.locked .nm { color: var(--stone); }
/* Separador de módulo dentro del índice lateral: una fila más de la lista, con
   el mismo trato que una lección (idéntico padding y línea superior), pero que
   solo lleva su texto: ni número, ni duración, ni enlace. Va en dorado para que
   se distinga de las lecciones sin salirse de la retícula.
   A diferencia de antes, la lección siguiente CONSERVA su línea: así la sección
   es una pestaña independiente y no una etiqueta pegada al grupo. */
.lz-sec { padding: 12px 22px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text); line-height: 1.35; }
/* Sección principal en el índice del reproductor: manda sobre los módulos. */
.lz-sec-1 { background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink); font-size: 11.5px; letter-spacing: .13em; padding-top: 16px; padding-bottom: 14px; }
.paywall-side { margin: 12px 18px; padding: 20px; background: var(--herbal); color: var(--on-herbal);
  border-radius: 8px; text-align: center; }
.paywall-side .t { font-family: var(--font-display); font-size: 18px; }
.paywall-side .p { font-family: var(--font-mono); font-size: 20px; font-weight: 500; margin: 6px 0 12px; }

/* Botón de plegar el temario en móvil: vive en la barra «Contenido del curso»
   como píldora verde herbal (el temario nace plegado y este botón es la única
   puerta: en dorado plano pasaba desapercibido — lo señaló Sergio).
   Fuera de móvil no existe — el display:inline-block del media de abajo gana
   porque va DESPUÉS de este display:none (misma especificidad: manda el orden).
   Los dos textos viajan en el HTML y el CSS enseña el que toca según el
   estado — así el JS no tiene que saber nada de textos. */
.temario-plegar-mov { display: none; background: var(--herbal); border: 0;
  border-radius: 999px; padding: 9px 14px; cursor: pointer; line-height: 1;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-herbal); white-space: nowrap; }
.temario-plegar-mov .al-plegado { display: none; }
.temario-oculto .temario-plegar-mov .al-abierto { display: none; }
.temario-oculto .temario-plegar-mov .al-plegado { display: inline; }

@media (max-width: 860px) {
  .player-shell { grid-template-columns: 1fr; min-height: 0; }
  .player-side { border-left: 0; border-top: 1px solid var(--line); }
  .player-main { padding: 20px 22px 40px; }
  /* Aquí el índice va DEBAJO del vídeo. Con la clase temario-oculto no se
     esconde entero (dejaría al alumno sin forma de recuperarlo): se PLIEGA la
     lista y la barra «Contenido del curso» se queda como pestaña para
     reabrirla, igual que la de escritorio pero pegada encima del programa. */
  .temario-oculto .player-side { display: block; }
  .temario-oculto .player-side > *:not(.ph) { display: none; }
  .temario-oculto .player-shell { grid-template-columns: 1fr; }
  /* Sin el cálculo de escritorio: ancho normal y SIN márgenes auto (en un ítem
     de grid, margin auto anula el stretch y la columna se dimensiona al vídeo,
     que se desborda). Con margen 0 vuelve a ocupar el ancho de la pantalla. */
  .temario-oculto .player-main { width: auto; margin-left: 0; margin-right: 0; }
  /* Los mandos de escritorio no pintan nada aquí; el de plegar, sí. */
  .temario-abrir, .temario-ocultar { display: none !important; }
  .temario-plegar-mov { display: inline-block; }
}

/* --- Páginas legales ----------------------------------------------------- */
/* Documentos: manda la lectura. Medida cómoda (~72 caracteres) y jerarquía
   clara, para que se puedan recorrer buscando un apartado concreto. */
.legal { max-width: 760px; margin: 0 auto; padding: 30px 40px 80px; }
.legal h1 { font-size: 40px; margin: 14px 0 8px; }
.legal h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--line); }
.legal h3 { font-size: 17px; font-family: var(--font-body); font-weight: 600;
  margin: 24px 0 8px; color: var(--ink); }
.legal p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--gold-text); text-decoration: underline; }
.legal-lead { font-size: 18px; color: var(--ink-soft); margin-bottom: 8px; }
.legal code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px; color: var(--ink); }

/* Ficha de datos del titular: etiqueta a la izquierda, valor a la derecha. */
.legal-datos { list-style: none; padding: 0; margin: 0 0 14px; }
.legal-datos li { display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  border-top: 1px solid var(--line); padding: 10px 0; font-size: 15px; }
.legal-datos b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone); font-weight: 500; padding-top: 3px; }
.legal-datos span { color: var(--ink-soft); }

.legal-lista { margin: 0 0 14px; padding-left: 20px; }
.legal-lista li { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-bottom: 9px; }

/* La tabla de cookies puede no caber en móvil: que scrolle ELLA, y no la página. */
.tabla-scroll { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--line);
  border-radius: var(--radius); }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.legal-tabla th { text-align: left; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stone); font-weight: 500;
  padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.legal-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); vertical-align: top; line-height: 1.45; }
.legal-tabla tr:last-child td { border-bottom: 0; }

.legal-fecha { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--stone); }

@media (max-width: 860px) {
  .legal { padding: 20px 22px 60px; }
  .legal h1 { font-size: 30px; }
  .legal h2 { font-size: 19px; }
  .legal-datos li { grid-template-columns: 1fr; gap: 3px; }
}

/* --- Cookies ------------------------------------------------------------- */
/* Copiado del sistema de Lou.art (includes/cookie_consent.php): mismas piezas,
   mismas medidas y misma colocación. Los colores sí van con los tokens de la
   escuela —allí eran blanco y #111 a pelo— para que no parezca un injerto. La
   tipografía ya coincidía: las dos webs usan ABC Favorit Mono. */
.cookie-banner, .cookie-modal { font-family: var(--font-mono); color: var(--ink); z-index: 9999; }
/* El banner sale CENTRADO en la pantalla, no pegado al pie: en el pie mucha
   gente ni lo veía y seguía navegando sin decidir, así que su visita no se
   registraba (sin consentimiento no hay atribución). Centrado, la decisión se
   toma. Se apoya sobre un velo que oscurece la página para que se lea como lo
   que es: una elección que hay que tomar. */
.cookie-banner { position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(27,26,22,.42); }
/* El recuadro blanco de dentro. El banner es el velo; esto, la tarjeta. */
.cookie-banner > * { max-width: 520px; width: 100%; }
.cookie-banner-caja { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
  box-shadow: 0 18px 48px rgba(27,26,22,.28); }
.cookie-banner h3 { margin: 0 0 10px; font-size: 18px; }
.cookie-banner p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; }
.cookie-banner a, .cookie-banner a:visited, .cookie-banner a:hover, .cookie-banner a:active {
  color: var(--ink); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 8px 10px; font-family: var(--font-mono); font-size: 12px;
  cursor: pointer; width: auto; flex: 0 0 auto; }
.cookie-btn:hover { border-color: var(--stone); }
.cookie-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cookie-btn.primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
/* Botón flotante para volver a abrir las preferencias. Semitransparente para no
   pesar sobre el contenido, igual que en Lou.art. */
.cookie-manage { position: fixed; right: 16px; bottom: 16px; z-index: 9998;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(2px); color: var(--ink); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; padding: 8px 10px; cursor: pointer;
  display: none; width: auto; }
.cookie-manage:hover { background: var(--surface); }
.cookie-modal { position: fixed; inset: 0; background: rgba(27,26,22,.38); display: none;
  align-items: center; justify-content: center; padding: 16px; }
.cookie-modal-card { width: min(520px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.cookie-modal-card h3 { margin: 0 0 12px; font-size: 15px; }
.cookie-row { display: flex; justify-content: flex-start; align-items: center; gap: 12px;
  margin-bottom: 10px; font-size: 13px; }
.cookie-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: var(--gold-solid); }

/* --- Utilidades ---------------------------------------------------------- */
.spacer-sm { height: 24px; } .spacer-md { height: 40px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .hero, .lp-hero { grid-template-columns: 1fr; }
  /* En móvil el retrato no aporta y empujaría los botones fuera de pantalla:
     mandan el titular y las llamadas a la acción. Se oculta la figura entera
     (foto + pie), no solo la foto, para no dejar el pie suelto. */
  .hero-figura { display: none; }
  .grid-cursos, .pasos, .two-col { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; } .lp-hero h1 { font-size: 34px; }
  .nav, .hero, .section, .quote, .foot-band, .lp-hero, .crumbs { padding-left: 22px; padding-right: 22px; }
  .price-card { position: static; }

  /* --- Menú móvil (patrón de lou.art) ---
     Los enlaces se pliegan en un panel a lo ancho que cae bajo la barra, y
     aparece el botón hamburguesa. El panel va absolute para que se superponga
     al contenido en vez de empujarlo. */
  .nav { position: relative; }
  .nav-toggle { display: block; width: 28px; height: 22px; flex: 0 0 auto; }
  /* En móvil no cabe "Escuela de Salud" y "Dra. Lourdes Tomás" en la misma
     línea junto al botón: los apilamos para que ninguno se parta. Al ir
     apilados, la marca tiene todo el ancho y puede lucir más grande que en
     escritorio (21px). */
  .brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand .mark { font-size: 25px; }
  .brand .sub { font-size: 11px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 22px 20px;
    z-index: 50;
  }
  .nav-links.is-open { display: flex; }
  /* En el panel desplegado los enlaces son el contenido principal: más grandes
     que en la barra de escritorio (12,5px) y con más aire para pulsarlos. */
  .nav-links a, .nav-links .nav-salir { font-size: 15px; padding: 4px 0; }
  /* El nombre NO es un enlace: aquí se queda pequeño y encabeza el bloque de la
     cuenta, separado por una línea a todo lo ancho. En una columna, un nombre
     suelto entre enlaces se leería como uno más. */
  .nav-yo { font-size: 11px; max-width: none; align-self: stretch;
    padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--line); }
}

/* ============================================================================
   Oferta dual (contenido / + acompañamiento): ficha y checkout
   ========================================================================== */
/* Hero por síntoma: el H1 habla del síntoma; el nombre del curso queda arriba
   en el eyebrow. El <em> marca en dorado la parte más personal de la frase. */
.hero-sintoma { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.12; }
.hero-sintoma em { font-style: normal; color: var(--gold-text); }
.hero-apoyo { font-family: var(--font-display); font-size: clamp(19px, 2.8vw, 24px);
  line-height: 1.3; color: var(--ink-soft); margin: 10px 0 14px; }

/* «Qué hay dentro»: el temario por temas, con la clase donde se trabaja. */
.lp-temas { list-style: none; }
.lp-temas li { padding: 13px 0 13px 30px; position: relative;
  border-bottom: 1px dashed var(--line); font-size: 16px; }
.lp-temas li:last-child { border-bottom: 0; }
.lp-temas li::before { content: "→"; position: absolute; left: 0;
  color: var(--gold-solid); font-weight: bold; }
.lp-temas .ref { display: block; margin-top: 2px; font-family: var(--font-mono);
  font-size: 11px; color: var(--stone); }

/* La tarjeta del extra, bajo la del curso, en verde herbal. */
.price-card-acomp { margin-top: 16px; background: var(--herbal); color: var(--on-herbal);
  border-color: var(--herbal-2); }
.price-card-acomp .eyebrow { color: var(--gold-solid); }
.price-card-acomp .amt { color: var(--on-herbal); }
.price-card-acomp .amt small { color: var(--on-herbal-soft); }
.price-card-acomp .price-plazos { color: var(--on-herbal-soft);
  background: rgba(241,236,221,.08); }
/* El importe de los plazos hereda el verde herbal del tema claro y se vuelve
   invisible sobre la tarjeta oscura: aquí, en dorado. */
.price-card-acomp .price-plazos b { color: var(--gold-solid); }
.price-card-acomp ul li { color: var(--on-herbal); }
.price-card-acomp ul li b { color: var(--gold-solid); }
.price-card-acomp ul li strong { color: var(--gold-solid); font-weight: 600; }
.sin-tarjeta-nota, .nota-upgrade-mini { margin-top: 8px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone); }
.price-card-acomp .nota-upgrade-mini { color: var(--on-herbal-soft); text-transform: none;
  letter-spacing: 0; font-family: var(--font-body); font-size: 12.5px; }

/* Cierre con las dos ofertas en espejo (solo cuando hay acompañamiento). */
.lp-mini-planes { display: grid; grid-template-columns: 1fr 1.08fr; gap: 18px;
  max-width: 780px; margin: 22px auto 0; text-align: left; }
@media (max-width: 700px) { .lp-mini-planes { grid-template-columns: 1fr; } }
.lp-mini-plan { border: 1px solid rgba(241,236,221,.28); border-radius: 12px;
  padding: 22px 22px 20px; display: flex; flex-direction: column; }
.lp-mini-plan.oro { background: rgba(192,132,35,.13); border-color: var(--gold-solid); }
.lp-mini-plan .etq { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-solid); margin-bottom: 8px; }
.lp-mini-plan h3 { font-family: var(--font-display); font-weight: normal; font-size: 19px;
  color: var(--on-herbal); margin-bottom: 4px; }
.lp-mini-plan .pr { font-family: var(--font-display); font-size: 32px; color: var(--on-herbal); }
.lp-mini-plan .cond { font-family: var(--font-mono); font-size: 11.5px;
  color: var(--on-herbal-soft); margin: 4px 0 16px; flex: 1; }
.lp-mini-plan .mini-gratis { display: block; margin-top: 10px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--gold-solid); text-decoration: none; }
.lp-mini-plan .mini-gratis:hover { text-decoration: underline; }

/* Checkout: el selector de qué comprar y los datos del comprador directo. */
.selector-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 18px; }
@media (max-width: 520px) { .selector-producto { grid-template-columns: 1fr; } }
.selector-producto .opcion { text-align: left; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px;
  cursor: pointer; font-family: var(--font-body); }
.selector-producto .opcion.activa { border-color: var(--gold-solid);
  background: color-mix(in srgb, var(--gold-solid) 8%, var(--surface)); }
.selector-producto .op-nombre { display: block; font-family: var(--font-display); font-size: 17px; }
.selector-producto .op-precio { display: block; font-family: var(--font-mono);
  font-size: 15px; color: var(--gold-text); margin: 2px 0; }
.selector-producto .op-detalle { display: block; font-size: 12.5px; color: var(--stone); }
.datos-comprador { margin-bottom: 16px; text-align: left; }
.datos-comprador .eyebrow { text-align: left; }
.datos-comprador label { display: block; text-align: left; }
.datos-comprador .field-nota { text-align: left; }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row-2 { grid-template-columns: 1fr; } }
.field-nota { display: block; margin-top: 4px; font-size: 12.5px; color: var(--stone); }

/* Temario completo plegado: el resumen por temas ya hace el trabajo de venta;
   el detalle clase a clase se abre a demanda. */
.temario-plegable summary { list-style: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 16px 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.temario-plegable summary::-webkit-details-marker { display: none; }
.temario-plegable summary::after { content: "+"; margin-left: auto;
  font-family: var(--font-mono); font-size: 18px; color: var(--gold-solid); }
.temario-plegable[open] summary::after { content: "−"; }
.temario-plegable .tp-titulo { font-family: var(--font-display); font-size: 19px; }
.temario-plegable .tp-datos { font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; color: var(--stone); }
.temario-plegable[open] summary { margin-bottom: 14px; }


/* Las dos ofertas en el flujo (antes vivían en la columna derecha del hero). */
.precios-ficha { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; }
@media (max-width: 760px) { .precios-ficha { grid-template-columns: 1fr; } }
.precios-ficha .price-card { position: static; margin-top: 0; }

/* Prueba social sola y en grande (decisión de las maquetas V2.1): la ficha
   técnica vive en la tarjeta de precio; aquí solo lo que convence. */
.prueba-social { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: var(--surface-2); border-radius: 10px; padding: 30px 22px; text-align: center; }
@media (max-width: 560px) { .prueba-social { grid-template-columns: 1fr; } }
.prueba-social .ps-item b { display: block; font-family: var(--font-display);
  font-size: 42px; line-height: 1.05; color: var(--ink); }
.prueba-social .ps-item b small { font-size: 17px; color: var(--ink-soft); }
.prueba-social .ps-item > span { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.prueba-social .estrellas { display: block; font-size: 18px; letter-spacing: 4px;
  color: var(--line); margin-bottom: 2px; }
.prueba-social .estrellas .on { color: var(--gold-solid); }

/* «¿Es para ti?» sobre las FAQ, en una sola columna: aire entre ambos bloques
   para que se lean como dos secciones y no como un texto corrido. */
.bloque-para-ti { margin-bottom: 44px; max-width: 720px; }

/* «Quién te lo enseña»: la foto de Lourdes antes de los precios. En un curso
   de salud se compra confianza antes que temario. */
.quien-ensena { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; }
.quien-ensena img { width: 100%; height: auto; border-radius: 12px; display: block; }
.quien-ensena p { max-width: 58ch; }
.quien-ensena p + p { margin-top: 12px; }
.quien-ensena .btn { margin-top: 18px; }
@media (max-width: 700px) {
  .quien-ensena { grid-template-columns: 1fr; gap: 22px; }
  .quien-ensena img { max-width: 300px; margin: 0 auto; }
}

/* FAQ compactas: cada pregunta es un desplegable cerrado, en filas con la
   misma raya que tenía la lista abierta. El + / − dorado replica el del
   temario para que los dos desplegables de la página hablen igual. */
.qa-plegable { border-bottom: 1px solid var(--line); }
.qa-plegable summary { list-style: none; cursor: pointer; padding: 16px 0;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; }
.qa-plegable summary::-webkit-details-marker { display: none; }
.qa-plegable summary::after { content: "+"; margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 18px; font-weight: 400; color: var(--gold-solid); }
.qa-plegable[open] summary::after { content: "−"; }
.qa-plegable p { color: var(--ink-soft); padding: 0 0 18px; max-width: 62ch; }

/* Píldora «Masterclass»: la palabra envuelta en el bronce de su familia de
   carátulas, redondeada como un botón. Se usa en la miga de pan de la ficha
   y en la etiqueta de las tarjetas de la home. */
.pill-mc { display: inline-block; background: #5A4517; color: #F1ECDD !important;
  border-radius: 999px; padding: 3px 12px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; }
a.pill-mc:hover { background: #6d5620; }

/* La línea superior de las tarjetas del catálogo: altura común tenga o no la
   píldora Masterclass, para que todas las tarjetas midan lo mismo. */
.curso-body .k { align-items: center; min-height: 26px; }

/* Píldora «Curso» en Mis cursos: hermana de la de Masterclass, en el verde
   herbal de su familia de portadas. */
.pill-curso { display: inline-block; background: var(--herbal); color: var(--on-herbal) !important;
  border-radius: 999px; padding: 3px 12px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; }
a.pill-curso:hover { background: #3f5447; }

/* El título del curso en la miga, en tinta: cuando el hero es una variante
   personalizada, esta línea es lo ÚNICO que dice de qué curso se trata. */
.crumb-titulo { color: var(--ink); font-weight: 500; }

/* --- Mis preguntas (canal del acompañamiento) ---------------------------- */
.preg-aviso { border-radius: 10px; padding: 12px 16px; margin-bottom: 22px; font-size: 14.5px; }
.preg-aviso.ok  { background: rgba(51,68,58,.08); color: var(--herbal); border: 1px solid rgba(51,68,58,.25); }
.preg-aviso.mal { background: rgba(160,60,40,.07); color: #8a3a26; border: 1px solid rgba(160,60,40,.25); }

.preg-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.preg-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone); margin: 0 0 6px; }
.preg-select, .preg-texto { width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 15px; background: var(--paper); margin-bottom: 16px; }
.preg-texto { resize: vertical; }
.preg-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.preg-pie .muted { font-size: 13px; }

.preg-sin { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 60ch; }
.preg-sin p { margin: 0 0 12px; }

.preg-lista { margin-top: 34px; display: grid; gap: 18px; }
.preg-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.preg-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.preg-q { font-size: 15.5px; }
/* La respuesta, en la voz de la Dra.: banda herbal suave con su nombre. */
.preg-r { margin-top: 14px; background: rgba(51,68,58,.06); border-left: 3px solid var(--herbal);
  border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: 15px; }
.preg-r-quien { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--herbal); margin-bottom: 6px; }
.preg-pendiente { margin-top: 12px; font-family: var(--font-mono); font-size: 12px;
  color: var(--gold, #C08423); }

/* --- Hilos en Mis preguntas ---------------------------------------------- */
/* Mensajes de seguimiento del alumno: sangrados y con su fecha, para que la
   conversación se lea como tal (el primero es «la pregunta» y va limpio). */
.preg-q-seguimiento { margin-top: 14px; padding: 10px 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; }
.preg-q-quien { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.preg-r + .preg-q-seguimiento, .preg-q + .preg-r { margin-top: 14px; }

/* Respuesta recién llegada: anillo dorado + etiqueta «Nueva» esta visita. */
.preg-r-nueva { box-shadow: 0 0 0 2px rgba(192,132,35,.45); }
.preg-tag-nueva { display: inline-block; background: #C08423; color: #F1ECDD;
  border-radius: 999px; padding: 1px 8px; font-size: 10px; letter-spacing: .06em; }

/* Seguir la conversación: plegado discreto bajo el hilo. */
.preg-seguir { margin-top: 14px; }
.preg-seguir summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--herbal); }
.preg-seguir[open] summary { margin-bottom: 10px; }
.preg-seguir .preg-texto { margin-bottom: 10px; }

/* --- Hilos plegables en Mis preguntas ------------------------------------ */
/* La cabecera-resumen del hilo: titular de la pregunta + curso/fecha/nº de
   mensajes. El hilo entero vive plegado y solo se abre al tocarla. */
.preg-item > .preg-cab { cursor: pointer; list-style: none; }
.preg-item > .preg-cab::-webkit-details-marker { display: none; }
.preg-cab-texto { display: block; min-width: 0; }
.preg-cab-titulo { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.preg-cab-meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--stone); }
.preg-cuerpo { margin-top: 16px; }
.preg-tag-espera { flex-shrink: 0; display: inline-block; background: rgba(192,132,35,.14);
  color: #8a5f16; border-radius: 999px; padding: 2px 10px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
/* En la cabecera del hilo, la etiqueta «Nueva respuesta» a la escala del
   botón Ver/Ocultar: a 10px se perdía (lo señaló Sergio). */
.preg-cab .preg-tag-nueva { flex-shrink: 0; font-size: 12px; padding: 6px 16px;
  letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-mono); }

/* Quién escribe, bien visible: el nombre manda y la fecha acompaña en gris. */
.preg-quien { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.preg-quien-dra { color: var(--herbal); }
.preg-fecha { font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .04em; color: var(--stone); }

/* El circulito con la cara de la Dra. en sus mensajes del hilo. */
.preg-quien-dra { display: flex; align-items: center; gap: 8px; }
.preg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(51,68,58,.3); flex-shrink: 0; }

/* --- Ajustes del hilo tras las capturas de Sergio (2026-08-06) ----------- */
/* Cabecera del hilo: el flex vive en el span interior (Safari ignora
   display:flex sobre <summary> y la cabecera desaparecía). */
.preg-cab { list-style: none; cursor: pointer; }
.preg-cab::marker { content: ''; }
.preg-cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* El toggle es un botoncito con palabra, no un signo: «Ver» en verde cuando
   el hilo está plegado y «Ocultar» en contorno cuando está abierto. */
.preg-cab-toggle { flex-shrink: 0; display: inline-block; border-radius: 999px;
  padding: 6px 16px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--herbal); color: #F1ECDD; }
.preg-cab-toggle::after { content: 'Ver'; }
.preg-item[open] .preg-cab-toggle { background: transparent; color: var(--herbal);
  box-shadow: inset 0 0 0 1.5px var(--herbal); }
.preg-item[open] .preg-cab-toggle::after { content: 'Ocultar'; }

/* Mensajes en formato chat: la cara de la Dra. (el doble: 52px) a la
   izquierda y el texto PEGADO a ella; cajas compactas, sin aire de sobra. */
.preg-r { display: flex; align-items: flex-start; gap: 12px; }
.preg-avatar { width: 52px; height: 52px; }
.preg-r-cont { min-width: 0; flex: 1; }
.preg-quien-dra { display: block; }           /* ya no reparte la foto: va fuera */
.preg-quien { margin-bottom: 4px; }
.preg-msg { font-size: 16px; }
.preg-item { padding: 16px 18px; }
.preg-cuerpo { margin-top: 14px; display: grid; gap: 12px; }
.preg-r + .preg-q-seguimiento, .preg-q + .preg-r { margin-top: 0; }
.preg-q-seguimiento { margin-top: 0; }

/* Botones del hilo a escala del texto (se veían enormes en las capturas). */
.preg-seguir .btn, .preg-form .btn { padding: 9px 20px; font-size: 14px; }

/* Aviso de respuesta sin leer: el propio enlace del menú se convierte en
   «Nueva respuesta de la Dra.» con fondo de botón dorado redondeado. */
.nav-preg-nueva { background: #C08423; color: #F1ECDD !important;
  border-radius: 999px; padding: 6px 14px; }
.nav-preg-nueva:hover { background: #a97116; }

/* Hilo en pantallas estrechas: cara un punto menor y cajas más pegadas. */
@media (max-width: 560px) {
  .preg-avatar { width: 44px; height: 44px; }
  .preg-item { padding: 14px 14px; }
  .preg-cab-fila { flex-wrap: wrap; }
  .preg-cab-toggle { margin-left: auto; }
}

/* Selector de curso de la pregunta: botones grandes, no desplegable. El radio
   va oculto y la etiqueta hace de botón; el marcado se pinta en herbal. */
.preg-cursos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.preg-curso-btn input { position: absolute; opacity: 0; pointer-events: none; }
.preg-curso-btn span { display: block; padding: 12px 20px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--paper); font-size: 15px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.preg-curso-btn:hover span { border-color: var(--herbal); }
.preg-curso-btn input:checked + span { background: var(--herbal); color: #F1ECDD;
  border-color: var(--herbal); font-weight: 500; }
.preg-curso-btn input:focus-visible + span { outline: 2px solid #C08423; outline-offset: 2px; }



/* --- Valoración estilo Netflix (👍/👎 junto a Completar) ------------------ */
/* El grupo empuja a la derecha; Completar pierde entonces su auto para que
   los tres botones queden juntos. hidden manda sobre el display propio. */
.lesson-meta .valorar { margin-left: auto; display: inline-flex; gap: 8px; }
.lesson-meta .valorar[hidden] { display: none; }
.lesson-meta .valorar:not([hidden]) ~ .btn-completar { margin-left: 0; }
.btn-valorar { margin-left: 0; }
.btn-valorar .tic { font-size: 13px; }
@media (max-width: 560px) {
  .lesson-meta .valorar { margin-left: 0; }
}

/* Prueba social agregada (lo que dicen las encuestas de fin de curso). No usa
   el formato de cita: no es la voz de un alumno, es la de la escuela. */
.lp-encuesta { max-width: 64ch; }
.lp-encuesta p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.lp-encuesta p:first-child { color: var(--ink); }

/* --- Clases por WhatsApp -------------------------------------------------- */
.wa-activa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; background: rgba(51,68,58,.06); border: 1px solid rgba(51,68,58,.2);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 22px; }
.wa-activa-t { font-size: 16px; font-weight: 500; color: var(--ink); }
.wa-activa-s { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.wa-baja { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone); text-decoration: underline; }
.wa-baja:hover { color: var(--ink); }
.wa-fila { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
@media (max-width: 560px) { .wa-fila { grid-template-columns: 1fr; } }
/* El consentimiento se lee: ni letra pequeña ni casilla premarcada. */
.wa-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 20px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.wa-consent input { margin-top: 3px; flex-shrink: 0; }

/* La invitación dentro del reproductor, al terminar una clase. */
.wa-oferta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin: 22px 0 0; padding: 16px 20px; border-radius: 14px;
  background: rgba(51,68,58,.06); border: 1px solid rgba(51,68,58,.18); }
.wa-oferta-t { font-size: 15.5px; color: var(--ink); }
.wa-oferta-s { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }