/* =====================================================================
   Los tokens del sistema. Ningún valor de color, tamaño, espacio, radio o
   sombra se escribe a mano fuera de aquí: si un número aparece suelto en una
   regla, o falta un token o se está saltando el sistema.

   Escalas, y por qué estas:
   · Tipografía — razón 1.25 con `clamp()` en los tamaños grandes: el titular
     se adapta al ancho sin media queries y sin saltos bruscos.
   · Espacio — múltiplos de 4 px. Todo el ritmo vertical sale de aquí, que es
     justo lo que le faltaba a esta hoja: media docena de valores irrepetibles
     (0.85, 1.4, 1.75rem) es lo que hace que una página se vea "descuadrada"
     sin que sepas señalar dónde.
   · Color — la marca en tres profundidades y una rampa de grises. Los pares
     texto/fondo que se usan de verdad cumplen WCAG AA (>=4.5:1 en texto
     normal, >=3:1 en texto grande y en bordes de control).
   ===================================================================== */

:root {
  /* ---- Marca ---- */
  --marca: #0d5195; /* 8.6:1 sobre blanco */
  --marca-fuerte: #0a3f74;
  --marca-honda: #082e52; /* pie y cabecera */
  --marca-suave: #eff5fb;
  --marca-tenue: rgba(13, 81, 149, 0.08);
  --acento: #f4b740; /* ámbar: subrayados y detalles sobre azul */

  /* ---- Neutros ---- */
  --blanco: #ffffff;
  --gris-50: #f7f8fa;
  --gris-100: #eef0f3;
  --gris-200: #e0e3e8;
  --gris-300: #c9cdd4;
  --gris-500: #6b7280;
  --gris-600: #5b626c; /* 6.4:1 sobre blanco: texto secundario legible */
  --gris-900: #1f2328;

  /* ---- Semánticos ---- */
  --fondo: var(--gris-50);
  --superficie: var(--blanco);
  --superficie-suave: var(--gris-100);
  --borde: var(--gris-200);
  --borde-fuerte: var(--gris-300);
  --texto: var(--gris-900);
  --texto-suave: var(--gris-600);
  --exito: #0f7a34;
  --aviso: #8a5a00;
  --peligro: #b3261e;
  --pie-fondo: var(--marca-honda);

  /* ---- Tipografía ---- */
  --fuente: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: 1.0625rem;
  --texto-lg: 1.1875rem;
  --texto-xl: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --texto-2xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);
  --texto-3xl: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  --alto-titular: 1.15;
  --alto-texto: 1.6;

  /* ---- Espacio (múltiplos de 4) ---- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  /* Aire entre secciones: crece con la pantalla, que es donde de verdad se
     nota la diferencia entre una página apretada y una que respira. */
  --e-seccion: clamp(3rem, 7vw, 5.5rem);

  /* ---- Forma ---- */
  --radio-sm: 6px;
  --radio: 10px;
  --radio-lg: 16px;
  --radio-pildora: 999px;

  /* ---- Elevación: tres niveles y ninguno más ---- */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --sombra-2: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --sombra-3: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* ---- Medidas ---- */
  --ancho: 1120px; /* contenido general */
  --ancho-lectura: 68ch; /* prosa: 60-75 caracteres por línea */
  --ancho-formulario: 460px;
  --alto-cabecera: 72px;

  /* ---- Movimiento ---- */
  --transicion: 150ms cubic-bezier(0.2, 0, 0.2, 1);
}