/* =========================================================================
   CITEM — Landing Page · Responsive
   Archivo exclusivo de breakpoints para index.html.
   NO contiene estilos base. Solo overrides por viewport.

   Estrategia de breakpoints:
     480px  — Móvil pequeño (iPhone SE, Galaxy A)
     600px  — Móvil grande / phablet
     768px  — Tablet portrait · quiebre principal
     900px  — Tablet landscape / desktop pequeño
    1200px  — Desktop grande

   Orientación landscape:
     (max-height: 500px) and (max-width: 899px) and (orientation: landscape)
     Acotado a dispositivos móviles — excluye escritorio con DevTools abierto.

   Autor: Antigravity / CITEM DS 2026
   ========================================================================= */


/* =========================================================================
   §1 · CONTAINER — Padding lateral adaptativo
   El container base usa --spacing-md (32px) a cada lado.
   En móvil eso consume ~17% del viewport en un iPhone SE (375px).
   ========================================================================= */

@media (max-width: 599px) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}


/* =========================================================================
   §2 · HERO VIEWPORT — Split 50/50 → columna apilada en móvil
   ========================================================================= */

/* ── 2.1 Stacked vertical (< 768px) ── */
@media (max-width: 767px) {

    /* height: auto + min-height permite que el contenido crezca
       si supera el viewport, evitando overflow oculto. */
    .hero-viewport {
        height: auto;
        min-height: calc(100svh - var(--nav-height));
    }

    /* hero-main: compacto, no compite por espacio con el CTA */
    .hero-main {
        flex: 0 0 auto;
        padding: var(--spacing-md) 0;
        /* border-right solo existe en min-width: 768px (global.css) —
           este borde separa los paneles en stacked */
        border-bottom: var(--border-weight) solid var(--c-indigo);
    }

    /* hero-wordmark: reducido pero protagonista */
    .hero-wordmark {
        font-size: clamp(3rem, 18vw, 5.5rem);
        margin-bottom: var(--spacing-sm);
    }

    .hero-card-text {
        font-size: 1rem;
        max-width: 100%;
    }

    /* hero-aside: toma el espacio restante en hero-viewport */
    .hero-aside {
        padding: var(--spacing-md) 0 var(--spacing-lg);
    }

    .hero-ab-title {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
        letter-spacing: 0;
    }

    .hero-ab-sub {
        font-size: 0.95rem;
    }

    .hero-aside .microcopy {
        font-size: 0.7rem;
    }
}

