<!-- SQL Publicidad: SELECT * FROM publicidad WHERE activo = 1 ORDER BY posicion, orden -->
<!-- Número de publicidades encontradas: 7 -->
<!-- Anuncio encontrado: 
Array
(
    [id] => 4
    [titulo] => CHORIZO DE POLLO CHORILOCO: LIGERO, JUGOSO Y BIEN PARRILLADO
    [descripcion] => En la Terminal de Santa Elena, el viaje empieza con sabor.
El chorizo de pollo Choriloco es perfecto para quienes quieren algo más ligero, sin perder el gusto de la parrilla: jugoso, doradito y listo para llevar.
Disfruta nuestros 4 sabores de chorizo de pollo mientras esperas tu bus o paseas por el centro comercial.
Choriloco: tu parada obligatoria antes de seguir el camino.
    [imagen] => publicidad/publicidad_1764740028.png
    [url] => https://www.facebook.com/profile.php?id=61580516984243
    [posicion] => content_bottom
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-11-25 15:24:06
    [updated_at] => 2025-12-03 01:54:58
    [total_clicks] => 5
    [ultima_actualizacion] => 2025-12-03 01:54:58
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 5
    [titulo] => CHORIZO DE RES CHORILOCO: FUEGO, SABOR Y MALECÓN
    [descripcion] => En pleno Malecón 2000 de Guayaquil, el sol brilla, el río Guayas corre…
y la parrilla de Choriloco no se apaga.
El chorizo de res Choriloco es para los que aman el sabor intenso: carne de res bien sazonada, al carbón, jugosa y humeante, perfecta para compartir mientras paseas junto al río.
Con nuestros 4 sabores de chorizo de res, cada bocado sabe a momento inolvidable frente al Guayas.
Choriloco: donde el Malecón también huele a parrilla.
    [imagen] => publicidad/publicidad_1764743776.png
    [url] => https://www.tiktok.com/@chorilocooficial
    [posicion] => content_bottom
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-11-25 15:31:55
    [updated_at] => 2025-12-03 01:53:45
    [total_clicks] => 7
    [ultima_actualizacion] => 2025-12-03 01:53:45
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 2
    [titulo] => CHORIZO DE PESCADO CHORILOCO: ¡EL SABOR DEL MAR AL CARBÓN EN BALLENITA
    [descripcion] => El mar ya no solo se mira… ¡se muerde!
Prueba el chorizo de pescado Choriloco, hecho con pescado fresco y a la parrilla, en 4 sabores irresistibles que te acompañan frente al atardecer del malecón de Ballenita.
Perfecto para compartir, para antojarse y para volverse fan.
 ¿Listo para descubrir tu sabor Choriloco favorito?
    [imagen] => publicidad/publicidad_1764741063.png
    [url] => https://www.instagram.com/chorilocooficial?utm_source=qr&amp;igsh=MWR6aHRwajdxZXAwcw==
    [posicion] => content_top
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-11-25 14:19:48
    [updated_at] => 2025-12-03 01:52:38
    [total_clicks] => 2
    [ultima_actualizacion] => 2025-12-03 01:52:38
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 8
    [titulo] => TU SUEÑO CUESTA CENTAVOS  ¡ALERTA MÁXIMA DE VELOCIDAD!
    [descripcion] => ¿Estás listo para domar a la bestia? Esta Kawasaki Ninja ZX10R NO es para cualquiera, ¡es para quien se atreva a ganarla! Por solo $0.50 USD (sí, CINKUENCA centavos) entras al sorteo de esta máquina de precisión japonesa O su valor total en efectivo Compra mínima de 10 stickers (¡Solo $5 dólares por 10 chances!). BONUS EXPLOSIVO: Además de la moto, ¡sorteamos 10 PREMIOS de $250 USD en efectivo! URGENCIA REAL: ¡Son cupos limitados hasta agotar existencias y vuelan rápido! Deja de verla en fotos y empieza a verla en tu garaje. ¡ASEGURA TUS NÚMEROS YA MISMO! ESCRÍBENOS AL WHATSAPP O DALE CLIC AL ENLACE DE LA BIO PARA COMPRAR DIRECTO.
    [imagen] => publicidad/publicidad_1764744631.jpg
    [url] => https://w.app/0967219859
    [posicion] => content_top
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-12-02 16:37:59
    [updated_at] => 2025-12-03 01:50:31
    [total_clicks] => 4
    [ultima_actualizacion] => 2025-12-03 01:50:31
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 3
    [titulo] => CHORIZO DE CERDO CHORILOCO: SABOR CASERO, FUEGO DE PARRILLA
    [descripcion] => En la plaza de mercado de La Libertad, el día empieza con aroma a campo y a carbón.
Así nace el chorizo de cerdo Choriloco: carne seleccionada, especias frescas, manos expertas y una parrilla encendida desde temprano.
Mientras la gente compra sus víveres, otros ya están disfrutando de nuestros 4 sabores de chorizo, recién hechos y llenos de sabor.
Choriloco: donde el mercado huele a parrilla y a chorizo del bueno.
    [imagen] => publicidad/publicidad_1764742840.png
    [url] => https://www.tiktok.com/@chorilocooficial
    [posicion] => footer
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-11-25 14:48:32
    [updated_at] => 2025-12-03 01:56:11
    [total_clicks] => 3
    [ultima_actualizacion] => 2025-12-03 01:56:11
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 6
    [titulo] => CHORILOCO 4 SABORES: LA PARRILLA REYNA DEL MERCADO
    [descripcion] => En el comercio de víveres de Montebello, Guayaquil, hay un puesto que se reconoce solo por el olor:
la parrilla de Choriloco 

Aquí se juntan los 4 sabores que enloquecen a todos:
pescado, cerdo, pollo y res, bien doraditos, jugosos y listos para el antojo.
Entre el sol, el movimiento del mercado y el humo de la parrilla,
Choriloco se convierte en la parada obligatoria de los que aman el buen chorizo.
    [imagen] => publicidad/publicidad_1764743455.png
    [url] => https://linkbio.co/choriloco
    [posicion] => header
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-11-25 15:47:39
    [updated_at] => 2025-12-03 01:51:56
    [total_clicks] => 9
    [ultima_actualizacion] => 2025-12-03 01:51:56
)

-->
<!-- Anuncio encontrado: 
Array
(
    [id] => 7
    [titulo] => E15 RADIO MOTERA
    [descripcion] => Ya puedes acceder a todas nuestras plataformas desde un solo enlace.
Streaming, redes sociales, WhatsApp y más, todo centralizado para ti.
    [imagen] => publicidad/publicidad_1764709222.png
    [url] => https://linktr.ee/e15radiomotera
    [posicion] => header
    [activo] => 1
    [orden] => 0
    [created_at] => 2025-12-02 15:51:51
    [updated_at] => 2025-12-02 16:01:04
    [total_clicks] => 3
    [ultima_actualizacion] => 2025-12-02 16:01:04
)

-->
<!-- Publicidades organizadas por posición: 
Array
(
    [content_top] => Array
        (
            [0] => Array
                (
                    [id] => 2
                    [titulo] => CHORIZO DE PESCADO CHORILOCO: ¡EL SABOR DEL MAR AL CARBÓN EN BALLENITA
                    [descripcion] => El mar ya no solo se mira… ¡se muerde!
Prueba el chorizo de pescado Choriloco, hecho con pescado fresco y a la parrilla, en 4 sabores irresistibles que te acompañan frente al atardecer del malecón de Ballenita.
Perfecto para compartir, para antojarse y para volverse fan.
 ¿Listo para descubrir tu sabor Choriloco favorito?
                    [imagen] => publicidad/publicidad_1764741063.png
                    [url] => https://www.instagram.com/chorilocooficial?utm_source=qr&amp;igsh=MWR6aHRwajdxZXAwcw==
                    [posicion] => content_top
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-11-25 14:19:48
                    [updated_at] => 2025-12-03 01:52:38
                    [total_clicks] => 2
                    [ultima_actualizacion] => 2025-12-03 01:52:38
                )

            [1] => Array
                (
                    [id] => 8
                    [titulo] => TU SUEÑO CUESTA CENTAVOS  ¡ALERTA MÁXIMA DE VELOCIDAD!
                    [descripcion] => ¿Estás listo para domar a la bestia? Esta Kawasaki Ninja ZX10R NO es para cualquiera, ¡es para quien se atreva a ganarla! Por solo $0.50 USD (sí, CINKUENCA centavos) entras al sorteo de esta máquina de precisión japonesa O su valor total en efectivo Compra mínima de 10 stickers (¡Solo $5 dólares por 10 chances!). BONUS EXPLOSIVO: Además de la moto, ¡sorteamos 10 PREMIOS de $250 USD en efectivo! URGENCIA REAL: ¡Son cupos limitados hasta agotar existencias y vuelan rápido! Deja de verla en fotos y empieza a verla en tu garaje. ¡ASEGURA TUS NÚMEROS YA MISMO! ESCRÍBENOS AL WHATSAPP O DALE CLIC AL ENLACE DE LA BIO PARA COMPRAR DIRECTO.
                    [imagen] => publicidad/publicidad_1764744631.jpg
                    [url] => https://w.app/0967219859
                    [posicion] => content_top
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-12-02 16:37:59
                    [updated_at] => 2025-12-03 01:50:31
                    [total_clicks] => 4
                    [ultima_actualizacion] => 2025-12-03 01:50:31
                )

        )

    [content_bottom] => Array
        (
            [0] => Array
                (
                    [id] => 4
                    [titulo] => CHORIZO DE POLLO CHORILOCO: LIGERO, JUGOSO Y BIEN PARRILLADO
                    [descripcion] => En la Terminal de Santa Elena, el viaje empieza con sabor.
El chorizo de pollo Choriloco es perfecto para quienes quieren algo más ligero, sin perder el gusto de la parrilla: jugoso, doradito y listo para llevar.
Disfruta nuestros 4 sabores de chorizo de pollo mientras esperas tu bus o paseas por el centro comercial.
Choriloco: tu parada obligatoria antes de seguir el camino.
                    [imagen] => publicidad/publicidad_1764740028.png
                    [url] => https://www.facebook.com/profile.php?id=61580516984243
                    [posicion] => content_bottom
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-11-25 15:24:06
                    [updated_at] => 2025-12-03 01:54:58
                    [total_clicks] => 5
                    [ultima_actualizacion] => 2025-12-03 01:54:58
                )

            [1] => Array
                (
                    [id] => 5
                    [titulo] => CHORIZO DE RES CHORILOCO: FUEGO, SABOR Y MALECÓN
                    [descripcion] => En pleno Malecón 2000 de Guayaquil, el sol brilla, el río Guayas corre…
y la parrilla de Choriloco no se apaga.
El chorizo de res Choriloco es para los que aman el sabor intenso: carne de res bien sazonada, al carbón, jugosa y humeante, perfecta para compartir mientras paseas junto al río.
Con nuestros 4 sabores de chorizo de res, cada bocado sabe a momento inolvidable frente al Guayas.
Choriloco: donde el Malecón también huele a parrilla.
                    [imagen] => publicidad/publicidad_1764743776.png
                    [url] => https://www.tiktok.com/@chorilocooficial
                    [posicion] => content_bottom
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-11-25 15:31:55
                    [updated_at] => 2025-12-03 01:53:45
                    [total_clicks] => 7
                    [ultima_actualizacion] => 2025-12-03 01:53:45
                )

        )

    [header] => Array
        (
            [0] => Array
                (
                    [id] => 6
                    [titulo] => CHORILOCO 4 SABORES: LA PARRILLA REYNA DEL MERCADO
                    [descripcion] => En el comercio de víveres de Montebello, Guayaquil, hay un puesto que se reconoce solo por el olor:
la parrilla de Choriloco 

Aquí se juntan los 4 sabores que enloquecen a todos:
pescado, cerdo, pollo y res, bien doraditos, jugosos y listos para el antojo.
Entre el sol, el movimiento del mercado y el humo de la parrilla,
Choriloco se convierte en la parada obligatoria de los que aman el buen chorizo.
                    [imagen] => publicidad/publicidad_1764743455.png
                    [url] => https://linkbio.co/choriloco
                    [posicion] => header
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-11-25 15:47:39
                    [updated_at] => 2025-12-03 01:51:56
                    [total_clicks] => 9
                    [ultima_actualizacion] => 2025-12-03 01:51:56
                )

            [1] => Array
                (
                    [id] => 7
                    [titulo] => E15 RADIO MOTERA
                    [descripcion] => Ya puedes acceder a todas nuestras plataformas desde un solo enlace.
Streaming, redes sociales, WhatsApp y más, todo centralizado para ti.
                    [imagen] => publicidad/publicidad_1764709222.png
                    [url] => https://linktr.ee/e15radiomotera
                    [posicion] => header
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-12-02 15:51:51
                    [updated_at] => 2025-12-02 16:01:04
                    [total_clicks] => 3
                    [ultima_actualizacion] => 2025-12-02 16:01:04
                )

        )

    [sidebar] => Array
        (
        )

    [footer] => Array
        (
            [0] => Array
                (
                    [id] => 3
                    [titulo] => CHORIZO DE CERDO CHORILOCO: SABOR CASERO, FUEGO DE PARRILLA
                    [descripcion] => En la plaza de mercado de La Libertad, el día empieza con aroma a campo y a carbón.
Así nace el chorizo de cerdo Choriloco: carne seleccionada, especias frescas, manos expertas y una parrilla encendida desde temprano.
Mientras la gente compra sus víveres, otros ya están disfrutando de nuestros 4 sabores de chorizo, recién hechos y llenos de sabor.
Choriloco: donde el mercado huele a parrilla y a chorizo del bueno.
                    [imagen] => publicidad/publicidad_1764742840.png
                    [url] => https://www.tiktok.com/@chorilocooficial
                    [posicion] => footer
                    [activo] => 1
                    [orden] => 0
                    [created_at] => 2025-11-25 14:48:32
                    [updated_at] => 2025-12-03 01:56:11
                    [total_clicks] => 3
                    [ultima_actualizacion] => 2025-12-03 01:56:11
                )

        )

)

