/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Poyntia · web v2 · hoja base (16-oct-2026, sesión A). Cabecera, pie, formulario y el ritmo de escenas.
   Fiel a scale.com (scale lento.mov): cabecera blanca fina, marcos de 24 px, escenas que alternan blanco, negro y gris.
   Reglas de la casa que esta hoja cumple y integridad.py vigila:
   · DM Sans en todo (Pablo, 15-oct: ni monoespaciada ni versales con espaciado, «una aberración»); cifras tabulares.
   · Azul de la web --azul #2551d6 (sobre negro --azul-l #7f9cff); sin ámbar, sin verde.
   · Todo crece en pantallas grandes: --u vale 1 px hasta 1470 px de ancho y 1,74 px a 2560; nada baja.
   · prefers-reduced-motion: sin movimiento, sin transiciones.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --u: clamp(1px, .068vw, 1.74px);
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --azul: #2551d6; --azul-l: #7f9cff; --azul-prof: #0b1c47; --azul-prof-2: #12285f;
  --neg: #050608; --neg-2: #0b0c0f; --luz: #f3f4f6; --luz-2: #9aa0ab;
  --papel: #fff; --gris: #e8e8e8; --gris-2: #f4f4f5;
  --tinta: #0e0f12; --tinta-2: #565b66; --linea: #dcdfe4;
  --rayo: rgba(255,255,255,.16); --rayo-2: rgba(255,255,255,.34);
  --r-marco: calc(24 * var(--u));              /* marcos y hojas de Scale */
  --r-peq: calc(10 * var(--u));
  --alto-cab: calc(64 * var(--u));
  --cab-h: calc(88 * var(--u));                /* altura de la barra de arriba (la del vídeo de Scale: 24 + botón de 40 + 24) */
  --gut: calc(24 * var(--u));
  /* ESCALA TIPOGRÁFICA fluida (16-oct; Pablo: «nuestras fuentes son muy pequeñas»). Un token por rol, DM Sans, mínimo duro y crecimiento con el ancho (sin tope a 2560: a 2886 sigue subiendo).
     Medido en la grabación de Scale a 1443 px: titular de portada ≈ 65 px (4,5 vw), subtítulo ≈ 21, navegación ≈ 14, cuerpo ≈ 14, botones ≈ 16. Aquí, a 1470: 78 · 63 · 53 · 21 · 16,5 · 15,3.
     Mínimos: titular de portada ≥ 2,5 rem (40 px) en móvil y ≥ 3 rem desde ~900 px; cuerpo ≥ 16; navegación y botones ≥ 15; rótulos ≥ 13; dentro de las piezas simuladas ≥ 12. */
  --fs-hero: clamp(2.5rem, 10.4vw, 3rem);          /* titular de la portada y del cierre (móvil: 40,6 px a 390; 48 desde 460) */
  --fs-d1: clamp(2.1rem, 9.4vw, 2.8rem);           /* frases grandes: marca, frase, rueda, sectores, red */
  --fs-h2: clamp(2.05rem, 8.4vw, 2.4rem);          /* títulos de escena junto a un medio: pila, grafo */
  --fs-lead: clamp(1.125rem, 1.45vw, 2.5rem);
  --fs-body: clamp(1rem, 1.12vw, 1.9rem);
  --fs-ui: clamp(.9375rem, 1.04vw, 1.75rem);       /* navegación y botones */
  --fs-sm: clamp(.8125rem, .9vw, 1.5rem);          /* rótulos, ayudas de formulario */
  --fs-xs: clamp(.75rem, .8vw, 1.35rem);           /* lo más pequeño que se permite (pies, notas dentro de piezas) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
}
/* de la tableta al monitor (≥ 761 px) los titulares crecen con el ancho y NUNCA bajan de lo que tenían (un tamaño sólo sube: Pablo, 25-sep) */
@media (min-width: 761px) { :root { --fs-hero: max(68px, 5.3vw); --fs-d1: max(56px, 4.3vw); --fs-h2: max(48px, 3.6vw); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; font-family: var(--sans); font-synthesis: none; letter-spacing: -.012em; color: var(--tinta); background: var(--papel);
  font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.028em; line-height: 1.04; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.sobre-negro-t :focus-visible, .neg :focus-visible, .neg-t :focus-visible { outline-color: var(--azul-l); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i18n-pendiente body { visibility: hidden; }

/* ── escenas: cada una ocupa la pantalla; el color de fondo está en la clase (sin saltos de maquetación mientras cargan) ──── */
.esc { position: relative; min-height: 100vh; min-height: 100svh; }
.neg { background: var(--neg); color: var(--luz); }
.gris { background: var(--gris); color: var(--tinta); }
.claro { background: var(--papel); color: var(--tinta); }
.hoja { margin-top: calc(-1 * var(--r-marco)); border-radius: var(--r-marco) var(--r-marco) 0 0; position: relative; z-index: 1; }
/* la hoja gris de la rueda sube POR ENCIMA de la tarjeta azul mientras ésta sigue fijada (Scale 0:56-0:60): se solapa con el último tramo de la escena de la frase */
.frase + .hoja { margin-top: -78vh; margin-top: -78svh; }
/* 18-oct (scale captura.png): cuando la hoja sube sobre la escena anterior, ésta se oscurece casi a negro (medido en scale trans.mov: va ligado a la posición de la hoja) */
.v2-atenua { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; }      /* su opacidad la pone pagina-v2.js según la posición de la hoja */
.esc h2 { font-size: var(--fs-d1); }
.rev { opacity: 0; transform: translateY(calc(18 * var(--u))); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rev.visto { opacity: 1; transform: none; }
.etq { position: absolute; z-index: 3; left: var(--gut); bottom: calc(20 * var(--u)); max-width: calc(100% - 2 * var(--gut)); font-size: var(--fs-xs); line-height: 1.3; color: rgba(255,255,255,.78); letter-spacing: 0; }
.etq.osc { color: rgba(14,15,18,.62); }


/* ── formulario (sobre negro: contorno y velo) ───────────────────────────────────────────────────── */
.form { display: grid; gap: calc(14 * var(--u)); }
.form .fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.form label { display: block; font-size: var(--fs-sm); color: var(--luz-2); margin-bottom: 6px; letter-spacing: 0; }
.form label.req::after { content: " *"; color: var(--azul-l); }
.form input:not([type=hidden]), .form textarea { width: 100%; padding: calc(13 * var(--u)) calc(14 * var(--u)); border-radius: var(--r-peq); border: 1px solid var(--rayo-2);
  background: rgba(255,255,255,.05); color: #fff; font-size: var(--fs-body); line-height: 1.4; transition: border-color .2s, background .2s; }
.form textarea { min-height: calc(112 * var(--u)); resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.4); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--azul-l); outline-offset: 2px; border-color: var(--azul-l); background: rgba(255,255,255,.09); }
.form .falta { border-color: #ff8a8a; }
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .f-tema { font-size: var(--fs-sm); color: var(--luz-2); }
.form .f-basic { font-size: var(--fs-xs); line-height: 1.5; color: var(--luz-2); }
.form .f-basic a { text-decoration: underline; text-underline-offset: 3px; color: var(--luz); }
.form .f-msg { font-size: var(--fs-ui); color: var(--luz); }
.form .f-msg.mal { color: #ff9c9c; }
@media (max-width: 560px) { .form .fila2 { grid-template-columns: 1fr; } }

/* ── movimiento reducido: nada se mueve, todo se ve ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .rev { opacity: 1; transform: none; }
  .top[data-oculta] { transform: none; }
}