:root{
  /* primitivos — muestreados de Isotipo.png, ver docs/brand/colores.md */
  --navy:#000C43;
  --bone:#F8FAFC;
  --cyan:#00FFFF;
  --red:#FF0000;
  --red-ink:#D40000;
  --grey:#48507A;
  --grey-2:#C9CFDF;

  /* semánticos */
  --stock:var(--bone);
  --ink:var(--navy);
  --ink-2:var(--grey);
  --rule:var(--navy);
  --panel:var(--navy);
  --panel-ink:var(--bone);
  --panel-ink-2:#B9C0DC;
  --spot:var(--cyan);
  --alert:var(--red-ink);

  /* tipografía */
  /* Display: Archivo, variable con eje de anchura (62–125). La anchura es de donde sale el
     carácter de grotesca ancha en mayúsculas. Sin serifa con contraste: en este proyecto no hay. */
  --display:'Archivo',system-ui,sans-serif;
  --ancho-display:112;
  --body:'Libre Franklin',system-ui,-apple-system,sans-serif;

  /* escala fluida */
  --t-h1:clamp(2.3rem,6.4vw,4.4rem);
  --t-h2:clamp(1.5rem,3.4vw,2.1rem);
  --t-lede:clamp(1.02rem,1.6vw,1.2rem);
  /* El titular de cada parada del recorrido. El término en vw bajó de 5.2 a 3.8 midiendo, no por
     gusto: el titular tiene que caber en el campo plano del fotograma de su parada, y el más
     estrecho de los siete es el campo navy del f090/f130, que acaba en el 37,6 % del ancho del
     cuadro. Con el cuadro a sangre eso son 379 px a 1024, de los que el texto arranca en 50:
     «APROBACIÓN» —una sola palabra, 7,97 veces el cuerpo— no cabía con 5.2vw (53 px de cuerpo,
     424 px de palabra) y sí con 3.8vw (39 px, 310 px). El suelo de 2rem y el techo de 3.6rem no
     se tocan; con 3.8vw el suelo y el término en vw se cruzan justo en 840 px, el corte de
     escritorio, así que por debajo de 840 —donde el texto va debajo del cuadro— no cambia nada.
     Si se cambia este valor hay que rehacer la tabla de holguras de la Tarea 4.
     A este token lo envuelve ahora un tope por la COLUMNA —`min(var(--t-parada), 12cqw)` en
     sections.css—, que es lo que impide que el suelo de 2rem se salga del campo cuando el
     navegador tiene la letra en 20 o en 24. Con la letra en 16 ese tope no actúa. */
  --t-parada:clamp(2rem,3.8vw,3.6rem);
  --t-body:1rem;
  --t-small:.88rem;
  --t-label:.7rem;

  /* retícula */
  --measure:64ch;
  --pad:clamp(1.25rem,5vw,4rem);
  --gap:clamp(1.5rem,3vw,2.5rem);
  /* ritmo vertical: el mismo relleno arriba y abajo de cada sección (112px entre dos secciones) */
  --section-pad:3.5rem;

  /* motion — docs/motion.md, ninguna curva inventada */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur-micro:160ms;
  --dur-ui:200ms;
  --dur-reveal:320ms;
  --dur-confirm:400ms; /* docs/motion.md, fila "10 Wizard" — confirmación de recibido */
  /* LA SALIDA DEL TEXTO DEL RECORRIDO, y es corta a propósito. Los once bloques comparten celda,
     así que mientras el que se va no termina de irse y el que llega ya ha empezado, se ven LOS
     DOS SUPERPUESTOS. El cliente lo grabó: antes de «SE FRUNCE» asomaba el titular del hero
     encima. Con la salida en 130 ms y la entrada retrasada otros 130, el relevo es secuencial y
     no hay un solo fotograma con dos textos. */
  --dur-salida:130ms;
  --stagger:60ms;
}