/* ================================================================
   COMPONENTS/WHATSAPP.CSS — Botón flotante WA
================================================================ */
.wa-float {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: var(--z-overlay);
  width: 60px; height: 60px;
  background: var(--wa);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.2);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-base),
              box-shadow var(--dur-base);
  animation: float 4s ease-in-out infinite;
}
.wa-float::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.4);
  animation: pulse-ring 2.5s ease-out infinite;
}
.wa-float:hover {
  background: var(--wad);
  transform: scale(1.12);
  animation-play-state: paused;
  box-shadow: 0 10px 32px rgba(37,211,102,.5);
}
.wa-float svg { width: 28px; height: 28px; }

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}