add

Author: successbyfailure

index.html

@@ -221,20 +221,22 @@
 
       .confetti {
         position: fixed;
-        width: 10px;
-        height: 10px;
-        background: #ffc107;
-        animation: fall 3s linear;
         z-index: 999;
+        pointer-events: none;
       }
 
       @keyframes fall {
         to {
-          transform: translateY(100vh) rotate(360deg);
+          transform: translateY(100vh) rotate(720deg);
           opacity: 0;
         }
       }
 
+      @keyframes swing {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX(40px); }
+      }
+
       .stats {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -404,17 +406,31 @@ <h2>🎉 ¡Gracias por participar!</h2>
       }
 
       function createConfetti() {
-        const colors = ['#ffc107', '#2d9f5f', '#6f7b86', '#d16d1d', '#ff6b9d'];
-        for (let i = 0; i < 50; i++) {
+        const colors = ['#ffc107', '#2d9f5f', '#6f7b86', '#d16d1d', '#ff6b9d', '#e91e63', '#9c27b0', '#2196f3', '#ff5722', '#4caf50'];
+        const shapes = ['square', 'circle', 'rectangle'];
+
+        for (let i = 0; i < 100; i++) {
           setTimeout(() => {
             const confetti = document.createElement('div');
             confetti.className = 'confetti';
-            confetti.style.left = Math.random() * 100 + 'vw';
+
+            const size = Math.random() * 15 + 8;
+            const duration = Math.random() * 2 + 2;
+            const left = Math.random() * 100;
+            const shape = shapes[Math.floor(Math.random() * shapes.length)];
+
+            confetti.style.left = left + 'vw';
+            confetti.style.top = '-20px';
             confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
-            confetti.style.animationDelay = Math.random() * 0.5 + 's';
+            confetti.style.width = (shape === 'rectangle' ? size * 1.5 : size) + 'px';
+            confetti.style.height = (shape === 'rectangle' ? size * 0.5 : size) + 'px';
+            confetti.style.borderRadius = shape === 'circle' ? '50%' : (Math.random() > 0.5 ? '2px' : '0');
+            confetti.style.animation = `fall ${duration}s linear forwards`;
+            confetti.style.opacity = Math.random() * 0.5 + 0.5;
+
             document.body.appendChild(confetti);
-            setTimeout(() => confetti.remove(), 3000);
-          }, i * 30);
+            setTimeout(() => confetti.remove(), duration * 1000);
+          }, i * 20);
         }
       }