# Prova social (logos) (`prova-social`)

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

Grade de logos de clientes, parceiros ou imprensa, como imagens, com frase curta acima. Opção de logos em cinza que ganham cor no passar do mouse.

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Carrossel de Logos / Galeria de Imagens com logos (Logo Grid)
- **Arquivos:** `prova-social.html`, `prova-social.css`
- **Precisa de JavaScript:** não

## Quando usar
- Logo abaixo do hero, para dar credibilidade logo de cara
- Página de serviço B2B, mídia kit

## Quando não usar
- Sem autorização para usar a marca do cliente
- Com menos de 3 logos (use depoimento)

## Variações
- **Colorido:** classe ds-prova-social
- **Cinza com cor no passar do mouse:** classe ds-prova-social--cinza

## Conteúdo esperado
- Frase curta
- 3 a 12 logos: arquivo original de cada empresa (SVG ou PNG transparente)
- alt com o nome da empresa

## Acessibilidade
- Lista <ul>: o leitor de tela anuncia quantos são
- alt = nome da empresa (não "logo")

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

Tokens do contrato usados: `--ds-cor-texto-suave`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-tamanho-pequeno`.

## Notas

O filtro cinza é só de exibição e some no passar do mouse; o arquivo do logo não é alterado. Faixa de logos rolando sozinha fica para o lote 2.