/* ============================================================
   Mi Sueño Americano — Variante 4 "Cinematográfico Inmersivo"
   Azul noche + luz dorada. Escenas de pantalla completa,
   tipografía cinética, grano, viñeta y barras de letterbox.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --noche: #081226;
  --noche-2: #0B1F3F;
  --noche-3: #122B52;
  --negro: #04070F;
  --dorado: #C9A227;
  --dorado-claro: #E4C65B;
  --dorado-suave: #F0D98C;
  --crema: #F7F1E5;
  --texto: #EDE6D4;
  --texto-2: #B9C4DA;          /* secundario sobre noche — contraste ≥ 7 */
  --rojo: #D43D4F;             /* rojo bandera aclarado para contraste */
  --borde: rgba(228, 198, 91, .28);
  --borde-suave: rgba(185, 196, 218, .16);
  --fondo-tarjeta: rgba(18, 43, 82, .55);

  --fuente-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --fuente-cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --paso-1: clamp(.78rem, .72rem + .2vw, .9rem);
  --paso-2: clamp(.95rem, .9rem + .3vw, 1.1rem);
  --paso-3: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  --paso-4: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
  --paso-5: clamp(2.2rem, 1.5rem + 3.6vw, 4.6rem);
  --paso-6: clamp(3rem, 1.8rem + 7vw, 6rem);

  --espacio-1: .5rem;
  --espacio-2: 1rem;
  --espacio-3: 2rem;
  --espacio-4: 4rem;
  --espacio-5: 7rem;

  --radio: 14px;
  --sombra-oro: 0 18px 60px rgba(201, 162, 39, .22);
  --transicion: .45s cubic-bezier(.22, .8, .3, 1);

  /* ---- Sistema de alineación ----
     Un canalón, una columna, y un solo eje secundario para las listas
     con marcador colgado (capítulos, pasos). Cualquier bloque que
     invente su propia sangría rompe la retícula. */
  --canalon: clamp(1.25rem, 5vw, 2.5rem);
  --riel: 3.25rem;          /* ancho del marcador colgado, único en el sitio */
  --relleno-tarjeta: clamp(1.15rem, 4.5vw, 1.75rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-2);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Correos y URLs largas parten de línea en vez de desbordar */
  overflow-wrap: break-word;
  /* iOS no reescala el texto al girar el móvil */
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--dorado-claro); text-underline-offset: .18em; }
a:hover { color: var(--dorado-suave); }
h1, h2, h3 { line-height: 1.04; margin: 0 0 var(--espacio-2); font-weight: 400; }
p { margin: 0 0 1em; }
ul { margin: 0; padding-left: 1.2em; }
li { margin-bottom: .4em; }
::selection { background: var(--dorado); color: var(--noche); }

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

.saltar-enlace {
  position: absolute;
  left: var(--espacio-2);
  top: -100px;
  z-index: 300;
  background: var(--dorado);
  color: var(--noche);
  padding: .7em 1.2em;
  font-weight: 700;
  border-radius: 0 0 var(--radio) var(--radio);
  transition: top .25s ease;
}
.saltar-enlace:focus { top: 0; color: var(--noche); }

/* Una sola columna para todo el sitio. El canalón es un valor único:
   antes cada sección heredaba 92vw y las tarjetas añadían su propio
   relleno, así que el texto de cada bloque empezaba en una x distinta. */
.contenedor {
  width: min(1120px, 100% - var(--canalon) * 2);
  margin-inline: auto;
}

.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;
}

/* Grano de película + viñeta, globales y no interactivos */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 120;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 119;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 7, 15, .5) 100%);
}

/* ---------- Tipografía cinematográfica ---------- */
.kicker {
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  margin-bottom: var(--espacio-2);
}
.kicker::before { content: "— "; color: var(--dorado); }

.titulo-display {
  font-family: var(--fuente-display);
  font-size: var(--paso-6);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--crema);
}
.titulo-grande {
  font-family: var(--fuente-display);
  font-size: var(--paso-5);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--crema);
}
.titulo-seccion { text-align: inherit; }
/* El escalón "title" del sistema: titular de tarjeta, panel o sección
   menor, entre titulo-grande y el cuerpo. */
.titulo-medio { font-size: var(--paso-4); }
.sub-seccion {
  text-align: inherit;
  max-width: var(--medida);
  margin: 0 0 var(--espacio-4);
  color: var(--texto-2);
}
.seccion__encabezado--centrada .sub-seccion { margin-inline: auto; }
.oro { color: var(--dorado-claro); }

/* Máscaras cinéticas: líneas que ascienden dentro de su máscara */
.mascara { display: block; overflow: hidden; padding-bottom: .08em; }
.mascara-linea { display: inline-block; will-change: transform; }
.js .mascara-linea {
  transform: translateY(115%);
  transition: transform .9s cubic-bezier(.16, .8, .24, 1);
}
.js .visible .mascara-linea,
.js .mascara-linea.visible { transform: translateY(0); }
.js .mascara-linea--d1 { transition-delay: .12s; }
.js .mascara-linea--d2 { transition-delay: .24s; }
.js .mascara-linea--d3 { transition-delay: .36s; }

/* ---------- Botones y formularios ---------- */
.btn {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  font-size: var(--paso-1);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border-radius: 999px;
  border: 1px solid var(--dorado);
  background: linear-gradient(120deg, var(--dorado), var(--dorado-claro));
  color: var(--noche);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-oro); color: var(--negro); }
.btn--contorno {
  background: transparent;
  color: var(--dorado-claro);
}
.btn--contorno:hover { background: rgba(201, 162, 39, .12); color: var(--dorado-suave); }

.campo { margin-bottom: var(--espacio-2); text-align: left; }
.campo label {
  display: block;
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  margin-bottom: .45em;
}
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: rgba(4, 7, 15, .55);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: .85em 1.1em;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .25);
}
.campo input[type="file"] { padding: .7em 1em; }
.campo__contador { font-size: var(--paso-1); color: var(--texto-2); text-align: right; margin-top: .35em; }
.campo__ayuda { font-size: var(--paso-1); color: var(--texto-2); margin-top: .35em; }

.form-msg { min-height: 1.6em; font-weight: 600; margin-top: var(--espacio-2); }
.form-msg--ok { color: #8FE3A8; }
.form-msg--error { color: #FF9AA5; }

.vista-previa {
  display: none;
  max-width: 260px;
  margin-top: var(--espacio-2);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-oro);
}
.vista-previa.visible { display: block; }

/* ---------- Barra de progreso de scroll ---------- */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 210;
  background: linear-gradient(90deg, var(--dorado), var(--dorado-claro));
  box-shadow: 0 0 12px rgba(228, 198, 91, .7);
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
/* El velo con desenfoque vive en una capa propia, nunca en la cabecera.
   `backdrop-filter` sobre un elemento lo convierte en bloque contenedor
   de sus descendientes `fixed`: con el filtro aquí, el panel del menú
   móvil se encogía a la altura de la cabecera en cuanto se hacía scroll
   y los enlaces quedaban flotando sin fondo. En la pseudocapa el
   desenfoque se ve igual y el panel sigue midiendo contra la ventana. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 18, 38, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--transicion);
}
.cabecera--solida::before { opacity: 1; }
.cabecera--solida {
  border-bottom-color: var(--borde-suave);
}
.cabecera__barra {
  /* La barra es más ancha que el resto del contenido: con siete
     enlaces, dentro de los 1120px del contenedor no cabían y partían
     en dos líneas ("EL / LIBRO") incluso en pantallas grandes. */
  width: min(1360px, 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding-block: .9rem;
}
.marca {
  font-family: var(--fuente-display);
  font-size: 1.5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--crema);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}
.marca__estrella {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background: url('../assets/logo-msa-marca-128.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(228, 198, 91, .45));
}
.marca em { font-style: normal; color: var(--dorado-claro); }

.nav { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.15rem); }
.nav a {
  position: relative;
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-2);
  padding: .4em 0;
  white-space: nowrap;      /* nunca partir "El Libro" en dos líneas */
  transition: color var(--transicion);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--dorado-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav a:hover { color: var(--crema); }
.nav a:hover::after { transform: scaleX(.5); }
.nav a[aria-current="page"] { color: var(--dorado-claro); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav__cta {
  border: 1px solid var(--dorado);
  border-radius: 999px;
  padding: .6em 1.4em;
  color: var(--noche);
  background: linear-gradient(120deg, var(--dorado), var(--dorado-claro));
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.nav .nav__cta::after { display: none; }
.nav .nav__cta:hover { transform: translateY(-2px); box-shadow: var(--sombra-oro); color: var(--negro); }
.nav .nav__cta[aria-current="page"] { box-shadow: 0 0 0 3px rgba(228, 198, 91, .35); }

.nav .selector-idioma {
  min-width: 2.8rem;
  padding: .5em .7em;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--dorado-claro);
  text-align: center;
  letter-spacing: .08em;
}
.nav .selector-idioma::after { display: none; }
.nav .selector-idioma:hover { border-color: var(--dorado-claro); background: rgba(201, 162, 39, .1); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--dorado-claro);
  font-size: 0;
  line-height: 1;
  min-width: 46px;
  min-height: 46px;          /* objetivo táctil cómodo */
  cursor: pointer;
  background: url('../assets/menu.svg') center / 24px 24px no-repeat;
}
.nav-toggle[aria-expanded="true"] { background-image: url('../assets/cerrar.svg'); }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 170;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;              /* verde de marca: se reconoce al instante */
  color: #fff;
  box-shadow: 0 10px 30px rgba(4, 7, 15, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform var(--transicion), box-shadow var(--transicion),
              opacity var(--transicion), visibility var(--transicion);
}
/* En el teléfono, el flotante cede el paso: cuando quedaría encima de un
   botón se retira en vez de taparlo. Lo decide principal.js midiendo. */
