# Rodapé (`rodape`)

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

Logo do projeto, frase curta, até três colunas de links e linha final com dados legais. Fundo claro ou fundo da marca.

- **Categoria:** Estrutura
- **Equivalente no Elementor:** Rodapé do Theme Builder (Footer)
- **Arquivos:** `rodape.html`, `rodape.css`
- **Precisa de JavaScript:** não

## Quando usar
- Fim de toda página do site
- Página de vendas: versão enxuta só com a linha final (dados legais e privacidade)

## Quando não usar
- Para repetir o menu inteiro com dezenas de links

## Variações
- **Fundo da marca:** classe ds-rodape--marca e {{logo-negativo}}
- **Fundo claro:** sem ds-rodape--marca e {{logo}}
- **Enxuto:** manter só o .ds-rodape__final

## Conteúdo esperado
- Logo do projeto: arquivo original (versão negativa no fundo escuro)
- Frase curta
- Links institucionais, redes, atendimento
- Razão social, CNPJ, links de privacidade e termos

## Acessibilidade
- <footer> com navegações rotuladas (aria-label)
- Link que abre nova aba avisa em .ds-sr-only
- Contraste do fundo da marca vem do DS (cor sobre a marca)

## 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/rodape/rodape.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-borda`, `--ds-cor-fundo-marca`, `--ds-cor-sobre-marca`, `--ds-cor-superficie`, `--ds-cor-texto`, `--ds-cor-texto-destaque`, `--ds-espaco-1`, `--ds-espaco-12`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-logo-largura`, `--ds-tamanho-legenda`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto`.