/* O "Monte o seu plano" DENTRO da página inicial (12/11/2026, decisão do dono).
   A página inicial tem estilo próprio (não usa o base.css nem o estilo.css da /conheca). Por isso aqui ficam, só
   dentro de .jz-casca, as cores e as peças que o configurador usa (chave Com/Sem IA, cartão do resumo, preço,
   botões). As peças da tela em si (.jz-*) vêm de /monte-o-seu-plano/estilo.css, o MESMO arquivo da página oficial.
   As cores são as mesmas do resto do site (limão #aef85c, verde #3ade85, fundo escuro). */

.jz-casca {
  --cor-texto: #effaf3;
  --cor-texto-suave: #b7dcc7;
  --cor-destaque: #aef85c;
  --cor-sobre-primaria: #06281c;
  --cor-superficie: rgb(255 255 255 / 0.045);
  --cor-borda: rgb(183 220 199 / 0.18);
  --cor-borda-verde: #2aa165;
  --cor-verde-claro: #3ade85;
  --t-pequeno: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --t-corpo: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --t-destaque: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --vao: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --raio: 18px;
  max-width: 1000px;
  margin: 0 auto;
  color: var(--cor-texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
}
.jz-casca > * + * { margin-top: var(--vao); }
.jz-casca h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); color: #fff; }
.jz-casca a { color: var(--cor-destaque); font-weight: 700; }
.jz-casca :focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; border-radius: 6px; }

.jz-casca .a-partir { text-align: center; font-size: var(--t-destaque); color: var(--cor-texto-suave); }
.jz-casca .a-partir strong { color: var(--cor-destaque); font-weight: 800; white-space: nowrap; }
.jz-casca .nota { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.jz-casca > .nota { text-align: center; }
.jz-casca .recado { color: var(--cor-texto-suave); font-size: var(--t-pequeno); }
.jz-casca .escolha-titulo { font-weight: 700; font-size: var(--t-pequeno); color: var(--cor-texto-suave); }

/* a chave Com IA / Sem IA */
.jz-casca .chave { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .35rem; border-radius: 20px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); width: 100%; max-width: 480px; }
.jz-casca .chave button { display: grid; gap: .1rem; justify-items: center; min-height: 56px; padding: .55rem .8rem; border: 1px solid transparent; border-radius: 15px; background: transparent; color: var(--cor-texto-suave); font: inherit; cursor: pointer; }
.jz-casca .chave-nome { font-weight: 800; font-size: var(--t-destaque); line-height: 1.2; }
.jz-casca .chave-sub { font-size: .85rem; line-height: 1.25; opacity: .85; }
.jz-casca .chave button[aria-pressed="true"] { background: var(--cor-destaque); color: var(--cor-sobre-primaria); }
.jz-casca .chave button[aria-pressed="true"] .chave-nome::before { content: "✓ "; }
.jz-casca .chave button:not([aria-pressed="true"]):hover { border-color: var(--cor-borda-verde); color: var(--cor-texto); }

/* o cartão do resumo (o total do plano escolhido) */
.jz-casca .plano { position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--cor-superficie); border: 2px solid var(--cor-destaque); border-radius: var(--raio); padding: 1.5rem 1.3rem; }
.jz-casca .plano h3 { line-height: 1.2; }
.jz-casca .preco { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.jz-casca .preco .cifrao { font-weight: 700; color: var(--cor-texto-suave); }
.jz-casca .preco .num { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.jz-casca .preco .mes { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.jz-casca .porte { list-style: none; padding: .6rem 0; margin: 0; display: grid; gap: .25rem; border-block: 1px solid var(--cor-borda); color: var(--cor-texto-suave); }
.jz-casca .porte b { color: var(--cor-texto); font-weight: 800; }

/* botões iguais aos do site */
.jz-casca .botao { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .85em 1.5em; border-radius: 999px; border: 0; font: inherit; font-weight: 800; line-height: 1.15; text-decoration: none; text-align: center; color: var(--cor-sobre-primaria); background: linear-gradient(90deg, var(--cor-destaque), var(--cor-verde-claro)); box-shadow: 0 10px 30px rgb(76 208 125 / 0.25); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.jz-casca .botao:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgb(76 208 125 / 0.4); }
.jz-casca .botao.secundario { background: rgb(255 255 255 / 0.05); color: var(--cor-texto); box-shadow: none; border: 1px solid var(--cor-borda-verde); }
.jz-casca .plano .botao { margin-top: auto; width: 100%; }

/* a tabela de preços e os números (vêm do estilo.css da página oficial; aqui só o que a página inicial muda) */
.jz-casca .jz-tabela th, .jz-casca .jz-tabela td { color: var(--cor-texto); }
.jz-casca .jz-tabela thead th { color: var(--cor-texto-suave); }

@media (prefers-reduced-motion: reduce) { .jz-casca .botao { transition: none; } .jz-casca .botao:hover { transform: none; } }