# Botão flutuante de WhatsApp (`botao-whatsapp`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Botão fixo no canto da tela que abre a conversa no WhatsApp com mensagem inicial. Com texto no computador, só ícone no celular. Sem JS.

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Botão flutuante / Botão de Chat (Floating Buttons, Click to Chat)
- **Arquivos:** `botao-whatsapp.html`, `botao-whatsapp.css`
- **Precisa de JavaScript:** não

## Quando usar
- Projeto que vende ou atende pelo WhatsApp
- Página de serviço local

## Quando não usar
- Página de vendas com checkout direto, se o atendimento não der conta
- Junto de outro botão flutuante no mesmo canto

## Variações
- **Com texto (só ícone no celular):** classe ds-whatsapp--com-texto
- **Só ícone:** sem ds-whatsapp--com-texto (o texto fica para leitor de tela)
- **Canto esquerdo:** classe ds-whatsapp--esquerda

## Conteúdo esperado
- Número com DDI e DDD (só dígitos) no link wa.me
- Mensagem inicial codificada para URL
- Texto do botão

## Acessibilidade
- É um link com nome visível ou .ds-sr-only, e aviso de nova aba
- Área de toque de 56px
- Respeita a área segura do celular (safe-area)
- Não cobre conteúdo importante: deixe respiro no fim do rodapé

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao-whatsapp/botao-whatsapp.css">
```

Tokens do contrato usados: `--ds-botao-fonte`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-raio-pilula`, `--ds-sombra-md`.

## Notas

A classe principal é ds-whatsapp. O ícone é um balão de conversa genérico; se o projeto quiser o símbolo oficial do WhatsApp, use o arquivo oficial do kit de marca da Meta como imagem, sem redesenhar. A cor vem do DS do projeto.