/* =================================================================== */
/* === ESTILOS RESPONSIVOS GLOBALES (MOBILE-FIRST) =================== */
/* =================================================================== */

/*
  Este archivo unifica todos los estilos para dispositivos móviles.
  La estrategia principal es revertir el scroll de página completa de las
  páginas de servicio a un scroll vertical natural en pantallas pequeñas,
  creando una experiencia de usuario completamente adaptada.
*/

/* --- Media Query Principal para Tablets y Móviles --- */
@media (max-width: 992px) {

    /* =================================================================== */
    /* 1. Anulaciones Globales y de Comportamiento
    /* =================================================================== */

    /* LA MODIFICACIÓN CLAVE: Deshabilitar el scroll de página completa */
    body.digital-sales-page {
        overflow: auto !important; /* Permitir scroll natural */
    }

    .page-wrapper {
        height: auto;
        overflow: visible;
    }

    /* Las secciones de servicio ahora fluyen verticalmente */
    .page-section {
        position: relative;
        height: auto;
        transform: none !important;
        opacity: 1 !important;
        padding: 4rem 1.5rem;
    }
    
    .page-section:first-of-type {
        padding-top: 6rem; /* Espacio para el header fijo */
    }

    /* Ocultar elementos de UI de escritorio */
    .pagination-dots,
    .service-nav-arrow,
    .scrollbar-container,
    .scroll-navigator-arrow,
    .scroll-navigator-arrow-about,
    .scroll-navigator-arrow-help {
        display: none;
    }

    /* =================================================================== */
    /* 2. Header y Navegación
    /* =================================================================== */
    
    .sticky-header { padding: 0.8rem 1rem; }
    .main-header { padding: 1rem 1rem; }
    .sticky-nav { display: none; }
    .menu-button .menu-text { display: none; }
    .menu-button { padding-left: 0.6rem; }
    .overlay-nav a { font-size: 2.5rem; }

    /* =================================================================== */
    /* 3. Página Principal (index.html)
    /* =================================================================== */

    .hero-content-wrapper { padding: 0 1.5rem 8rem 1.5rem; align-items: center; text-align: center; }
    .hero-text h1 { font-size: 1.8rem; }
    .statement-section h2 { font-size: 2.2rem; line-height: 1.2; }
    .statement-section p { font-size: 1.2rem; }
    .final-statement-section h3 { font-size: 1.5rem; }

    #contenedor-vision-grid { flex-direction: column; }
    #contenedor-vision-grid .col-lg-7,
    #contenedor-vision-grid .col-lg-5 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .vision-image-pane { min-height: 300px; margin-bottom: 2rem; }
    .vision-content-pane { padding: 0 1rem; }

    /*
    ===================================================================
    === INICIO DE LA CORRECCIÓN DEL BANNER DE VIDEO MÓVIL =============
    ===================================================================
    El siguiente bloque se ha comentado para permitir que el video se
    muestre en dispositivos móviles, tal como se solicitó.
    */

    /*
    .hero-section .banner-video {
        display: none;
    }
    .hero-section {
        background: url('/img/portfolio/office.jpg') no-repeat center center/cover;
    }
    */
    /* === FIN DE LA CORRECCIÓN ======================================== */


    /* =================================================================== */
    /* 4. Páginas de Contenido (About, Who We Help, OOTB)
    /* =================================================================== */

    .about-page-container, .ootb-page-container, .whw-v2-container { padding-top: 100px; padding-left: 1rem; padding-right: 1rem; }
    .about-page-title, .ootb-page-title, .whw-hero h1 { font-size: 2.2rem; }
    .section-heading { font-size: 1.6rem; }
    .split-section-container .image-pane { min-height: 300px; order: -1; }
    .split-section-container .content-pane { padding: 2.5rem 1.5rem; }
    .why-us-grid { grid-template-columns: 1fr; }

    /* =================================================================== */
    /* 5. Páginas de Servicios (Digital Sales, Infopreneurs, etc.)
    /* =================================================================== */
    
    .split-section-container { grid-template-columns: 1fr; }
    .page-section .image-pane { height: 45vh; min-height: 300px; width: 100%; }
    .page-section .content-pane { height: auto; padding: 2.5rem 1.5rem; overflow-y: visible; }
    .image-pane::after { background: linear-gradient(to top, #000 0%, transparent 50%); }
    .info-layout-alternate .content-pane { order: initial; }
    .info-layout-alternate .image-pane::after { background: linear-gradient(to top, #000 0%, transparent 50%); }

    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1.1rem; }
    .content-heading { font-size: 1.6rem; }
    .full-bleed-content { padding: 2rem 1.5rem; width: 100%; }
    .tech-arsenal-grid { grid-template-columns: 1fr; }
    
    /* =================================================================== */
    /* 6. Página de Contacto
    /* =================================================================== */
    
    .contact-container { padding: 2.5rem 1.5rem; }
    .contact-title { font-size: 2.2rem; }
    .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
    
    /* =================================================================== */
    /* 7. Footer (Global)
    /* =================================================================== */

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col { align-items: center; margin-bottom: 2rem; }
    .footer-col:last-child { margin-bottom: 0; }

    /* =================================================================== */
    /* 8. Carrusel de Clientes (Ajuste opcional de tamaño)
    /* =================================================================== */
    .carousel-track img {
        height: 80px; /* Un tamaño más adecuado para móviles */
    }
    .carousel-track {
        gap: 2.5rem; /* Menos espacio entre logos */
    }
}

/* --- Media Query para Móviles Pequeños --- */
@media (max-width: 480px) {
    .overlay-nav a { font-size: 1.8rem; }
    .section-title, .hero-text h1 { font-size: 1.8rem; }
    .content-heading { font-size: 1.4rem; }
    .page-section { padding: 3rem 1rem; }
    .page-section:first-of-type { padding-top: 5rem; }

    /* Botón de WhatsApp simplificado */
    .whatsapp-fab span { display: none; }
    .whatsapp-fab { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
    .whatsapp-fab i { font-size: 28px; margin: 0; }
}