/* ==========================================================================
   OMNIA — Design tokens (v3 · "luminosa": blanco + azul de marca)
   Fuente de verdad: docs/brandkit.md
   Cambiá colores, tipografías y espaciados SOLO acá; styles.css los consume.
   ========================================================================== */

/* ---------- Tipografías (archivos en assets/fonts/) ----------
   Geist: fuente variable (pesos 100–900 en un solo archivo).
   Saans SemiMono: versión TRIAL → reemplazar por la licencia web antes de publicar. */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../assets/fonts/Geist/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saans SemiMono";
  src: url("../assets/fonts/SaansSemiMono/SaansSemiMono-TRIAL-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saans SemiMono";
  src: url("../assets/fonts/SaansSemiMono/SaansSemiMono-TRIAL-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Fondos (sin fondos oscuros) ---------- */
  --c-bg:       #FFFFFF;   /* fondo general */
  --c-bg-warm:  #F7F7F4;   /* fondo cálido, en algunas secciones */
  --c-bg-blue:  #F3F7FF;   /* azul muy claro, en algunas secciones */
  --c-surface:  #FFFFFF;   /* tarjetas */

  /* ---------- Texto ---------- */
  --c-ink:    #0A1D3A;     /* Deep Blue de marca: titulares y texto (16.8:1) */
  --c-muted:  #4A5872;     /* texto secundario (7.2:1 sobre blanco) */
  --c-faint:  #B9C6DA;     /* decorativo: relleno de títulos antes del scroll */
  --c-line:   rgba(10, 29, 58, 0.10);
  --c-line-2: rgba(10, 29, 58, 0.16);

  /* ---------- Azul de marca (protagonista) ---------- */
  --c-blue:      #1F6FFF;  /* Electric Blue */
  --c-blue-600:  #1A5FE0;
  --c-blue-700:  #0F4BC4;
  --c-blue-text: #1858D6;  /* texto chico en azul (6.2:1) */
  --c-sky:       #4DA3FF;  /* Sky Blue: solo decorativo o texto grande */
  --c-blue-50:   #EEF4FF;
  --c-blue-100:  #E1ECFF;

  /* ---------- Gradientes (suaves, nunca duros) ---------- */
  --g-button: linear-gradient(110deg, #0F4BC4 0%, #1C64F0 55%, #0F4BC4 100%);   /* texto blanco AA en todo el recorrido */
  --g-text:   linear-gradient(100deg, #1A5FE0 0%, #1F6FFF 50%, #3B8BFF 100%);   /* titulares grandes (≥ 3:1) */
  --g-line:   linear-gradient(90deg, #1F6FFF 0%, #4DA3FF 100%);                 /* líneas y detalles */
  --g-mist:
    radial-gradient(60% 55% at 85% 0%, rgba(77, 163, 255, 0.18) 0%, rgba(77, 163, 255, 0) 70%),
    radial-gradient(55% 50% at 0% 100%, rgba(31, 111, 255, 0.10) 0%, rgba(31, 111, 255, 0) 70%);
  --g-card:   linear-gradient(160deg, #EAF2FF 0%, #F7FAFF 55%, #FFFFFF 100%);
  --g-panel:  linear-gradient(155deg, #0E47BB 0%, #1656DA 52%, #0D3FA6 100%);       /* panel azul de contacto: texto blanco AA */
  --g-veil:   linear-gradient(180deg, rgba(10, 29, 58, 0) 35%, rgba(10, 29, 58, 0.55) 72%, rgba(10, 29, 58, 0.86) 100%);

  /* ---------- Color: semánticos (SOLO estados de UI) ---------- */
  --c-success: #16A34A;
  --c-error:   #DC2626;

  /* ---------- Tipografía ---------- */
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Saans SemiMono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  --fs-hero:      clamp(42px, 5.4vw, 80px);
  --fs-statement: clamp(32px, 4vw, 58px);
  --fs-h2:        clamp(30px, 3.2vw, 46px);
  --fs-h3:        clamp(20px, 1.6vw, 24px);
  --fs-intro:     clamp(18px, 1.5vw, 21px);
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-mono:      11px;

  --lh-tight: 1.04;
  --lh-title: 1.1;
  --lh-body:  1.55;

  --ls-hero:  -0.045em;
  --ls-title: -0.035em;
  --ls-h3:    -0.015em;
  --ls-mono:  0.14em;

  /* ---------- Layout ---------- */
  --container: 1440px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --section-y: clamp(88px, 10vw, 150px);
  --header-h: 76px;

  /* ---------- Radios y sombras ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 29, 58, 0.06), 0 4px 14px rgba(10, 29, 58, 0.05);
  --shadow-md: 0 2px 6px rgba(10, 29, 58, 0.05), 0 18px 40px rgba(10, 29, 58, 0.08);
  --shadow-blue: 0 10px 30px rgba(31, 111, 255, 0.22);

  /* ---------- Movimiento (sutil) ---------- */
  --tap-min: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .25s;
  --dur: .5s;
  --dur-slow: 1s;
}