Mural de depoimentos com fonte

Quatro a nove citações curtas, paradas, em colunas de altura livre como um mural. Cada card traz a frase, o nome com a inicial do sobrenome, o serviço que a pessoa contratou, a data e a fonte da avaliação. No topo, a média agregada — com o total, a fonte e a data ao lado.

O problema que ela resolve: depoimento em esteira (prova/carrossel-depoimentos) atravessa a tela e ninguém lê inteiro; depoimento sem data nem fonte é só um texto atribuído a alguém. Aqui cada frase fica parada para ser lida, e cada uma diz de onde veio.

Quando usar

• A casa tem avaliações públicas reais numa fonte verificável (Google, por exemplo) e autorização escrita para reproduzir.
• Quatro a nove citações curtas sobre atendimento.
• No meio da página, depois de apresentar o serviço — é a prova de que ele é como foi descrito.

Quando não usar

• Depoimento em vídeo — prova/depoimento-video.
• Menção de imprensa — prova/manchetes-imprensa.
• Sem autorização ou sem fonte. Aí não há depoimento a publicar.
• Quando o único elogio disponível é sobre rendimento. Ver Compliance.

Padrão editorial

O que mantém a peça: tamanhos diferentes de propósito. As colunas CSS deixam cada card do tamanho da própria frase; editar as citações para ficarem iguais tira a voz de quem escreveu.

Especificação dos assets

Nenhum. Sem foto de cliente (ver Gotchas).

Como usar

<link rel="stylesheet" href="componentes/prova/mural-depoimentos/estilo.css">

Variações

• Sem o agregado — apague .mur-agregado quando não houver uma fonte única com média.
• Sobre papel — .sec-paper no lugar de .sec-deep.

Compliance

• Só atendimento, nunca resultado. Depoimento sobre rentabilidade em site de assessoria é promessa feita por terceiro, e as regras do setor restringem justamente isso. Clareza, prazo, orçamento cumprido, resposta rápida — sim. "Meu patrimônio cresceu 30%" — não, de nenhuma forma.
• Autorização por escrito de cada pessoa, guardada. A ressalva do pé diz que ela existe; o jurídico do cliente dá a redação final.
• A média é de uma fonte, com total e data. Nunca some notas de fontes diferentes, e nunca publique média sem dizer até quando ela vale.
• O texto é o publicado. Corte com reticências, não reescreva.

Gotchas

• Colunas CSS, não grade. A grade forçaria cards da mesma linha à mesma altura, e uma citação curta ficaria com um buraco embaixo. Com columns, cada card tem a altura da frase. O custo — a leitura desce coluna a coluna — não pesa aqui, porque a ordem dos depoimentos não é informação.

• break-inside:avoid em cada item impede um card de ser cortado entre duas colunas.

• Sem retrato de cliente. Foto de pessoa real num site financeiro é dado pessoal com autorização própria, e a iniciativa costuma morrer aí. O disco com as iniciais dá a mesma sensação de "é gente" sem o problema.

• <figure>, <blockquote> e <figcaption>. A citação é citação para o leitor de tela, e a atribuição fica presa a ela. As aspas vêm do CSS, para quem edita o texto não precisar lembrar delas.

• A data é <time> com datetime de ano e mês — a precisão que a fonte dá.

Movimento reduzido / toque

Nada anda além do reveal do core. Nada depende de hover.

Histórico

Referências visuais: a grade de depoimentos do Aurex Law e a do template Funnel (funnel.modulify.website). O que mudou: colunas CSS, marcação semântica de citação, iniciais no lugar de retrato, ressalva pela .nota, e a regra de conteúdo. Estava travado na fila por compliance e foi liberado pelo dono em 2026-09-29 — a seção Compliance acima é a condição. Registro consolidado em projetos/referencias-externas.md.