/* ==============================================================================
   ARCHIVO UNIFICADO DE RESPONSIVIDAD: responsive-resolutions.css
   Adaptable a Celulares, Tablets, Laptops y Pantallas Ultra-Wide / 4K
   ============================================================================== */

/* ==============================================================================
   1. PANTALLAS GRANDES, ULTRA-WIDE Y 4K (min-width: 1920px)
   ============================================================================== */
@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;
    }
}

/* ==============================================================================
   2. LAPTOPS Y MONITORES MEDIANOS (max-width: 1200px)
   ============================================================================== */
@media screen and (max-width: 1200px) {
    /* Conversión de grids complejos a una columna fluida */
    .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 {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    /* Reducción de columnas múltiples a 2 en elementos de tienda/servicios */
    .productos-grid-4col,
    .servicios-grid,
    .ventajas-grid,
    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Posicionamiento relativo para elementos flotantes o absolutos que desbordan */
    .collage-derecha-contenedor,
    .wrapper-foto-badge,
    .col-foto-tecnico,
    .col-certificado-card {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 20px auto !important;
    }
}

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

    /* Reestructuración de tarjetas y cuadrículas a 2 columnas */
    .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-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    /* Ajuste de tipografías principales */
    .hero-left-content h1,
    .hero-servicios-content h1,
    .titulo-principal-hero,
    .titulo-clientes,
    .titulo-paso,
    .cta-titulo,
    .titulo-credito {
        font-size: 2.5rem !important;
    }

    /* Liberación de alturas fijas en secciones de pantalla completa (vh) */
    .hero-presentacion,
    .clientes-section,
    .red-franquicias-section,
    .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,
    .uvc-seccion,
    .lavado-seccion {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 40px 20px !important;
    }

    /* Adaptación de barras inferiores y footers oscuros a columnas apiladas */
    .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;
    }
}

/* ==============================================================================
   4. MÓVILES GRANDES Y TABLETS VERTICALES (max-width: 768px)
   ============================================================================== */
@media screen and (max-width: 768px) {
    /* Forzar diseño de 1 sola columna en todos los grids principales */
    .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-template-columns: 1fr !important;
    }

    /* Comportamiento del Header y Menú Hamburguesa */
    .main-header-orange {
        padding: 12px 20px;
    }

    .nav-menu {
        display: none !important;
    }

    .hamburger-btn {
        display: flex !important;
    }

    /* Títulos y botones adaptados a ancho completo */
    .hero-content-box h1,
    .hero-left-content h1 {
        font-size: 2rem !important;
    }

    .hero-buttons,
    .hero-action-buttons,
    .transformar-actions,
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-orange-primary,
    .btn-orange-outline,
    .btn-orange-hero {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==============================================================================
   5. 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 {
        padding: 15px 10px;
    }

    .hero-video-fullscreen {
        height: auto;
        min-height: 100vh;
        padding: 80px 15px;
    }
}

/* ==============================================================================
   6. MONITORES DE ALTURA REDUCIDA O ESCALADO ALTO DE WINDOWS (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;
    }
}