Auto commit: 2026-02-16T20:50:16.693Z

index.php

@@ -585,6 +585,67 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
             color: #333;
             padding: 10px;
             backdrop-filter: blur(4px);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            animation: qr-pulse 2s infinite ease-in-out;
+        }
+
+        .qr-placeholder:hover {
+            animation-play-state: paused;
+            transform: scale(1.05);
+            box-shadow: 0 0 20px var(--accent-color);
+        }
+
+        @keyframes qr-pulse {
+            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4); }
+            50% { transform: scale(1.03); box-shadow: 0 0 20px 10px rgba(0, 230, 118, 0); }
+            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
+        }
+
+        /* Modal Styles */
+        .qr-modal {
+            display: none;
+            position: fixed;
+            z-index: 2000;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.9);
+            backdrop-filter: blur(10px);
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .qr-modal.show {
+            display: flex;
+            opacity: 1;
+        }
+
+        .qr-modal-content {
+            max-width: 90%;
+            max-height: 90%;
+            background: white;
+            padding: 20px;
+            border-radius: 20px;
+            position: relative;
+            transform: scale(0.7);
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        .qr-modal.show .qr-modal-content {
+            transform: scale(1);
+        }
+
+        .qr-modal-close {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
         }
 
         .qr-placeholder i {
@@ -805,7 +866,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
 
                     <!-- Espacio para Código QR -->
                     <div class="payment-section">
-                        <div class="qr-placeholder" style="padding: 0; overflow: hidden; background: white;">
+                        <div class="qr-placeholder" style="padding: 0; overflow: hidden; background: white;" onclick="openQRModal()">
                             <img src="./assets/pasted-20260216-203652-f5645ae9.jpg" alt="Código QR" style="width: 100%; height: 100%; object-fit: contain; border-radius: 12px;">
                         </div>
                         <p style="color: var(--accent-color); font-size: 0.9rem; font-weight: 600; margin-top: 0.5rem; text-transform: uppercase;">
@@ -873,6 +934,15 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         </a>
     </div>
 
+    <!-- QR Modal -->
+    <div id="qr-modal" class="qr-modal" onclick="closeQRModal()">
+        <div class="qr-modal-content" onclick="event.stopPropagation()">
+            <span class="qr-modal-close" onclick="closeQRModal()">&times;</span>
+            <img src="./assets/pasted-20260216-203652-f5645ae9.jpg" alt="QR Ampliado" style="width: 100%; max-width: 400px; height: auto; border-radius: 12px; display: block; margin: 0 auto;">
+            <p style="color: #333; text-align: center; margin-top: 1rem; font-weight: 700; font-size: 1.1rem;">¡ÚNETE A NUESTRO WHATSAPP!</p>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
     <audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="auto" crossorigin="anonymous"></audio>
     <audio id="welcome-sound" src="https://assets.mixkit.co/active_storage/sfx/2013/2013-preview.mp3" preload="auto"></audio>
@@ -1388,6 +1458,27 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         setInterval(updatePhotoCounter, 30000); // Check limit status every 30s
         // --- End Chat Functionality ---
 
+        function openQRModal() {
+            const modal = document.getElementById('qr-modal');
+            modal.style.display = 'flex';
+            setTimeout(() => {
+                modal.classList.add('show');
+            }, 10);
+        }
+
+        function closeQRModal() {
+            const modal = document.getElementById('qr-modal');
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 300);
+        }
+
+        // Close modal on Esc key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeQRModal();
+        });
+
         async function likeSong() {
             const nameInput = document.getElementById('user-name');
             const name = nameInput.value.trim();