/* ==========================================================================
   KZ TOKENS — capa de sistema para la página Nosotros
   --------------------------------------------------------------------------
   Objetivo: MISMO idioma visual que la página de inicio (index.php).
     · Tipografía Roboto, pesos altos (700–900) — NO serif.
     · Navy en degradado + dorado como acento (nunca relleno grande).
     · Eyebrow dorado en pill, idéntico a .teatro-eyebrow / .hero-badge.
     · Revelado al scroll con AOS (igual que el inicio), no un sistema propio.

   Todo va scopeado a `.kz` (en <body class="kz">), nunca a :root, y todos
   los tokens llevan prefijo --kz-, así que no se pisa nada de style.css.
   Orden de carga: style.css -> kz-tokens.css -> nosotros.css
   ========================================================================== */

.kz {
    /* ── Navy (tomado del set "premium" del inicio) ───────────────────── */
    --kz-navy-900: #030d1e;
    --kz-navy-800: #001230;
    --kz-navy-700: #001a3d;
    --kz-navy-600: #002050;
    --kz-navy-500: #004080;
    --kz-navy-grad: linear-gradient(135deg, #030d1e 0%, #001a3d 60%, #000d2a 100%);
    --kz-navy-grad-alt: linear-gradient(160deg, #030d1e 0%, #001230 50%, #002050 100%);

    /* ── Papel / neutros ──────────────────────────────────────────────── */
    --kz-paper: #ffffff;
    --kz-paper-2: #f7f9fc;
    --kz-paper-3: #eef1f6;
    --kz-line: #e2e7ef;
    --kz-line-strong: #c9d2df;
    --kz-text: #1f2733;
    --kz-text-muted: #55627a;

    /* ── Dorado ────────────────────────────────────────────────────────
       #d4af37 sobre navy = 8.7:1 (uso libre).
       #d4af37 sobre blanco = 1.9:1 (PROHIBIDO como texto claro).
       #7a5f16 sobre blanco = 6.1:1 (dorado para texto sobre claro).      */
    --kz-gold: #d4af37;
    --kz-gold-dark: #b8952f;
    --kz-gold-ink: #7a5f16;
    --kz-gold-rgb: 212 175 55;

    /* ── Tipografía: Roboto, como todo el sitio ───────────────────────── */
    --kz-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --kz-fs-hero: clamp(2.2rem, 1.3rem + 3.6vw, 3.8rem);
    --kz-fs-h2:   clamp(1.8rem, 1.25rem + 2.2vw, 2.8rem);
    --kz-fs-h3:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    --kz-fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --kz-fs-body: 1rem;
    --kz-fs-sm:   0.9rem;
    --kz-fs-xs:   0.78rem;

    /* ── Espaciado 8pt ────────────────────────────────────────────────── */
    --kz-1: 0.25rem; --kz-2: 0.5rem;  --kz-3: 0.75rem; --kz-4: 1rem;
    --kz-5: 1.5rem;  --kz-6: 2rem;    --kz-7: 3rem;    --kz-8: 4rem;
    --kz-9: 6rem;    --kz-10: 8rem;
    --kz-section-y: clamp(4rem, 6vw, 7rem);

    /* ── Radios ───────────────────────────────────────────────────────── */
    --kz-r-sm: 6px; --kz-r-md: 12px; --kz-r-lg: 16px; --kz-r-xl: 22px; --kz-r-pill: 50px;

    /* ── Sombras (teñidas en navy, como el inicio) ────────────────────── */
    --kz-e1: 0 2px 8px rgb(3 13 30 / .06);
    --kz-e2: 0 8px 24px rgb(3 13 30 / .10);
    --kz-e3: 0 18px 45px rgb(3 13 30 / .14);
    --kz-glow-gold: 0 0 24px rgb(var(--kz-gold-rgb) / .18);

    /* ── Movimiento ───────────────────────────────────────────────────── */
    --kz-ease: cubic-bezier(.4, 0, .2, 1);
    --kz-ease-out: cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================================
   BASE TIPOGRÁFICA — Roboto, pesos altos
   ========================================================================== */

.kz {
    font-family: var(--kz-font);
    font-size: var(--kz-fs-body);
    line-height: 1.6;
    color: var(--kz-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kz h1, .kz h2, .kz h3, .kz h4 {
    font-family: var(--kz-font);
    color: var(--kz-navy-800);
    line-height: 1.15;
}

.kz h1 { font-size: var(--kz-fs-hero); font-weight: 900; letter-spacing: -0.5px; line-height: 1.08; }
.kz h2 { font-size: var(--kz-fs-h2);   font-weight: 800; letter-spacing: -0.3px; }
.kz h3 { font-size: var(--kz-fs-h3);   font-weight: 700; letter-spacing: -0.2px; }
.kz h4 { font-size: 1.05rem;           font-weight: 700; }

.kz p { margin: 0 0 1rem; }
.kz strong { font-weight: 700; }

/* ── Palabra dorada de acento en un titular (como .hero-highlight) ────── */
.kz .kz-accent { color: var(--kz-gold-ink); }

/* ── Sobre fondo oscuro ───────────────────────────────────────────────── */
.kz .on-dark { color: rgba(255, 255, 255, 0.72); }
.kz .on-dark h1, .kz .on-dark h2, .kz .on-dark h3, .kz .on-dark h4 { color: #fff; }
.kz .on-dark .kz-accent { color: var(--kz-gold); }


/* ==========================================================================
   UTILIDADES
   ========================================================================== */

/* ── Eyebrow dorado en pill — idéntico a .teatro-eyebrow del inicio ────── */
.kz .kz-eyebrow {
    display: inline-block;
    font-size: var(--kz-fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kz-gold-ink);
    background: rgb(var(--kz-gold-rgb) / .10);
    border: 1px solid rgb(var(--kz-gold-rgb) / .28);
    border-radius: var(--kz-r-pill);
    padding: 0.3rem 0.95rem;
    margin-bottom: 1.1rem;
}

.kz .on-dark .kz-eyebrow { color: var(--kz-gold); }

/* ── Divisor dorado (motivo del inicio) ───────────────────────────────── */
.kz .kz-divider {
    height: 2px;
    width: 100%;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, rgb(var(--kz-gold-rgb) / .45), transparent);
}

/* ── Cabecera de sección centrada ─────────────────────────────────────── */
.kz .kz-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--kz-8);
}

.kz .kz-head p {
    color: var(--kz-text-muted);
    font-size: var(--kz-fs-lead);
    margin: 0.75rem auto 0;
    max-width: 60ch;
}

.kz .on-dark.kz-head p,
.kz .on-dark .kz-head p { color: rgba(255, 255, 255, 0.6); }

/* ── Numerales / ordinales ────────────────────────────────────────────── */
.kz .kz-num { font-variant-numeric: tabular-nums lining-nums; }

/* ── Contenedor de sección ────────────────────────────────────────────── */
/* overflow-x:clip confina la traslación inicial de AOS (fade-left/right
   arrancan desplazados) sin crear contenedor de scroll (a diferencia de
   overflow:hidden), así que no aparece barra horizontal. */
.kz .kz-section { padding-block: var(--kz-section-y); position: relative; overflow-x: clip; }

/* ── Solo lectores de pantalla ────────────────────────────────────────── */
.kz .kz-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   FOCO
   ========================================================================== */

.kz :is(a, button, [tabindex], summary):focus-visible {
    outline: 2px solid var(--kz-gold-ink);
    outline-offset: 3px;
    border-radius: var(--kz-r-sm);
}

.kz .on-dark :is(a, button, [tabindex]):focus-visible { outline-color: var(--kz-gold); }


/* ==========================================================================
   REDUCED MOTION — desactiva animaciones ambientales y AOS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kz *, .kz *::before, .kz *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* AOS deja los elementos visibles si se desactiva el movimiento */
    .kz [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* Si AOS no llegó a cargar (red caída), se neutraliza su estado oculto. */
.kz.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }