body { font-family: 'Rajdhani', sans-serif; color: white; }
h1, h2, h3, .brand-font { font-family: 'Orbitron', sans-serif; text-transform: uppercase; }
.overlay-gradient { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); }
.fade-anim { animation: fadeEffect 1.5s; }
@keyframes fadeEffect { from {opacity: .4} to {opacity: 1} }

.tab-active { background-color: var(--neon-color); color: white; border-color: var(--neon-color); }
.tab-inactive { background-color: #18181b; color: #9ca3af; border-color: #27272a; }
.nav-btn.nav-active, .nav-btn-mobile.nav-active { border-left: 2px solid var(--neon-color); color: var(--neon-color); }

.mySlides { transition: opacity 0.8s ease; }
.mySlides.slide-hidden { opacity: 0; pointer-events: none; position: absolute; }
.mySlides.slide-visible { opacity: 1; pointer-events: auto; }

/* Efectos Portada */
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vinyl-playing #coverArt { border-radius: 50%; animation: vinylSpin 8s linear infinite; }
.vinyl-playing #loadingIndicator { border-radius: 50%; }
@keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.pulse-effect #coverArt { animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes slowZoom { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.zoom-effect #coverArt { animation: slowZoom 15s ease-in-out infinite; }
@keyframes neonGlow { 0% { box-shadow: inset 0 0 0px rgba(0,0,0,0); } 50% { box-shadow: inset 0 0 50px var(--neon-color); } 100% { box-shadow: inset 0 0 0px rgba(0,0,0,0); } }
.glow-effect::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: neonGlow 2s infinite; z-index: 5;}

/* Marquesinas */
.marquee-container { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.animate-marquee { animation: marqueeScroll 20s linear infinite; }
@keyframes marqueeScroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

.sponsor-marquee-container { display: flex; overflow: hidden; width: 100%; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.sponsor-marquee-track { display: flex; align-items: center; gap: 1.5rem; animation: sponsorScroll 20s linear infinite; width: max-content; }
.sponsor-marquee-track:hover { animation-play-state: paused; cursor: pointer; }
@keyframes sponsorScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Título de Canción Marquee */
@keyframes textScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.text-marquee { display: inline-block; animation: textScroll 15s linear infinite; padding-left: 10px; }
.mask-edges { mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }

/* Vúmetro CSS */
.vu-meter { display: flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0.3; transition: opacity 0.3s; }
.vu-playing { opacity: 1; }
.vu-bar { width: 4px; background-color: var(--neon-color); border-radius: 2px; }
.vu-style-bars .vu-bar { animation: vu-bounce 0.5s infinite alternate ease-in-out; animation-play-state: paused; }
.vu-style-bars.vu-playing .vu-bar { animation-play-state: running; }
.vu-style-bars .vu-bar:nth-child(1) { animation-duration: 0.4s; } .vu-style-bars .vu-bar:nth-child(2) { animation-duration: 0.6s; } .vu-style-bars .vu-bar:nth-child(3) { animation-duration: 0.3s; } .vu-style-bars .vu-bar:nth-child(4) { animation-duration: 0.5s; }
@keyframes vu-bounce { 0% { height: 20%; } 100% { height: 100%; } }

.mini-cover-spin { animation: spin 5s linear infinite; animation-play-state: paused; border-radius: 50%; }
.mini-spin-playing { animation-play-state: running; }
@keyframes spin { 100% { transform: rotate(360deg); } }

::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* Menú Lateral */
#desktopSidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 16rem; }
#desktopSidebar.collapsed { width: 5.5rem; }
#desktopSidebar .sidebar-text { transition: opacity 0.2s ease, width 0.3s ease; white-space: nowrap; overflow: hidden; opacity: 1; }
#desktopSidebar.collapsed .sidebar-text { opacity: 0; width: 0; margin: 0; }
#desktopSidebar.collapsed .brand-header { opacity: 0; width: 0; display: none; }

@keyframes wp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.wp-float { animation: wp-pulse 2s infinite; }