Calculadora de sucessão

Dobra clara com três controles numa fileira — patrimônio em faixa, estado em select, herdeiros em passo-a-passo — e dois cartões que se recalculam lado a lado: inventário judicial contra holding familiar com doação em vida. Cada cartão soma parcelas visíveis (ITCMD, custas, honorários), mostra prazo em faixa e uma barra horizontal em scaleX, as duas na mesma escala. Abaixo, a diferença em destaque, contando quando muda.

O problema editorial é o de sempre em sucessão: ninguém age por um argumento abstrato sobre organização, mas quase todo mundo reage a uma ordem de grandeza. A peça troca o discurso por uma conta que a pessoa mesma monta — e por isso a conta tem de aparecer inteira, parcela a parcela. Soma que não mostra as parcelas é chute com aparência de conta, e num número que fala de imposto isso deixa de ser detalhe de estilo.

Quando usar

• Numa página de planejamento patrimonial ou sucessório, depois do argumento e antes do formulário. É a peça que transforma "vale a pena conversar" em "quanto custa não conversar".
• Como dobra clara de respiro no meio de uma página escura: a leitura é de relatório, não de campanha.
• Quando o cliente já tem jurídico ou parceiro de sucessão para conferir a tabela. Sem isso, não publique.

Quando não usar

• Para falar de rentabilidade ou de crescimento de carteira. Isso é conversao/calculadora-projecao, que desenha faixa entre cenários — aqui não há projeção nenhuma, só custo de transmissão.
• Para perfilar o investidor em etapas. Isso é conversao/simulador-carteira.
• Para comparar dois cenários de alocação com controles finos: dados/comparador-cenarios.
• Para coletar contato. Esta peça não coleta nada; o botão entrega a pessoa a conversao/cta-formulario-lead.
• Em página sem espaço para a ressalva inteira. A ressalva não encolhe.

Padrão editorial

Especificação dos assets

Nenhum. Sem foto, sem ícone, sem SVG de biblioteca. É deliberado: número que fala de imposto e de morte sobre foto de família feliz é exatamente o registro a evitar. As duas barras são <span> com transform:scaleX(), e não SVG, porque não há eixo, série nem caminho a desenhar — o dado é o texto do cartão, e as barras levam aria-hidden="true".

Compliance

Esta é a parte cara da peça. O que o consumidor tem de fazer antes de publicar:

1. Trocar a tabela. ESTADOS, SEM e COM, no topo do script.js, são ilustrativos, referência 2026. O ITCMD é estadual e várias unidades da federação são progressivas — o número ali é o topo da progressiva. Custas, emolumentos e honorários mudam por comarca, por tabela da seccional da OAB e por complexidade. Tabelas reais de honorários costumam ser regressivas; as daqui são lineares, para a conta ficar auditável linha a linha.
2. Atualizar o ano na constante ANO_REF do script (o markup lê a mesma constante em [data-suc-out="ano"], então os dois não divergem).
3. Passar pela área de compliance e pelo jurídico do cliente, com a tabela final, antes de ir ao ar.
4. Não mexer na ressalva. Ela diz, com estas palavras: simulação ilustrativa, não é orientação jurídica ou tributária, alíquotas e custas mudam por estado e por ano, cada caso exige análise de advogado e contador. Fora dela, cada total carrega um .suc-flag colado ao número — "estimativa ilustrativa · muda por estado, por ano e por caso" —, porque a ressalva tem de estar onde a pessoa lê o número, não no rodapé.

O que a peça já garante e não pode ser desfeito na adaptação:

• O ITCMD aparece nos dois cartões, com o mesmo valor. Holding não elimina imposto: antecipa e organiza. Apagar essa linha do cartão estruturado transformaria a peça numa promessa de isenção.
• O texto nunca diz "você vai economizar X". Diz "nesta simulação, a diferença de custo entre os dois caminhos é X".
• Prazo é sempre faixa ("de 16 a 36 meses"), nunca número único.
• Nenhum dado pessoal. Não coleta nome, e-mail nem telefone, não grava em localStorage e não manda nada para lugar nenhum. As respostas vivem em memória e morrem no recarregamento — são dados patrimoniais de alguém, e a captura é trabalho do conversao/cta-formulario-lead.

