<!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">></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">></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">></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">></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">></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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
}
</script>
</body>
</html>