/* =========================================================================
   Shield Academy — Produto de entrada (Funil C)
   Só o que este funil tem a mais que o style.css compartilhado: a conta que
   explica o preço e os cards de kit. Todo o resto (cores, tipografia,
   botões, seções, FAQ, sticky) vem do style.css da imersão, de propósito:
   é a mesma marca falando com a mesma pessoa em dois momentos diferentes.
   ========================================================================= */

/* ---------------- a conta ---------------- */
.conta-linhas{
  list-style:none;margin:0 auto 26px;padding:0;
  max-width:var(--texto);display:grid;gap:0;text-align:left;
}
.conta-linhas li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.conta-linhas li:first-child{border-top:1px solid var(--line)}
.conta-lab{font-size:14.5px;color:var(--grey);line-height:1.4}
.conta-val{
  font-family:var(--display);font-weight:400;font-size:24px;line-height:1;
  letter-spacing:.01em;flex:none;
}
/* as duas primeiras linhas mostram o valor cheio; a segunda é a que o
   comprador realmente paga, então só a primeira aparece riscada */
.conta-linhas li:first-child .conta-val{text-decoration:line-through;color:var(--grey-d)}
.conta-total{border-bottom:0 !important}
.conta-total .conta-lab{color:#EDEDED;font-weight:700}
.conta-total .conta-val{color:var(--red);font-size:34px}

/* ---------------- kits ---------------- */
.kits{display:grid;gap:14px;grid-template-columns:1fr;margin:0 auto 24px;max-width:var(--texto)}
.kit{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.kit.is-destaque{background:var(--grad-dark);border-color:var(--red);position:relative}
.kit-selo{
  margin:0 0 12px;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;background:var(--red);
  padding:5px 12px;border-radius:999px;
}
.kit-nome{
  margin:0;font-family:var(--display);font-weight:400;font-size:26px;
  line-height:1.04;text-transform:uppercase;
}
.kit-preco{
  margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:46px;
  line-height:1;letter-spacing:.01em;color:var(--red);
}
.kit-parcela{margin:6px 0 0;font-size:13.5px;color:var(--grey)}
.kit-gratis{margin:12px 0 0;font-size:13.5px;color:var(--grey)}
.kit-gratis s{color:var(--grey-d)}
.kit-gratis b{color:#EDEDED}
.kit-bullets{
  list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:8px;text-align:left;
}
/* o ✓ fica pendurado fora do texto: com ele inline, a segunda linha do item
   voltava para a margem e a lista perdia o alinhamento */
.kit-bullets li{
  font-size:14px;color:#D6D6D6;line-height:1.45;
  display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;
}
.kit-bullets li::before{content:"✓";color:var(--red);font-weight:800}
.kit .btn{margin-top:auto;align-self:stretch}
/* estado de espera: enquanto não existe checkout, o lugar do botão diz por quê */
.kit-espera{
  margin:auto 0 0;align-self:stretch;padding:14px 18px;border:1px dashed var(--line);
  border-radius:var(--radius);font-size:13px;color:var(--grey-d);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;
}

@media (min-width:820px){
  .kits{grid-template-columns:1fr 1fr;max-width:760px}
}

/* ---------------- âncoras ----------------
   O topo da página é fixo. Sem esta margem, o link "#oferta" para o scroll
   com o título da seção escondido atrás da barra. */
#conta,#como,#publico,#mercado,#entrega,#oferta,#instrutor,#faq{scroll-margin-top:76px}