:root {
            --primary-red: #E62429;
            --primary-blue: #2B44FF;
            --primary-yellow: #FFD700;
            --dark-bg: #0a0a0a;
            --dark-card: #151515;
            --glass: rgba(255, 255, 255, 0.05);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }

        body { background-color: var(--dark-bg); color: white; line-height: 1.6; }

        /* --- PARTICLES BACKGROUND --- */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--dark-bg); /* Fondo base */
            background-image: url('');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50% 50%;
            opacity: 0.8; /* Ajusta la opacidad si quieres que el fondo base se vea más */
            z-index: 1;
        }

        /* --- NAVEGACIÓN --- */
        nav.main-nav {
            position: fixed;
            top: 0; width: 100%;
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            backdrop-filter: blur(10px);
            transition: background 0.3s ease-in-out; /* Transición para el scroll */
        }

        .nav-links { display: flex; gap: 30px; list-style: none; }
        .nav-links a { color: white; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: 0.3s; }
        .nav-links a:hover { color: var(--primary-yellow); }

        /* --- HERO SECTION --- */
       /* Modifica estas partes en tu <styl> */

        /* Ajuste del Hero para soportar fondo dinámico */
        .hero {
            position: relative;
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
            /* Configuración de fondo */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 0.8s ease-in-out; /* Aparece suavemente */
        }

        /* Filtro oscuro para asegurar legibilidad */
        .hero::before {
            content: "";
            position: absolute;
            top: 0; left: 0; 
            width: 100%; height: 100%;
            z-index: 2; /* Encima de la imagen, debajo de las partículas */
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 3; /* Encima del filtro oscuro */
        }

        .main-player {
            z-index: 10; /* Encima de todo */
            position: relative;
        }

        .main-player {
            background: var(--glass);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 50px;
            border-radius: 50px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.8);
            position: relative; /* Para que esté sobre las partículas */
            z-index: 10;
        }

        .play-btn {
            width: 100px; height: 100px;
            background: linear-gradient(45deg, var(--primary-red), var(--primary-yellow));
            border: none; border-radius: 50%;
            color: white; font-size: 2.5rem;
            cursor: pointer; margin-bottom: 20px;
            transition: 0.4s;
        }

        .play-btn:hover { transform: scale(1.1) rotate(5deg); }

        /* --- SECCIÓN NOSOTROS --- */
        .section { padding: 100px 10%; text-align: center; }
        .section-title { font-size: 2.5rem; margin-bottom: 50px; font-weight: 900; letter-spacing: -1px; }
        .section-title span { color: var(--primary-red); }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            text-align: left;
        }

        .about-card {
            background: var(--dark-card);
            padding: 40px;
            border-radius: 20px;
            border-bottom: 5px solid var(--primary-blue);
        }

        /* --- PROGRAMACIÓN --- */
        .grid-schedule {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .schedule-item {
            background: var(--dark-card);
            padding: 30px;
            border-radius: 15px;
            transition: 0.3s;
        }

        .schedule-item:hover { transform: translateY(-10px); background: #202020; }
        .schedule-item i { color: var(--primary-yellow); margin-bottom: 15px; }

        /* --- FOOTER --- */
        footer {
            background: #050505;
            padding: 60px 10%;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
        }

        .footer-info { display: flex; flex-direction: column; }
        .footer-logo img { max-width: 150px; margin-bottom: 20px; }
        .btn-whatsapp {
            background: #25D366;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: 0.3s;
        }
        .btn-whatsapp:hover { background: #1da851; transform: translateY(-3px); }


        /* Sidebar Redes */
        .social-sidebar {
            position: fixed; left: 20px; top: 50%;
            transform: translateY(-50%); display: flex;
            flex-direction: column; gap: 15px; z-index: 1001;
        }
        .social-icon {
            width: 40px; height: 40px; background: var(--glass);
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center; color: white; text-decoration: none;
            transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);
            font-size: 1.1em;
        }
        .social-icon:hover { transform: scale(1.2); }
        .social-icon.fb:hover { background: #1877F2; }
        .social-icon.ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
        .social-icon.wa:hover { background: #25D366; }


        @media (max-width: 768px) {
            .about-grid { grid-template-columns: 1fr; }
            nav.main-nav { padding: 20px; }
            .nav-links { display: none; } /* O puedes hacer un menú hamburguesa */
            .main-player { padding: 30px; border-radius: 30px; }
            .play-btn { width: 80px; height: 80px; font-size: 2rem; }
            .section-title { font-size: 2rem; }
        }

        /* Estilos del Loader */
        #loader-wrapper {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: #0a0a0a;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Por encima de todo */
            transition: opacity 0.8s ease, visibility 0.8s;
        }

        .loader-content {
            text-align: center;
        }

        .loader-logo {
            max-width: 150px;
            margin-bottom: 20px;
            animation: pulse-loader 2s infinite ease-in-out;
        }

        .loader-bar {
            width: 200px;
            height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            margin: 0 auto 10px;
            overflow: hidden;
        }

        .loader-bar .progress {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
            animation: loading-bar 2.5s forwards ease-in-out;
        }

        @keyframes pulse-loader {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }

        @keyframes loading-bar {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        /* Clase para ocultar el loader */
        .loader-hidden {
            opacity: 0;
            visibility: hidden;
        }

        .aboutSwiper {
            width: 100%;
            height: 450px;
            border-radius: 20px;
            filter: grayscale(20%) brightness(0.9);
        }

        .aboutSwiper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Personalización de los puntitos para que combinen con tu logo */
        .aboutSwiper .swiper-pagination-bullet-active {
            background: var(--primary-red) !important;
        }

        .grid-schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.schedule-item {
    background: var(--dark-card);
    padding: 35px 25px;
    border-radius: 20px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.schedule-item:hover {
    transform: translateY(-10px);
    background: #1a1a1a;
    border-color: var(--primary-red);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.schedule-item i {
    color: var(--primary-yellow);
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.schedule-item h3 {
    font-size: 1.4rem;
    color: #fff;
}

/* Contenedor de la foto */
.img-container {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
    position: relative;
}

.producer-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la foto no se estire */
    border-radius: 50%;
    border: 3px solid var(--primary-yellow);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    transition: transform 0.3s ease;
}

.schedule-item:hover .producer-img {
    transform: scale(1.1);
    border-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(230, 36, 41, 0.4);
}

/* Estilos de texto para la parrilla */
.locutor-name {
    color: var(--primary-yellow);
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.desc-text {
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.7;
    font-weight: 300;
}


.share-container {
    text-align: center;
    margin-top: 30px;
}

.share-container p {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Colores específicos al hacer hover */
.share-btn.wa:hover { background: #25D366; box-shadow: 0 0 15px #25D366; border-color: #25D366; }
.share-btn.fb:hover { background: #1877F2; box-shadow: 0 0 15px #1877F2; border-color: #1877F2; }
.share-btn.tw:hover { background: #000000; box-shadow: 0 0 15px rgba(255,255,255,0.2); border-color: #fff; }
.share-btn.tg:hover { background: #0088cc; box-shadow: 0 0 15px #0088cc; border-color: #0088cc; }

.share-btn:hover {
    transform: translateY(-5px);
}