Botão flutuante de contato · Biblioteca de seções

<a class="fab" href="https://wa.me/5500000000000" target="_blank" rel="noopener" aria-label="Falar no WhatsApp"> <svg width="25" height="25" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.92 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.14c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.12.11-1.8-.11-.42-.13-.95-.31-1.64-.6-2.88-1.24-4.76-4.15-4.9-4.34-.14-.19-1.17-1.56-1.17-2.97 0-1.42.74-2.11 1-2.4.26-.29.57-.36.76-.36.19 0 .38 0 .55.01.18.01.41-.07.64.49.24.58.81 2 .88 2.14.07.14.12.31.02.5-.09.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.57.16.28.71 1.17 1.52 1.9 1.05.94 1.93 1.23 2.21 1.37.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.19-.28.37-.23.62-.14.26.09 1.65.78 1.93.92.28.14.47.21.54.33.07.12.07.68-.17 1.36z"/></svg> </a>

/* ========================================================================== BOTÃO FLUTUANTE — atalho fixo no canto inferior Prefixo: fab- Tokens usados: --accent --dark --light-2 --ease ========================================================================== */ .fab{ position:fixed;right:22px;bottom:22px;z-index:90; width:52px;height:52px;border-radius:50%; background:var(--accent);color:var(--dark); display:flex;align-items:center;justify-content:center; transition:transform .3s var(--ease),background .25s; } /* Cresce 8% no hover — o suficiente para responder ao mouse sem sair do lugar. z-index 90 fica abaixo do menu (100) e do drawer (200): com o drawer aberto o botão não pode flutuar por cima do menu. */ /* Sem salto no hover (CLAUDE.md §6, 2026-09-29): o disco acende e não cresce, a mesma regra do .btn do core — botão não salta nem move. */ .fab:hover{background:var(--light-2)} @media(prefers-reduced-motion:reduce){ .fab{transition:background .25s} } /* Em tela pequena o botão encosta mais na borda e encolhe um pouco: 52px no canto de um celular cobre conteúdo real. */ @media(max-width:560px){ .fab{right:16px;bottom:16px;width:46px;height:46px} .fab svg{width:22px;height:22px} }

Atalho circular fixo no canto inferior direito, na cor de marca, com o ícone do canal. Cresce levemente no hover. Sem JavaScript — é um link de verdade.

Quando usar

Site de serviço onde o WhatsApp é canal real de atendimento. No Brasil, em página de alto ticket, ele costuma converter melhor que o formulário.
Como reforço do CTA principal, nunca no lugar dele.

Quando não usar

Se ninguém atende o número. Botão que leva a silêncio custa mais caro que botão nenhum.
Em página que já tem chat widget — dois botões flutuantes no mesmo canto brigam.
Em site cujo público não usa o canal (institucional B2B internacional, por exemplo).

Padrão editorial

O único texto é o aria-label: verbo mais canal, "Falar no WhatsApp". O ícone carrega o resto.

Se a variação com rótulo for usada, o texto tem 2 a 3 palavras: "Fale conosco", "Chamar no WhatsApp".

Como usar

<link rel="stylesheet" href="componentes/navegacao/botao-flutuante/estilo.css">

Cole antes do </body>. Troque o número no href — formato wa.me/55 + DDD + número, só dígitos.

Variações

Com rótulo — pílula com ícone e texto: width:auto, border-radius:var(--radius-pill), padding lateral. Ocupa mais tela; teste no mobile antes. Ainda não rodou em produção.
Canto esquerdo — troque right por left. Útil quando um chat widget já ocupa a direita.

Gotchas

z-index:90 é deliberado: abaixo do menu fixo (100) e do drawer (200). Com o drawer aberto, o botão não pode flutuar por cima dele.
É <a>, não <button>. Precisa abrir em aba nova, ser copiável e funcionar com JS desligado.
rel="noopener" junto com target="_blank" — sem isso a página de destino recebe referência à sua janela.
No mobile ele encolhe e encosta mais na borda. 52px no canto de um celular cobre conteúdo real, sobretudo o fim de um formulário.
Não coloque dois. Se aparecer pedido de "um do WhatsApp e um do topo", a resposta é um botão de voltar-ao-topo em outro canto, não dois círculos empilhados.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` e `quem-somos.html`, antes do `</body>`	2026-08	Origem. Classe `.wa` (nome do canal, não da função), cores `--sage`/`#0a0a0a`/`--cream` cruas, sem breakpoint mobile, sem tratamento de movimento reduzido.

Normalizações aplicadas na extração: .wa → .fab (a função é "botão flutuante"; o canal é conteúdo, não estrutura); cores → --accent / --dark / --light-2; adicionado breakpoint mobile e prefers-reduced-motion; aria-hidden no SVG, que já tem aria-label no link.