/* ==========================================================================
   Trayecta · Design tokens
   Fuente: "Identidad visual/LOGO 2.png" (manual de marca completo) y
   "LOGO INFORMACION.png". Verificado contra los píxeles reales del logo.
   --------------------------------------------------------------------------
   Verde principal  #00C16A · RGB 0 193 106 · CMYK 76 0 80 0
   Azul oscuro      #0A1330 · RGB 10 19 48  · CMYK 100 85 35 65
   Blanco           #FFFFFF
   Tipografía principal: Poppins Semibold
   --------------------------------------------------------------------------
   PENDIENTE: existe un segundo board ("MANUAL DE MARCA- TRAYECTA.png") que
   propone #00C49E + #020622 y Open Sauce/Inter. No coincide con el arte real
   del logo. Ver PENDIENTES.md en la raíz del proyecto antes de publicar.
   ========================================================================== */

:root {
  /* --- Marca ----------------------------------------------------------
     El verde de marca es un color de SUPERFICIE (rellenos, filetes, nodos
     del recorrido), no de texto: #00C16A da 2,4:1 sobre blanco. Cuando el
     verde tiene que leerse como palabra, va --verde-texto. */
  --verde: #00c16a;
  --verde-hover: #00a75c;
  --verde-press: #008d4d;
  --verde-texto: #007c45; /* 5,3:1 sobre --papel · 4,8:1 sobre --verde-tinte */
  --verde-tinte: #e6f8ef;
  --verde-tinte-2: #cdf0dd;

  --navy: #0a1330;
  --navy-2: #141d42;
  --navy-3: #26304f;

  /* --- Superficies ----------------------------------------------------
     Alineadas al matiz del navy (~225°). Antes tiraban a verde (~150°) y
     peleaban con el verde de marca en vez de dejarlo destacar. */
  --papel: #ffffff;
  --papel-2: #f5f7fb;
  --papel-3: #e9edf5;
  --linea: #e0e5ef;
  --linea-fuerte: #c2cadb;

  /* --- Texto ----------------------------------------------------------
     El cuerpo es navy oscuro, no gris. Los grises medios quedan reservados
     para metadatos: pie de foto, micro-notas, etiquetas. */
  --tinta: #0a1330; /* 18,5:1 · títulos y cuerpo principal */
  --tinta-2: #2b3450; /* 11,9:1 · párrafos de apoyo */
  --tinta-3: #5a6379; /*  5,9:1 · SOLO metadatos y micro */
  --tinta-inv: #ffffff;
  --tinta-inv-2: #c8d0e2; /* 10,6:1 sobre --navy */
  --tinta-inv-3: #8d99b6; /*  5,2:1 sobre --navy · metadatos en oscuro */

  /* --- Estado ---------------------------------------------------------- */
  --foco: #0a1330;
  --alerta: #a04a06;
  --alerta-tinte: #fdf3e5;

  /* --- Tipografía ------------------------------------------------------
     Rango 4,5x entre el display y el cuerpo. El escalón de 17px estaba
     saturado (cuerpo, h4, títulos de tarjeta, valores y citas pesaban lo
     mismo): ahora cada rol tiene su propio tamaño. */
  --fuente-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-display: clamp(2.75rem, 1.3rem + 6.1vw, 4.75rem); /* 44 → 76 px */
  --t-h1: clamp(2.25rem, 1.35rem + 3.9vw, 3.75rem); /* 36 → 60 px */
  --t-h2: clamp(1.8rem, 1.2rem + 2.7vw, 2.875rem); /* 29 → 46 px */
  --t-h3: clamp(1.3rem, 1.1rem + 0.95vw, 1.75rem); /* 21 → 28 px */
  --t-h4: 1.25rem; /* 20 px */
  --t-lead: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem); /* 18 → 23 px */
  --t-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem); /* 17 → 18 px */
  --t-sm: 0.9375rem; /* 15 px */
  --t-xs: 0.8125rem; /* 13 px */
  --t-eyebrow: 0.75rem; /* 12 px */

  /* Un solo valor de tracking por rol, no nueve improvisados. */
  --track-display: -0.035em;
  --track-h1: -0.03em;
  --track-h2: -0.026em;
  --track-h3: -0.018em;
  --track-caps: 0.13em;

  --lh-display: 1.02;
  --lh-titulo: 1.1;
  --lh-lead: 1.5;
  --lh-cuerpo: 1.65;

  /* Medida de línea. Ojo: en Inter 1ch ≈ 0,6em pero el glifo promedio del
     español mide ~0,485em, así que los caracteres reales son ~1,24x el
     valor en ch. 60ch ≈ 74 caracteres. */
  --medida-prosa: 60ch;
  --medida-lead: 46ch;
  --medida-corta: 36ch;

  /* --- Ritmo ----------------------------------------------------------- */
  --ancho: 1200px;
  --ancho-texto: var(--medida-prosa);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Tres alturas de sección: el ritmo vertical cambia, no es un metrónomo. */
  --seccion: clamp(4rem, 3rem + 5vw, 7.5rem);
  --seccion-amplia: clamp(5.5rem, 4rem + 7vw, 10.5rem);
  --seccion-densa: clamp(2.75rem, 2.2rem + 2.2vw, 4.5rem);

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* --- Forma ----------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --sombra-sutil: 0 1px 2px rgba(10, 19, 48, 0.05), 0 10px 26px -8px rgba(10, 19, 48, 0.1);
  --sombra-media: 0 2px 4px rgba(10, 19, 48, 0.06), 0 22px 48px -16px rgba(10, 19, 48, 0.18);

  /* --- Movimiento ------------------------------------------------------
     Un rol por curva y por duración. Un solo valor para todo es justamente
     lo que se lee como plantilla descargada. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* respuesta: hover, estado */
  --ease-salida: cubic-bezier(0.22, 1, 0.36, 1); /* asentar: revelados */
  --ease-trazo: cubic-bezier(0.37, 0, 0.28, 1); /* dibujo del recorrido */
  --ease-nodo: cubic-bezier(0.34, 1.32, 0.64, 1); /* nodos del recorrido */

  --dur-rapida: 120ms; /* press, iconos */
  --dur: 220ms; /* entrada de hover */
  --dur-media: 320ms; /* salida de hover, paneles */
  --dur-revelado: 620ms; /* entrada en viewport */
  --dur-trazo: 1400ms; /* dibujo del trazo de marca */

  --rev-y: 16px; /* desplazamiento de bloque */
  --rev-y-item: 12px; /* desplazamiento de item en grilla */
  --rev-paso: 70ms; /* escalonado entre hermanos */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0.01ms;
    --dur: 0.01ms;
    --dur-media: 0.01ms;
    --dur-revelado: 0.01ms;
    --dur-trazo: 0.01ms;
    --rev-y: 0px;
    --rev-y-item: 0px;
    --rev-paso: 0ms;
  }
}