Comparador de cenários de custo

Dobra-ferramenta. Cabeçalho centrado e, abaixo, um painel com duas faixas de controle — patrimônio de R$ 1 mi a R$ 50 mi, horizonte de 1 a 20 anos —, um gráfico de oito barras verticais distribuídas em quatro marcos de tempo, a leitura em três números do horizonte escolhido, a linha de premissas em uso e a tabela com o custo acumulado de cada marco. Mover qualquer das duas faixas redesenha as barras e reescreve os quinze números da peça; os três do resumo contam até o valor novo.

Resolve, com forma, o argumento comercial que a biblioteca só sabia dizer em adjetivo: a diferença entre cobrar uma taxa previamente acordada e cobrar uma comissão embutida no produto. Escrito em texto, "somos fee-based" é uma afirmação sobre nós; desenhado, é uma conta que a pessoa refaz. O que se compara é custo — nunca resultado, nunca patrimônio final, nunca "quanto você teria a mais". Custo é aritmética verificável a partir de premissas declaradas; resultado seria promessa, e promessa não pode entrar em site de assessoria.

Quando usar

• Na página de "como cobramos" ou de honorários, logo depois do texto que explica o modelo — a peça é a prova do parágrafo anterior.
• Quando a assessoria tem a taxa e a política de remuneração fechadas e pode publicá-las. Sem números que o compliance aprove, a peça não existe.
• Em página de captação em que a independência é o argumento central, junto de prova/stats-contador-regua e antes de conversao/cta-formulario-lead.
• Quando o público tem patrimônio o bastante para que a diferença seja visível: abaixo de R$ 1 mi a distância entre os dois modelos fica pequena na tela e o argumento enfraquece.

Quando não usar

• Quando o cliente não é fee-based, ou é misto. A peça é uma acusação a um modelo de remuneração; usá-la sem estar do lado certo dela é tiro no pé.
• Para explicar composição de carteira, alocação ou território: isso é dados/diagrama-hub e dados/globo-canvas.
• Para mostrar número já consolidado, sem interação — patrimônio sob gestão, anos de casa: prova/stats-contador-regua, que conta e não pergunta nada.
• Para coletar dado da pessoa. Esta peça não coleta nada e não grava nada; a captura é do conversao/cta-formulario-lead, para onde o botão do fim aponta.
• Quando a página já tem outra ferramenta interativa na mesma rolagem. Duas peças que pedem para serem mexidas competem, e nenhuma das duas é usada.

Padrão editorial

Especificação dos assets

Nenhum. Não há foto, ícone, logo nem SVG externo: o gráfico são oito <span> escalados por CSS, e todo o resto é texto. O que a peça pede no lugar de asset são números aprovados: os percentuais da política de remuneração do cliente, a data em que foram aprovados e a redação da ressalva revisada pelo compliance dele. Sem isso a peça não entra no ar.

Compliance

Esta é a seção que decide se a peça pode ser publicada. O consumidor tem de fazer as quatro coisas abaixo, e nenhuma delas é opcional.

1. Trocar as premissas. A tabela PREMISSAS no topo do script.js (faixas da taxa acordada, percentual médio de comissão, repasse de rebate) é conteúdo ilustrativo. Substituir pelos números do cliente e datá-los na ficha do projeto. Reavaliar a cada revisão de tabela de honorários.
2. Refletir a troca na linha visível. A .duo-cmp-premissas do markup repete os mesmos percentuais em texto. Trocar o script sem trocar a linha faz a peça mostrar uma conta que ela mesma desmente — é o pior defeito possível aqui, porque é invisível para quem revisa só o texto.
3. Manter a fronteira custo × resultado. Nada na peça pode virar patrimônio final, rentabilidade, "você teria a mais" ou comparação de retorno. O patrimônio entra constante de propósito: fazê-lo crescer transformaria a comparação de custo em projeção de rentabilidade. Se alguém pedir "mostra também quanto rende", a resposta é não — e é a ficha que registra por quê.
4. Passar a ressalva pelo compliance do cliente. O texto de .duo-cmp-nota diz simulação ilustrativa, sem projeção de rentabilidade, sem imposto e sem recomendação de investimento. Ele fica onde a pessoa lê o resultado, não no rodapé.

Além disso, e já resolvido no componente: nenhum nome de instituição real, nenhum superlativo de mercado, nenhum dado da empresa apresentado como auditado, nenhum dado pessoal coletado e nada gravado — sem localStorage, sem cookie, sem envio. Os dois números vivem em memória e morrem no recarregamento.

Como usar

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

A seção declara .sec-dark; o painel se resolve sozinho em qualquer escopo, porque o fundo dele é color-mix sobre --fg. Os dois id (duo-cmp-patrimonio e duo-cmp-anos) existem para os <label> e são únicos na página: duas dobras destas na mesma página pedem renumeração.

Ganchos

Variações

