/* =========================================================
   Checkout — 3 Dias (ebook-2)

   Estrutura e layout herdados do checkout do ebook-1 (arquitetura
   validada em produção com dinheiro real: cartão e PIX aprovados).
   O que muda aqui é só o TEMA: paleta e tipografia dos tokens abaixo,
   pra bater com a landing page desta LP (creme + marinho + azul vivo,
   Baloo 2 + Nunito) em vez do azul bebê + rosa do ebook-1.

   Os nomes dos tokens foram mantidos de propósito — o resto do
   arquivo (layout já testado) não precisou ser tocado.
   ========================================================= */

:root {
  --bg: #FCF8F0;          /* --cream da landing */
  --surface: #FFFFFF;     /* cartões brancos sobre o creme */
  --ink-plate: #17457E;   /* --navy */
  --accent: #1B85C8;      /* --blue: destaque de preço/CTA da landing */
  --accent-hover: #10345F;/* --navy-dark: hover do CTA do hero */
  --text: #17457E;
  --text-2: #2C4E75;
  --text-body: #3B5C82;
  --text-dim: #6E8FB4;
  --text-dimmer: #8AA3BE;
  --line: #DCEEEA;        /* --mint-200: borda da caixa de preço da landing */
  --ok: #1a7f3c;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  /* O "mono" aqui nunca foi monoespaçado de verdade: é o estilo de
     eyebrow (caixa alta + letter-spacing). Segue o mesmo papel da
     landing, onde eyebrow é Baloo 2 600. */
  --font-mono: 'Baloo 2', system-ui, sans-serif;

  --gutter: 22px;
}
@media (min-width: 900px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }

/* O atributo [hidden] vale display:none, mas qualquer regra com
   display explícito (ex.: .card { display:flex }) tem mais
   especificidade e anula isso — foi o que deixou o formulário
   visível por baixo do painel do PIX. Esta regra fecha o buraco
   de uma vez, para todo elemento com [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p, legend { margin: 0; }
h1, h2, p { text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(11px, .9vw, 13px);
}

/* ---------- header ---------- */
.hdr {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.back {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--text-dim); text-decoration: none;
}
.back:hover { color: var(--accent); }
.hdr-meta { color: var(--text-dim); letter-spacing: .16em; }

/* ---------- layout ---------- */
.wrap {
  max-width: 620px;
  margin-inline: auto;
  padding: 30px var(--gutter) 60px;
  display: flex; flex-direction: column; gap: 20px;
}

.title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.025em;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 900px) { .card { padding: 28px 28px 30px; } }

/* Rótulo de seção com a barra 44×3px do .kicker da landing —
   é o elemento que amarra cada bloco do checkout à página de vendas. */
.label {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent); letter-spacing: .20em; font-weight: 500;
}
.label::before {
  content: ''; flex: none; width: 28px; height: 3px; background: var(--accent);
}
@media (min-width: 900px) { .label { gap: 14px; } .label::before { width: 44px; } }

/* .rail da landing: filete vermelho de 3px marcando o bloco de oferta.
   Aqui marca o resumo do pedido e o painel do PIX, que são exatamente
   os blocos de oferta desta página. */
.summary, .pix-panel { border-left: 3px solid var(--accent); }

