/* ============================================================
   Academia Dany Teruggi — sistema de diseño
   Marino profundo sobre papel cálido. Serif de titulares, lectura larga cómoda.

   La paleta es azul porque así la quiso la autora, y el papel siguió siendo
   cálido a propósito: marino sobre marfil se lee como un libro bien impreso,
   mientras que marino sobre blanco frío se lee como un tablero de software.

   🔴 Ningún valor de aquí se cambia a ojo. `node scripts/contraste.mjs` mide
   cada pareja que de verdad se pinta en pantalla, en los dos temas, y falla si
   alguna reprueba AA. Ya pasó una vez: un token aclarado porque "se veía bien"
   dejó la letra chica en 3.95:1 y nadie lo notó mirando.
   ============================================================ */

:root {
  /* Tinta y papel */
  --tinta:        #1F262F;
  --tinta-media:  #4C5763;
  /* 🔴 La letra chica (.mini, .pista, figcaption). El peor caso NO es el fondo
     de la página sino --crema-hond, que es el más cálido: ahí este valor mide
     4.87:1. Aclararlo un paso lo tira por debajo de 4.5 y el síntoma es que
     "se ve elegante". */
  --tinta-suave:  #5E6874;
  --papel:        #FFFFFF;
  --crema:        #FDF9F4;
  --crema-hond:   #F3EDE4;
  --linea:        #E7DFD5;
  --linea-fuerte: #D3C7B8;
  /* 🔴 El borde de lo que hay que poder VER para usarlo: campos de formulario y
     botones de contorno. --linea-fuerte mide 1.7:1, que como hairline decorativo
     está bien y como borde de un input no: WCAG pide 3:1 para el contorno de un
     control. Este token existe para esos cuatro lugares, no para adornar. */
  --borde-control:#8A8678;

  /* Marca */
  --marino:        #1B3A64;
  --marino-osc:    #12294A;
  --marino-claro:  #E4EBF4;
  --cielo:         #1C6499;
  --cielo-osc:     #124B77;
  /* 🔴 SOLO decorativo: degradados, cintas, trazos. Mide 4.09:1 sobre el papel,
     así que ningún texto va en este color. Para texto azul claro va --cielo. */
  --cielo-vivo:    #2C7FBF;
  --cielo-claro:   #E2EEF8;
  --verdemar:      #1F6B66;
  --verdemar-claro:#DFEDEB;
  --indigo:        #414579;
  --indigo-claro:  #E8E8F4;
  /* La familia cálida se quedó, pero ya no es marca: es el aviso. Es el único
     color tibio que sobrevive al cambio a azul, y por eso destaca cuando aparece. */
  --ambar:          #9A6600;
  --ambar-claro:    #FBEEDA;
  /* 🔴 El texto que va ENCIMA de un relleno de marca saturado (botón principal,
     marca de paso completo). No puede ser #fff fijo: en tema oscuro --marino
     vale un azul claro y el blanco encima no se leería. Aquí el blanco mide
     11.44:1 y allá la tinta oscura mide 8.04:1. */
  --sobre-marca:    #FFFFFF;

  /* Semáforo */
  --exito:  #1F6B4A;
  --espera: #835500;
  --falla:  #A32B1E;

  /* Tapas de taller
     🔴 Estos NO se redefinen en tema oscuro y no es un olvido: una tapa es
     imagen, y una fotografía tampoco se invierte al poner el modo oscuro. El
     texto encima es siempre claro y cae siempre sobre el extremo -a, el oscuro,
     donde el blanco mide de 9.5:1 para arriba. */
  --tapa-marino-a:   #12294A;  --tapa-marino-b:   #24507F;
  --tapa-cielo-a:    #124B77;  --tapa-cielo-b:    #2C7FBF;
  --tapa-verdemar-a: #14413E;  --tapa-verdemar-b: #2A7F78;
  --tapa-indigo-a:   #2E3159;  --tapa-indigo-b:   #565BA0;

  /* Formas */
  --r-chico: 8px;
  --r:       14px;
  --r-grande:22px;
  --sombra-1: 0 1px 2px rgba(20,30,45,.06), 0 2px 8px rgba(20,30,45,.05);
  --sombra-2: 0 2px 6px rgba(20,30,45,.07), 0 12px 32px rgba(20,30,45,.09);
  --sombra-3: 0 8px 24px rgba(20,30,45,.10), 0 24px 64px rgba(20,30,45,.12);

  /* Ritmo */
  --ancho:      1160px;
  --ancho-texto: 68ch;
  --borde-movil: 20px;

  /* Tipografía */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --tinta:        #E8EEF5;
    --tinta-media:  #AFBCCB;
    --tinta-suave:  #8A97A6;
    --papel:        #171E27;
    --crema:        #111820;
    --crema-hond:   #1E2733;
    --linea:        #2B3644;
    --linea-fuerte: #3D4A5A;
    --borde-control:#667485;
    --marino:        #7FB0E8;
    --marino-osc:    #A6C8F0;
    --marino-claro:  #1B2C43;
    --cielo:         #6FB6E8;
    --cielo-osc:     #9CCDF0;
    --cielo-vivo:    #6FB6E8;
    --cielo-claro:   #142A3C;
    --verdemar:      #6BB7AE;
    --verdemar-claro:#13302E;
    --indigo:        #9BA0DC;
    --indigo-claro:  #22243F;
    --ambar:          #D9A441;
    --ambar-claro:    #372914;
    --sobre-marca:    #0E1620;
    --exito:  #6FBF92;
    --espera: #D9A441;
    --falla:  #E58374;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
    --sombra-3: 0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.45);
  }
}
:root[data-tema='oscuro'] {
  --tinta:        #E8EEF5;
  --tinta-media:  #AFBCCB;
  --tinta-suave:  #8A97A6;
  --papel:        #171E27;
  --crema:        #111820;
  --crema-hond:   #1E2733;
  --linea:        #2B3644;
  --linea-fuerte: #3D4A5A;
  --borde-control:#667485;
  --marino:        #7FB0E8;
  --marino-osc:    #A6C8F0;
  --marino-claro:  #1B2C43;
  --cielo:         #6FB6E8;
  --cielo-osc:     #9CCDF0;
  --cielo-vivo:    #6FB6E8;
  --cielo-claro:   #142A3C;
  --verdemar:      #6BB7AE;
  --verdemar-claro:#13302E;
  --indigo:        #9BA0DC;
  --indigo-claro:  #22243F;
  --ambar:          #D9A441;
  --ambar-claro:    #372914;
  --sobre-marca:    #0E1620;
  --exito:  #6FBF92;
  --espera: #D9A441;
  --falla:  #E58374;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  --sombra-3: 0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.45);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--marino-osc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marino); }
img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 2.4rem 0; }

