/* =========================================================================
   WHATSAPP-FLOTANTE.CSS — Botón flotante verde de WhatsApp (todas las páginas)
   ========================================================================= */

.wa-float {
  position: fixed; right: 20px; bottom: 22px; z-index: 150;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa-green); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
  transition: transform .2s ease, background .2s ease;
  animation: wa-pulse 2.6s ease-out infinite;
}
.wa-float:hover { background: var(--wa-green-dark); color: #fff; transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }

/* Etiqueta emergente */
.wa-float__label {
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--navy); font-weight: 700; font-size: .88rem;
  padding: .5rem .9rem; border-radius: 10px; white-space: nowrap; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.wa-float__label::after {
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  border-left: 7px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.wa-float:hover .wa-float__label { opacity: 1; transform: translateY(-50%) translateX(-2px); }

@keyframes wa-pulse {
  0%   { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 520px) { .wa-float { width: 54px; height: 54px; right: 16px; bottom: 16px; } .wa-float__label { display: none; } }