/* Contenedor general fijado abajo a la derecha */
.whatsapp-container {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Botón principal */
.whatsapp-btn {
  position: relative;
  background-color: #25d366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: pulse-glow 2s infinite; /* Parpadeo base */
}

/* Icono SVG de WhatsApp */
.whatsapp-btn svg {
  width: 35px;
  height: 35px;
  z-index: 2; /* Mantiene el ícono por encima de las ondas */
}

/* Aros de onda (Ripple Effect) */
.whatsapp-btn::before,
.whatsapp-btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid #25d366;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: ripple-wave 2s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
  z-index: 1;
}

/* Retraso para el segundo aro para crear efecto continuo */
.whatsapp-btn::after {
  animation-delay: 0.8s;
}

/* Mensaje oculto (Tooltip) */
.whatsapp-tooltip {
  background-color: white;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Mostrar tooltip al hacer hover sobre el contenedor */
.whatsapp-container:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* --- Animaciones Clave --- */

/* Animación de la onda exterior */
@keyframes ripple-wave {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Animación del brillo interno (pulsación) */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}