/* ============================================================
   Academia Dani Teruggi — sistema de diseño
   Papel cálido, serif de titulares, lectura larga cómoda.

   El tema es deliberadamente distinto al azul institucional del portal de
   UPAEP: esta es la marca personal de la autora, no la de la universidad.
   ============================================================ */

:root {
  /* Tinta y papel */
  --tinta:        #2A1F1D;
  --tinta-media:  #5B4A45;
  /* 🔴 No aclarar este valor. #857069 se veía bien pero medía 3.95:1 contra
     --crema-hond y 4.40:1 contra --crema: la letra chica (.mini, .pista,
     figcaption, la nota del logo) reprobaba AA en tema claro. #756259 da 4.89:1
     contra el fondo más cálido, que es el peor caso, y sigue leyéndose apagado.
     En tema oscuro el valor de abajo ya pasaba y no se tocó. */
  --tinta-suave:  #756259;
  --papel:        #FFFFFF;
  --crema:        #FDF8F3;
  --crema-hond:   #F5EBE0;
  --linea:        #E8DDD2;
  --linea-fuerte: #D6C5B4;

  /* Marca */
  --terracota:      #B4472E;
  --terracota-osc:  #8A3320;
  --terracota-claro:#F6E4DE;
  --ambar:          #B9700F;
  --ambar-claro:    #FBEEDA;
  --salvia:         #3E6B5E;
  --salvia-claro:   #E2EDE9;
  /* 🔴 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 --terracota
     vale #E08363, un salmón claro, y el blanco encima mide 2.76:1. Aquí el
     blanco pasa (5.41:1) y allá pasa la tinta (6.59:1). */
  --sobre-marca:    #FFFFFF;

  /* Semáforo */
  --exito:  #2C6A4C;
  --espera: #8A5A00;
  --falla:  #A32B1E;

  /* Formas */
  --r-chico: 8px;
  --r:       14px;
  --r-grande:22px;
  --sombra-1: 0 1px 2px rgba(42,31,29,.06), 0 2px 8px rgba(42,31,29,.05);
  --sombra-2: 0 2px 6px rgba(42,31,29,.07), 0 12px 32px rgba(42,31,29,.09);
  --sombra-3: 0 8px 24px rgba(42,31,29,.10), 0 24px 64px rgba(42,31,29,.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:        #F2E9E2;
    --tinta-media:  #C6B6AC;
    --tinta-suave:  #9A8A81;
    --papel:        #221A18;
    --crema:        #1A1413;
    --crema-hond:   #2B211E;
    --linea:        #3A2D29;
    --linea-fuerte: #4E3E39;
    --terracota:      #E08363;
    --terracota-osc:  #F0A489;
    --terracota-claro:#3A241D;
    --ambar:          #E0A24B;
    --ambar-claro:    #372914;
    --salvia:         #7FB3A2;
    --salvia-claro:   #22322D;
    --sobre-marca:    #1A1413;
    --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:        #F2E9E2;
  --tinta-media:  #C6B6AC;
  --tinta-suave:  #9A8A81;
  --papel:        #221A18;
  --crema:        #1A1413;
  --crema-hond:   #2B211E;
  --linea:        #3A2D29;
  --linea-fuerte: #4E3E39;
  --terracota:      #E08363;
  --terracota-osc:  #F0A489;
  --terracota-claro:#3A241D;
  --ambar:          #E0A24B;
  --ambar-claro:    #372914;
  --salvia:         #7FB3A2;
  --salvia-claro:   #22322D;
  --sobre-marca:    #1A1413;
  --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(--terracota-osc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracota); }
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(--terracota);
  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; }
@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); } }

/* ---------- 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(--terracota); 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(--terracota); color: var(--sobre-marca); box-shadow: var(--sombra-1); }
.btn-principal:hover { background: var(--terracota-osc); color: var(--sobre-marca); box-shadow: var(--sombra-2); }
.btn-borde { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.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(--terracota-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);
}
.etiqueta-terracota { background: var(--terracota-claro); color: var(--terracota-osc); border-color: transparent; }
/* 🔴 La etiqueta ámbar NO lleva var(--ambar) de texto: #B9700F sobre #FBEEDA mide
   3.40:1 y esta letra es de .76rem, o sea texto normal para la WCAG. --espera es
   el mismo ámbar en su versión legible (5.18:1) y en oscuro sigue pasando. */
.etiqueta-ambar     { background: var(--ambar-claro);     color: var(--espera);        border-color: transparent; }
.etiqueta-salvia    { background: var(--salvia-claro);    color: var(--salvia);        border-color: transparent; }
.etiqueta-exito     { background: var(--salvia-claro);    color: var(--exito);         border-color: transparent; }
.etiqueta-espera    { background: var(--ambar-claro);     color: var(--espera);        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(--salvia-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(--linea-fuerte);
  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(--terracota); outline: none; box-shadow: 0 0 0 3px var(--terracota-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(--terracota), var(--ambar));
  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); }
@media (max-width: 760px) { .menu .ocultar-movil { display: none; } }

/* ---------- 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(--terracota-osc); text-decoration: underline; }

/* ---------- 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(--terracota); 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(--terracota-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(--terracota);
  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; }

.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(--terracota-claro); border-left: 3px solid var(--terracota); }
.lectura .voz   {
  background: var(--salvia-claro); border-left: 3px solid var(--salvia);
  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(--salvia); 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: #17110F;
  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, #2E211C, #17110F);
  display: grid; place-items: center; text-align: center; padding: 1.5rem; color: #E8D9CF;
}
.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: #FFF3EA; }
.video-reservado span { font-size: .86rem; color: #C3AEA3; line-height: 1.5; display: block; max-width: 46ch; margin-inline: auto; }

/* ---------- 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(--terracota); background: var(--terracota-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(--terracota); 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(--linea-fuerte); 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(--terracota); background: var(--terracota-claro); }
.opcion.bien { border-color: var(--exito); background: var(--salvia-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(--terracota); }

/* ---------- 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(--terracota), var(--ambar), var(--salvia)); }

@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: --terracota vale
   #B4472E sobre papel claro y #E08363 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(--terracota);
}
a.logo-hs:hover { color: var(--terracota-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(--terracota-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);
}
.hero-foto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;      /* recorte más bajo en móvil */
  object-fit: cover;
  object-position: 50% 38%; /* las dos caras quedan dentro del recorte */
}

/* ---------- 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(255, 246, 239, .75); }
.hero-punto[aria-current="true"] { background: #FFF6EF; transform: scale(1.25); }
.hero-punto:focus-visible { outline: 2px solid #FFF6EF; 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 pero a todo el ancho: un cuadrado de 680 px
   de lado se come la pantalla entera y el titular se va abajo del pliegue. */
@media (min-width: 620px) and (max-width: 899px) {
  .hero-foto img { aspect-ratio: 3 / 2; object-position: 50% 30%; }
}
@media (min-width: 900px) {
  .hero-rejilla {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .hero-foto { order: 0; }
  .hero-foto img { aspect-ratio: 1000 / 1180; object-position: 50% 50%; }
}

/* ---------- 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); }
.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: #FFF6EF;
  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);
}