.whatsapp-flotante--replegado {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Se aparta deprisa y vuelve con calma: la transición de vuelta es la
     de la regla base, esta solo gobierna la salida. */
  transition: opacity .16s ease, visibility .16s ease;
}
.whatsapp-flotante:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 38px rgba(4, 7, 15, .6), 0 0 24px rgba(37, 211, 102, .45);
}
@media print { .whatsapp-flotante { display: none; } }

/* ---------- Navegación de puntos (escenas del inicio) ---------- */
.puntos {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.puntos a {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--dorado-claro);
  background: transparent;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.puntos a:hover, .puntos a:focus-visible { background: rgba(228, 198, 91, .5); }
.puntos a[aria-current="true"] {
  background: var(--dorado-claro);
  transform: scale(1.35);
  box-shadow: 0 0 14px rgba(228, 198, 91, .9);
}
.puntos a::before {
  content: attr(data-etiqueta);
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  background: rgba(8, 18, 38, .85);
  border: 1px solid var(--borde-suave);
  padding: .35em .8em;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}
.puntos a:hover::before, .puntos a:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---------- Escenas del inicio ---------- */
.escena {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.escena__cabecera {
  position: absolute;
  top: clamp(4.5rem, 9vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  width: min(1120px, 92vw);
}
.numero-escena {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  letter-spacing: .5em;
  color: var(--dorado);
  text-transform: uppercase;
}

/* Barras de letterbox que se abren al comenzar la historia */
.banda {
  position: fixed;
  left: 0; right: 0;
  height: 12vh;
  background: var(--negro);
  z-index: 118;
  pointer-events: none;
  animation: banda-abre 2.2s cubic-bezier(.7, 0, .2, 1) .3s forwards;
}
.banda--arriba { top: 0; transform-origin: top; }
.banda--abajo { bottom: 0; transform-origin: bottom; }
@keyframes banda-abre { to { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .banda { display: none; } }

/* --- Escena 1: hero con cielo estrellado --- */
.hero {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(18, 43, 82, .9), transparent 60%),
    radial-gradient(900px 500px at 15% 110%, rgba(11, 31, 63, .9), transparent 60%),
    var(--noche);
  flex-direction: column;
  text-align: center;
  padding: clamp(6rem, 14vh, 9rem) 4vw var(--espacio-4);
}
#estrellas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Estrellas CSS de respaldo si el canvas no corre */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(247, 241, 229, .9), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(228, 198, 91, .8), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(247, 241, 229, .7), transparent),
    radial-gradient(1px 1px at 78% 40%, rgba(247, 241, 229, .8), transparent),
    radial-gradient(2px 2px at 90% 75%, rgba(228, 198, 91, .7), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(247, 241, 229, .6), transparent);
  z-index: 0;
}
.hero__contenido { position: relative; z-index: 2; max-width: 900px; }
.hero__edicion {
  font-size: var(--paso-1);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: var(--espacio-2);
}
.hero h1 { margin-bottom: var(--espacio-2); text-shadow: 0 6px 60px rgba(4, 7, 15, .8); }
.hero__lema {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: var(--paso-3);
  color: var(--texto);
  max-width: 560px;
  margin: 0 auto var(--espacio-3);
}
.hero__acciones { display: flex; gap: var(--espacio-2); justify-content: center; flex-wrap: wrap; }

.hero__portada {
  position: relative;
  z-index: 2;
  margin-top: var(--espacio-4);
  perspective: 1100px;
}
.hero__portada img {
  width: clamp(180px, 26vw, 300px);
  margin-inline: auto;
  border-radius: 6px;
  box-shadow: 0 40px 90px rgba(4, 7, 15, .85), 0 0 0 1px rgba(228, 198, 91, .35), 0 0 70px rgba(201, 162, 39, .25);
  transform-style: preserve-3d;
  will-change: transform;
}
.hero__portada::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -26px;
  width: 70%; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(4, 7, 15, .8), transparent 70%);
  z-index: -1;
}
.hero__desliza {
  position: absolute;
  bottom: var(--espacio-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: var(--paso-1);
  letter-spacing: .34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-2);
  /* Posicionado desde left:50%, solo dispone de media caja para
     medirse: sin esto parte en dos líneas en pantallas estrechas. */
  white-space: nowrap;
}
.hero__desliza::after {
  content: "";
  display: block;
  width: 1px; height: 44px;
  margin: .8em auto 0;
  background: linear-gradient(var(--dorado-claro), transparent);
  animation: desliza 1.8s ease-in-out infinite;
}
@keyframes desliza { 50% { transform: scaleY(.4); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .hero__desliza::after { animation: none; } }

/* --- Escena 2: la carta que se escribe con el scroll --- */
.carta { background: linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%); }
.carta__texto {
  font-family: var(--fuente-serif);
  font-size: clamp(1.35rem, 1rem + 2vw, 2.3rem);
  line-height: 1.5;
  max-width: 880px;
  padding: 0 4vw;
  text-align: center;
}
.carta__texto .palabra { transition: none; }
.js-cine .carta__texto .palabra { opacity: .13; }
.carta__firma {
  display: block;
  margin-top: var(--espacio-3);
  font-style: italic;
  color: var(--dorado-claro);
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.9rem);
}

/* --- Escena 3: tira de película horizontal --- */
.tira-escena { background: var(--negro); flex-direction: column; align-items: stretch; justify-content: center; }
.tira {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-top: clamp(5.5rem, 12vh, 8rem);
}
.tira::-webkit-scrollbar { display: none; }
.js-cine .tira { overflow: visible; scroll-snap-type: none; }
.tira__pista {
  display: flex;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.5rem, 4vh, 3rem) 8vw;
  width: max-content;
}
.fotograma {
  scroll-snap-align: center;
  position: relative;
  flex: 0 0 auto;
  width: min(430px, 78vw);
  min-height: min(56vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 5vh, 3.5rem) clamp(1.6rem, 3vw, 2.6rem);
  background: linear-gradient(160deg, var(--noche-2), var(--noche) 70%);
  border: 1px solid var(--borde);
  /* Sin redondeo: un fotograma de película es un rectángulo recto y las
     esquinas curvas peleaban con las bandas de perforación de 26px. */
  /* perforaciones de película */
  border-top: 26px solid var(--negro);
  border-bottom: 26px solid var(--negro);
  background-image:
    radial-gradient(circle 4px at 14px -13px, var(--texto-2) 98%, transparent),
    radial-gradient(circle 4px at 14px calc(100% + 13px), var(--texto-2) 98%, transparent);
}
.fotograma::before,
.fotograma::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  background-image: radial-gradient(circle 4.5px, rgba(185, 196, 218, .5) 98%, transparent);
  background-size: 34px 26px;
  background-position: center;
}
.fotograma::before { top: -26px; }
.fotograma::after { bottom: -26px; }
.fotograma__num {
  font-family: var(--fuente-display);
  font-size: clamp(3.4rem, 8vw, 5.5rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dorado);
  margin-bottom: var(--espacio-2);
}
.fotograma h3 {
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crema);
}
.fotograma p { color: var(--texto-2); margin: 0; }
.tira__nota {
  text-align: center;
  color: var(--texto-2);
  font-size: var(--paso-1);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: var(--espacio-3);
}

/* --- Escena 4: la frase con halo dorado --- */
.cita-escena { background: var(--noche); text-align: center; }
.cita-escena__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(201, 162, 39, .32), rgba(201, 162, 39, .1) 34%, transparent 62%);
  pointer-events: none;
}
.cita-escena blockquote { position: relative; z-index: 2; margin: 0; padding: 0 5vw; max-width: 1000px; }
.cita-escena blockquote p {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 3.4vw, 3.6rem);
  line-height: 1.3;
  color: var(--crema);
  text-shadow: 0 0 50px rgba(201, 162, 39, .35);
}
.cita-escena figcaption, .cita-escena footer {
  font-size: var(--paso-1);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  margin-top: var(--espacio-3);
}

/* --- Escena 5: cuenta regresiva --- */
.cuenta-escena {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(18, 43, 82, .8), transparent 65%),
    var(--noche-2);
  flex-direction: column;
  text-align: center;
  padding: var(--espacio-4) 4vw;
}
.cuenta {
  display: flex;
  gap: clamp(.7rem, 2.5vw, 1.6rem);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--espacio-3) 0;
}
.cuenta__celda {
  min-width: clamp(84px, 18vw, 140px);
  padding: clamp(1rem, 2.5vw, 1.6rem) .6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(4, 7, 15, .55);
  box-shadow: inset 0 0 40px rgba(201, 162, 39, .07);
}
.cuenta__num {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--dorado-claro);
  font-variant-numeric: tabular-nums;
}
.cuenta__etq {
  display: block;
  font-size: var(--paso-1);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-top: .5em;
}
.cuenta__nota { color: var(--texto-2); }

