/* Componente de planos: alternância de período + os 3 cartões (molde raycast.com/pricing).
   COMPARTILHADO entre planos.html e index.html (Vitrine, dobra 3): as duas páginas são espelho (decisão Ximenes, 22/10).
   Mude aqui e as duas mudam. Preços e ofertas em js/planos-cartoes.js. */
/* alternância de período: o desconto escrito no próprio botão (REF-05) */
.periodo{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.ck-alternar button{all:unset;box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;color:var(--texto-2);cursor:pointer;font:500 14px var(--fonte-display);text-transform:uppercase}
.ck-alternar button:hover{color:var(--texto)}
.ck-alternar button:focus-visible{outline:var(--foco);outline-offset:2px}
.ck-alternar button[aria-pressed="true"]{background:var(--lima);color:var(--texto-na-lima)}
.ck-alternar .desc-pct{font:600 11px var(--fonte-mono);letter-spacing:.04em;padding:2px 6px;background:var(--lima-10);color:var(--lima)}
.ck-alternar button[aria-pressed="true"] .desc-pct{background:rgba(0,0,0,.12);color:var(--texto-na-lima)}
.periodo small{font:400 13px/1.5 var(--fonte-mono);color:var(--texto-meta)}
.periodo,.ck-alternar{max-width:100%}
@media(max-width:599px){
  .ck-alternar button{padding:9px 10px;font-size:13px;gap:6px}
  .ck-alternar .desc-pct{padding:2px 4px}
}

/* aviso de quem chegou pelo app (?entitlement=) */
.veio-do-app{max-width:640px;margin:var(--s3) auto 0;text-align:left}
.veio-do-app[hidden]{display:none}

/* cartões */
/* ---------- cartões no molde do raycast.com/pricing (decisão Ximenes, 21/10) ----------
   Três colunas coladas; o PRO sobe um pouco e fica mais claro. Linhas compartilhadas por subgrid:
   título, faixa do meio, preço e botão caem na mesma altura nos três. */
.cartoes{max-width:var(--largura);margin:clamp(36px,6vh,56px) auto 0;padding:0 var(--margem) var(--secao)}
@media(min-width:960px){.cartoes{padding-left:var(--margem-desk);padding-right:var(--margem-desk)}}
.planos-rc{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.plano{position:relative;display:flex;flex-direction:column;gap:20px;padding:32px;background:var(--superficie-funda);border:var(--linha) solid var(--borda)}
/* no celular o PRO vem primeiro: é o plano que queremos vender (decisão Ximenes, 21/10) */
@media(max-width:959px){.plano.meio{order:-1}}
.plano.meio{background:var(--superficie);border-color:var(--lima-40);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px -30px var(--lima-25)}
@media(min-width:960px){
  .planos-rc{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .plano{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px}
  .plano .faixa{margin-top:14px} /* 30/10: mais respiro entre a descrição e o preço de lançamento, com a copy da K3 (Ximenes); faixa e preço seguem juntos */
  .plano .acao{margin-top:8px}
  .plano:first-child{border-right:0}
  .plano:last-child{border-left:0}
  .plano.meio{z-index:1;margin:-16px 0;padding-top:48px;padding-bottom:48px}
}
.plano>*{min-width:0}
.plano .nome{display:flex;flex-direction:column;gap:6px}
.plano .nome h2,.plano .nome h3{margin:0;font:var(--peso-titulo) 24px/1.2 var(--fonte-display)}
.plano .nome p{margin:0;color:var(--texto-2);font-size:16px;line-height:1.45}
/* faixa do meio: no PRO, as informações do desconto (onde o Raycast põe Pro/Plus/Max); nos outros, vazia */
.plano .faixa{min-height:22px;display:flex;align-items:center}
.lanc-info{display:flex;align-items:center;gap:10px;font:500 14px/1.3 var(--fonte-texto);color:var(--texto-2)}
.lanc-info .pct{flex:none;padding:4px 7px;background:var(--lima);color:var(--texto-na-lima);font:700 12px/1 var(--fonte-mono);letter-spacing:.02em}
.lanc-info b{color:var(--texto);font-weight:var(--peso-forte)}
.ver-lanc{all:unset;cursor:pointer;font:500 14px/1.3 var(--fonte-texto);color:var(--lima)}
.ver-lanc:hover{text-decoration:underline;text-underline-offset:3px}
.ver-lanc:focus-visible{outline:var(--foco);outline-offset:3px}
/* preço: o número grande é sempre por mês; embaixo, o total do período com o valor cheio riscado */
.plano .valor{display:flex;flex-direction:column;gap:8px}
.plano .numero{display:flex;align-items:baseline;gap:10px;font:var(--peso-display) clamp(40px,3.6vw,48px)/1 var(--fonte-display);letter-spacing:-.03em}
.plano .numero .moeda{font:500 18px var(--fonte-mono);letter-spacing:0;color:var(--texto-meta);align-self:flex-start;margin-top:8px;margin-right:-4px}
.plano .numero small{font:400 15px var(--fonte-mono);letter-spacing:0;color:var(--texto-meta)}
.plano.meio .numero [data-mes]{color:var(--lima)}
/* período sem preço aprovado (hoje o semestral do SINKRA Cockpit): diz "a definir" no lugar do número, sem R$ nem / mês */
.plano.sem-preco .numero{font-size:clamp(28px,2.6vw,34px);color:var(--texto-meta)}
.plano.sem-preco .numero .moeda,.plano.sem-preco .numero small{display:none}
/* Vitrine: cartões sem preço (revisão W2, 22/10); o botão vem logo depois do nome */
.planos-rc.sem-precos .plano .acao{margin-top:8px}
.plano .cobranca{margin:0;min-height:1.5em;font:400 14px/1.5 var(--fonte-mono);color:var(--texto-2)}
.plano .cobranca{min-height:3em}
/* hierarquia do preço (Pedro, 01/11): mensal riscado, valor por mês e desconto em destaque; total à vista embaixo, como apoio */
.plano .de-mes{margin:0 0 6px;min-height:1.4em;font:400 14px/1.4 var(--fonte-mono);color:var(--texto-meta)}
.plano .de-mes s{text-decoration-color:var(--texto-3)}
.plano .numero .desc{align-self:center;margin-left:4px;padding:6px 9px;background:var(--lima);color:var(--texto-na-lima);font:700 16px/1 var(--fonte-mono);letter-spacing:.02em} /* total numa linha, parcelamento sempre na de baixo (Ximenes, 21/10) */
.plano .cobranca .parc{color:var(--texto-meta);white-space:nowrap} /* o parcelamento nunca quebra no meio (23/10) */
.plano .cobranca s{color:var(--texto-meta);text-decoration-color:var(--texto-3);margin-right:6px}
.plano .ck-btn{width:100%}
/* segurança junto do botão (CLM-03), decisão Ximenes 21/10 */
.plano .acao{display:flex;flex-direction:column;gap:10px}
.plano .seguro-linha{margin:0;text-align:center;font:400 13px/1.4 var(--fonte-mono);color:var(--texto-meta)}
/* lista: item em negrito com a explicação embaixo; "Tudo do anterior" apagado, com o sinal de mais */
.plano ul{list-style:none;margin:0;padding:20px 0 0;display:flex;flex-direction:column;gap:14px;border-top:var(--linha) solid var(--borda)}
.plano li{display:grid;grid-template-columns:18px 1fr;column-gap:10px;font-size:16px;line-height:1.45}
.plano li .ck-ico{width:18px;height:18px;margin-top:2px;color:var(--texto)}
.plano.meio li .ck-ico{color:var(--lima)}
.plano li b{font-weight:var(--peso-forte);color:var(--texto)}
.plano li span{grid-column:2;color:var(--texto-3)}
.plano li.herda,.plano li.herda b{color:var(--texto-3);font-weight:var(--peso-corpo)}
.plano li.herda .ck-ico{color:var(--texto-3)}
.nota-planos{margin:var(--s7) auto 0;text-align:center;font:400 14px/1.6 var(--fonte-mono);color:var(--texto-meta)} /* texto miúdo em mono (23/10) */
/* duas linhas embaixo dos planos (23/10): a segurança da cobrança primeiro, mais clara; o aviso da assinatura de IA embaixo */
.nota-planos p{margin:0}
div.nota-planos{display:flex;flex-direction:column;gap:6px}
div.nota-planos p:first-child{color:var(--texto-2)}
/* plano que o app pediu (?entitlement=) */
.plano.pedido{border-color:var(--lima);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--lima-25),0 30px 80px -30px var(--lima-40);z-index:2}
.plano .pedido-selo{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap}
.plano .pedido-selo[hidden]{display:none}
/* troca de período: o preço some e volta */
.valor,.faixa{transition:opacity var(--dur-rapida) var(--curva-suave)}
.trocando .valor,.trocando .faixa{opacity:0}