/**
 * Botão flutuante de WhatsApp, presente em todas as páginas do site.
 *
 * Fica num arquivo próprio porque as páginas não compartilham a mesma lista de
 * estilos: o simulador de campanha, por exemplo, não carrega o CSS do Webflow.
 * Por isso também nada aqui usa as variáveis da paleta (`--_cores---*`), que só
 * existem em capital-consorcio.webflow.css. As cores são literais de propósito.
 *
 * O botão é da Capital; o verde do WhatsApp fica só no ícone. Antes o botão
 * inteiro era verde saturado e virava o elemento mais chamativo de toda a
 * página, competindo com o CTA de cada tela — inclusive encostando nele no
 * formulário. Agora ele indica o canal sem disputar a decisão.
 *
 * Escala de z-index do site, declarada aqui porque é o único arquivo de página
 * que precisa empilhar acima do conteúdo:
 *
 *   -1    texturas de fundo (a porta, em vender-consorcio)
 *    5    cabeçalho do site (capital-consorcio.webflow.css)
 *  500    este botão
 * 1000    navegação do Webflow
 * 2000    modal do Webflow
 *
 * Estava em 900, que é a camada de dropdown do webflow.css — colisão, não
 * escolha. 500 fica acima de todo conteúdo e abaixo de tudo que precisa cobrir
 * o botão.
 */

.zap-flutuante {
  position: fixed;
  z-index: 500;

  /* env() protege a área do gesto de home do iPhone; o fallback vale no resto. */
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;

  background-color: #355673;
  color: #f7f5f0;
  text-decoration: none;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1;

  box-shadow: 0 4px 14px #121d2633;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* O hover era #2b4761, um azul escurecido à mão que não está na paleta. Passa a
   ser o quase-preto oficial: texto a 15,68:1 e ícone a 8,67:1. */
.zap-flutuante:hover {
  background-color: #121d26;
  color: #f7f5f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #121d2640;
}

.zap-flutuante:focus-visible {
  outline: 3px solid #355673;
  outline-offset: 3px;
}

/* O ícone guarda o verde do WhatsApp: é o que faz o canal ser reconhecido antes
   de ser lido, sem que a página inteira precise ficar verde para isso. */
.zap-flutuante svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: #25d366;
}

/* No celular o botão é só o ícone: rótulo ali comeria tela sem explicar nada que
   o ícone do WhatsApp já não diga. */
.zap-flutuante-texto {
  display: none;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .zap-flutuante {
    width: auto;
    height: 52px;
    padding: 0 20px 0 16px;
  }

  .zap-flutuante-texto {
    display: inline;
  }
}

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

  .zap-flutuante:hover {
    transform: none;
  }
}

/* Impressão não tem para onde clicar. */
@media print {
  .zap-flutuante {
    display: none;
  }
}