/* Día del evento y después (principal.js añade .cuenta--mensaje): la
   cuenta deja de ser cuatro números y pasa a ser una sola frase ancha. */
.cuenta [hidden],
.cuenta--mensaje .cuenta__etq,
.cuenta--mensaje .cuenta__celda:not(:first-child) { display: none !important; }
.cuenta--mensaje,
.cuenta-cine .cuenta--mensaje,
.js-cine .cuenta-cine .cuenta--mensaje,
.programa-apertura .cuenta--mensaje {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.cuenta--mensaje .cuenta__celda:first-child,
.cuenta-cine .cuenta--mensaje .cuenta__celda:first-child,
.js-cine .cuenta-cine .cuenta--mensaje .cuenta__celda:first-child,
.programa-apertura .cuenta--mensaje .cuenta__celda:first-child {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(1rem, 3vw, 2rem);
  border-left: 0;
  border-top: 0;
  contain: none;
  text-align: center;
}
.cuenta--mensaje .cuenta__num,
.cuenta-cine .cuenta--mensaje .cuenta__num,
.js-cine .cuenta-cine .cuenta--mensaje .cuenta__num,
.cuenta-escena .cuenta--mensaje .cuenta__num,
.programa-apertura .cuenta--mensaje .cuenta__num {
  min-width: 0;
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: .03em;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: manual;
}
.cuenta-cine .cuenta--mensaje .cuenta__num,
.js-cine .cuenta-cine .cuenta--mensaje .cuenta__num {
  font-size: clamp(1.25rem, .9rem + 1.4vw, 1.9rem);
}

/* --- Postcréditos (flujo normal) --- */
.postcreditos {
  padding: var(--espacio-5) 0;
  background: var(--negro);
  border-top: 1px solid var(--borde-suave);
}
.postcreditos__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--espacio-3);
}
.panel {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  background: var(--fondo-tarjeta);
}
.panel h2,
.panel h3 {
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crema);
}
.panel p { color: var(--texto-2); }
.panel__lista { list-style: none; padding: 0; margin: 0 0 var(--espacio-2); }
.panel__lista li {
  padding-left: 1.6em;
  position: relative;
  color: var(--texto);
}
/* Marcador dibujado, no un glifo. La estrella "★" era un carácter
   tipográfico haciendo de icono: cambia de forma según la fuente
   disponible y nunca casa con el resto del sistema. Un rombo trazado
   en CSS se alinea con la retícula y mantiene un peso constante. */
.panel__lista li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--dorado-claro);
  transform: rotate(45deg);
}

/* ---------- Secciones de páginas interiores ---------- */
/* Héroe interior: una sola línea de máscara que envuelve con
   naturalidad. La altura la marca el contenido anclado bajo la
   cabecera fija — nada de cajas de 62vh con títulos partidos en dos. */
.pagina-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: calc(4.5rem + clamp(2.25rem, 9vh, 5.5rem)) 0 clamp(2.25rem, 6vh, 4rem);
  padding: calc(4.5rem + clamp(2.25rem, 9svh, 5.5rem)) 0 clamp(2.25rem, 6svh, 4rem);
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(18, 43, 82, .9), transparent 60%),
    var(--noche);
  overflow: hidden;
}
.pagina-hero::before,
.pagina-centrada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(247, 241, 229, .8), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(228, 198, 91, .7), transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(247, 241, 229, .6), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(247, 241, 229, .5), transparent);
}
.pagina-hero .contenedor,
.pagina-centrada .contenedor { position: relative; z-index: 2; }
/* Paso propio entre el display del inicio y el titular de sección:
   las frases cortas caben enteras en una línea de móvil y las largas
   envuelven en un punto natural, sin CSS por página ni por idioma. */
.pagina-hero__titulo { font-size: clamp(2.6rem, 1.7rem + 5.5vw, 6rem); }
.pagina-hero__lema {
  max-width: 620px;
  margin: 0;
  color: var(--texto-2);
  font-size: var(--paso-3);
  line-height: 1.5;
}

/* ---------- Escala tipográfica de páginas interiores ----------
   La portada conserva su escala cinematográfica. En las páginas de lectura
   y de tarea, el título orienta sin ocupar toda la escena. */
.pagina-interior .pagina-hero__titulo.titulo-display {
  max-width: 14ch;
  font-size: clamp(3rem, 2.35rem + 2.8vw, 4.75rem);
  line-height: .98;
  letter-spacing: .025em;
}

.pagina-interior .titulo-grande {
  max-width: 22ch;
  font-size: clamp(2.15rem, 1.75rem + 1.65vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: .03em;
}

.pagina-interior .titulo-grande.titulo-medio {
  font-size: clamp(1.8rem, 1.55rem + 1vw, 2.55rem);
  line-height: 1.04;
}

.pagina-interior .formulario-inscripcion .paso-formulario legend {
  max-width: 22ch;
  font-size: clamp(2rem, 1.78rem + .9vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: .025em;
  text-wrap: balance;
}

/* Página corta centrada (404, confirmación): el mismo cielo del héroe,
   con el contenido en el eje vertical y sin estilos en línea. */
.pagina-centrada {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(4.5rem + var(--espacio-3)) 0 var(--espacio-4);
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(18, 43, 82, .9), transparent 60%),
    var(--noche);
  overflow: hidden;
}
.pagina-centrada .sub-seccion { margin-bottom: 0; }

.seccion {
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
  position: relative;
  /* Las entradas laterales de los capítulos (libro.js) no deben
     ensanchar la página a 721–900px: se recortan en la sección. */
  overflow-x: hidden;
  overflow-x: clip;
}
.seccion--profunda { background: linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%); }
.seccion--negra { background: var(--negro); }
.seccion--borde { border-top: 1px solid var(--borde-suave); }

/* Cabecera de sección: kicker, titular y apoyo forman un solo bloque
   con un único margen inferior — sustituye a los style="" que
   deshacían el centrado y el margen de .sub-seccion en cada página. */
/* La cabecera de sección se alinea con el contenido que encabeza.
   Antes era una caja de 720px centrada sobre contenido de 1120px
   alineado a la izquierda: dos ejes en cada sección, y esa es la razón
   de que las columnas no cuadraran entre sí. Centrar es ahora una
   decisión explícita (--centrada), no el valor por defecto. */
.seccion__encabezado {
  max-width: min(720px, 100%);
  margin: 0 0 clamp(2.5rem, 1.5rem + 4vw, 4rem);
  text-align: left;
}
.seccion__encabezado--centrada {
  margin-inline: auto;
  text-align: center;
}
.seccion__encabezado .kicker { margin-bottom: .6rem; }
.seccion__encabezado .sub-seccion { margin-bottom: 0; }

/* Utilidades de ritmo: reemplazan los márgenes y alineaciones en línea */
.centrado { text-align: center; }
.texto-suave { color: var(--texto-2); }
.margen-2 { margin-top: var(--espacio-2); }
.margen-3 { margin-top: var(--espacio-3); }
.margen-4 { margin-top: var(--espacio-4); }
.acciones-centradas {
  display: flex;
  justify-content: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  margin-top: var(--espacio-3);
}
.contenedor--estrecho { max-width: 820px; }
.pie__legal--sin-borde { border-top: 0; padding-top: 0; }

.doble-columna {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.doble-columna--invertida { grid-template-columns: .85fr 1.15fr; }

.marco {
  position: relative;
  border-radius: var(--radio);
  padding: 14px;
  background: linear-gradient(160deg, rgba(201, 162, 39, .5), rgba(201, 162, 39, .08));
}
.marco img { border-radius: calc(var(--radio) - 6px); box-shadow: 0 30px 70px rgba(4, 7, 15, .7); }
.marco__pie {
  text-align: center;
  font-size: var(--paso-1);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  padding-top: 12px;
}

/* Índice de capítulos (página El Libro): los seis capítulos numerados
   llevan el peso — tarjeta sólida y número editorial dorado; el
   preliminar y el cierre son filas ligeras con borde discontinuo. */
.capitulos {
  display: grid;
  gap: var(--espacio-2);
  counter-reset: cap;
  max-width: 880px;
  margin-inline: auto;
}
.capitulo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-2);
  align-items: baseline;
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-tarjeta);
  transition: border-color var(--transicion), transform var(--transicion);
}
/* El desplazamiento lateral solo existe donde hay puntero fino */
@media (hover: hover) {
  .capitulo:hover { border-color: var(--dorado-claro); transform: translateX(6px); }
}
.capitulo__num {
  font-family: var(--fuente-display);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  color: var(--dorado-claro);
  min-width: 2.2ch;
}
.capitulo h3 {
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  font-size: var(--paso-3);
  color: var(--crema);
  margin: 0 0 .2em;
  text-transform: none;
  letter-spacing: 0;
}
.capitulo p { margin: 0; color: var(--texto-2); font-size: var(--paso-2); }
.capitulo--frontmatter {
  background: transparent;
  border-style: dashed;
  border-color: var(--borde-suave);
  padding-block: calc(var(--espacio-2) * .75);
}
.capitulo--frontmatter .capitulo__num { font-size: var(--paso-3); color: var(--texto-2); }
.capitulo--frontmatter h3 { font-size: var(--paso-2); }

