/* ==========================================================================
   SERVIO FERNÁNDEZ — DESIGN TOKENS
   Única fuente de verdad para color, tipografía, espacio, radios y sombras.
   Editar aquí cambia todo el sitio.
   ========================================================================== */

:root {
  /* ---------- Marca ---------- */
  --navy:          #081D42;   /* azul marino — fondo premium, autoridad */
  --navy-deep:     #050F26;   /* variación profunda — footer, contraste */
  --navy-soft:     #0C2551;   /* variación suave — capas sobre navy */
  --blue:          #285BCB;   /* azul — CTAs, acentos, líneas, números */
  --blue-strong:   #1E4AAD;   /* hover de CTA */
  --blue-tint:     #E9EFFC;   /* fondo suave de acento */

  /* Naranja de marca — reservado a los CTAs, no al texto corrido.
     Blanco sobre este naranja da 3.09:1: decisión de marca asumida. */
  --orange:        #FF5C1A;
  --orange-strong: #E64E0F;   /* hover del CTA */
  --orange-tint:   #FFF0E9;

  --white:         #FFFFFF;

  /* ---------- Neutros azulados (fondos secundarios) ---------- */
  --mist:          #F5F8FD;
  --mist-2:        #EBF1FA;
  --line:          #DCE4F2;
  --line-strong:   #C6D3E8;

  /* ---------- Texto ---------- */
  --ink:           #0B1A36;
  --ink-2:         #33456A;
  --ink-muted:     #5A6C8C;
  --on-navy:       #FFFFFF;
  --on-navy-2:     rgba(255, 255, 255, 0.74);
  --on-navy-muted: rgba(255, 255, 255, 0.56);
  --line-on-navy:  rgba(255, 255, 255, 0.14);
  --line-on-navy-2:rgba(255, 255, 255, 0.28);

  /* ---------- Tipografía ---------- */
  --font-display: "Sora", "Manrope", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display:  clamp(2.25rem, 4.1vw, 3.45rem);
  --fs-h1:       clamp(2.15rem, 4.4vw, 3.5rem);
  --fs-h2:       clamp(1.8rem, 3.2vw, 2.75rem);
  --fs-h3:       clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-h4:       clamp(1rem, 1.25vw, 1.15rem);
  --fs-lead:     clamp(1.05rem, 1.25vw, 1.25rem);
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;
  --fs-metric:   clamp(2.75rem, 6vw, 4.5rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.68;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.18em;
  --ls-label:   0.12em;

  /* ---------- Espacio ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* Ritmo vertical de las secciones — el aire es parte de la marca */
  --section-y:      clamp(5.5rem, 10vw, 10.5rem);
  --section-y-lg:   clamp(7rem, 13vw, 13.5rem);
  --block-gap:      clamp(3rem, 6vw, 6rem);

  /* ---------- Layout ---------- */
  --container:       1240px;
  --container-wide:  1400px;
  --container-narrow: 780px;
  --gutter:          clamp(20px, 5vw, 56px);
  --header-h:        84px;

  /* ---------- Forma ---------- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- Sombra ---------- */
  --shadow-xs: 0 1px 2px rgba(8, 29, 66, 0.05);
  --shadow-sm: 0 2px 10px rgba(8, 29, 66, 0.06);
  --shadow-md: 0 12px 34px -14px rgba(8, 29, 66, 0.22);
  --shadow-lg: 0 34px 70px -30px rgba(8, 29, 66, 0.34);
  --shadow-blue: 0 16px 34px -14px rgba(40, 91, 203, 0.45);
  --shadow-orange: 0 16px 34px -14px rgba(255, 92, 26, 0.50);

  /* ---------- Movimiento ---------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  680ms;

  --z-header: 100;
  --z-menu:   120;
  --z-sticky: 90;
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
}