/* Botão flutuante do WhatsApp (Twin Mark e AM Tech). O elemento é criado pelo whats-flutuante.js no fim do <body>:
   <div class="wa-pilha wa-<site>"><a class="wa-flutua">...</a></div>. A pilha é a coluna do canto inferior direito:
   na Twin, a assistente de IA entra nela, acima do WhatsApp. Só transform e opacity se mexem (nada de layout na rolagem). */
.wa-pilha{
  --wa-t:56px;--wa-dir:24px;--wa-base:24px;--wa-sobe:0px;
  position:fixed;right:calc(var(--wa-dir) + env(safe-area-inset-right,0px));bottom:calc(var(--wa-base) + env(safe-area-inset-bottom,0px));
  z-index:44;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;
  transform:translate3d(0,calc(-1 * var(--wa-sobe)),0);visibility:hidden;opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease,visibility 0s linear .35s
}
.wa-pilha.on{visibility:visible;opacity:1;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease,visibility 0s}
.wa-pilha > *{pointer-events:auto}

.wa-flutua{position:relative;display:block;width:var(--wa-t);height:var(--wa-t);border-radius:50%;text-decoration:none;color:#fff;outline:none;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(18px) scale(.55);transition:transform .9s cubic-bezier(.34,1.45,.64,1),opacity .5s ease}
.wa-pilha.on .wa-flutua{opacity:1;transform:none}
.wa-f-bola{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 24%,#5BEE97 0%,#25D366 44%,#139A48 100%);
  box-shadow:0 12px 28px -8px rgba(8,110,50,.7),0 3px 8px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,60,25,.25);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.wa-f-bola svg{width:29px;height:29px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,60,25,.35))}
/* o pulso: um anel que se abre e some, a cada alguns segundos (só transform e opacity) */
.wa-f-bola::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,214,110,.75);opacity:0;pointer-events:none}
.wa-pilha.on .wa-f-bola::before{animation:wa-pulso 7s cubic-bezier(.22,1,.36,1) 2.6s infinite}
@keyframes wa-pulso{0%{opacity:.85;transform:scale(1)}20%,100%{opacity:0;transform:scale(1.62)}}
.wa-flutua:active .wa-f-bola{transform:scale(.94)}
.wa-flutua:focus-visible .wa-f-bola{box-shadow:0 12px 28px -8px rgba(8,110,50,.7),0 0 0 3px #fff,0 0 0 6px #25D366}
/* o nome do botão, ao lado, quando o mouse passa ou o teclado chega (no toque não aparece) */
.wa-f-dica{position:absolute;right:calc(100% + 12px);top:50%;padding:10px 15px;border-radius:999px;white-space:nowrap;
  background:rgba(8,12,30,.92);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:inherit;font-weight:500;font-size:13.5px;line-height:1;letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;transform:translate(10px,-50%);pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.wa-flutua:focus-visible .wa-f-dica{opacity:1;transform:translate(0,-50%)}
@media (hover:hover) and (pointer:fine){
  .wa-flutua:hover .wa-f-bola{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(8,110,50,.75),0 4px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}
  .wa-flutua:hover .wa-f-dica{opacity:1;transform:translate(0,-50%)}
}
@media (hover:none){.wa-f-dica{display:none}}

/* ---------- some (fica atrás) quando o menu, o assistente ou o aviso de cookies tomam a tela ---------- */
/* (.wa-dica: a dica do assistente da AM Tech está aberta bem onde o botão fica; o whats-flutuante.js marca) */
body.menu-aberto .wa-pilha.on,html.chat-aberto .wa-pilha.on,html.chat-ia-aberto .wa-pilha.on,html.intro .wa-pilha.on,.wa-pilha.on.wa-dica{
  visibility:hidden;opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .3s}
/* aviso de cookies da Twin (cartão no pé da tela, modo "pedir"; o js marca .wa-cartao): no celular ele ocupa a largura
   toda, e o botão espera a escolha */
@media (max-width:720px){
  .wa-pilha.on.wa-cartao{visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
}

/* ---------- onde fica, página por página ---------- */
/* Twin Mark, site principal. No computador, durante o filme do topo (o .fab ainda sem .on), fica acima do canto do HUD
   (a moldura de 22 px a 26 px do chão); depois do topo, desce para o canto. No celular, acima do botão "Orçamento"
   (.fab, 16 px do chão) enquanto ele aparece */
@media (min-width:721px){.fab:not(.on) ~ .wa-twin{--wa-sobe:36px}}
@media (max-width:720px){
  .wa-twin{--wa-dir:16px;--wa-base:16px}
  .fab.on ~ .wa-twin{--wa-sobe:55px}
  body.menu-aberto .fab.on ~ .wa-twin,body.no-orcamento .fab.on ~ .wa-twin{--wa-sobe:0px}
}
/* landings (Twin /site/ e AM Tech /orcamento/ e /eletrica/): acima da barra fixa .fixo (12 px do chão, 66 de altura) */
.wa-twin-lp,.wa-amtech-lp{--wa-dir:24px;--wa-base:24px}
@media (max-width:760px){
  .wa-twin-lp{--wa-dir:16px;--wa-base:16px}
  .fixo.on ~ .wa-twin-lp{--wa-sobe:calc(90px - var(--wa-base))}
}
@media (max-width:700px){
  .wa-amtech-lp{--wa-dir:16px;--wa-base:16px}
  .fixo.on ~ .wa-amtech-lp{--wa-sobe:calc(90px - var(--wa-base))}
}
/* AM Tech, site principal: logo acima do botão do assistente (.chat-btn, 56 px), alinhado pela direita */
.wa-amtech{--wa-dir:20px;--wa-base:88px}
@media (max-width:720px){
  .wa-amtech{--wa-dir:14px;--wa-base:82px}
  body.resumo-on .wa-amtech{--wa-sobe:76px}                     /* o assistente sobe para cima do resumo do orçamento */
}

/* ---------- celular fraco e quem pediu menos movimento ---------- */
html.leve .wa-f-bola::before,html[data-nivel="leve"] .wa-f-bola::before{animation:none}
@media (prefers-reduced-motion:reduce){
  .wa-pilha,.wa-pilha.on,.wa-flutua,.wa-f-bola,.wa-f-dica{transition-duration:.01s!important;transition-delay:0s!important}
  .wa-flutua{transform:none}
  .wa-pilha.on .wa-f-bola::before{animation:none}
}
@media print{.wa-pilha{display:none}}