/* Páginas enxutas (vendas e checkout). Reaproveita os tokens e componentes de base.css. */
.hero{padding-block:clamp(28px,5vw,64px) clamp(36px,6vw,72px)}
.topo .wrap{padding-block:.5rem}
.checks{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.5rem;font-weight:700}
.checks li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.checks li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;background:var(--hl);color:var(--hl-ink);font:600 .85rem var(--f-mono);margin-top:2px}
.recebe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.recebe article{background:var(--card);border:2px solid var(--ink);padding:18px;display:grid;gap:8px;align-content:start}
.recebe .ico{width:48px;height:48px;background:var(--hl);color:var(--hl-ink);display:grid;place-items:center;font:400 1.5rem var(--f-display)}
.recebe h3{font-size:1.25rem}
.recebe p{color:var(--muted);font-size:.95rem;line-height:1.45}
.dias-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dias-mini span{border:2px solid var(--ink);background:var(--card);padding:6px 12px;font-weight:700;font-size:.92rem}
.dias-mini b{font-family:var(--f-mono);font-size:.78rem;margin-right:6px;background:var(--hl);color:var(--hl-ink);padding:1px 6px}
.dor3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.dor3 div{border:2px solid var(--ink);background:var(--card);padding:16px 18px;font-weight:700;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.dor3 div::before{content:"✕";font:600 1.4rem var(--f-mono);color:var(--red);line-height:1.2}
.oferta-simples{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--card);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--hl);padding:clamp(20px,4vw,40px)}
.oferta-simples .capa-img{width:min(250px,60vw);aspect-ratio:3/4;object-fit:cover;box-shadow:12px 14px 0 var(--grid),0 20px 40px -18px rgba(0,0,0,.5);transform:rotate(-2deg)}
.oferta-simples .corpo{display:grid;gap:14px}
.oferta-simples .preco-linha{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.oferta-simples .preco-linha .valor b{font-size:clamp(4.2rem,11vw,6.4rem)}
.selos{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.selos span::before{content:"✓ ";color:var(--ink);font-weight:600}
.btn.grande{font-size:clamp(1.25rem,3vw,1.6rem);padding:1.15rem 2rem}
.faq{max-width:760px}

/* ---------- checkout ---------- */
.ck{max-width:640px;margin:0 auto;padding:24px 16px 56px;display:grid;gap:20px}
.ck h1{font-size:clamp(2rem,6vw,3rem);margin:6px 0 4px}
.ck-topo{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;max-width:980px;margin:0 auto;font-family:var(--f-mono);font-size:.8rem}
.ck-topo a{color:inherit}
.item{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:var(--card);border:2px solid var(--ink);padding:12px 14px}
.item img{width:84px;aspect-ratio:3/4;object-fit:cover;box-shadow:4px 4px 0 var(--grid)}
.item>div{min-width:0}
.item h3{font-size:1.1rem;line-height:1.1}
.item p{color:var(--muted);font-size:.88rem;line-height:1.35;margin-top:4px}
.item .v{font:600 1rem var(--f-mono);white-space:nowrap}
.item.fixo{border-width:3px;box-shadow:6px 6px 0 var(--hl)}
.item .tag{display:inline-block;font:600 .68rem var(--f-mono);letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:2px 7px;margin-bottom:6px}
label.item{cursor:pointer;grid-template-columns:28px 84px 1fr auto;border-style:dashed}
label.item input{width:22px;height:22px;accent-color:#121722}
label.item:has(input:checked){border-style:solid;background:var(--hl);color:var(--hl-ink)}
label.item:has(input:checked) p{color:var(--hl-ink)}
label.item:focus-within{outline:3px solid var(--red);outline-offset:3px}
.secao{font:600 .78rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.lado{position:sticky;top:16px;display:grid;gap:14px}
.resumo{background:var(--card);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--hl);padding:18px;display:grid;gap:12px}
.resumo .linha{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.resumo .total{border-top:2px solid var(--ink);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;font:600 .9rem var(--f-mono)}
.resumo .total strong{font:400 2.4rem var(--f-display)}
.resumo input[type=email]{width:100%;padding:.85rem 1rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit}
.resumo .msg{color:var(--red);font-size:.9rem;min-height:1.1em}
.seguranca{display:grid;gap:6px;font-size:.88rem;color:var(--muted)}
.seguranca span::before{content:"✓ ";color:var(--ink);font-weight:800}
@media (max-width:860px){
  .recebe{grid-template-columns:1fr 1fr}
  .dor3{grid-template-columns:1fr}
  .oferta-simples{grid-template-columns:1fr;justify-items:center;text-align:center}
  .oferta-simples .preco-linha,.selos{justify-content:center}
  .ck{grid-template-columns:minmax(0,1fr)}
  .lado{position:static}
}
@media (max-width:520px){
  .recebe{grid-template-columns:1fr}
  .item{grid-template-columns:64px 1fr auto}.item img{width:64px}
  label.item{grid-template-columns:24px 64px 1fr}
  label.item .v{grid-column:3;justify-self:start}
}

.hero-vis img{margin-bottom:28px}

/* ---------- Pix transparente (checkout e obrigado) ---------- */
.spin{width:20px;height:20px;border:3px solid var(--grid);border-top-color:var(--ink);border-radius:50%;animation:giro 1s linear infinite;display:inline-block;vertical-align:-4px;margin-right:8px}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.resumo input[type=text]{width:100%;padding:.85rem 1rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit}
.pix{display:grid;gap:12px;justify-items:center;text-align:center}
.pix h2{font-size:1.5rem}
.pix .sub{color:var(--muted);font-size:.92rem}
.pix .qr{background:#fff;padding:10px;border:2px solid var(--ink);width:min(260px,100%)}
.pix .qr img{display:block;width:100%;height:auto;image-rendering:pixelated}
.pix .codigo{width:100%;font:500 .72rem/1.3 var(--f-mono);word-break:break-all;background:var(--paper);border:2px dashed var(--ink);padding:8px;max-height:4.6em;overflow:auto;text-align:left}
.pix .btn{width:100%}
.pix .estado{font-weight:700;font-size:.95rem}
.pix .expira{font:600 .8rem var(--f-mono);color:var(--muted)}
.pix .teste{font:600 .8rem var(--f-mono);background:none;border:2px dashed var(--muted);color:var(--muted);padding:8px 10px;cursor:pointer}
.upsell-oferta{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--hl);background:var(--card);padding:16px}
.upsell-oferta img{width:96px;height:auto;box-shadow:4px 4px 0 var(--grid)}
.upsell-oferta h3{font-size:1.25rem;line-height:1.1;margin:2px 0 6px}
.upsell-oferta p{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.upsell-oferta .btn{width:100%}
@media (max-width:560px){.upsell-oferta{grid-template-columns:72px 1fr}.upsell-oferta img{width:72px}}
[hidden]{display:none!important}

/* ---------- checkout em etapas ---------- */
.sub-ck{color:var(--muted);margin:0 0 6px;font-weight:700}
.etapa{display:grid;gap:12px;margin-top:22px}
.etapa h2{font:400 1.5rem/1.1 var(--f-display);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.etapa h2 b{display:grid;place-items:center;width:32px;height:32px;background:var(--hl);color:var(--hl-ink);font:600 .95rem var(--f-mono)}
.etapa h2 small{font:600 .72rem var(--f-mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-left:auto}
.campo{display:grid;gap:6px}
.campo span{font-weight:700;font-size:.92rem}
.campo input{width:100%;padding:.9rem 1rem;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-size:1rem}
.campo input:focus{outline:3px solid var(--hl);outline-offset:2px}
.muted-ck{color:var(--muted)}
.pagtos{display:grid;gap:10px}
.pagto{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;background:var(--card);border:2px solid var(--ink);padding:12px 14px;cursor:pointer}
.pagto input{width:20px;height:20px;accent-color:#121722}
.pagto strong{display:block;font-size:1.02rem}
.pagto em{font-style:normal;color:var(--muted);font-size:.86rem}
.pagto.sel{border-width:3px;box-shadow:5px 5px 0 var(--hl)}
.pagto.off{cursor:not-allowed;border-style:dashed;opacity:.55}
.em-breve{font:600 .68rem var(--f-mono);letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:3px 8px}
@media (max-width:560px){.pagto{grid-template-columns:22px 1fr}.em-breve{grid-column:2;justify-self:start}}
.resumo .total strong{white-space:nowrap;font-size:clamp(1.8rem,9vw,2.4rem)}.resumo .total{gap:8px}

/* ---------- etapas 1 e 2 ---------- */
.voltar{background:none;border:0;color:var(--muted);font:600 .85rem var(--f-mono);text-decoration:underline;cursor:pointer;padding:0;justify-self:start;margin-top:14px}
.conf{font-weight:700;margin:4px 0 0;word-break:break-all}
.etapa .msg{color:var(--red);font-size:.9rem;min-height:1.1em}

/* progresso 1 — 2 (mais limpo) */
.ck h1{font-size:clamp(1.8rem,6vw,2.4rem);margin:0}
.sub-ck{font-size:.92rem;font-weight:500;margin:4px 0 18px}
.stepper{display:flex;align-items:flex-start;margin:0 0 22px}
.st{display:grid;justify-items:center;gap:6px;min-width:76px;font:600 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.st b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--grid);background:var(--paper);color:var(--muted);font:600 .95rem var(--f-mono);transition:background .25s,color .25s,border-color .25s}
.st.atual{color:var(--ink)}
.st.atual b{background:var(--hl);border-color:var(--hl);color:var(--hl-ink)}
.st.feito{color:var(--ink)}
.st.feito b{background:var(--ink);border-color:var(--ink);color:var(--paper);font-size:0}
.st.feito b::before{content:"\2713";font-size:.95rem}
.trilho{flex:1;height:2px;background:var(--grid);margin-top:16px;position:relative}
.preenche{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.preenche,.st b{transition:none}}
.etapa{margin-top:0}
.etapa h2{font-size:1.25rem}
.voltar{margin-top:0}
.conf{margin:6px 0 22px}.etapa+.etapa{margin-top:28px}#passo-2 .etapa:first-of-type{margin-top:0}
