Planos de honorários com alternância

Três colunas lado a lado, cada uma um modelo de relacionamento da casa: nome, para quem é, a faixa de patrimônio de entrada, o honorário em faixa e a lista do que está incluído. Uma delas tem um filete na cor de marca no topo, uma pílula de contorno com um recado editorial e um véu de elevação — destaque discreto, sem escala maior e sem caixa berrante. Acima das colunas, uma alternância em pílula troca o conjunto inteiro entre "Pessoa física e família" e "Empresa e holding": o que sai desaparece com blur e subida curta, o que entra vem com blur a zero, coluna a coluna. As linhas equivalentes das três colunas ficam na mesma altura — o terceiro item de uma lista alinhado com o terceiro das outras duas —, e é isso que permite ler na horizontal e comparar.

O problema editorial é o de explicar como a casa cobra sem virar tabela de preço. Uma assessoria independente não vende plano: vende um modelo de relacionamento, cuja remuneração é uma taxa previamente acordada sobre o patrimônio sob assessoria, sem comissão por produto. Esse argumento — o da independência — só aparece quando as três colunas o repetem na mesma linha, e não quando ele vira um parágrafo solto embaixo. E como honorário de assessoria é terreno regulado, a forma da peça sai daí e não do gosto: faixa e nunca número cravado, premissa visível ao lado dos números, serviço comparado e resultado jamais.

Quando usar

• Na segunda metade da página, depois de a proposta estar apresentada e antes do bloco de conversão. É a dobra que responde "e quanto custa isso" sem que a pessoa tenha de perguntar.
• Quando a casa tem dois a quatro modelos de relacionamento de verdade, diferentes em profundidade de acompanhamento e em estrutura exigida — não três embalagens do mesmo serviço.
• Quando o público se divide em dois mundos que pedem números diferentes (pessoa física e empresa, por exemplo). A alternância existe para isso: dois conjuntos completos, um controle, nenhuma página nova.
• Uma vez por página.

Quando não usar

• Quando o que se quer comparar são critérios em linhas contra abordagens em colunas — "quem custodia", "quem decide", "com que frequência" contra "banco", "corretora", "assessoria independente". Isso é matriz, e é o listas/tabela-comparativa. A diferença não é de desenho, é de pergunta: a matriz responde "qual é a diferença entre esses caminhos"; esta peça responde "qual desses é o meu". A matriz pode ter sete linhas e nenhuma delas ser um botão; aqui toda coluna termina num botão, porque a peça existe para alguém se reconhecer e seguir.
• Quando a pergunta é quanto custa cada modelo de remuneração ao longo do tempo: dados/comparador-cenarios faz a aritmética de custo acumulado, com premissas declaradas e controles de faixa. Aquilo é ferramenta; isto é escolha. Cabem na mesma página, e a ordem natural é comparador primeiro, planos depois.
• Quando a casa não publica faixa nenhuma. Sem número, as colunas viram três listas de serviço, e aí o componente certo é uma grade comum de cards — conteudo/grid-entidades ou conteudo/pilares-texto-na-foto.
• Como abertura de página, e com mais de quatro colunas. Acima de quatro, a coluna fica estreita demais para a frase de "para quem é" e a peça vira planilha.

Padrão editorial

O que mantém a peça coesa: as três colunas têm de ser comparáveis frase a frase. Se uma tem "Para famílias que já dividem o patrimônio entre instituições" e a outra tem "Simplicidade", a comparação horizontal morre e sobram três cards soltos. Escreva as três listas em coluna, item a item, antes de escrever o markup.

Especificação dos assets

Nenhum. A peça é tipografia, filete e um véu — não há imagem, ícone nem logo, e isso é a forma: ícone em coluna de plano vira decoração de tabela de SaaS, que é exatamente o registro que esta peça evita. O que a seção precisa é de largura (a 1440 cada coluna mede 344px) e de uma âncora de destino para o href="#conversa" dos botões.

Compliance

Honorário de assessoria é terreno regulado, e é o compliance que desenha esta peça — não o contrário. O que o consumidor tem de rever com a área técnica do cliente antes de publicar:

