/* ========== CROSS-BROWSER COMPATIBILITY FIXES ========== */
/* Agregar ANTES de los estilos principales o al final del style.css */

/* ========== PREFIJOS PARA BACKDROP-FILTER ========== */
/* Glassmorphism - Soportado en todos los navegadores modernos */

.ticket-container,
.video-card,
.photo-item,
.music-card,
.card.music-card,
.music-item .card,
.event-card,
.press-card,
.section-icon {
    /* Safari 9+ */
    -webkit-backdrop-filter: blur(10px);
    /* Chrome, Edge, Opera, Firefox */
    backdrop-filter: blur(10px);
    /* Fallback para navegadores antiguos */
    background-color: rgba(0, 0, 0, 0.4);
}

/* Backdrop filter más fuerte para contenedores principales */
.ticket-container {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* ========== PREFIJOS PARA TRANSFORMS ========== */

#youtube-background-container,
.ticket-logo-overlay,
.scroll-indicator,
.social-icon,
.navbar-nav .nav-link,
.video-card,
.photo-item,
.music-card,
.event-card,
.press-card {
    -webkit-transform: translateZ(0); /* Forzar aceleración GPU */
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    /* Optimización de renderizado */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

/* ========== PREFIJOS PARA TRANSITIONS ========== */

.video-card,
.photo-item,
.music-card,
.event-card,
.press-card,
.social-icon,
.navbar-nav .nav-link,
.ticket-container,
.ticket-logo {
    -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========== PREFIJOS PARA GRADIENTES ========== */

.ticket-container,
.video-card,
.photo-item,
.music-card,
.card.music-card,
.section-icon {
    /* Safari 5.1-6 */
    background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 20, 30, 0.5) 100%);
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(20, 20, 30, 0.5)));
    /* Firefox 3.6-15 */
    background: -moz-linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 20, 30, 0.5) 100%);
    /* Opera 11.1-12 */
    background: -o-linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 20, 30, 0.5) 100%);
    /* Estándar */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 20, 30, 0.5) 100%);
}

/* ========== PREFIJOS PARA BORDER-RADIUS ========== */

.ticket-container,
.video-card,
.photo-item,
.music-card,
.event-card,
.press-card,
.section-icon,
.video-embed-container,
.photo-image {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.section-icon {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* ========== PREFIJOS PARA BOX-SHADOW ========== */

.video-card,
.photo-item,
.music-card,
.event-card,
.press-card,
.ticket-container,
.navbar,
.section-icon {
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ========== PREFIJOS PARA ANIMATIONS ========== */

@-webkit-keyframes logoFromBackground {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes logoFromBackground {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1);
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes logoFromBackground {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes logoFloatSubtle {
    0%, 100% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
    }
    50% {
        -webkit-transform: scale(1.01) translateY(-4px);
        transform: scale(1.01) translateY(-4px);
    }
}

@-moz-keyframes logoFloatSubtle {
    0%, 100% {
        -moz-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
    }
    50% {
        -moz-transform: scale(1.01) translateY(-4px);
        transform: scale(1.01) translateY(-4px);
    }
}

@keyframes logoFloatSubtle {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.01) translateY(-4px);
    }
}

@-webkit-keyframes iconGlowOnly {
    0%, 100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        -webkit-box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
    }
}

@-moz-keyframes iconGlowOnly {
    0%, 100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        -moz-box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
    }
}

@keyframes iconGlowOnly {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
    }
}

/* ========== PREFIJOS PARA FLEXBOX ========== */

.navbar-nav,
.social-icons,
.ticket-banner,
.ticket-container,
.section-icon,
.cta-section {
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* Firefox 19- */
    display: -webkit-flex;     /* Safari 6.1+, Chrome 21-28, iOS 7+ */
    display: -ms-flexbox;      /* IE 10 */
    display: flex;             /* Estándar */
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ========== PREFIJOS PARA FILTER ========== */

.ticket-logo,
.photo-image {
    -webkit-filter: brightness(1.1) contrast(1.1);
    -moz-filter: brightness(1.1) contrast(1.1);
    -ms-filter: brightness(1.1) contrast(1.1);
    -o-filter: brightness(1.1) contrast(1.1);
    filter: brightness(1.1) contrast(1.1);
}

/* ========== PREFIJOS PARA TEXT GRADIENT ========== */

.section-title {
    background: -webkit-linear-gradient(135deg, #fff 0%, #ffffff 100%);
    background: -moz-linear-gradient(135deg, #fff 0%, #ffffff 100%);
    background: linear-gradient(135deg, #fff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========== OPTIMIZACIONES DE RENDERING ========== */

/* Forzar aceleración GPU en elementos animados */
.ticket-logo-overlay,
.social-icon,
.video-card,
.photo-item,
.music-card,
.event-card,
.press-card {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* ========== FIXES PARA SAFARI iOS ========== */

/* Prevenir zoom en inputs en iOS */
input,
select,
textarea {
    font-size: 16px !important; /* Mínimo 16px previene zoom en iOS */
}

/* Smooth scrolling en iOS */
html {
    -webkit-overflow-scrolling: touch;
}

/* Fix para sticky elements en iOS */
.navbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ========== FIXES PARA ANDROID ========== */

/* Mejorar rendering en Android */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Prevenir delay de click en móviles */
a,
button,
.btn,
.social-icon,
.navbar-nav .nav-link {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* ========== FIXES PARA IE/EDGE ========== */

/* Fallback para backdrop-filter en navegadores que no lo soportan */
@supports not (backdrop-filter: blur(10px)) {
    .ticket-container,
    .video-card,
    .photo-item,
    .music-card,
    .event-card,
    .press-card {
        background: rgba(0, 0, 0, 0.7) !important; /* Fondo más opaco como fallback */
    }
}

/* Grid fallback para IE */
@supports not (display: grid) {
    .videos-grid,
    .photos-grid,
    .music-grid,
    .events-grid,
    .press-grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .video-item,
    .photo-item,
    .music-item,
    .event-item,
    .press-item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(25% - 20px);
        flex: 0 0 calc(25% - 20px);
        margin: 10px;
    }
}

/* ========== PERFORMANCE OPTIMIZATIONS ========== */

/* Optimizar rendering de imágenes */
img {
    -ms-interpolation-mode: bicubic; /* IE */
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: crisp-edges; /* Chrome */
}

/* Optimizar rendering de videos */
video,
iframe {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

/* ========== PRINT STYLES ========== */

@media print {
    .navbar,
    .social-icons,
    #youtube-background-container,
    .background {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}