:focus-visible {
  outline: 3px solid var(--marino);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- estructura ---------- */
.envoltura { width: min(100% - var(--borde-movil) * 2, var(--ancho)); margin-inline: auto; }
.angosto   { width: min(100% - var(--borde-movil) * 2, 760px); margin-inline: auto; }
.seccion   { padding: clamp(3rem, 7vw, 6rem) 0; }
.pila      { display: grid; gap: 1rem; }
.fila      { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.entre     { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.centro    { text-align: center; }
.crece     { flex: 1 1 auto; }

.rejilla { display: grid; gap: 1.5rem; }
/* Una sola columna a cualquier ancho. Existe para el bloque del catálogo que
   trae un solo taller: dejarlo en una rejilla de dos se lee como si faltara la
   otra tarjeta. */
.rejilla-1 { grid-template-columns: 1fr; }
@media (min-width: 720px)  { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .rejilla-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- bloques del catálogo ----------
   Los siete talleres se sirven en dos tandas con su propio encabezado. La
   línea de arriba solo aparece a partir del segundo bloque: en el primero
   duplicaría el borde que ya trae la sección. */
.grupo-catalogo + .grupo-catalogo {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(2.2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--linea);
}
.grupo-cabeza { margin-bottom: 1.9rem; max-width: 60ch; }
.grupo-cabeza .ceja { margin-bottom: .7rem; }
.grupo-cabeza .entrada { margin: 0; }

/* ---------- tipografía auxiliar ---------- */
.ceja {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marino); margin-bottom: .9rem;
}
.ceja::before { content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.entrada { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--tinta-media); line-height: 1.6; }
.chico   { font-size: .88rem; color: var(--tinta-media); }
.mini    { font-size: .8rem; color: var(--tinta-suave); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .97rem;
  padding: .82rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--marino); color: var(--sobre-marca); box-shadow: var(--sombra-1); }
.btn-principal:hover { background: var(--marino-osc); color: var(--sobre-marca); box-shadow: var(--sombra-2); }
.btn-borde { background: transparent; color: var(--tinta); border-color: var(--borde-control); }
.btn-borde:hover { border-color: var(--tinta); color: var(--tinta); background: var(--crema-hond); }
.btn-suave { background: var(--crema-hond); color: var(--tinta); }
.btn-suave:hover { background: var(--linea); color: var(--tinta); }
.btn-texto { background: none; padding: .4rem .2rem; color: var(--marino-osc); }
.btn-grande { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-bloque { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: var(--sombra-1);
}
.tarjeta-plana { box-shadow: none; }
a.tarjeta { text-decoration: none; color: inherit; display: block; }
a.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
a.tarjeta { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* ---------- etiquetas ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--crema-hond); color: var(--tinta-media);
  border: 1px solid var(--linea);
}
/* Los cuatro tonos de marca. No son decoración suelta: cada uno le toca a una
   etapa de la vida en el catálogo (niñez, adolescencia, juventud, adultos), así
   que el color de la insignia ya dice de qué taller se está hablando.
   El mapa vive en js/api.js (TONO_POR_CURSO) y aquí solo viven los colores. */
.etiqueta-marino    { background: var(--marino-claro);    color: var(--marino-osc);    border-color: transparent; }
.etiqueta-cielo     { background: var(--cielo-claro);     color: var(--cielo-osc);     border-color: transparent; }
.etiqueta-verdemar  { background: var(--verdemar-claro);  color: var(--verdemar);      border-color: transparent; }
.etiqueta-indigo    { background: var(--indigo-claro);    color: var(--indigo);        border-color: transparent; }
/* 🔴 La etiqueta ámbar NO lleva var(--ambar) de texto: el ámbar saturado sobre su
   propio tinte mide 3.4:1 y esta letra es de .76rem, o sea texto normal para la
   WCAG. --espera es el mismo ámbar en su versión legible, y en oscuro también pasa. */
.etiqueta-ambar     { background: var(--ambar-claro);     color: var(--espera);        border-color: transparent; }
.etiqueta-exito     { background: var(--verdemar-claro);  color: var(--exito);         border-color: transparent; }
.etiqueta-espera    { background: var(--ambar-claro);     color: var(--espera);        border-color: transparent; }
.etiqueta-falla     { background: var(--marino-claro);    color: var(--falla);         border-color: transparent; }

/* ---------- avisos ---------- */
.aviso {
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  border: 1px solid var(--linea);
  background: var(--crema-hond);
  font-size: .94rem;
  line-height: 1.55;
}
.aviso strong { font-weight: 700; }
.aviso-simulacion {
  background: var(--ambar-claro); border-color: color-mix(in srgb, var(--ambar) 35%, transparent);
  color: var(--espera);
}
.aviso-error   { background: color-mix(in srgb, var(--falla) 10%, var(--papel)); border-color: color-mix(in srgb, var(--falla) 35%, transparent); color: var(--falla); }
.aviso-exito   { background: var(--verdemar-claro); border-color: color-mix(in srgb, var(--exito) 35%, transparent); color: var(--exito); }
.aviso p:last-child { margin-bottom: 0; }

/* ---------- formularios ---------- */
.campo { display: grid; gap: .38rem; margin-bottom: 1.05rem; }
.campo > label { font-size: .88rem; font-weight: 600; color: var(--tinta-media); }
input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
select, textarea {
  font: inherit; font-size: 1rem;
  padding: .78rem .95rem;
  border: 1px solid var(--borde-control);
  border-radius: var(--r-chico);
  background: var(--papel); color: var(--tinta);
  width: 100%;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--marino); outline: none; box-shadow: 0 0 0 3px var(--marino-claro); }
.pista { font-size: .82rem; color: var(--tinta-suave); }
.marca-fila { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; }
.marca-fila input { margin-top: .28rem; flex: 0 0 auto; width: auto; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-dentro { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .8rem 0; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); }
.logo-marca { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.1; }
.logo-sub { display: block; font-family: var(--texto); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; }
.logo-sello {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--marino), var(--cielo-vivo));
  color: var(--sobre-marca); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.menu { display: flex; align-items: center; gap: .4rem; }
.menu a { font-size: .92rem; font-weight: 500; color: var(--tinta-media); text-decoration: none; padding: .5rem .75rem; border-radius: 999px; }
.menu a:hover { background: var(--crema-hond); color: var(--tinta); }
/* 🔴 `.menu a` (0,1,1) le gana a `.btn-principal` (0,1,0): sin esto, «Crear
   cuenta» salía con la letra gris de los enlaces sobre el marino (2:1, reprobado)
   y al pasar el ratón el botón se volvía crema. El botón del menú es botón. */
.menu a.btn-principal { background: var(--marino); color: var(--sobre-marca); white-space: nowrap; }
.menu a.btn-principal:hover { background: var(--marino-osc); color: var(--sobre-marca); }
@media (max-width: 760px) { .menu .ocultar-movil { display: none; } }
/* Las pestañas del panel: en el teléfono, una fila que se desliza. 🔴 Desde
   900 px se acomodan en dos renglones si no caben: con las 13 de la ronda 2
   (Encuestas y Preguntas frecuentes), «Credenciales» y «Equipo» quedaban
   escondidas a la derecha incluso a 1440 px, y en escritorio nadie desliza
   una barra que parece completa. */
.pestanas-panel { flex-wrap: nowrap; overflow-x: auto; }
@media (min-width: 900px) { .pestanas-panel { flex-wrap: wrap; overflow-x: visible; } }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--linea); background: var(--crema-hond); padding: 3rem 0 2rem; margin-top: 4rem; }
.pie a { color: var(--tinta-media); text-decoration: none; }
.pie a:hover { color: var(--marino-osc); text-decoration: underline; }

/* Las columnas del pie (ronda 2: se sumaron «Sígueme» y el contacto de Dany).
   🔴 Rejilla con áreas y NO un flex que se reparte solo: con cinco columnas el
      flex dejaba el correo en una columna de 150 px, donde
      «hola@danyteruggi.spdigital.mx» (unos 240 px) no cabe y se salía de la
      pantalla del teléfono.
   · Teléfono y tableta: la marca arriba; «Los talleres» (la lista larga) en su
     columna y «Legal» y «Sígueme» apiladas a su lado; el contacto a todo lo ancho.
   · Escritorio: cuatro columnas, con el contacto debajo de la marca, que es la
     columna ancha. */
.pie-rejilla {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "marca    marca"
    "talleres legal"
    "talleres redes"
    "contacto contacto";
  align-items: start;
}
.pie-marca     { grid-area: marca; max-width: 42ch; }
.pie-talleres  { grid-area: talleres; }
.pie-legal     { grid-area: legal; }
.pie-redes     { grid-area: redes; }
.pie-contacto  { grid-area: contacto; }
.pie-col { gap: .5rem; min-width: 0; }
.pie-titulo { color: var(--tinta); }
/* El <wbr> después de la arroba es el primer corte; esto es el último seguro. */
.pie-correo { overflow-wrap: anywhere; }
.pie-red {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  justify-self: start;
}
.pie-red svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (min-width: 1000px) {
  .pie-rejilla {
    column-gap: 2.5rem;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "marca    talleres legal redes"
      "contacto talleres legal redes";
  }
}

/* ---------- barra de avance ---------- */
.barra { height: 8px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px; background: var(--marino); transition: width .4s ease; }
.barra-fina { height: 5px; }