Como usar

<link rel="stylesheet" href="componentes/conversao/calculadora-sucessao/estilo.css">
<script src="componentes/conversao/calculadora-sucessao/script.js"></script>

Os id do markup (suc-wealth, suc-state, suc-heirs-label) existem porque for e aria-labelledby exigem. O botão final aponta para #diagnostico: troque pela âncora do formulário do projeto.

Ganchos

[data-suc] a raiz · [data-suc-wealth] a faixa (min/max/step no markup) · [data-suc-state] o select · [data-suc-heirs="-1|1"] os dois botões · [data-suc-out="..."] as dezenove saídas de texto · [data-suc-bar="raw|plan"] as duas barras. Variáveis: --suc-gap --suc-card-pad --suc-bar-h --suc-thumb --suc-surface --suc-line --suc-mark --suc-mark-text na raiz, --suc-bar em cada barra, --suc-fill na faixa.

Variações

• Sem o cartão comparativo — só o custo do inventário, para uma dobra que ainda não vai falar de holding. Some a frase da diferença junto.
• Quatro parcelas — cabe uma quinta linha por cartão antes de o total sair da dobra em 1440×900.
• Estado fixo — para quem atende uma praça só. A alíquota continua tendo de aparecer na linha de ITCMD.
• Dobra escura — --suc-surface, --suc-line e --suc-mark já se viram sozinhos, porque saem de --fg. O ajuste que sobra é o <select>: a lista suspensa é do sistema e continua clara.

Gotchas

