# Depoimento (`depoimento`)

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

Cartão com a fala do cliente, nota opcional, foto, nome e contexto. Serve solto, em grade ou dentro dos slides de depoimentos.

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Depoimento (Testimonial)
- **Arquivos:** `depoimento.html`, `depoimento.css`
- **Precisa de JavaScript:** não

## Quando usar
- Prova social perto da oferta e do botão
- Resultado concreto contado pelo cliente

## Quando não usar
- Sem depoimento real e autorizado: nunca inventar, nem usar o de outro projeto
- Depoimento em vídeo (use vídeo incorporado com a legenda)

## Variações
- **Padrão:** classe ds-depoimento
- **Destaque:** classe ds-depoimento--destaque
- **Sem nota:** remover .ds-depoimento__nota
- **Sem foto:** remover .ds-depoimento__foto

## Conteúdo esperado
- Fala real do cliente (com autorização)
- Nome
- Profissão, cidade ou resultado
- Foto (opcional, com autorização)
- Nota de 1 a 5 (opcional, só se for real)

## Acessibilidade
- <figure> com <blockquote> e <figcaption>: a autoria fica ligada à fala
- Nota é imagem com aria-label ("Nota 5 de 5"), estrelas com aria-hidden
- Foto do autor com alt vazio: o nome já está no 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/depoimento/depoimento.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cartao-padding`, `--ds-cor-acento`, `--ds-cor-borda`, `--ds-cor-superficie`, `--ds-cor-texto-destaque`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-espaco-1`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-fonte-titulo`, `--ds-raio-cartao`, `--ds-sombra-md`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto-grande`.

## Notas

Regra dos projetos: depoimento, número e prova vêm do próprio projeto. Atualize a nota do aria-label junto com as estrelas.