/* ---------- lienzo de lectura ---------- */
.lectura { max-width: var(--ancho-texto); font-size: 1.08rem; line-height: 1.78; }
.lectura h3 { margin-top: 2.2rem; font-size: 1.4rem; }
.lectura h4 { margin-top: 1.8rem; font-size: 1.1rem; color: var(--marino-osc); font-family: var(--texto); font-weight: 700; letter-spacing: 0; }
.lectura ul, .lectura ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.lectura li { margin-bottom: .55em; }
.lectura blockquote {
  margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--marino);
  font-family: var(--display); font-size: 1.16rem; line-height: 1.5; color: var(--tinta-media);
}
.lectura table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .93rem; }
.lectura th, .lectura td { border: 1px solid var(--linea); padding: .7rem .8rem; text-align: left; vertical-align: top; }
.lectura th { background: var(--crema-hond); font-weight: 700; }
.tabla-rueda { overflow-x: auto; }
/* 🔴 Un carril con tabindex (tabla ancha del panel) suele vivir dentro de una
   .tarjeta con overflow:hidden, que recorta el contorno de foco por fuera: se
   dibuja hacia adentro para que quien navega con teclado vea dónde está. */
.tabla-rueda:focus-visible { outline-offset: -3px; }

.lectura .nota, .lectura .clave, .lectura .voz {
  border-radius: var(--r); padding: 1.05rem 1.2rem; margin: 1.6rem 0; font-size: 1rem; line-height: 1.6;
}
.lectura .nota  { background: var(--crema-hond); border-left: 3px solid var(--linea-fuerte); }
.lectura .clave { background: var(--marino-claro); border-left: 3px solid var(--marino); }
.lectura .voz   {
  background: var(--verdemar-claro); border-left: 3px solid var(--verdemar);
  font-family: var(--display); font-size: 1.1rem;
}
.lectura .voz::before {
  content: 'Para leer en voz alta';
  display: block; font-family: var(--texto); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verdemar); margin-bottom: .5rem;
}
.lectura p:last-child, .lectura ul:last-child, .lectura ol:last-child { margin-bottom: 0; }

