Hero full-bleed com mídia, headline em linhas e régua de stats

Abertura de página inteira: foto sangrando na tela toda, escurecida por dois gradientes cruzados, com o conteúdo ancorado na base. A headline entra linha por linha, subindo por dentro de uma máscara; texto de apoio, CTA e régua de números vêm em cascata; a foto desloca em parallax enquanto a página rola.

Quando usar

Home de site institucional ou de serviço de alto ticket, onde a foto precisa carregar autoridade antes do texto.
Página que tem uma promessa central, não três.
Quando existe imagem editorial de verdade. Com banco de imagem genérico o efeito trabalha contra: quanto maior a foto, mais óbvio o clichê.

Quando não usar

Produto/SaaS que precisa mostrar interface acima da dobra — use um hero com mídia lateral.
Página de conversão direta com formulário acima da dobra.
Site com mais de 3 CTAs concorrentes no topo.

Padrão editorial

Slot	Regra	Referência
Olho (`.eyebrow`)	2 a 4 palavras. Categoria, não benefício. Opcional.	"Consultoria independente"
Headline	2 linhas, uma `.hero-ln` cada. 3 a 6 palavras por linha. Uma palavra em `<em>` — só uma.	"Segurança no presente, / liberdade no futuro."
Apoio (`.hero-desc`)	1 parágrafo, 25 a 45 palavras, teto de 58ch. Diz o que a empresa faz e para quem.	—
CTA	1 botão. Verbo no imperativo + objeto. Nunca "Saiba mais".	"Agende seu diagnóstico"
Stats	4 itens, ou nenhum. Chave curta (até 8 caracteres) + descrição em 2 linhas de até 30 caracteres.	"100%" / "Independente, sem vínculo com instituições"

Sobre a régua de stats: ela existe para responder "por que confiar", não "o que vocês fazem". Números, praças, certificações, tempo de casa. Se os quatro itens não passarem nesse teste, apague o bloco — hero sem régua continua íntegro.

Sobre a headline: duas linhas é estrutural, não estilístico. A terceira linha quebra o ritmo do reveal (o nth-child(2) já carrega o delay) e empurra o apoio para fora da dobra em notebook.

Especificação da imagem

Formato: paisagem, mínimo 2000×1400, ideal 2400×1600.
Peso alvo: até 400 KB em JPG qualidade 72 — a foto é o LCP da página.
Composição: assunto no terço direito. O gradiente de 100° escurece a esquerda, que é onde o texto mora.
Sem texto embutido, sem logo, sem rosto olhando para a câmera no canto esquerdo.
object-position padrão 50% 42% — ajuste por projeto, não por breakpoint.

Como usar

<link rel="stylesheet" href="core/tokens.css">
<link rel="stylesheet" href="core/temas/<projeto>.css">
<link rel="stylesheet" href="core/base.css">
<link rel="stylesheet" href="core/motion.css">
<link rel="stylesheet" href="componentes/hero/full-bleed-media/estilo.css">
...
<script src="core/motion.js"></script>
<script src="componentes/hero/full-bleed-media/script.js"></script>

Cole o markup.html como primeiro filho do <body>, troque o src da imagem e o escopo de tom se o projeto não for escuro.

Ganchos

Gancho	Papel
`[data-hero]`	raiz — o script procura por ele, não por id
`[data-hero-img]`	a imagem que recebe o parallax
`.hero.in`	classe de entrada, adicionada pelo script

Variações

.hero-compact — banner de página interna: 56vh, sem stats, sem CTA. Mesma mídia, mesmo scrim. Usada na "Quem somos" da Liberta.
Sem stats — apague o bloco .hero-stats. Nada mais muda.
Vídeo no lugar da foto — troque <img> por <video muted autoplay loop playsinline> com a mesma classe. O parallax funciona igual. Exige poster e um fallback de imagem em conexão lenta. Ainda não rodou em produção.

Gotchas

Dois requestAnimationFrame encadeados antes do .in. Com um só, o estado inicial às vezes não pintou e o texto aparece pronto, sem animar. O setTimeout(450) é a rede para aba aberta em segundo plano, onde o rAF não roda.
A imagem é 120% da altura, começando em -10%. É a folga do parallax. Se alguém "consertar" para inset:0, aparece faixa vazia no fim do deslocamento.
.hero-fade não é decoração. Sem ele o hero termina em corte reto contra a seção seguinte, e a emenda fica visível em tela larga.
O parallax não mexe no menu. No Liberta Wealth original o mesmo heroUpdate() também alternava .nav.scrolled, o que fazia páginas sem hero dependerem de um if (!hero) no meio da função. Aqui está separado: nav cuida da nav.
min-height:100vh no mobile conta a barra do navegador. Se incomodar, troque por 100svh — não foi trocado por padrão porque svh não vale a pena em base antiga.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` `#hero`	2026-08	Origem. Classes `.ln`/`.desc`/`.k`/`.v` sem prefixo, ids `hero`/`heroImg`, parallax acoplado ao estado da nav, cores cruas `rgba(6,6,6,…)` no scrim.
Liberta Wealth	`quem-somos.html` `#hero`	2026-08	Variação `.hero-sm` → virou `.hero-compact` aqui.

Normalizações aplicadas na extração: prefixo em todas as classes internas; ids trocados por data-*; scrim e fade passaram a ler --dark-rgb; textos e linhas passaram a ler --fg / --fg-2 / --fg-muted / --rule; sage cru virou --accent; parallax passou a assinar LIB.onScroll em vez de registrar listener próprio; desacoplado da nav.