/* ================================================================
   TOKENS.CSS — variables globales + reset + utilidades compartidas
   Se referencia en _Layout.cshtml. Todas las demás hojas de estilo
   (header, footer, hero, trust-bar, pilares, cta-final) dependen de
   las variables definidas acá.

   Paleta extraída del logo oficial NGG:
   --navy: color principal de marca (texto "NEGOCIOS", globo)
   --blue: secundario (texto "GLOBALES GROUP", anillos de íconos)
   --graphite: tono del degradado en la segunda "G" del isotipo
   --spark: acento tecnológico derivado, uso mínimo en CTAs/hover
   --gold: acento institucional derivado (no está en el logo original,
   pero complementa la tríada azul/negro/dorado pedida) — uso muy
   acotado: líneas, bordes finos, detalles. Nunca como fondo grande.
   ================================================================ */
:root {
    --navy: #061B48;
    --navy-2: #0A2358;
    --blue: #123B79;
    --blue-2: #1E4F96;
    --graphite: #313C52;
    --spark: #2E7BF0;
    --gold: #A9832E;
    --gold-soft: rgba(169,131,46,0.35);
    --paper: #FFFFFF;
    --mist: #F4F6FA;
    --mist-2: #EAEFF7;
    --ink: #0B1220;
    --ink-soft: rgba(11,18,32,0.62);
    --line: rgba(6,27,72,0.12);
    --line-soft: rgba(6,27,72,0.07);
    --display: 'Montserrat',sans-serif;
    --body: 'Inter',sans-serif;
    --mono: 'JetBrains Mono',monospace;
    --container: 1180px;
    --radius: 14px;
}

/* ── RESET ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

ul {
    list-style: none
}

button {
    font: inherit;
    cursor: pointer
}

section {
    position: relative
}

/* ── LAYOUT UTILITY — usado en todas las secciones ── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px
}

/* ── ACCESIBILIDAD — global ── */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--spark);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important
    }
}

/* ── REVEAL ON SCROLL — usado por reveal.js en todas las secciones ── */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease,transform .7s ease
}

    .reveal.is-visible {
        opacity: 1;
        transform: none
    }

/* ── EYEBROW — label pequeño usado como antetítulo en varias secciones ── */
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--spark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .eyebrow::before {
        content: '';
        width: 22px;
        height: 1px;
        background: var(--spark)
    }