/* ---------- marco del video ---------- */
.marco-video {
  border-radius: var(--r); overflow: hidden; background: #0E1620;
  aspect-ratio: 16 / 9; display: grid; place-items: center; position: relative;
}
.marco-video video, .marco-video iframe { width: 100%; height: 100%; border: 0; }
.video-reservado {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #1C2A3D, #0E1620);
  display: grid; place-items: center; text-align: center; padding: 1.5rem; color: #CFDAE6;
}
.video-reservado .glifo {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto .85rem;
  border: 2px dashed rgba(232,217,207,.45); display: grid; place-items: center; font-size: 1.3rem;
}
.video-reservado b { display: block; font-family: var(--display); font-size: 1.2rem; margin-bottom: .3rem; color: #EEF4FA; }
.video-reservado span { font-size: .86rem; color: #C3AEA3; line-height: 1.5; display: block; max-width: 46ch; margin-inline: auto; }
/* 🔴 El aviso de «video en producción» no cabe en 16:9 a 375 px (188 px de
   alto) y overflow:hidden lo cortaba a media frase. Con overflow visible, el
   aspect-ratio deja crecer la caja hasta su contenido (con hidden no: su
   mínimo automático vale 0), y el redondeo pasa al aviso mismo. */
.marco-reservado { overflow: visible; }
.marco-reservado .video-reservado { border-radius: inherit; }

/* ---------- lista de pasos del aula ---------- */
.paso-fila {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: var(--r);
  border: 1px solid transparent; text-decoration: none; color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.paso-fila:hover { background: var(--crema-hond); }
.paso-fila.abierto { border-color: var(--linea); background: var(--papel); }
.paso-fila.bloqueado { opacity: .55; cursor: not-allowed; }
.paso-fila.actual { border-color: var(--marino); background: var(--marino-claro); }
.paso-marca {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: var(--crema-hond); color: var(--tinta-media); border: 1px solid var(--linea);
}
.paso-fila.completo .paso-marca { background: var(--exito); color: var(--sobre-marca); border-color: transparent; }
.paso-titulo { font-weight: 600; font-size: .98rem; line-height: 1.35; }
.paso-meta { font-size: .8rem; color: var(--tinta-suave); margin-top: .15rem; }

/* ---------- ejercicios ---------- */
.ejercicio { border: 1px solid var(--linea); border-radius: var(--r); padding: 1.25rem 1.35rem; background: var(--papel); margin-bottom: 1.2rem; }
.ejercicio-num { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--marino); margin-bottom: .5rem; }
.ejercicio-pregunta { font-weight: 600; font-size: 1.04rem; line-height: 1.45; margin-bottom: .9rem; }
.opciones { display: grid; gap: .55rem; }
.opcion {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem .9rem; border: 1px solid var(--borde-control); border-radius: var(--r-chico);
  cursor: pointer; background: var(--papel); font-size: .97rem; line-height: 1.45;
  transition: border-color .15s ease, background .15s ease;
}
.opcion:hover { border-color: var(--tinta-suave); }
.opcion input { margin-top: .25rem; flex: 0 0 auto; width: auto; }
.opcion.elegida { border-color: var(--marino); background: var(--marino-claro); }
.opcion.bien { border-color: var(--exito); background: var(--verdemar-claro); }
.opcion.mal  { border-color: var(--falla); background: color-mix(in srgb, var(--falla) 10%, var(--papel)); }
.pares { display: grid; gap: .6rem; }
.par { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: var(--r-chico); }
.par select { width: auto; min-width: 190px; padding: .5rem .7rem; }
.veredicto { margin-top: .85rem; font-size: .9rem; font-weight: 600; }
.veredicto.bien { color: var(--exito); }
.veredicto.mal  { color: var(--falla); }

/* ---------- pie de lección (la puerta) ---------- */
.puerta {
  position: sticky; bottom: 0; z-index: 30;
  margin-top: 2.5rem;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
  padding: .95rem 0;
}
.puerta-dentro { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.puerta-motivo { font-size: .88rem; color: var(--tinta-media); display: flex; align-items: center; gap: .5rem; }
.reloj { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--marino); }

/* ---------- centinela de lectura ---------- */
.centinela { height: 1px; }

/* ---------- utilidades ---------- */
.cargando { display: grid; place-items: center; padding: 4rem 1rem; color: var(--tinta-suave); }
.oculto { display: none !important; }
.cinta-marca { height: 4px; background: linear-gradient(90deg, var(--marino), var(--cielo-vivo), var(--verdemar)); }

@media print {
  .cabecera, .pie, .puerta, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   FOTOGRAFÍA Y MARCA — agregado el 2026-09-16
   Todo lo de aquí abajo es nuevo y no redefine nada de arriba: son las
   piezas que la portada necesita ahora que hay imagen real (hero partido,
   tarjetas con tapa, banda ancha, retrato) más el logo incrustado.
   Nada de colores en crudo salvo los del velo y el texto sobre foto, que
   por definición no dependen del tema: la foto es oscura en los dos.
   ============================================================ */

/* ---------- el logo real, incrustado ----------
   El SVG de "Hablemos de Sexualidad" tiene fill: currentColor, así que se
   pinta con `color` y un solo token resuelve los dos temas: --marino vale
   #1B3A64 sobre papel claro y #7FB0E8 sobre papel oscuro. Por eso NO puede ir
   en un <img>: un <img> no hereda currentColor y en tema oscuro quedaría
   invisible o forzaría un segundo archivo. */
.logo-hs {
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  color: var(--marino);
}
a.logo-hs:hover { color: var(--marino-osc); }
/* El ancho lo pone el atributo width que escribe api.js (130 px en la cabecera,
   152 px en el pie); la altura sale sola del viewBox con el height:auto de la
   regla base de img/svg. Aquí solo va lo que el atributo no puede decir. */
.logo-svg { color: inherit; }
.logo-nota {
  font-size: .74rem;
  line-height: 1.35;
  color: var(--tinta-suave);
  font-weight: 500;
  text-wrap: balance;
}
@media (max-width: 480px) {
  .cabecera .logo-svg { width: 104px; }
  .cabecera .logo-nota { font-size: .68rem; }
}

/* ---------- hero partido ---------- */
.hero {
  border-bottom: 1px solid var(--linea);
  background: radial-gradient(1100px 460px at 12% -12%, var(--marino-claro), transparent 70%);
  padding-top: clamp(2rem, 5vw, 4rem);
}
.hero-rejilla { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); align-items: center; }
/* Un hijo de rejilla nace con min-width:auto y no se deja encoger por debajo de
   su contenido: sin esto, una palabra larga del titular ensancha la columna y
   empuja la página a lo ancho en el teléfono. */
.hero-texto { min-width: 0; }
/* En el teléfono la foto va ARRIBA aunque en el HTML vaya después: el orden del
   documento deja primero el titular, que es lo que tiene que leer un lector de
   pantalla y lo que tiene que indexar un buscador. */
.hero-foto { order: -1; }
.hero-foto {
  margin: 0;
  border-radius: clamp(18px, 3vw, 28px);
  overflow: hidden;
  box-shadow: var(--sombra-3);
  background: var(--crema-hond);
}
/* 🔴 El banner (hero-d, ronda 2) trae la frase de Dany QUEMADA en la imagen, del
   lado derecho. Cualquier recorte se come la frase, así que va completa y en SU
   proporción (4:3) en todos los anchos: nada de `cover` ni de un aspect-ratio
   distinto por pantalla, como tenía el carrusel. `contain` es el seguro por si
   algún día se cuela otra foto con otra proporción: se ve entera, con franjas,
   antes que mocha. */
.hero-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 1049;
  object-fit: contain;
}

/* ---------- carrusel de la portada ----------
   Las láminas se apilan en la MISMA celda de rejilla. Con posición absoluta el
   contenedor se quedaría sin altura y la página daría el brinco al montar el JS;
   así la altura la sigue poniendo la imagen, como cuando era una sola foto. */
.hero-carrete { display: grid; }
.hero-carrete > .hero-lamina { grid-area: 1 / 1; }

/* Sin JS, o mientras no monta, la segunda lámina está debajo y no se ve. El JS
   agrega .carrusel-vivo y a partir de ahí manda la opacidad.

   🔴 Aquí se anima SOLO la opacidad, nunca `visibility`. Parece más elegante
      transicionar las dos juntas, pero entonces lo que se ve en pantalla depende
      de que la transición LLEGUE AL FINAL. Si el navegador congela la línea de
      tiempo (una pestaña que no pinta, una captura, un equipo con la animación
      atascada), la lámina entrante se queda en opacidad 0 y la saliente ya se
      marchó: la portada se queda en NEGRO. Comprobado en vivo, no en teoría.
      Con opacidad sola, el peor caso es que se vean las dos a la vez, y como
      están apiladas eso significa ver una foto. Una foto de más nunca es un
      hueco. */
.hero-lamina { opacity: 0; }
.hero-lamina.es-actual { opacity: 1; }
.carrusel-vivo .hero-lamina {
  transition: opacity .9s ease;
  /* La lámina que no toca sigue en el DOM y hay que sacarla del camino del
     puntero; de leerla se encarga el aria-hidden que pone el JS. */
  pointer-events: none;
}
.carrusel-vivo .hero-lamina.es-actual { pointer-events: auto; }

.hero-puntos {
  position: absolute;
  z-index: 2;
  right: clamp(.8rem, 2vw, 1.1rem);
  bottom: clamp(.8rem, 2vw, 1.1rem);
  display: flex;
  gap: .45rem;
  padding: .4rem .55rem;
  border-radius: 999px;
  /* El velo es lo que garantiza que los puntos se vean sobre cualquier foto:
     hay portadas con cielo blanco justo en esa esquina. */
  background: rgba(20, 14, 12, .52);
  backdrop-filter: blur(6px);
}
.hero-punto {
  appearance: none;
  border: 0;
  padding: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 246, 239, .45);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.hero-punto:hover { background: rgba(238, 244, 250, .75); }
.hero-punto[aria-current="true"] { background: #EEF4FA; transform: scale(1.25); }
.hero-punto:focus-visible { outline: 2px solid #EEF4FA; outline-offset: 3px; }

/* La figura es el ancla de los puntos. */
.hero-foto[data-carrusel] { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .carrusel-vivo .hero-lamina { transition-duration: .01ms; }
}
/* En tableta la foto sigue arriba y a todo el ancho: a 768 px mide 545 px de
   alto y el titular todavía entra en la primera pantalla de una tableta vertical.
   En escritorio la columna de la foto es un poco más ancha que la del texto:
   la frase quemada es letra, y a menos de 520 px se empieza a achicar de más. */
@media (min-width: 900px) {
  .hero-rejilla {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .hero-foto { order: 0; }
}

/* ---------- tarjeta de taller con tapa ----------
   Se escribe con a.tarjeta-curso, no con .tarjeta-curso: la regla que hay que
   ganarle es `a.tarjeta { display: block }`, que tiene una clase y un elemento.
   Con la clase sola esta tarjeta se quedaría en block y el pie no se pegaría
   abajo. */
a.tarjeta-curso {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarjeta-tapa { background: var(--crema-hond); }
.tarjeta-tapa img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .4s ease;
}
a.tarjeta-curso:hover .tarjeta-tapa img { transform: scale(1.035); }

/* ---------- la tapa dibujada (talleres sin fotografía) ----------
   Mide exactamente lo mismo que una foto, para que la rejilla no se note
   mezclada. El degradado va del tono oscuro al claro en diagonal, y la edad
   se queda del lado oscuro. */
.tapa-dibujada {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(118deg, var(--tapa-a) 0%, var(--tapa-a) 34%, var(--tapa-b) 100%);
  display: flex; align-items: center;
}
/* --escena es el fondo sobre el que se presenta la portada de un LIBRO
   (.tapa-libro, más abajo). A diferencia de --tapa-*, sí sigue al tema: el
   libro es la imagen, el fondo es superficie. */
.tono-marino   { --tapa-a: var(--tapa-marino-a);   --tapa-b: var(--tapa-marino-b);   --escena: var(--marino-claro); }
.tono-cielo    { --tapa-a: var(--tapa-cielo-a);    --tapa-b: var(--tapa-cielo-b);    --escena: var(--cielo-claro); }
.tono-verdemar { --tapa-a: var(--tapa-verdemar-a); --tapa-b: var(--tapa-verdemar-b); --escena: var(--verdemar-claro); }
.tono-indigo   { --tapa-a: var(--tapa-indigo-a);   --tapa-b: var(--tapa-indigo-b);   --escena: var(--indigo-claro); }
.tapa-motivo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: transform .6s ease;
}
a.tarjeta-curso:hover .tapa-motivo { transform: scale(1.06) translateX(-1.5%); }
.tapa-edad {
  position: relative;
  margin: 0; padding-inline: clamp(1.3rem, 3.4vw, 2.4rem);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.tapa-edad small {
  display: block;
  margin-top: .45rem;
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.tapa-edad small:empty { display: none; }

/* ---------- la portada de un LIBRO (talleres 2 a 8, ronda 2) ----------
   🔴 La portada trae su título impreso: NO se recorta ni se le encima nada. La
      caja es la misma 16:9 de las fotos (para que la rejilla no brinque) y el
      libro va dentro con `contain`, completo, con aire alrededor, sobre el fondo
      claro del tono de su etapa: un libro sobre la mesa, no una foto a sangre.
   🔴 La sombra es `drop-shadow` y NO `box-shadow`: con `contain` la caja del <img>
      es la caja entera, más ancha que el libro, y un box-shadow se pintaría
      alrededor de un rectángulo vacío. drop-shadow sigue lo que SÍ se pinta. La
      primera sombra, de 1 px, es el canto: las portadas son casi blancas y sin él
      se funden con el fondo claro.
   Las reglas llevan `.tarjeta-tapa.tapa-libro img` para ganarle a
   `.tarjeta-tapa img` (la de las fotos) sin importar el orden. */
.tapa-libro {
  background:
    radial-gradient(120% 85% at 50% 30%, color-mix(in srgb, var(--papel) 45%, transparent), transparent 72%),
    var(--escena, var(--crema-hond));
}
.tarjeta-tapa.tapa-libro img {
  object-fit: contain;
  padding: clamp(.9rem, 2.6vw, 1.5rem) clamp(1rem, 3vw, 1.8rem);
  filter: drop-shadow(0 0 1px rgba(20, 30, 45, .30)) drop-shadow(0 10px 14px rgba(20, 30, 45, .22));
  transition: transform .4s ease;
}
/* El libro VERTICAL (Taller 8, 4:5) en una caja 16:9 de teléfono quedaba de 150 px
   de alto. Abajo de 720 px las rejillas son de una sola columna, así que darle
   una caja más alta no desalinea a ninguna vecina. */
@media (max-width: 719px) {
  .tarjeta-tapa.tapa-libro-vertical img { aspect-ratio: 4 / 3; }
}
.tarjeta-cuerpo {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Empuja el botón al fondo para que las dos tarjetas lo tengan a la misma
   altura aunque los resúmenes midan distinto. */
.tarjeta-accion { margin-top: auto; padding-top: 1.3rem; }

/* ---------- banda ancha con una frase ---------- */
.banda {
  position: relative;
  display: grid;
  /* En el teléfono la frase se va abajo: la foto es muy apaisada (2.37:1) y en
     un recorte vertical las dos siluetas ocupan TODO el alto, así que un texto
     centrado les cae justo en la cara. Abajo les tapa los pies y no la cabeza.
     En escritorio ya no hace falta: ahí la frase se va a la derecha. */
  align-items: end;
  min-height: clamp(300px, 46vw, 460px);
  overflow: hidden;
}
.banda-foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 50%; /* las dos siluetas viven en el tercio izquierdo */
}
/* El velo no es decoración: es lo que garantiza el contraste AA de la frase
   sobre una foto que en su parte más clara es ámbar encendido. Plano en móvil,
   donde el texto ocupa todo el ancho; cargado a la derecha en escritorio, que
   es donde se coloca la frase para no taparle la cara a las siluetas. */
.banda-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(20, 14, 12, .74);
}
.banda-dentro { position: relative; z-index: 3; padding-block: clamp(3rem, 8vw, 5rem); }
.banda-frase {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: #EEF4FA;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
@media (min-width: 860px) {
  .banda { align-items: center; }
  .banda-velo {
    background: linear-gradient(90deg,
      rgba(20, 14, 12, .45) 0%,
      rgba(20, 14, 12, .62) 42%,
      rgba(20, 14, 12, .86) 100%);
  }
  .banda-dentro { display: flex; justify-content: flex-end; }
  .banda-frase { text-align: right; }
}

/* ---------- retrato de la autora ---------- */
.retrato {
  margin: 0;
  max-width: 430px;
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  overflow: hidden;
  background: var(--crema-hond);
  box-shadow: var(--sombra-2);
}
.retrato img { width: 100%; }
.retrato figcaption {
  padding: .7rem 1rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  background: var(--papel);
  border-top: 1px solid var(--linea);
}

/* ============================================================
   Portada en la voz de Dany (27-sep-2026)
   ============================================================ */

/* ---------- el remate del titular ---------- */
.hero-bajada {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--marino);
  margin: -.2rem 0 1.4rem;
  letter-spacing: -.01em;
}
.hero-pregunta {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.5;
  max-width: 48ch;
  margin-bottom: .9rem;
}

/* ---------- franjas con una frase de Dany ----------
   🔴 Color FIJO, como las tapas: no se redefine en tema oscuro. Una franja es
   una pieza gráfica, y en oscuro --marino vale un azul claro sobre el que el
   texto claro no se leería. #EEF4FA sobre #12294A mide 13.9:1 y sobre #14413E
   mide 10.6:1 (en el extremo claro del degradado sigue arriba de 8:1). */
.franja { padding: clamp(2.6rem, 6vw, 4.2rem) 0; color: #EEF4FA; position: relative; overflow: hidden; }
.franja-marino   { background: linear-gradient(118deg, #12294A 0%, #12294A 55%, #1B3A64 100%); }
.franja-verdemar { background: linear-gradient(118deg, #14413E 0%, #14413E 55%, #1D5753 100%); }
.franja::after {
  /* el mismo gesto de los círculos del logo, apenas visible */
  content: '';
  position: absolute;
  right: -80px; top: 50%;
  width: 320px; height: 320px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.10);
  pointer-events: none;
}
.franja-frase { margin: 0; max-width: 34ch; position: relative; z-index: 1; }
.franja-frase p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.franja-frase p::before { content: '«'; }
.franja-frase p::after  { content: '»'; }
.franja-frase footer {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238,244,250,.8);
}

/* ---------- videos que cargan al hacer clic ---------- */
.videos-bloque { margin-top: clamp(2.8rem, 5vw, 3.8rem); }
.video-caja { margin: 0; }
.video-fachada, .video-marco {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #0E1620;
  box-shadow: var(--sombra-1);
}
.video-fachada img {
  width: 100%; height: 100%;
  object-fit: cover;          /* hqdefault trae franjas negras arriba y abajo: se recortan */
  transition: transform .4s ease, opacity .3s ease;
  opacity: .92;
}
.video-fachada:hover img { transform: scale(1.03); opacity: 1; }
.video-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 68px; height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(18, 41, 74, .86);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, background .2s ease;
}
.video-play::after {
  content: '';
  position: absolute;
  left: 27px; top: 21px;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #FFFFFF;
}
.video-fachada:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(28, 100, 153, .95); }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caja figcaption { margin-top: .6rem; font-size: .92rem; font-weight: 600; line-height: 1.4; }

/* ---------- carta de bienvenida ----------
   🔴 La foto (carta-b, ronda 2) trae su frase QUEMADA y necesita ANCHO para que
   esa letra se lea: va arriba, a todo el ancho del bloque y en su proporción
   (3:2), sin recorte. Debajo, la carta y el video: dos columnas en escritorio
   (la carta a la izquierda, el video a la derecha y pegado mientras se lee) y
   una sola en el teléfono, la carta primero.
   El bloque es más angosto que .envoltura a propósito: a 1160 px la foto medía
   774 px de alto y se comía la pantalla entera de una laptop. */
.carta-envoltura { width: min(100% - var(--borde-movil) * 2, 1040px); margin-inline: auto; }
.carta-foto {
  margin: 0 0 clamp(2rem, 4.5vw, 3.2rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  overflow: hidden;
  background: var(--crema-hond);
  box-shadow: var(--sombra-2);
}
.carta-foto img { width: 100%; height: auto; aspect-ratio: 1400 / 934; object-fit: contain; }
.carta-rejilla { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.carta-texto, .carta-lado { min-width: 0; }
.carta-lado { max-width: 420px; }
@media (min-width: 900px) {
  .carta-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .carta-lado { position: sticky; top: 110px; }
}
.carta-resto > summary { list-style: none; cursor: pointer; display: inline-block; margin-top: .4rem; }
.carta-resto > summary::-webkit-details-marker { display: none; }
.carta-resto[open] > summary { display: none; }  /* abierta, el botón ya no hace falta */
.carta-firma {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--marino);
  margin: 1.6rem 0 0;
}

/* ---------- tarjeta de taller como <article> ----------
   Antes la tarjeta entera era un <a>. Ahora lleva un <details> dentro y un
   control no puede vivir dentro de un enlace, así que los enlaces son la tapa,
   el título y el botón. El levantón al pasar el puntero se conserva con :has(). */
article.tarjeta-curso {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
article.tarjeta-curso:has(a:hover) { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
article.tarjeta-curso:has(a:hover) .tarjeta-tapa img { transform: scale(1.035); }
article.tarjeta-curso:has(a:hover) .tapa-motivo { transform: scale(1.06) translateX(-1.5%); }
.tarjeta-tapa-enlace { display: block; }
.tarjeta-titulo { color: inherit; text-decoration: none; }
.tarjeta-titulo:hover { color: var(--marino-osc); text-decoration: underline; }
.taller-num {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marino);
  margin: 0 0 .7rem;
}
.taller-para { margin-bottom: .9rem; }
.taller-frase {
  margin: 0 0 1rem;
  padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--cielo-vivo);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--tinta);
}
.taller-veremos { font-size: .96rem; line-height: 1.6; margin-bottom: 1rem; }
/* La plática para papás, A LA VISTA (ronda 2). Antes era un <details> cerrado y
   lo único que se leía era «En preparación»; Dany se quejó de eso. Ahora es una
   caja abierta con su título, la etiqueta y la descripción. */
.taller-platica {
  margin-top: 1rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--cielo-vivo);
  border-radius: var(--r-chico);
  background: var(--crema);
  padding: .8rem .95rem .85rem;
  font-size: .9rem;
}
.taller-platica-titulo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  align-items: center;
  margin: 0 0 .5rem;
  font-family: var(--texto);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--tinta);
}
.taller-platica > p { margin: 0 0 .45rem; color: var(--tinta-media); line-height: 1.55; }
.taller-platica > p:last-child { margin-bottom: 0; }
.tarjeta-proxima { border-style: dashed; }
/* El Taller 8 lleva dos acciones (su ficha y el aviso por correo) y una nota. */
.tarjeta-acciones { display: grid; gap: .6rem; }

/* ---------- semblanza y libros ---------- */
.autora-rejilla { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: 2rem; }
@media (min-width: 900px) { .autora-rejilla { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); } }
.autora-nombre { font-family: var(--display); font-size: 1.45rem; font-weight: 600; margin: 0 0 .2rem; }
.autora-rol { color: var(--tinta-media); font-weight: 500; margin-bottom: 1.4rem; }
.libros { margin-top: 2.2rem; }
.libros-fila { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; }
.libro { margin: 0; width: 130px; }
.libro-ancho { width: 190px; }
.libro img { border-radius: 4px; box-shadow: var(--sombra-2); border: 1px solid var(--linea); }
.libro figcaption { font-size: .8rem; color: var(--tinta-suave); margin-top: .5rem; line-height: 1.35; }

/* ---------- galería ----------
   Columnas CSS y no rejilla: las fotos vienen verticales y horizontales, y así
   cada una conserva su proporción sin recortes ni huecos. */
.galeria { columns: 2 220px; column-gap: 1rem; }
@media (min-width: 900px) { .galeria { columns: 3; } }
.galeria figure {
  margin: 0 0 1rem;
  break-inside: avoid;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--crema-hond);
  box-shadow: var(--sombra-1);
}
.galeria img { width: 100%; }
.galeria figcaption { padding: .55rem .8rem; font-size: .8rem; color: var(--tinta-suave); background: var(--papel); line-height: 1.35; }