/* Tarjetas "qué incluye" */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--espacio-3);
}
.tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde-suave);
  border-top: 2px solid var(--dorado);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  background: var(--fondo-tarjeta);
}
.tarjeta h3 {
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crema);
}
.tarjeta p { color: var(--texto-2); margin-bottom: 0; }
.tarjeta__icono { color: var(--dorado-claro); font-size: 1.4rem; display: block; margin-bottom: .5em; }
/* Enlace al pie de la tarjeta: misma altura visual en toda la fila */
.tarjeta__accion { margin: auto 0 0; padding-top: var(--espacio-2); }

/* Cita destacada interior */
.cita {
  margin: 0;
  text-align: center;
  padding: var(--espacio-4) 4vw;
}
.cita p {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.8rem);
  line-height: 1.35;
  color: var(--crema);
  max-width: 860px;
  margin: 0 auto var(--espacio-2);
}
.cita footer {
  font-size: var(--paso-1);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

/* CTA de suscripción reutilizable */
.cta-suscripcion {
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) * 1.5);
  background:
    radial-gradient(600px 300px at 50% 130%, rgba(201, 162, 39, .16), transparent 65%),
    var(--fondo-tarjeta);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.cta-suscripcion .suscripcion__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}
.cta-suscripcion .sub-seccion { margin-bottom: var(--espacio-3); }
/* Dentro de una columna, la tarjeta deja de centrarse sola */
.cta-suscripcion--ajustada { margin: 0; max-width: none; }

/* Cuenta regresiva alineada a la izquierda dentro de una columna */
.cuenta--izquierda { justify-content: flex-start; margin: var(--espacio-3) 0; }

/* ---------- Inscripción al curso ---------- */
.registro-inicial {
  max-width: 860px;
  margin-inline: auto;
  text-align: left;
}
.registro-inicial__campos,
.formulario__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--espacio-2);
}
.campo--ancho { grid-column: 1 / -1; }
.campo__titulo {
  display: block;
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  margin-bottom: .65em;
}
.opciones-eleccion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: var(--espacio-2);
}
.opciones-eleccion--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcion-eleccion { position: relative; min-width: 0; }
.opcion-eleccion input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.opcion-eleccion label {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  background: rgba(4, 7, 15, .45);
  color: var(--texto);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.opcion-eleccion input:checked + label {
  border-color: var(--dorado-claro);
  background: rgba(201, 162, 39, .16);
  color: var(--dorado-suave);
}
.opcion-eleccion input:focus-visible + label {
  outline: 3px solid var(--dorado-claro);
  outline-offset: 3px;
}
.casilla-consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
  color: var(--texto-2);
  font-size: var(--paso-1);
  line-height: 1.55;
  margin: var(--espacio-2) 0;
}
.casilla-consentimiento input {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin-top: .15rem;
  accent-color: var(--dorado);
}
.registro-inicial__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  margin-top: var(--espacio-2);
}
.registro-inicial__acciones .form-msg { flex: 1 1 260px; margin: 0; }

.inscripcion-pagina {
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(4.5rem + clamp(1.5rem, 6vh, 4rem)) 0 clamp(3.5rem, 2rem + 6vw, 7rem);
  padding: calc(4.5rem + clamp(1.5rem, 6svh, 4rem)) 0 clamp(3.5rem, 2rem + 6vw, 7rem);
  background:
    radial-gradient(900px 560px at 92% 12%, rgba(18, 43, 82, .85), transparent 64%),
    radial-gradient(700px 480px at 0 72%, rgba(201, 162, 39, .09), transparent 68%),
    var(--noche);
}
.inscripcion-encabezado {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.inscripcion-encabezado__texto { max-width: 720px; }
.inscripcion-encabezado__texto p { color: var(--texto-2); margin-bottom: 0; }
.inscripcion-segura {
  max-width: 250px;
  padding: .9rem 1rem;
  border-top: 1px solid var(--dorado);
  color: var(--texto-2);
  font-size: var(--paso-1);
}
.inscripcion-segura strong { display: block; color: var(--dorado-claro); }
.inscripcion-shell {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.pasos-indice {
  position: sticky;
  top: 7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pasos;
}
.pasos-indice li {
  counter-increment: pasos;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .8rem;
  margin: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--texto-2);
  font-size: var(--paso-1);
  font-weight: 700;
}
.pasos-indice li::before {
  content: counter(pasos, decimal-leading-zero);
  color: var(--texto-2);
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
}
.pasos-indice li.activo { color: var(--crema); }
.pasos-indice li.activo::before,
.pasos-indice li.completo::before { color: var(--dorado-claro); }
.pasos-indice li.completo { color: var(--dorado-suave); }
.formulario-inscripcion {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: rgba(11, 31, 63, .62);
}
.formulario__progreso {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(185, 196, 218, .14);
  margin-bottom: var(--espacio-3);
}
/* Se anima la escala, no el ancho: animar `width` obliga al navegador a
   recalcular la maquetación en cada fotograma. `--avance` lo fija el JS
   (js/registro.js) con un valor de 0 a 1. */
.formulario__progreso span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--dorado-claro);
  transform-origin: left center;
  transform: scaleX(var(--avance, .1666));
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}
.formulario__estado {
  color: var(--dorado-claro);
  font-size: var(--paso-1);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.paso-formulario { margin: 0; padding: 0; border: 0; min-width: 0; }
.paso-formulario[hidden] { display: none; }
.paso-formulario legend {
  width: 100%;
  padding: 0;
  margin-bottom: .6rem;
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--crema);
}
.paso-formulario__intro { color: var(--texto-2); max-width: 66ch; margin-bottom: var(--espacio-3); }
.campo textarea { min-height: 130px; resize: vertical; }
.grupo-opciones {
  display: grid;
  gap: .65rem;
  margin-bottom: var(--espacio-2);
}
.grupo-opciones .casilla-consentimiento {
  margin: 0;
  padding: .8rem 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  background: rgba(4, 7, 15, .28);
  color: var(--texto);
}
.formulario__acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
  padding-top: var(--espacio-2);
  border-top: 1px solid var(--borde-suave);
}
.formulario__acciones-derecha { display: flex; gap: var(--espacio-2); margin-inline-start: auto; }
.formulario__acciones .btn[hidden] { display: none; }
.btn:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: none; }
.resumen-inscripcion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin: var(--espacio-3) 0;
}
.resumen-inscripcion div { padding-bottom: .8rem; border-bottom: 1px solid var(--borde-suave); }
.resumen-inscripcion dt {
  color: var(--texto-2);
  font-size: var(--paso-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.resumen-inscripcion dd { margin: .25rem 0 0; color: var(--crema); font-weight: 700; overflow-wrap: anywhere; }
.gracias-inscripcion { max-width: 760px; text-align: center; margin-inline: auto; }

/* ---------- Muro de Sueños ---------- */
.muro-formulario {
  max-width: 720px;
  margin: 0 auto clamp(3.5rem, 2rem + 6vw, 7rem);
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) * 1.5);
  background: var(--fondo-tarjeta);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.muro-formulario .kicker { margin-bottom: .4rem; }
.aviso-moderacion {
  display: flex;
  gap: .8em;
  align-items: flex-start;
  border: 1px dashed var(--dorado);
  border-radius: var(--radio);
  background: rgba(201, 162, 39, .08);
  color: var(--dorado-suave);
  padding: 1em 1.2em;
  font-size: var(--paso-1);
  margin-bottom: var(--espacio-3);
}
.aviso-moderacion--centrado {
  max-width: 640px;
  margin: var(--espacio-3) auto;
  text-align: left;
}
.muro-galeria {
  columns: 3 300px;
  column-gap: var(--espacio-3);
}
.muro-tarjeta {
  break-inside: avoid;
  margin-bottom: var(--espacio-3);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-tarjeta);
}
.muro-tarjeta__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.muro-tarjeta__sello {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-display);
  font-size: 4rem;
  letter-spacing: .06em;
  color: var(--dorado-claro);
  background:
    radial-gradient(300px 200px at 50% 120%, rgba(201, 162, 39, .25), transparent 70%),
    var(--noche-2);
}
.muro-tarjeta__cuerpo { padding: var(--espacio-2) var(--espacio-3) var(--espacio-3); }
.muro-tarjeta__texto {
  font-family: var(--fuente-serif);
  font-size: var(--paso-3);
  font-style: italic;
  line-height: 1.5;
  color: var(--texto);
}
.muro-tarjeta__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espacio-2);
  border-top: 1px solid var(--borde-suave);
  padding-top: .8em;
  margin-top: .6em;
}
.muro-tarjeta__nombre { font-weight: 800; color: var(--dorado-claro); }
.muro-tarjeta__fecha { font-size: var(--paso-1); color: var(--texto-2); white-space: nowrap; }
/* Tarjeta recién enviada: aún no es pública y se nota */
.muro-tarjeta--pendiente { border: 1px dashed var(--dorado); opacity: .92; }
.muro-tarjeta__revision {
  margin: .8em 0 0;
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

/* ---------- Contacto ---------- */
.contacto-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espacio-3);
}
.contacto-tarjeta {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  background: var(--fondo-tarjeta);
  text-align: center;
}
.contacto-tarjeta h2,
.contacto-tarjeta h3 {
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}
.contacto-tarjeta p { color: var(--texto-2); }
.contacto-tarjeta a { font-weight: 700; }