-->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title> E 15 RADIO MOTERA</title>
        <link rel="icon" type="image/x-icon" href="uploads/favicon_1746236714.png">
        
    <!-- Manifest y PWA -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#000000">
    
    <!-- Cargar Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Cargar Font Awesome con todos los estilos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            /* Colores base - modo claro */
            --primary-light: #A5C4D4;
            --secondary-light: #D4A5C4;
            --accent-light: #C4D4A5;
            --neon-pink-light: #FF6EC7;
            --neon-blue-light: #00F0FF;
            --neon-green-light: #7AFF7A;
            --dark-light: #F0F5F9;
            --light-light: #2E5266;
            --card-bg-light: rgba(240, 245, 249, 0.9);
            --glass-light: rgba(240, 245, 249, 0.85);
            --glass-border-light: rgba(240, 245, 249, 0.95);

            /* Colores base - modo oscuro */
            --primary-dark: #4A6FA5;
            --secondary-dark: #A54A8E;
            --accent-dark: #8EA54A;
            --neon-pink-dark: #FF2D9E;
            --neon-blue-dark: #00D0FF;
            --neon-green-dark: #52FF52;
            --dark-dark: #121212;
            --light-dark: #E0E5E9;
            --card-bg-dark: rgba(30, 35, 40, 0.9);
            --glass-dark: rgba(30, 35, 40, 0.85);
            --glass-border-dark: rgba(30, 35, 40, 0.95);

            /* Variables dinámicas (se cambiarán con JavaScript) */
            --primary: var(--primary-light);
            --secondary: var(--secondary-light);
            --accent: var(--accent-light);
            --neon-pink: var(--neon-pink-light);
            --neon-blue: var(--neon-blue-light);
            --neon-green: var(--neon-green-light);
            --dark: var(--dark-light);
            --light: var(--light-light);
            --card-bg: var(--card-bg-light);
            --glass: var(--glass-light);
            --glass-border: var(--glass-border-light);

            /* Variables comunes */
            --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --neon-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);

            --logo-height: 100px;
            --header-height: calc(var(--logo-height) + 2rem); /* Altura del logo + padding */
        }

        /* Estilos para modo oscuro */
        [data-theme="dark"] {
            --primary: var(--primary-dark);
            --secondary: var(--secondary-dark);
            --accent: var(--accent-dark);
            --neon-pink: var(--neon-pink-dark);
            --neon-blue: var(--neon-blue-dark);
            --neon-green: var(--neon-green-dark);
            --dark: var(--dark-dark);
            --light: var(--light-dark);
            --card-bg: var(--card-bg-dark);
            --glass: var(--glass-dark);
            --glass-border: var(--glass-border-dark);
        }
        
        /* Estilos específicos para la sección de locutores en modo oscuro - Solución mejorada */
        [data-theme="dark"] .locutor-card,
        [data-theme="dark"] .locutor-info {
            background-color: #FFFFFF !important; /* Fondo blanco puro para máximo contraste */
            border: 2px solid var(--primary-dark) !important;
            box-shadow: 0 0 15px rgba(74, 111, 165, 0.3) !important;
        }
        
        [data-theme="dark"] .locutor-card *,
        [data-theme="dark"] .locutor-info * {
            color: #121212 !important; /* Texto casi negro para máximo contraste */
        }
        
        /* Aseguramos que los íconos de redes sociales tengan buen contraste */
        [data-theme="dark"] .locutor-card .social-icon i,
        [data-theme="dark"] .locutor-info .social-icon i {
            color: var(--primary-dark) !important;
            text-shadow: none !important;
        }
        
        /* Estilos adicionales para las tarjetas de locutores en modo oscuro */
        [data-theme="dark"] .card.glass-card {
            background-color: #FFFFFF !important; /* Fondo blanco puro */
            border: 2px solid #4A6FA5 !important; /* Borde azul oscuro */
            box-shadow: 0 0 15px rgba(74, 111, 165, 0.5) !important;
        }
        
        [data-theme="dark"] .card.glass-card h5 {
            color: #000000 !important; /* Negro puro para el nombre */
            font-weight: bold !important;
        }
        
        [data-theme="dark"] .card.glass-card p {
            color: #333333 !important; /* Gris oscuro para la descripción */
        }
        
        [data-theme="dark"] .card.glass-card .social-links a {
            color: #4A6FA5 !important; /* Azul para los íconos sociales */
        }

        /* Estilos del interruptor de tema */
        .theme-switcher {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-left: 1rem;
        }

        .theme-switcher-label {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            margin: 0;
        }

        .theme-switcher-input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .theme-switcher-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--glass-dark);
            transition: var(--transition);
            border-radius: 34px;
            border: 1px solid var(--glass-border);
        }

        .theme-switcher-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 2px;
            background: var(--neon-pink);
            transition: var(--transition);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 110, 199, 0.5);
        }

        .theme-switcher-input:checked + .theme-switcher-slider {
            background: var(--glass);
        }

        .theme-switcher-input:checked + .theme-switcher-slider:before {
            transform: translateX(24px);
            background: var(--neon-blue);
            box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
        }

        .theme-icon {
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .sun-icon {
            color: var(--neon-pink);
        }

        .moon-icon {
            color: var(--neon-blue);
        }

        /* Fondo Dinámico */
        .dynamic-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            background: var(--dark);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(20px);
            opacity: 0;
            animation: float 15s infinite linear;
            transform: translateZ(0);
        }

        @keyframes float {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0;
            }
            10% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.5;
                transform: translate(50vw, 25vh) scale(1.2);
            }
            90% {
                opacity: 0.3;
            }
            100% {
                transform: translate(100vw, 50vh) scale(1);
                opacity: 0;
            }
        }

        .interactive-particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(15px);
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        }

        body {
            background: transparent;
            color: var(--light);
            min-height: 100vh;
            overflow-x: hidden;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        @font-face {
            font-family: 'Poppins';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
        }

        @font-face {
            font-family: 'Poppins';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlEA.ttf) format('truetype');
        }

        /* Estilos de navegación */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
            border-bottom: 1px solid var(--glass-border);
            height: var(--header-height);
        }

        /* Estilos del logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            color: var(--light);
            transition: all 0.3s ease;
            height: var(--logo-height);
        }

        .logo img {
            max-height: var(--logo-height);
            width: auto;
            object-fit: contain;
        }

        .logo i {
            font-size: 1.8rem;
            color: var(--neon-pink);
            transition: transform 0.3s ease;
        }

        .logo-text {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text);
        }

        .logo:hover {
            color: var(--neon-pink);
        }

        .logo:hover i {
            transform: scale(1.1);
        }

        /* Menú hamburguesa para móviles */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
            z-index: 1001;
        }

        .menu-toggle span {
            display: block;
            height: 3px;
            width: 100%;
            background: var(--light);
            border-radius: 3px;
            transition: var(--transition);
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .nav-links a {
            color: var(--text);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
            padding: 0.5rem 0;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nav-links a:hover {
            color: var(--neon-pink);
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.5);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--neon-blue);
            transition: var(--transition);
            box-shadow: var(--neon-shadow);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Mini reproductor */
        .mini-player {
            position: fixed;
            top: -100px;
            left: 0;
            width: 100%;
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--glass-border);
            padding: 10px 5%;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .mini-player.visible {
            top: var(--header-height);
        }

        .mini-track-info {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-grow: 1;
            min-width: 0;
        }

        .mini-album-art {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--neon-blue);
            box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
            transition: transform 0.5s ease;
        }

        .mini-album-art.playing {
            animation: spin 5s linear infinite;
        }

        .mini-track-text {
            min-width: 0;
        }

        .mini-track-title {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.9rem;
            color: var(--text);
        }

        .mini-track-artist {
            font-size: 0.8rem;
            color: var(--neon-blue);
            opacity: 0.9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
        }

        .mini-player-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .mini-play-btn {
            background: var(--neon-pink);
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 0 10px rgba(255, 110, 199, 0.5);
        }

        .mini-play-btn:hover {
            transform: scale(1.1);
            background: var(--neon-blue);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.7);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Reproductor principal */
        .player-container {
            margin-top: calc(var(--header-height) + 2rem);
            padding: 0 5%;
        }

        .player-glass {
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 2.5rem;
            box-shadow: var(--shadow);
            transition: var(--transition);
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .player-glass::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to bottom right,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            transform: rotate(30deg);
            z-index: -1;
            animation: rotateBG 20s linear infinite;
        }

        @keyframes rotateBG {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .player-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .station-name {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 1px;
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.2);
        }

        .live-badge {
            background: var(--neon-green);
            color: var(--dark);
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            animation: pulse 1.5s infinite;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 0 15px rgba(122, 255, 122, 0.5);
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(122, 255, 122, 0.5);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 25px rgba(122, 255, 122, 0.8);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 15px rgba(122, 255, 122, 0.5);
            }
        }

        .live-badge i {
            margin-right: 0.8rem;
            font-size: 1.2rem;
        }

        .player-content {
            display: flex;
            gap: 3rem;
            align-items: center;
        }

        .album-art-container {
            position: relative;
            width: 250px;
            height: 250px;
            flex-shrink: 0;
        }

        .album-art {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: var(--shadow), 0 0 20px rgba(0, 240, 255, 0.3);
            transition: var(--transition);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .album-art.playing {
            animation: spin 5s linear infinite;
        }

        .album-art:hover {
            transform: scale(1.03);
            box-shadow: 0 0 30px rgba(255, 110, 199, 0.5);
        }

        .track-info {
            flex-grow: 1;
            position: relative;
        }

        .track-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.8rem;
            color: var(--text);
            line-height: 1.2;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
        }

        .track-artist {
            font-size: 1.5rem;
            color: var(--neon-pink);
            margin-bottom: 2rem;
            font-weight: 600;
            text-shadow: 0 0 5px rgba(255, 110, 199, 0.2);
        }

        .progress-container {
            margin: 2rem 0;
        }

        .progress-bar {
            height: 8px;
            width: 100%;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            margin-bottom: 0.8rem;
            overflow: hidden;
            position: relative;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,
                    transparent,
                    rgba(0, 240, 255, 0.2),
                    transparent);
            animation: progressShine 3s infinite;
        }

        @keyframes progressShine {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        .progress {
            height: 100%;
            background: var(--gradient);
            border-radius: 4px;
            width: 0%;
            transition: width 0.1s linear;
            position: relative;
            z-index: 2;
        }

        .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 1rem;
            color: var(--light);
            font-weight: 500;
            opacity: 0.8;
        }

        .player-controls {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .control-btn {
            background: rgba(0, 0, 0, 0.1);
            border: none;
            color: var(--light);
            font-size: 1.8rem;
            cursor: pointer;
            transition: var(--transition);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .control-btn:hover {
            background: rgba(0, 240, 255, 0.1);
            transform: scale(1.1);
            color: var(--neon-blue);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
        }

        .play-btn {
            background: var(--gradient);
            color: white;
            width: 80px;
            height: 80px;
            box-shadow: 0 10px 30px rgba(165, 196, 212, 0.5);
            position: relative;
            z-index: 1;
        }

        .play-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient);
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: var(--transition);
            animation: pulseRing 2s infinite;
        }

        @keyframes pulseRing {
            0% {
                transform: scale(0.8);
                opacity: 0.7;
            }
            70% {
                transform: scale(1.3);
                opacity: 0;
            }
            100% {
                transform: scale(1.3);
                opacity: 0;
            }
        }

        .play-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 40px rgba(255, 110, 199, 0.6);
        }

        /* Barra de volumen mejorada (efecto divertido) */
        .volume-control {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-left: auto;
        }

        .volume-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            position: relative;
        }

        .volume-slider-container {
            position: relative;
            width: 120px;
            height: 30px;
            display: flex;
            align-items: center;
        }

        .volume-slider {
            width: 100%;
            -webkit-appearance: none;
            height: 6px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            outline: none;
            position: relative;
            z-index: 2;
        }

        .volume-slider:hover {
            height: 8px;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--neon-pink);
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 0 10px rgba(255, 110, 199, 0.7);
            border: 2px solid white;
        }

        .volume-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: var(--neon-blue);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.7);
        }

        .volume-wave {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 20px;
            pointer-events: none;
            z-index: 1;
        }

        .wave-path {
            stroke: var(--neon-blue);
            stroke-width: 2;
            fill: none;
            opacity: 0.5;
            transition: all 0.3s ease;
        }

        /* Secciones de contenido */
        section {
            padding: 6rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 3rem;
            margin-bottom: 3rem;
            position: relative;
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--light);
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 70%;
            height: 5px;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            border-radius: 3px;
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
        }

        .section-content {
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 3rem;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .section-content:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        }

        /* Noticias y eventos */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .news-card {
            background: var(--card-bg);
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow);
            position: relative;
        }

        .news-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            z-index: 1;
            pointer-events: none;
        }

        .news-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .news-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: var(--transition);
            position: relative;
        }

        .news-card:hover .news-image {
            opacity: 0.9;
        }

        .news-content {
            padding: 1.5rem;
            position: relative;
            z-index: 2;
            background: var(--card-bg);
        }

        .news-date {
            color: var(--neon-blue);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: block;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
        }

        .news-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text);
            line-height: 1.3;
        }

        .news-excerpt {
            color: var(--text);
            opacity: 0.8;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .read-more {
            color: var(--neon-pink);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            transition: var(--transition);
            text-shadow: 0 0 5px rgba(255, 110, 199, 0.2);
        }

        .read-more:hover {
            color: var(--neon-blue);
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
        }

        .read-more i {
            margin-left: 0.5rem;
            transition: var(--transition);
        }

        .read-more:hover i {
            transform: translateX(5px);
        }

        /* Programación */
        .schedule-container {
            margin-top: 2rem;
        }

        .schedule-day {
            margin-bottom: 2rem;
        }

        .day-title {
            font-size: 1.8rem;
            color: var(--neon-pink);
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.2);
            display: flex;
            align-items: center;
        }

        .day-title i {
            margin-right: 1rem;
            color: var(--neon-blue);
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
        }

        .schedule-list {
            list-style: none;
        }

        .schedule-item {
            background: var(--card-bg);
            border-left: 4px solid var(--neon-blue);
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-radius: 0 10px 10px 0;
            transition: var(--transition);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .schedule-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            z-index: 1;
            pointer-events: none;
        }

        .schedule-item:hover {
            background: rgba(0, 0, 0, 0.1);
            transform: translateX(10px);
            border-left-color: var(--neon-pink);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .show-time {
            font-weight: 700;
            color: var(--neon-blue);
            min-width: 120px;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
            position: relative;
            z-index: 2;
        }

        .show-name {
            font-weight: 600;
            font-size: 1.2rem;
            flex-grow: 1;
            padding: 0 2rem;
            color: var(--text);
            position: relative;
            z-index: 2;
        }

        .show-host {
            color: var(--light);
            opacity: 0.7;
            font-style: italic;
            min-width: 200px;
            text-align: right;
            position: relative;
            z-index: 2;
        }

        /* Locutores */
        .hosts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .host-card {
            background: var(--card-bg);
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
        }

        .host-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            z-index: 1;
            pointer-events: none;
        }

        .host-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .host-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: var(--transition);
            position: relative;
        }

        .host-card:hover .host-image {
            opacity: 0.9;
        }

        .host-info {
            padding: 1.5rem;
            position: relative;
            z-index: 2;
        }

        .host-name {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text);
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.1);
        }

        .host-role {
            color: var(--neon-pink);
            font-weight: 600;
            margin-bottom: 1rem;
            display: block;
            text-shadow: 0 0 5px rgba(255, 110, 199, 0.2);
        }

        .host-bio {
            color: var(--light);
            opacity: 0.8;
            margin-bottom: 1.5rem;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .host-social {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .host-social a {
            color: var(--light);
            font-size: 1.2rem;
            transition: var(--transition);
            background: rgba(0, 0, 0, 0.1);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .host-social a:hover {
            color: var(--neon-blue);
            transform: translateY(-3px);
            background: rgba(0, 240, 255, 0.1);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
        }

        /* Contacto */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .contact-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2rem;
            transition: var(--transition);
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .contact-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            z-index: 1;
            pointer-events: none;
        }

        .contact-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .contact-icon {
            font-size: 3rem;
            color: var(--neon-pink);
            margin-bottom: 1.5rem;
            transition: var(--transition);
            position: relative;
            z-index: 2;
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.3);
        }

        .contact-card:hover .contact-icon {
            transform: scale(1.1);
            color: var(--neon-blue);
            text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
        }

        .contact-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text);
            position: relative;
            z-index: 2;
        }

        .contact-info {
            color: var(--light);
            opacity: 0.8;
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

        .contact-link {
            color: var(--neon-blue);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            display: inline-block;
            margin-top: 1rem;
            position: relative;
            z-index: 2;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
        }

        .contact-link:hover {
            color: var(--neon-pink);
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.3);
        }

        /* Formulario de contacto */
        .contact-form {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        /* WhatsApp Contact Styles */
        .whatsapp-section {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            background: #DCF8C6;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .whatsapp-button {
            display: inline-flex;
            align-items: center;
            background: #25D366;
            color: white;
            padding: 12px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            margin: 1rem 0;
            transition: all 0.3s ease;
        }

        .whatsapp-button:hover {
            background: #128C7E;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
        }

        .whatsapp-button i {
            margin-right: 10px;
            font-size: 1.2em;
        }

        .qr-code {
            max-width: 200px;
            margin: 1rem auto;
        }

        .qr-code img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .whatsapp-text {
            color: #075E54;
            margin: 1rem 0;
        }

        .submit-btn {
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            color: white;
            border: none;
            padding: 1rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 5px 20px rgba(255, 110, 199, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
            opacity: 0;
            transition: var(--transition);
            z-index: -1;
        }

        .submit-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 240, 255, 0.6);
        }

        .submit-btn:hover::before {
            opacity: 1;
        }

        /* Pie de página */
        footer {
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid var(--glass-border);
            padding: 3rem 5%;
            text-align: center;
            margin-top: 3rem;
            position: relative;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 110, 199, 0.05),
                    rgba(0, 240, 255, 0.05));
            z-index: 1;
            pointer-events: none;
        }

        .footer-logo {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text);
            display: inline-block;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            z-index: 2;
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.2);
        }

        .footer-slogan {
            color: var(--text);
            opacity: 0.8;
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
            position: relative;
            z-index: 2;
        }

        .social-link {
            color: var(--text);
            font-size: 1.8rem;
            transition: var(--transition);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.1);
        }

        .social-link:hover {
            color: var(--neon-blue);
            transform: translateY(-5px) scale(1.1);
            background: rgba(0, 240, 255, 0.2);
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
        }

        .footer-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
        }

        .footer-links a {
            color: var(--text);
            opacity: 0.8;
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--neon-pink);
            opacity: 1;
            text-shadow: 0 0 10px rgba(255, 110, 199, 0.3);
        }

        .copyright {
            color: var(--text);
            opacity: 0.6;
            font-size: 0.9rem;
            position: relative;
            z-index: 2;
        }

        /* Animaciones de scroll */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive design - Versión móvil */
        @media (max-width: 1024px) {
            .player-content {
                flex-direction: column;
                text-align: center;
            }

            .player-controls {
                justify-content: center;
            }

            .volume-control {
                margin-left: 0;
                margin-top: 1rem;
                justify-content: center;
                width: 100%;
            }

            .schedule-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .show-time,
            .show-name,
            .show-host {
                width: 100%;
                padding: 0;
                text-align: left;
            }

            .show-time {
                margin-bottom: 0.5rem;
            }

            .show-name {
                margin-bottom: 0.5rem;
            }

            .show-host {
                text-align: left;
                font-style: normal;
                opacity: 0.7;
            }
        }

        @media (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }
            
            .nav-links {
                position: fixed;
                top: var(--header-height);
                left: 0;
                width: 100%;
                flex-direction: column;
                background: var(--glass);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                padding: 2rem 0;
                gap: 1.5rem;
                transform: translateY(-100%);
                opacity: 0;
                pointer-events: none;
                transition: var(--transition);
                border-bottom: 1px solid var(--glass-border);
                z-index: 999;
            }
            
            .nav-links.active {
                transform: translateY(0);
                opacity: 1;
                pointer-events: all;
            }
            
            .theme-switcher {
                margin-left: 0;
                justify-content: center;
                width: 100%;
            }

            .section-title {
                font-size: 2.2rem;
            }

            .section-content {
                padding: 2rem;
            }

            .album-art-container {
                width: 200px;
                height: 200px;
            }

            .mini-track-text {
                display: block;
            }

            .mini-player.visible {
                top: 70px;
            }
        }

        @media (max-width: 480px) {
            .player-glass {
                padding: 1.5rem;
            }

            .station-name {
                font-size: 1.8rem;
            }

            .track-title {
                font-size: 1.5rem;
            }

            .track-artist {
                font-size: 1.2rem;
            }

            .control-btn {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }

            .play-btn {
                width: 70px;
                height: 70px;
            }

            .section-content {
                padding: 1.5rem;
            }

            .news-grid, .hosts-grid, .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Estilos específicos para el modal */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1055;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            outline: 0;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal-dialog {
            position: relative;
            width: auto;
            margin: 1.75rem auto;
            pointer-events: none;
            max-width: 800px;
        }

        .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            pointer-events: auto;
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            outline: 0;
            color: var(--light);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border-bottom: 1px solid var(--glass-border);
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .modal-body {
            position: relative;
            flex: 1 1 auto;
            padding: 2rem;
        }

        .modal-title {
            margin: 0;
            font-size: 1.5rem;
            color: var(--light);
        }

        .btn-close {
            padding: 1rem;
            color: var(--light);
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
            border: 0;
            border-radius: 0.25rem;
            opacity: .8;
        }

        .btn-close:hover {
            opacity: 1;
        }

        /* Asegurar que el modal esté por encima de todo */
        .modal {
            z-index: 9999 !important;
        }

        .modal-backdrop {
            z-index: 9998 !important;
        }

        /* Estilos para el botón Leer más */
        .read-more {
            background: none;
            border: none;
            color: var(--neon-pink);
            padding: 0;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
        }

        .read-more:hover {
            color: var(--neon-blue);
            transform: translateX(5px);
        }

        .read-more i {
            margin-left: 0.5rem;
        }

        /* Ajustes para el contenido del modal */
        .noticia-contenido {
            color: var(--light);
            line-height: 1.6;
        }

        .noticia-fecha {
            color: var(--neon-blue);
            margin-bottom: 1rem;
            display: block;
        }

        .modal-body img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 1rem 0;
        }

        /* Asegurar que el modal esté oculto por defecto */
        .modal {
            display: none;
        }

        /* Cuando el modal está activo */
        .modal.show {
            display: block;
        }

        .modal-dialog {
            margin: 1.75rem auto;
            max-width: 800px;
        }

        .modal-content {
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            color: var(--light);
        }

        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-backdrop.show {
            opacity: 1;
        }

        .btn-close {
            opacity: 0.8;
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        .btn-close:hover {
            opacity: 1;
        }

        /* Asegurar que los íconos de Font Awesome se muestren correctamente */
        .fa, .fas, .far, .fab {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
        }
        
        .fas {
            font-weight: 900;
        }
        
        .far {
            font-weight: 400;
        }
        
        /* Estilos específicos para los botones de reproducción */
        .play-btn i, .mini-play-btn i {
            font-size: 1.5em;
            line-height: 1;
            width: auto;
            height: auto;
        }
        
        /* Estilos para los íconos del tema */
        .theme-icon {
            font-size: 1.2rem;
            margin: 0 0.5rem;
            display: inline-block;
            width: auto;
            height: auto;
        }
        
        .sun-icon {
            color: var(--neon-pink);
        }
        
        .moon-icon {
            color: var(--neon-blue);
        }

        /* Estilos para las pestañas de programación */
        #programacion .section-content {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }

        #programacionTabs {
            width: 100%;
            border-bottom: 1px solid var(--glass-border);
            margin-bottom: 2rem;
        }
        
        #programacionTabs .nav-tabs {
            width: 100%;
            border: none;
            gap: 1rem;
            display: flex;
            flex-wrap: wrap;
            padding: 0.5rem;
            margin: 0;
            list-style: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
        }

        #programacionTabs .nav-link {
            color: var(--light) !important;
            border: none;
            padding: 0.75rem 1.5rem;
            margin-right: 0.5rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.1);
            text-decoration: none;
        }
        
        #programacionTabs .nav-link:hover {
            background: rgba(255, 255, 255, 0.2);
            color: var(--neon-pink) !important;
            transform: translateY(-2px);
        }
        
        #programacionTabs .nav-link.active {
            background: var(--neon-pink);
            color: white !important;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(255, 0, 128, 0.3);
        }

        .tab-content {
            width: 100%;
            padding: 1rem 0;
        }

        .programacion-grid {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .programa-card {
            width: 100%;
            background: var(--card-bg);
            border-radius: 10px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }

        .programa-imagen {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .programa-content {
            flex: 1;
        }

        .programa-nombre {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text);
        }

        .programa-horario {
            color: var(--neon-pink);
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .programa-locutor {
            color: var(--text);
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .programa-descripcion {
            color: var(--text);
            font-size: 0.9rem;
            margin-top: 0.5rem;
            opacity: 0.9;
        }

        /* Modo oscuro para programación */
        [data-theme="dark"] .programa-card {
            background: var(--glass-dark);
        }

        [data-theme="dark"] .programa-nombre,
        [data-theme="dark"] .programa-locutor {
            color: var(--light-dark);
        }

        /* Responsive para programación */
        @media (max-width: 768px) {
            #programacionTabs .nav-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }

            #programacionTabs .nav-link {
                white-space: nowrap;
            }

            .programa-card {
                padding: 1rem;
                gap: 1rem;
            }

            .programa-imagen {
                width: 60px;
                height: 60px;
            }
        }

        /* Estilos para publicidad */
        .publicidad {
            margin: 1rem 0;
            padding: 1.5rem;
            border-radius: 15px;
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow);
            transition: var(--transition);
            overflow: hidden;
        }

        .publicidad:hover {
            transform: translateY(-5px);
            box-shadow: var(--neon-shadow);
        }

        .publicidad img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .publicidad:hover img {
            transform: scale(1.05);
        }

        .publicidad-title {
            color: var(--light);
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .publicidad-description {
            color: var(--light);
            opacity: 0.8;
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        .publicidad a {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .publicidad a:hover {
            color: var(--neon-blue);
        }

        /* Estilos para la barra lateral de publicidad */
        .publicidad-sidebar {
            position: fixed;
            top: calc(var(--header-height) + 2rem);
            right: 20px;
            width: 300px;
            max-height: 80vh;
            transform: translateY(-50%);
            overflow-y: auto;
            z-index: 100;
            padding: 15px;
            scrollbar-width: thin;
            scrollbar-color: var(--neon-blue) transparent;
            margin: 80px 0;
        }

        .publicidad-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .publicidad-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .publicidad-sidebar::-webkit-scrollbar-thumb {
            background-color: var(--neon-blue);
            border-radius: 3px;
        }

        .publicidad-sidebar .publicidad {
            margin-bottom: 1.5rem;
        }

        /* Ajustes responsive para la publicidad */
        @media (max-width: 992px) {
            .publicidad-sidebar {
                position: static;
                width: 100%;
                max-height: none;
                transform: none;
                margin: 2rem 0;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 1rem;
            }
            
            .publicidad-sidebar .publicidad {
                margin-bottom: 0;
            }
        }

        @media (max-width: 768px) {
            .publicidad {
                margin: 0.5rem 0;
                padding: 1rem;
            }
            
            .publicidad-title {
                font-size: 1.1rem;
            }
            
            .publicidad-description {
                font-size: 0.85rem;
            }
        }

        .no-programas {
            text-align: center;
            color: var(--light);
            font-style: italic;
            padding: 2rem;
            grid-column: 1 / -1;
        }
        
        .powered-by {
            margin-top: 0.8rem;
            text-align: center;
        }
        
        .powered-link {
            color: #000;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 4px 12px;
            border-radius: 50px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }
        
        .powered-link:hover {
            background-color: #ffffff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        footer {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .tooltip-container {
            position: relative;
            display: inline-block;
        }

        .tooltip-text {
            position: absolute;
            bottom: 100%;
            right: 0;
            background-color: var(--neon-pink);
            color: white;
            text-align: center;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 10px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
            pointer-events: none; /* Evita que el tooltip interfiera con el botón */
        }

        .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 20px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--neon-pink) transparent transparent transparent;
        }

        .tooltip-text.show {
            opacity: 1;
            visibility: visible;
        }

        /* Animación de pulso para el botón de instalación */
        @keyframes install-pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 110, 199, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(255, 110, 199, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 110, 199, 0);
            }
        }

        .install-pulse {
            animation: install-pulse 2s infinite;
        }

        .tooltip-text {
            position: absolute;
            bottom: 100%;
            right: 0;
            background-color: var(--neon-pink);
            color: white;
            text-align: center;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 10px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
            pointer-events: none; /* Evita que el tooltip interfiera con el botón */
        }

        .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 20px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--neon-pink) transparent transparent transparent;
        }

        .tooltip-text.show {
            opacity: 1;
            visibility: visible;
        }
    </style>

    <!-- Asegurarnos de que Bootstrap JS y sus dependencias estén cargados al final -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Variables globales
        const audio = new Audio();
        audio.src = 'https://panel.mi1radio.ovh/listen/e_15_radio_motera/radio.mp3';
        audio.preload = 'auto';
        let isPlaying = false;
        let updateInterval;

        // Elementos del DOM
        const playBtn = document.getElementById('play-btn');
        const playIcon = document.getElementById('play-icon');
        const miniPlayBtn = document.getElementById('mini-play-btn');
        const miniPlayIcon = document.getElementById('mini-play-icon');
        const muteBtn = document.getElementById('mute-btn');
        const volumeIcon = document.getElementById('volume-icon');
        const volumeSlider = document.getElementById('volume-slider');
        const progressBar = document.getElementById('progress-bar');
        const currentTimeEl = document.getElementById('current-time');
        const durationEl = document.getElementById('duration');
        const trackTitle = document.getElementById('track-title');
        const trackArtist = document.getElementById('track-artist');
        const albumArt = document.getElementById('album-art');
        const miniPlayer = document.getElementById('miniPlayer');
        const miniAlbumArt = document.getElementById('mini-album-art');
        const miniTrackTitle = document.getElementById('mini-track-title');
        const miniTrackArtist = document.getElementById('mini-track-artist');
        const themeSwitcher = document.getElementById('theme-switcher');

        // Función para cambiar el modo oscuro
        function toggleDarkMode() {
            const isDark = themeSwitcher.checked;
            document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        }

        // Verificar preferencia guardada de tema
        function checkDarkModePreference() {
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme) {
                themeSwitcher.checked = savedTheme === 'dark';
                document.documentElement.setAttribute('data-theme', savedTheme);
            } else {
                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                themeSwitcher.checked = prefersDark;
                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
            }
        }

        // Función para reproducir/pausar
        function togglePlay() {
            if (isPlaying) {
                audio.pause();
                playIcon.classList.replace('fa-pause', 'fa-play');
                miniPlayIcon.classList.replace('fa-pause', 'fa-play');
                albumArt.classList.remove('playing');
                miniAlbumArt.classList.remove('playing');
            } else {
                audio.play().catch(error => {
                    console.error('Error al reproducir:', error);
                });
                playIcon.classList.replace('fa-play', 'fa-pause');
                miniPlayIcon.classList.replace('fa-play', 'fa-pause');
                albumArt.classList.add('playing');
                miniAlbumArt.classList.add('playing');
            }
            isPlaying = !isPlaying;
        }

        // Control de volumen
        function setVolume() {
            audio.volume = volumeSlider.value;
            if (audio.volume === 0) {
                volumeIcon.className = 'fas fa-volume-mute';
            } else if (audio.volume < 0.5) {
                volumeIcon.className = 'fas fa-volume-down';
            } else {
                volumeIcon.className = 'fas fa-volume-up';
            }
        }

        // Función para silenciar
        function toggleMute() {
            audio.muted = !audio.muted;
            if (audio.muted) {
                volumeIcon.className = 'fas fa-volume-mute';
            } else {
                setVolume();
            }
        }

        // Control del mini reproductor
        window.addEventListener('scroll', () => {
            const playerContainer = document.querySelector('.player-container');
            if (!playerContainer) return;
            
            const rect = playerContainer.getBoundingClientRect();
            if (rect.bottom < 0) {
                miniPlayer.classList.add('visible');
            } else {
                miniPlayer.classList.remove('visible');
            }
        });

        // Obtener metadatos de la radio
        async function fetchNowPlaying() {
            try {
                const response = await fetch('https://panel.mi1radio.ovh/api/nowplaying/e_15_radio_motera');
                const data = await response.json();
                
                if (data && data.now_playing && data.now_playing.song) {
                    const song = data.now_playing.song;
                    
                    // Actualizar títulos
                    trackTitle.textContent = song.title || song.text || "Título no disponible";
                    trackArtist.textContent = song.artist || "Artista desconocido";
                    miniTrackTitle.textContent = song.title || song.text || "Título no disponible";
                    miniTrackArtist.textContent = song.artist || "Artista desconocido";
                    
                    // Actualizar carátulas
                    if (song.art) {
                        albumArt.src = song.art;
                        miniAlbumArt.src = song.art;
                    } else {
                        const defaultText = encodeURIComponent((song.title || song.text || "Radio").substring(0, 15));
                        albumArt.src = `https://via.placeholder.com/250/121212/E0E5E9?text=${defaultText}`;
                        miniAlbumArt.src = `https://via.placeholder.com/40/121212/E0E5E9?text=${defaultText.substring(0, 2)}`;
                    }
                }
            } catch (error) {
                console.error('Error al obtener metadatos:', error);
            }
            
            // Actualizar cada 10 segundos
            setTimeout(fetchNowPlaying, 10000);
        }

        // Event Listeners
        playBtn.addEventListener('click', togglePlay);
        miniPlayBtn.addEventListener('click', togglePlay);
        muteBtn.addEventListener('click', toggleMute);
        volumeSlider.addEventListener('input', setVolume);
        themeSwitcher.addEventListener('change', toggleDarkMode);

        // Manejar errores de audio
        audio.addEventListener('error', (e) => {
            console.error('Error de audio:', e);
            isPlaying = false;
            playIcon.classList.replace('fa-pause', 'fa-play');
            miniPlayIcon.classList.replace('fa-pause', 'fa-play');
        });

        // Inicializar
        audio.volume = volumeSlider.value;
        checkDarkModePreference();
        fetchNowPlaying();
    });

        // =============================================
        // FUNCIONALIDAD DEL MODO OSCURO
        // =============================================
        function checkDarkModePreference() {
            // Verificar preferencia en localStorage
            const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
            
            // Verificar preferencia del sistema
            const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            // Aplicar modo oscuro si está habilitado en localStorage o si el sistema lo prefiere y no hay configuración en localStorage
            if (darkModeEnabled || (!('darkMode' in localStorage) && systemPrefersDark)) {
                document.body.classList.add('dark-mode');
            document.getElementById('themeSwitcher').checked = true;
            }
        }

        function toggleDarkMode() {
            const isDarkMode = document.body.classList.toggle('dark-mode');
            localStorage.setItem('darkMode', isDarkMode);
        document.getElementById('themeSwitcher').checked = isDarkMode;
        }

        // Escuchar cambios en la preferencia del sistema
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (!('darkMode' in localStorage)) {
                if (e.matches) {
                    document.body.classList.add('dark-mode');
                } else {
                    document.body.classList.remove('dark-mode');
                }
            }
        });

        // =============================================
        // FONDO DINÁMICO INTERACTIVO
        // =============================================
        function initDynamicBackground() {
            const bg = document.getElementById('dynamicBackground');
        if (!bg) return;

            const colors = ['var(--neon-pink)', 'var(--neon-blue)', 'var(--neon-green)'];
        const particleCount = 15;
        const particleBaseSize = 200;
        const particleVariation = 100;
            
            // Crear partículas flotantes
        for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // Tamaño y posición aleatorios
            const size = Math.random() * particleVariation + particleBaseSize;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // Animación única para cada partícula
                const duration = Math.random() * 20 + 10;
            const delay = Math.random() * -20;
            particle.style.animation = `float ${duration}s infinite linear ${delay}s`;
                
            // Color aleatorio con gradiente radial
                const color1 = colors[Math.floor(Math.random() * colors.length)];
                const color2 = colors[Math.floor(Math.random() * colors.length)];
            particle.style.background = `radial-gradient(circle at 30% 30%, ${color1}, ${color2}, transparent)`;
                particle.style.opacity = Math.random() * 0.2 + 0.1;
                
                bg.appendChild(particle);
            }
            
        // Efecto de partículas interactivas con el mouse
        let lastX = 0;
        let lastY = 0;
        let lastTime = Date.now();

            document.addEventListener('mousemove', (e) => {
            const currentTime = Date.now();
            if (currentTime - lastTime < 50) return; // Limitar la frecuencia de creación
            lastTime = currentTime;

            const dx = e.clientX - lastX;
            const dy = e.clientY - lastY;
            const speed = Math.sqrt(dx * dx + dy * dy);
            lastX = e.clientX;
            lastY = e.clientY;

                const particle = document.createElement('div');
                particle.classList.add('interactive-particle');
            
            // Tamaño basado en la velocidad del mouse
            const size = Math.min(100 + speed, 200);
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
                
                // Posición en el puntero del mouse
                particle.style.left = `${e.clientX}px`;
                particle.style.top = `${e.clientY}px`;
                
            // Color aleatorio con efecto de brillo
            const color = colors[Math.floor(Math.random() * colors.length)];
            particle.style.background = `radial-gradient(circle at 30% 30%, ${color}, transparent)`;
            particle.style.filter = `blur(${Math.min(speed / 10, 15)}px)`;
                
                bg.appendChild(particle);
                
                // Animación de aparición
            requestAnimationFrame(() => {
                    particle.style.opacity = '0.3';
                    particle.style.transform = 'translate(-50%, -50%) scale(1)';
            });
                
                // Animación de desaparición
                setTimeout(() => {
                    particle.style.opacity = '0';
                    particle.style.transform = 'translate(-50%, -50%) scale(1.5)';
                    
                    // Eliminar después de la animación
                    setTimeout(() => {
                        particle.remove();
                    }, 500);
                }, 1000);
            });

        // Efecto de partículas en el toque (móviles)
        document.addEventListener('touchmove', (e) => {
            const touch = e.touches[0];
            const particle = document.createElement('div');
            particle.classList.add('interactive-particle');
            
            const size = 150;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            
            particle.style.left = `${touch.clientX}px`;
            particle.style.top = `${touch.clientY}px`;
            
            const color = colors[Math.floor(Math.random() * colors.length)];
            particle.style.background = `radial-gradient(circle at 30% 30%, ${color}, transparent)`;
            
            bg.appendChild(particle);
            
            requestAnimationFrame(() => {
                particle.style.opacity = '0.3';
                particle.style.transform = 'translate(-50%, -50%) scale(1)';
            });
            
            setTimeout(() => {
                particle.style.opacity = '0';
                particle.style.transform = 'translate(-50%, -50%) scale(1.5)';
                setTimeout(() => particle.remove(), 500);
            }, 1000);
        });
    }

    // Inicializar el fondo dinámico cuando el DOM esté listo
    document.addEventListener('DOMContentLoaded', initDynamicBackground);

        // Animaciones de scroll
        function revealOnScroll() {
            const reveals = document.querySelectorAll('.reveal');
            
            for (let i = 0; i < reveals.length; i++) {
                const windowHeight = window.innerHeight;
                const revealTop = reveals[i].getBoundingClientRect().top;
                const revealPoint = 150;
                
                if (revealTop < windowHeight - revealPoint) {
                    reveals[i].classList.add('active');
                }
            }
        }

        window.addEventListener('scroll', revealOnScroll);
        window.addEventListener('load', revealOnScroll);
    </script>
