/* ==========================================================================
   PLANOS DE HONORÁRIOS — prefixo plan-
   Três modelos de relacionamento lado a lado, com alternância entre dois
   conjuntos (pessoa física e família / empresa e holding).

   Tokens usados:
     --accent           filete da coluna de destaque, pílula, botão primário
     --dark             tinta do texto sobre a pílula acesa e sombra da coluna
     --dark-rgb         a mesma sombra, em rgba() lendo token
     --display          face dos nomes, dos valores e da alternância
     --sans             face do texto corrido e dos rótulos
     --ease             curva única do projeto
     --fg --fg-2        tinta do nome e do texto de apoio
     --fg-muted         rótulos, ressalva, premissa
     --rule --rule-2    filete entre colunas e divisórias internas
     --radius-media     canto da superfície da coluna (0 em projeto flat)
     --radius-pill      só via .btn e .pill do core
     --sec-gap          respiro derivado, nunca clamp solto

   O ALINHAMENTO É A PEÇA. Os itens equivalentes das três colunas ficam na
   MESMA linha — é isso que permite ler na horizontal e comparar. O mecanismo
   é `subgrid`: o conjunto (.plan-set) declara doze linhas, cada coluna
   (.plan-col) ocupa todas elas com `grid-template-rows:subgrid`, e a lista
   "o que inclui" (.plan-inclui) é um segundo subgrid encaixado nas linhas 7
   a 11. Altura fixa NÃO resolveria: a altura de cada linha depende de quantas
   linhas o texto quebra, o que muda com o tema, com a largura e com a
   tradução.

   O QUE ISSO COBRA, e é a armadilha do subgrid: padding, borda e margem no
   EIXO SUBGRIDADO deslocam as faixas e desalinham as colunas. 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 da coluna é um ::before
   posicionado, que pode transbordar para fora da área de grade sem mexer em
   linha nenhuma.

   AS DOZE LINHAS, e mexer numa pede mexer nas três:
     1 pílula · 2 nome · 3 para quem · 4 patrimônio de entrada · 5 honorário
     6 rótulo da lista · 7–11 os cinco itens · 12 botão
   Trocar o número de itens da lista pede acertar `repeat(12,auto)` aqui, o
   `grid-row` da lista e o `grid-row` do botão. Não dá para derivar de uma
   variável: `repeat()` exige inteiro literal, e nenhum navegador aceita
   var() na contagem de faixas.

   O QUE ESTE ARQUIVO NÃO FAZ: esconder conjunto. Quem esconde é o script,
   com [hidden], e é por isso que sem JavaScript os dois conjuntos aparecem
   empilhados. Toda regra de troca vive sob .plan.is-live — classe que só o
   script põe.
   ========================================================================== */

.plan{
  /* Respiro interno da coluna. O horizontal é padding de verdade; o vertical
     NÃO pode ser (ver o cabeçalho), então vira o transbordo do ::before. */
  --plan-pad-x:clamp(16px,1.7vw,28px);
  --plan-pad-y:clamp(24px,2.6vw,36px);

  /* Vão entre colunas. */
  --plan-gap:clamp(16px,2.2vw,34px);

  /* Saída do conjunto que sai. O script lê o MESMO número (SAIDA em
     script.js): mudar aqui pede mudar lá, senão o conjunto some antes ou
     depois da hora. */
  --plan-saida:.26s;

  /* Atraso entre colunas na entrada. 3 colunas x 90ms = .18s de
     escalonamento — o bastante para o olho ver a fileira montar, curto o
     bastante para não virar espera. */
  --plan-escala:90ms;

  /* Largura de leitura da premissa e da ressalva. */
  --plan-prosa:76ch;
}

/* O [hidden] do navegador é display:none na folha do agente do usuário, e
   QUALQUER regra de autor com display vence essa — inclusive o display:flex
   da alternância aqui embaixo. Uma linha, no topo, cobre o componente
   inteiro. */
.plan [hidden]{display:none}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

/* O .sec-title centra pela primitiva .sec-head do core. O apoio daqui não é
   .sec-lead, então a primitiva não o alcança: dentro de um cabeçalho
   centralizado, sem margin-inline a CAIXA dele fica à esquerda e só o texto
   centraliza — o bloco sai torto. */
.plan-head .plan-apoio{margin-inline:auto}

/* ==========================================================================
   A ALTERNÂNCIA
   Grupo de radio de verdade (ver o cabeçalho do markup): as setas do teclado
   andam e marcam junto, que é o comportamento nativo do grupo, e o `change`
   é o único evento que o script escuta.
   ========================================================================== */

