/* ===========================================================
   A+PRUEBA · tokens
   Color, tipografía, espacios, radios, sombras y movimiento.
   Las escalas tipográficas interpolan entre móvil (390px) y
   escritorio (1440px) con clamp().
   =========================================================== */

:root {
  /* ---------- Color ---------- */
  --navy-900: #0B1040;
  --navy-800: #141C57;
  --navy-700: #26327A;
  --azul-500: #2457E6;
  --azul-600: #16399A;
  --celeste-400: #3EC6F2;
  --celeste-100: #E2F6FD;
  --verde-400: #7ED348;
  --verde-600: #357A17;
  --verde-100: #EAF8DF;
  --naranja-500: #EE6C14;
  --naranja-700: #B44C06;
  --naranja-100: #FFEBDC;
  --blanco: #FFFFFF;
  --nube-50: #F4F7FF;
  --linea: #DCE3F4;
  --tinta-600: #4A5482;
  --tinta-400: #8A93B8;
  --tinta-sobre-oscuro: #C3CCF0;

  /* Sombra 3D del botón verde. No lleva texto encima, así que
     mantiene el verde original del Figma. */
  --verde-sombra: #3E8E1C;

  --degradado-contador: linear-gradient(90deg, #2457E6, #3EC6F2);
  --degradado-planeta: linear-gradient(135deg, #7FE3FF, #2457E6);

  /* ---------- Tipografía ---------- */
  --fuente-titulo: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --fuente-texto: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* display 36/42 → 58/64 */
  --t-display: clamp(2.25rem, 1.739rem + 2.095vw, 3.625rem);
  --lh-display: 1.12;
  /* h2 30/36 → 44/52 */
  --t-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);
  --lh-h2: 1.18;
  /* h3 24/30 → 28/34 */
  --t-h3: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);
  --lh-h3: 1.22;
  /* numero 56/58 → 76/76 */
  --t-numero: clamp(3.5rem, 3.036rem + 1.905vw, 4.75rem);
  --lh-numero: 1.02;
  /* contador 34/40 → 56/60 */
  --t-contador: clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem);
  --lh-contador: 1.1;
  /* lead 16/26 → 19/30 */
  --t-lead: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem);
  --lh-lead: 1.6;

  --t-base: 1rem;        --lh-base: 1.625;
  --t-card: 0.9375rem;   --lh-card: 1.6;
  --t-small: 0.875rem;   --lh-small: 1.57;
  --t-pregunta: 1.0625rem; --lh-pregunta: 1.47;
  --t-overline: 0.8125rem; --lh-overline: 1.38;
  --t-boton: 1.1875rem;  --lh-boton: 1.26;
  --t-nav: 0.9375rem;    --lh-nav: 1.33;
  --t-strong: 1rem;      --lh-strong: 1.5;

  --tracking-display: -0.01em;
  --tracking-overline: 0.12em;

  /* ---------- Espacios ---------- */
  --contenedor-max: 1200px;
  --margen-lateral: clamp(20px, 8vw, 120px);
  /* 64px en móvil → 112px en escritorio */
  --seccion-y: clamp(4rem, 2.886rem + 4.571vw, 7rem);
  --nav-alto: 72px;

  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-20: 20px;
  --e-24: 24px;
  --e-26: 26px;
  --e-32: 32px;
  --e-40: 40px;
  --fundido: clamp(48px, 6vw, 88px); /* degradado entre secciones vecinas */

  /* ---------- Radios ---------- */
  --r-pastilla: 999px;
  --r-tarjeta: 28px;
  --r-estacion: 24px;
  --r-contador: 20px;
  --r-burbuja: 18px;
  --r-chip: 16px;

  /* ---------- Sombras ---------- */
  --sombra-tarjeta: 0 16px 40px rgba(11, 16, 64, .10);
  --sombra-pasaporte: 0 24px 48px rgba(0, 0, 0, .35);
  --sombra-contador: 0 6px 0 rgba(11, 16, 64, .28);
  --sombra-foco: 0 0 0 3px var(--celeste-400);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-rapida: 250ms;
  --dur-media: 450ms;
  --dur-lenta: 700ms;
}