/* ---------- resumo ---------- */
.line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 16px; color: var(--text-2);
}
.line-price { font-family: var(--font-display); font-weight: 400; white-space: nowrap; }
.total {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.total .line-name { font-family: var(--font-display); }
/* Preço total na escala dos numerais de destaque da landing. */
.total .line-price { color: var(--accent); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; }

/* ---------- order bump ---------- */
/* Grid, não flex: precisa posicionar capa e texto em linhas
   diferentes no mobile (capa maior, centralizada, ao lado do
   checkbox) e na mesma linha no desktop, sem depender de wrap
   "seco" nem de reordenar o HTML. Ver ".bump-box/.bump-capa/
   .bump-text" logo abaixo e o bloco de tamanhos em "capas dos
   produtos". */
/* Mobile: mesmo empilhado do resumo do pedido — checkbox em cima à
   esquerda, capa grande e centralizada logo abaixo (mesma classe
   .item-capa do produto principal, mesmo tamanho de propósito),
   texto por último, largura toda. Desktop: checkbox, capa (mesmo
   .item-capa) e texto lado a lado. */
.bump {
  display: grid; grid-template-columns: 1fr; align-items: start; gap: 12px;
  padding: 16px; cursor: pointer;
  background: var(--bg);
  border: 2px dashed var(--accent);
}
.bump input { position: absolute; opacity: 0; width: 0; height: 0; }
.bump-box {
  grid-column: 1; grid-row: 1; justify-self: start;
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--ink-plate); background: var(--bg);
  display: grid; place-items: center;
}
.bump-box::after {
  content: ''; width: 12px; height: 12px; background: var(--accent);
  transform: scale(0); transition: transform 120ms ease;
}
.bump input:checked + .bump-box::after { transform: scale(1); }
.bump input:focus-visible + .bump-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.bump-text { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 560px) {
  .bump { grid-template-columns: auto auto 1fr; align-items: center; gap: 18px; }
  .bump-box { grid-row: 1; }
  .bump-text { grid-column: 3; grid-row: 1; }
}
.bump-text strong { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.bump-text em { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--text-body); }
/* Preço "de" riscado + preço final em destaque. */
.bump-text s { color: var(--text-dim); font-weight: 400; text-decoration-thickness: 1px; }
.bump-text s[hidden] { display: none; }
.bump-price { color: var(--accent); font-family: var(--font-display); font-size: 16px; }

/* ---------- formulário ---------- */
.form { gap: 18px; }
.row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.field .req { color: var(--accent); font-weight: 600; }
.field .opt { color: var(--text-dim); font-weight: 400; }
.field small { font-size: 12px; color: var(--text-dim); }

