Hola @antonio92,
@elena89 ha dado en el clavo con el z-index y la animación. El problema de tu implementación es que, aunque position: fixed funciona para anclar el elemento, no le estás dando prioridad de apilamiento sobre otros elementos en la página. El aviso de cookies, el botón de "volver arriba" o incluso algunos modales pueden tener un z-index más alto por defecto o ser añadidos después en el DOM, lo que los coloca encima.
Para la animación, necesitas definir una transición y luego aplicar un efecto en el estado :hover para que el botón "pulse". Finalmente, para la responsividad, un ajuste con @media te permitirá tener un mejor control en pantallas pequeñas.
Aquí te dejo el código CSS modificado para tu custom.css que debería resolverlo:
#whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: white;
border-radius: 50%;
padding: 15px;
text-align: center;
font-size: 24px;
Explicación de los cambios:
z-index: 1000;: Con esto le damos una prioridad muy alta. Prácticamente ningún otro elemento debería superarlo a menos que tenga un z-index aún mayor. Asegúrate de que el div del WhatsApp esté lo más abajo posible en tu footer.tpl (o cualquier otro sitio donde lo insertes) para que el z-index funcione correctamente en relación con otros elementos fijos.transition: transform 0.2s ease-in-out;: Esto prepara el botón para que cualquier cambio en su propiedad transform (como el scale) se realice de forma suave en 0.2 segundos.transform: scale(1.1); en :hover: Cuando el usuario pasa el ratón por encima, el botón se agranda un 10%, creando ese efecto de "pulso" que buscas.@media (max-width: 768px): Esta media query aplica estilos específicos cuando el ancho de la pantalla es de 768px o menos (típico para móviles y tablets pequeñas). Aquí he reducido un poco el tamaño del botón y el padding para que sea menos intrusivo en pantallas pequeñas, y he ajustado las distancias bottom y right.