/* ===============================
   WhatsApp Button – Base (SIN animación permanente)
   =============================== */

/* Contenedor del botón */
#whatsapp-button{
  position: fixed !important;
  bottom: 110px !important;
  right: 22px !important;

  top: auto !important;
  transform: none !important;

  z-index: 99999;
  border-radius: 50%;
  display: inline-block;
}

/* Tamaño del icono */
#whatsapp-button img{
  width: 50px;
  height: auto;
  display: block;

  /* IMPORTANTE: sin animación por defecto */
  animation: none;
  transform-origin: 50% 50%;
}

/* Halo (apagado por defecto) */
#whatsapp-button::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  pointer-events:none;

  /* apagado por defecto */
  animation: none;
}

/* ===============================
   Animaciones (solo cuando JS activa la clase)
   =============================== */

#whatsapp-button.wa-animate img{
  animation: wa-shake 1.2s;
}

#whatsapp-button.wa-animate::after{
  animation: wa-pulse-ring 1.6s;
}

/* Halo pulso */
@keyframes wa-pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Shake tipo llamada */
@keyframes wa-shake{
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-10deg); }
  20%  { transform: rotate(10deg); }
  30%  { transform: rotate(-8deg); }
  40%  { transform: rotate(8deg); }
  50%  { transform: rotate(-6deg); }
  60%  { transform: rotate(6deg); }
  70%  { transform: rotate(-4deg); }
  80%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* ===============================
   Responsive (opcional)
   =============================== */
@media (max-width: 768px){
  #whatsapp-button img{
    width: 44px;
  }
  #whatsapp-button{
    bottom: 90px !important;
  }
}