/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.wa-float {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-whatsapp-float);
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--c-cta);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base);
}

.wa-float:hover {
  background: var(--c-cta-dark);
  transform: scale(1.06);
}

.wa-float .icon {
  width: 28px;
  height: 28px;
  stroke: none;
  fill: currentColor;
}

.wa-float__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--c-cta);
  animation: wa-pulse 2.6s ease-out infinite;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.65); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float__ring {
    animation: none;
    display: none;
  }
}

@media (min-width: 900px) {
  .wa-float {
    right: var(--sp-7);
    bottom: var(--sp-7);
  }
}