/* Safari Compatibility CSS - Correcciones específicas para Safari */

/* ===== CORRECCIONES PARA PATRONES DE FONDO EN SAFARI ===== */

/* Safari fix: Los SVG como data URI a veces no funcionan en pseudo-elementos */
/* Usamos gradientes y patrones CSS como fallback */

/* Patrón de corazones para testimoniales - Compatible con Safari */
.scene--testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Fallback para Safari sin soporte SVG */
    background: 
        radial-gradient(circle at 20% 20%, rgba(217, 83, 79, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(217, 83, 79, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(217, 83, 79, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(217, 83, 79, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(217, 83, 79, 0.03) 0%, transparent 40%);
    background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px, 120px 120px;
    background-position: 0 0, 30px 0, 0 30px, 30px 30px, 0 0;
    opacity: 0.4;
    -webkit-animation: float 15s ease-in-out infinite;
    animation: float 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Safari específico - Si el SVG funciona, lo usamos */
@supports (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .scene--testimonials::before {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><text x="15" y="20" text-anchor="middle" font-size="12" fill="rgba(217,83,79,0.1)">❤️</text></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>');
        opacity: 0.3;
    }
}

/* Patrón de cámaras para galería - Compatible con Safari */
.scene--gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Fallback para Safari */
    background: 
        radial-gradient(circle at 25% 25%, rgba(217, 83, 79, 0.03) 0%, transparent 25%),
        radial-gradient(circle at 75% 25%, rgba(217, 83, 79, 0.03) 0%, transparent 25%),
        radial-gradient(circle at 25% 75%, rgba(217, 83, 79, 0.03) 0%, transparent 25%),
        radial-gradient(circle at 75% 75%, rgba(217, 83, 79, 0.03) 0%, transparent 25%);
    background-size: 80px 80px, 80px 80px, 80px 80px, 80px 80px;
    background-position: 0 0, 40px 0, 0 40px, 40px 40px;
    opacity: 0.7;
    -webkit-animation: pulse 10s ease-in-out infinite;
    animation: pulse 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Safari específico - Si el SVG funciona, lo usamos */
@supports (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .scene--gallery::before {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="camera" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><text x="20" y="25" text-anchor="middle" font-size="16" fill="rgba(217,83,79,0.05)">📸</text></pattern></defs><rect width="100" height="100" fill="url(%23camera)"/></svg>');
        opacity: 0.5;
    }
}

/* Patrón de ondas para footer - Compatible con Safari */
.scene--footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Fallback para Safari */
    background: 
        linear-gradient(90deg, transparent 0%, rgba(217, 83, 79, 0.02) 25%, transparent 50%, rgba(217, 83, 79, 0.02) 75%, transparent 100%),
        linear-gradient(45deg, transparent 0%, rgba(217, 83, 79, 0.01) 25%, transparent 50%, rgba(217, 83, 79, 0.01) 75%, transparent 100%);
    background-size: 80px 40px, 60px 60px;
    opacity: 0.7;
    -webkit-animation: gentleWave 15s ease-in-out infinite;
    animation: gentleWave 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Safari específico - Si el SVG funciona, lo usamos */
@supports (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .scene--footer::before {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="waves" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 20 Q10 10 20 20 T40 20" stroke="rgba(217,83,79,0.05)" stroke-width="2" fill="none"/></pattern></defs><rect width="100" height="100" fill="url(%23waves)"/></svg>');
        opacity: 0.5;
    }
}

/* Patrón de cristales de hielo para booking - Compatible con Safari */
.scene--booking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Fallback para Safari */
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 45%, rgba(217, 83, 79, 0.05) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, rgba(217, 83, 79, 0.03) 50%, rgba(255, 255, 255, 0.05) 55%, transparent 70%);
    background-size: 50px 50px, 25px 25px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Safari específico - Si el SVG funciona, lo usamos */
@supports (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .scene--booking::before {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ice" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><polygon points="12.5,5 20,15 12.5,20 5,15" fill="rgba(255,255,255,0.2)" stroke="rgba(217,83,79,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23ice)"/></svg>');
        opacity: 0.4;
    }
}

/* ===== CORRECCIONES ESPECÍFICAS PARA WEBKIT/SAFARI ===== */

/* Asegurar que los pseudo-elementos tengan z-index correcto */
.scene--testimonials,
.scene--gallery,
.scene--footer,
.scene--booking {
    position: relative;
    z-index: 0;
}

.scene--testimonials::before,
.scene--gallery::before,
.scene--footer::before,
.scene--booking::before {
    z-index: 1;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Asegurar que el contenido esté por encima del fondo */
.scene--testimonials > *,
.scene--gallery > *,
.scene--footer > *,
.scene--booking > * {
    position: relative;
    z-index: 2;
}

/* ===== CORRECCIONES DE ANIMACIONES PARA SAFARI ===== */

/* Safari tiene problemas con algunas propiedades de animación */
@-webkit-keyframes float {
    0%, 100% { 
        -webkit-transform: translateY(0px); 
        transform: translateY(0px); 
    }
    50% { 
        -webkit-transform: translateY(-10px); 
        transform: translateY(-10px); 
    }
}

@-webkit-keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

@-webkit-keyframes gentleWave {
    0%, 100% { 
        -webkit-transform: translateX(0px); 
        transform: translateX(0px); 
    }
    50% { 
        -webkit-transform: translateX(-20px); 
        transform: translateX(-20px); 
    }
}

/* ===== CORRECCIONES ESPECÍFICAS PARA CONTENIDO ===== */

/* Asegurar que el texto sea legible sobre los patrones */
.testimonials__title,
.gallery__title,
.footer__title,
.booking__title {
    position: relative;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.testimonial,
.gallery__item,
.footer__content,
.booking-form {
    position: relative;
    z-index: 5;
}

/* ===== FALLBACKS ADICIONALES PARA SAFARI MÓVIL ===== */

/* Safari móvil a veces tiene problemas con backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .booking-form {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(217, 83, 79, 0.2);
    }
    
    .glass-effect {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO PARA SAFARI ===== */

/* Safari se beneficia de transform3d para activar aceleración de hardware */
.scene--testimonials::before,
.scene--gallery::before,
.scene--footer::before,
.scene--booking::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Optimizar transiciones para Safari */
.scene--testimonials::before {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.scene--gallery::before {
    -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== CORRECCIONES PARA EMOJIS EN SAFARI ===== */

/* Safari a veces no renderiza bien los emojis en SVG */
.scene--testimonials::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text x="12" y="16" text-anchor="middle" font-size="16" fill="rgba(217,83,79,0.2)">❤️</text></svg>');
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
    display: none; /* Solo mostrar si el SVG principal no funciona */
}

/* Si el navegador no soporta el SVG principal, mostrar emojis alternativos */
@supports not (background: url('data:image/svg+xml;utf8,<svg></svg>')) {
    .scene--testimonials::after {
        display: block;
    }
}

/* ===== MEDIA QUERIES ESPECÍFICAS PARA SAFARI ===== */

/* Safari en iOS tiene comportamientos específicos */
@supports (-webkit-touch-callout: none) {
    /* Esto solo se aplica en Safari iOS */
    .scene--testimonials::before,
    .scene--gallery::before,
    .scene--footer::before,
    .scene--booking::before {
        /* Reducir la complejidad en Safari móvil */
        opacity: 0.2;
        background-size: 120px 120px;
    }
}

/* ===== DETECCIÓN DE SAFARI ESPECÍFICA ===== */

/* Solo para Safari desktop */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .scene--testimonials::before,
        .scene--gallery::before {
            /* Optimizaciones específicas para Safari desktop */
            opacity: 0.4;
            will-change: auto; /* Safari a veces tiene problemas con will-change */
        }
    }
}

/* ===== CORRECCIONES FINALES ===== */

/* Asegurar que todos los elementos pseudo tengan las propiedades necesarias */
.scene--testimonials::before,
.scene--gallery::before,
.scene--footer::before,
.scene--booking::before {
    /* Propiedades universales para compatibilidad */
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Asegurar que no interfieran con la interacción */
.scene::before {
    pointer-events: none !important;
}

/* ===== CLASES ESPECÍFICAS AGREGADAS POR JAVASCRIPT ===== */

/* Cuando se detecta Safari */
.browser-safari .scene--testimonials::before,
.browser-safari .scene--gallery::before,
.browser-safari .scene--footer::before,
.browser-safari .scene--booking::before {
    /* Forzar opacidad visible en Safari */
    opacity: 0.6 !important;
    display: block !important;
}

/* Cuando Safari no puede mostrar SVG, usar fallback completo */
.safari-svg-fallback.scene--testimonials::before {
    background: 
        radial-gradient(circle at 15% 15%, rgba(217, 83, 79, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(217, 83, 79, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 15% 85%, rgba(217, 83, 79, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 85%, rgba(217, 83, 79, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(217, 83, 79, 0.04) 0%, transparent 30%) !important;
    background-size: 60px 60px !important;
    opacity: 0.7 !important;
}

.safari-svg-fallback.scene--gallery::before {
    background: 
        radial-gradient(circle at 20% 20%, rgba(217, 83, 79, 0.06) 0%, transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(217, 83, 79, 0.06) 0%, transparent 20%),
        radial-gradient(circle at 20% 80%, rgba(217, 83, 79, 0.06) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(217, 83, 79, 0.06) 0%, transparent 20%) !important;
    background-size: 80px 80px !important;
    opacity: 0.8 !important;
}

/* Corrección específica para patrones que no se ven */
.safari-pattern-fix::before {
    background: rgba(217, 83, 79, 0.05) !important;
    opacity: 1 !important;
    display: block !important;
}

/* Corrección para fondos que no aparecen */
.safari-background-fallback.scene--testimonials::before {
    background: repeating-radial-gradient(
        circle at 50% 50%,
        rgba(217, 83, 79, 0.03) 0px,
        transparent 20px,
        rgba(217, 83, 79, 0.06) 40px,
        transparent 60px
    ) !important;
    opacity: 0.8 !important;
}

.safari-background-fallback.scene--gallery::before {
    background: repeating-linear-gradient(
        45deg,
        rgba(217, 83, 79, 0.02) 0px,
        rgba(217, 83, 79, 0.02) 10px,
        transparent 10px,
        transparent 30px
    ) !important;
    opacity: 0.6 !important;
}

/* Safari móvil optimizaciones */
.safari-mobile .scene--testimonials::before,
.safari-mobile .scene--gallery::before,
.safari-mobile .scene--footer::before,
.safari-mobile .scene--booking::before {
    /* Reducir complejidad en móviles */
    background-size: 100px 100px !important;
    opacity: 0.3 !important;
    animation-duration: 8s !important;
}

/* Safari desktop optimizaciones */
.safari-desktop .scene--testimonials::before,
.safari-desktop .scene--gallery::before {
    /* Mejor calidad en desktop */
    opacity: 0.5 !important;
    background-size: 60px 60px !important;
}

/* Sin soporte para backdrop-filter */
.no-backdrop-filter .booking-form {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.no-backdrop-filter .glass-effect {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(217, 83, 79, 0.2) !important;
}