/* =========================================================================
   GLOBAL SECTION: Hero Patterns
   ========================================================================= */

/* =========================================================================
   CITEM — Hero Section: "Sistema 2026"
   
   Architecture:
   - .hero-viewport wraps hero + flags marquee
   - Height = 100svh - nav (fills remaining viewport after sticky nav)
   - Flex column: hero fills remaining space, marquee sits at bottom
   - Zero magic numbers — everything references design tokens
   ========================================================================= */

/* ─── Viewport wrapper (hero + marquee = fills below nav) ─── */
.hero-viewport {
    height: calc(100svh - var(--nav-height));
    display: flex;
    flex-direction: column;
}

/* SYNC DS §5.3: kicker pequeño, en Coral oscuro (§3.1). */
.hero-kicker {
    /* POSITIONING §3-Hero: kicker y promesa, en Gobold y en mayúsculas. */
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--c-coral-dark);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.14em;
}

/* ─── Marquee (natural height, sits at bottom of viewport) ─── */
.marquee-container {
    width: 100%;
    background-color: var(--c-indigo);
    color: var(--c-paper);
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-shrink: 0; /* Never shrink — always show at full height */
    border-bottom: var(--border-weight) solid var(--c-indigo);
    position: relative;
}

.marquee-track {
    display: inline-block;
    white-space: nowrap;
    padding-right: 50px;
}

/* Se mueve solo si hay JS, porque es el JS el que la hace parable
   (js/marquesinas.js, WCAG 2.2.2): sin él, la marquesina se queda quieta en
   su primera vuelta. Con movimiento reducido no se mueve nunca (§8.3). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .marquee-track {
        animation: ticker 40s linear infinite;
        will-change: transform;
    }

    .marquee-flags .marquee-track--slow {
        animation-name: ticker-reverse;
        animation-duration: 60s;
    }
}

.marquee-track:hover,
.marquee-container.is-paused .marquee-track {
    animation-play-state: paused;
}

.marquee-track span {
    color: var(--c-paper);
}

/* SYNC DS §5.3: el texto de la marquesina es Papel sobre Índigo; el Coral
   solo en el separador, que es forma y no texto (§3.1). Antes era cada span
   par, y en la marquesina de inventario eso pintaba media lista en Coral a
   16 px (3,10:1 sobre Índigo). */
.marquee-track .flag-sep {
    color: var(--c-coral);
}

/* ─── Marquee de banderas ───
   SYNC DS §4.4: modificador de .marquee-container, no una pieza de página.
   Vivía en pages/landing.css; al usarlo la home y /audition-book/ a la vez,
   dejarlo ahí obligaba a duplicarlo. Su sitio es junto al componente base. */
.marquee-flags {
    font-size: 1rem;
    padding: 0.8rem 0;
}

.flag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.flag-item img {
    /* BUG-FIX 01: height explícito evita CLS — sin height el navegador
       no conoce la ratio antes de cargar el SVG, causando reflow. */
    width: 20px;
    height: 14px;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
    object-fit: cover;
}

.flag-sep {
    margin: 0 0.5em;
}