</head>

<body>
    <!-- Fondo Dinámico -->
    <div class="dynamic-background" id="dynamicBackground"></div>

    <!-- Barra de navegación -->
    <nav id="navbar">
        <a href="#" class="logo">
                            <img src="uploads/logo_1746236714.png" alt="Logo">
                        <span class="logo-text"> E 15 RADIO MOTERA</span>
        </a>
        
        <div class="menu-toggle" id="menuToggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
        
        <div class="nav-links" id="navLinks">
            <a href="#inicio">Inicio</a>
            <a href="#noticias">Noticias</a>
            <a href="#programacion">Programación</a>
            <a href="#locutores">Locutores</a>
            <a href="#contacto">Contacto</a>
            <div class="theme-switcher">
                <i class="fas fa-sun theme-icon sun-icon"></i>
                <label class="theme-switcher-label">
                    <input type="checkbox" class="theme-switcher-input" id="theme-switcher">
                    <span class="theme-switcher-slider"></span>
                </label>
                <i class="fas fa-moon theme-icon moon-icon"></i>
            </div>
        </div>
    </nav>

    <!-- Mini reproductor flotante -->
    <div class="mini-player" id="miniPlayer">
        <div class="mini-track-info">
            <img id="mini-album-art" class="mini-album-art" src="https://via.placeholder.com/40/121212/E0E5E9?text= E" alt="Album Art" loading="lazy">
            <div class="mini-track-text">
                <div id="mini-track-title" class="mini-track-title"> E 15 RADIO MOTERA</div>
                <div id="mini-track-artist" class="mini-track-artist">En vivo las 24 horas</div>
            </div>
        </div>
        <div class="mini-player-controls">
            <button class="mini-play-btn" id="mini-play-btn" aria-label="Reproducir/Pausar">
                <i class="fas fa-play" id="mini-play-icon"></i>
            </button>
        </div>
    </div>

    <!-- Reproductor principal -->
    <div class="player-container" id="inicio">
        <!-- Publicidad en el header -->
                    <div class="publicidad-container">
                                    <div class="publicidad-item">
                        <div class="publicidad">
                                                            <a href="https://linktr.ee/e15radiomotera" 
                                   class="publicidad-link" 
                                   data-publicidad-id="7"
                                   target="_blank">
                                                        
                                                            <img src="uploads/publicidad/publicidad_1764709222.png" 
                                     alt="E15 RADIO MOTERA">
                                                        
                            <div class="publicidad-content">
                                <h3 class="publicidad-title">E15 RADIO MOTERA</h3>
                                                                    <p class="publicidad-description">Ya puedes acceder a todas nuestras plataformas desde un solo enlace.
