/* ==========================================================================
   Bi. — Design tokens
   Colores oficiales de marca (confirmados por Alejo) y tipografía real
   (Helvetica Neue, family provista en assets/fonts/HelveticaNeue.ttc).
   Ver nota de licenciamiento sobre la fuente en assets/fonts/README.md.
   ========================================================================== */

:root {
  /* ---- Color de marca ---- */
  --color-blue: #0061E5;
  --color-red: #FF000F;
  --color-green: #00A759;
  --color-gray: #9498AB;
  --color-black: #000000;
  --color-white: #FFFFFF;
  /* Colores adicionales de marca confirmados por Alejo, usados hoy en el
     ciclo de color del punto animado (ver DOT_PALETTE en assets/js/main.js) */
  --color-yellow: #FFCD00;
  --color-pink: #FFA6FF;

  /* texto secundario sobre fondos claros/de color — derivado del gris de marca */
  --color-muted-on-blue: #C3C8DC;
  --color-muted-on-white: var(--color-gray);
  --color-muted-on-black: var(--color-gray);
  --color-eyebrow: var(--color-gray);

  /* ---- Tipografía ----
     Helvetica Neue es la ÚNICA familia de toda la marca — confirmado por
     Alejo: no hay cortes Condensed/Black, ni siquiera en los titulares
     grandes en mayúscula ("COMPRENDER", "CAPACIDADES"): esos son
     Helvetica Neue Regular a tamaño grande + mayúsculas (text-transform),
     el mismo peso que el cuerpo de texto. Por eso las tres variables
     apuntan a la misma familia real, servida vía Adobe Fonts (proyecto
     web "Bibrand.co" — ver <link> a use.typekit.net en index.html):
     Roman 400, Medium 500, Bold 700. Lo único que cambia entre variables
     es el font-weight que se le aplica en cada uso (ver comentarios junto
     a cada font-weight:900 → 400 corregido en components.css, layout.css,
     sections.css y typography.css). Arial queda como respaldo si el kit
     no carga. */
  --font-display: 'helvetica-neue-lt-pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display-bold: 'helvetica-neue-lt-pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-body: 'helvetica-neue-lt-pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-hero: clamp(2rem, 3.4vw, 3.25rem); /* bajada vs. el ajuste anterior, más fiel al diseño */
  --fs-hero-subtitle: clamp(1.2rem, 1.7vw, 1.6rem); /* subida vs. el ajuste anterior */
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-display-xl: clamp(3.5rem, 9vw, 8rem);
  --fs-body-lg: clamp(1.1rem, 1.6vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-eyebrow: 0.8rem;
  --fs-stat: clamp(4rem, 12vw, 10rem);

  --lh-tight: 1.05;
  --lh-normal: 1.5;

  /* ---- Layout ---- */
  --container-max: 1920px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(3rem, 8vw, 6rem);

  /* "Qué resolvemos": distancias medidas directo del mockup (no son
     simétricas: el gap de abajo, al byline, es más grande que el de
     arriba, al eyebrow). Como toda la sección tiene un alto fijo de
     915px (no responsive por ahora), estos valores van en px fijos. */
  --intro-gap-top: 129px; /* eyebrow → párrafo */
  --intro-gap-bottom: 171px; /* párrafo → byline */
  /* Gris específico que pidió Alejo para el párrafo de "Qué resolvemos",
     distinto del --color-gray de marca usado en el resto del sitio. */
  --color-intro-muted: #9699AA;

  /* Header + hero__top = 50vh azul, siempre.
     En vez de repartir el 50vh "a ciegas" entre los dos, fijamos primero
     la altura que necesita el bloque del título (--hero-top-h, constante
     salvo pequeño ajuste responsive) y el header absorbe TODO el resto
     del 50vh disponible. Así el espacio "extra" de cada pantalla queda
     siempre arriba del logo (nunca entre el logo y el título), y el logo
     queda pegado al título con un gap fijo (padding-bottom del header). */
  --hero-top-h: clamp(9.5rem, 15vh, 13rem);
  --header-h-large: calc(50vh - var(--hero-top-h));
  --header-h-compact: clamp(3.75rem, 7.5vh, 5rem);
  /* En vh (no vw): así el logo escala en la misma proporción que
     --header-h-large (también vh) y nunca se desborda del header en
     ventanas anchas-pero-bajas (antes, al ser vw, podía quedar más alto
     que el propio header y recortarse contra el borde de la ventana). */
  --logo-h-large: clamp(5.5rem, 9vh, 9rem);
  --logo-h-compact: clamp(2.25rem, 4vw, 3rem);
  --logo-title-gap: 1.875rem; /* ~30px, el que pediste entre logo y título */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.35s;
}