Manifesto com citação em duas colunas

Duas colunas assimétricas: à esquerda uma citação grande em itálico, revelada palavra a palavra quando entra na tela; à direita um parágrafo de apoio e um link de texto. Sem script próprio — o reveal vem do [data-split] do core.

É a seção que dá voz à empresa logo depois do hero, antes de qualquer lista de serviços.

Quando usar

• Segunda dobra de uma home institucional, para dizer quem a empresa é antes de dizer o que ela vende.
• Página "Quem somos", como abertura de texto.
• Quando existe uma frase de posicionamento real — de sócio, de manifesto, de carta ao cliente.

Quando não usar

• Sem uma frase forte de verdade. Citação genérica revelada palavra a palavra chama atenção para o vazio.
• Como depoimento de cliente. Depoimento pede rosto, nome e empresa — isso é prova/, não conteudo/.
• Mais de uma vez na mesma página. O efeito de palavra a palavra só funciona quando é único.

Padrão editorial

A citação não leva <em> na cor de marca. Ela já é o destaque da seção — dois destaques dentro dela anulam um ao outro.

Como usar

<link rel="stylesheet" href="componentes/conteudo/manifesto-citacao/estilo.css">

Nenhum script além do core/motion.js.

Ganchos

Variações

• Sem link — apague .man-link.
• Citação sozinha — apague .man-body e o grid; a citação ocupa a coluna inteira. Usado quando não há para onde levar o leitor.

Gotchas

• A citação usa --sans em itálico, não --display. É o que a distingue de um título de seção: ela é fala, não rótulo. Trocar para a display transforma a seção em mais um título grande.
• O [data-split] preserva tags internas. O core percorre a árvore em vez de usar innerHTML cru, então <em>, <a> e <br> dentro da citação sobrevivem.
• O link é texto com régua, não botão. Botão aqui competiria com o CTA principal da página.
• 1.15fr contra 1fr, não 1fr 1fr. A citação precisa pesar mais; em colunas iguais ela quebra em linhas curtas demais e perde o ritmo.

Histórico

Normalizações aplicadas na extração: borda do link rgba(198,206,170,.4) crua → --rule-2 com color-mix sobre --accent por cima, para acompanhar qualquer tema; cor do link --sage → --accent.