Streaming, redes sociales, WhatsApp y más, todo centralizado para ti.</p>
                                                            </div>
                            
                                                            </a>
                                                    </div>
                    </div>
                                    <div class="publicidad-item">
                        <div class="publicidad">
                                                            <a href="https://linkbio.co/choriloco" 
                                   class="publicidad-link" 
                                   data-publicidad-id="6"
                                   target="_blank">
                                                        
                                                            <img src="uploads/publicidad/publicidad_1764743455.png" 
                                     alt="CHORILOCO 4 SABORES: LA PARRILLA REYNA DEL MERCADO">
                                                        
                            <div class="publicidad-content">
                                <h3 class="publicidad-title">CHORILOCO 4 SABORES: LA PARRILLA REYNA DEL MERCADO</h3>
                                                                    <p class="publicidad-description">En el comercio de víveres de Montebello, Guayaquil, hay un puesto que se reconoce solo por el olor:
la parrilla de Choriloco 

Aquí se juntan los 4 sabores que enloquecen a todos:
pescado, cerdo, pollo y res, bien doraditos, jugosos y listos para el antojo.
Entre el sol, el movimiento del mercado y el humo de la parrilla,
Choriloco se convierte en la parada obligatoria de los que aman el buen chorizo.</p>
                                                            </div>
                            
                                                            </a>
                                                    </div>
                    </div>
                            </div>
        
        <div class="player-glass reveal">
            <div class="player-header">
                <h1 class="station-name"> E 15 RADIO MOTERA</h1>
                <div class="live-badge">
                    <i class="fas fa-circle"></i>
                    EN VIVO
                </div>
            </div>
            <div class="player-content">
                <div class="album-art-container">
                    <img id="album-art" class="album-art" src="https://via.placeholder.com/250/121212/E0E5E9?text= E 15 RADIO MOT" alt="Album Art" loading="lazy">
                </div>
                <div class="track-info">
                    <h2 id="track-title" class="track-title">Cargando información...</h2>
                    <p id="track-artist" class="track-artist">Por favor espera</p>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress" id="progress-bar"></div>
                        </div>
                        <div class="time-info">
                            <span id="current-time">00:00</span>
                            <span id="duration">00:00</span>
                        </div>
                    </div>
                    <div class="player-controls">
                        <button class="control-btn play-btn" id="play-btn" aria-label="Reproducir/Pausar">
                            <i class="fas fa-play" id="play-icon"></i>
                        </button>
                        <div class="volume-control">
                            <button class="control-btn" id="mute-btn" aria-label="Silenciar/Activar sonido">
                                <i class="fas fa-volume-up" id="volume-icon"></i>
                            </button>
                            <div class="volume-wrapper">
                                <div class="volume-slider-container">
                                    <svg class="volume-wave" viewBox="0 0 120 20" preserveAspectRatio="none">
                                        <path class="wave-path" id="wave-path" d=""></path>
                                    </svg>
                                    <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="0.7" aria-label="Control de volumen">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenedor principal -->
    <div class="container-fluid">
        <!-- Contenido principal -->
        <!-- Sección de noticias -->
        <section id="noticias">
            <h2 class="section-title reveal">Últimas Noticias</h2>
            
            <!-- Publicidad arriba del contenido -->
                            <div class="publicidad-container">
                                            <div class="publicidad-item">
                            <div class="publicidad">
                                                                    <a href="https://w.app/0967219859" 
                                       class="publicidad-link" 
                                       data-publicidad-id="8"
                                       target="_blank">
                                                                
                                                                    <img src="uploads/publicidad/publicidad_1764744631.jpg" 
                                         alt="TU SUEÑO CUESTA CENTAVOS  ¡ALERTA MÁXIMA DE VELOCIDAD!">
                                                                
                                <div class="publicidad-content">
                                    <h3 class="publicidad-title">TU SUEÑO CUESTA CENTAVOS  ¡ALERTA MÁXIMA DE VELOCIDAD!</h3>
                                                                            <p class="publicidad-description">¿Estás listo para domar a la bestia? Esta Kawasaki Ninja ZX10R NO es para cualquiera, ¡es para quien se atreva a ganarla! Por solo $0.50 USD (sí, CINKUENCA centavos) entras al sorteo de esta máquina de precisión japonesa O su valor total en efectivo Compra mínima de 10 stickers (¡Solo $5 dólares por 10 chances!). BONUS EXPLOSIVO: Además de la moto, ¡sorteamos 10 PREMIOS de $250 USD en efectivo! URGENCIA REAL: ¡Son cupos limitados hasta agotar existencias y vuelan rápido! Deja de verla en fotos y empieza a verla en tu garaje. ¡ASEGURA TUS NÚMEROS YA MISMO! ESCRÍBENOS AL WHATSAPP O DALE CLIC AL ENLACE DE LA BIO PARA COMPRAR DIRECTO.</p>
                                                                    </div>
                                
                                                                    </a>
                                                            </div>
                        </div>
                                            <div class="publicidad-item">
                            <div class="publicidad">
                                                                    <a href="https://www.instagram.com/chorilocooficial?utm_source=qr&amp;amp;igsh=MWR6aHRwajdxZXAwcw==" 
                                       class="publicidad-link" 
                                       data-publicidad-id="2"
                                       target="_blank">
                                                                
                                                                    <img src="uploads/publicidad/publicidad_1764741063.png" 
                                         alt="CHORIZO DE PESCADO CHORILOCO: ¡EL SABOR DEL MAR AL CARBÓN EN BALLENITA">
                                                                
                                <div class="publicidad-content">
                                    <h3 class="publicidad-title">CHORIZO DE PESCADO CHORILOCO: ¡EL SABOR DEL MAR AL CARBÓN EN BALLENITA</h3>
                                                                            <p class="publicidad-description">El mar ya no solo se mira… ¡se muerde!