• com repasse de rebate — PREMISSAS.repasse:0.35 e a mesma informação na linha visível.
• taxa linear em vez de regressiva — uma faixa só. A conta fica mais fácil de explicar e o controle de patrimônio deixa de mudar a forma do gráfico.
• sem a tabela — só com o aria-hidden do quadro removido e o valor de cada barra visível: a tabela é a leitura acessível.
• horizonte de 30 anos — max="30" e ESCADA:[1,5,10,20,30]. Os marcos passam a 5/10/20/30.
• em dobra clara — .sec-light na seção; confira só o contraste da série de comissão.

Gotchas

• As premissas moram em dois lugares e têm de ser trocadas nos dois. PREMISSAS, no topo do script.js, faz a conta; a linha .duo-cmp-premissas, no markup, diz à pessoa qual conta está sendo feita. Trocar uma sem a outra produz uma peça que mente com números certos — e ninguém percebe, porque as duas metades continuam plausíveis sozinhas. Se um dia isso puder ser uma fonte só, será o script escrevendo a linha; hoje ele escreve apenas a taxa efetiva ([data-duo-cmp-rate]), que é a única parte que muda com o controle.
• A escala é relativa, e é por isso que o controle de patrimônio move só metade das barras. O topo do quadro é o custo do modelo de comissão no último marco, então a barra cinza do fim está sempre cheia. Medido a 1440: mover o horizonte de 20 para 12 anos muda 6 das 8 alturas (6,7 → 11,1 px; 13 → 21,7; 33,4 → 55,7; 65 → 108,3; 66,9 → 111,4; 130 → 216,7; as duas do último marco ficam em 133,7 e 260 por construção); mover o patrimônio de R$ 5 mi para R$ 30 mi muda as 4 barras de taxa (6,7 → 4,5; 33,4 → 22,6; 66,9 → 45,2; 133,7 → 90,4) e nenhuma das de comissão. Não é defeito: custo de comissão é linear no patrimônio, então ele não pode se mover contra si mesmo. O que a pessoa vê é a barra de taxa afundando conforme o patrimônio sobe, que é exatamente o argumento — e o número do topo da escala (R$ 2,10 mi → R$ 12,60 mi) é o que impede a leitura de "não mudou nada".
• toFixed(2) arredonda, e às vezes o topo da escala mente por R$ 5 mil. Com 19 anos e R$ 5 mi o teto é R$ 1.995.000 e sai escrito "R$ 2,00 mi". É arredondamento honesto de duas casas em milhão, e a tabela logo abaixo traz o valor de cada marco com a mesma regra — mas quem for comparar com uma planilha vai encontrar essa diferença antes de encontrar qualquer outra.
• A barra tem piso de altura, e sem ele "quase zero" leria como "zero". PISO = 0.012 — 3,1px num quadro de 260. Com a escada e o horizonte de fábrica ele nunca chega a valer: a menor barra possível é 0,0161 (taxa acordada no ano 1 de um horizonte de 20, com R$ 50 mi — medido em 4,2px), e o cenário padrão fica em 6,7px. Ele existe para a variação de 30 anos, onde a mesma barra cai para 0,0108 e passaria a sumir. Quem tirar o piso ganha exatidão de pixel e perde a informação de que existe custo ali.
• display escrito pelo componente vence o [hidden] da folha do navegador. .duo-cmp-group tem display:flex, que é regra de autor e passa por cima do [hidden]{display:none} da folha do agente, que é de origem mais fraca. Sem a linha .duo-cmp-group[hidden]{display:none}, esconder um marco pelo atributo não faria absolutamente nada — e o horizonte de 5 anos mostraria quatro marcos, dois deles do cenário anterior. A tabela não precisa da mesma linha porque o CSS nunca escreve display em .duo-cmp-tr.
• O <fieldset> nasce disabled de propósito, e quem o libera é a última linha do init. Sem script, a peça não é casca: os controles ficam visivelmente inertes (opacidade .42, cursor not-allowed), o aviso .duo-cmp-fallback aparece pelo seletor :disabled + …, e o cenário padrão continua desenhado — as oito alturas estão no style de cada barra e os quinze números estão no HTML. Medido removendo o <script src="script.js"> de uma cópia: barras em 6,8 / 13 / 33,5 / 65 / 66,8 / 130 / 133,6 / 260 px (contra 6,7 / 13 / 33,4 / 65 / 66,9 / 130 / 133,7 / 260 com script — a diferença é o arredondamento de três casas do markup), tabela e resumo idênticos, página 38px mais alta por causa do aviso. A alternativa — deixar a faixa habilitada — daria controles que se movem sem efeito, que é mentir.
• O atraso de entrada das barras tem de morrer no primeiro toque. --duo-cmp-d escalona a entrada em até .28s, o que é bonito uma vez e insuportável a partir da segunda: sem a classe .is-live, cada movimento da faixa responderia com até 280ms de sono. .is-live zera o atraso e encurta a duração de .7s para .45s — a entrada é espetáculo, a resposta ao controle é ferramenta.
• A regra de movimento reduzido precisa da mesma especificidade das outras duas. .duo-cmp-plot.in .duo-cmp-bar e .duo-cmp-plot.is-live .duo-cmp-bar são (0,2,0). Um @media(prefers-reduced-motion) escrito como .duo-cmp-bar{transition:none} — (0,1,0) — seria vencido pelo transition-duration do .is-live, e a barra voltaria a animar depois do primeiro toque, só para quem pediu que ela não animasse. Por isso a regra lá está escrita .duo-cmp-plot .duo-cmp-bar, e por isso ela vem depois das duas. Medido com --reduce: barra no valor final já no quadro 0, e o número do resumo salta direto para R$ 11,22 mi em vez de contar (contra R$ 4,15 mi no quadro 2 e R$ 10,44 mi aos 120ms sem a preferência).
• Abaixo de 560px o quadro passa a três marcos, e quem decide é o script. Quatro grupos de duas barras em 308px de quadro deixariam cada barra com ~12px. Com três, elas ficam em 27,3px — medido a 390. Quem sai é o marco mais antigo (o "ano 1"), porque a escada guarda os últimos que couberem, e a tabela acompanha: são três linhas, não quatro. Se isso for perda inaceitável para um cliente, o caminho é subir o limiar da media query e o do matchMedia do script — os dois leem 560, e separá-los faz o quadro e a tabela discordarem. Entre 560 e ~640 as barras ficam no piso de 18px do clamp — legíveis, mas no limite; é a faixa mais apertada da peça. A tabela, essa, nunca espreme: as células são nowrap e ela rola dentro do .duo-cmp-scroll — a 320px ela mede 270 numa caixa de 223 e rola 47px, em vez de passar por cima da borda do painel.
• O <output> é aria-hidden e quem fala é o aria-valuetext. Um range anuncia "5", sem unidade; o aria-valuetext o faz anunciar "5 milhões de reais" e "20 anos". Sem esconder o <output>, o leitor de tela diria o valor duas vezes a cada seta. E o resultado não fica numa região viva direta: durante o arrasto ele muda dezenas de vezes por segundo, então o anúncio espera 700ms de silêncio e sai de uma vez, numa frase só, do [data-duo-cmp-live].
• Nada é gravado, e isso é decisão, não esquecimento. Sem localStorage, sem cookie, sem envio: são dados financeiros de quem está lendo, e a captura é trabalho do conversao/cta-formulario-lead. Quem "melhorar" a peça guardando o último cenário passa a manter dado financeiro no navegador de terceiro sem consentimento nenhum.
• A tabela não é redundância. O quadro leva aria-hidden porque é a ilustração; a tabela é o dado, com cabeçalho de linha e de coluna. Quem apagar a tabela para "enxugar" tem de tirar o aria-hidden e pôr o valor de cada barra como texto visível — senão quem usa leitor de tela fica com dois controles e nenhum resultado.

