/* Ruta esperada: public_html/css/fiesta_musica.css */

/* FONDO PRINCIPAL APPLE GLASS AMBIENT */
body { 
    background: radial-gradient(circle at top left, rgba(26, 11, 46, 1) 0%, #000000 50%, rgba(10, 17, 40, 1) 100%);
    background-attachment: fixed;
    color: #ffffff; 
    overflow-x: hidden; 
    font-family: 'SF Pro Display', 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1; 
}

/* HEADER FERIAL GLASS */
.hero-banner-musica {
    position: relative; width: 100%; height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); margin-bottom: 25px;
}
.hero-banner-musica::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/fiestadelamusicacartel.jpg') center center/cover no-repeat; z-index: 1; }
.hero-banner-musica::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%); z-index: 2; pointer-events: none; }
.hero-sombra-negra { position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 40%, rgba(0,0,0,0.6) 70%, transparent 100%); z-index: 3; pointer-events: none; }
.hero-luz-dorada { position: absolute; bottom: 0; left: 0; right: 0; height: 15%; background: radial-gradient(ellipse at bottom center, rgba(255, 215, 0, 0.95) 0%, rgba(255, 215, 0, 0.5) 50%, transparent 80%); z-index: 4; pointer-events: none; animation: resplandor-fuerte 3s infinite alternate ease-in-out; }
@keyframes resplandor-fuerte { 0% { opacity: 0.8; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1.4); } }

/* ANIMACIÓN DE BRILLOS (Círculos, Rombos, Cruces) */
.particulas-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden; }
.particula { position: absolute; bottom: -20px; opacity: 0; border-radius: 50%; animation: subir-brillo linear infinite; }

