diff --git a/index.php b/index.php
index 5525182..4bb5a45 100644
--- a/index.php
+++ b/index.php
@@ -395,14 +395,134 @@ $liveIndex = get_live_index($schedule);
         }
 
         .glass-card {
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(30px);
-            -webkit-backdrop-filter: blur(30px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 48px;
-            padding: 3.5rem 3rem;
-            box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(40px);
+            -webkit-backdrop-filter: blur(40px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 60px;
+            padding: 4rem 3rem;
+            box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6);
             text-align: center;
+            transition: all 0.8s ease;
+        }
+
+        .brand h1 {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin: 0 0 0.5rem;
+            color: #fff;
+            letter-spacing: -0.03em;
+            text-transform: lowercase;
+        }
+
+        .brand-logo {
+            width: 90px;
+            height: auto;
+            margin: 0 auto 1.5rem;
+            display: block;
+            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
+        }
+
+        .brand p {
+            font-size: 0.8rem;
+            font-weight: 300;
+            opacity: 0.4;
+            margin-bottom: 2.5rem;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        .now-playing-container {
+            background: rgba(255, 255, 255, 0.01);
+            border-radius: 40px;
+            padding: 2.5rem 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.04);
+            margin-bottom: 2.5rem;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.5s ease;
+        }
+
+        .track-title {
+            font-weight: 300;
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.9);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            letter-spacing: 0.02em;
+        }
+
+        .play-btn {
+            width: 90px;
+            height: 90px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            font-size: 2.5rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+            margin: 0 auto;
+        }
+
+        .play-btn:hover {
+            transform: scale(1.05);
+            background: rgba(255, 255, 255, 0.1);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
+        }
+
+        .play-btn.is-playing {
+            background: var(--primary-color);
+            color: #0f172a;
+            border-color: transparent;
+            box-shadow: 0 0 50px rgba(56, 189, 248, 0.4);
+            animation: pulse-primary 2s infinite;
+        }
+
+        @keyframes pulse-primary {
+            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); }
+            70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(56, 189, 248, 0); }
+            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
+        }
+
+        .volume-container {
+            width: 100%;
+            max-width: 160px;
+            display: flex;
+            align-items: center;
+            gap: 1.2rem;
+            margin: 2.5rem auto 0;
+            opacity: 0.3;
+            transition: opacity 0.3s ease;
+        }
+
+        .volume-container:hover {
+            opacity: 0.8;
+        }
+
+        .volume-slider {
+            flex: 1;
+            height: 2px;
+            -webkit-appearance: none;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            cursor: pointer;
+        }
+
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 10px;
+            height: 10px;
+            background: #fff;
+            border-radius: 50%;
         }
 
         .brand h1 {
@@ -428,28 +548,41 @@ $liveIndex = get_live_index($schedule);
         }
 
         .now-playing-container {
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 28px;
-            padding: 1.8rem;
-            border: 1px solid rgba(255, 255, 255, 0.06);
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 32px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
             margin-bottom: 2.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #visualizer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 60px;
+            opacity: 0.6;
+            pointer-events: none;
         }
 
         .track-status {
-            font-size: 0.65rem;
+            font-size: 0.6rem;
             font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: 0.25em;
+            letter-spacing: 0.3em;
             color: var(--primary-color);
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 0.6rem;
-            background: rgba(56, 189, 248, 0.1);
-            padding: 0.4rem 1rem;
+            background: rgba(56, 189, 248, 0.08);
+            padding: 0.5rem 1.2rem;
             border-radius: 100px;
             width: fit-content;
-            margin: 0 auto 0.8rem;
+            margin: 0 auto 1.2rem;
+            border: 1px solid rgba(56, 189, 248, 0.15);
         }
 
         .live-dot {
@@ -584,6 +717,7 @@ $liveIndex = get_live_index($schedule);
                         <p>La sintonía que eleva tus sentidos.</p>
                     </header>
                     <div class="now-playing-container">
+                        <canvas id="visualizer"></canvas>
                         <div class="track-status"><span class="live-dot"></span> AL AIRE</div>
                         <div id="track-title" class="track-title">Conectando...</div>
                     </div>
@@ -620,7 +754,7 @@ $liveIndex = get_live_index($schedule);
     </div>
 
     <a href="<?= $whatsapp_link ?>" target="_blank" class="whatsapp-float"><i class="bi bi-whatsapp"></i></a>
-    <audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none"></audio>
+    <audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none" crossorigin="anonymous"></audio>
 
     <script>
         // Mics background with vibrant colors
@@ -642,19 +776,73 @@ $liveIndex = get_live_index($schedule);
         const playIcon = document.getElementById("play-icon");
         const trackTitle = document.getElementById("track-title");
         const bgContainer = document.querySelector(".background-container");
+        const canvas = document.getElementById("visualizer");
+        const canvasCtx = canvas.getContext("2d");
+        
         let currentTrackTitle = "";
+        let audioCtx;
+        let analyser;
+        let source;
+        let dataArray;
+        let animationId;
+
+        function initAudio() {
+            if (!audioCtx) {
+                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioCtx.createAnalyser();
+                source = audioCtx.createMediaElementSource(audio);
+                source.connect(analyser);
+                analyser.connect(audioCtx.destination);
+                analyser.fftSize = 2048;
+                const bufferLength = analyser.frequencyBinCount;
+                dataArray = new Uint8Array(bufferLength);
+            }
+        }
+
+        function drawWave() {
+            animationId = requestAnimationFrame(drawWave);
+            analyser.getByteTimeDomainData(dataArray);
+
+            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+            canvasCtx.lineWidth = 2;
+            canvasCtx.strokeStyle = "rgba(56, 189, 248, 0.5)";
+            canvasCtx.beginPath();
+
+            const sliceWidth = canvas.width * 1.0 / dataArray.length;
+            let x = 0;
+
+            for (let i = 0; i < dataArray.length; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = v * canvas.height / 2;
+
+                if (i === 0) canvasCtx.moveTo(x, y);
+                else canvasCtx.lineTo(x, y);
+
+                x += sliceWidth;
+            }
+
+            canvasCtx.lineTo(canvas.width, canvas.height / 2);
+            canvasCtx.stroke();
+        }
 
         function togglePlay() {
             const btn = document.querySelector(".play-btn");
+            initAudio();
+            
             if (audio.paused) { 
+                if (audioCtx.state === "suspended") audioCtx.resume();
                 audio.play(); 
                 playIcon.className = "bi bi-pause-fill"; 
                 btn.classList.add("is-playing");
+                canvas.width = canvas.offsetWidth;
+                canvas.height = canvas.offsetHeight;
+                drawWave();
             }
             else { 
                 audio.pause(); 
                 playIcon.className = "bi bi-play-fill"; 
                 btn.classList.remove("is-playing");
+                cancelAnimationFrame(animationId);
             }
         }