/* ---------- Pie de página ---------- */
.pie {
  background: var(--negro);
  border-top: 1px solid var(--borde);
  padding: var(--espacio-4) 0 var(--espacio-3);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .8fr) minmax(0, 1.1fr);
  align-items: start;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-4);
}
.pie__rejilla > div { min-width: 0; }
.pie__marca {
  font-family: var(--fuente-display);
  font-size: 1.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema);
}
.pie__marca em { font-style: normal; color: var(--dorado-claro); }
.pie__marca::before {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-right: .4em;
  vertical-align: middle;
  background: url('../assets/logo-msa-marca-128.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(228, 198, 91, .45));
}
.pie p { color: var(--texto-2); font-size: var(--paso-2); }
.pie h3 {
  font-size: var(--paso-1);
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dorado-claro);
  margin-bottom: var(--espacio-2);
}
.pie__nav {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  column-gap: var(--espacio-2);
  list-style: none;
  padding: 0;
}
.pie__nav li { min-width: 0; margin: 0; }
.pie__nav a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: var(--paso-2);
  white-space: nowrap;
}
.pie__nav a:hover { color: var(--dorado-claro); }
.redes { display: flex; flex-wrap: wrap; gap: .6em 1.2em; margin-top: var(--espacio-2); }
.redes a {
  font-size: var(--paso-1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-2);
}
.redes a:hover { color: var(--dorado-claro); }
.pie__legal {
  border-top: 1px solid var(--borde-suave);
  padding-top: var(--espacio-3);
  text-align: center;
  font-size: var(--paso-1);
}
.pie__legal p { margin: 0; }

/* ---------- Revelado al hacer scroll (fallback con IO) ---------- */
.js .revelar {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .3, 1);
}
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar--retraso-1 { transition-delay: .12s; }
.js .revelar--retraso-2 { transition-delay: .24s; }
.js .revelar--retraso-3 { transition-delay: .36s; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revelar, .js .mascara-linea { opacity: 1 !important; transform: none !important; }
  .js-cine .carta__texto .palabra { opacity: 1 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .puntos { display: none; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__suscripcion { grid-column: 1 / -1; }
  .doble-columna, .doble-columna--invertida { grid-template-columns: 1fr; }
  .doble-columna--invertida .marco { order: -1; }
  .inscripcion-encabezado { align-items: start; flex-direction: column; }
  .inscripcion-segura { max-width: 100%; }
  .inscripcion-shell { grid-template-columns: 1fr; }
  .pasos-indice {
    position: static;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .35rem;
  }
  .pasos-indice li { display: block; padding: .55rem .15rem; text-align: center; border-bottom: 2px solid var(--borde-suave); }
  .pasos-indice li::before { display: block; }
  .pasos-indice li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pasos-indice li.activo, .pasos-indice li.completo { border-bottom-color: var(--dorado-claro); }
}
/* El menú lateral entra antes de que los enlaces en cualquiera de los
   dos idiomas y el selector ES/EN compitan con la marca. */
@media (max-width: 1280px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--espacio-2);
    padding: var(--espacio-4) var(--espacio-3);
    background: rgba(4, 7, 15, .97);
    border-left: 1px solid var(--borde);
    transform: translateX(105%);
    /* Oculto también para el teclado: si no, se puede tabular dentro
       de un menú cerrado que no se ve. */
    visibility: hidden;
    transition: transform var(--transicion), visibility var(--transicion);
    z-index: 190;
    /* Si el contenido supera el alto (teléfono en apaisado), el panel
       se desplaza en vez de recortar los enlaces. */
    overflow-y: auto;
  }
  /* Centrado mientras quepa; al crecer, los márgenes automáticos ceden
     y el contenido queda accesible desde arriba. */
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  .nav.abierto { transform: translateX(0); visibility: visible; }
  /* Velo sobre la página: pertenece al panel (que ya es fixed), así
     que se coloca justo a su izquierda y cubre el resto de pantalla. */
  .nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background: rgba(4, 7, 15, .66);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicion);
  }
  .nav.abierto::before { opacity: 1; pointer-events: auto; }
  .nav a { font-size: var(--paso-3); width: 100%; padding: .6em 0; }
  .nav .selector-idioma { width: auto; padding-inline: .85em; }
  .nav .nav__cta { width: 100%; text-align: center; }
}
@media (max-width: 720px) {
  .suscripcion__fila, .cta-suscripcion .suscripcion__fila { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  /* El botón flotante de WhatsApp nunca tapa la última acción del pie */
  .pie { padding-bottom: calc(var(--espacio-3) + 78px); }
  .capitulo { padding: var(--espacio-2); }
  .cuenta__celda { min-width: calc(50% - 1rem); }
  .registro-inicial__campos, .formulario__rejilla, .resumen-inscripcion { grid-template-columns: 1fr; }
  .opciones-eleccion { grid-template-columns: 1fr; }
  .formulario-inscripcion { padding: 1.25rem; }
  .formulario__acciones { align-items: stretch; flex-direction: column-reverse; }
  .formulario__acciones-derecha { width: 100%; margin-inline-start: 0; }
  .formulario__acciones .btn { width: 100%; text-align: center; }
}

/* Ajustes para dedo: valen para cualquier táctil (móvil o tableta),
   no solo para ventanas estrechas. */
@media (pointer: coarse), (max-width: 720px) {
  /* Por debajo de 16px, iOS hace zoom al enfocar un campo */
  .campo input,
  .campo textarea,
  .campo select { font-size: 16px; }
  /* Enlaces sueltos con altura de dedo, no de ratón */
  .pie__nav a,
  .redes a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pie__nav li { margin-bottom: 0; }
  /* La marca es un enlace al inicio: altura de dedo, no de ratón */
  .marca { min-height: 44px; }
  .nav .selector-idioma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ============================================================
   Escenario "Un libro, un viaje" (solo index)
   Una sola escena fijada con un libro 3D persistente.
   Sin modo cine, el escenario es el hero estático y las
   secciones .fallback llevan la historia en flujo normal.
   ============================================================ */

.escenario {
  /* Centro horizontal del libro dentro del escenario y ancho de la
     columna de texto: se ajustan juntos por breakpoint para que el
     libro quede lo más centrado posible sin pisar el titular.
     En monitores muy anchos el porcentaje dejaría al libro lejos del
     texto (que vive en un contenedor centrado de 1120px): el min()
     lo ancla cerca del centro, a un paso fijo de la línea media. */
  --libro-x: min(63%, calc(50% + 290px));
  --hero-col: 520px;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(6rem, 12vh, 8rem) 4vw var(--espacio-4);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(18, 43, 82, .9), transparent 60%),
    radial-gradient(900px 500px at 15% 110%, rgba(11, 31, 63, .9), transparent 60%),
    var(--noche);
}
/* Estrellas CSS de respaldo si el canvas no corre */
.escenario::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(247, 241, 229, .9), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(228, 198, 91, .8), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(247, 241, 229, .7), transparent),
    radial-gradient(1px 1px at 78% 40%, rgba(247, 241, 229, .8), transparent),
    radial-gradient(2px 2px at 90% 75%, rgba(228, 198, 91, .7), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(247, 241, 229, .6), transparent);
  z-index: 0;
}
.escenario__hero { position: relative; z-index: 3; width: min(1120px, 92vw); margin-inline: auto; }
.escenario__hero .hero__contenido { max-width: var(--hero-col); margin: 0; text-align: left; }
.escenario__hero .hero__lema { margin-left: 0; max-width: var(--hero-col); }
.escenario__hero .hero__acciones { justify-content: flex-start; }

/* El título inglés es más largo: conserva las dos líneas del original
   sin partir "My American" dentro de la máscara animada. */
html[lang="en"] .escenario .titulo-display {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .9;
  letter-spacing: .01em;
}
html[lang="en"] .escenario .titulo-display .mascara { padding-bottom: .04em; }
html[lang="en"] .escenario .titulo-display .mascara-linea { white-space: nowrap; }

/* Viñeta de cine: cierra la mirada sobre el libro conforme avanza la escena */
.escenario__vineta {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 86% 74% at 50% 50%, transparent 46%, rgba(2, 5, 12, .58) 100%);
}

.escenario__halo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(201, 162, 39, .34), rgba(201, 162, 39, .11) 32%, transparent 60%);
}
.escenario__destello {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(240, 217, 140, .95), rgba(201, 162, 39, .4) 42%, transparent 72%);
}