.plan-switch{
  /* flex e não inline-flex: é o par width:fit-content + margin-inline:auto
     que centra a pílula. Em inline-flex a margem automática não centra
     nada. */
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  width:fit-content;max-width:100%;
  margin:clamp(26px,3.4vh,42px) auto 0;
  padding:4px;
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
}

/* O <label> é só a caixa de posicionamento; quem desenha a pílula é o
   <span>. Assim o estado marcado sai de `:checked ~ .plan-switch-txt`, sem
   depender de :has() para pintar o rótulo. */
.plan-switch-op{position:relative;display:inline-flex}

/* O RADIO É DE VERDADE e cobre o rótulo inteiro, em vez de ficar escondido
   num canto de 1px. Duas coisas dependem disso: o :focus-visible do core cai
   em volta da pílula, e o clique em qualquer ponto dela chega ao input sem
   precisar de for/id (que se repetiria se o componente aparecesse duas vezes
   na página). appearance:none, e não opacity:0 — com opacity:0 o anel de
   foco some junto com o widget. */
.plan-switch-radio{
  -webkit-appearance:none;appearance:none;
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:none;
  border-radius:var(--radius-pill);
  cursor:pointer;
}

.plan-switch-txt{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:var(--radius-pill);
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-muted);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.plan-switch-op:hover .plan-switch-txt{color:var(--fg-2)}
.plan-switch-radio:checked ~ .plan-switch-txt{background:var(--accent);color:var(--dark)}
.plan-switch-radio:checked ~ .plan-switch-txt,
.plan-switch-op:hover .plan-switch-radio:checked ~ .plan-switch-txt{color:var(--dark)}

/* ==========================================================================
   PREMISSA E RESSALVA
   As duas ficam NO corpo da peça, e não em letra miúda de rodapé: a premissa
   antes dos números, porque é ela que os gera; a ressalva no fim do mesmo
   bloco de leitura, onde a pessoa acabou de ler a faixa.
   ========================================================================== */

.plan-premissa{
  max-width:var(--plan-prosa);
  margin:clamp(24px,3vh,34px) auto 0;
  text-align:center;
  font-size:14px;line-height:1.62;color:var(--fg-muted);
}

/* A tipografia é a da primitiva .nota do core. Fica a posição — e a medida
   pelo parafuso, porque a ressalva divide a largura de prosa com a premissa
   logo acima e as duas têm de quebrar no mesmo lugar. */
.plan-nota{
  --nota-max:var(--plan-prosa);
  margin:clamp(28px,3.6vh,42px) auto 0;
  text-align:center;
}

/* ==========================================================================
   OS CONJUNTOS
   ========================================================================== */

.plan-quadro{margin-top:clamp(26px,3.4vh,40px)}

/* Só vale sem script: com script um conjunto está sempre [hidden], e o vão
   entre eles viraria um vão morto acima do que ficou visível. */
.plan-grupo + .plan-grupo{margin-top:calc(var(--sec-gap) * .42)}
.plan.is-live .plan-grupo{margin-top:0}

/* O subtítulo do conjunto. Existe para o estado SEM script, onde os dois
   conjuntos estão empilhados e precisam de nome; com script o script o
   esconde, porque a alternância acesa já diz a mesma coisa dois centímetros
   acima. O nome acessível do conjunto não depende dele: mora no aria-label
   do próprio .plan-set, que não some. */
.plan-grupo-tit{
  text-align:center;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  margin-top:clamp(20px,2.6vh,30px);
}

.plan-set{
  /* Os seis parafusos da forma. O bloco EMPILHADO no fim do arquivo troca só
     estes valores — é o mesmo conjunto de regras servindo as duas formas, em
     vez de duas listas de layout concorrentes. */
  --plan-cols:repeat(3,minmax(0,1fr));
  --plan-rows:repeat(12,auto);
  --plan-span:1 / -1;
  --plan-sub:subgrid;
  --plan-col-pb:0px;
  --plan-surf:calc(var(--plan-pad-y) * -1) 0;

  display:grid;
  grid-template-columns:var(--plan-cols);
  grid-template-rows:var(--plan-rows);
  column-gap:var(--plan-gap);
  /* Zero, e de propósito: com subgrid, faixa vazia + row-gap abriria vão
     morto em toda coluna que não usa aquela linha (a pílula, por exemplo, só
     existe numa das três). O respiro vertical vem das margens dos itens. */
  row-gap:0;
  /* Cria contexto de empilhamento no conjunto, para o ::before de superfície
     (z-index:-1) parar aqui em vez de mergulhar atrás do fundo da seção. */
  isolation:isolate;
  margin-top:clamp(20px,2.6vh,32px);
}

/* ==========================================================================
   A COLUNA
   ========================================================================== */