1. Os doze números. Seis faixas de patrimônio de entrada e seis faixas de honorário, todas ilustrativas. Vivem em dois lugares por coluna e só ali, sempre dentro de <span class="plan-num">: .plan-entrada e .plan-fee. O cabeçalho do markup.html diz isso em voz alta — quem for publicar troca doze spans e acabou.
2. Faixa, nunca linha única. "A partir de", "Entre X e Y". Um percentual cravado lê como tabela de preço fechada, e honorário de assessoria não é. Se o cliente não puder publicar percentual nenhum, troque o conteúdo de .plan-num por "Sob proposta" e mantenha o resto — a peça continua de pé, e a comparação passa a ser só de serviço.
3. A premissa fica na peça. O .plan-premissa vive acima das colunas, antes dos números, e diz base de cálculo, periodicidade, regressividade e a ausência de comissão. Não é rodapé, não é asterisco e não é title. Uma peça de honorário que esconde a premissa é propaganda, não informação.
4. A ressalva fica onde a pessoa lê o número. O .plan-nota fecha o mesmo bloco de leitura: faixas ilustrativas, honorário final em proposta, dependente da complexidade, acordado em contrato antes de qualquer aplicação, e nada ali é oferta, recomendação ou promessa de resultado.
5. O que se compara é serviço e remuneração — nunca resultado. Nenhuma coluna pode citar rentabilidade, retorno, desempenho passado ou meta. Nem no nome, nem na frase de "para quem é", nem na lista. A tentação aparece na coluna de cima da faixa; ela é onde o texto tem de ser mais seco.
6. O destaque é editorial e qualificado. "Mais procurado por famílias em sucessão" diz um fato sobre a base de clientes. "O melhor plano" e "Mais popular" são juízo de valor e comparação implícita — fora. Se o compliance do cliente não aceitar nem o qualificado, existe a variação sem destaque nenhum, e ela não perde a comparação: quem compara é o alinhamento das linhas.
7. A voz. Nenhum superlativo de mercado, nenhum nome de instituição real, nenhum logo. O modelo de remuneração é dito por extenso — taxa previamente acordada sobre o patrimônio sob assessoria, sem comissão por produto — porque é ele o argumento, e ele é verificável.

Dado pessoal. A peça não coleta nada e não grava nada: a escolha entre os dois conjuntos vive no próprio <input type="radio"> e morre no recarregamento. Sem localStorage, sem cookie, sem envio. Quem coleta é o conversao/cta-formulario-lead, para onde os botões apontam.

Como usar

<link rel="stylesheet" href="componentes/conversao/planos-honorarios/estilo.css">
<script src="componentes/conversao/planos-honorarios/script.js" defer></script>

O script lê LIB.reduce do core/motion.js, e a página precisa de uma âncora #conversa.

Ganchos

Variações

• um conjunto só — apague um .plan-grupo e a .plan-switch. O script sai em silêncio antes de pôr .is-live, e a peça vira três colunas fixas sem uma linha de CSS a mudar.
• três conjuntos — mais um .plan-grupo e mais um <label> na alternância. O script casa value com data-plan-grupo e não conta dois.
• quatro colunas — repeat(4,…) em --plan-cols. O alinhamento por subgrid não conta colunas.
• lista com outro número de itens — pede três números acertados juntos: o repeat(12,auto), o grid-row da lista e o grid-row do botão.
• em seção clara — .sec-paper ou .sec-light no lugar de .sec-deep; confira o contraste do filete de topo em --accent.
• sem destaque nenhum — apague is-destaque e a .plan-tag. Para o compliance que não aceita nem destaque editorial.
• sem reveal de entrada — apague o data-rv do .plan-quadro; a peça passa a valer sem depender do @media (scripting: none) do core.

Gotchas

• O alinhamento das colunas é subgrid, e altura fixa não substitui. O conjunto declara doze faixas; cada coluna ocupa todas elas com grid-template-rows:subgrid, e a lista "o que inclui" é um segundo subgrid encaixado nas faixas 7 a 11 — é ele que alinha o terceiro item de uma coluna com o terceiro das outras duas mesmo quando um deles quebra em duas linhas. Medido a 1440, nos dois conjuntos: nome, entrada, honorário, rótulo da lista, os cinco itens e o botão com o mesmo top nas três colunas (1066, 1131, 1195, 1260, 1324 para os itens; 1397 para o botão). Altura fixa acertaria hoje e erraria na primeira reescrita de texto, na primeira troca de tema e na primeira tradução.

• A coluna não pode ter padding vertical, e essa é a armadilha do subgrid. Padding, borda e margem no eixo subgridado deslocam as faixas e desalinham as colunas. Medido: bastou padding-block:24px na coluna do meio para o botão dela subir 24px em relação aos outros dois (1421 contra 1445). Por isso a coluna só tem padding-inline, o respiro vertical vem das margens dos próprios itens de linha, e a superfície visual é um ::before posicionado — que transborda para fora da área de grade sem participar dela. Quem "consertar" isso pondo padding na coluna quebra exatamente o que a peça existe para entregar.

