/* /monte-o-seu-plano — só o que é novo. O resto vem de /conheca/estudio/base.css e /conheca/estilo.css (mesmas
   cores e mesma fonte do site). A tela: escolhas à esquerda, o resumo (que mostra o total) fixo à direita no
   computador; no celular, uma coluna só, com o resumo logo depois das escolhas. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jz-grade { display: grid; gap: calc(var(--vao) * 1.5); align-items: start; }
.jz-escolhas { display: grid; gap: calc(var(--vao) * 1.4); min-width: 0; }
.jz-bloco { display: grid; gap: .65rem; min-width: 0; }
.jz-bloco .chave { max-width: 480px; }

/* os atalhos de quantidade e o botão − / + */
.jz-atalhos { display: flex; flex-wrap: wrap; gap: .5rem; }
.jz-atalhos button { min-width: 56px; min-height: 48px; padding-inline: 1rem; border-radius: 999px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 800; font-size: var(--t-destaque); cursor: pointer; }
.jz-atalhos button:hover { border-color: var(--cor-borda-verde); }
.jz-atalhos button[aria-pressed="true"] { background: var(--cor-destaque); color: var(--cor-sobre-primaria); border-color: transparent; }
.jz-passo { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: .3rem; border-radius: 16px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
.jz-passo button { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--cor-destaque); color: var(--cor-sobre-primaria); font: inherit; font-size: 1.6rem; font-weight: 800; line-height: 1; cursor: pointer; }
.jz-passo button:disabled { background: var(--cor-borda); color: var(--cor-texto-suave); cursor: default; }
.jz-passo output { min-width: 3rem; text-align: center; font-size: var(--t-destaque); font-weight: 800; font-variant-numeric: tabular-nums; }
.jz-sob { display: grid; gap: .6rem; justify-items: start; padding: 1rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--cor-destaque); background: rgb(174 248 92 / 0.06); }
.jz-sob[hidden] { display: none; }
.jz-sob p { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-pequeno); }

/* o pacote de canais */
.jz-pacote { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: start; padding: 1rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--cor-borda); background: var(--cor-superficie); cursor: pointer; }
.jz-pacote:has(input:checked) { border-color: var(--cor-destaque); background: rgb(174 248 92 / 0.06); }
/* O cartão inteiro é a área de toque: a caixinha de verdade cobre o cartão (invisível) e a que se vê é desenhada. */
.jz-pacote { position: relative; }
.jz-pacote input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.jz-pacote::before { content: ""; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--cor-borda-verde); display: grid; place-items: center; font-weight: 800; line-height: 1; color: var(--cor-sobre-primaria); }
.jz-pacote:has(input:checked)::before { content: "✓"; background: var(--cor-destaque); border-color: var(--cor-destaque); }
.jz-pacote:has(input:focus-visible) { outline: 3px solid var(--cor-destaque); outline-offset: 3px; }
.jz-pacote-nome { font-weight: 800; font-size: var(--t-destaque); }
.jz-pacote-valor { font-weight: 800; color: var(--cor-destaque); white-space: nowrap; }
.jz-pacote-desc { grid-column: 2 / 4; color: var(--cor-texto-suave); font-size: var(--t-pequeno); }

/* o resumo, que é o cartão de plano de sempre (.plano) */
.jz-resumo { min-width: 0; }
.jz-ref { margin: 0; }
.jz-ref[hidden] { display: none; }
.jz-linhas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; margin: 0; font-size: var(--t-pequeno); }
.jz-linhas dt { color: var(--cor-texto-suave); }
.jz-linhas dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.jz-resumo .nota { margin: 0; }

/* a tabela de preços (conteúdo de verdade, gerado no HTML) */
.jz-tabela-caixa { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
.jz-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jz-tabela th, .jz-tabela td { padding: .8rem clamp(.5rem, 2.5vw, 1rem); text-align: right; border-bottom: 1px solid var(--cor-borda); }
.jz-tabela thead th { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.jz-tabela th[scope="row"], .jz-tabela thead th:first-child { text-align: left; }
.jz-tabela tbody tr:last-child > * { border-bottom: 0; }
.jz-tabela td { font-weight: 700; }

/* o que vem em todos os planos */
.jz-incluso { display: grid; gap: var(--vao); }
.jz-lista { list-style: none; padding: 0; display: grid; gap: .5rem 1.5rem; font-size: var(--t-pequeno); }
.jz-lista li { padding-left: 1.5rem; position: relative; }
.jz-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--cor-verde-claro); font-weight: 800; }
.jz-lista.ia li::before { color: var(--cor-destaque); }

@media (min-width: 640px) { .jz-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .jz-grade { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .jz-resumo { position: sticky; top: 1rem; }
}