.p1 { left: 15%; width: 8px; height: 8px; --p-color: #bf5af2; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 4s; animation-delay: 0s; }
.p2 { left: 35%; width: 12px; height: 12px; --p-color: #FFD700; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 5.5s; animation-delay: 1.2s; }
.p3 { left: 55%; width: 8px; height: 8px; --p-color: #0A84FF; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 3.5s; animation-delay: 0.5s; }
.p4 { left: 75%; width: 10px; height: 10px; --p-color: #FF453A; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 4.8s; animation-delay: 2s; }
.p5 { left: 25%; width: 7px; height: 7px; --p-color: #30D158; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 6s; animation-delay: 0.8s; }
.p6 { left: 85%; width: 9px; height: 9px; --p-color: #FF9F0A; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 5s; animation-delay: 2.5s; }
.p7 { left: 45%; width: 14px; height: 14px; --p-color: #bf5af2; background: var(--p-color); box-shadow: 0 0 15px var(--p-color), 0 0 30px var(--p-color); animation-duration: 4.2s; animation-delay: 3s; }
.p8 { left: 65%; width: 10px; height: 10px; --p-color: #30D158; background: var(--p-color); box-shadow: 0 0 15px var(--p-color); animation-duration: 5.2s; animation-delay: 1.5s; }
.p9 { left: 5%; width: 11px; height: 11px; --p-color: #0A84FF; background: var(--p-color); box-shadow: 0 0 15px var(--p-color); animation-duration: 4.5s; animation-delay: 2.2s; }

.p-rombo { border-radius: 2px !important; animation-name: subir-brillo-rombo; }
.p-cruz { 
    background: var(--p-color) !important; 
    clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
    border-radius: 0 !important;
    filter: drop-shadow(0 0 8px var(--p-color));
    box-shadow: none !important;
}

@keyframes subir-brillo { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { transform: translateY(-100vh) scale(1.5); opacity: 0; } }
@keyframes subir-brillo-rombo { 0% { transform: translateY(0) scale(0.5) rotate(45deg); opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { transform: translateY(-100vh) scale(1.5) rotate(45deg); opacity: 0; } }

.btn-volver { position: absolute; left: 20px; top: 20px; color: white; text-decoration: none; font-size: 1.2rem; padding: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); transition: 0.3s; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 10; }
.btn-volver:hover { background: rgba(191,90,242,0.5); border-color: #bf5af2; transform: scale(1.1); }

/* BOTONES REDES SOCIALES HERO */
.hero-socials {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 10;
}
.hero-socials a {
    color: white;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.hero-socials a:hover {
    background: rgba(191,90,242,0.5);
    border-color: #bf5af2;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 5px 15px rgba(191,90,242,0.4);
    color: #fff;
}

.hero-scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; color: #fff; font-size: 2.5rem; animation: bounce 2s infinite; cursor: pointer; text-shadow: 0 0 15px rgba(255,215,0,0.8); transition: 0.3s; }
.hero-scroll-indicator:hover { color: #fff; text-shadow: 0 0 25px rgba(255,255,255,1); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } }

.pc-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* BOTON ARTISTAS MAIN */
.btn-artistas-main {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, rgba(191,90,242,0.2), rgba(10,132,255,0.2));
    backdrop-filter: blur(20px);
    color: white; font-weight: 700; font-size: 1.1rem; padding: 20px 30px;
    border-radius: 20px; text-decoration: none; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; 
    border: 1px solid rgba(191,90,242,0.5);
    margin-bottom: 30px; margin-top: 20px;
    text-transform: uppercase; letter-spacing: 1px;
}
.btn-artistas-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(191,90,242,0.4);
    border-color: #bf5af2;
    background: linear-gradient(135deg, rgba(191,90,242,0.4), rgba(10,132,255,0.4));
    color: white;
}

/* BUSCADORES */
.buscadores-zona { padding: 5px 0 25px 0; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 15px; max-width: 800px; margin: 0 auto; }
.buscador-wrapper { position: relative; width: 100%; }
.buscador-feria { width: 100%; padding: 16px 20px 16px 50px; border-radius: 24px; border: 1px solid rgba(191,90,242,0.5); background: rgba(20, 20, 25, 0.6); backdrop-filter: blur(20px); color: white; font-size: 1rem; outline: none; transition: 0.3s; font-family: 'Poppins', sans-serif; box-shadow: 0 0 25px rgba(191,90,242,0.3), inset 0 0 15px rgba(191,90,242,0.1); }
.buscador-feria:focus { background: rgba(0,0,0,0.8); border-color: #bf5af2; box-shadow: 0 0 40px rgba(191,90,242,0.5), inset 0 0 25px rgba(191,90,242,0.2); }
.icon-search { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #bf5af2; font-size: 1.2rem; }
.btn-limpiar-busqueda { background: rgba(231, 76, 60, 0.1); backdrop-filter: blur(10px); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); padding: 12px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 200px; margin: 0 auto; }
.btn-limpiar-busqueda:hover { background: rgba(231, 76, 60, 0.2); }

/* --- ESTILOS DEL DESPLEGABLE DEL BUSCADOR --- */
#listaResultados {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(25, 25, 30, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    display: none;
    text-align: left;
    border: 1px solid rgba(191,90,242, 0.5);
    padding: 10px;
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
}
#listaResultados::-webkit-scrollbar { display: none; }
#listaResultados { scrollbar-width: none; }

.resultado-item {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    background: transparent;
    border-radius: 15px;
    border: 1px solid transparent;
    margin-bottom: 5px;
    text-decoration: none;
    color: white;
}
.resultado-item:last-child { margin-bottom: 0; }
.resultado-item:hover, .resultado-item:focus-visible {
    background: rgba(191,90,242, 0.15);
    border-color: #bf5af2;
    box-shadow: 0 0 15px rgba(191,90,242, 0.3);
    transform: translateX(5px);
}

/* WIDGET EN VIVO Y BANNERS ANIMADOS (DISEÑO UNIFICADO) */
.fm-widget-container { background: rgba(20, 20, 25, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(191,90,242,0.6); border-radius: 24px; padding: 20px; margin: 0 auto 30px auto; box-shadow: 0 0 25px rgba(191,90,242,0.3), inset 0 0 15px rgba(191,90,242,0.1); transition: box-shadow 0.3s; position: relative; overflow: hidden; cursor:pointer;}
.fm-widget-container:hover { box-shadow: 0 0 40px rgba(191,90,242,0.5), inset 0 0 25px rgba(191,90,242,0.2); border-color: rgba(191,90,242,1); }
.fm-widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
.fm-widget-header h3 { margin: 0; color: white; font-size: 1.15rem; font-weight: 700; display:flex; align-items:center; gap:10px; text-shadow: 0 0 10px rgba(255,255,255,0.3);}
.fm-live-pulse { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #FF453A; box-shadow: 0 0 15px #FF453A; animation: fm-pulse-red 1.5s infinite; }

.fm-grid-stages { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 768px) { .fm-grid-stages { grid-template-columns: 1fr 1fr; } }

/* ANIMACIONES Y BORDES DORADOS PARA BANNERS */
.fm-live-banner {
    position: relative; border-radius: 16px; padding: 20px; 
    display: flex; align-items: center; justify-content: space-between; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    transition: 0.3s; min-height: 110px; margin-bottom: 15px;
    animation: resplandor-dorado-borde 3s infinite alternate !important;
}
.fm-live-banner::before {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}
.fm-live-banner.live-now {
    border-color: #FFD700 !important;
    animation: resplandor-dorado-borde-live 1.5s infinite alternate !important;
}
@keyframes resplandor-dorado-borde {
    0% { border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    100% { border-color: rgba(255, 215, 0, 0.8); box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), inset 0 0 15px rgba(255, 215, 0, 0.3); }
}
@keyframes resplandor-dorado-borde-live {
    0% { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
    100% { border-color: #FFEA00; box-shadow: 0 0 35px rgba(255, 215, 0, 1), inset 0 0 20px rgba(255, 215, 0, 0.6); }
}
@keyframes resplandor-verde {
    0% { box-shadow: 0 0 5px rgba(48,209,88,0.2); }
    100% { box-shadow: 0 0 15px rgba(48,209,88,0.8); border-color: #30D158; }
}
@keyframes resplandor-naranja {
    0% { box-shadow: 0 0 5px rgba(255,159,10,0.2); }
    100% { box-shadow: 0 0 15px rgba(255,159,10,0.8); border-color: #FF9F0A; }
}

/* Brillos Dorados */
.brillos-banner-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden;
}
.brillo-bd {
    position: absolute; background: #FFD700; border-radius: 50%; opacity: 0;
    box-shadow: 0 0 8px #FFD700, 0 0 15px #FFD700; animation: flotar-brillo-bd linear infinite;
}
@keyframes flotar-brillo-bd {
    0% { transform: translateY(20px) scale(0.5); opacity: 0; }
    50% { opacity: 0.9; }
    100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}

.fm-live-content { position: relative; z-index: 2; flex: 1; text-align: left; }
.fm-stage-title { font-size: 0.85rem; color: #a1a1a6; text-transform: uppercase; font-weight:700; letter-spacing: 1px; }
.fm-stage-artist { font-size: 1.3rem; font-weight: 800; color: white; margin: 5px 0; text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.fm-stage-next { font-size: 0.85rem; color: #f39c12; font-weight: 500; }

/* LIVE COUNTDOWN BOX ESTILOS */
.live-countdown-box {
    text-align: center; padding: 35px 20px; background: rgba(20, 20, 25, 0.8);
    border: 2px solid rgba(255, 69, 58, 0.6); border-radius: 24px;
    box-shadow: 0 0 30px rgba(255, 69, 58, 0.2), inset 0 0 20px rgba(255, 69, 58, 0.1);
    margin: 0 auto 30px auto; max-width: 600px; backdrop-filter: blur(15px);
    animation: resplandor-rojo 2s infinite alternate;
}
@keyframes resplandor-rojo {
    0% { box-shadow: 0 0 20px rgba(255, 69, 58, 0.2), inset 0 0 10px rgba(255, 69, 58, 0.1); border-color: rgba(255, 69, 58, 0.6); }
    100% { box-shadow: 0 0 40px rgba(255, 69, 58, 0.5), inset 0 0 20px rgba(255, 69, 58, 0.3); border-color: rgba(255, 69, 58, 1); }
}
.live-badge {
    background: #FF453A; color: white; padding: 8px 20px; border-radius: 30px;
    font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 10px; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(255,69,58,0.4);
}

/* --- MARCO ANIMADO PARA EL IFRAME --- */
.video-frame-animado {
    position: relative;
    margin: 0 auto;
    padding: 12px; 
    background: rgba(20, 20, 25, 0.8);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    box-shadow: 0 0 30px rgba(191,90,242,0.4), inset 0 0 20px rgba(191,90,242,0.2);
    border: 2px solid rgba(191,90,242,0.5);
    overflow: hidden;
    max-width: 1280px;
    animation: resplandor-marco-video 3s infinite alternate;
}
@keyframes resplandor-marco-video {
    0% { box-shadow: 0 0 20px rgba(191,90,242,0.3), inset 0 0 10px rgba(191,90,242,0.2); border-color: rgba(191,90,242,0.4); }
    100% { box-shadow: 0 0 40px rgba(191,90,242,0.6), inset 0 0 20px rgba(191,90,242,0.4); border-color: rgba(191,90,242,0.9); }
}

/* Pantalla de espera del video */
.placeholder-interactive { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    display:flex; flex-direction:column; align-items:center; justify-content:center; 
    background: radial-gradient(circle, rgba(191,90,242,0.15) 0%, transparent 70%); 
    z-index: 5; cursor: pointer; transition: 0.3s; text-align: center; 
}
.placeholder-interactive:hover { background: radial-gradient(circle, rgba(191,90,242,0.3) 0%, transparent 70%); }
.placeholder-interactive i { font-size: 4.5rem; color: rgba(255,255,255,0.7); margin-bottom: 15px; transition: 0.3s; filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); animation: bounce-y 2s infinite; }
.placeholder-interactive:hover i { color: #bf5af2; filter: drop-shadow(0 0 15px rgba(191,90,242,0.8)); }
.placeholder-interactive p { color: #e5e5ea; font-size: 1.1rem; font-weight: 600; margin:0; text-shadow: 0 0 10px #000; padding: 0 20px; }

@keyframes bounce-y { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    40% { transform: translateY(-20px); } 
    60% { transform: translateY(-10px); } 
}

.mini-particulas-doradas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.p-gold {
    position: absolute; bottom: -10px; border-radius: 50%; opacity: 0;
    background: #FFD700; box-shadow: 0 0 8px #FFD700, 0 0 15px #FFD700;
    animation: subir-dorado linear infinite;
}
.p-g1 { left: 15%; width: 5px; height: 5px; animation-duration: 3s; animation-delay: 0s; }
.p-g2 { left: 45%; width: 7px; height: 7px; animation-duration: 4.5s; animation-delay: 1s; }
.p-g3 { left: 75%; width: 6px; height: 6px; animation-duration: 3.8s; animation-delay: 0.5s; }
.p-g4 { left: 90%; width: 4px; height: 4px; animation-duration: 4s; animation-delay: 2s; }

/* MAPA */
.mapa-feria-container { 
    width: 100%; height: 450px; position: relative; background: #1d1d1f; 
    border-radius: 24px; overflow: hidden; padding: 4px; margin-bottom: 30px; 
}
.mapa-feria-container::before, .mapa-feria-container::after {
    content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
    z-index: 0; pointer-events: none;
}
.mapa-feria-container::before {
    background: conic-gradient(transparent, rgba(191,90,242,0.1), #bf5af2, transparent 30%);
    animation: rotate-borde 4s linear infinite; 
}
.mapa-feria-container::after {
    background: conic-gradient(transparent, rgba(255,215,0,0.1), #FFD700, transparent 30%);
    animation: rotate-borde 6s linear infinite reverse;
}
@keyframes rotate-borde { 100% { transform: rotate(360deg); } }
.map-bg-cover { position: absolute; inset: 4px; background: #1d1d1f; border-radius: 20px; z-index: 1; }
@media (min-width: 1024px) { .mapa-feria-container { height: 550px; } }
#map { position: relative; z-index: 2; border-radius: 20px; height: 100%; width: 100%; }
.btn-flotante-mapa { position: absolute; bottom: 20px; right: 20px; z-index: 3; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); cursor: pointer; transition: 0.3s; }
.btn-flotante-mapa:hover { background: rgba(191,90,242,0.5); transform: scale(1.05); border-color:#bf5af2;}

/* DISEÑO ARTÍSTICO DE GALERÍAS Y CARTELES */
.seccion-scroll { padding: 25px 30px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); border-radius: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.seccion-scroll h2 { font-size: 1.2rem; margin: 0 0 10px 0; color: white; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.seccion-scroll h2 i { color: #bf5af2; text-shadow: 0 0 8px rgba(191,90,242,0.5);}
.elementos-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 15px; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; margin-top:20px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;}
.elementos-scroll::-webkit-scrollbar { display: none; }

.galeria-artistica .item-scroll {
    width: 280px; height: 160px;
    flex-shrink: 0; border-radius: 16px; position: relative; scroll-snap-align: start; cursor: pointer;
    border: 2px solid rgba(191,90,242,0.2); background: rgba(0,0,0,0.8); box-shadow: 0 8px 25px rgba(0,0,0,0.5); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: pulse-border-purple 2s infinite alternate;
}
.galeria-artistica .item-scroll:hover {
    transform: translateY(-8px) scale(1.02); border-color: rgba(191,90,242,0.8); box-shadow: 0 15px 35px rgba(191,90,242,0.4);
}

.carteles-purpura .item-scroll { 
    border: 3px solid #bf5af2; box-shadow: 0 0 20px rgba(191,90,242,0.5); overflow: hidden; 
    animation: pulse-border-purple-cartel 2.5s infinite alternate;
}
.carteles-purpura .item-scroll:hover { border-color: #e056fd; box-shadow: 0 0 30px rgba(224,86,253,0.8); }

@keyframes pulse-border-purple {
    0% { border-color: rgba(191,90,242,0.3); box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
    100% { border-color: rgba(191,90,242,1); box-shadow: 0 0 20px rgba(191,90,242,0.6), inset 0 0 10px rgba(191,90,242,0.3); }
}
@keyframes pulse-border-purple-cartel {
    0% { border-color: rgba(191,90,242,0.5); box-shadow: 0 0 15px rgba(191,90,242,0.3); }
    100% { border-color: #e056fd; box-shadow: 0 0 30px rgba(224,86,253,0.8), inset 0 0 15px rgba(224,86,253,0.4); }
}

.galeria-artistica .item-scroll img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: 0.4s; border-radius: 14px;}
.galeria-artistica .item-scroll:hover img { opacity: 1; transform: scale(1.05); }

.galeria-artistica .item-scroll::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%); z-index: 1; pointer-events: none; border-radius: 14px;
}

.galeria-artistica .item-scroll::after {
    content: '\f00e'; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
    color: white; font-size: 2.5rem; opacity: 0; transition: 0.3s;
    text-shadow: 0 0 15px rgba(0,0,0,1); z-index: 2; pointer-events: none;
}
.galeria-artistica .item-scroll:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.galeria-artistica .tag { position: absolute; bottom: 0; left: 0; width: 100%; color: white; font-size: 0.8rem; padding: 12px; text-align: center; font-weight: 700; z-index: 3; text-transform: uppercase; letter-spacing: 1px; }

/* ANIMACIÓN ENTRADA FOTOS */
.foto-oculta { opacity: 0 !important; }
.animacion-entrada-foto {
    animation: fade-in-up-foto 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes fade-in-up-foto {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.filtros-wrapper { position: relative; margin-bottom: 10px; }

/* ESPACIO PARA EL SCROLL HINT */
.scroll-hint { text-align: center; color: #a1a1a6; font-size: 0.9rem; padding: 30px 0 20px 0; display: block; width: 100%; letter-spacing: 0.5px; }

/* SCROLLBAR PERSONALIZADO PARA FILTROS EN DESKTOP */
.filtros-feria { display: flex; gap: 12px; overflow-x: auto; padding: 0 5px 20px 5px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.filtros-feria::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .filtros-feria { scrollbar-width: thin; scrollbar-color: rgba(191,90,242,0.6) rgba(255,255,255,0.05); }
    .filtros-feria::-webkit-scrollbar { display: block; height: 8px; }
    .filtros-feria::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
    .filtros-feria::-webkit-scrollbar-thumb { background: rgba(191,90,242,0.6); border-radius: 4px; }
    .filtros-feria::-webkit-scrollbar-thumb:hover { background: rgba(191,90,242,0.9); }
}

.filtro-btn { background: rgba(255,255,255,0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); color: #e5e5ea; padding: 12px 22px; border-radius: 30px; white-space: nowrap; font-size: 0.9rem; font-weight: 500; cursor: pointer; flex-shrink: 0; scroll-snap-align: start; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.filtro-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.filtro-btn.activo { background: #bf5af2; border-color: #bf5af2; box-shadow: 0 0 15px rgba(191,90,242,0.5); font-weight: 600; color: white; }

.contenedor-scroll-locales { width: 100%; padding: 30px; max-height: 70vh; min-height: 400px; overflow-y: auto; background: rgba(20, 20, 25, 0.4); backdrop-filter: blur(35px); border: 1px solid rgba(191,90,242,0.5); border-radius: 35px; scroll-behavior: smooth; box-shadow: 0 0 25px rgba(191,90,242,0.25), inset 0 0 15px rgba(191,90,242,0.05); margin-bottom: 50px; transition: 0.3s; position: relative; z-index: 1;}
.contenedor-scroll-locales::-webkit-scrollbar { display: none; }
.contenedor-scroll-locales { scrollbar-width: none; }
.contenedor-scroll-locales:hover { box-shadow: 0 0 35px rgba(191,90,242,0.4); }

.grid-feria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; position: relative; z-index: 2; }
@media (min-width: 768px) { .grid-feria { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

.card-premium { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; position: relative; display: flex; flex-direction: column; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.card-premium:hover { border-color: rgba(191,90,242,0.6); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(191, 90, 242, 0.25); background: rgba(255,255,255,0.08); }
.card-premium .portada { position: relative; height: 130px; width: 100%; background: rgba(0,0,0,0.5); border-top-left-radius: 24px; border-top-right-radius: 24px; }
.card-premium .portada img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: 0.3s; border-top-left-radius: 24px; border-top-right-radius: 24px;}
.card-premium:hover .portada img { opacity: 1; transform: scale(1.05); }

/* CONTENEDOR DE ETIQUETAS JUNTAS */
.card-premium .tags-container { position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; z-index: 10; }
.card-premium .tag-estado, .card-premium .tag-domicilio { padding: 5px 10px; border-radius: 10px; font-size: 0.7rem; font-weight: bold; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; gap: 4px; }

.card-premium .abierto { background: rgba(46, 204, 113, 0.6); color: white; }
.card-premium .cerrado { background: rgba(231, 76, 60, 0.6); color: white; }
.card-premium .tag-domicilio { background: rgba(243, 156, 18, 0.8); color: white; }

.card-premium .info { padding: 15px; text-align: center; display: flex; flex-direction: column; flex-grow: 1; }
.card-premium h3 { margin: 0 0 5px 0; font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; display: flex; align-items: center; justify-content: center; gap: 5px; }
.card-premium p { margin: 0 0 15px 0; font-size: 0.75rem; color: #a1a1a6; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-ver-detalle { background: rgba(255,255,255,0.05); color: #bf5af2; border: 1px solid rgba(191,90,242,0.4); padding: 10px; border-radius: 14px; font-size: 0.85rem; font-weight: 600; transition: 0.3s; margin-top: auto; pointer-events: none; }
.card-premium:hover .btn-ver-detalle { background: rgba(191,90,242,0.15); border-color: #bf5af2; }

/* SPINNER DE CARGA ANIMADO CON SÍMBOLOS */
.loader-simbolos { display: flex; justify-content: center; align-items: center; gap: 20px; height: 60px; }
.simbolo-loader { width: 16px; height: 16px; animation: bounce-simb 0.6s infinite alternate ease-in-out; }
.s-circle { background: #bf5af2; border-radius: 50%; box-shadow: 0 0 15px #bf5af2; animation-delay: 0s; }
.s-rombo { background: #FFD700; border-radius: 2px; box-shadow: 0 0 15px #FFD700; animation-name: bounce-simb-rombo; animation-delay: 0.2s; }
.s-cruz { background: #0A84FF; clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%); filter: drop-shadow(0 0 5px #0A84FF); animation-delay: 0.4s; position: relative; }

@keyframes bounce-simb {
    0% { transform: translateY(10px) scale(0.8); opacity: 0.5; }
    100% { transform: translateY(-10px) scale(1.2); opacity: 1; }
}
@keyframes bounce-simb-rombo {
    0% { transform: translateY(10px) scale(0.8) rotate(45deg); opacity: 0.5; }
    100% { transform: translateY(-10px) scale(1.2) rotate(45deg); opacity: 1; }
}

/* BOTONES ESCENARIOS LIVE */
.btn-escenario-live {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,215,0,0.4); color: #e5e5ea; padding: 12px 25px; border-radius: 30px; cursor: pointer; transition: 0.3s; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(10px); font-size: 1rem;
}
.btn-escenario-live:hover, .btn-escenario-live.activo {
    background: rgba(255,215,0,0.25); border-color: #FFD700; color: #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.5); transform: translateY(-2px);
}

/* ESTILOS MODAL STREAMS */
.grid-streams { display: grid; grid-template-columns: 1fr; gap: 15px; max-height: 50vh; overflow-y: auto; padding-right: 5px; }
.grid-streams::-webkit-scrollbar { display: none; }
.grid-streams { scrollbar-width: none; }

.card-stream { display: flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 12px; cursor: pointer; transition: 0.3s; }
.card-stream:hover { background: rgba(191,90,242,0.15); border-color: #bf5af2; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(191,90,242,0.3); }
.card-stream img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; margin-right: 15px; border: 1px solid rgba(255,255,255,0.1); }
.card-stream-info { flex: 1; text-align: left; }
.card-stream-info h4 { margin: 0 0 5px 0; color: white; font-size: 1.05rem; }
.card-stream-info p { margin: 0; color: #FF453A; font-size: 0.8rem; font-weight: 600; display:flex; align-items:center; gap:5px; }
.card-stream-info p i { font-size: 10px; animation: fm-pulse-red 1.5s infinite; }

/* MODAL GLASS COMUN Y ESTILOS COPIADOS DE SECCION.PHP */
.modal-glass-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(15px); z-index: 4000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }

.modal-glass-content { 
    background: rgba(25, 25, 30, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px; width: 95%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: 30px; 
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    position: relative; animation: zoomIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); color: white;
}
.modal-glass-content::-webkit-scrollbar { display: none; }
.modal-glass-content { scrollbar-width: none; }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.btn-cerrar-glass { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); width: 40px; height: 40px; border-radius: 50%; color: white; font-size: 1.2rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; z-index:10;}
.btn-cerrar-glass:hover { background: rgba(231,76,60,0.8); transform: rotate(90deg); }

/* FOTOS EN MODALES CENTRADAS */
.modal-header-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
.modal-header-info img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-purple); box-shadow: 0 10px 20px rgba(0,0,0,0.3); display: block; margin: 0 auto; }
.modal-header-info h2 { margin: 0 0 5px 0; font-size: 1.5rem; color: white; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 8px;}
.modal-header-info p { margin: 0; color: #a1a1a6; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; text-align: center; width: 100%; }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.action-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 16px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: 0.3s; color: white; text-align: center; }
.btn-wa { background: rgba(48, 209, 88, 0.15); border: 1px solid rgba(48, 209, 88, 0.4); color: #30D158; }
.btn-wa:hover { background: #30D158; color: white; box-shadow: 0 5px 15px rgba(48,209,88,0.4); }
.btn-call { background: rgba(10, 132, 255, 0.15); border: 1px solid rgba(10, 132, 255, 0.4); color: #0A84FF; }
.btn-call:hover { background: #0A84FF; color: white; box-shadow: 0 5px 15px rgba(10,132,255,0.4); }
.btn-fb { background: rgba(24, 119, 242, 0.15); border: 1px solid rgba(24, 119, 242, 0.4); color: #1877F2; }
.btn-fb:hover { background: #1877F2; color: white; box-shadow: 0 5px 15px rgba(24,119,242,0.4); }
.btn-ig { background: rgba(225, 48, 108, 0.15); border: 1px solid rgba(225, 48, 108, 0.4); color: #E1306C; }
.btn-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; box-shadow: 0 5px 15px rgba(225,48,108,0.4); border-color: transparent; }
.btn-tk { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFF; }
.btn-tk:hover { background: #000; color: white; box-shadow: 0 5px 15px rgba(255,255,255,0.2); border-color: #69C9D0; }
.btn-web { background: rgba(152, 154, 158, 0.15); border: 1px solid rgba(152, 154, 158, 0.4); color: #989aa2; }
.btn-web:hover { background: #989aa2; color: white; box-shadow: 0 5px 15px rgba(152,154,158,0.4); }

.modal-desc { background: rgba(0,0,0,0.3); padding: 20px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); }

.seccion-galeria-modal { margin-top: 25px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 25px; }
.seccion-galeria-modal h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; color: white; display: flex; align-items: center; justify-content: center; gap: 8px; }
.galeria-scroll-modal { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: center; }
.galeria-scroll-modal::-webkit-scrollbar { display: none; }
.img-galeria-modal { width: 140px; height: 140px; object-fit: cover; border-radius: 16px; scroll-snap-align: start; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: 0.3s; }
.img-galeria-modal:hover { transform: scale(1.05); border-color: var(--brand-purple); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }

.carrusel-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(25px); z-index: 5000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; flex-direction: column; }
.carrusel-img-container { width: 100%; height: 100%; flex-grow: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; position: relative; }
.img-carrusel-activa { max-width: 95%; max-height: 85vh; object-fit: contain; border-radius: 16px; transition: transform 0.3s; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); user-select: none; -webkit-user-drag: none; cursor: zoom-in; display: block; margin: auto;}
.btn-cerrar-carrusel { position: absolute; top: calc(env(safe-area-inset-top, 20px) + 20px); right: 30px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2); color: white; width: 50px; height: 50px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; z-index: 5010; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.btn-cerrar-carrusel:hover { background: rgba(231,76,60,0.8); transform: rotate(90deg); }
.carrusel-controles-inferiores { position: absolute; bottom: calc(env(safe-area-inset-bottom, 20px) + 30px); left: 0; width: 100%; display: flex; justify-content: center; gap: 40px; z-index: 5010; }
.btn-nav-carrusel { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: white; width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.btn-nav-carrusel:hover { background: rgba(191,90,242,0.8); border-color: #bf5af2; transform: scale(1.1); }

.pantalla-vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding: 20px; }
.popup-custom { width: 100%; text-align: center; font-family: 'Poppins', sans-serif; padding: 0; color: white; }

/* --- BOTON IR A NOCHISGO --- */
.btn-ir-nochisgo {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #bf5af2, #0A84FF);
    color: white; font-weight: 700; font-size: 1.1rem; padding: 15px 30px;
    border-radius: 30px; text-decoration: none; box-shadow: 0 10px 25px rgba(191,90,242,0.4);
    transition: transform 0.3s, box-shadow 0.3s; border: 1px solid rgba(255,255,255,0.2);
}
.btn-ir-nochisgo:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(191,90,242,0.6);
}

/* --- FOOTER SIS TEXT --- */
.footer-sis-text { color: #86868b; font-size: 0.85rem; margin: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
.anim-letter { display: inline-block; color: #bf5af2; font-weight: 800; animation: resplandor-letra 2s infinite alternate; }
@keyframes resplandor-letra { 
    0% { text-shadow: 0 0 5px rgba(191,90,242,0.2); color: #bf5af2; transform: scale(1); } 
    100% { text-shadow: 0 0 15px rgba(191,90,242,0.8), 0 0 30px rgba(191,90,242,0.5); color: #e056fd; transform: scale(1.1); } 
}

/* --- ALIS CHAT --- */
#btn-alis-trigger { position: fixed; display: flex; z-index: 2001; cursor: pointer; background: linear-gradient(135deg, rgba(255,0,85,0.9), rgba(162,155,254,0.9)); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 30px rgba(255,0,85,0.4); color: white; width: 55px; height: 55px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.4rem; transition: 0.3s; bottom: 30px; left: 20px; }
#alis-chat-interface { position: fixed; z-index: 9999; bottom: 100px; left: 20px; width: calc(100% - 40px); max-width: 400px; height: 70vh; transform: scale(0.9); opacity: 0; transform-origin: bottom left; display: none; flex-direction: column; background: rgba(25, 25, 30, 0.85); backdrop-filter: blur(25px); border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15); }
@media (min-width: 769px) { #btn-alis-trigger { bottom: 30px; left: 30px; } #alis-chat-interface { bottom: 100px !important; left: 30px !important; width: 350px !important; height: 550px !important; max-height: 80vh !important; } }