/* Una tarjeta sola a todo lo ancho (Taller 1, Taller 8): en escritorio la tapa
   va a la izquierda. A 16:9 y 1160 px de ancho, la tapa sola medía 650 px de
   alto y empujaba el texto fuera de la pantalla. */
@media (min-width: 900px) {
  .rejilla-1 > article.tarjeta-curso { flex-direction: row; }
  .rejilla-1 > article.tarjeta-curso > .tarjeta-tapa-enlace,
  .rejilla-1 > article.tarjeta-curso > .tarjeta-tapa { flex: 0 0 42%; }
  .rejilla-1 > article.tarjeta-curso .tarjeta-tapa { height: 100%; }
  .rejilla-1 > article.tarjeta-curso .tarjeta-tapa img,
  .rejilla-1 > article.tarjeta-curso .tapa-dibujada { height: 100%; aspect-ratio: auto; min-height: 320px; }
  /* El libro en la columna izquierda: la caja ya no es 16:9 sino lo que mida la
     tarjeta, y el libro se queda completo dentro con más aire. */
  .rejilla-1 > article.tarjeta-curso .tarjeta-tapa.tapa-libro img { padding: clamp(1.6rem, 3vw, 2.6rem); }
}

/* Al pasar el puntero, el libro se LEVANTA en vez de acercarse: un acercamiento
   lo pegaría a las orillas de la caja y parecería recortado. */
