/* =====================================================================
   PORTADA PÚBLICA · armada desde la maqueta de Diseño
   Sistema: design/tokens.css (Poppins + IBM Plex Mono, azul #0460a9).
   Lo único que esta página añade al sistema son cuatro cosas, marcadas
   aquí y explicadas en LEEME.md:
     · cuerpo a 1rem (16 px): los tokens traen 15 px, que es de app;
     · la banda clara (--banda, --banda-texto, --banda-tenue, --banda-linea,
       --banda-acento: el hielo de la casa con tinta oscura; nada de bandas
       oscuras: la app es solo clara);
     · el cierre azul del pie: usa --acento, --acento-texto, --acento-tenue y
       --acento-linea, que viven en tokens.css (es el 8 % del reparto 60-30-10);
     · la rejilla de 6,35 mm (--celda = 24 px a 96 dpi).
   ===================================================================== */

/* La banda del manual: el hielo de la casa (--brand-ice) con la tinta del
   sistema. Es clara a proposito: el dueno no quiere nada oscuro. */
:root {
  --banda: #eaf7ff;
  --banda-texto: #102443;     /* 14,5:1 sobre la banda */
  --banda-tenue: #53677f;     /* 5,2:1 sobre la banda */
  --banda-linea: #cfdfeb;
  --banda-acento: #0460a9;    /* lo que se enciende sobre la banda: 5,9:1 */
  --celda: 24px;              /* 6,35 mm a 96 ppp: la rejilla real del kit */
  --barra: 68px;              /* alto de la cabecera fija */
  /* La hoja del buzón y su tinta: papel blanco con la cinta en el azul de
     marca (#0460a9). Blanco sobre la cinta 6,5:1; el hielo, 5,9:1. */
  --hoja-fondo: #fff;
  --hoja-tinta: #0460a9;
  --hoja-tinta-texto: #ffffff;
  --hoja-tinta-tenue: #eaf7ff;
  --hoja-tinta-sello: #ffffff;
  --hoja-tinta-hover: #004f8e;
  /* La escala de esta página, en ocho pasos y sin titulares fluidos: 12, 14,
     16, 18, 22, 26, 31 y 45. El paso pequeño sube de 13 a 14 porque a un píxel
     del 12 no se distinguía; el resto sale de los tokens del sistema, y el
     titular del hero es el último (--text-5xl). */
  --text-sm: 0.875rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;              /* decisión de portada: 16 px, no los 15 de app */
  line-height: var(--leading-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text); }
/* La escala de la portada son OCHO pasos y no se sale de ellos:
   12 · 13 · 16 · 18 · 22 · 26 · 31 · 45 px. Antes había dieciséis tamaños
   distintos porque cada titular interpolaba con clamp(); ahora el salto de
   los grandes se da en un solo punto (720 px), que se lee igual de bien y
   deja una escala que se puede contar. */
h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-2xl); }
h3 { font-size: var(--text-lg); line-height: var(--leading-lg); }
@media (min-width: 720px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-3xl); }
}
p  { margin: 0; }
a  { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

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

/* La cabecera fija tapa el principio de cada bloque al saltar con el menú. */
[id] { scroll-margin-top: calc(var(--barra) + var(--space-4)); }

.saltar {
  position: absolute; left: var(--space-4); top: -100px; z-index: 50;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: var(--space-3); }

.envoltura {
  width: min(1180px, 100% - 2 * clamp(var(--space-4), 5vw, var(--space-7)));
  margin-inline: auto;
}

/* Etiqueta mono que abre cada bloque: la firma del sistema. */
.etiqueta {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.etiqueta::before {
  content: ""; width: var(--space-6); height: 1px; background: currentColor; opacity: .55;
}
.etiqueta--claro { color: var(--banda-tenue); }

.entrada { max-width: 62ch; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-lg); }
.entrada strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-5);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-text); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.boton--principal { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.boton--principal:hover { background: var(--primary-hover); color: var(--on-primary); }
.boton--principal:active { transform: translateY(1px); }
.boton--secundario { background: transparent; color: var(--text); border-color: var(--border-strong); }
.boton--secundario:hover { background: var(--surface); border-color: var(--text); color: var(--text); }
.boton--claro { background: var(--surface); color: var(--text); }
.boton--claro:hover { background: var(--on-primary); color: var(--text); }
.boton--fantasma-claro { background: transparent; color: var(--banda-texto); border-color: var(--banda-linea); }
.boton--fantasma-claro:hover { background: rgb(4 96 169 / .08); color: var(--banda-texto); border-color: var(--banda-tenue); }
.boton[disabled] { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  /* El alto de la cabecera, que perfil-menu.css usa para colgar el menú del
     perfil. El script (perfil-menu.js) mide la cabecera de verdad al abrirlo;
     esto es lo que vale cuando no puede medirla. Sin declararlo mandaba la
     reserva de perfil-menu.css —60 px— y el menú salía en 68 con el borde de
     la cabecera (69 de alto real) por dentro; ahora sale en 76. 68 es el
     --barra de arriba. */
  --barra-alto: var(--barra);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.cabecera__fila {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--barra);
}
.marca { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text); flex: none; }
/* El logo de Villacampa (escudo + nombre, para fondo claro): 525x134, así que a 34 px de alto mide 133. */
.marca__logo { display: block; height: 34px; width: auto; }
.marca__pie {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding-left: var(--space-3); border-left: 1px solid var(--border); line-height: 1.6;
}
@media (max-width: 520px) { .marca__pie { display: none; } }

