/* ==========================================================================
   01 · TOKENS — Seguros con Eduardo
   ==========================================================================
   Variables de marca y sistema visual. NO poner reglas de componentes aquí.

   Fuente: 01_SCE_Brand_Handoff_Web_V1_0.pdf, sección 5 "Sistema Visual - Web"
   y sección 23 "Jerarquía de decisiones para Claude" (paleta consolidada).

   Si la marca cambia un color, una tipografía o un radio, este es el
   ÚNICO archivo que debería tocarse — todo lo demás consume estas variables.
   ========================================================================== */

:root {

  /* --- Color: paleta de marca aprobada ------------------------------- */
  --color-navy:          #0D1B3D; /* headers, hero, footer, superficies institucionales */
  --color-navy-2:        #152752; /* variante para degradados sutiles del hero */
  --color-green:         #10B981; /* CTA principal, confirmación, highlights */
  --color-green-dark:    #0C9A6C; /* hover/estado activo del verde */
  --color-white:         #FFFFFF;
  --color-cloud:         #F2F4F7; /* fondos secundarios, cards */
  --color-graphite:      #374151; /* texto de cuerpo */
  --color-graphite-soft: #6B7280; /* texto secundario / metadatos */
  --color-border:        #E4E7EC;

  /* --- Color: utilitarios que NO son de marca (whatsapp, estados) ---- */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1DAE55;
  --color-footer-bg:     #0A1530;

  /* --- Tipografía ------------------------------------------------------
     Poppins = títulos / highlights. Inter = cuerpo, navegación, UI.
     Si la plataforma no permite estas fuentes, el fallback del sistema
     mantiene la MISMA jerarquía (peso/tamaño), no altera el diseño. */
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* --- Radios y sombras (dirección: cards limpias, sombras discretas) - */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(13, 27, 61, .06);
  --shadow-md: 0 8px 28px rgba(13, 27, 61, .10);

  /* --- Layout ----------------------------------------------------------
     --header-height se usa para scroll-margin-top (que las anclas de
     navegación no queden tapadas por el header sticky). El valor de acá
     es solo el fallback para el primer render / entornos sin JS —
     js/header-height.js mide el alto real del header en cada carga y
     resize, y sobreescribe esta variable dinámicamente. */
  --content-maxw: 1180px;
  --header-height: 82px;

  /* --- Accesibilidad ---------------------------------------------------
     Foco visible obligatorio (ver PDF §20 "Responsive, Accesibilidad y
     Performance"). Un solo valor reutilizado en toda la UI. */
  --focus-ring: 3px solid #0C9A6C;
}

/* --------------------------------------------------------------------------
   Breakpoints de referencia (no se pueden guardar como variables CSS
   dentro de @media, se documentan aquí para que todo el equipo use los
   mismos cortes en cualquier archivo nuevo):

     320   → móvil mínimo soportado
     375   → móvil base de diseño
     390 / 430 → móvil grande
     768   → tablet
     1024  → desktop (aquí aparece la navegación completa)
     1440  → desktop grande

   Estos son los mismos siete anchos del checklist de QA (PDF §20 y §25).
-------------------------------------------------------------------------- */