¡SUSCRIPCIÓN CONFIRMADA!

@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(100vh) rotate(360deg); } }

Si estás leyendo esto, es que ya formas parte de la Bicheo Letter, y tu suscripción ha sido confirmada con éxito.

Si he sido capaz de programar bien la automatización en mi herramienta de email marketing, dentro de poco vas a recibir unos correos, donde te cuento de qué va toda esta movida de la que ya formas parte.

Ya sabes que estos primeros correos que te van a llegar, seguramente acaben en el spam, promociones o vete tú a saber dónde, así que... porfi, plis 🙏 rescátalos de las sombras de Mordor y añádeme a tu lista de contactos de confianza.

Nos vemos en tu bandeja de entrada, o si quieres, ahora mismo. 👇

position: relative; padding: 16px 32px; border: none; border-radius: 50px; background: linear-gradient(90deg, #32cd32, #fd6f00); color: white; font-weight: bold; font-size: 18px; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; z-index: 10; } .youtube-button:hover { transform: rotate(-5deg) scale(1.1); box-shadow: 0 8px 25px rgba(50, 205, 50, 0.4), 0 8px 25px rgba(253, 111, 0, 0.4); animation: pulse 1s infinite; } .youtube-button:active { transform: scale(0.95); } .youtube-icon { width: 24px; height: 24px; fill: white; transition: transform 0.3s ease; } .youtube-button:hover .youtube-icon { transform: scale(1.3); filter: drop-shadow(0 0 10px #fd6f00); } .fire { position: absolute; bottom: -10px; width: 8px; height: 15px; background: linear-gradient(to top, #fd6f00, #ffcc00); border-radius: 50% 50% 20% 20%; opacity: 0; z-index: 5; } .confetti { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 1000; } .notification-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background-color: #ff0000; border-radius: 50%; animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes pulse { 0% { transform: rotate(-5deg) scale(1.1); } 50% { transform: rotate(-5deg) scale(1.15); } 100% { transform: rotate(-5deg) scale(1.1); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes fall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes fire { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-20px) scale(0.5); opacity: 0; } } @keyframes explode { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 20px; height: 20px; opacity: 0; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(3); } } </style>

<script>
    document.addEventListener(\'DOMContentLoaded\', function() {
        const button = document.getElementById(\'youtubeBtn\');
        
        // Create fire effect on hover
        button.addEventListener(\'mouseenter\', function() {
            // Remove any existing fire elements
            const existingFires = button.querySelectorAll(\'.fire\');
            existingFires.forEach(fire => fire.remove());
            
            for (let i = 0; i < 5; i++) {
                const fire = document.createElement(\'div\');
                fire.className = \'fire\';
                fire.style.left = (20 + i * 15) + \'%\';
                fire.style.animation = \'fire 0.8s ease-in-out infinite\';
                fire.style.animationDelay = (i * 0.1) + \'s\';
                button.appendChild(fire);
            }
        });
        
        button.addEventListener(\'mouseleave\', function() {
            const fires = button.querySelectorAll(\'.fire\');
            fires.forEach(fire => {
                fire.remove();
            });
        });
        
        // Create explosion and confetti effect on click
        button.addEventListener(\'click\', function(e) {
            e.preventDefault();
            
            const buttonRect = button.getBoundingClientRect();
            const centerX = buttonRect.left + buttonRect.width / 2;
            const centerY = buttonRect.top + buttonRect.height / 2;
            
            // Create explosion effect
            for (let i = 0; i < 8; i++) {
                const explosion = document.createElement(\'div\');
                explosion.style.position = \'fixed\';
                explosion.style.width = \'0\';
                explosion.style.height = \'0\';
                explosion.style.backgroundColor = i % 2 === 0 ? \'#32cd32\' : \'#fd6f00\';
                explosion.style.borderRadius = \'50%\';
                explosion.style.left = centerX + \'px\';
                explosion.style.top = centerY + \'px\';
                explosion.style.transform = \'translate(-50%, -50%) rotate(\' + (i * 45) + \'deg)\';
                explosion.style.boxShadow = \'0 0 10px 2px \' + (i % 2 === 0 ? \'#32cd32\' : \'#fd6f00\');
                explosion.style.animation = \'explode 0.5s ease-out forwards\';
                explosion.style.animationDelay = (i * 0.05) + \'s\';
                explosion.style.zIndex = \'1000\';
                document.body.appendChild(explosion);
                
                setTimeout(() => {
                    if (explosion.parentNode) {
                        explosion.parentNode.removeChild(explosion);
                    }
                }, 500);
            }
            
            // Create confetti effect
            for (let i = 0; i < 50; i++) {
                const confettiPiece = document.createElement(\'div\');
                confettiPiece.className = \'confetti\';
                confettiPiece.style.left = Math.random() * window.innerWidth + \'px\';
                confettiPiece.style.top = \'-20px\';
                confettiPiece.style.backgroundColor = Math.random() > 0.5 ? \'#32cd32\' : \'#fd6f00\';
                confettiPiece.style.animation = \'fall 2s ease-out forwards\';
                confettiPiece.style.animationDelay = Math.random() * 0.5 + \'s\';
                confettiPiece.style.transform = \'rotate(\' + Math.random() * 360 + \'deg)\';
                document.body.appendChild(confettiPiece);
                
                setTimeout(() => {
                    if (confettiPiece.parentNode) {
                        confettiPiece.parentNode.removeChild(confettiPiece);
                    }
                }, 2000);
            }
            
            // Redirect after effects
            setTimeout(function() {
                window.open(\'https://www.youtube.com/@bichea\', \'_blank\');
            }, 1500);
        });
    });
</script>