article.tarjeta-curso:has(a:hover) .tarjeta-tapa.tapa-libro img { transform: translateY(-4px); }


/* ===== Ficha · ronda 2 ===== */
/* La ficha de cada taller (taller.js) desde la ronda 2 de Dany (3-oct-2026):
   la portada con el LIBRO del taller y las secciones con su voz (la etapa, los
   temas, las preguntas que hacen a esa edad, las preguntas frecuentes y la
   plática para papás). Todo lo de aquí empieza con .ficha y no redefine nada
   de arriba.

   🔴 Colores: solo tokens, y cada pareja de texto se midió en los dos temas
      (tinta y tinta-media sobre los cuatro -claro, de 6:1 para arriba; los
      acentos sobre --papel, de 6.2:1 para arriba). Los acentos (--cielo,
      --verdemar...) se usan como texto SOLO en los números grandes de los temas;
      lo demás en acento es decorativo (bordes, puntos). */

/* El tono de la etapa: niñez cielo, adolescencia verdemar, juventud índigo,
   adultos marino. El mapa vive en api.js (CURSO_TONO); taller.js lo escribe en
   data-tono y aquí se vuelve dos variables que usan las piezas de abajo. */
.ficha                       { --ficha-claro: var(--marino-claro);   --ficha-acento: var(--marino); }
.ficha[data-tono='cielo']    { --ficha-claro: var(--cielo-claro);    --ficha-acento: var(--cielo); }
.ficha[data-tono='verdemar'] { --ficha-claro: var(--verdemar-claro); --ficha-acento: var(--verdemar); }
.ficha[data-tono='indigo']   { --ficha-claro: var(--indigo-claro);   --ficha-acento: var(--indigo); }

/* ---------- portada con libro ----------
   🔴 Una portada de libro trae su título impreso: no se recorta (va a su
      proporción, con width y height del archivo) y no se le encima nada, ni
      texto ni velo. Se presenta como un libro sobre la mesa: sombra suave, sobre
      el fondo claro de su etapa. En escritorio, dos columnas (texto y libro); en
      el teléfono, apilado con el libro arriba. */
.ficha-portada {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3.2rem);
  border-radius: var(--r-grande);
  border: 1px solid var(--linea);
  background: linear-gradient(150deg, var(--ficha-claro) 0%, var(--ficha-claro) 46%, var(--crema-hond) 100%);
  box-shadow: var(--sombra-1);
}
.ficha-portada-texto { min-width: 0; }
.ficha-portada .taller-num { margin-bottom: .8rem; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* El público llega a medir 70 caracteres («Niñas y niños de 4º y 5º de
   primaria...»): en el teléfono se parte en dos renglones, y partida una
   píldora se ve rota. Por eso lleva radio de tarjeta, como en la portada con
   foto. Va sobre papel y no en el tinte de su tono porque el fondo de la
   portada YA es ese tinte: la etiqueta desaparecería. */
.ficha-publico {
  max-width: 100%;
  border-radius: var(--r);
  line-height: 1.35;
  text-align: left;
  padding: .38rem .8rem;
  background: var(--papel);
  color: var(--tinta-media);
  border-color: var(--linea);
}
.ficha-portada h1 {
  margin: .9rem 0 .6rem;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  max-width: 20ch;
  overflow-wrap: break-word;
  color: var(--tinta);
}
.ficha-portada-sub {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  color: var(--tinta-media);
}
.ficha-libro {
  margin: 0;
  order: -1;                 /* en el teléfono, arriba; en el HTML va después del h1 */
  justify-self: center;
  width: 100%;
  max-width: 560px;
}
/* El del Taller 8 es vertical (4:5): a lo ancho del teléfono mediría 420 px de
   alto y se comería la pantalla antes del título. */
.ficha-libro-vertical { max-width: 260px; }
.ficha-libro img {
  width: 100%;
  height: auto;
  border-radius: 3px 7px 7px 3px;   /* lomo a la izquierda, canto a la derecha */
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(20, 30, 45, .07), var(--sombra-3);
}
@media (min-width: 900px) {
  .ficha-portada-con-libro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .ficha-libro { order: 0; }
  .ficha-libro-vertical { max-width: 340px; }
}

/* ---------- la etapa que viven ----------
   Es la voz de Dany hablándole a quien acompaña: va en la letra de los
   titulares, con el filo de su tono, como una cita y no como un párrafo más. */
.ficha-etapa {
  margin: 0;
  max-width: var(--ancho-texto);
  padding: .15rem 0 .15rem 1.2rem;
  border-left: 3px solid var(--ficha-acento);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.26rem);
  line-height: 1.62;
  color: var(--tinta);
}

