error code:
RedruM Radio DGO
Sign-In
Verify Email Address Account Sign-Out
Menu
News
Program
Schedule Shows Specials
Program
Schedule Shows Specials
Staff

Embed The Radio Player In Your Website
Copy the code below and paste it into your website.

Download our desktop apps

RedruM Radio DGO

<!DOCTYPE html>
<html lang="es" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REDRUM RADIO | La Voz del Terror - Transmisiones Nocturnas 2026</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@300;400;600;800&family=Nosifer&family=Special+Elite&display=swap" rel="stylesheet">
   
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        redrum: {
                            blood: '#8B0000',
                            crimson: '#DC143C',
                            bright: '#FF0000',
                            dark: '#1A0000',
                            charcoal: '#0D0D0D',
                            slate: '#171717',
                        }
                    },
                    fontFamily: {
                        horror: ['Creepster', 'cursive'],
                        blood: ['Nosifer', 'cursive'],
                        typewriter: ['Special Elite', 'monospace'],
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'pulse-glow': 'pulseGlow 2s infinite',
                        'flicker': 'flicker 3s infinite',
                    },
                    keyframes: {
                        pulseGlow: {
                            '0%, 100%': { boxShadow: '0 0 15px rgba(220, 20, 60, 0.6), 0 0 30px rgba(139, 0, 0, 0.4)' },
                            '50%': { boxShadow: '0 0 25px rgba(255, 0, 0, 0.9), 0 0 50px rgba(220, 20, 60, 0.7)' },
                        },
                        flicker: {
                            '0%, 100%': { opacity: 1 },
                            '41.99%': { opacity: 1 },
                            '42%': { opacity: 0.3 },
                            '43%': { opacity: 0.8 },
                            '45%': { opacity: 0.2 },
                            '46%': { opacity: 0.9 },
                            '80%': { opacity: 1 },
                            '83%': { opacity: 0.4 },
                            '87%': { opacity: 1 },
                        }
                    }
                }
            }
        }
    </script>
   
    <style>
        body {
            background-color: #080808;
            color: #d1d5db;
            overflow-x: hidden;
        }

        /* Barra de desplazamiento personalizada estilo sangriento */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0d0d0d;
        }
        ::-webkit-scrollbar-thumb {
            background: #500000;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #8b0000;
        }

        /* Efecto de viñeta oscura */
        .vignette {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 120px rgba(0,0,0,0.92);
            pointer-events: none;
            z-index: 40;
        }

        /* Líneas de escáner TV estilo retro */
        .scanlines {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%,
                rgba(0, 0, 0, 0.25) 50%
            );
            background-size: 100% 4px;
            z-index: 39;
            pointer-events: none;
            opacity: 0.5;
        }

        /* Patrón alfombra de 'El Resplandor' (The Overlook Carpet) */
        .carpet-pattern {
            background-color: #1a0000;
            background-image: radial-gradient(#dc143c 0.75px, transparent 0.75px), radial-gradient(#dc143c 0.75px, #0d0d0d 0.75px);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
            opacity: 0.15;
        }

        /* Espejar la letra R estilo REDRUM */
        .reverse-r {
            display: inline-block;
            transform: scaleX(-1);
        }
    </style>
</head>
<body class="font-sans antialiased selection:bg-redrum-blood selection:text-white">

    <div class="vignette"></div>
    <div class="scanlines"></div>

    <!-- MAIN WRAPPER -->
    <div class="relative z-10 flex flex-col min-h-screen pb-32">
       
        <header class="sticky top-0 z-50 bg-redrum-charcoal/90 backdrop-blur-md border-b border-redrum-blood/40">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-20">
                    <!-- Marca / Logotipo -->
                    <a href="#" class="flex items-center space-x-3 group">
                        <div class="w-12 h-12 rounded-full bg-redrum-dark border-2 border-redrum-crimson flex items-center justify-center shadow-[0_0_15px_rgba(220,20,60,0.5)] group-hover:scale-105 transition-transform duration-300">
                            <i class="fa-solid fa-microphone-lines text-redrum-crimson text-xl animate-flicker"></i>
                        </div>
                        <div class="flex flex-col">
                            <span class="font-horror text-3xl tracking-wider text-red-600 drop-shadow-[0_2px_8px_rgba(139,0,0,0.8)] group-hover:text-red-500 transition-colors">
                                RE<span class="reverse-r">D</span>RUM
                            </span>
                            <span class="font-typewriter text-xs text-gray-400 -mt-2 tracking-widest uppercase">RADIO 2026</span>
                        </div>
                    </a>

                    <!-- Menú Navegación Escritorio -->
                    <nav class="hidden md:flex items-center space-x-8 font-typewriter text-sm tracking-wider">
                        <a href="#hero" class="text-gray-200 hover:text-redrum-crimson transition-colors flex items-center space-x-2">
                            <span class="text-redrum-crimson">&gt;</span> <span>SEÑAL EN VIVO</span>
                        </a>
                        <a href="#programacion" class="text-gray-400 hover:text-redrum-crimson transition-colors flex items-center space-x-2">
                            <span class="text-redrum-crimson">&gt;</span> <span>CARTELERA</span>
                        </a>
                        <a href="#podcasts" class="text-gray-400 hover:text-redrum-crimson transition-colors flex items-center space-x-2">
                            <span class="text-redrum-crimson">&gt;</span> <span>PODCASTS</span>
                        </a>
                        <a href="#peticiones" class="text-gray-400 hover:text-redrum-crimson transition-colors flex items-center space-x-2">
                            <span class="text-redrum-crimson">&gt;</span> <span>CABINA DEL TERROR</span>
                        </a>
                        <a href="#noticias" class="text-gray-400 hover:text-redrum-crimson transition-colors flex items-center space-x-2">
                            <span class="text-redrum-crimson">&gt;</span> <span>LEYENDAS</span>
                        </a>
                    </nav>

                    <!-- Estado Transmisión en Vivo -->
                    <div class="hidden sm:flex items-center space-x-4">
                        <div class="flex items-center space-x-2 bg-black/60 px-3 py-1.5 rounded-full border border-redrum-blood/60 shadow-inner">
                            <span class="w-3 h-3 rounded-full bg-red-600 animate-pulse shadow-[0_0_8px_#ff0000]"></span>
                            <span class="font-typewriter text-xs text-red-500 font-bold uppercase tracking-widest">TRANSMITIENDO EN VIVO</span>
                        </div>
                    </div>

                    <!-- Botón Menú Móvil -->
                    <button id="mobile-menu-btn" class="md:hidden text-gray-300 hover:text-white focus:outline-none p-2" aria-label="Abrir Menú">
                        <i class="fa-solid fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>

            <!-- Menú Desplegable Móvil -->
            <div id="mobile-menu" class="hidden md:hidden bg-redrum-charcoal border-b border-redrum-blood/40 px-4 pt-2 pb-6 space-y-3 font-typewriter">
                <a href="#hero" class="block text-gray-200 hover:text-redrum-crimson py-2 border-b border-gray-800">SEÑAL EN VIVO</a>
                <a href="#programacion" class="block text-gray-400 hover:text-redrum-crimson py-2 border-b border-gray-800">CARTELERA NOCTURNA</a>
                <a href="#podcasts" class="block text-gray-400 hover:text-redrum-crimson py-2 border-b border-gray-800">PODCASTS Y ARCHIVOS</a>
                <a href="#peticiones" class="block text-gray-400 hover:text-redrum-crimson py-2 border-b border-gray-800">CABINA DEL TERROR</a>
                <a href="#noticias" class="block text-gray-400 hover:text-redrum-crimson py-2">LEYENDAS MACABRAS</a>
            </div>
        </header>

        <section id="hero" class="relative py-16 md:py-24 overflow-hidden border-b border-redrum-blood/30">
            <!-- Fondo de atmósfera -->
            <div class="absolute inset-0 carpet-pattern pointer-events-none"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-black/80 via-redrum-charcoal/90 to-black pointer-events-none"></div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                   
                    <!-- Información Principal del Hero -->
                    <div class="lg:col-span-7 space-y-6 text-center lg:text-left">
                        <div class="inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-redrum-blood/20 border border-redrum-crimson/40 text-red-400 text-xs font-typewriter tracking-widest uppercase">
                            <i class="fa-solid fa-biohazard text-redrum-crimson"></i>
                            <span>Transmitiendo desde el Hotel Overlook</span>
                        </div>

                        <h1 class="font-horror text-6xl sm:text-7xl lg:text-8xl text-red-600 tracking-wider leading-none drop-shadow-[0_5px_15px_rgba(139,0,0,0.9)] animate-flicker">
                            RE<span class="reverse-r">D</span>RUM RADIO
                        </h1>

                        <p class="font-typewriter text-xl sm:text-2xl text-red-200/90 tracking-wide font-light">
                            "La voz del terror, transmite tus pesadillas 24/7. Mucho trabajo y poco juego hacen de Jack un chico aburrido..."
                        </p>

                        <p class="text-gray-400 max-w-2xl text-base leading-relaxed">
                            Sintoniza la frecuencia más oscura de la web. Historias macabras a medianoche, creepypastas, synthwave oscuro, soundtracks de películas de culto y llamadas paranormales en directo.
                        </p>

                        <!-- Controles de Acción -->
                        <div class="pt-4 flex flex-wrap gap-4 justify-center lg:justify-start">
                            <button id="hero-play-btn" class="px-8 py-4 rounded-lg bg-redrum-blood hover:bg-redrum-crimson text-white font-bold text-lg font-typewriter tracking-widest shadow-[0_0_20px_rgba(220,20,60,0.6)] hover:shadow-[0_0_35px_rgba(255,0,0,0.9)] transition-all duration-300 flex items-center space-x-3 transform hover:-translate-y-0.5 active:translate-y-0">
                                <i id="hero-play-icon" class="fa-solid fa-play"></i>
                                <span id="hero-play-text">SINTONIZAR AHORA</span>
                            </button>

                            <button id="ambient-btn" class="px-6 py-4 rounded-lg bg-redrum-slate hover:bg-black text-gray-300 hover:text-red-400 font-typewriter text-sm border border-redrum-blood/40 transition-all duration-300 flex items-center space-x-2">
                                <i class="fa-solid fa-wind text-gray-500"></i>
                                <span>SONIDO AMBIENTAL</span>
                            </button>
                        </div>
                    </div>

                    <!-- Visualizador & Reproductor Principal -->
                    <div class="lg:col-span-5">
                        <div class="bg-redrum-slate/90 border-2 border-redrum-blood/60 rounded-xl p-6 shadow-[0_0_40px_rgba(0,0,0,0.9)] relative overflow-hidden backdrop-blur-md">
                            <!-- Tornillos retro decorativos -->
                            <div class="absolute top-2 left-2 text-gray-600 text-xs"><i class="fa-solid fa-plus"></i></div>
                            <div class="absolute top-2 right-2 text-gray-600 text-xs"><i class="fa-solid fa-plus"></i></div>
                            <div class="absolute bottom-2 left-2 text-gray-600 text-xs"><i class="fa-solid fa-plus"></i></div>
                            <div class="absolute bottom-2 right-2 text-gray-600 text-xs"><i class="fa-solid fa-plus"></i></div>

                            <div class="flex items-center justify-between border-b border-gray-800 pb-4 mb-4">
                                <div>
                                    <span class="text-xs font-typewriter text-red-500 tracking-widest uppercase block">FRECUENCIA ACTUAL</span>
                                    <h3 class="text-xl font-bold font-typewriter text-white">106.6 MHz - OVERLOOK</h3>
                                </div>
                                <div class="px-3 py-1 bg-red-950/80 border border-red-600/50 rounded text-red-500 font-mono text-xs font-bold animate-pulse">
                                    EN VIVO 24/7
                                </div>
                            </div>

                            <!-- Canvas del Visualizador de Ondas -->
                            <div class="relative bg-black rounded-lg border border-redrum-blood/40 h-40 mb-4 overflow-hidden flex items-center justify-center">
                                <canvas id="visualizer-canvas" class="w-full h-full block"></canvas>
                                <div id="visualizer-placeholder" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 text-gray-500 transition-opacity duration-300">
                                    <i class="fa-solid fa-radio text-4xl mb-2 text-redrum-blood/60 animate-pulse"></i>
                                    <span class="font-typewriter text-xs text-gray-400">PRESIONA PLAY PARA INICIAR ONDAS DE AUDIO</span>
                                </div>
                            </div>

                            <!-- Monitor de Pista Actual -->
                            <div class="bg-black/80 border border-gray-800 rounded p-3 mb-4 font-mono text-sm">
                                <div class="text-gray-500 text-xs">SONANDO AHORA:</div>
                                <div id="current-track-title" class="text-red-500 font-bold truncate">Noche de Pesadillas - El Locutor Fantasma</div>
                                <div id="current-track-sub" class="text-gray-400 text-xs truncate">Programa Especial: Los Susurros de la Habitación 237</div>
                            </div>

                            <!-- Indicador de Señal y Volumen -->
                            <div class="grid grid-cols-2 gap-4 text-xs font-typewriter text-gray-400">
                                <div class="flex items-center space-x-2">
                                    <i class="fa-solid fa-signal text-redrum-crimson"></i>
                                    <span>SEÑAL: <strong class="text-green-500">99.8% ESTABLE</strong></span>
                                </div>
                                <div class="flex items-center space-x-2 justify-end">
                                    <i class="fa-solid fa-volume-high text-redrum-crimson"></i>
                                    <input id="hero-volume" type="range" min="0" max="1" step="0.05" value="0.8" class="w-20 accent-red-600 bg-gray-800 h-1 rounded cursor-pointer">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section id="programacion" class="py-16 bg-redrum-charcoal/50 border-b border-redrum-blood/20 relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               
                <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
                    <div>
                        <h2 class="font-horror text-5xl text-red-600 tracking-wide mb-2">CARTELERA NOCTURNA</h2>
                        <p class="font-typewriter text-gray-400 text-sm">Selecciona un día para inspeccionar la programación de la frecuencia macabra</p>
                    </div>

                    <!-- Pestanas de programación -->
                    <div class="mt-6 md:mt-0 flex flex-wrap gap-2 font-typewriter text-xs">
                        <button class="schedule-tab active px-4 py-2 rounded bg-redrum-blood text-white font-bold border border-red-500" data-day="esta-noche">ESTA NOCHE</button>
                        <button class="schedule-tab px-4 py-2 rounded bg-redrum-slate text-gray-400 hover:text-white border border-gray-800" data-day="viernes-13">VIERNES 13</button>
                        <button class="schedule-tab px-4 py-2 rounded bg-redrum-slate text-gray-400 hover:text-white border border-gray-800" data-day="medianoche">HORA DE LAS BRUJAS</button>
                    </div>
                </div>

                <!-- Rejilla de Programas -->
                <div id="shows-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                   
                    <!-- Tarjeta Programa 1 -->
                    <div class="show-card bg-redrum-slate/80 rounded-lg p-5 border border-redrum-blood/30 hover:border-red-600 transition-all duration-300 flex flex-col justify-between group">
                        <div>
                            <div class="flex justify-between items-start mb-3">
                                <span class="px-2 py-1 bg-red-950 text-red-400 text-xs font-mono rounded border border-red-800/50">00:00 - 02:00</span>
                                <span class="text-xs font-typewriter text-red-500 animate-pulse">EN VIVO</span>
                            </div>
                            <h3 class="font-horror text-2xl text-white group-hover:text-red-500 transition-colors">Las Horas del Resplandor</h3>
                            <p class="text-xs text-red-400 font-typewriter mb-3">Locutor: Jack Torrance</p>
                            <p class="text-gray-400 text-sm leading-relaxed mb-4">
                                Paisajes sonoros ambientales oscuros mezclados con jazz clásico de los años 20 reproducido al revés.
                            </p>
                        </div>
                        <div class="pt-3 border-t border-gray-800 flex items-center justify-between text-xs text-gray-500 font-typewriter">
                            <span>Género: Dark Ambient</span>
                            <i class="fa-solid fa-ghost text-redrum-crimson opacity-0 group-hover:opacity-100 transition-opacity"></i>
                        </div>
                    </div>

                    <!-- Tarjeta Programa 2 -->
                    <div class="show-card bg-redrum-slate/80 rounded-lg p-5 border border-redrum-blood/30 hover:border-red-600 transition-all duration-300 flex flex-col justify-between group">
                        <div>
                            <div class="flex justify-between items-start mb-3">
                                <span class="px-2 py-1 bg-gray-900 text-gray-400 text-xs font-mono rounded border border-gray-800">02:00 - 04:00</span>
                                <span class="text-xs font-typewriter text-gray-500">A CONTINUACIÓN</span>
                            </div>
                            <h3 class="font-horror text-2xl text-white group-hover:text-red-500 transition-colors">Relatos de Ultratumba</h3>
                            <p class="text-xs text-red-400 font-typewriter mb-3">Locutor: Lloyd el Barman</p>
                            <p class="text-gray-400 text-sm leading-relaxed mb-4">
                                Llamadas en directo de los oyentes contando experiencias paranormales reales y casos no resueltos.
                            </p>
                        </div>
                        <div class="pt-3 border-t border-gray-800 flex items-center justify-between text-xs text-gray-500 font-typewriter">
                            <span>Género: Charla Paranormal</span>
                            <i class="fa-solid fa-phone text-redrum-crimson opacity-0 group-hover:opacity-100 transition-opacity"></i>
                        </div>
                    </div>

                    <!-- Tarjeta Programa 3 -->
                    <div class="show-card bg-redrum-slate/80 rounded-lg p-5 border border-redrum-blood/30 hover:border-red-600 transition-all duration-300 flex flex-col justify-between group">
                        <div>
                            <div class="flex justify-between items-start mb-3">
                                <span class="px-2 py-1 bg-gray-900 text-gray-400 text-xs font-mono rounded border border-gray-800">04:00 - 06:00</span>
                                <span class="text-xs font-typewriter text-gray-500">MADRUGADA</span>
                            </div>
                            <h3 class="font-horror text-2xl text-white group-hover:text-red-500 transition-colors">Rock & Metal Macabro</h3>
                            <p class="text-xs text-red-400 font-typewriter mb-3">Locutora: La Dama de Rojo</p>
                            <p class="text-gray-400 text-sm leading-relaxed mb-4">
                                Synthwave industrial, metal gótico, música electrónica oscura y bandas sonoras de películas de terror.
                            </p>
                        </div>
                        <div class="pt-3 border-t border-gray-800 flex items-center justify-between text-xs text-gray-500 font-typewriter">
                            <span>Género: Darksynth / OST</span>
                            <i class="fa-solid fa-compact-disc text-redrum-crimson opacity-0 group-hover:opacity-100 transition-opacity"></i>
                        </div>
                    </div>

                    <!-- Tarjeta Programa 4 -->
                    <div class="show-card bg-redrum-slate/80 rounded-lg p-5 border border-redrum-blood/30 hover:border-red-600 transition-all duration-300 flex flex-col justify-between group">
                        <div>
                            <div class="flex justify-between items-start mb-3">
                                <span class="px-2 py-1 bg-gray-900 text-gray-400 text-xs font-mono rounded border border-gray-800">06:00 - 08:00</span>
                                <span class="text-xs font-typewriter text-gray-500">ALBA</span>
                            </div>
                            <h3 class="font-horror text-2xl text-white group-hover:text-red-500 transition-colors">Historias del Más Allá</h3>
                            <p class="text-xs text-red-400 font-typewriter mb-3">Locutor: El Narrador Sin Nombre</p>
                            <p class="text-gray-400 text-sm leading-relaxed mb-4">
                                Lecturas de terror narradas con voces espeluznantes, creepypastas clásicas y leyendas urbanas oscuras.
                            </p>
                        </div>
                        <div class="pt-3 border-t border-gray-800 flex items-center justify-between text-xs text-gray-500 font-typewriter">
                            <span>Género: Audiodrama</span>
                            <i class="fa-solid fa-book-skull text-redrum-crimson opacity-0 group-hover:opacity-100 transition-opacity"></i>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section id="podcasts" class="py-16 border-b border-redrum-blood/20 relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-12">
                    <h2 class="font-horror text-5xl text-red-600 tracking-wide mb-2">PODCASTS Y ARCHIVOS PERDIDOS</h2>
                    <p class="font-typewriter text-gray-400 text-sm">¿Te perdiste una transmisión nocturna? Escucha las cintas recuperadas de la emisora.</p>
                </div>

                <div class="space-y-4">
                   
                    <!-- Episodio Podcast 1 -->
                    <div class="podcast-item bg-redrum-slate/60 hover:bg-redrum-slate border border-gray-800 hover:border-redrum-crimson/60 rounded-lg p-4 transition-all duration-300 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="flex items-center space-x-4 w-full sm:w-auto">
                            <button class="podcast-play-btn w-12 h-12 rounded-full bg-red-950 hover:bg-red-700 text-red-400 hover:text-white flex items-center justify-center shrink-0 border border-red-600/40 transition-colors">
                                <i class="fa-solid fa-play ml-0.5"></i>
                            </button>
                            <div>
                                <h4 class="font-typewriter font-bold text-white text-base hover:text-red-400 transition-colors cursor-pointer">
                                    Episodio 237: Los Susurros de la Habitación 237
                                </h4>
                                <div class="text-xs text-gray-500 flex items-center space-x-3 mt-1 font-mono">
                                    <span><i class="fa-regular fa-clock mr-1"></i> 45 mins</span>
                                    <span>•</span>
                                    <span>13 Oct, 2026</span>
                                    <span>•</span>
                                    <span class="text-red-400">Locutor: Jack Torrance</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 w-full sm:w-auto justify-end">
                            <span class="text-xs font-mono text-gray-500 bg-black/50 px-3 py-1 rounded border border-gray-800">4,281 REPRODUCCIONES</span>
                            <button class="text-gray-400 hover:text-red-400 p-2 text-sm" title="Compartir Episodio" onclick="copyShareLink('Los Susurros de la Habitación 237')">
                                <i class="fa-solid fa-share-nodes"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Episodio Podcast 2 -->
                    <div class="podcast-item bg-redrum-slate/60 hover:bg-redrum-slate border border-gray-800 hover:border-redrum-crimson/60 rounded-lg p-4 transition-all duration-300 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="flex items-center space-x-4 w-full sm:w-auto">
                            <button class="podcast-play-btn w-12 h-12 rounded-full bg-red-950 hover:bg-red-700 text-red-400 hover:text-white flex items-center justify-center shrink-0 border border-red-600/40 transition-colors">
                                <i class="fa-solid fa-play ml-0.5"></i>
                            </button>
                            <div>
                                <h4 class="font-typewriter font-bold text-white text-base hover:text-red-400 transition-colors cursor-pointer">
                                    Episodio 236: El Laberinto bajo la Nieve
                                </h4>
                                <div class="text-xs text-gray-500 flex items-center space-x-3 mt-1 font-mono">
                                    <span><i class="fa-regular fa-clock mr-1"></i> 52 mins</span>
                                    <span>•</span>
                                    <span>06 Oct, 2026</span>
                                    <span>•</span>
                                    <span class="text-red-400">Locutor: Danny Torrance</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 w-full sm:w-auto justify-end">
                            <span class="text-xs font-mono text-gray-500 bg-black/50 px-3 py-1 rounded border border-gray-800">8,912 REPRODUCCIONES</span>
                            <button class="text-gray-400 hover:text-red-400 p-2 text-sm" title="Compartir Episodio" onclick="copyShareLink('El Laberinto bajo la Nieve')">
                                <i class="fa-solid fa-share-nodes"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Episodio Podcast 3 -->
                    <div class="podcast-item bg-redrum-slate/60 hover:bg-redrum-slate border border-gray-800 hover:border-redrum-crimson/60 rounded-lg p-4 transition-all duration-300 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="flex items-center space-x-4 w-full sm:w-auto">
                            <button class="podcast-play-btn w-12 h-12 rounded-full bg-red-950 hover:bg-red-700 text-red-400 hover:text-white flex items-center justify-center shrink-0 border border-red-600/40 transition-colors">
                                <i class="fa-solid fa-play ml-0.5"></i>
                            </button>
                            <div>
                                <h4 class="font-typewriter font-bold text-white text-base hover:text-red-400 transition-colors cursor-pointer">
                                    Episodio 235: Estática en el Ascensor de Sangre
                                </h4>
                                <div class="text-xs text-gray-500 flex items-center space-x-3 mt-1 font-mono">
                                    <span><i class="fa-regular fa-clock mr-1"></i> 38 mins</span>
                                    <span>•</span>
                                    <span>29 Sep, 2026</span>
                                    <span>•</span>
                                    <span class="text-red-400">Locutor: Lloyd</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 w-full sm:w-auto justify-end">
                            <span class="text-xs font-mono text-gray-500 bg-black/50 px-3 py-1 rounded border border-gray-800">6,104 REPRODUCCIONES</span>
                            <button class="text-gray-400 hover:text-red-400 p-2 text-sm" title="Compartir Episodio" onclick="copyShareLink('Estática en el Ascensor de Sangre')">
                                <i class="fa-solid fa-share-nodes"></i>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section id="peticiones" class="py-16 bg-redrum-charcoal/40 border-b border-redrum-blood/20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                   
                    <!-- Izquierda: Chat de Oyentes en Vivo -->
                    <div class="lg:col-span-7 bg-redrum-slate/90 border border-redrum-blood/40 rounded-lg p-5 flex flex-col h-[480px]">
                        <div class="flex items-center justify-between border-b border-gray-800 pb-3 mb-4">
                            <div class="flex items-center space-x-2">
                                <i class="fa-solid fa-skull text-red-600"></i>
                                <h3 class="font-typewriter font-bold text-white text-base">CHAT EN VIVO DE LOS OYENTES</h3>
                            </div>
                            <span class="text-xs text-green-500 font-mono"><i class="fa-solid fa-circle text-[8px] mr-1"></i> 666 EN LÍNEA</span>
                        </div>

                        <!-- Lista de Mensajes -->
                        <div id="chat-box" class="flex-1 overflow-y-auto space-y-3 pr-2 font-mono text-xs mb-4">
                            <div class="p-2 bg-black/40 rounded border-l-2 border-red-600">
                                <span class="text-red-500 font-bold">[DJ_Jack]:</span>
                                <span class="text-gray-300">Bienvenidos a Redrum Radio. Transmitan sus peores pesadillas.</span>
                            </div>
                            <div class="p-2 bg-black/20 rounded border-l-2 border-gray-700">
                                <span class="text-gray-400 font-bold">[CazadorNocturno]:</span>
                                <span class="text-gray-300">Esa melodía de jazz al revés me dio escalofríos... 🩸</span>
                            </div>
                            <div class="p-2 bg-black/20 rounded border-l-2 border-gray-700">
                                <span class="text-gray-400 font-bold">[Huesped_237]:</span>
                                <span class="text-gray-300">¿Podrían poner la banda sonora de 'Tubular Bells' o algo de synthwave oscuro a continuación?</span>
                            </div>
                        </div>

                        <!-- Formulario de Mensaje -->
                        <form id="chat-form" class="flex gap-2">
                            <input id="chat-input" type="text" placeholder="Envía un mensaje a la frecuencia del terror..." required class="flex-1 bg-black/80 border border-gray-800 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-red-600 font-mono">
                            <button type="submit" class="px-4 py-2 bg-redrum-blood hover:bg-red-700 text-white font-typewriter text-xs rounded transition-colors">
                                TRANSMITIR
                            </button>
                        </form>
                    </div>

                    <!-- Derecha: Formulario de Peticiones y Historias -->
                    <div class="lg:col-span-5 bg-redrum-slate/90 border border-redrum-blood/40 rounded-lg p-6 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center space-x-2 border-b border-gray-800 pb-3 mb-4">
                                <i class="fa-solid fa-satellite-dish text-red-600"></i>
                                <h3 class="font-typewriter font-bold text-white text-base">CABINA DE PETICIONES</h3>
                            </div>
                            <p class="text-xs text-gray-400 mb-4 font-typewriter leading-relaxed">
                                Envía un pedido de canción o tu relato para ser leído en la medianoche durante la Hora de las Brujas.
                            </p>

                            <form id="request-form" class="space-y-4 font-typewriter text-xs">
                                <div>
                                    <label class="block text-gray-400 mb-1">TU APODO / SEUDÓNIMO</label>
                                    <input type="text" id="req-name" required placeholder="ej. Jack T." class="w-full bg-black/80 border border-gray-800 rounded px-3 py-2 text-white focus:border-red-600 focus:outline-none">
                                </div>
                                <div>
                                    <label class="block text-gray-400 mb-1">CANCIÓN O HISTORIA DE TERROR</label>
                                    <input type="text" id="req-title" required placeholder="ej. Goblin - Tema de Suspiria" class="w-full bg-black/80 border border-gray-800 rounded px-3 py-2 text-white focus:border-red-600 focus:outline-none">
                                </div>
                                <div>
                                    <label class="block text-gray-400 mb-1">DEDICATORIA / MENSAJE DE TERROR</label>
                                    <textarea id="req-msg" rows="3" placeholder="Escribe tu historia o dedicatoria para el locutor..." class="w-full bg-black/80 border border-gray-800 rounded px-3 py-2 text-white focus:border-red-600 focus:outline-none resize-none"></textarea>
                                </div>
                                <button type="submit" class="w-full py-3 bg-redrum-blood hover:bg-redrum-crimson text-white font-bold rounded tracking-widest transition-all duration-300 shadow-[0_0_15px_rgba(139,0,0,0.5)] uppercase">
                                    ENVIAR A LA CABINA DE TRANSMISIÓN
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section id="noticias" class="py-16 border-b border-redrum-blood/20 relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-12">
                    <h2 class="font-horror text-5xl text-red-600 tracking-wide mb-2">CRÓNICAS Y LEYENDAS MACABRAS</h2>
                    <p class="font-typewriter text-gray-400 text-sm">Investigaciones de lo desconocido y sucesos inexplicables.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Noticia 1 -->
                    <article class="bg-redrum-slate/70 border border-gray-800 hover:border-redrum-blood rounded-lg overflow-hidden transition-all duration-300 flex flex-col justify-between">
                        <div class="p-6">
                            <span class="text-xs font-mono text-red-500 uppercase tracking-widest block mb-2">INVESTIGACIÓN #01</span>
                            <h3 class="font-typewriter font-bold text-lg text-white mb-3 hover:text-red-400 transition-colors">
                                El Enigma de las Frecuencias Fantasma en FM
                            </h3>
                            <p class="text-xs text-gray-400 leading-relaxed font-sans">
                                Reportes indican la aparición de emisiones de radio de orígenes desconocidos que solo pueden sintonizarse en carreteras desiertas durante la madrugada.
                            </p>
                        </div>
                        <div class="p-6 pt-0 font-mono text-xs text-red-400 flex justify-between items-center border-t border-gray-800/50 mt-4">
                            <span>Lectura de 4 min</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>
                    </article>

                    <!-- Noticia 2 -->
                    <article class="bg-redrum-slate/70 border border-gray-800 hover:border-redrum-blood rounded-lg overflow-hidden transition-all duration-300 flex flex-col justify-between">
                        <div class="p-6">
                            <span class="text-xs font-mono text-red-500 uppercase tracking-widest block mb-2">LEYENDA URBAN #02</span>
                            <h3 class="font-typewriter font-bold text-lg text-white mb-3 hover:text-red-400 transition-colors">
                                El Fotograma Maldito de la Habitación 237
                            </h3>
                            <p class="text-xs text-gray-400 leading-relaxed font-sans">
                                Descubre los detalles perturbadores detrás del mito urbano sobre las cintas perdidas grabadas durante las tormentas de nieve en las montañas.
                            </p>
                        </div>
                        <div class="p-6 pt-0 font-mono text-xs text-red-400 flex justify-between items-center border-t border-gray-800/50 mt-4">
                            <span>Lectura de 6 min</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>
                    </article>

                    <!-- Noticia 3 -->
                    <article class="bg-redrum-slate/70 border border-gray-800 hover:border-redrum-blood rounded-lg overflow-hidden transition-all duration-300 flex flex-col justify-between">
                        <div class="p-6">
                            <span class="text-xs font-mono text-red-500 uppercase tracking-widest block mb-2">AUDIO EXPERIMENTO #03</span>
                            <h3 class="font-typewriter font-bold text-lg text-white mb-3 hover:text-red-400 transition-colors">
                                Tonos Binaurales y Parálisis del Sueño
                            </h3>
                            <p class="text-xs text-gray-400 leading-relaxed font-sans">
                                Un análisis sobre cómo ciertas oscilaciones de bajo tono estimulan estados de alerta intensa en el cerebro humano durante la noche.
                            </p>
                        </div>
                        <div class="p-6 pt-0 font-mono text-xs text-red-400 flex justify-between items-center border-t border-gray-800/50 mt-4">
                            <span>Lectura de 5 min</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <footer class="mt-auto bg-black border-t border-redrum-blood/40 pt-12 pb-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-8 pb-12 border-b border-gray-900">
                   
                    <!-- Bio del proyecto -->
                    <div class="md:col-span-5 space-y-4">
                        <div class="flex items-center space-x-2">
                            <span class="font-horror text-3xl text-red-600">RE<span class="reverse-r">D</span>RUM RADIO</span>
                        </div>
                        <p class="text-xs text-gray-400 font-typewriter max-w-sm leading-relaxed">
                            La emisora de radio online de terror, música oscura y creepypastas más estremecedora de internet. Transmitiendo desde las montañas heladas desde 2026.
                        </p>
                        <div class="flex space-x-4 text-gray-400 pt-2">
                            <a href="#" class="hover:text-red-500 text-lg transition-colors" aria-label="Spotify"><i class="fa-brands fa-spotify"></i></a>
                            <a href="#" class="hover:text-red-500 text-lg transition-colors" aria-label="Apple Podcasts"><i class="fa-solid fa-podcast"></i></a>
                            <a href="#" class="hover:text-red-500 text-lg transition-colors" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
                            <a href="#" class="hover:text-red-500 text-lg transition-colors" aria-label="Discord"><i class="fa-brands fa-discord"></i></a>
                        </div>
                    </div>

                    <!-- Formulario Boletín -->
                    <div class="md:col-span-7 flex flex-col justify-center">
                        <div class="bg-redrum-slate/50 p-6 rounded-lg border border-gray-800">
                            <h4 class="font-typewriter font-bold text-white text-sm mb-1">SUSCRÍBETE A LAS CRÓNICAS DE LA NOCHE</h4>
                            <p class="text-xs text-gray-400 mb-4 font-typewriter">Recibe avisos de emisiones especiales y relatos exclusivos en tu correo electrónico.</p>
                            <form id="newsletter-form" class="flex flex-col sm:flex-row gap-2">
                                <input type="email" placeholder="Ingresa tu correo electrónico..." required class="flex-1 bg-black border border-gray-800 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-red-600 font-mono">
                                <button type="submit" class="px-6 py-2 bg-redrum-blood hover:bg-red-700 text-white font-typewriter text-xs font-bold rounded transition-colors whitespace-nowrap">
                                    UNIRME AL AQUIELARRE
                                </button>
                            </form>
                        </div>
                    </div>

                </div>

                <div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-gray-600 font-mono">
                    <p>© 2026 REDRUM RADIO. Todos los derechos reservados. Mucho trabajo y poco juego...</p>
                    <div class="flex space-x-6 mt-4 sm:mt-0">
                        <a href="#" class="hover:text-gray-400">Política de Privacidad</a>
                        <a href="#" class="hover:text-gray-400">Términos de Servicio</a>
                        <a href="#" class="hover:text-gray-400">Cumplimiento Overlook</a>
                    </div>
                </div>
            </div>
        </footer>

    </div>

    <div id="sticky-player" class="fixed bottom-0 left-0 right-0 z-50 bg-redrum-charcoal/95 border-t-2 border-redrum-crimson backdrop-blur-lg px-4 py-3 shadow-[0_-5px_25px_rgba(0,0,0,0.9)]">
        <div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
           
            <!-- Info Pista Sonando -->
            <div class="flex items-center space-x-4 min-w-0 w-1/3 sm:w-1/4">
                <div class="w-10 h-10 rounded bg-black border border-redrum-blood flex items-center justify-center shrink-0">
                    <i class="fa-solid fa-compact-disc text-red-600 text-xl animate-spin" style="animation-duration: 4s;"></i>
                </div>
                <div class="min-w-0">
                    <div id="sticky-title" class="font-typewriter text-xs font-bold text-white truncate">Noche de Pesadillas</div>
                    <div id="sticky-sub" class="text-[10px] text-gray-400 font-mono truncate">Transmisión en Vivo • Overlook 106.6 FM</div>
                </div>
            </div>

            <!-- Controles Reproductor Sticky -->
            <div class="flex flex-col items-center justify-center space-y-1">
                <div class="flex items-center space-x-6">
                    <button id="prev-btn" class="text-gray-400 hover:text-white text-sm" title="Anterior"><i class="fa-solid fa-backward-step"></i></button>
                    <button id="sticky-play-btn" class="w-10 h-10 rounded-full bg-redrum-blood hover:bg-redrum-crimson text-white flex items-center justify-center shadow-[0_0_10px_rgba(220,20,60,0.8)] transition-all">
                        <i id="sticky-play-icon" class="fa-solid fa-play"></i>
                    </button>
                    <button id="next-btn" class="text-gray-400 hover:text-white text-sm" title="Siguiente"><i class="fa-solid fa-forward-step"></i></button>
                </div>
                <!-- Barra de progreso simulada -->
                <div class="w-48 sm:w-80 bg-gray-900 h-1.5 rounded-full overflow-hidden flex items-center cursor-pointer" id="progress-container">
                    <div id="progress-bar" class="bg-red-600 h-full w-1/3"></div>
                </div>
            </div>

            <!-- Volumen & Estado Derecha -->
            <div class="flex items-center space-x-4 justify-end w-1/3 sm:w-1/4">
                <div class="hidden sm:flex items-center space-x-2">
                    <i class="fa-solid fa-volume-low text-gray-400 text-xs"></i>
                    <input id="sticky-volume" type="range" min="0" max="1" step="0.05" value="0.8" class="w-16 accent-red-600 bg-gray-800 h-1 rounded cursor-pointer">
                </div>
                <div class="px-2.5 py-1 bg-red-950/80 border border-red-600/60 rounded text-[10px] font-mono text-red-400 tracking-wider uppercase font-bold">
                    EN VIVO
                </div>
            </div>

        </div>
    </div>

    <script>
        // Elementos del DOM
        const heroPlayBtn = document.getElementById('hero-play-btn');
        const heroPlayIcon = document.getElementById('hero-play-icon');
        const heroPlayText = document.getElementById('hero-play-text');
       
        const stickyPlayBtn = document.getElementById('sticky-play-btn');
        const stickyPlayIcon = document.getElementById('sticky-play-icon');
       
        const ambientBtn = document.getElementById('ambient-btn');
        const visualizerCanvas = document.getElementById('visualizer-canvas');
        const visualizerPlaceholder = document.getElementById('visualizer-placeholder');
        const ctx = visualizerCanvas.getContext('2d');

        const heroVolume = document.getElementById('hero-volume');
        const stickyVolume = document.getElementById('sticky-volume');

        const chatForm = document.getElementById('chat-form');
        const chatInput = document.getElementById('chat-input');
        const chatBox = document.getElementById('chat-box');
        const requestForm = document.getElementById('request-form');
        const newsletterForm = document.getElementById('newsletter-form');
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

        // Estado Global
        let isPlaying = false;
        let isAmbienceOn = false;
        let audioCtx = null;
        let masterGain = null;
        let ambientGain = null;
        let noiseNode = null;
        let animFrameId = null;

        // Menú Móvil
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Ajuste dinámico de dimensiones del Canvas
        function resizeCanvas() {
            if (visualizerCanvas.parentElement) {
                visualizerCanvas.width = visualizerCanvas.parentElement.clientWidth;
                visualizerCanvas.height = visualizerCanvas.parentElement.clientHeight;
            }
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // Sintetizador Web Audio API (Efectos de radio estática / ambiente de terror)
        function initAudioEngine() {
            if (audioCtx) return;

            const AudioContext = window.AudioContext || window.webkitAudioContext;
            audioCtx = new AudioContext();

            masterGain = audioCtx.createGain();
            masterGain.gain.setValueAtTime(0.8, audioCtx.currentTime);
            masterGain.connect(audioCtx.destination);

            // Generación de Ruido Blanco/Ambiente de viento helado
            const bufferSize = audioCtx.sampleRate * 2;
            const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
            const output = noiseBuffer.getChannelData(0);
            for (let i = 0; i < bufferSize; i++) {
                output[i] = Math.random() * 2 - 1;
            }

            noiseNode = audioCtx.createBufferSource();
            noiseNode.buffer = noiseBuffer;
            noiseNode.loop = true;

            const filter = audioCtx.createBiquadFilter();
            filter.type = 'bandpass';
            filter.frequency.setValueAtTime(180, audioCtx.currentTime);
            filter.Q.setValueAtTime(3.0, audioCtx.currentTime);

            ambientGain = audioCtx.createGain();
            ambientGain.gain.setValueAtTime(0, audioCtx.currentTime);

            noiseNode.connect(filter);
            filter.connect(ambientGain);
            ambientGain.connect(masterGain);
            noiseNode.start();
        }

        // Conmutar Reproducción de Audio
        function toggleAudio() {
            if (!audioCtx) {
                initAudioEngine();
            }

            if (audioCtx.state === 'suspended') {
                audioCtx.resume();
            }

            isPlaying = !isPlaying;

            if (isPlaying) {
                heroPlayIcon.className = 'fa-solid fa-pause';
                heroPlayText.innerText = 'PAUSAR TRANSMISIÓN';
                stickyPlayIcon.className = 'fa-solid fa-pause';
                visualizerPlaceholder.classList.add('opacity-0');
               
                drawVisualizer();
                mostrarNotificacion('Conectado con éxito a la Frecuencia 106.6 MHz');
            } else {
                heroPlayIcon.className = 'fa-solid fa-play';
                heroPlayText.innerText = 'SINTONIZAR AHORA';
                stickyPlayIcon.className = 'fa-solid fa-play';
                visualizerPlaceholder.classList.remove('opacity-0');
               
                if (animFrameId) cancelAnimationFrame(animFrameId);
            }
        }

        heroPlayBtn.addEventListener('click', toggleAudio);
        stickyPlayBtn.addEventListener('click', toggleAudio);

        // Conmutar Ambiente de Viento/Fantasmal
        ambientBtn.addEventListener('click', () => {
            if (!audioCtx) initAudioEngine();
            if (audioCtx.state === 'suspended') audioCtx.resume();

            isAmbienceOn = !isAmbienceOn;
            if (isAmbienceOn) {
                ambientGain.gain.setTargetAtTime(0.25, audioCtx.currentTime, 0.5);
                ambientBtn.classList.add('border-red-600', 'text-red-400');
                mostrarNotificacion('Efectos ambientales activados');
            } else {
                ambientGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.5);
                ambientBtn.classList.remove('border-red-600', 'text-red-400');
            }
        });

        // Control de Volumen
        function updateVolume(val) {
            if (masterGain && audioCtx) {
                masterGain.gain.setValueAtTime(val, audioCtx.currentTime);
            }
            heroVolume.value = val;
            stickyVolume.value = val;
        }

        heroVolume.addEventListener('input', (e) => updateVolume(parseFloat(e.target.value)));
        stickyVolume.addEventListener('input', (e) => updateVolume(parseFloat(e.target.value)));

        // Dibujo de Ondas Rojas en Canvas
        let phase = 0;
        function drawVisualizer() {
            if (!isPlaying) return;

            const width = visualizerCanvas.width;
            const height = visualizerCanvas.height;

            ctx.clearRect(0, 0, width, height);

            // Rejilla de fondo
            ctx.strokeStyle = 'rgba(139, 0, 0, 0.15)';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, height / 2);
            ctx.lineTo(width, height / 2);
            ctx.stroke();

            // Ondas de frecuencia carmesí
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#DC143C';
            ctx.shadowBlur = 12;
            ctx.shadowColor = '#FF0000';

            phase += 0.08;

            for (let x = 0; x < width; x += 3) {
                const freq = 0.02;
                const amp = height * 0.35;
                const y = height / 2 + Math.sin(x * freq + phase) * Math.cos(x * 0.005) * amp * (Math.random() * 0.2 + 0.9);
                if (x === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }

            ctx.stroke();
            ctx.shadowBlur = 0;

            animFrameId = requestAnimationFrame(drawVisualizer);
        }

        // Pestañas de Programación
        document.querySelectorAll('.schedule-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.schedule-tab').forEach(t => {
                    t.className = 'schedule-tab px-4 py-2 rounded bg-redrum-slate text-gray-400 hover:text-white border border-gray-800';
                });
                this.className = 'schedule-tab active px-4 py-2 rounded bg-redrum-blood text-white font-bold border border-red-500';
            });
        });

        // Reproducción de Episodios de Podcast
        document.querySelectorAll('.podcast-item').forEach(item => {
            const playBtn = item.querySelector('.podcast-play-btn');
            playBtn.addEventListener('click', () => {
                const title = item.querySelector('h4').innerText;
                document.getElementById('current-track-title').innerText = title;
                document.getElementById('sticky-title').innerText = title;
               
                if (!isPlaying) {
                    toggleAudio();
                } else {
                    mostrarNotificacion(`Reproduciendo: ${title}`);
                }
            });
        });

        // Envío de Mensaje en Chat
        chatForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const text = chatInput.value.trim();
            if (!text) return;

            const msgDiv = document.createElement('div');
            msgDiv.className = 'p-2 bg-black/40 rounded border-l-2 border-red-500 animate-pulse';
            msgDiv.innerHTML = `<span class="text-red-400 font-bold">[Tú]:</span> <span class="text-gray-200">${escapeHtml(text)}</span>`;
            chatBox.appendChild(msgDiv);
            chatInput.value = '';
            chatBox.scrollTop = chatBox.scrollHeight;
        });

        // Envío de Petición
        requestForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const name = document.getElementById('req-name').value;
            const title = document.getElementById('req-title').value;
           
            mostrarNotificacion(`Petición para "${title}" recibida de ${name}.`);
            requestForm.reset();
        });

        // Formulario Boletín
        newsletterForm.addEventListener('submit', (e) => {
            e.preventDefault();
            mostrarNotificacion('Te has unido al Aquelarre. Revisa tu correo.');
            newsletterForm.reset();
        });

        // Notificaciones Toast estilo terror
        function mostrarNotificacion(mensaje) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-24 right-6 z-50 bg-redrum-dark border-2 border-redrum-crimson text-white px-5 py-3 rounded-lg shadow-[0_0_20px_rgba(220,20,60,0.8)] font-typewriter text-xs flex items-center space-x-3 transition-opacity duration-300';
            toast.innerHTML = `<i class="fa-solid fa-skull text-red-500 text-base"></i> <span>${escapeHtml(mensaje)}</span>`;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => toast.remove(), 300);
            }, 3500);
        }

        // Copiar Enlace
        function copyShareLink(nombreEpisodio) {
            const dummy = document.createElement('input');
            document.body.appendChild(dummy);
            dummy.value = window.location.href + `#podcast-${encodeURIComponent(nombreEpisodio)}`;
            dummy.select();
            document.execCommand('copy');
            document.body.removeChild(dummy);
            mostrarNotificacion(`Enlace del episodio "${nombreEpisodio}" copiado.`);
        }

        // Escapar caracteres HTML
        function escapeHtml(str) {
            return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
        }
    </script>