Prueba el chorizo de pescado Choriloco, hecho con pescado fresco y a la parrilla, en 4 sabores irresistibles que te acompañan frente al atardecer del malecón de Ballenita.
Perfecto para compartir, para antojarse y para volverse fan.
 ¿Listo para descubrir tu sabor Choriloco favorito?</p>
                                                                    </div>
                                
                                                                    </a>
                                                            </div>
                        </div>
                                    </div>
            
            <div class="section-content reveal">
                <div class="news-grid">
                                            <div class="news-card">
                                                            <img src="uploads/noticia_1764061589.jpeg" alt="Motociclistas probaron cascos en Guayaquil: así quedaron al golpearlos con un combo" class="news-image" loading="lazy">
                                                        <div class="news-content">
                                <span class="news-date">25 November 2025</span>
                                <h3 class="news-title">Motociclistas probaron cascos en Guayaquil: así quedaron al golpearlos con un combo</h3>
                                <p class="news-excerpt">Los usuarios de motos están entre los más vulnerables en Ecuador, donde los siniestros viales van en aumento</p>
                                <button type="button" class="read-more" data-bs-toggle="modal" data-bs-target="#noticiaModal5">
                                    Leer más <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                                    </div>
            </div>
        </section>

        <!-- Sección de programación -->
        <section id="programacion">
            <h2 class="section-title reveal">Programación</h2>
            <div class="section-content reveal">
                <div class="programacion-tabs" id="programacionTabs">
                    <ul class="nav nav-tabs" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link active" 
                                        id="tab-lunes" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-lunes" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-lunes" 
                                        aria-selected="true">
                                    Lunes                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-martes" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-martes" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-martes" 
                                        aria-selected="false">
                                    Martes                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-miércoles" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-miércoles" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-miércoles" 
                                        aria-selected="false">
                                    Miércoles                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-jueves" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-jueves" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-jueves" 
                                        aria-selected="false">
                                    Jueves                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-viernes" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-viernes" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-viernes" 
                                        aria-selected="false">
                                    Viernes                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-sábado" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-sábado" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-sábado" 
                                        aria-selected="false">
                                    Sábado                                </button>
                            </li>
                                                    <li class="nav-item" role="presentation">
                                <button class="nav-link " 
                                        id="tab-domingo" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#content-domingo" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="content-domingo" 
                                        aria-selected="false">
                                    Domingo                                </button>
                            </li>
                                            </ul>
                    <div class="tab-content">
                                                    <div class="tab-pane fade show active" 
                                 id="content-lunes" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-lunes">
                                <div class="programacion-grid">
                                                                                                                        <div class="programa-card">
                                                                                                    <img src="uploads/programacion/6818834e08042.jpeg" 
                                                         alt="Rodando Juntos" 
                                                         class="programa-imagen">
                                                                                                <div class="programa-content">
                                                    <h3 class="programa-nombre">Rodando Juntos</h3>
                                                    <p class="programa-horario">
                                                        <i class="far fa-clock"></i>
                                                        22:30 - 
                                                        03:30                                                    </p>
                                                                                                            <p class="programa-locutor">
                                                            <i class="fas fa-microphone"></i>
                                                            JUAN CARLOS BETANCOURTH                                                        </p>
                                                                                                                                                                <p class="programa-descripcion">Una travesía radial donde la hermandad motera se siente a todo ritmo. Noticias, música, comunidad y apoyo a los que están construyendo su camino. ¡Aquí nadie rueda solo!</p>
                                                                                                    </div>
                                            </div>
                                                                                                            </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-martes" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-martes">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-miércoles" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-miércoles">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-jueves" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-jueves">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-viernes" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-viernes">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-sábado" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-sábado">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                                    <div class="tab-pane fade " 
                                 id="content-domingo" 
                                 role="tabpanel" 
                                 aria-labelledby="tab-domingo">
                                <div class="programacion-grid">
                                                                            <p class="no-programas">No hay programas programados para este día.</p>
                                                                    </div>
                            </div>
                                            </div>
                </div>
            </div>
        </section>

        <!-- Resto de secciones... -->
    </div>

    <!-- Barra lateral flotante -->
    
    <!-- Resto del contenido... -->

    <!-- Modales de noticias -->
        <div class="modal" id="noticiaModal5" tabindex="-1" aria-labelledby="noticiaModalLabel5" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="noticiaModalLabel5">
                        Motociclistas probaron cascos en Guayaquil: así quedaron al golpearlos con un combo                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                                            <img src="uploads/noticia_1764061589.jpeg" 
                             alt="Motociclistas probaron cascos en Guayaquil: así quedaron al golpearlos con un combo" 
                             class="img-fluid mb-3">
                                        <div class="noticia-fecha mb-3">
                        <small class="text-muted">
                            25 November 2025                        </small>
                    </div>
                    <div class="noticia-contenido">
                        <p class="top-content" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: Fira, sans-serif; font-size: 18px; font-variant-ligatures: none;"><h1 class="article-title " id="m77-76-78" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-family: &quot;Majerit Headline&quot;, serif; font-weight: 700; font-stretch: condensed; font-size: 49px; line-height: 59px;">Motociclistas probaron cascos en Guayaquil: así quedaron al golpearlos con un combo</h1><p class="article-epigraph " id="m82-81-83" style="margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding: 0px; font-size: 23px; line-height: 28px; color: rgb(126, 126, 126);">Los usuarios de motos están entre los más vulnerables en Ecuador, donde los siniestros viales van en aumento</p><section class="MrfRecommender" data-mrf-recirculation="IL_baVMVuMuTFKZ5cOS68jr3Q" data-testid="text-html" data-mrf-experience="IL_baVMVuMuTFKZ5cOS68jr3Q" style="margin: 0px; padding: 0px; list-style: none; min-height: 50px;"><li class="mrf-link" style="margin: 5px 0px; padding: 0px; display: flex; align-items: center;"><a href="https://www.expreso.ec/guayaquil/fundacion-pdd-gradua-2-000-estudiantes-de-capacitaciones-gratuitas-en-guayaquil-265622.html" mrf-editorial-id="1404953612" data-mrf-link="https://www.expreso.ec/guayaquil/fundacion-pdd-gradua-2-000-estudiantes-de-capacitaciones-gratuitas-en-guayaquil-265622.html" cmp-ltrk="IL_baVMVuMuTFKZ5cOS68jr3Q" cmp-ltrk-idx="0" mrfobservableid="4457659a-143c-473f-9af8-cda1c4f9751f" style="margin: 5px 0px; padding: 0px; text-decoration-line: none; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">Fundación PDD gradúa a 2.000 estudiantes de capacitaciones gratuitas en Guayaquil</a></li><li class="mrf-link" style="margin: 5px 0px; padding: 0px; display: flex; align-items: center;"><a href="https://www.expreso.ec/guayaquil/capturan-implicados-en-el-doble-crimen-de-la-francisco-de-orellana-265643.html" mrf-editorial-id="1404717302" data-mrf-link="https://www.expreso.ec/guayaquil/capturan-implicados-en-el-doble-crimen-de-la-francisco-de-orellana-265643.html" cmp-ltrk="IL_baVMVuMuTFKZ5cOS68jr3Q" cmp-ltrk-idx="1" mrfobservableid="1da432d8-0d4e-44b8-aa2d-6b8e07137952" style="margin: 5px 0px; padding: 0px; text-decoration-line: none; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">Capturan a implicados en el doble crimen de la Francisco de Orellana</a></li><li class="mrf-link" style="margin: 5px 0px; padding: 0px; display: flex; align-items: center;"><a href="https://www.expreso.ec/guayaquil/treinta-anos-del-coro-infantil-que-marco-generaciones-en-la-universidad-de-guayaquil-265613.html" mrf-editorial-id="1404668480" data-mrf-link="https://www.expreso.ec/guayaquil/treinta-anos-del-coro-infantil-que-marco-generaciones-en-la-universidad-de-guayaquil-265613.html" cmp-ltrk="IL_baVMVuMuTFKZ5cOS68jr3Q" cmp-ltrk-idx="2" mrfobservableid="4975efbf-f7a2-4800-b1d9-d89c00d00a75" style="margin: 5px 0px; padding: 0px; text-decoration-line: none; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">Treinta años del coro infantil que marcó generaciones en la Universidad de Guayaquil</a></li></section></p><section class="o-section" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: Fira, sans-serif; font-size: 18px; font-variant-ligatures: none;"><div class="o-container" style="margin: 0px auto 30px; padding: 0px 20px; width: 780px; max-width: 1222px;"></div></section><div class="article-info" data-mrf-recirculation="Share RRSS" style="margin: 0px; padding: 0px; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 18px; color: rgb(0, 0, 0); font-family: Fira, sans-serif; font-size: 18px; font-variant-ligatures: none;"><a class="float-button" target="_blank" href="https://www.whatsapp.com/channel/0029Va9RhLk89inoBS1rtQ2H" data-mrf-link="https://www.whatsapp.com/channel/0029Va9RhLk89inoBS1rtQ2H" cmp-ltrk="Share RRSS" cmp-ltrk-idx="0" mrfobservableid="99d4c784-14e4-44f4-a354-36cc07de0523" style="margin: 0px; padding: 2px 15px 2px 5px; text-decoration-line: none; height: 24px; display: inline-block; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); border-radius: 27px; font-family: Arial; font-size: 14px; animation: 0.5s ease-in-out 0s 1 normal none running whatsapp-animation; transition: 0.3s ease-out;"><span class="fab fa-whatsapp" aria-hidden="true" style="margin: 0px 0px 0px 3px; padding: 2px; display: inline-block; font-feature-settings: normal; font-family: &quot;Font Awesome 5 Brands&quot;; font-size: 17px; background-color: aliceblue; border-radius: 10px; color: black;"></span><span style="margin: 0px; padding: 0px;">&nbsp;Unirse a Whatsapp</span></a><ul class="share-options" style="margin-right: 0px; margin-bottom: 32px; margin-left: 0px; padding: 0px; list-style-type: none; position: relative; display: flex; align-items: center; justify-content: center; gap: 16px;"><li class="facebook" style="margin: 0px 0px 0px 81px; padding: 0px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(0, 0, 0); border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; position: relative;"><a title="Facebook" rel="noopener noreferrer" target="_blank" data-share="facebook" data-gtm-social-provider="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" data-mrf-link="https://www.facebook.com/sharer/sharer.php?u=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" cmp-ltrk="Share RRSS" cmp-ltrk-idx="1" mrfobservableid="23bb69e4-5bfd-41d7-814b-7f6800aad3d6" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);"><span class="fab fa-facebook-f" style="margin: 0px; padding: 0px; display: inline-block; font-feature-settings: normal; font-family: &quot;Font Awesome 5 Brands&quot;; font-size: 15px;"></span><div class="buttons" style="margin: 0px; padding: 0px;"></div></a></li><li class="twitter" style="margin: 0px; padding: 0px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(0, 0, 0); border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><a title="Twitter" rel="noopener noreferrer" target="_blank" data-share="twitter" data-gtm-social-provider="twitter" href="https://twitter.com/intent/tweet?text=Motociclistas%20probaron%20cascos%20en%20Guayaquil:%20as%C3%AD%20quedaron%20al%20golpearlos%20con%20un%20combo&amp;url=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" data-mrf-link="https://twitter.com/intent/tweet?text=Motociclistas%20probaron%20cascos%20en%20Guayaquil:%20as%C3%AD%20quedaron%20al%20golpearlos%20con%20un%20combo&amp;url=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" cmp-ltrk="Share RRSS" cmp-ltrk-idx="2" mrfobservableid="889e74df-d88e-4570-b0b8-a2cd740d88d6" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);"><em class="twitter-x" style="margin: 0px; padding: 0px; font-size: 15px;"><svg version="1.1" id="svg5" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1668.6 1221.2" xml:space="preserve"><g id="layer1" transform="translate(52.390088,-25.058597)"><path id="path1009" class="st0" d="M283.9,167.3L670.3,684l-388.8,420H369l340.4-367.8l275,367.8h297.8L874.2,558.3l361.9-391
		h-87.5L835.1,506L581.7,167.3H283.9z M412.6,231.8h136.8l604.1,807.8h-136.8L412.6,231.8z"></path></g></svg></em><div class="buttons" style="margin: 0px; padding: 0px;"></div></a></li><li class="linkedin" style="margin: 0px; padding: 0px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(0, 0, 0); border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><a title="Linkedin" rel="noopener noreferrer" target="_blank" data-share="linkedin" data-gtm-social-provider="linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" data-mrf-link="https://www.linkedin.com/sharing/share-offsite/?url=https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" cmp-ltrk="Share RRSS" cmp-ltrk-idx="3" mrfobservableid="d8e15775-bb5a-4193-a7f2-a1b41cf3d3cb" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);"><span class="fab fa-linkedin-in" style="margin: 0px; padding: 0px; display: inline-block; font-feature-settings: normal; font-family: &quot;Font Awesome 5 Brands&quot;; font-size: 15px;"></span><div class="buttons" style="margin: 0px; padding: 0px;"></div></a></li><li class="whatsapp whatsapp-web" style="margin: 0px; padding: 0px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(0, 0, 0); border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><a title="Whatsapp" rel="noopener noreferrer" target="_blank" data-gtm-social-provider="whatsapp" href="https://web.whatsapp.com/send?text=Motociclistas%20probaron%20cascos%20en%20Guayaquil:%20as%C3%AD%20quedaron%20al%20golpearlos%20con%20un%20combo%20https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" data-mrf-link="https://web.whatsapp.com/send?text=Motociclistas%20probaron%20cascos%20en%20Guayaquil:%20as%C3%AD%20quedaron%20al%20golpearlos%20con%20un%20combo%20https://www.expreso.ec/guayaquil/motociclistas-probaron-cascos-en-guayaquil-asi-quedaron-al-golpearlos-con-un-combo-265649.html" cmp-ltrk="Share RRSS" cmp-ltrk-idx="4" mrfobservableid="5354beee-9512-47b9-9b22-0e58d7c2bf55" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);"><span class="fab fa-whatsapp" style="margin: 0px; padding: 0px 5px; display: inline-block; font-feature-settings: normal; font-family: &quot;Font Awesome 5 Brands&quot;; font-size: 15px;"></span></a></li><li class="envelope" style="margin: 0px; padding: 0px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(0, 0, 0); border-radius: 50%; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><a title="Correo" rel="noopener noreferrer" target="_blank" href="mailto:info@expreso.com" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);"><span class="fas fa-envelope" style="margin: 0px; padding: 0px; display: inline-block; font-feature-settings: normal; font-family: &quot;Font Awesome 5 Free&quot;; font-size: 15px;"></span></a></li></ul><div class="publish-info" style="margin: 0px 0px 15px; padding: 0px 0px 0px 13px; display: flex; flex-direction: column; position: relative;"><div class="author" style="margin: 0px; padding: 0px;"><ul class="list-authors" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; list-style-type: none;"><li class="author-name" style="margin: 0px; padding: 0px; font-family: &quot;Gill Sans&quot;, sans-serif; font-size: 13px; line-height: 16px;"><span class="c-detail__author__name " id="m97-96-98" style="margin: 0px; padding: 0px;"><a href="https://www.expreso.ec/autor/juan-pablo-perez-tomala" data-mrf-link="https://www.expreso.ec/autor/juan-pablo-perez-tomala" cmp-ltrk="Share RRSS" cmp-ltrk-idx="6" mrfobservableid="fa994120-f8f5-4fb5-8f20-daa3bb6ebb63" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);">Juan Pablo Pérez Tomalá</a></span></li></ul></div><div class="published-date" style="margin: 0px; padding: 0px 0px 5px; font-family: &quot;Gill Sans&quot;, sans-serif; font-size: 13px; line-height: 16px;"><time datetime="1764028202" style="margin: 0px; padding: 0px;">24 de noviembre, 2025</time></div></div></div><div class="google-discover-cta" style="margin: 0px 0px 5px; padding: 8px; color: rgb(0, 0, 0); font-family: Fira, sans-serif; font-size: 18px; font-variant-ligatures: none; background-color: rgb(248, 249, 250); border-radius: 8px; border-left: 4px solid rgb(66, 133, 244);"><p style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; font-size: 14px; color: rgb(51, 51, 51);"><strong style="margin: 0px; padding: 0px;"><a href="https://profile.google.com/cp/CgsvZy8xMjFkcGt4ax" target="_blank" rel="noopener noreferrer" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);">Activa las noticias de EXPRESO aquí:&nbsp;</a><a href="https://profile.google.com/cp/CgsvZy8xMjFkcGt4ax" target="_blank" rel="noopener noreferrer" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(66, 133, 244); font-weight: 500;">Síguenos en Google Discover</a></strong></p></div><div class="content-modules" style="margin: 0px 0px 15px; padding: 0px; width: 780px; display: inline-block; color: rgb(0, 0, 0); font-family: Fira, sans-serif; font-size: 18px; font-variant-ligatures: none;"><p class="paragraph " id="m102-101-103" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">El casco de Emanuel Sánchez&nbsp;<strong style="margin: 0px; padding: 0px;">no resistió el golpe de un combo</strong>. Él mismo fue el encargado de utilizar esta herramienta para probar si este elemento, que utiliza al conducir su moto, le salvaría la vida.</p><div class="related " id="m107-106-108" style="margin: 0px 0px 15px; padding: 0px;"><ul style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; list-style-type: none; display: flex; flex-direction: column; align-items: center;"><li id="m117-116-118" style="margin: 0px; padding: 0px; grid-template-columns: 16px 1fr; display: grid; gap: 8px; align-items: center; justify-content: center;"><h2 style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; font-family: &quot;Majerit Headline&quot;, serif; font-size: 14px; line-height: 17px;"><br></h2></li></ul></div><p class="paragraph " id="m140-139-141" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">Él fue uno de los 28 voluntarios que participaron este lunes 24 de noviembre en el evento “El Combazo”, organizado por la Fundación Movidana, para&nbsp;<strong style="margin: 0px; padding: 0px;">mostrar la vulnerabilidad de estos accesorios</strong>.</p><p class="paragraph " id="m145-144-146" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">El golpe de un combo<strong style="margin: 0px; padding: 0px;">&nbsp;equivale al 10 % del impacto&nbsp;</strong>en el caso de un siniestro vial, advirtió Paola Carvajal, directora de la organización.</p><div class="st-placement standard_3 inArticle" id="standard_3" style="direction: ltr; all: initial !important;"></div><p class="paragraph " id="m150-149-151" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">“<strong style="margin: 0px; padding: 0px;">Se están comercializando muchos más cascos sin certificado homologado</strong>, poniendo en riesgo muchas más vidas en nuestras calles”, dijo.</p><blockquote id="m155-154-156" style="margin-bottom: 15px; padding: 0px;"><h2 class="c-detail__destacado " id="m160-159-161" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; font-size: 20px; font-weight: bold; color: rgb(24, 103, 117) !important;">Cómo identificar un casco homologado en Ecuador</h2></blockquote><p class="paragraph " id="m165-164-166" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">Por eso, se destacó la importancia de que los usuarios adquieran cascos que tienen<strong style="margin: 0px; padding: 0px;">&nbsp;impresas certificaciones como la DOT y etiquetas con datos</strong>&nbsp;como fecha y lugar de fabricación.</p><p class="paragraph " id="m170-169-171" data-mrf-recirculation="Links párrafos" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; font-size: 17px; line-height: 20px; color: rgb(75, 75, 75);">Además, en la calota interna tienen espuma de poliestireno de densidad múltiple, que&nbsp;<strong style="margin: 0px; padding: 0px;">protege la cabeza de un golpe fuerte</strong></p></div>                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sección de Locutores -->
    <section id="locutores" class="section-padding">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Nuestros Locutores</h2>
                <p class="section-subtitle">Conoce al equipo que hace posible la magia de la radio</p>
            </div>
            
            <div class="row">
                                    <div class="col-md-4 mb-4">
                        <div class="card glass-card h-100">
                                                            <img src="uploads/locutores/681880351c204.jpg" 
                                     class="card-img-top" alt="JUAN CARLOS BETANCOURTH"
                                     style="height: 300px; object-fit: cover;">
                                                        <div class="card-body">
                                <h5 class="card-title">JUAN CARLOS BETANCOURTH</h5>
                                <p class="card-text">Juan Carlos Betancourth Delgado
