# Hero (abertura) (`hero`)

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

Abertura da página com o h1, promessa, um ou dois botões, nota de apoio e imagem ao lado, centralizada ou de fundo.

- **Categoria:** Abertura
- **Equivalente no Elementor:** Seção de topo com Título, Texto, Botão e Imagem (ou template Hero)
- **Arquivos:** `hero.html`, `hero.css`
- **Precisa de JavaScript:** não
- **Depende de:** `botao`

## Quando usar
- Primeira dobra de qualquer página
- Página de vendas, de captura, institucional

## Quando não usar
- No meio da página (use chamada para ação)
- Com vídeo de fundo (use hero com vídeo)

## Variações
- **Texto e imagem ao lado:** classe ds-hero
- **Imagem à esquerda:** classe ds-hero--invertido
- **Centralizado sem imagem:** classe ds-hero--centro e remover .ds-hero__midia
- **Imagem de fundo com camada da marca:** classe ds-hero--fundo (imagem decorativa: alt="")
- **Fundo em modo do DS:** atributo data-ds-modo="<modo>"

## Conteúdo esperado
- Sobretítulo (opcional)
- Título principal: o único h1 da página
- Subtítulo de 1 ou 2 frases
- 1 ou 2 botões
- Nota de apoio (opcional)
- Imagem (opcional)

## Acessibilidade
- Um único h1 por página, aqui
- Imagem do topo sem lazy e com fetchpriority="high" (carrega rápido)
- Na variação de fundo, a camada da marca garante o contraste do texto

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

Tokens do contrato usados: `--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-texto`, `--ds-cor-texto-destaque`, `--ds-cor-texto-suave`, `--ds-espaco-12`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-espaco-8`, `--ds-largura-texto`, `--ds-raio-lg`, `--ds-secao-y-desktop`, `--ds-secao-y-mobile`, `--ds-sombra-md`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto-grande`.