input[type=text], input[type=email], input[type=tel], textarea {
  font-family: var(--font-body); font-size: 16px; /* 16px evita zoom no iOS */
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 0;
  padding: 13px 12px; width: 100%;
  transition: border-color 120ms ease;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[aria-invalid="true"] { border-color: var(--accent); }

/* ---------- método de pagamento ---------- */
.methods { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .methods { grid-template-columns: 1fr 1fr; } }

.method { cursor: pointer; }
.method input { position: absolute; opacity: 0; width: 0; height: 0; }
.method-box {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 14px 16px; height: 100%;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.method-icon { flex: none; color: var(--text-dim); }
.method-box strong { font-size: 15px; font-weight: 500; color: var(--text-2); }
.method-box em { font-style: normal; font-size: 13px; color: var(--text-dim); }
/* Selecionado: borda de acento + fundo levemente tingido, para o estado
   ficar legível também em tela pequena e sob luz forte. */
.method input:checked + .method-box {
  border-color: var(--accent); border-width: 2px; padding: 13px 15px;
  background: rgba(216, 31, 15, .06);
}
.method input:checked + .method-box strong,
.method input:checked + .method-box .method-icon { color: var(--accent); }
.method input:focus-visible + .method-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.method.is-disabled { opacity: .45; cursor: not-allowed; }

/* ---------- cartão ---------- */
.card-fields {
  display: flex; flex-direction: column; gap: 18px;
  margin: 0; padding: 18px 16px; border: 1px solid var(--line); background: var(--bg);
}
.card-fields[hidden] { display: none; }

/* ---------- botão ---------- */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 400; font-size: 17px;
  padding: 18px 20px; min-height: 56px; width: 100%;
  /* Vermelho de acento, igual ao CTA de fechamento da landing (.cta-red):
     este é o botão de conversão da página, precisa do mesmo peso. */
  background: var(--accent); color: var(--bg);
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color 140ms ease;
}
.cta:hover { background: var(--ink-plate); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cta[disabled] { opacity: .55; cursor: progress; }
/* Secundário (copiar código PIX): contorno, para não competir com o CTA. */
.cta-ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 14px; min-height: 48px; padding: 14px 18px;
}
.cta-ghost:hover { background: var(--accent); color: var(--bg); }

.note { color: var(--text-dim); letter-spacing: .1em; line-height: 1.6; }
.note.center { text-align: center; }

.error {
  color: var(--accent); font-size: 14px; line-height: 1.5;
  border-left: 3px solid var(--accent); padding-left: 12px;
}
.error[hidden] { display: none; }

/* ---------- painel PIX ---------- */
.pix-panel[hidden] { display: none; }
.pix-qr { display: grid; place-items: center; background: #fff; padding: 16px; border: 1px solid var(--line); }
.pix-qr[hidden] { display: none; }
.pix-qr img { display: block; width: 100%; max-width: 260px; height: auto; image-rendering: pixelated; }
.pix-code { display: flex; flex-direction: column; gap: 8px; }
.pix-code[hidden] { display: none; }
.pix-code textarea {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  resize: vertical; word-break: break-all;
}
.pix-status { color: var(--text-dim); letter-spacing: .1em; }
.pix-status.is-paid { color: var(--ok); }
.pix-status.is-failed { color: var(--accent); }

/* ---------- capas dos produtos ---------- */
/* Grid, não flex: no mobile a capa fica sozinha numa linha, grande e
   centralizada (senão o título espreme contra a capa e quebra
   palavra por palavra); nome e preço dividem a linha de baixo, largura
   toda. No desktop (>=560px) capa à esquerda (~1/3 do card) e texto à
   direita, lado a lado — mesma ideia do .bump acima. Proporção da
   imagem preservada por height:auto; width/height no HTML evita
   layout shift enquanto carrega. */
.line-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 14px;
}
.line-item .item-capa { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
.line-item .line-name { grid-column: 1; grid-row: 2; }
.line-item .line-price {
  grid-column: 2; grid-row: 2;
  font-size: 19px; /* preço tem que se notar mesmo empilhado */
}
@media (min-width: 560px) {
  .line-item { grid-template-columns: auto 1fr auto; gap: 18px; }
  .line-item .item-capa { grid-column: 1; grid-row: 1; justify-self: start; }
  .line-item .line-name { grid-column: 2; grid-row: 1; }
  .line-item .line-price { grid-column: 3; grid-row: 1; font-size: 16px; }
}

/* .item-capa é a ÚNICA regra de TAMANHO de capa do resumo — o bump
   usa a mesma classe (class="item-capa bump-capa" no HTML) de
   propósito, pra ter exatamente o mesmo tamanho do principal sem
   duplicar número. .bump-capa abaixo só posiciona, nunca dimensiona.

   width em clamp(vw), não em % do pai: % de .item-capa e de
   .bump-capa resolviam diferente porque .bump tem padding próprio
   (16px) e .line-item não — mesma % de containers de tamanho
   diferente dava pixel diferente. clamp() com vw mede a partir do
   VIEWPORT, igual pros dois em qualquer container. */
.item-capa {
  height: auto; display: block;
  width: clamp(130px, 40vw, 190px);
  border: 1px solid var(--border-card, var(--line));
}
@media (min-width: 560px) {
  .item-capa { width: clamp(170px, 24vw, 220px); }
}

.bump-capa { grid-column: 1; grid-row: 2; justify-self: center; }
@media (min-width: 560px) { .bump-capa { grid-column: 2; grid-row: 1; justify-self: start; } }

/* ---------- bandeiras aceitas ---------- */
.bandeiras {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 8px; align-items: center;
}
.bandeiras img { display: block; height: 26px; width: auto; }

/* ---------- selos de segurança ---------- */
.selos {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-items: flex-start; justify-content: center;
}
.selo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.selo img { display: block; height: 40px; width: auto; }
@media (min-width: 560px) { .selo img { height: 46px; } }
.selo-link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--text-dim); text-decoration: underline;
  text-underline-offset: 3px;
}
.selo-link:hover { color: var(--accent); }

/* ---------- capa na /oferta ---------- */
/* Aqui o 90 Dias É o produto, então a capa vem grande e centralizada,
   não como miniatura de linha. */
.oferta-capa-wrap { display: flex; justify-content: center; }
.oferta-capa {
  display: block; height: auto;
  width: 55%; max-width: 260px;
  border: 1px solid var(--border-card, var(--line));
}
@media (min-width: 560px) { .oferta-capa { width: 38%; max-width: 300px; } }

/* ---------- capa na /obrigado ----------
   Mesma ideia do resumo: capa sozinha numa linha, nome e botão
   dividem a linha de baixo no mobile; lado a lado no desktop. O
   flex-direction/grid dos containers (.dl-item, .upsell-head) fica
   no <style> inline de obrigado/index.html — aqui só o tamanho da
   capa, que é compartilhado pelos dois. */
