Diagrama hub com traços calculados sobre o DOM

Composição simétrica: dois territórios com listas de itens nas laterais, um núcleo circular no meio com um ponto em órbita, e uma terceira ramificação pendurada embaixo. Os traços que ligam tudo são SVG desenhados em runtime, a partir da posição real que os elementos ocuparam na tela — e entram sendo traçados quando a seção aparece.

Nenhuma coordenada é fixa. É o que faz o diagrama sobreviver a qualquer largura, tradução ou mudança de texto sem ninguém reabrir o Illustrator.

Quando usar

Explicar uma arquitetura: duas frentes que convergem para um centro. Onshore/offshore, produto/serviço, pessoa física/jurídica, aquisição/retenção.
Quando o argumento é "isso tudo é uma coisa só", e uma lista de bullets não diz isso.
Seção de meio de página, depois de o visitante já saber o que a empresa faz.

Quando não usar

Fluxo com etapas em sequência. Isso é listas/baralho-sticky, não hub.
Mais de duas laterais. A simetria é o que sustenta a leitura; com três pontas vira organograma.
Quando os dois lados não são equivalentes em peso. Um lado com 4 itens e outro com 1 quebra a composição.

Padrão editorial

Slot	Regra
Título	1 linha curta, uma palavra em `<em>`. Ele é `nowrap` no desktop — se não couber em uma linha, encurte o texto, não mexa no CSS.
`.hub-cap b`	1 palavra: o território. "Brasil", "Exterior".
`.hub-cap span`	1 palavra técnica, minúscula: "onshore", "offshore".
`.hub-list`	4 itens de cada lado, mesma contagem. 5 a 9 palavras cada.
`.hub-core-inner`	3 a 5 palavras, com `<br>` manual. É a tese da seção: "Sua família no centro".
`.hub-foot`	Rótulo curto em caixa alta e 1 frase de até 50ch.

Contagem igual dos dois lados é estrutural. O align-items:center do grid centraliza cada coluna; com listas de alturas muito diferentes, os traços saem em alturas que não conversam.

Como usar

<link rel="stylesheet" href="componentes/dados/diagrama-hub/estilo.css">
<script src="componentes/dados/diagrama-hub/script.js"></script>

Ganchos

Gancho	Papel
`[data-hub]`	a raiz, e o sistema de coordenadas dos traços
`[data-hub-links]`	o SVG dos traços
`[data-hub-core]`	o núcleo — origem dos três traços
`[data-hub-node="left"]` / `"right"`	as figuras laterais, pontas dos traços
`[data-hub-foot]`	a terceira ramificação
`.hub.is-drawn`	dispara o traçado e a entrada dos ícones

Variações

Sem terceira ramificação — apague .hub-foot e o path down. O script já testa se existe.
Núcleo sem órbita — apague o .hub-spin; sobra o anel parado.

Gotchas

pathLength="1" é o truque todo. Ele normaliza o comprimento de qualquer traço, então stroke-dasharray:1; stroke-dashoffset:1 no CSS vale para todos, independente do tamanho real.
Não escreva o stroke-dashoffset inline no script. Estilo inline vence a regra .is-drawn, e o traço nunca chegaria a zero — fica invisível para sempre. Esse bug custa meia hora para achar.
Os traços saem da borda da div do núcleo, não do anel visível. A div é maior que o anel; usar a borda dela deixa a mesma folga entre traço e anel nos três links, inclusive no de baixo. Mirar no anel deixaria o de baixo colado e os laterais soltos.
medir() roda de novo no load. As fontes carregam depois do primeiro layout e mudam a altura das listas, o que move os nós — sem o segundo cálculo os traços ficam fora de lugar em recarga fria.
O núcleo não tem borda nem fundo próprio. O único círculo da composição é o anel externo. Um segundo círculo em volta do texto vira alvo, não centro.
overflow:visible no SVG — sem isso o traço é cortado quando encosta na borda da caixa.
No mobile os traços somem. Em pilha vertical eles ligariam coisas que já estão obviamente ligadas, e cruzariam o texto.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` `#planejamento` + `main.js`	2026-08	Origem. Ids `#hub`, `#hubLinks`, `#linkL/R/D`, `#hubCore`, `#figBR`, `#figEX` — o script conhecia cada elemento pelo nome. Classes `.cap`, `.o-ring`, `.o-dot`, `.o-spin`, `.hub-foot-dm` fora do prefixo, `.drawn` como estado, `--sage`/`--tan` cruas.

Normalizações aplicadas na extração: ids → [data-hub-*], o que permite mais de um diagrama na página e desacopla o script dos nomes do conteúdo (figBR/figEX amarravam o código a "Brasil" e "Exterior"); .cap → .hub-cap, .o-* → .hub-ring/.hub-dot/.hub-spin, .hub-foot-dm → .hub-foot-mark; .drawn → .is-drawn; --sage/--tan → --accent/--accent-2.

Código morto removido: o CSS de origem ainda trazia .geo-line, .geo-wire, .geo-arc e .geo-pin — classes de uma versão anterior em que os mapas eram SVG inline "desenhados" por stroke-dashoffset. Na versão que rodou, os mapas viraram <img> e essas regras nunca mais foram usadas. Não vieram para a biblioteca.