Locutor de E15 Radio Motera | Motociclista apasionado | Apoyo constante al emprendimiento

Soy Juan Carlos Betancourth Delgado
orgullosamente parte de E15 Radio Motera, una emisora hecha por y para motociclistas. Mi pasión por las motos va más allá del asfalto: creo firmemente en el poder de la comunidad y en la importancia de apoyar a quienes sueñan con emprender. Desde el micrófono, no solo comparto historias, rutas y novedades del mundo biker, sino que también brindo un espacio para impulsar a todos aquellos que quieren crecer, crear y avanzar. ¡Aquí estamos para rodar juntos y construir camino!</p>
                                
                                                                    <div class="social-links mt-3">
                                                                            </div>
                                                            </div>
                        </div>
                    </div>
                            </div>
        </div>
    </section>
 <!-- Sección de multimedia -->
    
    <!-- Sección de contacto -->
    <section id="contacto">
        <h2 class="section-title reveal">Contacto</h2>
        
        <!-- Publicidad abajo del contenido -->
                    <div class="publicidad-container">
                                    <div class="publicidad-item">
                        <div class="publicidad">
                                                            <a href="https://www.tiktok.com/@chorilocooficial" 
                                   class="publicidad-link" 
                                   data-publicidad-id="5"
                                   target="_blank">
                                                        
                                                            <img src="uploads/publicidad/publicidad_1764743776.png" 
                                     alt="CHORIZO DE RES CHORILOCO: FUEGO, SABOR Y MALECÓN">
                                                        
                            <div class="publicidad-content">
                                <h3 class="publicidad-title">CHORIZO DE RES CHORILOCO: FUEGO, SABOR Y MALECÓN</h3>
                                                                    <p class="publicidad-description">En pleno Malecón 2000 de Guayaquil, el sol brilla, el río Guayas corre…
