/* Botón WhatsApp flotante con animación */
.whatsapp-btn {
  position: fixed;                 /* base fija */
  right: 40px;
  /* Usamos 'top' dinámico controlado por JS para que siga el scroll con easing */
  top: calc(100vh - 120px);        /* posición inicial (≈ 90px desde abajo + alto del botón) */
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: breathe 2s ease-in-out infinite;
  will-change: top, transform;     /* rendimiento */
}

.whatsapp-btn i {
  color: #fff;
  font-size: 24px;
  animation: beat 2s ease-in-out infinite;
  text-decoration: none;
}

/* Efecto “respirar” */
@keyframes breathe {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Efecto latido del ícono */
@keyframes beat {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Ajustes responsive */
@media (max-width: 640px){
  .whatsapp-btn{ right: 16px; width: 56px; height: 56px; }
  .whatsapp-btn i{ font-size: 22px; }
}