.nav { margin-left: auto; display: none; }
.nav ul { display: flex; align-items: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.nav a {
  color: var(--text); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--link); border-bottom-color: var(--primary); }
.cabecera__accion { display: none; }

/* El icono de perfil de la cabecera: el mismo de la portada, el inventario y el
   constructor. Sustituye al botón «Entrar». Se ve siempre, también en el
   teléfono, donde queda solo el avatar. */
.cabecera__perfil { display: inline-flex; margin-left: auto; }

.menu-movil { margin-left: var(--space-2); position: relative; }
.menu-movil > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary .rayas { display: grid; gap: 3px; }
.menu-movil > summary .rayas i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-movil[open] > summary { background: var(--surface); }
.menu-movil__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  width: min(78vw, 280px); padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
.menu-movil__panel ul { margin: 0; padding: 0; list-style: none; }
.menu-movil__panel a:not(.boton) {
  display: flex; align-items: center; min-height: var(--control-h);
  padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 500;
}
.menu-movil__panel a:not(.boton):hover { background: var(--surface-2); color: var(--text); }
.menu-movil__panel .boton { width: 100%; margin-top: var(--space-2); }

@media (min-width: 940px) {
  .nav { display: block; }
  .cabecera__accion { display: inline-flex; }
  .cabecera__perfil { margin-left: 0; }
  .menu-movil { display: none; }
}

/* A 420 y menos la fila no cabe con la palabra: 157,6 de marca + 44 de perfil
   + 95,7 de «Menú» y 48 de huecos son 345,3 en 288 útiles a 320, así que la
   página se iba de lado (medido en vivo: 49 px a 320 y 11 a 360). El «Menú» se
   queda en sus tres rayas —el nombre sigue en el lector de pantalla, dentro de
   su span— y los huecos bajan a 12: 241,6 de piezas + 24 de huecos + 8 del
   margen del botón son 273,6 en 288. La marca conserva su palabra. A 421
   vuelve el «Menú» escrito: 345,3 en 379. */
@media (max-width: 420px) {
  .cabecera__fila { gap: var(--space-3); }
  .menu-movil > summary { padding: 0 var(--space-3); }
  .menu-movil__texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------------------------------------------------------------- secciones */
.seccion { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.seccion--ajustada { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }
.seccion__cabeza { max-width: 34ch; }
.seccion__cabeza h2 + .entrada { margin-top: var(--space-4); }

/* 1 · HERO --------------------------------------------------------------- */
.hero { padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-7), 7vw, var(--space-9)); }
.hero__rejilla { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; }
.hero__texto { min-width: 0; }
.hero__texto h1 { margin-top: var(--space-2); }
.hero__texto .entrada { margin-top: var(--space-5); max-width: 46ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__credito {
  margin-top: var(--space-5); font-size: 1rem; color: var(--text);
  max-width: 46ch;
}
.hero__credito a { color: var(--text); font-weight: 600; text-decoration-color: var(--border-strong); }
.hero__credito a:hover { color: var(--link); }

/* La hoja del plano: el marco con esquinas de plano técnico. */
.plano {
  position: relative; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  /* Menos marco: los 16 px de relleno se comían parte del ancho del modelo. */
  padding: var(--space-3);
}
.plano::before, .plano::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--primary); opacity: .8;
}
.plano::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-md); }
.plano::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-md); }
.plano__lienzo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--surface); }
.plano__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.plano__pie b { font-weight: 500; color: var(--text); }
@media (max-width: 600px) { .plano__lienzo { aspect-ratio: 1 / 1; } }

/* El hero y los cuatro pasos: el M.A.D. Box del constructor, en 3D de
   verdad. El lienzo es el del constructor —su suelo y su rejilla de 6,35 mm— y
   los colores salen de la única fuente que hay, public/constructor/constructor.css
   (--lienzo-suelo, --lienzo-rejilla). Siempre claro: no hay tema oscuro.
   El dibujo lo pone portada-visor.js; aquí solo está la caja, el aviso de
   cuando no hay 3D y la pista de que se puede girar. */
.visor {
  position: relative;
  /* El cielo del lienzo: al inclinar la figura se ve el fondo de la escena, y
     sin esta variable el visor tiraba de un color oscuro. Vive aquí, en la
     maqueta, porque public/portada.css se genera de este archivo. */
  --lienzo-fondo: #d8e7f5;
  --lienzo-suelo: #c7dcf0;
  --lienzo-rejilla: #a3c1de;
  --visor-fondo: var(--lienzo-fondo);
  --visor-suelo: var(--lienzo-suelo);
  --visor-rejilla: var(--lienzo-rejilla);
  background: var(--lienzo-suelo);
  overflow: hidden;
  touch-action: pan-y;
}
.plano__hero { aspect-ratio: 5 / 3; }
.momento__lienzo .visor { width: 100%; height: 100%; }
.visor__lienzo {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: pan-y;
}
.visor--arrastrando .visor__lienzo { cursor: grabbing; }
.visor__lienzo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Sin 3D no queda un hueco vacío: queda el aviso, que se lee. Vive sobre el
   mismo lienzo claro del visor, así que su tinta va fija, como la de la pista:
   #102443 sobre --lienzo-suelo (#c7dcf0) da 11:1. */