y la parrilla de Choriloco no se apaga.
El chorizo de res Choriloco es para los que aman el sabor intenso: carne de res bien sazonada, al carbón, jugosa y humeante, perfecta para compartir mientras paseas junto al río.
Con nuestros 4 sabores de chorizo de res, cada bocado sabe a momento inolvidable frente al Guayas.
Choriloco: donde el Malecón también huele a parrilla.</p>
                                                            </div>
                            
                                                            </a>
                                                    </div>
                    </div>
                                    <div class="publicidad-item">
                        <div class="publicidad">
                                                            <a href="https://www.facebook.com/profile.php?id=61580516984243" 
                                   class="publicidad-link" 
                                   data-publicidad-id="4"
                                   target="_blank">
                                                        
                                                            <img src="uploads/publicidad/publicidad_1764740028.png" 
                                     alt="CHORIZO DE POLLO CHORILOCO: LIGERO, JUGOSO Y BIEN PARRILLADO">
                                                        
                            <div class="publicidad-content">
                                <h3 class="publicidad-title">CHORIZO DE POLLO CHORILOCO: LIGERO, JUGOSO Y BIEN PARRILLADO</h3>
                                                                    <p class="publicidad-description">En la Terminal de Santa Elena, el viaje empieza con sabor.
El chorizo de pollo Choriloco es perfecto para quienes quieren algo más ligero, sin perder el gusto de la parrilla: jugoso, doradito y listo para llevar.
Disfruta nuestros 4 sabores de chorizo de pollo mientras esperas tu bus o paseas por el centro comercial.
Choriloco: tu parada obligatoria antes de seguir el camino.</p>
                                                            </div>
                            
                                                            </a>
                                                    </div>
                    </div>
                            </div>
        
        <div class="section-content reveal">
            <div class="contact-grid">
                                <div class="contact-card">
                    <i class="fas fa-phone-alt contact-icon"></i>
                    <h3 class="contact-title">Teléfono</h3>
                    <p class="contact-info">+593982627178 / +593989974224 / +573189271433</p>
                    <a href="tel:+593982627178+593989974224+573189271433" class="contact-link">Llamar ahora</a>
                </div>
                
                                <div class="contact-card">
                    <i class="fas fa-envelope contact-icon"></i>
                    <h3 class="contact-title">Email</h3>
                    <p class="contact-info">e15radiomotera@gmail.com</p>
                    <a href="mailto:e15radiomotera@gmail.com" class="contact-link">Enviar email</a>
                </div>
                
                                <div class="contact-card">
                    <i class="fas fa-map-marker-alt contact-icon"></i>
                    <h3 class="contact-title">Dirección</h3>
                    <p class="contact-info">ECUADOR GUAYAQUIL CIUDAD SANTIAGO ETP LAS PEÑAS </p>
                    <a href="https://maps.google.com/?q=ECUADOR+GUAYAQUIL+CIUDAD+SANTIAGO+ETP+LAS+PE%C3%91AS+" target="_blank" class="contact-link">Ver en mapa</a>
                </div>
                            </div>

                        <div class="whatsapp-section">
                <h3 class="whatsapp-text">¡Contáctanos por WhatsApp!</h3>
                
                                <p class="whatsapp-text">Haz clic en el botón para iniciar una conversación</p>
                <a href="https://wa.me/593982627178" 
                   class="whatsapp-button" 
                   target="_blank">
                    <i class="fab fa-whatsapp"></i>
                    Chatear por WhatsApp
                </a>
                
                                <p class="whatsapp-text">O escanea nuestro código QR</p>
                <div class="qr-code">
                    <img src="uploads/qr_code_1764676842.jpg" 
                         alt="Código QR de WhatsApp">
                </div>
                            </div>
                    </div>
    </section>

    <!-- Pie de página -->
    <footer>
        <!-- Publicidad en el footer -->
                    <div class="publicidad-container">
                                    <div class="publicidad-item">
                        <div class="publicidad">
                                                            <a href="https://www.tiktok.com/@chorilocooficial" 
                                   class="publicidad-link" 
                                   data-publicidad-id="3"
                                   target="_blank">
                                                        
                                                            <img src="uploads/publicidad/publicidad_1764742840.png" 
                                     alt="CHORIZO DE CERDO CHORILOCO: SABOR CASERO, FUEGO DE PARRILLA">
                                                        
                            <div class="publicidad-content">
                                <h3 class="publicidad-title">CHORIZO DE CERDO CHORILOCO: SABOR CASERO, FUEGO DE PARRILLA</h3>
                                                                    <p class="publicidad-description">En la plaza de mercado de La Libertad, el día empieza con aroma a campo y a carbón.
