<!-- Botón WhatsApp Flotante con Animaciones -->
<div class="fixed bottom-6 right-6 z-50">
    <!-- Anillo pulsante exterior -->
    <div class="absolute inset-0 w-14 h-14 rounded-full bg-green-500 animate-pulse opacity-75"></div>
    
    <!-- Anillo animado de expansión -->
    <div class="absolute inset-0 w-14 h-14 rounded-full border-4 border-green-500 animate-ping opacity-75"></div>
    
    <!-- Botón principal -->
    <a href="https://wa.me/51953987111?text=Hola%20DIAGNOSTIKA,%20requiero%20información" 
       target="_blank" 
       rel="noopener noreferrer"
       class="whatsapp-button relative flex items-center justify-center w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-2xl transition-all duration-300 hover:scale-125 hover:shadow-green-500/50 hover:shadow-2xl active:scale-95">
        <!-- Brillo interno -->
        <div class="absolute inset-0 rounded-full bg-gradient-to-t from-transparent via-white to-transparent opacity-20"></div>
        
        <!-- Icono WhatsApp SVG Moderno -->
        <svg class="relative w-7 h-7 text-white drop-shadow-lg animate-bounce-slow" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 3 .97 4.29L2.5 22l6.05-1.44c1.25.63 2.65.99 4.15.99 5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18c-1.41 0-2.73-.36-3.88-.99l-.28-.15-2.89.69.71-2.64-.18-.28C4.39 15.05 4 13.59 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8zm4.64-7.44c-.25-.12-1.47-.73-1.69-.81-.23-.07-.39-.11-.56.11-.17.23-.64.8-.78.96-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-.62-1.48-.87-2.48-1.89-2.77-2.16-.12-.14-.02-.34.09-.45.1-.09.23-.24.34-.36.12-.13.16-.22.25-.36.08-.15.04-.28-.02-.39-.06-.11-.56-1.35-.77-1.84-.2-.48-.41-.42-.56-.42-.14 0-.29-.02-.44-.02-.16 0-.41.06-.63.3-.22.25-.85.83-.85 2.02 0 1.19.87 2.35 1 2.5.13.15 1.85 2.83 4.48 3.97.63.27 1.12.43 1.5.55.63.2 1.2.17 1.65.1.5-.08 1.54-.63 1.76-1.24.21-.61.21-1.13.15-1.24-.06-.12-.22-.19-.47-.32z"></path>
        </svg>
    </a>
    
    <!-- Etiqueta de texto (aparece en hover) -->
    <div class="whatsapp-tooltip absolute right-full mr-3 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-3 py-2 rounded-lg whitespace-nowrap text-sm font-semibold opacity-0 pointer-events-none transition-opacity duration-300 shadow-lg">
        ¡Chatea con nosotros!
        <div class="absolute left-full w-2 h-2 bg-green-600 transform translate-y-0 -translate-x-1"></div>
    </div>
</div>

<style>
    /* Animación de sutil flotación */
    @keyframes float-up-down {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
    }
    
    /* Animación de bounce lento para el ícono */
    @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    
    /* Animación de parpadeo suave */
    @keyframes soft-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }
        50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.9); }
    }
    
    .whatsapp-button {
        animation: float-up-down 3s ease-in-out infinite, soft-glow 2s ease-in-out infinite;
    }
    
    .animate-bounce-slow {
        animation: bounce-slow 1.5s ease-in-out infinite;
    }
    
    /* Efecto hover en el tooltip */
    .whatsapp-button:hover ~ .whatsapp-tooltip,
    .whatsapp-tooltip:hover {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Animación de pulso mejorada */
    @keyframes enhanced-pulse {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 0.3; }
    }
    
    .animate-pulse {
        animation: enhanced-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* Responsive para dispositivos móviles */
    @media (max-width: 640px) {
        .whatsapp-button {
            width: 56px;
            height: 56px;
        }
        
        .whatsapp-tooltip {
            display: none;
        }
    }
    
    /* Efecto de brillo */
    .whatsapp-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .whatsapp-button:hover::before {
        opacity: 1;
    }
</style>
