/* ════════════════════════════════════════════════════════════════
   BOTÃO FLUTUANTE DE WHATSAPP — padrão do site
   Círculo fixo no canto inferior direito.
   Desktop: translúcido em repouso, acende quando o mouse se aproxima.
   Celular: um pouco menor e sempre opaco (não existe "aproximar").
   Presente em todas as páginas (exceto a política de privacidade).

   ── CAMADAS (z-index) — escala única do site ──
      300    flutuantes (WhatsApp, barra inferior de navegação)
      490    menu mobile em tela cheia
      500    cabeçalho fixo
      1000+  modais e overlays
   ════════════════════════════════════════════════════════════════ */

.wa{
  position:fixed; right:32px; bottom:32px; z-index:300;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,26,50,.92);
  border:1px solid #E29E45;
  backdrop-filter:blur(16px);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .3s, background .3s, border-color .3s, opacity .35s ease;
}
.wa svg{width:24px; height:24px; fill:#E29E45; transition:fill .3s}

/* ── DESKTOP (mouse) ───────────────────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  /* em repouso o botão fica discreto, sem competir com o conteúdo */
  .wa{opacity:.35}
  /* .near é aplicado por /assets/float.js quando o cursor chega perto */
  .wa.near{opacity:1}
  .wa:hover{opacity:1; background:#E29E45; transform:scale(1.1); border-color:#E29E45}
  .wa:hover svg{fill:#0f1a32}
  .wa:focus-visible{opacity:1; outline:2px solid #E29E45; outline-offset:3px}
}

/* ── TOQUE ─────────────────────────────────────────────────────── */
@media(hover:none){
  .wa{opacity:1}
}

@media(max-width:640px){
  .wa{
    width:46px; height:46px;
    right:20px; bottom:max(20px, env(safe-area-inset-bottom, 0px));
  }
  .wa svg{width:21px; height:21px}
}

/* páginas com barra de navegação inferior no celular (home):
   o botão sobe para não cobrir a barra */
@media(max-width:640px){
  body.ml-tabbar .wa{bottom:calc(58px + env(safe-area-inset-bottom, 0px) + 16px)}
}

@media(prefers-reduced-motion:reduce){
  .wa{transition:opacity .2s ease}
  .wa:hover{transform:none}
}