/*
 * ============================================================================
 * OPTIMIZACIONES MÓVIL - CREAR Arquitectura & Desarrollos
 * ============================================================================
 * 
 * Este archivo contiene ajustes CSS exclusivos para dispositivos móviles.
 * NO modifica la versión desktop bajo ningún concepto.
 * 
 * Objetivo: Mejorar experiencia visual, legibilidad, jerarquía y usabilidad
 * táctil en pantallas pequeñas (≤768px).
 * 
 * IMPORTANTE: Todos los cambios están encapsulados en media queries mobile.
 * La versión desktop permanece intacta.
 * ============================================================================
 */


/* ============================================================================
   OPTIMIZACIONES PARA TABLETS Y MÓVILES (≤768px)
   ============================================================================ */

@media (max-width: 768px) {
    
    /* ========================================
       FIX CRÍTICO: SCROLL NATIVO MOBILE 
       SAFARI iOS VIEWPORT DINÁMICO
       ======================================== */
    
    /* 
     * 🔴 PROBLEMA RESUELTO:
     * Safari iOS tiene un viewport dinámico - la barra de direcciones 
     * aparece/desaparece al hacer scroll. Usar 100vh causa recálculos
     * constantes que provocan saltos de scroll.
     * 
     * SOLUCIÓN: Usar height: auto y evitar 100vh en html/body.
     * El contenido define naturalmente la altura del documento.
     */
    
    /* Reset completo de html para scroll nativo estable */
    html,
    html.lenis,
    html.lenis-smooth,
    html.lenis-scrolling,
    html.lenis-stopped {
        overflow-x: hidden !important;
        overflow-y: scroll !important; /* scroll fijo, no auto, evita recálculos */
        height: auto !important;
        min-height: auto !important; /* NO usar 100vh */
        scroll-behavior: auto !important; /* Evitar smooth que puede causar conflictos */
        -webkit-overflow-scrolling: touch !important; /* Scroll momentum nativo iOS */
        overscroll-behavior-y: none !important; /* Evita rebote que causa recálculos */
    }
    
    /* Reset completo de body para scroll nativo estable */
    body,
    html.lenis body,
    body.is-smooth-scroll-active,
    body.lenis,
    body.lenis-smooth {
        overflow-x: hidden !important;
        overflow-y: visible !important; /* visible, el scroll lo maneja html */
        height: auto !important;
        min-height: auto !important; /* NO usar 100vh - crítico para Safari iOS */
        position: static !important; /* static evita problemas con position fixed */
        transform: none !important; /* Asegurar que no hay transforms que afecten scroll */
        -webkit-transform: none !important;
    }
    
    /* Liberar contenedores para permitir scroll completo */
    body,
    main {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }
    
    /* ========================================
       HERO SECTION - Ajustes de proporciones
       ======================================== */
    
    .hero {
        min-height: 75vh; /* Hero más compacto en móvil */
    }
    
    .hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 75vh;
        padding-top: 80px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    /* Mejorar tamaños tipográficos del hero en móvil */

    .hero__subtitle {
        font-size: clamp(2rem, 7vw, 2.8rem);
        line-height: 1.18;
        margin-bottom: 0.3rem;
        text-align: center;
    }
    .hero__title {
        font-size: clamp(2.2rem, 7vw, 2.7rem);
        margin-top: 0.2rem;
        text-align: center;
    }
    .hero__content {
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }
    
    .hero__footer {
        position: absolute;
        bottom: 1.5rem;
        left: 0;
        right: 0;
        padding: 0 1.5rem;
        margin: 0;
    }
    
    
    /* ========================================
       NAVEGACIÓN - Optimización móvil
       ======================================== */
    
    .nav {
        padding: 1rem 1.2rem;
        position: absolute !important;
        z-index: 999 !important;
    }
    
    .nav__bar {
        gap: 0.5rem;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .nav__actions {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .nav__logo {
        height: 40px; /* Tamaño más cómodo para móvil */
        width: auto;
    }
    
    .nav__burger {
        width: 1.6rem;
        height: 1.2rem;
        gap: 4px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        z-index: 1001 !important;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .nav__burger span {
        height: 1.5px;
        width: 22px !important;
        display: block !important;
        background-color: #ffffff !important;
        border-radius: 999px;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    }
    
    .nav__divider {
        opacity: 0.6; /* Línea más sutil en móvil */
    }
    
    
    /* ========================================
       QUIENES SOMOS - Ajustes de espaciado
       ======================================== */
    
    .quienes {
        padding: 3rem 1.5rem;
        min-height: auto;
    }
    
    .quienes__container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .quienes__text-wrapper {
        padding: 1rem 0;
    }
    
    .quienes__title {
        font-size: clamp(2rem, 9vw, 3.5rem);
        margin-bottom: 1.5rem;
        letter-spacing: -0.02em;
    }
    
    /* ========================================
       NORMALIZACIÓN EDITORIAL MOBILE
       ======================================== */
    
    /* Ancho de párrafos: heredan del contenedor padre paddeado.
     * Se eliminó el ancho fijo 90vw para que respeten el padding lateral
     * unificado del sistema de layout (--content-padding-mobile). */
        .quienes__container .quienes__paragraph,
        .proyectos__title-container .quienes__paragraph {
            max-width: 100%;
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            box-sizing: border-box;
            display: block;
        }
        
        .proyectos__content .proyectos__text {
            max-width: 100%;
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            box-sizing: border-box;
            display: block;
        }
    
    /* Tamaños tipográficos específicos manteniendo el ancho común */
    .quienes__paragraph {
        font-size: clamp(1rem, 4.5vw, 1.4rem);
        line-height: 1.7 !important;
    }
    
    
    /* ========================================
       HERO IMAGE SECTION (Video entre secciones)
       ======================================== */
    
    .hero-image-section {
        margin-top: 0;
    }
    
    .hero-image-container {
        height: 50vh !important;
        min-height: 300px !important;
        max-height: 450px !important;
    }
    
    .hero-image-video {
        height: 100% !important;
        object-fit: cover !important;
    }
    
    
    /* ========================================
       PROYECTOS - Mejora de espaciado y legibilidad
       ======================================== */
    
    .proyectos {
        padding: 3rem 0 !important;
    }
    
    .proyectos__wrapper {
        padding: 0 var(--content-padding-mobile, 1.5rem) !important;
    }
    
    .proyectos__title-container {
        margin-bottom: 2rem;
    }
    
    /* Ocultar proyectos deshabilitados en mobile */
    .proyecto-card--disabled {
        display: none !important;
    }
    
    .proyectos__title-container--full-width {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ========================================
       PROYECTOS - REDISEÑO MOBILE COMPLETO
       ======================================== */
    
    /* Contenedor principal: cambiar a layout vertical */
    .proyectos__video-section {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
    }
    
    /* Bloque de imagen: separado del contenido */
    .proyectos__parallax-frame {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        min-height: 280px !important;
        flex-shrink: 0 !important;
    }
    
    .proyectos__parallax-img {
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Overlay de imagen más sutil */
    .proyectos__video-overlay {
        opacity: 0.4 !important;
    }
    
    /* Contenedor de contenido: bloque separado con fondo propio */
    .proyectos__video-section .proyectos__content,
    .proyectos__content[style] {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
        padding: 2.5rem 1.5rem 2.5rem 1.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
    
    /* Logo del proyecto */
    .proyectos__logo {
        max-width: 185px !important;
        width: 185px !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* Texto descriptivo: columna editorial mobile */
    .proyectos__video-section .proyectos__content .proyectos__text,
    .proyectos__content .proyectos__text {
        font-size: 1.3rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.8rem !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        color: #f0f0f0 !important;
        font-weight: 400 !important;
        letter-spacing: 0.01em !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: normal !important;
    }
    
    /* Botones: columna vertical con jerarquía clara */
    .proyectos__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    .proyectos__btn {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0.85em 1.5em !important;
        text-align: center !important;
        border-radius: 8px !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        background: transparent !important;
        color: #ffffff !important;
        transition: all 0.25s ease !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
    }
    
    .proyectos__btn:active {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(0.98) !important;
    }
    
    
    /* ========================================
       PROVEEDORES / WORK WITH US - Corrección completa mobile
       ======================================== */
    
    /* Sección principal: liberar overflow y altura */
    .proveedores {
        padding: 3rem 1.5rem !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Fondo parallax: contener dentro de la sección sin afectar scroll */
    .proveedores__bg-parallax {
        overflow: hidden !important;
    }
    
    .proveedores__container {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Layout: cambiar a columna simple sin grid de dos columnas */
    .proveedores__content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        overflow: visible !important;
        height: auto !important;
        align-items: stretch !important;
    }
    
    /* Bloque de texto: sin posicionamiento absoluto */
    .proveedores__text-wrapper {
        position: relative !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .proveedores__text-wrapper .quienes__title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .proveedores__intro {
        margin-top: 1.5rem !important;
    }
    
    .proveedores__subtitle {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        margin-bottom: 1rem !important;
    }
    
    .proveedores__description {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    /* Formulario: sin restricciones de altura, scroll libre */
    .proveedores__form-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 2rem 1.5rem !important;
        border-width: 1.5px !important;
        margin-top: 0 !important;
    }
    
    /* Elemento form sin restricciones */
    .proveedores__form,
    #proveedores-form {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .proveedores__form-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
    
    /* Grid de formulario: columna simple */
    .proveedores__form-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1.8rem !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__form-group {
        gap: 0.6rem !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__form-group--full {
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__form-group label {
        font-size: 0.75rem !important;
    }
    
    /* Inputs sin restricciones de altura */
    .proveedores__form-group input,
    .proveedores__form-group textarea {
        font-size: 1rem !important;
        padding: 0.75rem 0 !important;
        min-height: 44px !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Textarea expandible sin max-height */
    .proveedores__form-group textarea {
        min-height: 120px !important;
        height: auto !important;
        max-height: none !important;
        resize: vertical !important;
        overflow-y: auto !important;
    }
    
    /* Botón de envío accesible */
    .proveedores__form-submit {
        font-size: 0.85rem !important;
        padding: 1rem 2rem !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 1.5rem !important;
        margin-bottom: 2rem !important;
        min-height: 48px !important;
        position: relative !important;
    }
    
    
    /* ========================================
       FOOTER - Ajustes de espaciado
       ======================================== */
    
    .site-footer {
        padding: 2.5rem 1.5rem;
    }
    
    .site-footer__inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem;
        text-align: center;
    }
    
    .site-footer__column--left {
        align-items: center !important;
    }
    
    .site-footer__column--right {
        align-items: center !important;
        gap: 1.25rem;
    }
    
    .site-footer__logo,
    img.site-footer__logo {
        height: 50px !important;
        width: auto !important;
        max-width: none;
    }
    
    .site-footer__contact,
    .site-footer__copyright {
        font-size: 0.85rem;
        line-height: 1.6;
        text-align: center !important;
    }
    
    .site-footer__social {
        gap: 1rem;
        margin: 0.5rem 0;
        justify-content: center !important;
    }
    
    .site-footer__social a {
        width: 44px;
        height: 44px;
    }
    
    /* Mostrar botón scroll-to-top en mobile */
    .scroll-to-top-button {
        display: flex !important;
        position: fixed !important;
        bottom: calc(1.5rem + 54px + 1rem) !important;
        right: 1.5rem !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
        z-index: 999 !important;
    }
    
    
    /* ========================================
       MENÚ OVERLAY MOBILE - Diseño Premium Refinado
       ======================================== */
    
    /* 
     * ==========================================================================
     * SISTEMA DE DISEÑO DEL MENÚ MOBILE
     * ==========================================================================
     * 
     * FILOSOFÍA: Menú liviano, ordenado y respirable para arquitectura premium.
     * 
     * JERARQUÍA VISUAL (de mayor a menor):
     * 1. Enlaces de navegación principal (acción primaria)
     * 2. Logo CREAR (identidad, pero no dominante)
     * 3. Botón de cierre (funcional, accesible)
     * 4. Redes sociales (información secundaria)
     * 
     * SISTEMA DE ESPACIADO:
     * - Base unit: 1rem (16px)
     * - Padding lateral wrapper: 1.75rem (28px) - thumb-friendly
     * - Espaciado vertical entre grupos: proporcional al viewport
     * 
     * TIPOGRAFÍA MÓVIL:
     * - Links principales: clamp() para escalar entre dispositivos
     * - Redes sociales: tamaño reducido para jerarquía clara
     * 
     * COMPATIBILIDAD:
     * - iPhone SE (375px) hasta iPhone Pro Max (430px)
     * - Android diversos (360px - 412px típicos)
     * - Viewport height variable (Safari iOS)
     * ==========================================================================
     */
    
    /* --- CONTENEDOR PRINCIPAL --- */
    .menu-overlay__wrapper {
        padding: 2rem 1.75rem 2rem 1.75rem;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        box-sizing: border-box;
    }
    
    /* --- HEADER CON LOGO --- */
    .menu-overlay__header {
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        text-align: left;
        flex-shrink: 0;
    }
    
    /* 
     * LOGO: Proporcional y no dominante
     * Tamaño reducido para dar protagonismo a la navegación
     * clamp() para escalar en diferentes dispositivos
     */
    .menu-overlay__logo {
        width: clamp(120px, 30vw, 150px);
        height: auto;
        display: block;
        margin-left: 0;
    }
    
    /* 
     * BOTÓN DE CIERRE (X):
     * Tamaño táctil mínimo 44x44px (Apple HIG)
     * Posición alineada con el logo en altura
     * Tamaño visual refinado para no competir con la navegación
     */
    .menu-overlay__close {
        position: absolute !important;
        top: 2rem !important;
        right: 1.75rem !important;
        width: 44px;
        height: 44px;
        font-size: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        opacity: 0.85;
        transition: opacity 0.2s ease;
    }
    
    .menu-overlay__close:active {
        opacity: 1;
    }
    
    /* --- GRID: Una sola columna en mobile --- */
    .menu-overlay__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        flex: 1;
        min-height: 0;
    }
    
    /* --- COLUMNA IZQUIERDA: Navegación + Redes --- */
    .menu-overlay__left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex: 1;
        padding: 0;
        min-height: 0;
    }
    
    /* --- NAVEGACIÓN PRINCIPAL --- */
    .menu-overlay__nav {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: 0;
        margin: 0;
        align-items: flex-start;
    }
    
    /* 
     * ENLACES DE NAVEGACIÓN:
     * Tamaño optimizado para legibilidad y jerarquía
     * clamp() escala entre iPhone SE (375px) y Pro Max (430px)
     * Line-height ajustado para ritmo visual consistente
     */
    .menu-overlay__link {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
        line-height: 1.25;
        margin: 0;
        padding: 0.35rem 0;
        text-align: left;
        text-indent: 0;
        display: block;
        letter-spacing: 0.01em;
    }

    /* Refuerzo de alineación - máxima especificidad */
    .menu-overlay__wrapper .menu-overlay__left .menu-overlay__nav .menu-overlay__link {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
        border-left: none !important;
    }
    
    /* --- OCULTAR ELEMENTOS DE DESKTOP --- */
    .menu-overlay__video-wrapper,
    .menu-overlay__hero-text,
    .menu-overlay__right {
        display: none !important;
    }
    
    /* 
     * REDES SOCIALES:
     * Ancladas en la parte inferior izquierda
     * Jerarquía visual reducida (secundarias)
     * Espacio superior automático para empujar hacia abajo
     */
    .menu-overlay__social {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        gap: 0.6rem !important;
        font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
        letter-spacing: 0.15em !important;
        padding-top: 0 !important;
        padding-bottom: 0.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        margin-top: auto !important;
        align-items: flex-start !important;
        opacity: 0.75 !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Links de redes sociales */
    .menu-overlay__social a {
        text-align: left !important;
        padding: 0.3rem 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        min-height: 36px !important; /* Área táctil mínima */
        transform: none !important;
    }
    
    /* 
     * FLECHAS DE REDES SOCIALES:
     * Usar font-family de sistema para evitar que se renderice como emoji
     * El caracter ↗ (U+2197) se muestra como flecha de texto, no emoji
     */
    .menu-overlay__social a .arrow {
        display: inline-block !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 300 !important;
        font-size: 1em;
        opacity: 0.9;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* Forzar renderizado como texto, no emoji */
        font-variant-emoji: text;
    }
    
    
    /* ========================================
       BOTONES FLOTANTES - Optimización táctil
       ======================================== */
    
    .whatsapp-button {
        width: 54px !important;
        height: 54px !important;
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        font-size: 1.4rem !important;
        z-index: 20 !important;
    }
    
    .scroll-to-top-button {
        width: 54px !important;
        height: 54px !important;
        position: fixed !important;
        bottom: calc(1.5rem + 54px + 1rem) !important; /* Arriba del botón WhatsApp con gap de 1rem */
        right: 1.5rem !important; /* Exactamente el mismo right que WhatsApp */
        font-size: 1.2rem !important;
        z-index: 20 !important;
    }
    
    
    /* ========================================
       TEXTOS GENERALES - Mejora de legibilidad
       ======================================== */
    
    .quienes__description,
    .vision__description {
        font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
        line-height: 1.6 !important;
    }
    
    
    /* ========================================
       SECCIÓN VISION - Ajustes móvil
       ======================================== */
    
    .vision__text-container {
        padding: 2.5rem 1.5rem;
    }
    
    .vision__title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        letter-spacing: 0.18rem;
        margin-bottom: 0.8rem;
    }
    
    .vision__parallax-frame {
        height: 60vh;
    }
    
    
    /* ========================================
       ENFOQUE - Ajustes móvil
       ======================================== */
    
    .enfoque {
        padding: 2.5rem 1.5rem;
    }
    
    .enfoque__title {
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }
    
    .enfoque__description {
        font-size: clamp(1rem, 4.5vw, 1.3rem);
        line-height: 1.6;
    }

}


/* ============================================================================
   OPTIMIZACIONES ESPECÍFICAS PARA MÓVILES PEQUEÑOS (≤480px)
   ============================================================================ */

@media (max-width: 480px) {
    
    /* ========================================
       SCROLL NATIVO - Mantener libre en móviles pequeños
       ======================================== */
    
    html,
    html.lenis,
    html.lenis-smooth {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }
    
    body,
    html.lenis body,
    body.is-smooth-scroll-active {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    body,
    main {
        overflow: visible !important;
        height: auto !important;
    }
    
    .hero__inner {
        padding-right: 1.2rem;
        padding-bottom: 1.5rem;
    }
    
    .hero__subtitle {
        font-size: 1.6rem;
    }
    
    .hero__title {
        font-size: 1.8rem;
    }
    
    
    /* ========================================
       NAVEGACIÓN - Compactación adicional
       ======================================== */
    
    .nav {
        padding: 0.9rem 1rem;
        position: absolute !important;
        z-index: 999 !important;
    }
    
    .nav__logo {
        height: 36px;
    }
    
    .nav__burger {
        width: 1.4rem;
        height: 1rem;
        gap: 3px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        z-index: 1001 !important;
        background: transparent;
        border: none;
        padding: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .nav__burger span {
        height: 1.5px;
        width: 20px !important;
        display: block !important;
        background-color: #ffffff !important;
        border-radius: 999px;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    }
    
    
    /* ========================================
       MENÚ OVERLAY - Ajustes pantallas pequeñas
       ======================================== */
    
    .menu-overlay__wrapper {
        padding: 1.75rem 1.5rem 1.75rem 1.5rem;
    }
    
    .menu-overlay__header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.85rem;
    }
    
    .menu-overlay__logo {
        width: clamp(100px, 28vw, 130px);
    }
    
    .menu-overlay__close {
        top: 1.75rem !important;
        right: 1.5rem !important;
        width: 40px;
        height: 40px;
        font-size: 1.75rem;
    }
    
    .menu-overlay__nav {
        gap: 0.5rem;
    }
    
    .menu-overlay__link {
        font-size: clamp(1.35rem, 5.5vw, 1.6rem);
        padding: 0.3rem 0;
    }
    
    .menu-overlay__social {
        font-size: clamp(0.75rem, 2.8vw, 0.9rem) !important;
        gap: 0.5rem !important;
    }
    
    .menu-overlay__social a {
        min-height: 32px !important;
    }
    
    /* Flechas visibles también en pantallas pequeñas */
    .menu-overlay__social a .arrow {
        display: inline-block !important;
        font-size: 1em !important;
    }
    
    
    /* ========================================
       QUIENES SOMOS - Compactación
       ======================================== */
    
    .quienes {
        padding: 2.5rem 1.2rem;
    }
    
    .quienes__title {
        font-size: 2rem;
        margin-bottom: 1.2rem;
    }
    
    .quienes__paragraph {
        font-size: 1rem;
        line-height: 1.65 !important;
        /* Ancho y justificación ya definidos en regla común con .proyectos__text */
    }
    
    .quienes__text-wrapper {
        padding: 0.5rem 0;
    }
    
    
    /* ========================================
       HERO IMAGE - Altura optimizada
       ======================================== */
    
    .hero-image-section {
        margin-top: -0.5rem;
    }
    
    .hero-image-container {
        height: 45vh !important;
        min-height: 280px !important;
        max-height: 400px !important;
    }
    
    
    /* ========================================
       PROYECTOS - Compactación adicional
       ======================================== */
    
    .proyectos {
        padding: 2.5rem 1.2rem !important;
    }
    
    .proyectos__title-container {
        margin-bottom: 1.5rem;
    }
    
    /* ========================================
       PROYECTOS - AJUSTES MOBILE PEQUEÑO
       ======================================== */
    
    .proyectos {
        padding: 2rem 0 !important;
    }
    
    /* Imagen más compacta en móviles pequeños */
    .proyectos__parallax-frame {
        height: 240px !important;
        min-height: 240px !important;
    }
    
    /* Contenido más compacto */
    .proyectos__video-section .proyectos__content,
    .proyectos__content[style] {
        padding: 2rem 1.5rem 2.2rem 1.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    .proyectos__logo {
        max-width: 165px !important;
        width: 165px !important;
        margin-bottom: 1rem !important;
    }
    
    .proyectos__video-section .proyectos__content .proyectos__text,
    .proyectos__content .proyectos__text {
        font-size: 1.2rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: normal !important;
    }
    
    .proyectos__buttons {
        gap: 0.8rem !important;
    }
    
    .proyectos__btn {
        font-size: 0.82rem !important;
        padding: 0.8em 1.4em !important;
    }
    
    
    /* ========================================
       PROVEEDORES - Compactación formulario
       ======================================== */
    
    /* Mantener scroll libre en móviles pequeños */
    .proveedores {
        padding: 2.5rem 1.2rem !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__container {
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__content {
        gap: 2rem !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .proveedores__form-wrapper {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .proveedores__form,
    #proveedores-form {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .proveedores__text-wrapper .quienes__title {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }
    
    .proveedores__hr {
        margin-bottom: 1.5rem !important;
    }
    
    .proveedores__subtitle {
        font-size: 1.15rem !important;
        margin-bottom: 0.8rem;
    }
    
    .proveedores__description {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
    }
    
    .proveedores__form-wrapper {
        padding: 1.5rem 1.2rem;
    }
    
    .proveedores__form-title {
        font-size: 1.4rem !important;
        margin-bottom: 0.3rem;
    }
    
    .proveedores__form-title::after {
        margin-top: 0.8rem;
        margin-bottom: 1.8rem;
    }
    
    .proveedores__form-grid {
        gap: 1.5rem;
    }
    
    .proveedores__form-group {
        gap: 0.5rem;
    }
    
    .proveedores__form-group input,
    .proveedores__form-group textarea {
        font-size: 0.95rem;
        padding: 0.7rem 0;
        min-height: 44px;
    }
    
    .proveedores__form-group textarea {
        min-height: 90px;
        height: 90px;
        max-height: 180px;
    }
    
    .proveedores__form-submit {
        font-size: 0.8rem;
        padding: 0.9rem 1.8rem;
        margin-top: 1.2rem;
        min-height: 48px;
    }
    
    
    /* ========================================
       MENÚ OVERLAY - Compactación adicional (móviles pequeños)
       ======================================== */
    
    /* Contenedor principal: padding reducido pero uniforme */
    .menu-overlay__wrapper {
        padding: 1.5rem 1.2rem;
    }
    
    /* Header: mantener alineación sin padding lateral */
    .menu-overlay__header {
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        padding-left: 0; /* Mantener alineación exacta */
        padding-right: 0;
        text-align: left;
    }
    
    /* Logo: alineado al eje base sin desplazamiento */
    .menu-overlay__logo {
        width: 200px !important;
        display: block;
        margin-left: 0; /* Alineación desde borde izquierdo */
    }
    
    .menu-overlay__close {
        top: 2.5rem !important;
        right: 1.2rem;
        font-size: 3rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }
    
    /* Grid: sin padding lateral */
    .menu-overlay__grid {
        gap: 1.5rem;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Columna izquierda: sin padding que desplace contenido */
    .menu-overlay__left {
        padding-left: 0;
        padding-right: 0;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
    }
    
    /* Navegación: alineación exacta desde eje izquierdo */
    .menu-overlay__nav {
        padding-left: 0;
        margin-left: 0;
    }
    
    /* Enlaces principales: sin margen ni padding lateral */
    .menu-overlay__link {
        font-size: clamp(1.7rem, 7vw, 2rem) !important;
        margin-bottom: 0.15rem;
        margin-left: 0;
        padding-left: 0;
        text-align: left;
        text-indent: 0;
    }
    
    /* Video y texto hero ocultos */
    .menu-overlay__video-wrapper,
    .menu-overlay__hero-text {
        display: none !important;
    }
    
    /* Redes sociales: mismo eje que navegación y logo */
    .menu-overlay__social {
        font-size: 0.85rem !important;
        gap: 0.5rem;
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0; /* Crucial: mismo eje que logo y navegación */
        margin-left: 0;
        margin-top: auto !important;
        align-items: flex-start;
        opacity: 0.85;
    }
    
    /* Links sociales: sin desplazamiento */
    .menu-overlay__social a {
        text-align: left;
    }
    
    
    /* ========================================
       BOTONES FLOTANTES - Tamaño táctil optimizado
       ======================================== */
    
    .whatsapp-button {
        width: 50px;
        height: 50px;
        position: fixed !important;
        bottom: 1.2rem;
        right: 1.2rem;
        font-size: 1.3rem;
    }
    
    .scroll-to-top-button {
        width: 50px;
        height: 50px;
        bottom: 1.2rem;
        right: calc(1.2rem + 60px);
        font-size: 1.1rem;
    }
    
    
    /* ========================================
       VISION - Compactación adicional
       ======================================== */
    
    .vision__text-container {
        padding: 2rem 1.2rem;
    }
    
    .vision__title {
        font-size: 1.8rem;
        letter-spacing: 0.15rem;
    }
    
    .vision__description {
        font-size: 1rem !important;
    }
    
    .vision__parallax-frame {
        height: 50vh;
    }
    
    
    /* ========================================
       ENFOQUE - Compactación adicional
       ======================================== */
    
    .enfoque {
        padding: 2rem 1.2rem;
    }
    
    .enfoque__title {
        font-size: 1.8rem;
    }
    
    .enfoque__description {
        font-size: 1rem;
    }

}


/* ============================================================================
   MEJORAS DE ACCESIBILIDAD TÁCTIL
   ============================================================================ */

@media (max-width: 768px) {
    
    /* Área táctil mínima de 44x44px para todos los elementos interactivos */
    a, button, input[type="submit"], .nav__burger, .menu-overlay__link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Excepción para links de texto que necesitan fluir naturalmente */
    .menu-overlay__link,
    .proyectos__btn,
    .proveedores__form-submit {
        min-width: auto;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    
}


/* ============================================================================
   PREVENCIÓN DE SCROLL HORIZONTAL
   ============================================================================ */

@media (max-width: 768px) {
    
    html,
    html.lenis,
    html.lenis body,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100vw;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Desactivar el bloqueo de Lenis en móvil */
    .lenis.lenis-stopped {
        overflow: auto !important;
    }
    
    * {
        max-width: 100%;
    }
    
    /* Elementos de ancho completo específicos */
    .proyectos,
    .proveedores,
    .hero-image-section,
    .quienes {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    
}


/* ============================================================================
   OPTIMIZACIONES DE RENDIMIENTO MÓVIL
   ============================================================================ */

@media (max-width: 768px) {
    
    /* Reducir blur en animaciones para mejor rendimiento */
    [data-anim="bottom"],
    [data-anim="top"],
    [data-anim="left"],
    [data-anim="right"] {
        filter: blur(3px); /* Reducido de 6px */
    }
    
    [data-anim="fade"] {
        filter: blur(4px); /* Reducido de 8px */
    }
    
    [data-anim="zoom"] {
        filter: blur(5px); /* Reducido de 10px */
    }
    
    /* Optimizar videos para móvil */
    video {
        will-change: auto; /* Reducir uso de GPU */
    }
    
}


/* ============================================================================
   FIX CRÍTICO: SENDEROS HOUSING - SCROLL MOBILE SAFARI iOS
   ============================================================================
   
   Este bloque soluciona el bug de scroll errático en Senderos Housing mobile.
   
   CAUSA DEL BUG:
   1. Safari iOS tiene viewport dinámico (barra de direcciones)
   2. Lenis interceptaba scroll y luchaba contra el nativo
   3. 100vh se recalculaba constantemente, causando saltos
   
   SOLUCIÓN:
   - Desactivar Lenis en mobile (hecho en JS)
   - Evitar 100vh en contenedores críticos
   - Usar altura fija o svh/dvh donde esté soportado
   - Permitir scroll nativo sin interferencias
   
   ============================================================================ */

@media (max-width: 768px) {
    
    /* ========================================
       SENDEROS HOUSING - VIDEO BACKGROUND HERO
       ======================================== */
    
    /* El video-background es el hero principal de Senderos Housing
     * Usar altura fija en lugar de vh para evitar recálculos */
    .video-background {
        height: auto !important;
        min-height: 55svh !important;
        max-height: none !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Fallback para navegadores sin soporte svh */
    @supports not (min-height: 1svh) {
        .video-background {
            min-height: 400px !important;
        }
    }
    
    /* Imagen de fondo dentro del hero */
    .video-background__image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Contenido del hero - no usar position fixed ni sticky */
    .hero-content-wrapper {
        position: absolute !important;
        height: 100% !important;
    }
    
    /* Header del hero */
    .hero-header {
        position: absolute !important;
    }
    
    /* ========================================
       SENDEROS HOUSING - SECCIONES PRINCIPALES
       ======================================== */
    
    /* Sección ubicación */
    .ubicacion {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Video de ubicación */
    .ubicacion__video-container {
        height: auto !important;
        min-height: 250px !important;
        max-height: 400px !important;
        overflow: hidden !important;
    }
    
    .ubicacion__video {
        transform: none !important; /* Desactivar parallax en mobile */
        -webkit-transform: none !important;
    }
    
    /* ========================================
       SENDEROS HOUSING - CARRUSEL AMENITIES
       FIX SWIPE HORIZONTAL MOBILE
       ======================================== */
    
    /* 
     * 🔴 PROBLEMA RESUELTO:
     * El carrusel no permitía swipe porque:
     * 1. La sección padre tenía overflow: hidden
     * 2. No había touch-action: pan-x para habilitar gesto horizontal
     * 3. El carrusel tenía transforms de GSAP que interferían
     * 
     * SOLUCIÓN: Habilitar overflow-x en el contenedor correcto,
     * agregar touch-action para gestos, y desactivar transforms de GSAP
     */
    
    /* ========================================
       SENDEROS HOUSING - TOURS VIRTUALES
       ======================================== */
    
    .tours-virtuales {
        position: relative !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important; /* Contener el fondo dentro de la sección */
        padding: 3rem 0 !important;
    }
    
    /* Fondo parallax - contenerlo correctamente en mobile */
    .tours-virtuales__parallax-bg {
        position: absolute !important;
        top: 0 !important; /* Sin offset negativo */
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Ajustar al tamaño de la sección */
        z-index: 0 !important;
        overflow: hidden !important;
    }
    
    /* Imagen parallax - sin transform en mobile */
    .tours-virtuales__parallax-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important; /* Sin parallax en mobile */
        -webkit-transform: none !important;
    }
    
    /* Overlay sobre la imagen */
    .tours-virtuales__overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }
    
    /* Contenedor del contenido */
    .tours-virtuales__container {
        position: relative !important;
        z-index: 2 !important;
        padding: 0 1.5rem !important;
    }
    
    .tours-virtuales__grid {
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .tours-virtuales__item {
        height: auto !important;
    }
    
    .tours-virtuales__iframe-wrapper {
        position: relative !important;
        height: auto !important;
        padding-bottom: 75% !important; /* Mantener aspect ratio */
    }
    
    /* ========================================
       SENDEROS HOUSING - FOOTER Y SECCIONES FINALES
       ======================================== */
    
    .site-footer {
        position: relative !important;
        min-height: auto !important;
    }
    
    /* ========================================
       DESACTIVAR EFECTOS QUE INTERFIEREN CON SCROLL
       ======================================== */
    
    /* Desactivar parallax y transforms que puedan causar recálculos */
    [data-scroll],
    [data-scroll-section],
    [data-scroll-container] {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* Asegurar que position fixed no cause problemas */
    .fixed-buttons {
        position: fixed !important;
        /* Los botones fixed son OK, pero no deben tener will-change */
        will-change: auto !important;
    }
    
    /* Menu overlay - debe mantener fixed pero no interferir con scroll */
    .menu-overlay {
        position: fixed !important;
        overflow: hidden !important;
    }
    
    /* Prevenir cualquier transform3d residual de Lenis */
    .lenis-smooth [style*="transform"],
    html.lenis [style*="transform"] {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* Media query adicional para pantallas muy pequeñas */
@media (max-width: 480px) {
    
    .video-background {
        min-height: 50svh !important;
    }
    
    @supports not (min-height: 1svh) {
        .video-background {
            min-height: 350px !important;
        }
    }
}


/* ============================================================================
   FIN DE OPTIMIZACIONES MÓVIL
   ============================================================================ */