/* ==========================================================================
   Botão flutuante do WhatsApp: fixo no canto de baixo, à direita, o tempo todo
   - Fica fora do #smooth-wrapper (o transform do ScrollSmoother levaria junto
     até um position: fixed), depois dele no HTML: é o último item do Tab.
   - Verde do WhatsApp com o ícone branco: exceção à paleta da marca, porque é
     a cor que identifica o canal. Tamanho e distância do canto: --wa-size e
     --wa-offset; --wa-clear é a faixa que ele ocupa (css/base.css).
   - Enquanto a abertura roda (html.is-loading) fica escondido; depois sobe e
     aparece, junto com o fim da entrada da hero.
   ========================================================================== */
.whatsapp-float {
  --wa-green: #25D366;

  position: fixed;
  z-index: 50; /* como o botão de CTA do canto: acima da página, abaixo do preloader (100) */
  right: var(--wa-offset);
  bottom: var(--wa-offset);
  display: grid;
  place-items: center;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  background-color: var(--wa-green);
  color: var(--color-white);
  box-shadow: 0 10px 28px rgba(29, 29, 27, 0.22);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out), scale 0.3s var(--ease-out);
}

.whatsapp-float svg {
  width: 54%;
  height: 54%;
}

.is-loading .whatsapp-float {
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
}

/* foco em duas cores (o vermelho padrão some sobre as seções escuras) */
.whatsapp-float:focus-visible {
  outline-color: var(--color-black);
  box-shadow: 0 0 0 4px var(--color-white), 0 10px 28px rgba(29, 29, 27, 0.22);
}

.whatsapp-float:active {
  scale: 0.94;
}

@media (hover: hover) {
  .whatsapp-float:hover {
    scale: 1.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }
}

/* o Chrome repetiria o botão fixo em cada página impressa */
@media print {
  .whatsapp-float {
    display: none;
  }
}