# Chamada para ação (CTA) (`cta`)

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

Faixa ou cartão com título, frase e botão. Fundo da marca, fundo da página ou cartão com barra de destaque.

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Chamada para Ação (Call to Action)
- **Arquivos:** `cta.html`, `cta.css`
- **Precisa de JavaScript:** não
- **Depende de:** `botao`

## Quando usar
- Depois de um bloco de prova ou de benefícios, para levar à oferta
- Fim da página, antes do rodapé

## Quando não usar
- Seguida de outra chamada igual: varie a frase ou junte

## Variações
- **Faixa com fundo da marca:** classe ds-cta--marca
- **Faixa com fundo da página:** sem modificador
- **Centralizada:** classe ds-cta--centro
- **Cartão:** classe ds-cta--cartao

## Conteúdo esperado
- Título com o convite
- Frase de apoio
- 1 botão (no máximo 2)

## Acessibilidade
- <section> rotulada pelo título
- Fundo da marca troca texto e botão para as cores "sobre a marca" 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/botao/botao.css">
<link rel="stylesheet" href="componentes/cta/cta.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cartao-padding`, `--ds-cor-acento`, `--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-3`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-largura-texto`, `--ds-raio-cartao`, `--ds-secao-y-desktop`, `--ds-secao-y-mobile`, `--ds-sombra-md`, `--ds-tamanho-texto-grande`.