Imagem com parallax e lista numerada ao lado

Duas colunas: de um lado uma foto que estica na altura inteira da linha e desloca suavemente no scroll; do outro, o título da seção e uma lista numerada de diferenciais, cada item com título curto e uma frase. Sem olho — a seção abre direto no título.

É o bloco mais reutilizável da biblioteca: serve para diferenciais, benefícios, etapas resumidas, garantias.

Quando usar

3 a 4 diferenciais que precisam de mais que um rótulo, mas menos que um card com foto própria.
Quando existe uma foto boa e ambiente para sustentar a seção inteira.
Alternando com outras seções: duas ou três instâncias na mesma página, alternando .is-flipped, criam ritmo sem repetir forma.

Quando não usar

Com 6+ itens. A coluna estica muito além da foto e o min-height deixa de resolver.
Quando cada item merece imagem própria — aí é conteudo/pilares-texto-na-foto.
Quando os itens são clicáveis ou levam a páginas. Esta lista é leitura, não navegação.

Padrão editorial

Slot	Regra
Título da seção	1 linha, uma palavra em `<em>`. Costuma ser uma pergunta respondida: "Por que os clientes escolhem a marca".
`.duo-num`	`01`…`04`, sem pular.
`.duo-title`	2 a 4 palavras. Nome do diferencial, não frase: "Alinhamento de interesses".
`.duo-text`	1 frase, 18 a 30 palavras. Explica como, não repete o título.

Os três textos precisam ter comprimento parecido: a lista é uma pilha de blocos separados por régua, e altura desigual fica exposta.

Especificação da imagem

Retrato ou quadrada, mínimo 1200×1600.
Até 300 KB.
Entra em grayscale(.4) brightness(.8) — foto de ambiente ou de pessoas em situação, não produto.
A imagem é renderizada em scale(1.06) a 1.08: o assunto precisa estar folgado das bordas, senão o corte come detalhe.

Como usar

<link rel="stylesheet" href="componentes/conteudo/imagem-lista-numerada/estilo.css">
<script src="componentes/conteudo/imagem-lista-numerada/script.js"></script>

O script varre [data-duo-img], então várias instâncias na mesma página funcionam.

Variações

.duo.is-flipped — imagem à direita. Use para alternar quando houver mais de uma instância na página. No mobile a ordem volta ao normal automaticamente.
Sem parallax — não carregue o script. O scale(1.06) do CSS segura a imagem parada e nada quebra.

Gotchas

min-height:420px na mídia não é arbitrário. Com 2 itens na lista, a foto vira uma tira sem ele. A regra continua sendo o align-items:stretch do grid; o min-height é só o piso.
A imagem já nasce em scale(1.06) no CSS e o script sobe para 1.08 ao aplicar o transform. É a folga do deslocamento — sem ela aparece borda vazia nos extremos.
Deslocamento de ±13px, só. O parallax aqui é discreto de propósito: a foto acompanha a leitura da lista, não disputa com ela. Aumentar isso faz a foto "nadar".
O número usa --accent-2, não --accent. Ele numera, não grita — e não pode competir com o <em> do título logo acima.
grid-template-columns:44px 1fr no item, não flex com gap: o número precisa de coluna própria de largura fixa, senão "01" e "10" desalinham os títulos.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html`, seção Valores	2026-08	Origem. `.vals`/`.vals-media`/`.vn` com seletores de elemento (`li`, `h3`, `p`), id `#valsImg` no script, `border-radius:10px` cravado, `--tan` cru no número, `margin-top:28px` inline na `<ul>`.

Normalizações aplicadas na extração: prefixo duo- (o nome antigo vinha do conteúdo "Valores", não da forma); seletores de elemento → classes; id → [data-duo-img], o que permite várias instâncias na mesma página; raio cravado → --radius-media; --tan → --accent-2; parallax passou a assinar LIB.onScroll; adicionada a variação .is-flipped, que não existia.