.plan-col{
  /* Filete separador (à esquerda) e filete de topo. Ficam em variável, e não
     em regra direta, porque a forma empilhada troca um pelo outro e o
     destaque troca a cor do de cima — resolver isso por variável evita três
     regras concorrentes brigando por ordem no fim do arquivo. */
  --plan-sep:0px;
  --plan-top-w:0px;
  --plan-top-c:var(--rule);

  position:relative;
  display:grid;
  grid-row:var(--plan-span);
  grid-template-rows:var(--plan-sub);
  /* Uma coluna explícita com minmax(0,…): sem ela a faixa implícita é `auto`
     e uma palavra longa (um número, uma URL) estoura a coluna em vez de
     quebrar. */
  grid-template-columns:minmax(0,1fr);
  padding-inline:var(--plan-pad-x);
  padding-block:var(--plan-col-pb);
}
.plan-col:not(:first-child){--plan-sep:1px}

/* A SUPERFÍCIE. Fica num ::before posicionado, e não no fundo da própria
   coluna, por uma razão de subgrid: a coluna não pode ter padding vertical
   sem desalinhar as faixas, e a superfície precisa transbordar para cima e
   para baixo do conteúdo. Um elemento posicionado transborda sem participar
   da grade. */
.plan-col::before{
  content:"";
  position:absolute;inset:var(--plan-surf);
  z-index:-1;
  border-radius:var(--radius-media);
  border-left:var(--plan-sep) solid var(--rule);
  border-top:var(--plan-top-w) solid var(--plan-top-c);
}

/* O DESTAQUE É DISCRETO, e isso é decisão de compliance, não de gosto: um
   filete na cor de marca, a pílula do core e um véu de elevação. Sem escala
   maior, que quebraria o alinhamento das linhas — que é justamente o que a
   peça tem de entregar —, e sem caixa berrante, que leria como "melhor
   plano". O que o destaque diz está escrito na pílula, em texto qualificado. */
.plan-col.is-destaque{
  --plan-sep:0px;
  --plan-top-w:2px;
  --plan-top-c:var(--accent);
}
.plan-col.is-destaque::before{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 58%),
    color-mix(in srgb,var(--fg) 4%,transparent);
  box-shadow:0 30px 70px -34px rgba(var(--dark-rgb),.9);
}

/* -------------------------------------------------------------- as linhas */

.plan-tag{
  grid-row:1;
  justify-self:start;align-self:start;
  margin-bottom:14px;
  /* A pílula do core é caixa alta com tracking largo: numa frase inteira ela
     precisa de entrelinha, senão as duas linhas colam. */
  line-height:1.5;
}

.plan-nome{
  grid-row:2;
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.16;
  color:var(--fg);
}

.plan-quem{
  grid-row:3;
  margin-top:12px;
  font-size:15px;line-height:1.6;color:var(--fg-2);
}

.plan-entrada{
  grid-row:4;
  margin-top:clamp(18px,2.2vw,26px);
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.plan-fee{
  grid-row:5;
  margin-top:14px;
}

.plan-rotulo{
  display:block;
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);
}

/* A FAIXA. É aqui que mora todo número da peça — dois por coluna, doze no
   total. Em display peso 700 porque é o dado que a pessoa veio buscar; na
   cor do texto, e não na de marca, porque cor de marca em número lê como
   oferta. */
.plan-num{
  display:block;
  margin-top:7px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;line-height:1.24;
  color:var(--fg);
}

/* O modelo de remuneração, colado no número. Não é rodapé nem asterisco: a
   pessoa lê "0,6% a 0,9% ao ano" e na linha seguinte lê sobre o que incide. */
.plan-fee-nota{
  display:block;
  margin-top:7px;
  font-size:12.5px;line-height:1.5;color:var(--fg-muted);
}

.plan-inclui-tit{
  grid-row:6;
  margin-top:clamp(18px,2.2vw,26px);
  padding-top:16px;
  margin-bottom:10px;
  border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);
}

/* A LISTA É UM SEGUNDO SUBGRID, encaixado nas linhas 7 a 11 do conjunto. É
   isso que alinha o terceiro item de uma coluna com o terceiro das outras
   duas, mesmo quando um deles quebra em duas linhas e os outros não.
   Sem margin e sem padding: no eixo subgridado eles deslocariam as faixas. */
.plan-inclui{
  grid-row:7 / 12;
  display:grid;
  grid-template-rows:var(--plan-sub);
  grid-template-columns:minmax(0,1fr);
}

.plan-item{
  padding-block:10px;
  border-bottom:1px solid var(--rule);
  font-size:14.5px;line-height:1.5;color:var(--fg-2);
}