Histórico

Origem. Não há referência única. O padrão — dois ou três controles deslizantes que redesenham um gráfico simples e uma leitura em número — é recorrente em site de instituição financeira: calculadora de aposentadoria de gestora de fundos, comparador de taxa de corretora independente, simulador de portfólio de banco digital. Nenhuma linha veio de lugar nenhum: a forma foi decidida aqui, a partir do argumento comercial que a biblioteca precisava saber desenhar. Status externo — nunca rodou em produção. O primeiro site que usar promove, e a ficha registra qual foi. O registro consolidado vai em projetos/autorais.md.

Decisões de tradução para o contrato:

• Gráfico em DOM, não em SVG. O §3 do brief de ferramentas pede SVG contra canvas, e o que se evitava era o pixel do canvas — que aqui não entra. São oito elementos, cada um precisando de transição própria em transform e de uma variável escrita no style; em SVG isso seria <rect> com a mesma quantidade de código e sem ganho nenhum. O que a regra realmente exige — forma que escala, cor de token, dado inspecionável e leitura em texto — está tudo de pé.
• Escala relativa com o topo escrito, em vez de eixo absoluto. Um eixo fixo na amplitude inteira dos controles (R$ 50 mi × 2,1% × 20 anos = R$ 21 mi) deixaria o cenário padrão com a barra mais alta em 10% do quadro.
• Patrimônio constante no tempo, sem capitalização — ver Compliance.
• transform:scaleY() com transform-origin:bottom, como o §3 manda, e o desfoque de entrada vindo do data-rv do core no quadro inteiro, em vez de um filter por barra: oito filtros animando juntos custam caro e o efeito visual é o mesmo.
• Movimento por tempo, com teto de 50ms de dt, e um requestAnimationFrame por instância que dorme quando os três números chegam ao alvo.
• Nenhum !important, nenhum seletor de elemento, nenhuma cor crua. Os pseudo-elementos de faixa (::-webkit-slider-thumb, ::-moz-range-track) são a única coisa que o contrato não previa, e ficam presos à classe .duo-cmp-range.

Proposta para o core. A classe de texto só para leitor de tela (.duo-cmp-sr — position:absolute, 1×1px, clip-path:inset(50%), white-space:nowrap) já existe recopiada em midia/carrossel-anel-3d e em midia/galeria-pasta. Com esta, são três — que é exatamente o limiar do §6 do contrato para promover a primitiva. Sugestão: .sr no core/base.css, e os três componentes passam a lê-la.