• O ITCMD nos dois cartões tem uma consequência que confunde na primeira leitura. Como o imposto é o mesmo dos dois lados, a diferença é sempre 5,4% do patrimônio, em qualquer estado. Medido: SP → RJ move os dois totais (880.000 → 1.200.000 e 448.000 → 768.000) e não move a diferença (432.000). O estado muda o custo, não o valor de organizar. Se alguém pedir para "fazer o estado mexer na diferença", a única forma seria tirar o imposto de um dos lados — que é justamente o que não pode.
• A escala das barras é o teto da tabela, não o cartão maior. escala = patrimônio × 15% (8% da maior alíquota + 1% + 6%). Em SP as barras ficam em .733 e .373; em RJ, 1.000 e .640. Com a escala no total da esquerda, ela ficaria em 1.000 para sempre e a troca de estado não apareceria em forma nenhuma. Efeito colateral aceito: mover o patrimônio não move as barras — com percentuais lineares, a proporção entre os dois caminhos não depende do tamanho do espólio.
• A contagem parte do valor PINTADO, não do alvo anterior. Medido com DUR_CONTA de 380ms: 432.000 → 1.441.690 em 100ms → 2.160.000 em 400ms. Reiniciada a cada quadro de arrasto ela vira um filtro — cada quadro anda ~12% do que falta, ~130ms de atraso — e assenta sozinha quando o arrasto para. Partindo do alvo anterior, cada quadro daria um salto para trás.
• --accent puro não sobrevive à dobra clara, e isso foi medido. Sage #c6ceaa contra o creme #ede9e3 dá 1,32:1. Daí --suc-mark (50% de accent sobre --fg) e --suc-mark-text (45%), medidos em 3,4:1 na barra e 4,6:1 no número da diferença. O <em> do título fica em 1,36:1 e é do core: a peça não põe número nenhum nele, mas se dobra clara virar padrão, o core precisa de um accent de tinta.
• O <noscript><style> não é gambiarra, é o único lugar possível. O core traz [data-rv]{opacity:0} e só o motion.js devolve — sem script, a dobra inteira sairia em branco, que é a "casca vazia" proibida. Um seletor equivalente em estilo.css piscaria (visível, escondido pelo core, revelado). Verificado com javaScriptEnabled:false de verdade: os doze blocos aparecem, os sete números estão lá, as barras nascem em 339px e 172px e o aviso do <noscript> sai. Apagar as tags <script> não serve de teste — com scripting ligado, o miolo do <noscript> continua sendo texto.
• aria-disabled, e não disabled, nas pontas do seletor de herdeiros. Um botão que vira disabled com o foco dentro dele joga o foco no <body>, e o teclado cai fora do grupo no meio do uso. O .btn-disc do core já desenha o apagado para os dois casos, e o script ignora o clique na trava.
• A caixa da faixa tem 20px; o trilho, 3px. Um <input type=range> com 3px de altura tem alvo de ponteiro de 3px — só o polegar é clicável. Aqui o trilho é pintado no ::-webkit-slider-runnable-track e a caixa fica com a altura do polegar. Medido: .suc-range 412×20 no desktop, 304×20 no mobile.
• aria-live na diferença anuncia a cada passo de seta — e é isso que se quer. No arrasto de ponteiro são ~30 mutações por segundo, mas região polite substitui o anúncio pendente em vez de empilhar fila, e quem arrasta com o mouse não está ouvindo. Com seta do teclado sai um anúncio por passo. O valor da faixa vai por aria-valuetext ("R$ 8.000.000"), e o <output> ao lado é aria-hidden para não dizer o mesmo número duas vezes.
• Herdeiro mexe no prazo, nunca no imposto. Com 1: "de 12 a 24" e "de 3 a 6 meses". Com 6: "de 22 a 54" e "de 3 a 11". O ITCMD incide sobre o que se transmite, não sobre em quantas mãos — e inventar um acréscimo de imposto por herdeiro seria inventar direito tributário.
• Percentuais lineares, e tabela real não é. Em 50 mi na Bahia a peça devolve R$ 7.500.000 de custo sem planejamento: ordem de grandeza correta, número específico não. É o primeiro item da lista de troca em ## Compliance.
• Um por página, por causa dos id. O script parte de [data-suc] e aceita várias instâncias, mas suc-wealth, suc-state e suc-heirs-label colidiriam. Duas na mesma página pedem sufixo à mão em id, for e aria-labelledby.
• --fg-muted fica em 4,37:1 na dobra clara (#726b5c sobre #ede9e3), e é onde vive toda a letra de apoio — inclusive a ressalva. Passa folgado em texto grande e fica 0,13 abaixo de AA em texto normal. É token do core, não decisão do componente.

Histórico

Origem. Autoral, sem referência única e sem uma linha copiada. O padrão — comparar dois caminhos com as parcelas à vista — aparece em três famílias: a calculadora de custo de inventário dos escritórios de advocacia sucessória, o comparador "antes e depois" das gestoras de patrimônio e o simulador de custo de portabilidade dos bancos. Registro consolidado em projetos/autorais.md.

Decisões de tradução para o contrato. O gráfico virou duas barras em scaleX numa custom property, e não SVG, porque não há eixo, série nem caminho a desenhar. O ITCMD ficou nos dois cartões, com o mesmo valor, por compliance antes de por desenho. O prazo virou faixa. A contagem só existe num número, o da diferença — seis contagens simultâneas viram ruído. O estado vive em memória, sem localStorage. E a cor de marca entra sempre misturada com --fg, nunca pura, porque a dobra é clara.

Medições (Chrome headless, bin/medir.js). Desktop 1440×900: dobra 1602px, overflowX ok, console limpo, cartões 532×559 com os dois totais no mesmo top (930). Tablet 820: controles em duas colunas, patrimônio ocupando a fileira inteira (677px), cartões empilhados. Mobile 390: dobra 2676px, uma coluna, cartões 350×656, overflowX ok. Teclado: os quatro controles respondem a seta, Enter e Espaço, com :focus-visible em solid 2px offset 3px nos quatro. --reduce: transição da barra em 0s, filter:none no [data-rv], diferença escrita no valor final no mesmo tique. Aritmética conferida nos oito estados: parcelas somando o total exibido e diferença igual à subtração.