diff --git a/index.php b/index.php
index e93da6e..4446ac7 100644
--- a/index.php
+++ b/index.php
@@ -529,34 +529,49 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
             canvas.width = canvas.offsetWidth;
             canvas.height = canvas.offsetHeight;
 
-            function draw() {
-                animationId = requestAnimationFrame(draw);
-                analyzer.getByteFrequencyData(dataArray);
+        let hue = 0;
+        function draw() {
+            animationId = requestAnimationFrame(draw);
+            analyzer.getByteFrequencyData(dataArray);
 
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-                const barWidth = (canvas.width / bufferLength) * 2.5;
-                let barHeight;
-                let x = 0;
+            const barWidth = (canvas.width / bufferLength) * 2.5;
+            let barHeight;
+            let x = 0;
 
-                for (let i = 0; i < bufferLength; i++) {
-                    barHeight = (dataArray[i] / 255) * canvas.height;
-                    
-                    // Create more vibrant neon gradient
-                    const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
-                    gradient.addColorStop(0, '#00e676'); // Neon Green
-                    gradient.addColorStop(0.5, '#38bdf8'); // Sky Blue
-                    gradient.addColorStop(1, '#a855f7'); // Purple
+            // Calcular intensidad promedio para reactividad
+            let sum = 0;
+            for(let i=0; i<bufferLength; i++) sum += dataArray[i];
+            const average = sum / bufferLength;
+            
+            // Rotar el color base según el tiempo y la intensidad
+            hue = (hue + 0.5 + (average / 50)) % 360;
 
-                    ctx.fillStyle = gradient;
-                    // Rounded bars
-                    ctx.beginPath();
-                    ctx.roundRect(x, canvas.height - barHeight, barWidth - 3, barHeight, 4);
-                    ctx.fill();
+            for (let i = 0; i < bufferLength; i++) {
+                barHeight = (dataArray[i] / 255) * canvas.height;
+                
+                // Color dinámico basado en hue, índice de barra e intensidad
+                const barHue = (hue + (i * 2)) % 360;
+                const saturation = 80 + (average / 255) * 20;
+                const lightness = 50 + (dataArray[i] / 255) * 25;
 
-                    x += barWidth;
-                }
+                const gradient = ctx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight);
+                gradient.addColorStop(0, `hsl(${barHue}, ${saturation}%, ${lightness}%)`);
+                gradient.addColorStop(1, `hsl(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%)`);
+
+                ctx.fillStyle = gradient;
+                ctx.shadowBlur = 15;
+                ctx.shadowColor = `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.5)`;
+
+                // Rounded bars
+                ctx.beginPath();
+                ctx.roundRect(x, canvas.height - barHeight, barWidth - 3, barHeight, 4);
+                ctx.fill();
+
+                x += barWidth;
             }
+        }
             draw();
         }