/* =========================================
   MEDIA QUERIES (Tablets y Móviles) - CORRECCIÓN TOTAL
   ========================================= */

/* Regla de oro para evitar desbordes */
*, *::before, *::after {
    box-sizing: border-box !important;
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* --- Ajustes para Tablets --- */
@media (max-width: 992px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .hero-content h1 { font-size: 2.8rem !important; }
    /* Apila el contacto y el "Somos" en tablets */
    .contact-wrapper, .about-wrapper { grid-template-columns: 1fr !important; gap: 40px; }
}

/* --- Ajustes para Teléfonos Móviles --- */
@media (max-width: 768px) {
    
    /* 1. Header y Navegación (ESTILO APP DESLIZABLE) */
    .nav-container { 
        flex-direction: column; 
        padding: 15px 10px 5px; 
        gap: 10px; 
        height: auto;
    }
    
    .main-nav { width: 100%; }
    
    .main-nav ul { 
        flex-direction: row !important; /* Obliga a estar en horizontal */
        justify-content: flex-start !important; 
        overflow-x: auto; /* Permite deslizar con el dedo */
        white-space: nowrap; /* Evita que el texto baje de línea */
        padding-bottom: 5px; 
        gap: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Oculta la barra en Firefox */
    }
    
    .main-nav ul::-webkit-scrollbar { 
        display: none; /* Oculta la barra de scroll en Chrome/Safari/iOS */
    }
    
    .nav-cta { display: none; }

    /* 2. Hero (Portada) */
    .hero { min-height: auto; padding: 80px 0 100px; }
    .hero-content h1 { font-size: 2rem !important; }
    .hero-subtitle { font-size: 1rem !important; }
    .hero-actions { flex-direction: column; gap: 15px; }
    .hero-actions .btn { width: 100%; }

    /* 3. Cotizador Flotante */
    .quote-bar-wrapper { margin-top: -40px; padding: 0 15px; }
    .quote-form-bar { flex-direction: column; padding: 20px; gap: 10px; width: 100%; }
    .quote-form-bar select, .quote-form-bar input, .btn-cotizar { width: 100%; }

    /* 4. Barra de Confianza */
    .trust-bar { margin-top: 20px !important; margin-left: 15px; margin-right: 15px; padding: 20px 10px; width: calc(100% - 30px); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; font-size: 0.85rem; }
    .trust-item span { font-size: 1.5rem !important; }

    /* 5. SECCIÓN "SOMOS ECOADVENTOURX" (NUEVA REPARACIÓN) */
    .about-wrapper { 
        display: flex !important; 
        flex-direction: column-reverse; /* Pone el texto arriba y el collage abajo */
        gap: 30px !important; 
        padding: 0 15px;
        margin: 40px 0 !important;
    }
    
    .about-text h2 { font-size: 2rem !important; }
    .about-collage { gap: 10px !important; width: 100%; }
    .about-img { border-radius: 12px !important; } /* Bordes más estéticos en móvil */

    /* 6. Grillas generales a 1 columna */
    .grid-3, .grid-4, .footer-grid, .stats-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .stats-grid h3 { font-size: 2.2rem !important; }
    .section-title h2 { font-size: 1.8rem; }
    .section { padding: 50px 0; }

    /* 7. Formulario de Contacto y Video */
    .contact-form-container { padding: 25px 15px !important; width: 100%; }
    .contact-form input, .contact-form textarea { padding: 12px 15px; width: 100%; }
    .video-wrapper { padding: 0 15px; border-radius: 12px; }
    
    img, iframe, video { max-width: 100%; }
}

/* --- Teléfonos muy pequeños --- */
@media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 1.6rem !important; }
}