/* ══════════════════════════════════════════════════════════════════════
   ESFERIZE — DESIGN SYSTEM TOKENS
   Fuente única de verdad de la paleta, tipografía y motion.
   Cargado en todas las 16 páginas ES antes del <style> inline,
   para que cualquier override page-specific siga ganando.
   Última canonicalización: 2026-05-26
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PALETA — colores corporativos ── */
  --rojo-acento:        #E30613;  /* CTA primary, sellos, énfasis rojo. Contraste AA sobre blanco (4.72:1) */
  --rojo-profundo:      #B5050F;  /* Hover de rojo-acento, sombras de marca */
  --rojo-cta:           #E30613;  /* Alias semántico para botones de conversión */
  --turquesa:           #2BA8B2;  /* Sec-labels, dividers, glows tech */
  --turquesa-acento:    #78FFEF;  /* SVG-network, em-block sobre fondo oscuro, glows hover */
  --aguamarina:         #006B75;  /* Em-block sobre fondo claro. Contraste AA sobre blanco */
  --petroleo:           #0E2A2E;  /* Footer + trust-band + .cifras overlay — fondo oscuro corporativo */
  --black:              #0C0C0C;  /* Anclas estructurales: hero, footer, UI */
  --white:              #ffffff;
  --fondo:              #ECEAE4;  /* Fondo neutro general — secciones intermedias, bridges */
  --fondo-personas:     #EDE5E5;  /* "Personas / cara visible" — clientes, comité, operación visible */
  --gris-suave:         #F2F0EB;  /* Backgrounds suaves de cards/utilidades */
  --gris-texto:         #1e1e1e;  /* Texto cuerpo principal */
  --card-dark:          #101216;  /* Cards oscuras (verticales, cap__cards) */
  --bg-dark:            #08090c;  /* Fondos casi-negro, panels srv */

  /* ── ACCESIBILIDAD ── */
  --texto-sobre-oscuro: #ffffff;
  --texto-secundario:   #595959;  /* Mínimo 4.5:1 sobre blanco (AA) */
  --focus-ring:         #005FCC;  /* Color de foco visible AA */

  /* ── TIPOGRAFÍA ── */
  --font-heading: 'Barlow Condensed', sans-serif;  /* H1 + H2 — impacto estructural */
  --font-display: 'Inter', sans-serif;              /* H3 — nivel de componente */
  --font-body:    'Inter', sans-serif;
  --font-num:     'Barlow', sans-serif;             /* Numeradores destacados (NO condensed) */

  /* ── ESCALAS TIPOGRÁFICAS ── */
  --fs-display:     clamp(56px, 7vw, 96px);
  --fs-h1:          clamp(40px, 5.6vw, 80px);
  --fs-h2:          clamp(34px, 3.8vw, 54px);
  --fs-h3:          clamp(22px, 2.2vw, 30px);

  /* ── LAYOUT ── */
  --nav-h:          72px;

  /* ── MOTION ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.40, 0, 0.20, 1);
  --dur-ui:         180ms;
  --dur-layout:     360ms;
  --dur-scene:      700ms;
}