/* ---------- los temas que trataremos ---------- */
.ficha-intro { max-width: 62ch; margin: 0 0 1.3rem; color: var(--tinta-media); }
.ficha-cierre {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--tinta-media);
}

/* Talleres de niños: una ristra de preguntas, en columnas como un índice. */
.ficha-temas-preguntas {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 15rem;
  column-gap: 2.4rem;
}
.ficha-temas-preguntas li {
  break-inside: avoid;
  position: relative;
  padding: .5rem 0 .5rem 1.15rem;
  border-bottom: 1px solid var(--linea);
  font-size: .98rem;
  line-height: 1.45;
}
.ficha-temas-preguntas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ficha-acento);
}

/* Adolescentes en adelante: temas con nombre y descripción, numerados. */
.ficha-temas {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tema;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.ficha-temas li {
  counter-increment: tema;
  position: relative;
  padding: 1rem 1.15rem 1.05rem 3.3rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  font-size: .97rem;
  line-height: 1.55;
  color: var(--tinta-media);
}
.ficha-temas li::before {
  content: counter(tema);
  position: absolute;
  left: 1.05rem;
  top: .8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ficha-acento);
}
.ficha-temas strong { color: var(--tinta); font-weight: 700; }

/* ---------- las preguntas que hacen a esta edad ----------
   Son preguntas dichas en voz de los hijos: van como globos de diálogo (la
   esquina de abajo a la izquierda es la del «pico»), en la letra de las citas. */
.ficha-burbujas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.ficha-burbujas li {
  padding: .95rem 1.15rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande) var(--r-grande) var(--r-grande) 5px;
  box-shadow: var(--sombra-1);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.42;
  color: var(--tinta);
}

/* La frase de las preguntas frecuentes: pegada a la lista y con borde punteado,
   porque es una nota de lo que trae el taller, no una sección más. */
.ficha-faq {
  margin-top: 1.3rem;
  display: grid;
  gap: .4rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  background: var(--crema-hond);
  border: 1px dashed var(--linea-fuerte);
}
.ficha-faq p { margin: 0; }
.ficha-faq-titulo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  align-items: center;
  font-weight: 600;
  color: var(--tinta);
}
.ficha-faq-texto { font-size: .95rem; line-height: 1.6; color: var(--tinta-media); }

/* ---------- la plática para papás ---------- */
.ficha-platica {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.2rem, 2.6vw, 1.7rem) calc(clamp(1.2rem, 2.6vw, 1.7rem) + 4px);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-1);
}
.ficha-platica::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ficha-acento);
}
.ficha-platica-estado { margin: 0 0 .8rem; }
.ficha-platica > :last-child { margin-bottom: 0; }
.ficha-platica-texto {
  max-width: 64ch;
  margin: 0 0 .8rem;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--tinta);
}

/* ---------- Taller 8: su frase ---------- */
.ficha-frase {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  margin-bottom: 1.4rem;
  border-left-color: var(--ficha-acento);
}

/* ===== Movimiento e íconos · ronda 3 ===== */
/* Pedido de Germán (4-oct-2026): «que no se vea tan aburrido pero tampoco
   vulgar... animaciones premium, íconos para armonizar el texto». Tres reglas:

   🔴 1. Nada se esconde sin JS. El estado oculto vive SOLO bajo html.mov, que
         pone movimiento.js (y no lo pone con «reducir movimiento» ni sin
         IntersectionObserver). Si el navegador no pinta, movimiento.js pone
         html.mov-listo y todo se muestra de golpe: ver su comentario.
   🔴 2. La entrada usa `translate` y una ANIMACIÓN, no `transform` ni una
         transición: así no pisa el `transition` de cada pieza ni su efecto al
         pasar el mouse, que sí usan `transform`.
   🔴 3. Los íconos son decoración (aria-hidden) en currentColor: heredan el
         color y no traen pareja de contraste nueva que medir. */

:root { --suave: cubic-bezier(.16, 1, .3, 1); }

/* ---------- los íconos ---------- */
.ico { width: 1em; height: 1em; flex: 0 0 auto; display: block; }
.titulo-icono { display: flex; align-items: center; gap: .85rem; }
.titulo-icono > span:last-child { min-width: 0; }
.sello {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--ficha-claro, var(--marino-claro));
  color: var(--ficha-acento, var(--marino));
  box-shadow: inset 0 0 0 1px var(--linea);
}
.sello .ico { width: 1.4rem; height: 1.4rem; }
.tarjeta > .sello { margin-bottom: .9rem; }
.etiqueta .ico { width: .95rem; height: .95rem; opacity: .85; }

/* ---------- la entrada al llegar ---------- */
@keyframes revela-entra {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes revela-traza { to { stroke-dashoffset: 0; } }
@keyframes revela-crece { from { scale: 1 0; } to { scale: 1 1; } }

.mov [data-revela] { opacity: 0; }
.mov [data-revela].visto {
  animation: revela-entra .85s var(--suave) calc(var(--i, 0) * 75ms) both;
}
/* El ícono se dibuja solo, un poco después de que su bloque aparece. */
.mov [data-revela] .ico-traza :is(path, circle, rect) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mov [data-revela].visto .ico-traza :is(path, circle, rect) {
  animation: revela-traza 1.1s cubic-bezier(.65, 0, .35, 1) calc(.18s + var(--i, 0) * 75ms) forwards;
}
/* El respaldo: si no hay pintado, todo a la vista y sin animación. */
.mov-listo [data-revela] { opacity: 1 !important; animation: none !important; translate: none !important; }
.mov-listo .ico-traza :is(path, circle, rect) { stroke-dashoffset: 0 !important; animation: none !important; }
.mov-listo .ficha-libro-hoja::after,
.mov-listo .ruta::before,
.mov-listo .ficha-etapa::before,
.mov-listo .ficha-platica::before { animation: none !important; scale: 1 1 !important; }
.mov-listo .ficha-temas-preguntas li::before { scale: 1 !important; }

/* ---------- la ficha: portada del libro ----------
   El libro entra subiendo, le pasa un destello de luz una sola vez y, con el
   mouse encima, se inclina como si lo tomaras de la mesa. */
.ficha-libro { perspective: 1400px; }
.ficha-libro-hoja {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px 7px 7px 3px;   /* lomo a la izquierda, canto a la derecha */
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(20, 30, 45, .07), var(--sombra-3);
  transform-origin: 30% 50%;
  transition: transform .9s var(--suave), box-shadow .9s var(--suave);
}
.ficha-libro .ficha-libro-hoja img { display: block; border-radius: 0; box-shadow: none; }
.ficha-libro-hoja::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  translate: -130% 0;
  pointer-events: none;
}
@keyframes libro-destello { to { translate: 130% 0; } }
.mov .ficha-libro.visto .ficha-libro-hoja::after { animation: libro-destello 1.9s cubic-bezier(.4, 0, .2, 1) .75s both; }
@media (hover: hover) {
  .ficha-libro:hover .ficha-libro-hoja {
    transform: rotateY(-9deg) rotateX(2deg) translateY(-6px);
    box-shadow: 0 0 0 1px rgba(20, 30, 45, .07), 22px 34px 70px rgba(20, 30, 45, .26);
  }
}

/* ---------- la ficha: la etapa, con su filo que crece ---------- */
.ficha-etapa { position: relative; border-left: 0; padding-left: 1.35rem; }
.ficha-etapa::before {
  content: '';
  position: absolute;
  left: 0; top: .25rem; bottom: .25rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--ficha-acento), var(--ficha-claro));
  transform-origin: top;
}
.mov [data-revela] .ficha-etapa::before { scale: 1 0; }
.mov [data-revela].visto .ficha-etapa::before { animation: revela-crece 1.2s var(--suave) .25s both; }