• .plan [hidden]{display:none} no topo do arquivo não é redundância. O [hidden] do navegador vive na folha do agente do usuário, e qualquer regra de autor com display a vence — inclusive o display:flex da alternância. Medido: sem essa linha, a .plan-switch com o atributo hidden continua na tela, display:flex e 50px de altura, para quem não tem JavaScript — um controle morto, visível, que não troca nada. Com a linha, display:none e zero. É a mesma pegadinha que sete outros componentes da casa documentam.

• O data-rv fica no invólucro, e nunca dentro dos conjuntos. O reveal do core é IntersectionObserver: ele dispara uma vez, desobserva, e um bloco que nasce [hidden] nunca intersecta. Um data-rv dentro do segundo conjunto ficaria em opacity:0 para sempre — e só apareceria quebrado no dia em que alguém clicasse na alternância. O data-rv mora no .plan-quadro, que está sempre visível; a entrada escalonada das colunas é transição própria, ligada por classe.

• A alternância é um grupo de radio de verdade, e não um role="tablist". É uma escolha entre dois conjuntos mutuamente exclusivos — o que um grupo de radio já é —, e as setas do teclado vêm do comportamento nativo: a seta move o foco e marca junto, o change dispara, o conjunto troca. Medido: Tab do corpo cai no radio marcado (foco visível, 2px em --accent, numa caixa de 183×40 que é exatamente a caixa da pílula), → troca para "Empresa e holding" e o anúncio sai. Um tablist pediria roving tabindex escrito à mão para chegar no mesmo lugar, e ainda prometeria painéis de aba que estes conjuntos não são.

• O radio está esticado sobre o rótulo com appearance:none, e não escondido com opacity:0. Com opacity:0 o anel de foco some junto com o widget. Do jeito que está, o :focus-visible do core desenha em volta da pílula inteira — medido, a caixa do input e a do rótulo têm exatamente a mesma medida. E não há for/id: o id colidiria se o componente aparecesse duas vezes na página.

• O name dos radios é reescrito pelo script, com um sufixo por instância. Dois componentes na mesma página têm o mesmo name no markup, e dois grupos de radio com o mesmo nome viram um grupo: marcar a alternância de baixo apagaria a de cima. O script resolve na inicialização, e não no markup, porque o markup é o mesmo trecho colado duas vezes.

• O estado sem JavaScript é o estado de PARTIDA do markup. Os dois conjuntos nascem visíveis, empilhados, cada um com o seu subtítulo; quem esconde um deles é o script. Medido no Chrome com JavaScript desligado de verdade (não com o <script> removido): os seis nomes de modelo, os dois subtítulos e os seis botões com caixa pintada, e todo nó com estilo computado em opacity:1 / filter:none — o @media (scripting: none) do core devolve o data-rv. Sem script: seção de 2596px contra 1689px com script, nenhum estouro horizontal, a alternância em display:none.

• Os subtítulos dos conjuntos são escondidos pelo script, e o nome acessível não depende deles. Com a alternância acesa dizendo "Pessoa física e família" dois centímetros acima, repetir a mesma frase logo abaixo lê como erro de montagem. Quem some é o subtítulo, nunca o conteúdo — e o nome do conjunto para quem ouve a página mora no aria-label do próprio .plan-set, que não some nunca.

• A troca é sequencial, e não sobreposta. O conjunto que sai só é escondido depois dos 260ms de saída; só então o que entra aparece. Sobrepor os dois faria a página crescer o dobro da altura por um quarto de segundo, e a dobra inteira saltaria sob quem está lendo. O preço é uma pausa curta com o vão vazio — e uma segunda troca disparada antes do fim (segurar a seta do teclado) fecha a pendente na hora, em vez de deixar dois conjuntos no ar. Medido: 120ms depois do clique, o conjunto que sai está em opacity 0.075 com .is-out; ao fim, o que entra está hidden:false, com .is-in e as três colunas em opacity 1.

• Em movimento reduzido a troca continua acontecendo — sem a fase animada. O que a pessoa pediu não se desliga; o que anda sozinho, sim. Medido com prefers-reduced-motion: reduce: transition-duration: 0s nas colunas, nenhum .is-out, conjunto trocado em menos de 60ms e o anúncio em aria-live no lugar.