/* ---------- El libro 3D ---------- */
.libro3d {
  --w: 340px;
  --h: 453px;
  --d: 44px;
  --brillo: 0;      /* -1…1 · posición del brillo especular en la tapa */
  position: absolute;
  z-index: 2;
  /* El centro del libro cae en --libro-x del escenario */
  left: var(--libro-x);
  right: auto;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  /* Perspectiva más corta = mayor escorzo = más volumen */
  perspective: 1150px;
  perspective-origin: 54% 44%;
}
/* Luz ambiental dorada detrás del libro: lo despega del fondo */
.libro3d::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 150%;
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / -2 - 40px));
  background: radial-gradient(ellipse at 50% 50%, rgba(201, 162, 39, .28), rgba(201, 162, 39, .08) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.libro3d__giro,
.libro3d__pose,
.libro3d__tilt,
.libro3d__cuerpo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* Pose de reposo: el ángulo que el scroll va cambiando.
   .libro3d__tilt queda libre para el ratón, sin pelearse con él. */
.libro3d__pose { transform: rotateY(-14deg) rotateX(5deg); }
/* Respiración: el libro flota apenas, como sostenido en el aire */
.libro3d__cuerpo { animation: libro-flota 9s ease-in-out infinite; }
@keyframes libro-flota {
  0%, 100% { transform: translate3d(0, -6px, 0) rotateZ(-.5deg); }
  50%      { transform: translate3d(0, 6px, 0) rotateZ(.5deg); }
}
@media (prefers-reduced-motion: reduce) { .libro3d__cuerpo { animation: none; } }

/* Contraportada, lomo y cantos */
.libro3d__contra {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--d) / -2));
  background: linear-gradient(150deg, var(--noche-3), var(--noche) 70%);
  border: 1px solid rgba(228, 198, 91, .25);
  border-radius: 4px 10px 10px 4px;
  backface-visibility: hidden;
}
.libro3d__lomo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--d);
  margin-left: calc(var(--d) / -2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  /* Lomo curvo: la luz cae en el centro y se apaga en los bordes */
  background:
    linear-gradient(90deg, rgba(4, 7, 15, .55), transparent 22%, rgba(255, 240, 190, .32) 46%, transparent 74%, rgba(4, 7, 15, .5)),
    linear-gradient(180deg, #A8861C, var(--dorado) 35%, #8A6D14);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 190, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}
.libro3d__lomo span {
  writing-mode: vertical-rl;
  font-family: var(--fuente-display);
  font-size: calc(var(--d) * .3);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--noche);
  white-space: nowrap;
}
.libro3d__canto {
  position: absolute;
  /* Bloque de hojas: vetas finas + sombreado hacia el lomo */
  background:
    linear-gradient(90deg, rgba(60, 44, 12, .55), transparent 30%, transparent 72%, rgba(60, 44, 12, .35)),
    repeating-linear-gradient(90deg, #F6EFDC 0 1px, #E3D6B6 1px 2px, #CFBE95 2px 3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(60, 44, 12, .3);
  backface-visibility: hidden;
}
.libro3d__canto--der {
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: calc(var(--d) - 8px);
  margin-left: calc((var(--d) - 8px) / -2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 4px));
}
.libro3d__canto--arriba,
.libro3d__canto--abajo {
  left: 5px;
  right: 4px;
  top: 50%;
  height: calc(var(--d) - 8px);
  margin-top: calc((var(--d) - 8px) / -2);
  background:
    linear-gradient(0deg, rgba(60, 44, 12, .5), transparent 30%, transparent 72%, rgba(60, 44, 12, .3)),
    repeating-linear-gradient(0deg, #F6EFDC 0 1px, #E3D6B6 1px 2px, #CFBE95 2px 3px);
}
.libro3d__canto--arriba { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 4px)); }
.libro3d__canto--abajo { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 4px)); }

