/* ===== Botão WhatsApp: ao clicar fica vermelho e enche de verde (esq. -> dir.) uma vez ===== */
.btn-wa-fill {
  background: linear-gradient(to right, #25d366 50%, #dc2626 50%) !important;
  background-size: 200% 100% !important;
  background-position: right !important;
  animation: fillGreen 3s linear forwards !important;
}
@keyframes fillGreen { to { background-position: left; } }

/* ===== Floating WhatsApp ===== */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 62px; height: 62px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5); cursor: pointer;
  animation: wa-bounce 2.4s ease-in-out infinite; text-decoration: none;
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.08); animation-play-state: paused; }
.wa-float svg { width: 34px; height: 34px; fill: #fff; display: block; }
.wa-float::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: rgba(37, 211, 102, 0.35); z-index: -1; animation: wa-ring 2.4s ease-out infinite;
}
.wa-tooltip {
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%);
  background: var(--moss-900); color: #f2f7f1; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.wa-float:hover .wa-tooltip { opacity: 1; }
@keyframes wa-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-12px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
  90% { transform: translateY(0); }
}
@keyframes wa-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}