/* ── 2.2 Móvil pequeño (≤ 479px) ── */
@media (max-width: 479px) {

    .hero-wordmark {
        font-size: clamp(2.8rem, 20vw, 4.5rem);
    }

    .hero-kicker {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}

/* ── 2.3 Landscape móvil ──
   Acotado a max-width: 899px para no afectar escritorios con ventana corta.
   En landscape, hero-viewport se libera de su altura y el hero-section
   mantiene el split horizontal nativo. */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {

    /* Bug fix: el min-height va en el viewport (el contenedor),
       no en el hero-section. El viewport controla la altura del bloque. */
    .hero-viewport {
        height: auto;
        min-height: 100svh;
    }

    .hero-main {
        padding: var(--spacing-sm) 0;
    }

    .hero-aside {
        padding: var(--spacing-sm) 0;
    }

    .hero-wordmark {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-bottom: var(--spacing-xs);
    }

    .hero-ab-title {
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        margin-bottom: var(--spacing-xs);
    }

    .hero-ab-sub {
        font-size: 0.85rem;
        margin-bottom: var(--spacing-sm);
    }

    .hero-kicker {
        font-size: 0.7rem;
        margin-bottom: var(--spacing-xs);
    }

    .hero-card-text {
        font-size: 0.9rem;
    }

    .marquee-container {
        padding: var(--spacing-xs) 0;
    }
}


/* =========================================================================
   §3 · S2 PROBLEM — Datos y pain cards
   ========================================================================= */

/* ── 3.1 Móvil ── */
@media (max-width: 767px) {

    .lp-problem-data {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .lp-problem-stat-num {
        font-size: clamp(3rem, 16vw, 5rem);
    }

    .lp-problem-stat-label {
        max-width: 100%;
        font-size: 0.9rem;
    }

    .lp-problem-lead {
        font-size: 1rem;
        line-height: 1.65;
    }

    .lp-pain-card {
        padding: var(--spacing-md);
    }

    .lp-problem-cta-block {
        padding-left: var(--spacing-sm);
    }

    .lp-problem-cta {
        font-size: 1rem;
    }
}

/* ── 3.2 Phablet (600–767px): 2 pain cards en fila ── */
@media (min-width: 600px) and (max-width: 767px) {

    .lp-pain-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 3.3 Tablet y desktop: 3 columnas ── */
@media (min-width: 768px) {

    .lp-pain-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================================
   §4 · S3 TOOLS — Las dos herramientas (tarjetas con imagen)
   ========================================================================= */

/* ── 4.1 Tablet portrait (768–899px) ──
   La columna fija de 430px desborda en iPad portrait (768px = 768px canvas).
   Se cambia a proporción relativa. */
@media (min-width: 768px) and (max-width: 899px) {

    .lp-tool-card {
        grid-template-columns: 1fr 0.7fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
}

/* ── 4.2 Móvil ── */
@media (max-width: 767px) {

    .lp-tools-statement {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
        padding-left: var(--spacing-sm);
    }

    .lp-tool-num {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    /* Bug fix: sin este override, el grid base 1fr/430px causa
       desbordamiento horizontal en cualquier móvil. */
    .lp-tool-card {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .lp-tool-card h3 {
        font-size: 1.05rem;
    }

    .lp-tool-desc {
        font-size: 0.95rem;
    }

    .lp-tools-bonus {
        font-size: 0.95rem;
        padding-left: var(--spacing-sm);
    }

    .lp-tools-preview {
        margin: var(--spacing-md) 0 0;
    }
}

/* ── 4.3 Móvil pequeño ── */
@media (max-width: 479px) {

    .lp-tool-features li {
        font-size: 0.875rem;
    }
}

/* ── 4.4 Desktop grande ── */
@media (min-width: 1200px) {

    /* Permite que la columna de imagen respire más en pantallas anchas */
    .lp-tool-card {
        grid-template-columns: 1fr 460px;
    }
}


/* =========================================================================
   §5 · S4 STEPS — Cómo funciona
   ========================================================================= */

/* ── 5.1 Móvil ── */
@media (max-width: 767px) {

    .lp-steps-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
        line-height: 0.9;
    }

    /* Columna de número: de 120px → 80px */
    .ab-step {
        grid-template-columns: 80px 1fr;
        min-height: 90px;
    }

    .ab-step-left {
        padding: var(--spacing-sm);
    }

    .ab-step-num {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .ab-step-right {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .ab-step-title {
        font-size: 0.9rem;
    }

    .ab-step-desc {
        font-size: 0.9rem;
        max-width: 100%;
    }
}

/* ── 5.2 Móvil pequeño ── */
@media (max-width: 479px) {

    .ab-step {
        grid-template-columns: 64px 1fr;
        min-height: 80px;
    }

    .ab-step-num {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }
}


/* =========================================================================
   §6 · S5 IA — Sección de inteligencia artificial
   ========================================================================= */

/* ── 6.1 Móvil ── */
@media (max-width: 767px) {

    .lp-ia h2 {
        font-size: clamp(1.4rem, 5vw, 2rem);
        line-height: 1.2;
    }

    .lp-ia-lead {
        font-size: 1rem;
    }

    /* Columna dash "—": de 120px → 72px */
    .lp-ia-row {
        grid-template-columns: 72px 1fr;
        min-height: 90px;
    }

    .lp-ia-row-left {
        padding: var(--spacing-sm);
    }

    .lp-ia-num,
    .lp-ia-dash {
        font-size: clamp(1.6rem, 6vw, 2.5rem);
    }

    .lp-ia-row-right {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .lp-ia-row-right h3 {
        font-size: 0.9rem;
    }

    .lp-ia-row-right p {
        font-size: 0.9rem;
        max-width: 100%;
    }
}

/* ── 6.2 Móvil pequeño ── */
@media (max-width: 479px) {

    .lp-ia-row {
        grid-template-columns: 56px 1fr;
    }

    .lp-ia-num,
    .lp-ia-dash {
        font-size: 1.5rem;
    }
}


/* =========================================================================
   §7 · S6 FILTERS — Tabla de taxonomía
   El grid base de .lp-frow es: 3rem / 14rem / 1fr
   En móvil, 14rem para el nombre es excesivo — colapsa a 2 columnas.
   ========================================================================= */

@media (max-width: 767px) {

    .lp-frow {
        grid-template-columns: 2.5rem 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm) var(--spacing-md);
    }

    /* nombre: col 2, fila 1 */
    .lp-fname {
        grid-column: 2;
        grid-row: 1;
    }

    /* pills: col 2, fila 2 */
    .lp-fpills {
        grid-column: 2;
        grid-row: 2;
    }

    .lp-filters-title {
        font-size: clamp(1.4rem, 5vw, 2.2rem);
    }

    .lp-filters-lead {
        font-size: 0.9rem;
    }

    .lp-filters-header {
        margin-bottom: var(--spacing-lg);
    }
}

/* ── 7.2 Móvil pequeño ── */
@media (max-width: 479px) {

    .lp-frow {
        grid-template-columns: 1.75rem 1fr;
        /* Bug fix: era 1rem hardcoded. Reemplazado con token. */
        padding: var(--spacing-sm) 0;
        gap: var(--spacing-xs) var(--spacing-sm);
    }

    .lp-findex {
        font-size: 0.6rem;
    }

    .lp-fname {
        font-size: 0.7rem;
    }

    .pill {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }
}


/* =========================================================================
   §8 · S7 QAB — ¿Qué es un Audition Book?
   Grid asimétrico 5fr/4fr → columna única en móvil.
   Borde vertical (qab-left) → borde inferior para mantener separación.
   ========================================================================= */

@media (max-width: 767px) {

    .qab-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Borde vertical → inferior al colapsar */
    .qab-left {
        border-right: none;
        padding-right: 0;
        border-bottom: var(--border-w-structural) solid rgb(var(--c-carbon-rgb) / 0.12);
        padding-bottom: var(--spacing-lg);
        gap: var(--spacing-sm);
    }

    .qab-section {
        padding: var(--spacing-lg) 0;
    }

    .qab-title {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .qab-kicker {
        font-size: 0.65rem;
    }

    .qab-def p {
        font-size: 0.9rem;
    }

    .qab-pull {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .qab-pull p {
        font-size: 0.95rem;
    }

    .qab-context {
        font-size: 0.95rem;
    }
}

@media (max-width: 479px) {

    .qab-def {
        padding-left: var(--spacing-sm);
    }
}


/* =========================================================================
   §9 · S8 CTA FINAL — Cierre de conversión
   ========================================================================= */

@media (max-width: 767px) {

    .cta-final-section h2 {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }

    .cta-final-section .cta-detail {
        font-size: 0.95rem;
    }

    .cta-final-section .cta-refuerzo {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    /* Con max-width: 100% el formulario ocupa el ancho disponible.
       Los márgenes auto no tienen efecto — no necesitan override explícito. */
    .cta-form {
        max-width: 100%;
    }
}

@media (max-width: 479px) {

    .cta-final-section h2 {
        font-size: clamp(1.6rem, 9vw, 2.5rem);
    }
}


/* =========================================================================
   §10 · TABLET INTERMEDIA (768–899px) — Zona gris
   El hero split horizontal funciona pero los containers quedan ajustados.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 899px) {

    .hero-main .container,
    .hero-aside .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .hero-ab-title {
        font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    }

    .ab-step-right {
        padding-right: var(--spacing-md);
    }

    .lp-ia-row-right {
        padding-right: var(--spacing-md);
    }
}


/* =========================================================================
   §11 · DESKTOP GRANDE (≥ 1200px)
   El max-width del lead IA y los ajustes de tool-card se gestionan
   aquí para no sobrecargar los estilos base con reglas de contexto.
   ========================================================================= */

@media (min-width: 1200px) {

    .lp-ia h2 {
        max-width: 720px;
    }
}


/* =========================================================================
   §12 · ACCESIBILIDAD — prefers-reduced-motion (landing-specific)
   global.css cubre nav/footer/hero. Aquí solo componentes propios del landing.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    .ab-step,
    .lp-ia-row {
        transition: none !important;
    }

    /* La clase .animate es manejada por JS (IntersectionObserver).
       Garantizamos visibilidad sin depender de la animación de entrada. */
    .animate {
        opacity: 1 !important;
        transform: none !important;
    }
}