/* =============================================================================
   MÓVIL — correcciones de responsividad
   -----------------------------------------------------------------------------
   Este archivo carga DESPUÉS de styles / animations / premium / realce, y esa
   es toda su razón de ser: varias reglas móviles de styles.css estaban muertas
   porque premium.css y realce.css las pisaban con la misma especificidad sin
   media query propia. En vez de desenredar cuatro archivos y arriesgar el
   escritorio (que se ve bien), las correcciones de teléfono viven aquí, juntas
   y explicadas.

   Regla de oro al editar: todo lo de aquí va dentro de un @media. Nada debe
   tocar el escritorio.

   Anchos de referencia (los que de verdad usa la gente en México):
     360px  Android de gama media — el más común
     375px  iPhone SE / 8 / X / 12 mini / 13 mini
     390px  iPhone 12 / 13 / 14
     414px  iPhone Plus / Pro Max
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. TIPOGRAFÍA DE FORMULARIO — evita el zoom automático de iOS
   -----------------------------------------------------------------------------
   Safari en iPhone hace zoom sobre cualquier campo con font-size < 16px, y la
   página se queda acercada. Los controles de formulario NO heredan el tamaño
   del body, y styles.css nunca les dio uno: quedaban en el ~13.3px del
   navegador. Tocar "Nombre" acercaba todo el sitio.

   Va sin media query a propósito: 16px es correcto también en escritorio.
   ──────────────────────────────────────────────────────────────────────────── */
.form-group input,
.form-group textarea,
.form-group select {
    font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ALTURA DE LA BARRA — una sola fuente de verdad
   -----------------------------------------------------------------------------
   La navbar mide 73px reales en móvil (padding .85rem×2 + logo 46px), pero el
   hero usaba margin-top:60px y el menú desplegable top:66px. Resultado: el hero
   quedaba 13px debajo de la barra y el menú dejaba una costura visible.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    --nav-alto-movil: 74px;
}

