/* =========================================================================
   GLOBAL SECTION: Responsive Rules
   ========================================================================= */

/* =========================================================================
   CITEM — Responsive: "Sistema 2026" (Standalone Theme Folder)
   
   Audit fixes applied:
   - C2: Hero flex split → auto-height on mobile
   - A2: --spacing-xl reduced (was 6rem > desktop's 5rem, now 3rem)
   - C4: Button padding reduced for mobile
   - A3: Hero kicker letter-spacing reduced
   - M1: Hero-main padding-left removed (container handles it)
   - M2: Route card padding reduced
   - A5: Footer mobile alignment made coherent
   ========================================================================= */

/* 767.98 y no 768: la home pasa su hero a fila a partir de `min-width: 768px`
   (pages/home.css), y en 768 exacto se aplicaban las dos reglas a la vez. El
   decimal cierra además los viewports fraccionarios (767.5). */
@media (max-width: 767.98px) {
    /* ── Spacing tokens: reducidos para pantallas pequeñas ── */
    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 2.5rem;
        --spacing-md: 1.5rem;
    }
    
    /* ── C2 fix: Hero viewport → min-height en lugar de height fija ──
       Permite que el contenido empuje si no cabe en el viewport. */
    .hero-viewport {
        min-height: calc(100svh - var(--nav-height));
        height: auto;
    }

    /* ── A3 fix: Hero kicker — reducir letter-spacing para que
       "Ecosistema Digital de Teatro Musical" quepa en ~375px ── */
    .hero-kicker {
        letter-spacing: 0.5px;
        font-size: 0.75rem;
    }

    /* ── M2 fix: Route cards — padding interno reducido ── */
    .route-card {
        padding: var(--spacing-md);
    }

}

/* ── Teléfonos muy pequeños ── */
@media (max-width: 480px) {
    /* A1 fix: reducir padding de container en pantallas < 480px */
    :root {
        --spacing-md: 1.25rem;
    }

    /* En el contenido, un botón ocupa el ancho de la columna con el pulgar. */
    main .cds-boton:not(.cds-boton--enlace) {
        width: 100%;
    }

    .marquee-container {
        font-size: 0.875rem;
    }
}