# Título de seção (`titulo-secao`)

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

Cabeça de seção com sobretítulo, título (com uma palavra opcional na fonte de destaque) e subtítulo.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Título (Heading) + Texto (Text Editor)
- **Arquivos:** `titulo-secao.html`, `titulo-secao.css`
- **Precisa de JavaScript:** não

## Quando usar
- Abrir qualquer seção da página
- Dar contexto antes de uma grade, depoimentos, preços ou perguntas

## Quando não usar
- No topo da página: o título principal (h1) fica no hero
- Para título de cartão (use h3 dentro do cartão)

## Variações
- **Alinhado à esquerda:** classe ds-titulo-secao
- **Centralizado:** classe ds-titulo-secao--centro
- **Palavra em destaque:** <em class="ds-titulo-secao__marca"> em uma palavra do título

## Conteúdo esperado
- Sobretítulo (opcional, 2 a 4 palavras)
- Título h2
- Subtítulo (opcional, até 2 linhas)

## Acessibilidade
- Um h2 por seção, sem pular nível de título
- Sobretítulo é <p>, não título, para não poluir a estrutura
- Fonte de destaque só em uma palavra: frase inteira em fonte decorativa prejudica a leitura

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

Tokens do contrato usados: `--ds-borda-largura-forte`, `--ds-cor-acento`, `--ds-cor-texto-destaque`, `--ds-cor-texto-suave`, `--ds-espaco-12`, `--ds-espaco-2`, `--ds-espaco-3`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-fonte-destaque`, `--ds-fonte-texto`, `--ds-largura-texto`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto-grande`.