@media (max-width: 768px) {

    /* ─────────────────────────────────────────────────────────────────────────
       3. HERO — logo que cabe y alto que no salta
       ─────────────────────────────────────────────────────────────────────── */

    /* El logo mide 360×138px de origen. realce.css lo dejaba en max-height:158
       (mayor que su alto real), así que se pintaba a tamaño natural: 360px de
       ancho dentro de un contenedor de ~315px. Se salía y `overflow:hidden` lo
       cortaba en silencio — por eso el león se veía mordido a la derecha.
       `!important` es necesario para ganarle al !important de realce.css:14. */
    .hero-logo {
        max-width: 100% !important;
        max-height: 92px !important;
        height: auto !important;
        width: auto !important;
    }

    /* 100vh en móvil es el viewport SIN la barra de direcciones, así que al
       cargar el hero es ~90px más alto que lo visible y, al ir centrado, empuja
       el contenido hacia abajo dejando los botones bajo el pliegue. 100svh es
       la altura pequeña garantizada: no salta cuando aparece o desaparece la
       barra del navegador. */
    .hero-section {
        margin-top: var(--nav-alto-movil);
    }

    .nav-menu {
        top: var(--nav-alto-movil);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       4. BLANCOS TÁCTILES — mínimo 44px
       -----------------------------------------------------------------------
       44px es el mínimo cómodo para un dedo. Debajo de eso la gente falla el
       toque y lo intenta dos o tres veces.
       ─────────────────────────────────────────────────────────────────────── */

    /* El botón más usado del sitio en móvil medía 25×19px. */
    .menu-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* El JS ya hacía toggle('active') pero NINGÚN css definía ese estado: la
       hamburguesa nunca se convertía en X y no había señal de que el menú
       estuviera abierto. */
    .menu-toggle span {
        transition: transform 0.28s ease, opacity 0.2s ease;
    }
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Los enlaces del menú solo recibían padding por debajo de 480px: entre 481
       y 768 (plegables y phablets) eran filas de ~26px. */
    .nav-menu .nav-link {
        display: block;
        padding: 0.85rem 0;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       5. PRODUCTOS — de 10,700px de scroll a algo navegable
       -----------------------------------------------------------------------
       `repeat(auto-fill, minmax(150px,1fr))` con gap 16 necesita 376px para dar
       dos columnas. A 375 y a 360 daba UNA: 21 tarjetas de 471px de alto = casi
       11,000px, unas 13 pantallas de scroll solo en esta sección. Forzar dos
       columnas y bajar la imagen a 4:3 la deja en ~3,600px.
       ─────────────────────────────────────────────────────────────────────── */
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .product-img {
        aspect-ratio: 4 / 3;
    }

    /* Tarjetas que el "ver más" mantiene guardadas. Clase propia y no
       `is-hidden` a propósito: esa la usan los filtros, y mezclarlas haría que
       expandir la lista reviviera productos que el filtro había descartado. */
    .product-card.mas-oculto {
        display: none;
    }

    .products-more {
        display: block;
        width: 100%;
        margin: 1.5rem auto 0;
        padding: 14px 20px;
    }

    /* Los 8 filtros de categoría ocupaban 4 filas apiladas (~205px). Como tira
       deslizable ocupan una sola y además hacen evidente que hay categorías.
       Los márgenes negativos permiten que la tira sangre hasta el borde de la
       pantalla, que es como se espera que se sienta en un teléfono. */
    .product-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin: 1.4rem -16px 1.6rem;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }
    .product-filters::-webkit-scrollbar {
        display: none;
    }
    .prod-filter {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 11px 18px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       6. AIRE VERTICAL — recuperar 680px de scroll muerto
       -----------------------------------------------------------------------
       styles.css reduce el padding de sección a 56/40 en móvil, pero premium.css
       carga después y se lo devuelve a 80/90 en estas cuatro, sin media query.
       Misma especificidad, gana el archivo posterior: la regla móvil estaba
       muerta y cada sección cargaba 170px de aire de escritorio.
       ─────────────────────────────────────────────────────────────────────── */
    .productos-section,
    .cobertura-section,
    .camaras-section,
    .testimonios-section {
        padding-top: 56px;
        padding-bottom: 48px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       7. TESTIMONIOS — flechas que no tapen la cita
       -----------------------------------------------------------------------
       Las flechas iban centradas verticalmente a los lados y se encimaban ~28px
       por lado sobre las líneas centrales del testimonio. Abajo no estorban, y
       de paso suben de 42 a 44px. El swipe táctil ya existía, así que las
       flechas son un extra, no el único camino.
       ─────────────────────────────────────────────────────────────────────── */
    .glass-slider-arrow {
        top: auto;
        bottom: 10px;
        transform: none;
        width: 44px;
        height: 44px;
    }
    .glass-slider-arrow:hover {
        transform: none;
    }
    .glass-slider-arrow.prev {
        left: 12px;
    }
    .glass-slider-arrow.next {
        right: 12px;
    }
    .glass-slider-dots {
        padding: 1.2rem 60px 1.6rem;
    }

    /* Los puntos medían 11×11px: casi imposible atinarles. Se les da un área de
       toque de 44px con padding sin cambiar el punto visual. */
    .glass-dot {
        padding: 16px;
        background-clip: content-box;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       8. CIFRAS — dos columnas en vez de cuatro filas
       -----------------------------------------------------------------------
       `minmax(180px,1fr)` daba UNA columna: cuatro números sueltos ocupando
       media pantalla cada uno.
       ─────────────────────────────────────────────────────────────────────── */
    .stats-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .stat-card {
        padding: 1.2rem 0.8rem;
    }

    /* Cerrar el modal es de las pocas salidas que tiene el usuario: 34×38px era
       muy poco. */
    .modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/* En escritorio el botón nunca aparece: caben 4 por fila y esconder productos
   solo estorbaría. `hidden` lo oculta por defecto; esto lo refuerza por si
   alguna regla de `.btn` lo pisara. */
@media (min-width: 769px) {
    .products-more {
        display: none !important;
    }
}

/* `100svh` solo donde el navegador lo entiende; si no, se queda con lo que
   traía. Va fuera del bloque anterior porque @supports no anida hacia arriba. */
@supports (height: 100svh) {
    @media (max-width: 768px) {
        .hero-section {
            min-height: 100svh;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. LEGIBILIDAD EN PANTALLAS CHICAS
   -----------------------------------------------------------------------------
   Siete estilos quedaban por debajo de 14px sin ningún ajuste móvil. El peor
   era el badge de las cintas ("Popular", "Recomendado") a 8.96px CON
   mayúsculas: prácticamente ilegible.

   Y el espaciado entre letras: body lleva 0.3px global, los títulos de sección
   1.5px + word-spacing, y el del hero 2px. En 315px de ancho útil eso convierte
   cada título en tres líneas.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    body {
        letter-spacing: 0.15px;
    }

    .section-title {
        letter-spacing: 0.5px;
        word-spacing: normal;
    }

    .hero-title {
        letter-spacing: 0.5px;
    }

    .ribbon-box .badge {
        font-size: 0.66rem;
    }

    .product-cat {
        font-size: 0.72rem;
    }

    /* Es el texto del botón de WhatsApp, que aparece 23 veces en la página. */
    .btn-product {
        font-size: 0.88rem;
    }

    .camera-tag {
        font-size: 0.78rem;
    }

    .zona-tipo,
    .zona-nota,
    .zona-promo span {
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }

    /* La cita más larga da 6 líneas a 360px y se cortaba contra el
       min-height:400px del contenedor, que recorta por overflow. */
    .glass-slider-viewport {
        min-height: 470px;
    }
}