/* =========================================================
   variables.css
   Identidad visual centralizada. Cambia aquí colores,
   tipografías, espaciados, radios y sombras y toda la web
   se actualiza. Única fuente de verdad del diseño.
   ========================================================= */

:root {
  /* ---------- Color: marca (azules del brief) ---------- */
  --c-blue-royal: #1b3fe0;   /* azul rey (acento principal / CTAs) */
  --c-navy-deep:  #0a1738;   /* azul marino profundo (EL momento azul) */
  --c-navy-ink:   #060c22;   /* azul profundo */
  --c-cyan:       #19d4ff;   /* cian eléctrico (acento, usar con cuentagotas) */

  /* ---------- Color: neutros (grafito, apenas azulado) ----------
     Clave contra el "todo azul": los fondos tiran a grafito casi negro
     y el azul marino queda reservado para secciones concretas. */
  --c-black:      #000000;
  --c-ink-950:    #070910;   /* grafito casi negro (fondo base) */
  --c-ink-900:    #0e1119;   /* grafito (superficie de tarjetas) */
  --c-ink-800:    #141825;   /* grafito claro (hover / realces) */
  --c-ink-700:    #2a2f45;   /* gris oscuro (bordes) */
  --c-white:      #ffffff;

  /* ---------- Roles semánticos ---------- */
  --bg:           var(--c-ink-950);    /* fondo base NEUTRO (grafito) */
  --bg-alt:       var(--c-navy-deep);  /* fondo alterno = azul marino (acento ambiental) */
  --surface:      var(--c-ink-900);    /* superficie tarjetas */
  --surface-2:    var(--c-ink-800);    /* superficie elevada */
  --border:       rgba(255, 255, 255, 0.07);
  --border-strong:rgba(255, 255, 255, 0.14);

  --text:         var(--c-white);
  --text-muted:   #a7adbe;             /* texto secundario (neutro, sin tinte azul) */
  --text-dim:     #6f7589;             /* texto terciario / notas */

  /* ---------- Gradiente de acento (CTAs y detalles) ---------- */
  --grad-accent:  linear-gradient(135deg, var(--c-blue-royal) 0%, var(--c-cyan) 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(27,63,224,.18), rgba(25,212,255,.18));
  --glow-blue:    rgba(27, 63, 224, 0.55);
  --glow-cyan:    rgba(25, 212, 255, 0.45);

  /* ---------- Tipografía ----------
     Fuente única en todo el sitio: Inter Tight (títulos, nav, texto, botones). */
  --font-head: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala tipográfica fluida (mobile-first, crece con el viewport) */
  --fs-xs:   0.8125rem;                               /* 13px */
  --fs-sm:   0.9375rem;                               /* 15px */
  --fs-base: 1rem;                                    /* 16px */
  --fs-lg:   1.125rem;                                /* 18px */
  --fs-xl:   clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --fs-2xl:  clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  --fs-3xl:  clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  --fs-hero: clamp(2.6rem, 1.2rem + 5.4vw, 5.5rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.65;

  /* ---------- Espaciado ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);  /* padding vertical de secciones */

  /* ---------- Layout ---------- */
  --container:        1180px;
  --container-narrow: 760px;
  --header-h:         72px;

  /* ---------- Radios ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* ---------- Sombras ---------- */
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --sh-md: 0 12px 30px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --sh-glow: 0 10px 40px -8px var(--glow-blue);

  /* ---------- Transiciones y curvas ---------- */
  --t-fast: 0.18s ease;
  --t-base: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}