From eb8dcb40d2d4c186663da23ba52ae3734ead4cc8 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 16 Feb 2026 19:09:00 +0000
Subject: [PATCH] Auto commit: 2026-02-16T19:08:59.966Z

---
 index.php | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index 1ab9f40..470b712 100644
--- a/index.php
+++ b/index.php
@@ -347,13 +347,14 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         .visualizer-peak {
             position: absolute;
             width: 18px;
-            height: 3px;
-            background: #fff;
+            height: 12px;
+            background: linear-gradient(to bottom, #fff, transparent);
             border-radius: 2px;
             bottom: 0;
             z-index: 2;
-            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+            box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.8);
             pointer-events: none;
+            transition: background 0.1s ease;
         }
 
         /* Colores vibrantes para las barras */
@@ -872,6 +873,11 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
             function draw() {
                 if (audio.paused) {
                     visualizerBars.forEach(bar => bar.style.height = '5px');
+                    visualizerPeaks.forEach(peak => {
+                        peak.style.bottom = '5%';
+                        peak.style.background = 'linear-gradient(to bottom, #fff, transparent)';
+                        peak.style.boxShadow = '0 -2px 10px rgba(255, 255, 255, 0.8)';
+                    });
                     document.documentElement.style.setProperty('--dynamic-glow', 'rgba(56, 189, 248, 0.7)');
                     document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(56, 189, 248, 0.4)');
                     return;
@@ -909,6 +915,15 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
 
                     if (visualizerPeaks[i]) {
                         visualizerPeaks[i].style.bottom = `${peakHeights[i]}%`;
+                        
+                        // Color dinámico basado en la intensidad (altura del pico)
+                        // De 200 (Cian/Azul) en 0% a 0 (Rojo/Naranja) en 100%
+                        const hue = Math.max(0, 200 - (peakHeights[i] * 1.8));
+                        const color = `hsla(${hue}, 100%, 85%, 1)`;
+                        const glow = `hsla(${hue}, 100%, 60%, 0.9)`;
+                        
+                        visualizerPeaks[i].style.background = `linear-gradient(to bottom, ${color}, transparent)`;
+                        visualizerPeaks[i].style.boxShadow = `0 -2px 12px ${glow}, 0 0 20px ${glow}`;
                     }
                 }