</body>
</html>

Latest News

More Articles

No Articles Found

Social Feed

There are no feed providers connected…
Add Feed

888888888

mmmmmmmmm

ooooooooo

nnnnnnnnn

ttttttttt

uuuuuuuuu

eeeeeeeee

sssssssss

wwwwwwwww

hhhhhhhhh

rrrrrrrrr

fffffffff

iiiiiiiii

ddddddddd

aaaaaaaaa

yyyyyyyyy

888

mmm

ooo

nnn

ttt

uuu

eee

sss

www

hhh

rrr

fff

iii

888

mmm

ooo

nnn

ttt

uuu

eee

sss

www

hhh

rrr

fff

iii

ddd

aaa

yyy

month

88

88

day

88888

88888

UTC

88

88

hour

:

88

88

minute

:

88

88

second

am

pm

Program Lineup

About Us

La radio mas irreverente, desconectada, y sobre todo... La menos esperada para entretenerte de forma cotidiana. Establecida en el corazón de México, Durango Esperando que disfrutes de la programación que habitualmente estaremos entregándote para tu diversión y para tu entretenimiento. Esperando que pases un rato agradable y que tus días, tardes y noches sean de poca madre, aquí en Redrum Radio.
All Rights Reserved Redrum Radio.
Privacy Policy Terms Of Service radio hosting internet radio hosting
Powered By Caster.fm Streaming Solutions.