/* O botão flutuante do WhatsApp, o contato do site desde 26/09/2026: surge quando a pessoa começa a rolar a
   página e fica à mão dali em diante, no canto de baixo à direita, acompanhando a rolagem. A partir de 900 px (o mesmo corte do topo, que é quando o Entrar aparece) é uma
   pílula com o círculo verde e "Dúvidas? Fale conosco"; abaixo, só o círculo, para cobrir menos da página. Ele fica
   abaixo do topo (50) e do menu do celular (60): o menu aberto o cobre. O desenho do WhatsApp é o do Simple Icons
   (CC0), o mesmo do portal. */
.wa-flutuante {
  position: fixed;
  right: calc(var(--s-6) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  box-sizing: border-box;
  height: 56px;
  padding: 0 22px 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: 0 18px 40px -14px rgba(2, 6, 20, 0.95);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s;
}
.wa-flutuante:hover { border-color: #25d366; }
.wa-flutuante:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }
.wa-flutuante__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: #25d366;
  color: #ffffff;
}
.wa-flutuante__icone svg { display: block; width: 22px; height: 22px; fill: currentColor; }

/* No fim da página não há mais para onde rolar, e o que estiver embaixo do botão fica embaixo dele: sem esta folga, de
   768 px para cima ele cobria a "Política de Privacidade" do rodapé (medido nas oito páginas em 26/09/2026). O rodapé
   ganha embaixo a altura do botão e as duas folgas dele, e a última linha termina acima do botão. Este arquivo vem
   depois do components, e por isso a regra dele vale sobre o padding-block do rodapé. */
.footer { padding-bottom: calc(56px + var(--s-6) * 2 + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 899px) {
  .wa-flutuante {
    right: calc(var(--s-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    width: 56px;
    gap: 0;
    justify-content: center;
    padding: 0;
    border: 0;
    background: #25d366;
    box-shadow: 0 14px 30px -10px rgba(2, 6, 20, 0.9);
  }
  .wa-flutuante__icone { width: 56px; height: 56px; background: none; }
  .wa-flutuante__icone svg { width: 30px; height: 30px; }
  .wa-flutuante__texto { display: none; }
  .footer { padding-bottom: calc(56px + var(--s-4) * 2 + env(safe-area-inset-bottom, 0px)); }
}
@media print { .wa-flutuante { display: none; } }

/* NA PRIMEIRA TELA O BOTÃO NÃO APARECE: ele surge quando a pessoa começa a rolar (decisão do usuário em 26/09/2026, a
   opção B). Aberto no topo, ele caía em cima do que a primeira tela foi desenhada para mostrar: o "1h48" do YouTube no
   celular da Home e do TAI, o "R$ 68,00" de Preços e os controles do carrossel a 1024 x 768. Quem decide é a rolagem
   da própria página (animation-timeline), sem JavaScript: nos primeiros 48 px ele vai de invisível a inteiro, e a
   visibility faz com que, invisível, ele também não receba clique nem foco. Numa página que rola menos que isso, o
   fim da aparição é o fim da rolagem (o 100% do min), e ele termina inteiro; o 48px sozinho, antes, é a rede para o
   navegador que não entender o min.

   ELE APARECE DESDE O INÍCIO EM TRÊS CASOS, de propósito: no navegador que não sabe fazer isso (o @supports não vale,
   e fica o desenho aprovado, sempre visível); na página que não rola (sem rolagem a linha do tempo fica inativa, e a
   animação não vale); e na página aberta já rolada (o voltar do navegador, um link com #).

   A ANIMAÇÃO VAI EM PROPRIEDADES SEPARADAS, E NUNCA PELO ATALHO: o animation zera o animation-timeline, e com ele no
   lugar o botão viraria uma animação de tempo de duração zero, que termina no primeiro quadro, visível de novo. */
@supports (animation-timeline: scroll()) {
  .wa-flutuante {
    animation-name: wa-flutuante-aparece;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0px 48px;
    animation-range: 0px min(48px, 100%);
  }
  @keyframes wa-flutuante-aparece {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }
}