• O row-gap do conjunto é zero, e o respiro vem das margens. Com subgrid, faixa vazia mais row-gap abriria vão morto em toda coluna que não usa aquela faixa — a pílula, por exemplo, só existe numa das três, e as outras duas ganhariam um buraco. Com row-gap:0 a faixa vazia custa exatamente zero, e o respiro fica onde ele é decidido: na margem de cada item de linha.

• A degradação sem subgrid é empilhar, e é decisão consciente. Chrome 117, Firefox 71 e Safari 16 em diante têm subgrid. Antes disso, alinhar colunas exigiria altura fixa — que mente —, então o @supports not (grid-template-rows:subgrid) liga a mesma forma do celular: cada coluna lida sozinha, de cima a baixo, com o destaque reconhecível pelo filete de topo. As declarações repetem as do @media de propósito: @media e @supports não se combinam num seletor só.

• No celular o separador vira filete de topo, e o destaque continua reconhecível. Medido a 390: as três colunas empilhadas em top 731, 1533 e 2372, cada uma com 350px de largura, zero estouro horizontal, a coluna de destaque com 2px de --accent no topo e as outras com 1px de --rule. A alternância quebra em duas linhas e ocupa a coluna inteira.

• Isto não é a matriz de comparação. listas/tabela-comparativa (prefixo tab-cmp-) põe critérios em linhas e abordagens em colunas, numa <table> de verdade com caption e escopo, para explicar a diferença entre caminhos; esta peça põe modelos em colunas, em grade, para alguém escolher o seu. Sintoma de estar usando a errada: se as colunas não terminam em botão, é matriz; se as linhas não são critérios paralelos comparáveis célula a célula, é planos. As duas cabem na mesma página, nesta ordem — a matriz explica o mercado, os planos oferecem o lugar da pessoa dentro dele.

Histórico

Origem. Não há referência única e não há uma linha copiada. O padrão — três colunas de oferta lado a lado, uma destacada, e um alternador que troca o conjunto inteiro — aparece em três famílias de site: página de preços de SaaS (o alternador mensal/anual), página de planos de operadora e de banco (pessoa física/pessoa jurídica) e página de serviços de escritório profissional. O que a biblioteca tirou de todas foi a forma da tela, não o código. O registro consolidado vai em projetos/autorais.md.

Decisões da tradução para o contrato e para o ramo:

• A peça deixou de ser tabela de preço e virou explicação de modelo de remuneração. Faixa e nunca número cravado; premissa acima dos números, dentro da peça; ressalva no fim do mesmo bloco de leitura; serviço e remuneração comparados, resultado jamais; destaque editorial qualificado no lugar de "mais popular". Ver Compliance.
• O alinhamento horizontal é subgrid encaixado em subgrid, e a coluna abriu mão de padding vertical por causa disso — a superfície visual virou um ::before posicionado.
• A alternância é grupo de radio, não tablist: as setas do teclado vêm do comportamento nativo, e o change é o único evento escutado.
• Zero cor crua: filetes, rótulos, número e ressalva leem --rule, --rule-2, --fg, --fg-2, --fg-muted e --accent do escopo da seção; a superfície do destaque é color-mix sobre --accent e --fg, e a sombra lê --dark-rgb.
• Primitivas do core consumidas em vez de recopiadas: .sec-head, h2.sec-title, .sec-lead, .eyebrow, .pill/.pill-accent (a pílula do destaque), .btn/.btn-primary/.btn-ghost, .visually-hidden (a região aria-live) e .nota (a ressalva).
• O respiro entre os dois conjuntos empilhados sai de calc(var(--sec-gap) * .42) — a fonte única do ritmo vertical (§4), não um clamp solto.
• Movimento: entrada do quadro pelo data-rv do core; troca de conjunto por transição própria com filter:blur() indo a zero, como o §5 exige; e nada anda sozinho em prefers-reduced-motion.
• Acessibilidade que o padrão original raramente traz: cada conjunto é um role="group" com aria-label que sobrevive ao subtítulo escondido, a troca é anunciada em role="status", o conjunto fora de cena vai com hidden (nunca só opacity, que deixaria seis links tabuláveis e invisíveis) e o percurso de teclado é curto — um Tab até a alternância, setas para trocar, três Tab para os três botões da coluna visível.

Divergências conhecidas vs. produção: nunca rodou num site. Espere ajuste no primeiro uso real, principalmente nos textos das listas — é o paralelismo entre elas que sustenta a leitura horizontal, e ele é a primeira coisa que se perde quando o cliente reescreve uma coluna sozinha.