/* =========================================================
   García Recta Design — mobile-landing.css
   Dirección de arte específica para MOBILE de la landing.
   Se carga DESPUÉS de responsive.css. TODO el contenido vive
   dentro de @media — cero reglas sueltas que puedan tocar
   desktop. Ninguna animación se desactiva acá: solo se ajustan
   tamaños, composición y ritmo. (prefers-reduced-motion sigue
   siendo la única vía para reducir movimiento, en animations.css.)
   ========================================================= */

/* Utilidad — clases nuevas, no tocan nada existente */
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: block; } }

@media (max-width: 768px) {

    /* ---------- Frenar cualquier overflow horizontal de la página ----------
       El track de "Proyectos" mide más ancho que la pantalla A PROPÓSITO
       (para poder deslizarse) — pero eso nunca debe arrastrar a la página
       entera hacia el costado. .h-track sigue scrolleando internamente
       gracias a su propio overflow-x:auto (definido en responsive.css);
       esto solo evita que el <body> se corra si algo se escapa. */
    html, body { max-width: 100vw; overflow-x: hidden; }

    /* ---------- Escala de espaciado propia de mobile ----------
       Desktop usa hasta 150px entre secciones; en mobile eso es
       demasiado aire sin función. Escala más ajustada y deliberada. */
    :root { --section-y: clamp(46px, 13vw, 84px); }

    /* ---------- Botones: touch target cómodo ---------- */
    .pill { min-height: 48px; padding: 13px 24px; }
    .hero-cta-row { flex-direction: column; align-items: stretch; }
    .hero-cta-row .pill { justify-content: center; }

    /* ---------- Inputs: 16px mínimo para que iOS no haga zoom
       automático al enfocar un campo (detalle fino pero importante) ---------- */
    .field input, .field textarea { font-size: 16px; }

    /* ---------- HERO: portada cinematográfica vertical ---------- */
    .hero { min-height: 100svh; align-items: center; }
    .hero .bg-cover { object-position: center 32%; }
    .hero-content { padding-bottom: 0; text-align: left; }
    .hero-eyebrow { font-size: 11px; letter-spacing: 2px; margin-bottom: 16px; }
    .hero-title .line span { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1.02; }
    .hero-sub { font-size: 15px; max-width: 100%; margin-top: 18px; }
    .scroll-hint { bottom: 18px; }

    /* ---------- Marca: menos aire, mismo impacto ---------- */
    .marca-title { font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.16; }
    .marca-text { font-size: 14.5px; margin-top: 22px; }

    /* ---------- Stats ---------- */
    .stat-num { font-size: clamp(2.2rem, 14vw, 3rem); }

    /* ---------- Espacios: la narrativa vertical ya la resuelve el
       stack a 1 columna de responsive.css — acá solo se afina tipografía ---------- */
    .esp-label { font-size: 1.05rem; padding: 16px; }
    .espacios-title { font-size: clamp(1.5rem, 7vw, 2rem); }

    /* ---------- Producto (Rollkit/Plegakit): secuencia IMAGEN → TÍTULO → DESCRIPCIÓN → CTA ---------- */
    .producto-media { aspect-ratio: 4/3.4; margin-bottom: 4px; }
    .producto-title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .producto-specs { gap: 22px; }
    .spec-num { font-size: clamp(1.6rem, 8vw, 2rem); }

    /* ---------- Antes/Después: handle más grande para el dedo ---------- */
    .compare-handle::after { width: 52px; height: 52px; font-size: 20px; }
    .compare-title { font-size: clamp(1.5rem, 7vw, 2rem); }

    /* ---------- Sticky-showcase (Complementos): en mobile no hay
       sticky (ya lo resuelve responsive.css) — acá se pule el ritmo
       vertical para que cada item respire como bloque propio. */
    .sticky-item { padding: 30px 0 !important; }
    .sticky-item-title { font-size: clamp(1.4rem, 7vw, 1.8rem); }
    .sticky-media { border-radius: 3px; }

    /* ---------- Detalle de materiales: un poco más bajo en mobile ---------- */
    .detalle { height: 46vh; }
    .detalle-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }

    /* ---------- Proyectos (scroll horizontal): affordance de swipe +
       contador — el swipe nativo ya lo resuelve responsive.css,
       acá se agrega la señal visual de "esto se desliza". */
    .h-proyectos-sticky { padding: 50px 0 30px; }
    .h-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .h-slide { height: 42vh; }
    .h-swipe-hint {
        display: flex; align-items: center; gap: 8px; justify-content: center;
        margin-top: 14px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
        color: rgba(245,245,243,.5); opacity: 1; transition: opacity .4s ease;
    }
    .h-swipe-hint.faded { opacity: 0; }
    .h-swipe-hint svg { width: 14px; height: 14px; animation: swipeNudge 1.6s ease-in-out infinite; }
    @keyframes swipeNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
    .h-counter {
        text-align: center; margin-top: 10px; font-family: var(--font-display);
        font-size: 13px; color: rgba(245,245,243,.55);
    }
    .h-counter b { color: var(--red); font-weight: 600; }

    /* ---------- Showroom ---------- */
    .showroom-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .showroom-media { aspect-ratio: 4/3.2; }

    /* ---------- Proceso ---------- */
    .proceso-title { font-size: clamp(1.4rem, 7vw, 1.9rem); margin-bottom: 40px; }

    /* ---------- CTA final ---------- */
    .cta-final-title { font-size: clamp(2rem, 10vw, 2.8rem); }
    .form-wrap { margin-top: 40px; }

    /* ---------- Coordenadas y nav secundaria: ya ocultas por
       responsive.css/layout — sin cambios necesarios acá. ---------- */

    @media (prefers-reduced-motion: reduce) {
        .h-swipe-hint svg { animation: none; }
    }
}

/* ---------- Ajuste fino solo para los más chicos (360–390px) ---------- */
@media (max-width: 390px) {
    .hero-title .line span { font-size: 2.15rem; }
    .cta-final-title { font-size: 1.9rem; }
}

/* ---------- Landscape mobile: evitar que el hero se sienta apretado ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .hero { min-height: 100vh; align-items: flex-end; }
    .hero-content { padding-bottom: 24px; }
    .hero-title .line span { font-size: 1.8rem; }
    .scroll-hint { display: none; }
}