# Seção e contêiner (`secao`)

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

Bloco de página com o respiro vertical do DS e conteúdo centralizado na largura máxima. Variações de fundo (página, superfície, marca e modos do DS).

- **Categoria:** Estrutura
- **Equivalente no Elementor:** Seção / Contêiner (Section, Container)
- **Arquivos:** `secao.html`, `secao.css`
- **Precisa de JavaScript:** não

## Quando usar
- Todo bloco da página (hero, benefícios, depoimentos, preço...) mora dentro de uma seção
- Para alternar fundos e criar ritmo na rolagem

## Quando não usar
- Para agrupar itens dentro de uma seção (use a grade)

## Variações
- **Padrão:** classe ds-secao
- **Superfície:** classe ds-secao--superficie
- **Fundo da marca:** classe ds-secao--marca
- **Modo do DS (ex.: negativa):** atributo data-ds-modo="<modo>" (só se o tokens.css do projeto tiver o modo)
- **Compacta:** classe ds-secao--compacta
- **Centralizada:** classe ds-secao--centro
- **Conteúdo estreito (texto longo):** ds-container ds-container--estreito

## Conteúdo esperado
- Um título de seção (h2) com id ligado ao aria-labelledby
- Componentes da seção dentro de .ds-container

## Acessibilidade
- <section> com aria-labelledby apontando para o título
- Seção de marca e modos trocam texto e ação juntos para manter o contraste do DS

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

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-borda`, `--ds-cor-destaque-2`, `--ds-cor-fundo`, `--ds-cor-fundo-marca`, `--ds-cor-sobre-destaque-2`, `--ds-cor-sobre-marca`, `--ds-cor-sobre-marca-destaque`, `--ds-cor-superficie`, `--ds-cor-texto`, `--ds-espaco-12`, `--ds-espaco-8`, `--ds-largura-texto`, `--ds-pagina-x-desktop`, `--ds-secao-y-desktop`, `--ds-secao-y-mobile`.

## Notas

O id do título precisa ser único na página. O .ds-container vem do base.css e vale para qualquer componente.