/* Páginas interiores (carta y frase), apiladas bajo la portada */
.libro3d__pagina {
  position: absolute;
  inset: 4px 3px 4px 5px;
  /* Márgenes de página impresa, no de caja de texto. Simétricos a los
     lados para que la mancha de texto quede centrada en la hoja: con
     márgenes distintos el bloque se veía descolgado hacia un lado. */
  padding: calc(var(--w) * .09) calc(var(--w) * .17);
  background: linear-gradient(105deg, #F5EDDA, #EAE0C4);
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
  backface-visibility: hidden;
}
/* La carta se asienta en el centro vertical de la página: alineada
   arriba dejaba dos tercios de papel vacío debajo y parecía cortada. */
.libro3d__pagina--carta {
  transform: translateZ(calc(var(--d) / 2 - 3px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.libro3d__pagina--frase {
  transform: translateZ(calc(var(--d) / 2 - 4px));
  display: flex;
  align-items: center;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 220, .9), transparent 65%),
    linear-gradient(120deg, var(--dorado-suave), var(--dorado-claro) 55%, var(--dorado));
}
.pagina__kicker {
  font-size: calc(var(--w) * .021);
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* Sobre el papel crema, el oro anterior (#8A6D14) daba 3.73:1 y este
     rótulo es texto pequeño de verdad: en la escena de la carta el libro
     se agranda y se lee sobre los 12px. #6B5410 sube a 5.5:1. */
  color: #6B5410;
  margin-bottom: .8em;
}
.pagina__texto {
  font-family: var(--fuente-serif);
  font-size: calc(var(--w) * .036);
  line-height: 1.55;
  color: #33301F;
  margin: 0;
}
.js-cine .frase-carta { opacity: .08; }
.pagina__firma {
  display: block;
  margin-top: .9em;
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: calc(var(--w) * .034);
  color: #8A6D14;
}
.libro3d__pagina--frase blockquote { margin: 0; text-align: center; width: 100%; }
.pagina__cita {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--w) * .046);
  line-height: 1.4;
  color: #4A3A08;
  margin: 0 0 .8em;
}
@media (min-width: 1200px) {
  .libro3d__pagina--frase {
    padding-inline: calc(var(--w) * .1);
  }
  .pagina__cita-linea {
    display: block;
    white-space: nowrap;
  }
}
.pagina__cita-firma {
  font-size: calc(var(--w) * .022);
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #6B5410;
}

/* Portada real con bisagra en el lomo */
.libro3d__bisagra {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateZ(calc(var(--d) / 2));
  transform-style: preserve-3d;
}
/* La portada es el eje que gira: sus dos caras son planos 3D reales,
   así el reverso sigue visible cuando el libro se abre. */
.libro3d__portada {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
}
.libro3d__portada-cara,
.libro3d__portada-rev {
  position: absolute;
  inset: 0;
  border-radius: 3px 8px 8px 3px;
  overflow: hidden;
  backface-visibility: hidden;
}
.libro3d__portada-cara {
  transform: translateZ(2px);
  box-shadow:
    0 40px 90px rgba(4, 7, 15, .85),
    0 0 70px rgba(201, 162, 39, .25),
    inset -1px 0 0 rgba(255, 245, 210, .35),
    inset 0 1px 0 rgba(255, 245, 210, .3);
}
.libro3d__portada-cara picture,
.libro3d__portada-cara img { width: 100%; height: 100%; object-fit: cover; }
/* Sombra del canal junto al lomo: da grosor a la tapa */
.libro3d__portada-cara::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 12, .62), rgba(2, 5, 12, .26) 5%, transparent 13%),
    linear-gradient(270deg, rgba(2, 5, 12, .3), transparent 8%);
  pointer-events: none;
}
/* Brillo especular: una luz que resbala por la tapa satinada */
.libro3d__portada-cara::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg,
    transparent 30%,
    rgba(255, 250, 235, .16) 43%,
    rgba(255, 250, 235, .3) 49%,
    rgba(255, 250, 235, .1) 55%,
    transparent 68%);
  pointer-events: none;
  /* El eje del brillo sigue la inclinación del libro (lo mueve el JS) */
  transform: translateX(calc(var(--brillo, 0) * 14%));
}
.libro3d__portada-rev {
  transform: rotateY(180deg) translateZ(2px);
  border-radius: 8px 3px 3px 8px;
  background:
    linear-gradient(270deg, rgba(2, 5, 12, .55), rgba(2, 5, 12, .2) 6%, transparent 15%),
    radial-gradient(circle at 50% 30%, rgba(201, 162, 39, .18), transparent 60%),
    linear-gradient(210deg, var(--noche-3), var(--noche) 75%);
  box-shadow: inset 0 0 0 1px rgba(228, 198, 91, .3);
}
/* Canto de la tapa: el filo dorado que se ve de perfil */
.libro3d__portada-canto {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  /* Se tumba sobre el filo derecho y ocupa el grosor de la tapa (±2px) */
  transform: translateZ(-2px) rotateY(90deg);
  transform-origin: 100% 50%;
  background: linear-gradient(180deg, #E4C65B, #A8861C);
}
/* Sombra proyectada sobre el suelo: un plano tumbado bajo el libro */
.libro3d::after {
  content: "";
  position: absolute;
  left: 50%;
  /* El plano empieza bajo el canto, no encima de la parte baja de la tapa. */
  top: calc(100% + clamp(18px, 6%, 28px));
  width: 100%;
  height: 46%;
  transform-origin: 50% 0%;
  transform: translate(-52%, 0) translateZ(calc(var(--d) / -2)) rotateX(-76deg);
  background:
    radial-gradient(ellipse 42% 40% at 47% 26%, rgba(2, 4, 10, .92), transparent 72%),
    radial-gradient(ellipse 62% 58% at 50% 30%, rgba(2, 4, 10, .5), transparent 76%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---------- La inscripción en modo cine (a la izquierda del libro) ----------
   Espeja la composición del hero: texto en la columna izquierda del
   contenedor, el libro de vuelta en su sitio a la derecha. */
.cuenta-cine { display: none; }
.js-cine .cuenta-cine {
  display: block;
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  /* El mismo borde izquierdo que el contenedor del hero (1120px) */
  left: max(4vw, calc(50% - 560px));
  width: min(520px, 42vw);
  opacity: 0;
  visibility: hidden;
}
.cuenta-cine__titulo { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); }
.cuenta-cine__texto { color: var(--texto-2); }
.cuenta-cine .cuenta {
  justify-content: flex-start;
  gap: clamp(.6rem, 1vw, .9rem);
  margin: var(--espacio-2) 0;
}
.cuenta-cine .cuenta__celda {
  min-width: clamp(68px, 7vw, 102px);
  padding: clamp(.8rem, 1.6vw, 1.2rem) .5rem;
}
.cuenta-cine .cuenta__num { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }

/* ---------- Fallbacks: sin modo cine la historia fluye normal ---------- */
.js-cine .fallback { display: none; }

/* Encuadre del libro por ancho: el libro se queda cerca del centro
   y es la columna de texto la que cede sitio. Por debajo de 900px
   ya no caben lado a lado: el libro pasa a ir centrado. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .escenario { --hero-col: 460px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .escenario { --hero-col: 400px; }
  .libro3d { --w: 290px; --h: 386px; --d: 38px; }
}
@media (min-width: 901px) and (max-width: 999px) {
  .escenario { --hero-col: 340px; }
  .libro3d { --w: 260px; --h: 346px; --d: 34px; }
}
@media (max-width: 900px) {
  .escenario { --libro-x: 50%; --hero-col: 32rem; }
  .libro3d { --w: 250px; --h: 333px; --d: 32px; }
  /* En vertical el texto se apoya arriba y el libro ocupa el bajo */
  .js-cine .escenario { align-items: flex-start; }
  /* La cuenta pasa abajo y el libro sube: misma pauta vertical.
     En vertical el bloque manda y se compacta, para que arriba quede
     una franja limpia donde el JS encaja el libro (ver franjaCuenta). */
  .js-cine .cuenta-cine {
    top: auto;
    /* Por encima del botón flotante de WhatsApp (56px + 18px),
       que si no se sienta sobre la línea de "Reserva tu lugar" */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    left: 5vw;
    right: 5vw;
    width: auto;
    transform: none;
    text-align: center;
  }
  .js-cine .cuenta-cine .kicker { margin-bottom: .4rem; }
  .js-cine .cuenta-cine__titulo { font-size: clamp(1.5rem, 5.4vw, 2.3rem); }
  .js-cine .cuenta-cine__texto {
    font-size: var(--paso-1);
    max-width: 40ch;
    margin: .4rem 0 0;
  }
  /* Las celdas de la cuenta en el pin las compacta la hoja de la
     página (css/paginas/index.css), que es donde vive su diseño. */
  /* Sin modo cine, el libro va en flujo bajo el texto del hero */
  html:not(.js-cine) .escenario { flex-direction: column; justify-content: center; text-align: center; --hero-col: 640px; }
  html:not(.js-cine) .escenario__hero .hero__contenido { margin-inline: auto; text-align: center; }
  html:not(.js-cine) .escenario__hero .hero__lema { margin-inline: auto; }
  html:not(.js-cine) .escenario__hero .hero__acciones { justify-content: center; }
  html:not(.js-cine) .libro3d {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: var(--espacio-4) auto 0;
  }
}
@media (max-width: 720px) {
  .libro3d { --w: 230px; --h: 307px; --d: 30px; }
}

/* En el teléfono la portada es la protagonista del hero, y su tamaño
   sale de la franja libre que mide cinematico.js. Así que aquí se le
   hace sitio: el aire de arriba y el indicador de deslizado ceden los
   píxeles que la portada gana. El indicador conserva su gesto (línea
   dorada y texto), solo que a escala de teléfono. */
@media (max-width: 720px) {
  .escenario { padding-top: clamp(5.25rem, 10vh, 7rem); }
  .hero__desliza {
    bottom: var(--espacio-2);
    font-size: .64rem;
    letter-spacing: .26em;
  }
  .hero__desliza::after { height: 26px; margin-top: .55em; }
}

/* Teléfonos cortos (también apaisado): el hero se compacta para que
   el libro quepa en la franja libre que mide cinematico.js entre el
   texto y el indicador de deslizado. Solo afecta a anchos ≤ 900px; a
   partir de 901px la composición de escritorio queda intacta. */
@media (max-width: 900px) and (max-height: 700px) {
  .escenario { padding-top: 4.25rem; }
  .escenario .hero__edicion { margin-bottom: .5rem; letter-spacing: .26em; }
  .escenario .titulo-display { margin-bottom: .5rem; font-size: clamp(2.5rem, 1.8rem + 7vw, 3rem); }
  .escenario .hero__lema { margin-bottom: var(--espacio-2); }
  .escenario .hero__acciones { gap: .75rem; }
  /* El indicador conserva su espacio (el JS mide su offsetTop para
     situar el libro) pero no se dibuja sobre la portada */
  .hero__desliza { font-size: .62rem; visibility: hidden; }
  .hero__desliza::after { height: 24px; margin-top: .5em; }
  .libro3d { --w: 190px; --h: 253px; --d: 24px; }
}

/* ============================================================
   CIMIENTOS v2 — pulido transversal
   Se añade al final a propósito: comparte especificidad con los
   bloques de arriba y gana por orden, así que ajusta el sistema sin
   reescribirlo. Las hojas por página se cargan después y mandan
   sobre esto.
   ============================================================ */

:root {
  /* Medida de lectura: ninguna columna de texto supera este ancho */
  --medida: 68ch;
  --radio-lg: 21px;
  --radio-sm: 10px;
  /* Luz: el sistema promete iluminación dorada localizada, no
     rectángulos planos. Estos son los tres niveles permitidos. */
  --bloom-suave: radial-gradient(120% 90% at 50% 0%, rgba(228, 198, 91, .10), transparent 62%);
  --bloom-medio: radial-gradient(100% 80% at 50% 0%, rgba(228, 198, 91, .16), transparent 60%);
  --sombra-panel: 0 24px 60px rgba(4, 7, 15, .55);
  --sombra-panel-lateral: -24px 0 60px rgba(4, 7, 15, .6);
  /* Zonas seguras del teléfono (notch, barra de gestos) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ---------- Foco visible coherente en todo el sitio ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--dorado-claro);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

/* ---------- Nada de palabras partidas a la mitad ----------
   El correo largo del pie y de contacto se rompía como
   "…americano.c / om". Se permite romper sólo cuando de verdad no
   cabe, y por caracteres, no a mitad de sílaba visible. */
a[href^="mailto:"],
a[href^="tel:"],
.pie a,
.contacto-directo a {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

/* ---------- Tipografía: más aplomo en el teléfono ----------
   Los títulos caían casi al tamaño del cuerpo en 390px y la promesa
   cinematográfica se perdía. Se sube el mínimo y se ajusta el
   interlineado, que en display condensada pedía menos aire. */
.titulo-display { line-height: 1.02; text-wrap: balance; }
.titulo-grande { line-height: 1.04; text-wrap: balance; }
.pagina-hero__titulo { line-height: 1.0; }
.sub-seccion, .pagina-hero__lema { text-wrap: pretty; }

/* Columna de lectura: el cuerpo largo nunca corre de borde a borde */
.medida { max-width: var(--medida); }
.medida--centrada { max-width: var(--medida); margin-inline: auto; }

/* ---------- Primitivas de luz para las páginas ----------
   En vez de que cada página invente su propio degradado, hay tres
   capas reutilizables. Se aplican sobre .seccion. */
.seccion--luz { background-image: var(--bloom-suave); }
.seccion--luz-alta { background-image: var(--bloom-medio); }
/* Regla dorada fina: separa sin dibujar una caja */
.regla-oro {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde), transparent);
  margin: var(--espacio-3) 0;
}

/* ---------- Botones: el táctil no tiene hover ----------
   Sin estado :active el botón parecía muerto al tocarlo en el
   teléfono. Se añade respuesta inmediata y área mínima de dedo. */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@media (hover: none) {
  /* En táctil el :hover se queda "pegado" tras el toque */
  .btn:hover { transform: none; box-shadow: none; }
}

/* ---------- Campos ---------- */
.campo input,
.campo textarea,
.campo select { min-height: 48px; }
.campo textarea { min-height: 130px; }

/* ============================================================
   Panel de navegación móvil
   El fallo de fondo (la cabecera con backdrop-filter convertía el
   panel fixed en hijo suyo) está resuelto arriba, en .cabecera::before.
   Aquí sólo se pule cómo entra y cómo se lee.
   ============================================================ */
@media (max-width: 1280px) {
  .nav {
    /* El panel respeta el notch y la barra de gestos */
    padding: calc(var(--espacio-4) + var(--safe-t)) var(--espacio-3)
             calc(var(--espacio-4) + var(--safe-b));
    padding-right: calc(var(--espacio-3) + var(--safe-r));
    /* Opaco de verdad: con .97 el titular de la página se leía por
       detrás del panel y parecía un fallo de dibujado. La profundidad
       la da el degradado, no la transparencia. */
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(18, 43, 82, .55), transparent 70%),
      linear-gradient(180deg, #060B18, #04070F);
    box-shadow: var(--sombra-panel-lateral);
    gap: .25rem;
  }
  /* Los enlaces entran escalonados detrás del panel: el movimiento
     confirma que el menú respondió al toque. */
  .nav a {
    padding: .72em 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .js .nav a {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .38s ease, transform .38s cubic-bezier(.22, .8, .3, 1), color var(--transicion);
  }
  .js .nav.abierto a { opacity: 1; transform: none; }
  .js .nav.abierto a:nth-child(1) { transition-delay: .06s; }
  .js .nav.abierto a:nth-child(2) { transition-delay: .10s; }
  .js .nav.abierto a:nth-child(3) { transition-delay: .14s; }
  .js .nav.abierto a:nth-child(4) { transition-delay: .18s; }
  .js .nav.abierto a:nth-child(5) { transition-delay: .22s; }
  .js .nav.abierto a:nth-child(6) { transition-delay: .26s; }
  .js .nav.abierto a:nth-child(7) { transition-delay: .30s; }
  .js .nav.abierto a:nth-child(8) { transition-delay: .34s; }
  /* El subrayado de escritorio no tiene sentido en una lista vertical:
     el estado activo se marca con una barra dorada a la izquierda. */
  .nav a::after { display: none; }
  .nav a[aria-current="page"] {
    padding-left: .9em;
    border-left: 2px solid var(--dorado-claro);
  }
  .nav .nav__cta { margin-top: var(--espacio-2); min-height: 52px; }
  .nav .selector-idioma { margin-top: var(--espacio-2); }
  /* El velo se difumina un poco: separa el panel del fondo sin
     apagar del todo la página. */
  .nav::before { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  /* Con el menú abierto, nada compite por encima del velo */
  .menu-abierto .whatsapp-flotante { opacity: 0; pointer-events: none; }
  .menu-abierto .progreso { opacity: 0; }
}

.nav-toggle {
  /* El panel abierto se dibujaba por encima del propio botón: el panel
     está posicionado con z-index 190 y el botón no estaba posicionado,
     así que el aspa quedaba debajo y no se podía cerrar el menú con
     ella. Posicionado y por encima del panel, el botón alterna de
     verdad en ambos sentidos. */
  position: relative;
  z-index: 195;
  transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}
.nav-toggle[aria-expanded="true"] {
  border-color: var(--borde);
  background-color: rgba(4, 7, 15, .6);
}
.nav-toggle:active { transform: scale(.94); }
@media (hover: hover) {
  .nav-toggle:hover { border-color: var(--dorado-claro); background-color: rgba(201, 162, 39, .1); }
}

/* ---------- WhatsApp flotante: fuera de la barra de gestos ---------- */
.whatsapp-flotante {
  left: calc(18px + var(--safe-l));
  bottom: calc(18px + var(--safe-b));
  transition: transform var(--transicion), box-shadow var(--transicion), opacity var(--transicion);
}

/* ============================================================
   Pie de página
   Pesaba tanto como una sección: repetía la navegación completa, el
   CTA y el legal en tres columnas que en el teléfono se convertían
   en una torre. Se aligera el ritmo y se ordena la jerarquía.
   ============================================================ */
.pie {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(18, 43, 82, .5), transparent 65%),
    var(--negro);
  padding-bottom: calc(var(--espacio-3) + var(--safe-b));
}
.pie__rejilla { gap: clamp(2rem, 5vw, 4rem); margin-bottom: var(--espacio-3); }
.pie__marca,
.pie h3 {
  display: flex;
  min-height: 2rem;
  align-items: center;
  margin: 0 0 var(--espacio-2);
  line-height: 1.1;
}
.pie__marca { column-gap: .2em; }
.pie h3 { letter-spacing: .26em; }
.pie__nav { margin: 0; }
.pie__nav a { line-height: 1.6; transition: color var(--transicion); }
.pie__legal { color: var(--texto-2); line-height: 1.9; }
/* La línea legal es una lista de piezas separadas por "·": el dominio y
   el correo son unidades y no se parten ("…americano.c / om"). La
   línea rompe ENTRE piezas, no dentro de ellas. */
.pie__legal a { white-space: nowrap; }
.pie__legal a[href^="mailto:"] {
  display: inline-block;
  max-width: 100%;
  /* Si ni así cabe (320px), encoge antes que desbordar */
  font-size: clamp(.7rem, 3.1vw, 1em);
  vertical-align: bottom;
}
.pie__legal a { color: var(--texto-2); text-decoration-color: var(--borde); }
.pie__legal a:hover { color: var(--dorado-claro); }

@media (max-width: 720px) {
  .pie__rejilla { gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
  /* Dos columnas con filas compartidas: un enlace largo ya no desalinea
     la fila equivalente de la columna vecina. */
  .pie__nav { column-gap: var(--espacio-2); }
  .pie__marca { font-size: 1.45rem; }
  .pie__marca::before { width: 38px; height: 38px; }
  .pie__legal { padding-top: var(--espacio-2); line-height: 2; }
  /* El botón flotante de WhatsApp (56px + 18px de margen) se sienta
     sobre la esquina inferior izquierda: el pie le reserva ese hueco.
     La regla de arriba, sin media query, pisaba la reserva original y
     el botón acababa tapando el teléfono del pie. */
  .pie { padding-bottom: calc(var(--espacio-3) + 78px + var(--safe-b)); }
}

/* ---------- Firma SmoothLayers ----------
   Una firma de autor, no un anuncio invasivo. Hereda la paleta del sitio
   y deja que la flecha haga el único gesto de movimiento. */
.pie__firma {
  margin-top: var(--espacio-3);
  border-top: 1px solid var(--borde-suave);
}

.firma-smoothlayers {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.5rem);
  min-height: 5.5rem;
  padding: 1rem 0;
  overflow: visible;
  color: var(--crema);
  text-decoration: none;
}

.firma-smoothlayers::before {
  content: none;
}

.firma-smoothlayers__marca {
  display: grid;
  place-items: center;
  align-self: center;
  width: 2.55rem;
  height: 2.55rem;
  background: url("/assets/smoothlayers-mark.png") center / contain no-repeat;
}

.firma-smoothlayers__marca svg {
  display: none;
}

.firma-smoothlayers__texto {
  display: flex;
  align-items: baseline;
  gap: .42em;
  min-width: 0;
  font-size: clamp(.64rem, 1.1vw, .72rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.firma-smoothlayers__texto span {
  color: var(--texto-2);
}

.firma-smoothlayers__texto strong {
  color: var(--crema);
  font-size: inherit;
  font-weight: 800;
  letter-spacing: .03em;
}

.firma-smoothlayers__accion {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: .55rem;
  color: var(--dorado-claro);
  font-size: var(--paso-1);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.firma-smoothlayers__accion svg {
  width: 1rem;
  height: 1rem;
  transform-origin: center;
}

.firma-smoothlayers:focus-visible {
  outline: 2px solid var(--dorado-claro);
  outline-offset: 6px;
}

@media (max-width: 720px) {
  .pie__firma { margin-top: var(--espacio-2); }

  .firma-smoothlayers {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    min-height: 0;
    padding: 1.2rem 0 .2rem;
  }

  .firma-smoothlayers__marca {
    grid-row: 1 / span 2;
    width: 2.25rem;
    height: 2.25rem;
  }

  .firma-smoothlayers__texto span {
    font-size: inherit;
  }

  .firma-smoothlayers__texto {
    font-size: clamp(.56rem, 2.8vw, .66rem);
    letter-spacing: .07em;
  }

  .firma-smoothlayers__accion {
    grid-column: 2;
    justify-self: start;
    align-self: start;
    margin-top: .3rem;
    white-space: normal;
  }
}

/* ---------- Casillas de consentimiento ----------
   Aparecen en el inicio, en suscríbete y en la inscripción con el mismo
   marcado, pero cada página las dibujaba distinto: en el inicio seguían
   siendo la casilla nativa de 19px. Es un control de consentimiento —
   el estado marcado tiene que ser inequívoco y la fila entera tiene que
   ser tocable. Se unifica aquí para las tres. */
.casilla-consentimiento {
  align-items: center;
  min-height: 52px;
  gap: var(--espacio-2);
  color: var(--texto);
  font-size: clamp(.875rem, .82rem + .22vw, 1rem);
  cursor: pointer;
}
.casilla-consentimiento input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(185, 196, 218, .55);
  border-radius: 8px;
  background: rgba(4, 7, 15, .72);
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}
.casilla-consentimiento input[type="checkbox"]::after {
  content: "";
  width: .4rem;
  height: .72rem;
  margin-top: -.14rem;
  border: solid var(--noche);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.7);
  transition: opacity var(--transicion), transform var(--transicion);
}
.casilla-consentimiento input[type="checkbox"]:checked {
  border-color: var(--dorado-claro);
  background: var(--dorado-claro);
  box-shadow: 0 6px 18px rgba(201, 162, 39, .18);
}
.casilla-consentimiento input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.casilla-consentimiento input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--dorado-claro);
  outline-offset: 3px;
}

/* ============================================================
   Retícula de escritorio
   Un eje no significa una sola columna. En el teléfono la página es
   una columna; a partir de 1024px puede componer en varias, pero
   todas deben caer en las mismas doce divisiones para que una sección
   cuadre con la siguiente y una página con otra. Nadie inventa su
   propio porcentaje.
   ============================================================ */
.rejilla { display: grid; gap: var(--espacio-3); }

@media (min-width: 1024px) {
  .rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    align-items: start;
  }
  /* Tramos permitidos: sólo estos, para que los bordes se repitan. */
  .tramo-4  { grid-column: span 4; }
  .tramo-5  { grid-column: span 5; }
  .tramo-6  { grid-column: span 6; }
  .tramo-7  { grid-column: span 7; }
  .tramo-8  { grid-column: span 8; }
  .tramo-12 { grid-column: 1 / -1; }
  /* Empieza en la mitad derecha sin perder la retícula */
  .tramo-inicio-7 { grid-column-start: 7; }
  .tramo-inicio-6 { grid-column-start: 6; }
  /* Un párrafo nunca supera la medida de lectura aunque su tramo sea ancho */
  .rejilla p, .rejilla li { max-width: var(--medida); }
}