/* ==========================================================================
   Tokens de diseño · Security Wise
   Paleta de marca v2, «Tinta, papel y señal» (guía de color del 26-09-2026),
   y derivados accesibles. Los contrastes indicados están medidos con WCAG 2
   (mínimo 4,5:1 para texto normal; 3:1 para texto grande, íconos y puntos).
   ========================================================================== */

:root {
  /* Núcleo: la marca */
  --sw-tinta: #09101F;        /* texto y fondos oscuros */
  --sw-cobalto: #1B3D9E;      /* líneas, dibujos, titulares y campos de color */
  --sw-papel: #F3F2EE;        /* el fondo claro */
  --sw-senal: #D91F2A;        /* el único acento: el punto final, el botón principal */

  /* Apoyo: datos, interfaz e ilustración */
  --sw-noche: #0E1D4A;        /* superficies sobre Tinta */
  --sw-cielo: #3D6EE0;        /* gráficos, íconos y estados; para texto chico, Cobalto */
  --sw-bruma: #CBD8F8;        /* rellenos suaves y texto de apoyo sobre Tinta: 13,3:1 */
  --sw-grafito: #4B5675;      /* texto secundario: 6,5:1 sobre Papel · 7,3:1 sobre blanco */
  --sw-acero: #8E9CC4;        /* líneas y rótulos sobre Tinta: 7,0:1 */
  --sw-senal-clara: #FF6B72;  /* la señal sobre Cobalto y Tinta: 6,9:1 sobre Tinta */
  --sw-ember: #F07020;        /* solo en el logo y en la severidad «Alta» (con texto en Tinta) */
  --sw-blanco: #FFFFFF;

  /* Derivados de interfaz */
  --sw-senal-texto: #D31525;  /* errores en letra chica: 4,8:1 sobre Papel (Señal llega a 4,49:1) */
  --sw-grafito-suave: #5A6484; /* placeholders: 5,9:1 sobre blanco */
  --sw-bruma-tenue: #A3B0D4;  /* texto terciario sobre Tinta: 8,8:1 */
  --sw-dot: #BCC8E8;          /* puntos del mapa (decorativo) */
  --sw-tint: #E8EEFD;         /* superficies teñidas de Cobalto */
  --sw-border: #C9D4F0;       /* bordes de campos y tarjetas: una línea fina de Cobalto */
  --sw-line: rgba(9, 16, 31, 0.12);
  --sw-line-strong: rgba(9, 16, 31, 0.22);
  --sw-line-on-dark: rgba(203, 216, 248, 0.14);

  /* Roles: úselos en los componentes en vez de los valores de marca */
  --color-bg: var(--sw-papel);
  --color-surface: var(--sw-blanco);
  --color-text: var(--sw-tinta);
  --color-text-muted: var(--sw-grafito);
  --color-brand: var(--sw-cobalto);
  --color-action: var(--sw-senal);        /* botón principal: «Conversar con nosotros» */
  --color-on-action: var(--sw-blanco);    /* blanco sobre Señal: 5,0:1 */
  --color-signal: var(--sw-senal);        /* el punto final de los titulares y otras marcas de señal */
  --color-error: var(--sw-senal-texto);
  --color-focus: var(--sw-cielo);

  /* Tipografía */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.55rem + 3.4vw, 4.375rem);   /* 40 → 70 px */
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.375rem);          /* 32 → 54 px */
  --fs-h2-slide: clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem); /* 34 → 58 px */
  --fs-h3: 1.5rem;                                           /* 24 px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);      /* 17 → 19 px */
  --fs-body: 1rem;                                           /* 16 px */
  --fs-mono: 0.78125rem;                                     /* 12,5 px */
  --fs-mono-sm: 0.71875rem;                                  /* 11,5 px */

  /* Espacio y forma */
  --container: 1200px;
  --gutter: clamp(20px, 6vw, 120px);
  --section-y: clamp(48px, 4.5vw, 72px);   /* espacio arriba y abajo de cada sección: 48 → 72 px (unos 64 a 1440) */
  --header-h: 80px;    /* el logo mide 50 px de alto */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-sm: 12px;
  --shadow-card: 0 40px 90px rgba(9, 16, 31, 0.22);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-slide: 700ms;
}

@media (max-width: 899px) {
  :root { --header-h: 68px; }
}