/* ==============================================================================
   ARCHIVO UNIFICADO DE RESPONSIVIDAD: responsive-resolutions.css
   Estructurado por bloques y archivos para mayor control y orden
   ============================================================================== */

/* ==============================================================================
   BLOQUE 0: CONFIGURACIÓN GENERAL Y PANTALLAS ULTRA-WIDE / 4K
   ============================================================================== */
@media screen and (min-width: 1920px) {
    .hero-presentacion, 
    .clientes-section, 
    .red-franquicias-section,
    .industria-seccion, 
    .productos-seccion, 
    .uvc-seccion,
    .lavado-seccion, 
    .desinfeccion-seccion,
    .certificado-seccion,
    .modulo-ventas-seccion,
    .mercados-seccion,
    .sistema-seccion,
    .membresia-seccion,
    .ventaja-seccion,
    .credito-seccion,
    .seccion-cta-final {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==============================================================================
   BLOQUE 1: ADAPTACIÓN GENERAL (Laptops y Monitores Medianos - max-width: 1200px)
   ============================================================================== */
@media screen and (max-width: 1200px) {
    .industria-container,
    .red-grid-top,
    .productos-top-grid,
    .uvc-grid-principal,
    .lavado-grid-principal,
    .desinfeccion-grid-principal,
    .certificado-grid-main,
    .modulo-ventas-grid-main,
    .mercados-grid-main,
    .paquetes-grid-main,
    .membresia-grid-main,
    .ventaja-grid-main,
    .credito-grid-top,
    .cta-final-container,
    .container-hero,
    .container-diferencia,
    .hoteles-grid-main,
    .presencia-v2-grid,
    .container-mv-v2,
    .hero-servicios-content,
    .servicios-grid,
    .cotizacion-wrapper,
    .transformar-grid,
    .contacto-grid,
    .tecnologia-grid,
    .presencia-grid,
    .hoteleria-grid-plataforma,
    .trazabilidad-grid,
    .modelo-grid,
    .promo-banner-grid,
    .presencia-wrapper-grid,
    .testimonio-beneficios-grid,
    .slide-testimonio,
    .grid-form-crecer,
    .featured-grid,
    .hoteleria-grid-cta-form {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .productos-grid-4col,
    .servicios-grid,
    .ventajas-grid,
    .beneficios-grid,
    .grid-servicios-hoteleria,
    .grid-5-areas,
    .grid-4-planes,
    .grid-5-pasos,
    .grid-4-pilares,
    .grid-2col-reasons,
    .articles-grid,
    .grid-4-pilares-modelo,
    .grid-4-beneficios,
    .grid-5-pasos-franquicia,
    .diferencia-right-grid,
    .container-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .collage-derecha-contenedor,
    .wrapper-foto-badge,
    .col-foto-tecnico,
    .col-certificado-card,
    .col-textos,
    .presencia-text {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 20px auto !important;
    }
}


/* ==============================================================================
   BLOQUE 2: TABLETS Y DISPOSITIVOS MEDIANOS (max-width: 992px)
   ============================================================================== */
@media screen and (max-width: 992px) {
    body {
        font-size: 15px;
    }

    .propiedades-grid,
    .productos-grid-4col,
    .servicios-grid,
    .ventajas-grid,
    .beneficios-grid,
    .grid-9-productos,
    .grid-pilares-12,
    .paquetes-grid-main,
    .membresia-grid-main,
    .ventaja-grid-main,
    .grid-servicios-hoteleria,
    .grid-5-areas,
    .grid-4-planes,
    .grid-5-pasos,
    .grid-4-pilares,
    .grid-2col-reasons,
    .articles-grid,
    .grid-logos-hoteles,
    .hoteleria-grid-beneficios-huesped-4col,
    .hoteleria-grid-2col-beneficios,
    .grid-4-pilares-modelo,
    .grid-4-beneficios,
    .grid-5-pasos-franquicia,
    .inputs-grid-2x2,
    .container-stats,
    .diferencia-right-grid,
    .container-mv-v2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .seccion-malla-stats {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .seccion-diferencia {
        padding-top: 40px !important;
    }

    .banner-inferior-header, 
    .banner-inferior-clientes, 
    .banner-proposito, 
    .banner-inferior, 
    .banner-inferior-productos, 
    .banner-inferior-uvc, 
    .banner-inferior-lavado, 
    .grid-inferior-desinfeccion,
    .bar-footer-certificado,
    .bar-footer-kiosco,
    .bar-flujo-oportunidades,
    .bar-respaldo-inferior,
    .bar-footer-paquetes,
    .bar-footer-membresia,
    .bar-footer-ventaja,
    .bar-footer-credito,
    .main-footer {
        flex-direction: column !important;
        height: auto !important;
        padding: 20px !important;
        gap: 15px;
        text-align: center;
    }
}


/* ==============================================================================
   BLOQUE 3: MÓVILES GRANDES Y TABLETS VERTICALES (max-width: 768px)
   ============================================================================== */
@media screen and (max-width: 768px) {
    /* --- 3.1. GRIDS GENERALES A 1 COLUMNA --- */
    .productos-grid-4col,
    .servicios-grid,
    .ventajas-grid,
    .beneficios-grid,
    .grid-9-productos,
    .grid-pilares-12,
    .paquetes-grid-main,
    .membresia-grid-main,
    .ventaja-grid-main,
    .propiedades-grid,
    .paises-lista-grid,
    .grid-servicios-hoteleria,
    .grid-5-areas,
    .grid-4-planes,
    .grid-5-pasos,
    .grid-4-pilares,
    .grid-2col-reasons,
    .articles-grid,
    .grid-logos-hoteles,
    .hoteleria-hero-pilares,
    .hoteleria-grid-kpis,
    .hoteleria-grid-beneficios-huesped-4col,
    .hoteleria-grid-2col-beneficios,
    .grid-4-pilares-modelo,
    .grid-4-beneficios,
    .grid-5-pasos-franquicia,
    .inputs-grid-2x2,
    .grid-estadisticas,
    .container-hero,
    .container-stats,
    .container-diferencia,
    .diferencia-right-grid,
    .hoteles-grid-main,
    .hotel-img-grid,
    .presencia-v2-grid,
    .container-mv-v2 {
        grid-template-columns: 1fr !important;
    }

    /* --- 3.2. HEADER Y NAVEGACIÓN MÓVIL --- */
    .main-header-orange {
        padding: 12px 20px;
    }
    .nav-menu {
        display: none !important;
    }
    .hamburger-btn {
        display: flex !important;
    }

    /* --- 3.3. BLOQUE ESPECÍFICO: NOSOTROS (nosotros.css) --- */
    .nosotros-hero-v2 {
        padding: 40px 15px !important;
    }
    .hero-left-content h1 {
        font-size: 2.2rem !important; /* Ajustado para celulares */
        line-height: 1.15 !important;
        padding: 10px 0 !important;
    }
    .hero-left-content p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    .hero-video-box {
        height: 250px !important; /* Altura ideal para móviles */
    }
    .seccion-malla-stats {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding: 0 10px !important;
    }
    .container-stats-card {
        padding: 20px 10px !important;
    }
    .stat-card:not(:last-child)::after {
        display: none !important; /* Oculta divisores verticales */
    }
    .paises-flags-grid {
        gap: 20px !important;
        margin-top: 15px !important;
    }
    .mapa-globe-box {
        height: 300px !important;
    }
    .mv-card-v2 p {
        padding-left: 0 !important;
    }

    /* --- 3.4. BOTONES Y ACCIONES GENERALES --- */
    .hero-buttons,
    .hero-action-buttons,
    .transformar-actions,
    .cta-buttons,
    .hero-quimica-buttons,
    .hero-maquinaria-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-orange-primary,
    .btn-orange-outline,
    .btn-orange-hero,
    .btn-search-orange,
    .btn-submit-orange,
    .btn-modal-contactar {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* --- 3.5. MODALES Y FORMULARIOS --- */
    .form-hotel-card,
    .cart-modal-drawer,
    .servicio-modal-container,
    .modal-contacto-card,
    .modal-paquete-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
    .asesoria-content-grid,
    .solucion-header-grid,
    .tienda-title-row,
    .prefooter-grid {
        grid-template-columns: 1fr !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .prefooter-text-col {
        padding-left: 0 !important;
        text-align: center;
    }
}


/* ==============================================================================
   BLOQUE 4: MÓVILES PEQUEÑOS (max-width: 576px)
   ============================================================================== */
@media screen and (max-width: 576px) {
    body {
        font-size: 14px;
    }
    .container-stats-card,
    .card-inversion-box,
    .simulador-card-container,
    .strip-propiedades-card {
        padding: 15px 10px;
    }
    .hero-video-fullscreen,
    .hero-presentacion {
        height: auto;
        min-height: 100vh;
        padding: 80px 15px;
    }
}


/* ==============================================================================
   BLOQUE 5: PANTALLAS DE ALTURA REDUCIDA (max-height: 850px)
   ============================================================================== */
@media screen and (max-height: 850px) {
    section, 
    .hero-presentacion, 
    .clientes-section, 
    .red-franquicias-section, 
    .industria-seccion, 
    .productos-seccion, 
    .uvc-seccion, 
    .lavado-seccion, 
    .desinfeccion-seccion,
    .certificado-seccion,
    .modulo-ventas-seccion,
    .mercados-seccion,
    .sistema-seccion,
    .membresia-seccion,
    .ventaja-seccion,
    .credito-seccion,
    .seccion-cta-final {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ==============================================================================
       AJUSTES ESPECÍFICOS PARA LA SECCIÓN "NOSOTROS" EN MÓVILES
       ============================================================================== */
    .nosotros-hero-v2 {
        padding: 40px 15px !important;
    }

    .hero-left-content h1 {
        font-size: 2.3rem !important; /* Reduce el título gigante a una escala perfecta para celular */
        line-height: 1.15 !important;
        padding: 10px 0 !important;
    }

    .hero-left-content p {
        font-size: 1rem !important; /* Ajusta la descripción para una lectura cómoda */
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .hero-video-box {
        height: 250px !important; /* Da una altura proporcional al video en pantallas verticales */
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-buttons a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
/* --- 3.3.1. SECCIÓN PRESENCIA INTERNACIONAL (NOSOTROS) EN MÓVILES --- */
    .presencia-info-col h2 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }
    .presencia-v2-grid {
        grid-template-columns: 1fr !important;
    }
    .mapa-globe-box {
        height: 280px !important;
    }
    .paises-flags-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Organiza las banderas en 3 columnas limpias */
        gap: 15px !important;
        margin-top: 10px !important;
        padding-left: 0 !important;
    }
    .flag-item {
        width: 100% !important;
    }
    .presencia-stats-row {
        gap: 20px !important;
        justify-content: space-around;
    }
    
/* --- 3.4. BLOQUE ESPECÍFICO: SERVICIOS (servicios.css) --- */
    .hero-servicios {
        padding-top: 110px !important; /* Agrega espacio superior para separar el título del header */
    }
    .hero-text-side h1 {
        font-size: 2.3rem !important;
        line-height: 1.15 !important;
    }

/* --- 3.5. BLOQUE ESPECÍFICO: QUÍMICA (quimica.css) --- */
    .hero-quimica-v2 {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    .hero-quimica-left h1 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }
    .strip-propiedades-wrapper {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
    .strip-propiedades-card {
        padding: 15px !important;
    }
    .propiedades-grid {
        grid-template-columns: 1fr !important; /* Pone las propiedades en una sola columna limpia */
        gap: 15px !important;
    }
    .categorias-cards-grid {
        grid-template-columns: 1fr !important; /* Asegura que las categorías de química se adapten a una columna */
    }

/* --- 3.5.1. BLOQUE ESPECÍFICO: SECTORES Y TIENDA (quimica.css) --- */
    .sectores-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Organiza los sectores en 2 columnas limpias */
        gap: 10px !important;
    }
    .sector-card {
        height: 160px !important; /* Reduce la altura en celular para que no se alarguen de más */
    }
    .tienda-title-row,
    .tienda-actions-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .categorias-pills {
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important; /* Mantiene las píldoras de filtro en un desplazamiento horizontal suave */
        padding-bottom: 8px;
    }
    .cat-pill {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 0.9rem !important;
    }
    .productos-grid-4col {
        grid-template-columns: 1fr !important; /* Muestra los productos en 1 sola columna cómoda en celulares */
    }