/* ==========================================================================
   Net In Box — Botão flutuante do WhatsApp

   Fica em TODAS as páginas. O número e a mensagem moram no href do <a> em cada
   página (é link, não comportamento — não depende de JS para funcionar).

   Não confundir com o WHATSAPP_NUMERO do main.js: aquele é o interruptor que
   transforma os CTAs `data-wa` do site em conversa e continua desligado. Este
   botão é independente e sempre visível.
   ========================================================================== */

/* O canto inferior direito era do .back-to-top (style.css). Ele sobe para dar
   lugar ao WhatsApp; se este arquivo sair da página, ele volta sozinho. */
.back-to-top { bottom: 96px; }

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: var(--nb-white);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform .3s var(--nb-ease), box-shadow .3s var(--nb-ease);
  /* Entra depois da primeira dobra assentar, e só então começa a flutuar. */
  animation: wa-entrada .45s .9s both, wa-flutua 3.4s 1.35s ease-in-out infinite;
}
.wa-float:hover,
.wa-float:focus-visible {
  color: var(--nb-white);
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .55);
}
.wa-float svg { width: 31px; height: 31px; }

/* Anel pulsante. Fica ATRÁS do botão (z-index negativo dentro do próprio
   contexto de empilhamento, criado pelo z-index do .wa-float). */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  animation: wa-pulso 2.6s 1.35s ease-out infinite;
}

/* Etiqueta que aparece no hover. Não é título: o nome acessível do botão está
   no aria-label, por isso ela é puramente decorativa em telas pequenas. */
.wa-float span {
  position: absolute;
  right: calc(100% + 14px);
  padding: 9px 15px;
  border-radius: 9px;
  background: var(--nb-graphite);
  color: var(--nb-white);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  box-shadow: var(--nb-shadow);
  transition: opacity .3s var(--nb-ease), transform .3s var(--nb-ease);
}
.wa-float:hover span,
.wa-float:focus-visible span { opacity: 1; transform: translateX(0); }

@keyframes wa-entrada {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wa-flutua {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
@keyframes wa-pulso {
  0%        { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(1.85); }
}

@media (max-width: 575.98px) {
  .wa-float { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .wa-float svg { width: 29px; height: 29px; }
  .wa-float span { display: none; }
  .back-to-top { bottom: 84px; right: 22px; }
}

/* Quem pediu menos movimento continua vendo o botão — só parado. */
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .wa-float::before { animation: none; opacity: 0; }
}