.visor__aviso {
  position: absolute; inset: 0; display: none; place-items: center;
  margin: 0; padding: var(--space-5); text-align: center;
  font-size: var(--text-sm); color: #102443;
}
.visor[data-visor-estado="sin-3d"] .visor__aviso { display: grid; }
.visor[data-visor-estado="sin-3d"] .visor__lienzo { display: none; }
/* La pista de que se puede girar: sale solo cuando hay modelo y se va sola
   en cuanto el visitante gira la figura una vez. */
.visor__pista {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: none; padding: .2rem .5rem; border-radius: var(--radius-pill);
  /* La pista vive sobre el lienzo claro del constructor (--lienzo-suelo,
     arriba). Su tinta va fija: #102443 sobre #f4f7fa da 13:1. */
  background: rgb(255 255 255 / .84); color: #102443;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .05em; text-transform: uppercase; pointer-events: none;
}
.visor--vivo .visor__pista { display: inline-block; }
.visor--girado .visor__pista { display: none; }

@media (min-width: 900px) {
  /* El modelo manda un poco más que el texto (antes 5 y 6): el M.A.D. Box es
     lo que se viene a ver. El titular pierde 17 px de ancho y sigue con los
     mismos renglones. */
  .hero__rejilla { grid-template-columns: minmax(0, 4.8fr) minmax(0, 6.2fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); }
}

