/* Botão flutuante de WhatsApp: pílula de vidro escuro, como o resto do site. */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 20px 7px 7px;
  border: 1px solid rgba(220, 250, 255, .16);
  border-radius: 999px;
  background: rgba(6, 14, 19, .74);
  color: #eef7f9;
  font: 700 14px/1 "Urbanist", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition: opacity 350ms ease, transform 450ms cubic-bezier(.2, .7, .1, 1), visibility 0s linear 0s, border-color 250ms ease, box-shadow 300ms ease;
}
.wa-float:hover, .wa-float:focus-visible { border-color: rgba(132, 213, 226, .6); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(132, 213, 226, .28); }
.wa-float:focus-visible { outline: 2px solid #84d5e2; outline-offset: 4px; }
.wa-float.is-hidden { opacity: 0; transform: translateY(18px) scale(.96); visibility: hidden; pointer-events: none; transition: opacity 250ms ease, transform 350ms ease, visibility 0s linear 350ms; }

.wa-icon { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0e1d24; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .35); }
.wa-icon svg { width: 22px; height: 22px; fill: #25d366; }
/* Ponto de luz a pulsar: o mesmo gesto das luzes do site. */
.wa-icon i { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #0e1d24; border-radius: 50%; background: #84d5e2; }
.wa-icon i::after { position: absolute; inset: -2px; border-radius: 50%; background: #84d5e2; content: ""; animation: wa-ping 2.4s ease-out infinite; }
.wa-label { white-space: nowrap; }

@keyframes wa-ping { 0% { opacity: .7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.6); } }

@media (max-width: 600px) {
  .wa-float { gap: 0; padding: 6px; }
  .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa-icon { width: 46px; height: 46px; }
  .wa-icon svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-icon i::after { animation: none; }
}