/* ---------- la ficha: temas, preguntas y plática ---------- */
.ficha-temas li,
.ficha-burbujas li {
  transition: transform .35s var(--suave), box-shadow .35s var(--suave), border-color .35s var(--suave);
}
@media (hover: hover) {
  .ficha-temas li:hover { transform: translateY(-3px); border-color: var(--ficha-acento); box-shadow: var(--sombra-2); }
  .ficha-burbujas li:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--sombra-2); }
}
.ficha-temas-preguntas li::before { transition: scale .5s var(--suave) .2s; }
.mov .ficha-temas-preguntas li[data-revela]:not(.visto)::before { scale: 0; }

.ficha-platica::before { transform-origin: top; }
.mov [data-revela] .ficha-platica::before { scale: 1 0; }
.mov [data-revela].visto .ficha-platica::before { animation: revela-crece 1.1s var(--suave) .3s both; }

.ficha-faq-titulo .ico { width: 1.15rem; height: 1.15rem; color: var(--ficha-acento); }

/* El aviso con ícono (videos en producción). */
.aviso-con-icono { display: flex; gap: .9rem; align-items: flex-start; }
.aviso-con-icono > .ico { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }

/* «Incluye» de la tarjeta de compra: una palomita en lugar del punto. */
.incluye-lista .ico { width: 1.05rem; height: 1.05rem; margin-top: .22rem; color: var(--ficha-acento, var(--marino)); }

/* Las tarjetas de «Cómo funciona el acceso». */
.ficha .tarjeta-plana {
  transition: transform .35s var(--suave), box-shadow .35s var(--suave), border-color .35s var(--suave);
}
@media (hover: hover) {
  .ficha .tarjeta-plana:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
}

/* ---------- el temario del Taller 1: una ruta por módulo ---------- */
.modulo-ella { position: relative; overflow: hidden; }
.modulo-ella-cabeza { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-right: 4.5rem; }
.modulo-ella-cabeza h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.3rem); }
.modulo-ella-cabeza .ceja { margin: 0 0 .2rem; }
/* El número grande, de marca de agua, en la esquina. Es decoración: el módulo
   ya dice su número en la ceja, y el lector de pantalla lo lee ahí. */
.modulo-ella-num {
  position: absolute;
  right: clamp(.8rem, 2.4vw, 1.6rem);
  top: -.35rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(4.2rem, 9vw, 6.2rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ficha-claro);
  pointer-events: none;
  user-select: none;
}
.modulo-ella > :not(.modulo-ella-num) { position: relative; }
.modulo-ella-desc { max-width: 66ch; color: var(--tinta-media); }

.ruta { list-style: none; margin: 1.1rem 0 0; padding: 0 0 0 1.75rem; position: relative; }
.ruta::before {
  content: '';
  position: absolute;
  left: .42rem; top: .55rem; bottom: .9rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--ficha-acento), var(--linea));
  transform-origin: top;
}
.mov [data-revela] > .ruta::before { scale: 1 0; }
.mov [data-revela].visto > .ruta::before { animation: revela-crece 1.6s var(--suave) .2s both; }
.ruta > li { position: relative; padding: 0 0 1.05rem; }
.ruta > li:last-child { padding-bottom: 0; }
.ruta > li::before {
  content: '';
  position: absolute;
  left: -1.75rem; top: .42rem;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--ficha-acento);
  box-shadow: 0 0 0 4px var(--papel);
}
.ruta-nombre { display: block; font-weight: 700; color: var(--tinta); line-height: 1.4; }
.ruta-detalle { margin: .3rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--tinta-media); }
.ruta-puntos {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ruta-puntos li {
  font-size: .86rem;
  line-height: 1.35;
  padding: .32rem .7rem;
  border-radius: var(--r);
  background: var(--ficha-claro);
  color: var(--tinta);
}

/* ---------- la portada del sitio ---------- */
#por-que .tarjeta,
#como-funciona .tarjeta {
  transition: transform .35s var(--suave), box-shadow .35s var(--suave), border-color .35s var(--suave);
}
@media (hover: hover) {
  #por-que .tarjeta:hover,
  #como-funciona .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
}
#por-que .tarjeta h3.titulo-icono { gap: .75rem; }
.bueno-saber-titulo { display: flex; align-items: center; gap: .6rem; }
.bueno-saber-titulo .ico { width: 1.15rem; height: 1.15rem; color: var(--marino); }

/* ===== Luz y profundidad con el mouse · ronda 3 ===== */
/* luz.js monta todo esto (y solo con puntero fino, salvo los círculos que giran
   solos). Sin JS o con «reducir movimiento», no existe nada de lo de abajo y la
   portada se ve exactamente como antes. Las posiciones llegan ya suavizadas
   desde el JS (inercia): aquí no hay transiciones sobre ellas, o se sumarían
   dos retrasos y el efecto se sentiría pesado. */

/* ---------- franjas: la lámpara y los tres círculos del logo ---------- */
.franja-viva::after { display: none; }          /* los anillos reemplazan al círculo fijo */
.franja-luz {
  position: absolute;
  left: 0; top: 0;
  width: 680px; height: 680px;
  margin: -340px 0 0 -340px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 48%, transparent 74%);
  transform: translate3d(50vw, 50%, 0);
  opacity: 0;
  transition: opacity .8s var(--suave);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.franja.luz-dentro .franja-luz { opacity: 1; }

.franja-anillos {
  position: absolute;
  right: clamp(-160px, -6vw, -40px);
  top: 50%;
  width: clamp(300px, 34vw, 460px);
  height: auto;
  margin-top: calc(clamp(300px, 34vw, 460px) / -2);
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, .13);
  stroke-width: 1.5;
  pointer-events: none;
  z-index: 0;
}
/* El giro, lento y propio (también en el teléfono): una vuelta en 70 s, y cada
   círculo a otra velocidad para que el dibujo del logo se arme y se desarme. */
@keyframes anillos-giran { to { transform: rotate(360deg); } }
.franja-anillos .giro {
  transform-box: view-box;
  transform-origin: 200px 214px;
  animation: anillos-giran 70s linear infinite;
}
.franja-anillos .prof-2 .giro { animation-duration: 90s; animation-direction: reverse; }
.franja-anillos .prof-3 .giro { animation-duration: 110s; }
/* La profundidad, con el mouse: el de enfrente se mueve más. */
.franja-anillos .prof-1 { transform: translate(calc(var(--dx, 0) * -10px), calc(var(--dy, 0) * -8px)); }
.franja-anillos .prof-2 { transform: translate(calc(var(--dx, 0) * -22px), calc(var(--dy, 0) * -16px)); }
.franja-anillos .prof-3 { transform: translate(calc(var(--dx, 0) * -34px), calc(var(--dy, 0) * -24px)); }
.franja-anillos .prof-2 circle { stroke: rgba(255, 255, 255, .2); }
/* La frase se deja llevar apenas, hacia la luz: tres o cuatro píxeles. */
.franja-viva .franja-frase {
  transform: translate3d(calc(var(--dx, 0) * 4px), calc(var(--dy, 0) * 3px), 0);
}

/* ---------- el banner: la imagen mira al cursor ---------- */
.hero-viva { position: relative; overflow: hidden; isolation: isolate; }
.hero-viva .hero-rejilla { position: relative; z-index: 1; }
.hero-aura {
  position: absolute;
  left: 0; top: 0;
  width: 760px; height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cielo-claro), transparent 72%);
  opacity: 0;
  transition: opacity 1s var(--suave);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.hero-viva.luz-dentro .hero-aura { opacity: .9; }

.hero-viva .hero-foto {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-brillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 32%, transparent 58%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .8s var(--suave);
  pointer-events: none;
  z-index: 2;
}
.hero-viva.luz-dentro .hero-brillo { opacity: 1; }

/* ---------- la banda con foto: paralaje corto ---------- */
.banda-viva .banda-foto {
  transform: scale(1.06) translate3d(calc(var(--dx, 0) * -12px), calc(var(--dy, 0) * -8px), 0);
  will-change: transform;
}