/* 2 · QUÉ ES ------------------------------------------------------------- */
.registro { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.registro li {
  display: grid; gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5); border-bottom: 1px solid var(--border);
}
.registro__num {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--primary); letter-spacing: .08em;
}
.registro h3 { font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: -0.01em; }
.registro p { color: var(--text-muted); max-width: 54ch; margin-top: var(--space-1); }
.registro strong { color: var(--text); font-weight: 600; }
@media (min-width: 820px) {
  .registro li { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .registro__num { padding-top: 6px; }
}

/* La frase honesta: banda clara de una sola línea, sin tarjeta. */
.honesto {
  margin-top: var(--space-7);
  background: var(--surface); color: var(--banda-texto);
  border: 1px solid var(--banda-linea); box-shadow: var(--shadow-1);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  display: grid; gap: var(--space-4);
}
.honesto p { font-size: var(--text-xl); line-height: 1.35; letter-spacing: -0.01em; max-width: 40ch; }
.honesto p b { color: var(--banda-texto); font-weight: 600; }
.honesto small {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .07em;
  text-transform: uppercase; color: var(--banda-tenue);
}
@media (min-width: 900px) { .honesto { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* =====================================================================
   3 · CÓMO FUNCIONA — propuesta (Diseño, 30-oct-2026)
   Reemplaza el bloque «3 · CÓMO FUNCIONA» de portada.css y el <ol class="pasos">
   de la maqueta. Sustituye el .pasos de cuatro columnas (figuras de 259 px, en
   las que no se veía el modelo) por cuatro paradas en dos columnas con la figura
   a 566 px en escritorio, la misma escala y el mismo encuadre en las cuatro.

   LO QUE SE MANTIENE DEL SISTEMA
     · la etiqueta mono en mayúsculas que abre la sección;
     · el suelo y la rejilla del constructor (#c7dcf0 / #a3c1de), que ya usaba
       .paso__figura, para que la figura sea la escena de la app y no un dibujo;
     · los ocho pasos de la escala de texto y los pasos de espacio de tokens.css.

   LO QUE SE AÑADE, Y POR QUÉ
     · el RIEL de cuatro segmentos: dice en qué punto del montaje va la parada
       sin escribir «Paso 2 de 4», y se lee de un vistazo en las cuatro;
     · la CLAVE de lectura («gris claro = la que acabas de poner»): sin ella el
       gris claro del paso 2 no significa nada;
     · el pie de figura con las piezas y su muestra de color: convierte la figura
       en una ficha de manual, no en una ilustración decorativa.
   ===================================================================== */

/* --- la cabeza: etiqueta, titular, entrada y la clave de lectura --------- */
.cf__cabeza { max-width: 62ch; }
.cf__cabeza h2 { max-width: 20ch; }

.cf__clave {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.cf__clave-titulo { font-weight: 500; color: var(--text); }
.cf__clave ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.cf__clave li { display: inline-flex; align-items: center; gap: var(--space-2); }

/* La muestra de color: el color REAL del plástico en el dibujo, sacado del PNG
   (grafito #49494d, gris claro #a1a6ab, pin #005d94). El anillo interior la
   mantiene visible sobre la banda. */
.muestra {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--muestra, var(--text-muted));
  box-shadow: inset 0 0 0 1px rgb(16 36 67 / .18);
}

/* Solo de la maqueta: el h1 que la portada ya tiene en el hero. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.muestra--grafito { --muestra: #49494d; }
.muestra--claro { --muestra: #a1a6ab; }
.muestra--pin { --muestra: #005d94; }

/* --- las cuatro paradas -------------------------------------------------- */
.cf__momentos {
  display: grid; gap: var(--space-7);
  margin: var(--space-7) 0 0; padding: 0; list-style: none;
}

.momento {
  display: grid; gap: var(--space-4); align-content: start;
  padding-top: var(--space-4); border-top: 1px solid var(--border);
}

/* Fila de arriba: 01 · ELIGE .................... ▬▬▬▬ */
.momento__paso { display: flex; align-items: center; gap: var(--space-3); }
.momento__num {
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500;
  line-height: 1; letter-spacing: .01em; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.momento__verbo {
  padding-left: var(--space-3); border-left: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  line-height: 1.1; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.momento__riel { display: flex; gap: 4px; margin-left: auto; }
.momento__riel i {
  display: block; width: 18px; height: 3px; border-radius: 2px;
  background: var(--border-strong); opacity: .5;
}
.momento__riel i[data-on] { background: var(--primary); opacity: 1; }

/* La figura: el lienzo del constructor, con su suelo y su rejilla de 6,35 mm.
   La proporción es la del viewBox común de las cuatro (100,4 × 64,77 mm), así
   que las cuatro cajas miden lo mismo y el modelo no cambia de tamaño al bajar. */
.momento__figura { margin: 0; display: grid; gap: var(--space-2); }
.momento__lienzo {
  --lienzo-suelo: #c7dcf0; --lienzo-rejilla: #a3c1de;
  aspect-ratio: 100.4 / 64.77;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--lienzo-suelo);
}
.momento__lienzo svg { display: block; width: 100%; height: 100%; }
.momento__lienzo .lienzo-suelo { fill: var(--lienzo-suelo); }
.momento__lienzo .lienzo-linea { fill: none; stroke: var(--lienzo-rejilla); }
.momento__lienzo image { filter: drop-shadow(0 .5px 1px rgb(16 36 67 / .3)); }

/* --- la hoja del manual (el paso 04) -------------------------------------
   El 04 habla de sacar el manual, así que no enseña solo el modelo: enseña la
   HOJA que sale del constructor, con lo mismo que imprime el manual de verdad
   (main.js, .pagina): cabecera «Manual de montaje» y «Paso N de M», el número
   grande con el nombre del paso, cuántas piezas nuevas trae, el modelo vivo en
   medio y la lista de esas piezas con su referencia, más el folio al pie. Las
   cifras y los nombres los pone el modelo (portada-visor.js); aquí, sin 3D ni
   JavaScript, ya están escritos y se leen igual. */
.momento__lienzo--hoja {
  aspect-ratio: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-3);
}
.hoja-paso { display: grid; gap: var(--space-2); }
.hoja-paso__cabecera,
.hoja-paso__folio {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.hoja-paso__cabecera { padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.hoja-paso__folio { padding-top: 6px; border-top: 1px solid var(--border); }
.hoja-paso__num b { color: var(--text); font-weight: 600; }
.hoja-paso__titulo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
  margin: 0;
}
.hoja-paso__cifra {
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600;
  line-height: 1; color: var(--primary);
}
.hoja-paso__nombre {
  flex: 1 1 10ch; margin: 0;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  line-height: 1.3; color: var(--text);
}
.hoja-paso__meta {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
/* En el teléfono la cuenta de piezas nuevas baja a su línea: al lado del nombre
   lo partía en dos renglones y dejaba la última palabra sola. */
@media (max-width: 600px) {
  .hoja-paso__meta { flex: 1 0 100%; }
}
/* El modelo, con la proporción de las otras tres figuras: el M.A.D. Box no
   cambia de tamaño al bajar por la lista. */
.hoja-paso .visor { aspect-ratio: 100.4 / 64.77; border-radius: var(--radius-sm); }
.hoja-paso__piezas { display: grid; gap: var(--space-1); }
.hoja-paso__piezas-titulo {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.hoja-paso__lista {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: 0; padding: 0; list-style: none;
}
/* La ficha de una pieza nueva, como el chip del manual: cantidad, nombre y
   referencia. */
.pieza-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--text-xs); line-height: 1.4; color: var(--text);
}
.pieza-chip b { font-family: var(--font-mono); font-weight: 600; }
.pieza-chip code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* --- el trazo de movimiento: la flecha del 02 y el arco del 03 ------------
   En el azul de acento, no en el azul del pin (#005d94): el trazo es una
   anotación del manual, no una pieza del kit. Sobre el suelo del lienzo da
   4,4:1, por encima de los 3:1 que pide un gráfico. */
.anota__halo {
  fill: none; stroke: #fff; stroke-width: 1.7; opacity: .8;
  stroke-linecap: round; stroke-linejoin: round;
}
.anota__trazo {
  fill: none; stroke: var(--primary); stroke-width: .55;
  stroke-linecap: round; stroke-linejoin: round;
}
.anota__punta {
  fill: var(--primary); stroke: #fff; stroke-width: .4;
  stroke-linejoin: round;
}

/* --- el paso 04: la figura es una HOJA DEL MANUAL -------------------------
   Las mismas piezas que `.pagina` del constructor —papel blanco, regla de
   acento arriba, el modelo en un panel—, llevadas a la caja de la figura. Es el
   corte que cierra la sección: tres escenas en la rejilla y, al final, el papel
   que sale de ellas. La hoja no lleva texto: lo que la identifica va en el pie
   de figura, en HTML, porque dentro del SVG a 390 px caería a 8 px. */
.hoja { filter: drop-shadow(0 1px 3px rgb(16 36 67 / .18)); }
.hoja__pagina { fill: #fff; }
.hoja__regla { fill: var(--primary); }
.hoja__panel { fill: var(--lienzo-suelo); stroke: var(--lienzo-rejilla); stroke-width: .3; }

/* El pie de figura: las piezas, con su muestra. Mono y en minúsculas de
   espaciado abierto, como las etiquetas del constructor. */
.momento__piezas {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.momento__piezas span { display: inline-flex; align-items: center; gap: var(--space-2); }
.momento__piezas .muestra { width: 8px; height: 8px; border-radius: 2px; }

.momento__texto { display: grid; gap: var(--space-2); }
.momento__texto h3 {
  margin: 0; font-size: var(--text-2xl); line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-2xl);
}
.momento__texto p {
  margin: 0; max-width: 44ch;
  font-size: 1rem; line-height: 1.55; color: var(--text-muted);
}

/* --- dos columnas a partir de 1024 px ------------------------------------ */
@media (min-width: 1024px) {
  .cf__momentos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-7);
  }
}

/* --- movimiento: la cámara se asienta y el riel se llena ------------------
   El disparo es el BLOQUE (`.cf__momentos`), no cada parada: el guion de la
   portada (portada.js) revela solo los hijos directos de `.envoltura`, y una
   parada suelta nunca recibiría `.es-visible`. Así no hace falta tocar el JS. */
@media (prefers-reduced-motion: no-preference) {
  .hay-movimiento .momento__lienzo svg {
    transform: scale(1.045);
    transition: transform 1.1s var(--ease-enter);
  }
  .hay-movimiento .cf__momentos.es-visible .momento__lienzo svg { transform: none; }

  .hay-movimiento .momento__riel i[data-on] {
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-5) var(--ease-enter);
  }
  .hay-movimiento .cf__momentos.es-visible .momento__riel i[data-on] { transform: none; }

  /* el escalonado: cada parada entra un poco después de la anterior */
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(2) .momento__lienzo svg,
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(2) .momento__riel i[data-on] { transition-delay: 90ms; }
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(3) .momento__lienzo svg,
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(3) .momento__riel i[data-on] { transition-delay: 180ms; }
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(4) .momento__lienzo svg,
  .hay-movimiento .cf__momentos.es-visible .momento:nth-child(4) .momento__riel i[data-on] { transition-delay: 270ms; }
}

/* En el teléfono la figura ocupa el ancho entero y la parada respira menos. */
@media (max-width: 600px) {
  .cf__momentos { gap: var(--space-6); }
  .momento__num { font-size: var(--text-lg); }
}

/* 4 · PARA QUIÉN --------------------------------------------------------- */
.caminos { display: grid; margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.camino { border-bottom: 1px solid var(--border); }
.camino a {
  display: grid; gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-3);
  text-decoration: none; color: inherit;
  transition: background var(--dur-2) var(--ease-standard);
}
.camino a:hover { background: var(--surface); }
.camino__rol {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.camino h3 { font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: -0.01em; }
.camino p { color: var(--text-muted); max-width: 40ch; }
.camino__ir {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; font-size: 1rem; color: var(--link);
}
.camino a:hover .camino__ir { gap: var(--space-3); }
.camino__ir svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-standard); }
.camino a:hover .camino__ir svg { transform: translateX(3px); }
@media (min-width: 900px) {
  .caminos { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .camino { border-top: 1px solid var(--border); border-bottom: 0; }
  .camino + .camino { border-left: 1px solid var(--border); }
  .camino a { padding: var(--space-5) var(--space-5) var(--space-6); height: 100%; align-content: start; }
}

/* 5 · ESTUDIANTES: la banda del manual ----------------------------------- */
.sesion-banda { background: var(--banda); color: var(--banda-texto); }
.sesion-banda h2 { color: var(--banda-texto); }
.sesion-banda .entrada { color: var(--banda-tenue); }
.sesion-banda .entrada strong { color: var(--banda-texto); }
.sesion { display: grid; gap: 0; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.sesion li {
  position: relative; padding: var(--space-4) 0 var(--space-5) var(--space-6);
  border-left: 1px solid var(--banda-linea);
}
.sesion li::before {
  content: ""; position: absolute; left: -5px; top: calc(var(--space-4) + 6px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--banda-acento);
}
.sesion li:last-child { border-left-color: transparent; }
.sesion__min {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
  color: var(--banda-acento); text-transform: uppercase;
}
.sesion h3 { margin-top: var(--space-1); font-size: var(--text-lg); color: var(--banda-texto); }
.sesion p { margin-top: var(--space-1); color: var(--banda-tenue); font-size: 1rem; max-width: 42ch; }
@media (min-width: 900px) {
  .sesion { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .sesion li { padding: var(--space-5) 0 0; border-left: 0; border-top: 1px solid var(--banda-linea); }
  .sesion li::before { left: 0; top: -5px; }
}

.aprende { margin: var(--space-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.aprende li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); color: var(--banda-tenue); }
.aprende svg { width: 22px; height: 22px; margin-top: 2px; color: var(--banda-acento); }
.aprende b { color: var(--banda-texto); font-weight: 600; }
@media (min-width: 760px) { .aprende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-7); } }

/* 6 · INVENTARIO --------------------------------------------------------- */
.inventario { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; }
.inventario__acciones { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.etiqueta-caja {
  background: var(--surface-2); border-radius: var(--radius-md);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  display: grid; gap: var(--space-4); justify-items: center;
}
.etiqueta-caja svg { width: 100%; max-width: 300px; height: auto; }
.etiqueta-caja figcaption {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); text-align: center;
}
@media (min-width: 900px) { .inventario { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* 7 · INFORMACIONES + FAQ ------------------------------------------------ */
.doble { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); margin-top: var(--space-6); }
.bloque-titulo {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-strong);
  margin-bottom: var(--space-4);
}
.novedades { margin: 0; padding: 0; list-style: none; }
.novedades li { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.novedades li:first-child { padding-top: 0; }
.novedades time {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase;
}
.novedades h3 { margin-top: var(--space-1); font-size: var(--text-lg); line-height: var(--leading-lg); }
.novedades p { margin-top: var(--space-1); color: var(--text-muted); font-size: 1rem; }
.novedades-vacio {
  margin-top: var(--space-4); padding: var(--space-5); background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.novedades-vacio p { color: var(--text-muted); font-size: 1rem; }
.novedades-vacio p:first-child { color: var(--text); font-weight: 600; }

.faq { margin: 0; padding: 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--control-h); padding: var(--space-3) 0; cursor: pointer;
  font-weight: 600; font-size: 1rem; color: var(--text); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary .mas {
  flex: none; width: 22px; height: 22px; position: relative;
  border: 1px solid var(--border-strong); border-radius: 50%;
}
.faq summary .mas::before, .faq summary .mas::after {
  content: ""; position: absolute; background: currentColor; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.faq summary .mas::before { width: 9px; height: 1.5px; }
.faq summary .mas::after { width: 1.5px; height: 9px; transition: transform var(--dur-2) var(--ease-standard); }
.faq details[open] summary .mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details p { padding-bottom: var(--space-4); color: var(--text-muted); max-width: 58ch; }
.faq details p + p { margin-top: calc(-1 * var(--space-2)); }
@media (min-width: 900px) { .doble { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* 8 · BUZÓN -------------------------------------------------------------- */
/* El buzón se queda sobre el papel de la página, no sobre banda: el formulario
   es largo (es la sección más alta) y con la banda se comía el 60 del reparto.
   Los campos son blancos con borde fuerte, así que se ven igual. */
.buzon-seccion { background: var(--bg); }
/* Las bandas claras alternan el ritmo de la página: sin ellas todo el papel
   es del mismo color y el ojo no tiene dónde apoyarse. Son el 30 del reparto. */
.seccion--banda-clara { background: var(--surface-2); }
/* El tramo: a la izquierda el sobre (a quién va, quién lo lee, a dónde
   contesta), a la derecha la hoja del buzón. Dos columnas solo cuando hay
   sitio; en el teléfono, una detrás de otra. */
.buzon-tramo { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start; }
@media (min-width: 1000px) {
  .buzon-tramo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(var(--space-7), 6vw, var(--space-9));
  }
}
.buzon__sobre { min-width: 0; max-width: 46ch; }
.buzon__sobre .entrada { margin-top: var(--space-4); }

/* La dirección del sobre, como en una carta: quién lo recibe, cada cuánto se
   lee y a dónde contesta. Dice lo mismo que el párrafo de antes, pero se
   repasa de un vistazo, y es la pieza que hace que este bloque sea un buzón
   y no un formulario suelto. */
.direccion { margin: var(--space-5) 0 0; border-top: 1px solid var(--border-strong); }
.direccion__fila {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.direccion dt {
  padding-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.direccion dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text); }

/* La hoja: el buzón sobre el papel de una hoja de pedido. Cinta arriba con lo
   que la identifica, bloques numerados dentro y el envío al pie, separado por
   su propia banda. Todo el peso visual se lo lleva el contenido, no el marco. */
/* La hoja va en blanco de verdad, no en --surface (#fbfcfd): sobre el papel de
   la página (#f4f8fb) el blanco apenas se distinguía y la tarjeta se perdía.
   Así el buzón es la única cosa blanca del tramo y los tonos quedan claros:
   blanco la hoja, papel de la página los campos, navy la cinta de arriba y
   panel el pie del envío. */
.hoja {
  min-width: 0; background: var(--hoja-fondo); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden;
}
/* La cinta va en el navy de la casa (--banda), el mismo de la banda del manual
   y del pie de la página: la hoja abre con el color fuerte y el contenido
   blanco hace el resto. Con el pálido de antes la hoja arrancaba sin peso. */
.hoja__cinta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--hoja-tinta); border-bottom: 1px solid var(--hoja-tinta);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--hoja-tinta-tenue);
}
.hoja__sello { color: var(--hoja-tinta-sello); font-weight: 600; }

.buzon { display: grid; }
/* Un bloque por pregunta, con su número mono delante: el mismo orden de la
   hoja de piezas del constructor, para que el buzón se lea como el resto. */
.buzon .bloque { display: grid; gap: var(--space-4); padding: var(--space-5); min-inline-size: 0; }
/* El rótulo de un fieldset es una leyenda, y el navegador le reserva una fila
   más alta que su texto: separaba 24 donde los otros bloques separan 16. Con
   la leyenda flotante vuelve a ser una línea más y los cuatro bloques respiran
   igual. */
.buzon legend.bloque__rotulo { float: left; width: 100%; }
.buzon > .bloque { border-top: 1px solid var(--border); }
.buzon > .bloque:first-child { border-top: 0; }
.bloque__rotulo {
  display: block; padding: 0; font-weight: 600; font-size: 1rem; line-height: 1.4;
  color: var(--text);
}
/* El número de cada bloque, en el mismo navy que la cinta: ata la hoja de
   arriba abajo y el número se lee como el folio de un paso del manual. */
.bloque__num {
  display: inline-block; margin-right: var(--space-2); padding: 1px 6px;
  border-radius: 5px; background: var(--hoja-tinta); color: var(--hoja-tinta-texto);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .06em; vertical-align: 1px;
}
.campo { display: grid; gap: var(--space-2); }
.campo > label { font-weight: 600; font-size: 1rem; color: var(--text); }
.campo__ayuda { font-weight: 500; font-size: var(--text-sm); color: var(--text-muted); }
.buzon input[type="text"], .buzon input[type="email"], .buzon textarea {
  width: 100%; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  /* Los campos van sobre la hoja blanca: su relleno es el papel de la página,
     no blanco sobre blanco, para que se vean sin depender solo del borde. */
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.buzon textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.buzon input:focus, .buzon textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.buzon input[aria-invalid="true"], .buzon textarea[aria-invalid="true"] { border-color: var(--danger); }
/* El fieldset solo pierde su marco: el relleno y el reparto los pone .bloque. */
.buzon fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.tipos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Las dos primeras respuestas son una elección grande, no una etiqueta: ocupan
   su mitad cada una y se leen como los dos botones de un conmutador. */
.tipos--anchos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tipos--anchos .tipo { display: grid; }
/* Los dos ocupan la misma altura aunque uno parta su texto en dos renglones:
   en el teléfono «Que me contacten» ocupa dos y el de al lado no. */
.tipos--anchos .tipo span {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  padding-block: var(--space-3); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 600;
}
.tipo { position: relative; }
.tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tipo span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4);
  /* El mismo relleno que los campos: sobre la hoja blanca, una píldora blanca
     solo dejaba el borde y parecía desactivada. */
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
/* La píldora elegida va en el navy de la casa (--banda), no en el azul de
   marca: dentro de la hoja blanca el navy es el mismo tono de la cinta de
   arriba y de los números 01–04, así que la elección se lee como el resto de
   la hoja y el azul vivo queda solo para lo que se pulsa fuera de ella. */
.tipo input:checked + span { background: var(--hoja-tinta); border-color: var(--hoja-tinta); color: var(--hoja-tinta-texto); }
.tipo input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Lo que no está elegido se aclara al pasar por encima: la elección se ve
   antes de pulsar, y el elegido no cambia (ya está marcado en navy). */
.tipo input:not(:checked) + span:hover {
  border-color: var(--hoja-tinta);
  background: color-mix(in srgb, var(--hoja-tinta) 7%, var(--hoja-fondo));
}
/* El aviso del modo va pegado bajo la elección: dice qué se pide en cada uno
   y cambia con ella, así que vive donde se decide, no en el pie. */
/* El aviso es blanco con la raya del acento a la izquierda, no otra banda
   teñida: sobre la hoja blanca un tercer tono pálido la ensuciaba. */
.buzon__modo {
  margin: 0; padding: var(--space-4) var(--space-5);
  background: var(--hoja-fondo); box-shadow: inset 3px 0 0 var(--hoja-tinta);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text);
}
/* Dos campos de lado en el escritorio; en el teléfono se apilan con el mismo
   hueco de 16 que separa un campo del siguiente, no con 24. */
.fila-dos { display: grid; gap: var(--space-4) var(--space-5); }
@media (min-width: 640px) { .fila-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cuenta {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
}
/* El aviso va EN EL CONTADOR y no en la fila: así lo marca el motor del buzón
   (public/buzon-formulario.js) y la maqueta lo imita igual. Con el estado en la
   fila, la página publicada nunca se ponía en rojo. */
.cuenta [data-buzon-contador][data-estado="corto"],
.cuenta [data-buzon-contador][data-estado="largo"] { color: var(--danger); }
/* El envío cierra la hoja con su propia banda: separado del último campo por
   una raya y del mismo color de la cinta, para que se vea dónde acaba. */
.buzon__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-5); background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
}
.buzon__nota { font-size: var(--text-sm); color: var(--text-muted); max-width: 40ch; }
/* El envío es el botón de la hoja, y la hoja ya habla navy: la cinta de
   arriba, los números y la píldora elegida. En azul de marca el botón parecía
   de otra página pegada aquí. El navy con texto blanco mantiene el peso de la
   acción y la hoja queda de un solo color. */
.buzon__pie .boton--principal { background: var(--hoja-tinta); color: var(--hoja-tinta-texto); }
.buzon__pie .boton--principal:hover { background: var(--hoja-tinta-hover); color: var(--hoja-tinta-texto); }
/* La línea de «se envía con» va dentro de la hoja: su relleno es el del bloque. */
.buzon > .pie__legal { padding: 0 var(--space-5) var(--space-4); }
.buzon .aviso { margin: 0 var(--space-5) var(--space-4); }
/* La vía del correo, en una línea bajo la entrada del buzón: quien no quiere
   rellenar un formulario tiene su puerta, sin competir con el botón de enviar. */
.buzon__correo { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); max-width: 52ch; }
/* El correo va SOBRE LA PÁGINA, no dentro de la hoja: por eso lleva el color
   de enlace del sistema y no el navy de la hoja; da 6,1:1 sobre el papel de la
   página. El botón de enviar no compite: vive dentro de la hoja, en su tinta. */
.buzon__correo a { color: var(--link); font-weight: 600; }
.buzon__correo a:hover { color: var(--primary-hover); }

.aviso {
  display: grid; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid;
}
.aviso--error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--text); }
.aviso--error b { color: var(--danger); }
/* El «recibido» es el recibo de la hoja: mismo papel, el sello a la vista y
   la frase en el tamaño del titular del bloque. Sin marco propio, porque ya
   está dentro de la hoja. */