/* "Sem comissão por produto" é o último item das seis colunas, sempre com o
   mesmo texto. Alinhado na mesma faixa nas três, ele lê na horizontal como
   uma linha só — que é o argumento da independência, e ele vale mais que
   qualquer superlativo. */
.plan-item-chave{color:var(--fg);border-bottom-color:var(--rule-2)}

.plan-cta{
  grid-row:12;
  align-self:end;
  margin-top:clamp(20px,2.4vw,30px);
  width:100%;
}

/* ==========================================================================
   A TROCA DE CONJUNTO — o movimento da peça
   Tudo sob .plan.is-live: sem script nenhuma destas regras existe, e os dois
   conjuntos ficam empilhados e opacos.
   ========================================================================== */

/* Estado de repouso das colunas com script: invisíveis, esperando o .is-in
   do conjunto. O escalonamento vem de --plan-i, escrito no style de cada
   coluna no markup — o que varia por item mora no item, não numa cadeia de
   :nth-child que se desalinha quando alguém troca a ordem das colunas. */
.plan.is-live .plan-col{
  opacity:0;filter:blur(12px);transform:translateY(16px);
  transition:opacity .6s var(--ease),
             filter .6s var(--ease),
             transform .6s var(--ease);
  transition-delay:calc(var(--plan-i,0) * var(--plan-escala));
}
.plan.is-live .plan-grupo.is-in .plan-col{opacity:1;filter:blur(0);transform:none}

/* Sai junto, sem escalonar: quem sai não precisa ser lido. */
.plan.is-live .plan-grupo.is-out .plan-col{
  opacity:0;filter:blur(12px);transform:translateY(-16px);
  transition-duration:var(--plan-saida);
  transition-delay:0s;
}

/* Movimento reduzido: o conjunto TROCA — a pessoa pediu a troca —, mas não
   anda. Sem esta regra o estado de repouso acima deixaria as colunas
   invisíveis para sempre. Colada à regra que desliga, como manda o §6.5. */
@media(prefers-reduced-motion:reduce){
  .plan.is-live .plan-col,
  .plan.is-live .plan-grupo.is-out .plan-col{
    opacity:1;filter:none;transform:none;transition:none;
  }
}

/* ==========================================================================
   MOBILE
   As colunas empilham. A de destaque continua reconhecível: perde o filete
   lateral e ganha o de topo na cor de marca, mais a mesma superfície.
   ========================================================================== */

@media(max-width:900px){
  .plan-set{
    /* Os mesmos seis parafusos do topo, com os valores da forma empilhada.
       Com --plan-sub:none a coluna vira uma grade comum de faixas
       implícitas e os filhos caem em ordem; os grid-row fixos (a lista em
       7/12, o botão em 12) continuam válidos, e as faixas vazias custam
       zero porque o row-gap da coluna é zero. */
    --plan-cols:minmax(0,1fr);
    --plan-rows:auto;
    --plan-span:auto;
    --plan-sub:none;
    --plan-col-pb:var(--plan-pad-y);
    --plan-surf:0;
    row-gap:clamp(26px,5vw,40px);
  }
  /* O separador vira filete de topo. As duas regras estão aqui embaixo, e
     não em variável no topo, porque só a forma empilhada as usa. */
  .plan-col:not(:first-child){--plan-sep:0px}
  .plan-col:not(:first-child):not(.is-destaque){--plan-top-w:1px}

  .plan-switch-txt{padding:10px 16px;font-size:11px;letter-spacing:.1em}
}

@media(max-width:560px){
  .plan{--plan-pad-x:16px}
  .plan-switch{width:100%}
  .plan-switch-op{flex:1 1 100%}
  .plan-switch-txt{width:100%}
}

/* ==========================================================================
   SEM SUBGRID
   Chrome 117, Firefox 71 e Safari 16 em diante têm subgrid; antes disso o
   alinhamento entre colunas não tem como existir sem altura fixa, e altura
   fixa MENTE — ela para de bater na primeira tradução do texto. A degradação
   honesta é empilhar: cada coluna passa a ser lida sozinha, de cima a baixo,
   que é exatamente a forma do celular.

   As declarações repetem as do @media acima de propósito: @media e @supports
   não se combinam num seletor só, e derivar as duas de uma terceira regra
   custaria mais leitura do que a repetição.
   ========================================================================== */

@supports not (grid-template-rows:subgrid){
  .plan-set{
    --plan-cols:minmax(0,1fr);
    --plan-rows:auto;
    --plan-span:auto;
    --plan-sub:none;
    --plan-col-pb:var(--plan-pad-y);
    --plan-surf:0;
    row-gap:clamp(26px,5vw,40px);
  }
  .plan-col:not(:first-child){--plan-sep:0px}
  .plan-col:not(:first-child):not(.is-destaque){--plan-top-w:1px}
}