/* --- CONFIGURACIONES GENERALES --- */
html { 
    scroll-behavior: smooth; /* Mantiene el deslizamiento suave nativo */
}

body { 
    /* Cambiamos el azul oscuro por un negro puro y profundo de consola de audio */
    background-color: #08080a; 
    /* El blanco tiza/plata ahora es un gris zinc un toque más suave para que no queme los ojos */
    color: #d4d4d8; 
}
/* --- ANIMACIÓN ONDAS DE AUDIO DEL REPRODUCTOR CHICO --- */
.bar { 
    width: 4px; 
    height: 15px; 
    background-color: #f59e0b; /* Amarillo Ámbar / Dorado principal de FM La Mega */
    border-radius: 2px; 
    animation: bounce 1s ease-in-out infinite alternate; 
}

.bar:nth-child(2) { 
    animation-delay: 0.2s; 
    height: 25px; 
    background-color: #ea580c; /* Naranja enérgico como el "102.5" del logo */
}

.bar:nth-child(3) { 
    animation-delay: 0.4s; 
    height: 35px; 
    background-color: #fbbf24; /* Destello dorado más claro */
}

.bar:nth-child(4) { 
    animation-delay: 0.1s; 
    height: 20px; 
    background-color: #ea580c; 
}

@keyframes bounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1.1); }
}

.paused-animation .bar { 
    animation-play-state: paused; 
    transform: scaleY(0.3); 
    opacity: 0.4; 
}

/* --- FRECUENCIAS DE FONDO GIGANTES AMBER & ORANGE --- */
.frecuencia-bar {
    width: 4%;
    background: linear-gradient(to top, #ea580c, #f59e0b, transparent); /* Unificando el Naranja y Dorado */
    border-radius: 9999px 9999px 0 0;
    height: var(--h);
    transform-origin: bottom;
    animation: bounceFrecuencia var(--t) infinite ease-in-out alternate;
    animation-delay: var(--d);
    opacity: 0.15; 
}

@keyframes bounceFrecuencia {
    0% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}

/* Congela las barritas abajo si pausás la radio */
.paused-animation .frecuencia-bar {
    animation-play-state: paused !important;
    transform: scaleY(0.08) !important;
    opacity: 0.1 !important;
}

/* --- UTILIDADES DE DISEÑO --- */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Inversión de color del mapa para encajar con el modo oscuro */
.style-map {
    border: 0; 
    filter: grayscale(1) invert(1) contrast(1.2);
}

/* Asegura que las imágenes dentro de los contenedores de carrusel no se deformen */
#carousel-sidebar-container img, 
#carousel-container img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Asegura comportamiento responsivo del contenedor de video */
.aspect-video {
    aspect-ratio: 16 / 9;
}