.gracias {
  display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5);
  background: var(--surface);
}
.gracias__marca {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-lg);
}
.gracias__marca svg {
  flex: none; box-sizing: content-box; width: 24px; height: 24px; padding: var(--space-2);
  border-radius: 50%; background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.gracias p { color: var(--text-muted); }
[hidden] { display: none !important; }

/* 9 · PIE ---------------------------------------------------------------- */
/* El pie es el cierre azul: el papel «acento» del reparto 60-30-10, que mide
   este pie en 507 px de 6.280 (8,1 %) y que la hoja no pintaba. Va con los
   tokens del sistema, no con valores sueltos: --acento-texto da 6,5:1 sobre
   el azul de marca y --acento-tenue 5,7:1, AA los dos para texto normal; el
   botón claro se queda con la tinta del sistema, 14,5:1. */
.pie { background: var(--acento); color: var(--acento-texto); padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }
.pie a:not(.boton) { color: var(--acento-tenue); text-decoration-color: currentColor; }
.pie a:not(.boton):hover { color: var(--acento-texto); text-decoration-color: currentColor; }
.pie__arriba { display: grid; gap: var(--space-6); }
.pie__pide h2 { color: var(--acento-texto); font-size: var(--text-2xl); }
.pie__pide p { margin-top: var(--space-3); color: var(--acento-tenue); max-width: 42ch; }
.pie__pide .boton { margin-top: var(--space-5); }
.pie__enlaces { display: grid; gap: var(--space-5); align-content: start; }
.pie__grupo h3 {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento-tenue); margin-bottom: var(--space-3);
}
.pie__grupo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.pie__grupo a { display: inline-flex; align-items: center; min-height: 32px; font-size: 1rem; }
.pie__credito {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--acento-linea);
  display: grid; gap: var(--space-3);
}
.pie__credito p { font-size: 1rem; color: var(--acento-tenue); max-width: 62ch; }
.pie__credito strong { color: var(--acento-texto); font-weight: 600; }
.pie__credito a { color: var(--acento-texto); text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pie__legal {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em;
  text-transform: uppercase; color: var(--acento-tenue);
}
/* La línea legal que va dentro del buzón no está en el cierre azul sino sobre
   la hoja. Lleva el gris del sistema: --text-muted da 7,5:1 sobre el papel. */
.buzon .pie__legal { color: var(--text-muted); }
@media (min-width: 900px) {
  .pie__arriba { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .pie__enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- movimiento
   El hero entra por pasos y cada bloque aparece al asomarse. La clase
   .hay-movimiento la pone el guion de la página: sin guion (o con movimiento
   reducido pedido en el sistema) todo se ve desde el principio.
   ---------------------------------------------------------------------- */
/* El hero no entra desde transparente: el primer fotograma ya se lee entero,
   que es lo que ve quien llega y lo que pilla una captura rápida. El
   movimiento lo lleva el desplazamiento, no la opacidad. */
@keyframes entra-texto {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
@keyframes entra-plano {
  from { transform: translateY(24px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 1 · el hero, por pasos: etiqueta, titular, entrada, botones, crédito */
  .hay-movimiento .hero__texto > * { animation: entra-texto .72s cubic-bezier(.22,.61,.36,1) both; }
  .hay-movimiento .hero__texto > *:nth-child(1) { animation-delay: .06s; }
  .hay-movimiento .hero__texto > *:nth-child(2) { animation-delay: .16s; }
  .hay-movimiento .hero__texto > *:nth-child(3) { animation-delay: .26s; }
  .hay-movimiento .hero__texto > *:nth-child(4) { animation-delay: .36s; }
  .hay-movimiento .hero__texto > *:nth-child(5) { animation-delay: .46s; }
  .hay-movimiento .plano { animation: entra-plano .95s cubic-bezier(.22,.61,.36,1) .18s both; }

  /* 2 · el titular grande se asienta: el tipo también se mueve */
  .hay-movimiento h1#t-inicio { animation-name: entra-titular; animation-duration: .9s; }
  @keyframes entra-titular {
    from { transform: translateY(18px); letter-spacing: -.015em; }
    to   { transform: none; letter-spacing: normal; }
  }

  /* 3 · cada bloque de sección entra al asomarse (el guion lo marca) */
  .hay-movimiento .revela { opacity: 0; transform: translateY(22px); }
  .hay-movimiento .revela.es-visible {
    opacity: 1; transform: none;
    transition: opacity .62s ease, transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--retraso, 0s);
  }

  /* 4 · lo que se toca se hunde; lo que se señala se levanta */
  .boton:hover { transform: translateY(-1px); }
  .boton:active { transform: translateY(1px) scale(.99); }
  .nav a, .pie__grupo a { transition: transform var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard); }
  .nav a:hover, .pie__grupo a:hover { transform: translateY(-1px); }
  .registro li, .camino li { transition: transform var(--dur-2) var(--ease-standard); }
  .registro li:hover, .camino li:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hay-movimiento .revela, .hay-movimiento .hero__texto > *, .hay-movimiento .plano { opacity: 1; transform: none; animation: none; }
}

/* --- El buzón de verdad (public/buzon-formulario.js) -------------------- */
/* El campo trampa. Va fuera de pantalla, nunca `display:none`: el motor lo lee.
   El aviso del modo (.buzon__modo) ya lo trae la hoja de la maqueta, con su
   banda y su sitio bajo la elección: aquí no se repite. */
.trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* El aviso del contador fuera de rango NO se escribe aquí: la maqueta ya lo
   trae con el selector que el motor llena (.cuenta [data-buzon-contador]
   [data-estado], en su hoja). Escribirlo también desde el armado dejaba dos
   verdades para la misma regla, y una se quedaba vieja sin que nadie lo notara. */