Así nace el chorizo de cerdo Choriloco: carne seleccionada, especias frescas, manos expertas y una parrilla encendida desde temprano.
Mientras la gente compra sus víveres, otros ya están disfrutando de nuestros 4 sabores de chorizo, recién hechos y llenos de sabor.
Choriloco: donde el mercado huele a parrilla y a chorizo del bueno.</p>
                                                            </div>
                            
                                                            </a>
                                                    </div>
                    </div>
                            </div>
        
        <div class="footer-logo"> E 15 RADIO MOTERA</div>
        <p class="footer-slogan">E 15 RADIO MOTERA DONDE LA CARRETERA Y LA MUSICA SE ENCUENTRAN</p>
        
        <div class="social-links">
                            <a href="https://linktr.ee/e15radiomotera" class="social-link" target="_blank" aria-label="Facebook">
                    <i class="fab fa-facebook-f"></i>
                </a>
                            <a href="https://linktr.ee/e15radiomotera" class="social-link" target="_blank" aria-label="Instagram">
                    <i class="fab fa-instagram"></i>
                </a>
                            <a href="https://linktr.ee/e15radiomotera" class="social-link" target="_blank" aria-label="Twitter">
                    <i class="fab fa-twitter"></i>
                </a>
                            <a href="https://linktr.ee/e15radiomotera" class="social-link" target="_blank" aria-label="Youtube">
                    <i class="fab fa-youtube"></i>
                </a>
                    </div>
        
        <div class="footer-links">
            <a href="#inicio">Inicio</a>
            <a href="#noticias">Noticias</a>
            <a href="#programacion">Programación</a>
            <a href="#locutores">Locutores</a>
            <a href="#contacto">Contacto</a>
        </div>
        
        <p class="copyright">&copy; 2025  E 15 RADIO MOTERA. Todos los derechos reservados.</p>
        
        <div class="powered-by">
            <a href="https://easyplantillasx.com" target="_blank" class="powered-link">Powered by EasyPlantillasX.com</a>
        </div>
    </footer>

    <!-- Botón de instalación PWA -->
    <div id="pwaInstallButton" class="position-fixed bottom-0 end-0 m-3" style="display: none; z-index: 9999;">
        <div class="tooltip-container">
            <button class="btn btn-primary rounded-circle p-3 shadow-lg install-pulse" id="installButton" style="background: var(--neon-pink); border: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
                <i class="fas fa-download" style="font-size: 1.5rem; color: white;"></i>
            </button>
            <div class="tooltip-text" id="pwaTooltip">
                Toca para instalar la app
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- PWA Installation Script -->
    <script>
        let deferredPrompt;
        const installButton = document.getElementById('installButton');
        const pwaInstallButton = document.getElementById('pwaInstallButton');
        const pwaTooltip = document.getElementById('pwaTooltip');

        // Función para mostrar y ocultar el tooltip
        function showTooltip() {
            pwaTooltip.classList.add('show');
            setTimeout(() => {
                pwaTooltip.classList.remove('show');
            }, 5000); // El tooltip desaparecerá después de 5 segundos
        }

        // Registrar el Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('ServiceWorker registrado exitosamente:', registration.scope);
                    })
                    .catch(error => {
                        console.log('Error al registrar el ServiceWorker:', error);
                    });
            });
        }

        // Mostrar el botón de instalación cuando la PWA puede ser instalada
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            pwaInstallButton.style.display = 'block';
            // Mostrar el tooltip inmediatamente cuando el botón aparece
            setTimeout(showTooltip, 500); // Pequeño retraso para asegurar que el botón esté visible
            console.log('PWA puede ser instalada');
        });

        // Manejar la instalación cuando se hace clic en el botón
        installButton.addEventListener('click', async () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                console.log(`Usuario ${outcome === 'accepted' ? 'aceptó' : 'rechazó'} la instalación`);
                deferredPrompt = null;
                pwaInstallButton.style.display = 'none';
            }
        });

        // Ocultar el botón si la PWA ya está instalada
        window.addEventListener('appinstalled', () => {
            pwaInstallButton.style.display = 'none';
            deferredPrompt = null;
            console.log('PWA instalada exitosamente');
        });

        // Verificar si la PWA ya está instalada
        if (window.matchMedia('(display-mode: standalone)').matches) {
            pwaInstallButton.style.display = 'none';
            console.log('PWA ya está instalada');
        }

        // Verificar si el navegador soporta la instalación de PWA
        if ('getInstalledRelatedApps' in navigator) {
            navigator.getInstalledRelatedApps().then(relatedApps => {
                if (relatedApps.length > 0) {
                    pwaInstallButton.style.display = 'none';
                    console.log('PWA ya está instalada (verificado por getInstalledRelatedApps)');
                }
            });
        }
    </script>
</body>

</html>

<script>
function trackClick(id) {
    fetch('track_click.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'id=' + id
    })
    .then(response => response.json())
    .then(data => {
        if (data.url) {
            window.open(data.url, '_blank');
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>

<!-- Ad Click Tracking Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add click handlers to all ad links
    document.querySelectorAll('.publicidad-link').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent default link behavior
            
            const adId = this.getAttribute('data-publicidad-id');
            if (!adId) return; // Skip if no ad ID
            
            // Send tracking request
            fetch('track_click.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'id=' + encodeURIComponent(adId)
            })
            .then(response => response.json())
            .then(data => {
                if (data.url) {
                    // Abrir en una nueva pestaña
                    window.open(data.url, '_blank');
                } else {
                    console.error('No URL provided in response');
                    // Fallback: abrir en nueva pestaña
                    window.open(this.href, '_blank');
                }
            })
            .catch(error => {
                console.error('Error tracking click:', error);
                // Fallback: abrir en nueva pestaña
                window.open(this.href, '_blank');
            });
        });
    });
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Menú hamburguesa para móviles
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        
        if (menuToggle && navLinks) {
            menuToggle.addEventListener('click', function() {
                menuToggle.classList.toggle('active');
                navLinks.classList.toggle('active');
            });
        }
        
        // Cerrar menú al hacer clic en un enlace
        const navLinksItems = document.querySelectorAll('.nav-links a');
        navLinksItems.forEach(link => {
            link.addEventListener('click', function() {
                menuToggle.classList.remove('active');
                navLinks.classList.remove('active');
            });
        });
    });
</script>
</body>

</html>