.dl-capa {
  height: auto; display: block;
  width: clamp(130px, 40vw, 190px);
  border: 1px solid var(--border-card, var(--line));
}
@media (min-width: 560px) { .dl-capa { width: clamp(170px, 24vw, 220px); } }

/* ---------- rodapé ---------- */
footer { border-top: 1px solid var(--line); background: var(--surface); padding: 22px var(--gutter) 32px; }
.legal {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.75;
  color: var(--text-dimmer); max-width: 90ch; margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   12. Página /oferta (upsell avulso)
   Reaproveita todo o CSS acima; só o que é exclusivo dela
   fica aqui.
   ========================================================= */
.accent-title { color: var(--accent); }

.offer-desc {
  font-size: 16px; line-height: 1.55;
  color: var(--text-body, var(--text-muted));
}

/* Na /oferta a linha de total carrega o preço "de" riscado ao lado
   do preço final, então precisa alinhar os dois na base. */
.total .line-price { display: flex; align-items: baseline; gap: 10px; }
.total .line-price s {
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  color: var(--text-dim); text-decoration-thickness: 1px;
}
.total .line-price s[hidden] { display: none; }

.pay-note { text-align: center; }

/* =========================================================
   13. Bloco de upsell pós-compra (/obrigado)
   ========================================================= */
.upsell { border-left: 3px solid var(--accent); }
.upsell[hidden] { display: none !important; }
.upsell .big { font-size: clamp(22px, 2.8vw, 30px); }
/* Capa do upsell na oferta pós-compra — mesma miniatura (.dl-capa,
   44px) usada na lista de downloads acima, pra manter o padrão. */
/* Mesmo padrão do resumo do pedido: capa sozinha em cima no mobile,
   lado a lado no desktop (>=560px). */
.upsell-head { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
.upsell-head .big { margin: 0; }
.upsell-head .dl-capa { justify-self: center; }
@media (min-width: 560px) {
  .upsell-head { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 14px; }
  .upsell-head .dl-capa { justify-self: start; }
}

.upsell-price {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display);
}
.upsell-price s {
  font-family: var(--font-body); font-weight: 400; font-size: 16px;
  color: var(--text-dim); text-decoration-thickness: 1px;
}
.upsell-price s[hidden] { display: none; }
.upsell-price strong {
  font-weight: 400; font-size: clamp(26px, 3vw, 34px); color: var(--accent);
}

.discount-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.discount-badge[hidden] { display: none; }

.legal-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-link:hover { color: var(--accent); }

/* =========================================================
   Tema 3 Dias — arredondamento e profundidade.

   O checkout original era deliberadamente "radius 0, sem sombra"
   (estética editorial do projeto eleitoral). Esta landing é o
   oposto: cantos arredondados e sombra suave, igual à caixa de
   preço da própria LP. Só acréscimo no fim do arquivo — nenhuma
   regra de layout acima foi alterada.
   ========================================================= */
.card        { border-radius: 20px; }
.bump        { border-radius: 12px; }
.cta         { border-radius: 999px; }
.method-box  { border-radius: 12px; }
.field input,
.field textarea { border-radius: 10px; }
.pix-code textarea { border-radius: 10px; }

.card.summary,
.card.form {
  box-shadow: 0 14px 30px -18px rgba(23, 69, 126, .32);
}

/* CTA com o mesmo peso visual do botão da landing. */
.cta {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Acessibilidade: anel de foco visível, mesma regra da landing
   (o checkout original não definia :focus-visible). */
:focus-visible {
  outline: 3px solid var(--ink-plate);
  outline-offset: 3px;
}
.cta:focus-visible {
  outline: 3px solid var(--ink-plate);
  outline-offset: 4px;
}

/* Preço "de" riscado do item principal (o bump já tinha o seu).
   compareAtCents é só vitrine — ver api/_lib/products.js. */
.line-price s {
  color: var(--text-dim);
  font-weight: 400;
  font-size: .78em;
  margin-right: 6px;
  text-decoration-thickness: 1px;
}
.line-price s[hidden] { display: none; }

/* Badge de desconto do order bump. */
.bump-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
}
.bump-badge[hidden] { display: none; }