# Pop-up (janela modal) (`modal`)

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

Janela sobre a página com <dialog> nativo: abre por botão ou sozinha depois de alguns segundos (uma vez por visita), fecha por botão, Esc ou clique fora.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Pop-up (Popup Builder)
- **Arquivos:** `modal.html`, `modal.css`, `modal.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-modal-fechar`, `data-ds-modal`, `data-ds-modal-abrir`)
- **Depende de:** `botao`

## Quando usar
- Formulário de captura aberto por um botão
- Aviso pontual (evento, prazo)
- Detalhe que não cabe na página (regulamento, ficha)

## Quando não usar
- Abrir sozinho logo na entrada: atrapalha e o Google penaliza intersticial no celular
- Conteúdo essencial para decidir a compra

## Variações
- **Abre por botão:** botão com data-ds-modal-abrir="<id do dialog>"
- **Abre sozinho:** data-ds-modal-apos="segundos" no <dialog> (uma vez por visita)

## Conteúdo esperado
- id único
- Título (ligado por aria-labelledby)
- Texto curto
- Ação ou formulário

## Acessibilidade
- <dialog> com showModal(): foco preso dentro, Esc fecha, o resto da página fica inerte
- Foco volta para o botão que abriu
- Botão de fechar com nome
- Fundo da página não rola com a janela aberta
- Animação de entrada desligada com prefers-reduced-motion

## 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/botao.css">
<link rel="stylesheet" href="componentes/modal/modal.css">
<script src="componentes/modal/modal.js" defer></script>
```

Tokens do contrato usados: `--ds-cartao-padding`, `--ds-cor-borda`, `--ds-cor-fundo-marca`, `--ds-cor-superficie`, `--ds-cor-texto`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao-lenta`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-espaco-8`, `--ds-pagina-x-mobile`, `--ds-raio-cartao`, `--ds-sombra-md`.