/* ==== ESTILOS DE COMPATIBILIDAD PARA SAFARI EN DISPOSITIVOS APPLE ==== */

/* Prefijos -webkit para propiedades CSS que pueden tener problemas en Safari */

/* Regla específica para ocultar la navegación en dispositivos móviles en todos los navegadores */
@media (max-width: 1100px) {
  .nav-desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

/* Flexbox y Grid */
.header, .nav-desktop, .nav-scroll-container, .nav-links,
.features-container, .room-grid, .gallery-grid,
.actividades-grid, .servicios-grid, .team-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Transformaciones */
.card-hover:hover, .feature-card:hover, .room-card:hover,
.gallery-item:hover, .team-member:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* Transiciones */
.btn, .nav-link, .card, .feature-card, .room-card,
.gallery-item, .team-member, .social-icon {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@-webkit-keyframes slideIn {
    from { -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; }
    to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Gradientes */
.divider, .btn-gradient, .section-divider {
    background: -webkit-linear-gradient(left, var(--theme-accent), var(--brand-purple));
    background: linear-gradient(to right, var(--theme-accent), var(--brand-purple));
}

/* Sombras */
.header, .card, .feature-card, .room-card {
    -webkit-box-shadow: var(--box-shadow-card);
    box-shadow: var(--box-shadow-card);
}

/* Ajustes específicos para Safari en iOS */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        /* Corrige problemas de altura en elementos flexibles */
        .hero-content, .nosotros-hero-content, .actividades-hero-content {
            height: -webkit-fill-available;
        }
        
        /* Mejora el desplazamiento suave */
        html {
            -webkit-overflow-scrolling: touch;
        }
        
        /* Evita el zoom no deseado en formularios */
        input, select, textarea {
            font-size: 16px;
        }
        
        /* Corrige problemas con position:fixed en iOS */
        .header, .modal, .sticky-element {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        /* Ajustes para el header en dispositivos móviles */
        @media (max-width: 768px) {
            /* Asegura que el logo esté centrado */
            .header .logo-container {
                position: absolute;
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                z-index: 10;
            }
            
            /* Asegura que el botón de menú esté a la izquierda */
            .header .menu-mobile-toggle {
                position: absolute;
                left: 15px;
                display: -webkit-flex;
                display: flex;
                z-index: 10;
            }
            
            /* Asegura que el interruptor de tema esté a la derecha */
            .header .theme-toggle {
                position: absolute;
                right: 15px;
                z-index: 10;
            }
            
            /* Oculta la navegación de escritorio en móviles */
            .header .nav-desktop {
                display: none;
            }
            
            /* Ajustes para el menú móvil */
            .mobile-menu-items {
                -webkit-overflow-scrolling: touch;
                -webkit-transform: translateY(20px);
                transform: translateY(20px);
                -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            
            .mobile-menu.active .mobile-menu-items {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            
            /* Mejora la animación de los elementos del menú */
            .menu-item {
                -webkit-transform: translateY(20px);
                transform: translateY(20px);
                -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            
            .mobile-menu.active .menu-item {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
        
        /* Ajustes para el header en dispositivos móviles */
        @media (max-width: 768px) {
            /* Asegura que el logo esté centrado */
            .header .logo-container {
                position: absolute;
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                z-index: 10;
            }
            
            /* Asegura que el botón de menú esté a la izquierda */
            .header .menu-mobile-toggle {
                position: absolute;
                left: 15px;
                display: -webkit-flex;
                display: flex;
                z-index: 10;
            }
            
            /* Asegura que el interruptor de tema esté a la derecha */
            .header .theme-toggle {
                position: absolute;
                right: 15px;
                z-index: 10;
            }
            
            /* Oculta la navegación de escritorio en móviles */
            .header .nav-desktop {
                display: none;
            }
            
            /* Ajustes para el menú móvil */
            .mobile-menu-items {
                -webkit-overflow-scrolling: touch;
                -webkit-transform: translateY(20px);
                transform: translateY(20px);
                -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            
            .mobile-menu.active .mobile-menu-items {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
    }
}

/* Ajustes específicos para Safari en macOS */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Mejora el renderizado de fuentes */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Corrige problemas con scrollbars */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.3);
    }
}

/* Corrige problemas específicos con Swiper en Safari */
.swiper-container, .swiper-wrapper, .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Corrige problemas con sticky positioning en Safari */
.sticky-element, .header.sticky {
    position: -webkit-sticky;
    position: sticky;
}

/* Mejora la visualización de imágenes en Safari */
img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}