/* ==========================================================================
   VionTech — Botão flutuante WhatsApp
   Herda tamanho, posição base e responsivo de .vt-hero__chat (index.css).
   Aqui só mudam: cor, ícone e deslocamento para cima.
   Precisa que index.css seja carregado ANTES deste arquivo.
   ========================================================================== */

.vt-hero__chat.vt-hero__chat--whatsapp {
  --vt-wa-green: #25D366;
  --vt-wa-green-dark: #1EBE5A;
  --vt-wa-gap: 16px;

  background: var(--vt-wa-green);
  border-color: var(--vt-wa-green);
  color: #fff;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Sobe exatamente a altura do próprio botão + um respiro.
     Como usa a mesma altura da bolha de chat, acompanha qualquer
     tamanho/breakpoint dela, sem precisar repetir media queries.
     Usa a propriedade `translate`, que não conflita com `transform`. */
  translate: 0 calc(-100% - var(--vt-wa-gap));
}

.vt-hero__chat.vt-hero__chat--whatsapp i {
  font-size: 1.6em; /* proporcional ao tamanho do botão */
  line-height: 1;
}

.vt-hero__chat.vt-hero__chat--whatsapp:hover,
.vt-hero__chat.vt-hero__chat--whatsapp:focus-visible {
  background: var(--vt-wa-green-dark);
  border-color: var(--vt-wa-green-dark);
  color: #fff;
}

@media (max-width: 640px) {
  .vt-hero__chat.vt-hero__chat--whatsapp {
    --vt-wa-gap: 12px;
  }
}