/* ══════ CHECKOUT EM PÁGINA — FONTE ÚNICA das regras .ck-* ══════

   Consumido pelas DUAS cascas: `checkout.html` (raiz, V1) e `vendas-v2/checkout.html`
   (V2/V3). Corrigir o estilo aqui corrige nas duas — NÃO duplicar em lugar nenhum.

   ESTE ARQUIVO NÃO DECLARA CAMADA, e é a mesma regra do topo de `checkout.css`: quem
   importa decide. Aqui os dois consumidores são páginas PRÓPRIAS, sem `<style>` em
   camadas competindo — não há o que vencer, e embrulhar tudo num `@layer` só criaria
   uma camada que perderia para qualquer regra sem camada que um dia entrasse.

   A ESTRUTURA É A DO NAOR, A PALETA É A DO MAC (AS-03 / D-3). NENHUM literal de cor do
   checkout de lá pode aparecer neste arquivo, nem sequer dentro de um comentário — e é
   uma asserção de teste, não uma recomendação: o mapa completo dos três azuis e do que
   cada um virou está em `design.md`, seção "4. checkout-pagina.css". Em resumo: o
   gradiente do botão vira o mesmo dourado de `.co-btn--primary`, as bordas viram
   `var(--line)`, o texto secundário vira `var(--muted)` e o realce vira `var(--gold)`.
   Checkout azul depois de uma landing dourada é quebra de marca no exato momento em que
   o comprador mais precisa reconhecer onde está.

   OS DOIS PISOS ABAIXO SÃO HERDADOS DO MODAL E NÃO SÃO OPCIONAIS:
     • `font-size:16px` em todo campo (QUAL-09) — abaixo disso o Safari do iOS dá zoom
       automático ao focar, e a pessoa perde o contexto no meio do preenchimento;
     • `min-height:44px` em todo alvo de toque (QUAL-07). */

:root {
  /* Tokens copiados de `area.css:24-31` — mesmos valores da landing (AD-003, AD-011,
     AD-012). `--hot` vem de `vendas-v2/index.html:173`, onde a paleta oficial mora. */
  --paper: #160506;
  --card:  #240808;
  --gold:  #efb93f;
  --hot:   #e7ad37;
  --line:  #542019;
  --ink:   #fff7ea;
  --muted: #c9aa97;

  --sans:  'Montserrat', system-ui, sans-serif;

  /* Medidas do desenho do Naor, mantidas: 1080px de corpo e 340px de barra. */
  --ck-largura: 1080px;
  --ck-sidebar: 340px;
  --ck-header-h: 58px;
}

* { box-sizing: border-box; }

body.ck {
  margin: 0;
  padding-top: var(--ck-header-h);
  background:
    radial-gradient(circle at 72% 0, rgba(126, 36, 18, .18), transparent 24%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ══════ SEM JAVASCRIPT ══════ */
.ck-noscript {
  max-width: 520px;
  margin: 12vh auto;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
  line-height: 1.55;
}
.ck-noscript a { color: var(--gold); }

/* ══════ CABEÇALHO FIXO (CKPG-02) ══════ */
.ck-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--ck-header-h);
  border-bottom: 1px solid var(--line);
  background: rgba(22, 5, 6, .72);
  backdrop-filter: blur(14px);
}
.ck-header-in {
  max-width: var(--ck-largura);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ck-voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.ck-voltar:hover { color: var(--ink); }
.ck-voltar-seta { font-size: 1.05rem; line-height: 1; }
.ck-marca {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.ck-seguro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}
.ck-seguro svg { width: 16px; height: 16px; color: var(--gold); }

/* ══════ GRID — DUAS COLUNAS A PARTIR DE 1024px (CKPG-01) ══════

   A ordem do markup é formulário → barra de confiança, e ela NÃO é invertida em lugar
   nenhum. É o que faz a barra cair DEPOIS do formulário no celular (CKPG-61) sem que
   leitor de tela e teclado percorram a página numa ordem diferente da visual. */
.ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  max-width: var(--ck-largura);
  margin: 0 auto;
  padding: 28px 20px 64px;
}
@media (min-width: 1024px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr) var(--ck-sidebar); gap: 24px; padding-top: 40px; }
}

.ck-col { min-width: 0; }

/* ══════ IDENTIDADE DO PRODUTO ══════ */
.ck-produto { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.ck-produto-foto {
  width: 56px; height: 56px; flex: none;
  border-radius: 16px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.ck-produto-txt { min-width: 0; }
.ck-produto-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.ck-produto-titulo span { color: var(--muted); font-weight: 500; }
.ck-produto-sub { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }

/* ══════ RESUMO DO PLANO (CKPG-03) ══════ */
.ck-resumo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 247, 234, .04);
}
.ck-resumo-nome { font-size: .9rem; font-weight: 600; }
.ck-resumo-valores { text-align: right; }
.ck-resumo-parcela { display: block; font-size: 1.1rem; color: var(--gold); }
.ck-resumo-total { display: block; font-size: .78rem; color: var(--muted); }

/* ══════ FORMULÁRIO ══════ */
.ck-form { margin: 0; }
.ck-alerta {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #8a3b2c;
  border-radius: 12px;
  background: rgba(138, 59, 44, .18);
  font-size: .88rem;
}
.ck-alerta[hidden] { display: none; }

.ck-campo { margin-bottom: 14px; }
.ck-label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; }
.ck-label span { font-weight: 500; color: var(--muted); }

/* QUAL-09 (16px) + QUAL-07 (44px) — ver o cabeçalho. Valem em TODA largura, não só no
   celular: o defeito do zoom do iOS não é exclusivo de tela pequena, e um alvo curto
   continua curto num tablet. */
.ck-input, .ck-select {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 247, 234, .04);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
}
.ck-input::placeholder { color: rgba(201, 170, 151, .7); }
.ck-input:focus, .ck-select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ck-caixa-alta { text-transform: uppercase; }

.ck-err { display: none; margin: 6px 0 0; font-size: .78rem; color: #f0a08c; }
.ck-campo.err .ck-err { display: block; }
.ck-campo.err .ck-input, .ck-campo.err .ck-select { border-color: #b8503c; }

.ck-hint { margin: 0 0 14px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.ck-subttl { margin: 18px 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* WhatsApp + DDI + a setinha que grava o lead */
.ck-phone { display: flex; gap: 8px; align-items: stretch; }
.ck-phone .ck-ddi { width: 116px; flex: none; }
.ck-phone .ck-input { flex: 1 1 auto; }
.ck-avancar {
  flex: none;
  width: 48px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 52%, var(--hot) 100%);
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-avancar svg { width: 18px; height: 18px; }
.ck-avancar:hover { filter: brightness(1.06); }
.ck-avancar[disabled] { opacity: .45; pointer-events: none; }

/* ══════ O BLOCO TRAVADO (CKPG-04 / CKPG-06) ══════

   `pointer-events:none` tira o mouse; quem tira o TECLADO é o atributo `disabled` do
   próprio `<fieldset>`, que remove os campos da ordem de tabulação por regra do HTML.
   A opacidade abaixo é só a metade visível dessa mesma verdade — sozinha ela mentiria,
   e o teclado alcançaria o que o mouse não alcança. */
.ck-travado {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  transition: opacity .45s ease;
}
.ck-travado[disabled] { opacity: .4; pointer-events: none; user-select: none; }

.ck-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 247, 234, .04);
  font-size: .9rem;
}
.ck-sum-r { font-weight: 700; color: var(--gold); }
.ck-sum-r small { font-weight: 500; color: var(--muted); }
.ck-sum-alt { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.ck-sum-alt[hidden] { display: none; }

.ck-metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ck-metodo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 247, 234, .04);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.ck-metodo svg { width: 18px; height: 18px; }
.ck-metodo.sel { border-color: var(--gold); color: var(--gold); background: rgba(239, 185, 63, .1); }
.ck-metodo[hidden] { display: none; }
/* Fora do Brasil o PIX some e o cartão ocupa a largura inteira (CKPG-40) — sem buraco
   na grade, que é o defeito que `mobile.spec.js:90` já pegou uma vez no modal. */
.ck-metodos.so-cartao { grid-template-columns: minmax(0, 1fr); }

.ck-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ck-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) {
  .ck-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#ck-card-fields[hidden], #ck-billing[hidden], #ck-bintl[hidden], #ck-usd[hidden] { display: none; }

.ck-usd {
  display: flex; gap: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 247, 234, .04);
}
.ck-usd-txt { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--muted); }

.ck-pagar {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  /* O MESMO gradiente de `.co-btn--primary` (checkout.css:169): a página nova e o
     modal legado precisam ler como o mesmo produto enquanto os dois existirem. */
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 52%, var(--hot) 100%);
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(239, 185, 63, .55);
}
.ck-pagar:hover { filter: brightness(1.06); }
.ck-pagar[disabled] { opacity: .55; pointer-events: none; }

.ck-selo-linha {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}
.ck-selo-linha svg { width: 15px; height: 15px; flex: none; color: var(--gold); }

.ck-btn-ghost {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(239, 185, 63, .18);
  border-radius: 12px;
  background: rgba(255, 247, 234, .05);
  color: var(--ink);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.ck-btn-ghost:hover { background: rgba(255, 247, 234, .1); }

/* ══════ RESULTADO — substitui o formulário na mesma rota (CKPG-13) ══════ */
.ck-resultado { position: relative; }
.ck-resultado[hidden] { display: none; }
.ck-resultado-in {
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  text-align: center;
}
.ck-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ck-check {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(239, 185, 63, .14);
  color: var(--gold);
}
.ck-check svg { width: 28px; height: 28px; }
.ck-resultado-titulo { margin: 0 0 8px; font-size: 1.35rem; }
.ck-g { color: var(--gold); }
.ck-resultado-msg { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

.ck-pixbox { margin-top: 20px; }
.ck-pixbox[hidden] { display: none; }
.ck-paystatus {
  display: inline-block;
  padding: 7px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}
.ck-paystatus[hidden] { display: none; }
.ck-paystatus.pago { border-color: var(--gold); color: var(--gold); }
.ck-paystatus.falho { border-color: #b8503c; color: #f0a08c; }
.ck-pixqr { display: flex; justify-content: center; }
.ck-pixqr img, .ck-pixqr canvas { max-width: 100%; height: auto; border-radius: 12px; }
.ck-pixhint { margin: 14px 0 8px; font-size: .82rem; color: var(--muted); }
.ck-pixcode {
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 247, 234, .04);
  font-size: .74rem;
  line-height: 1.5;
  word-break: break-all;
  text-align: left;
}

/* ══════ BARRA DE CONFIANÇA (CKPG-60 / CKPG-61) ══════ */
.ck-sidebar { display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
  .ck-sidebar { position: sticky; top: calc(var(--ck-header-h) + 24px); }
}

.ck-selo { position: relative; width: 160px; height: 160px; margin: 0 auto 6px; }
.ck-selo-anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  animation: ckGirar 46s linear infinite;
}
@keyframes ckGirar { to { transform: rotate(360deg); } }
.ck-selo-miolo {
  position: absolute;
  inset: 27%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(239, 185, 63, .4);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--card) 0%, var(--paper) 100%);
  color: var(--gold);
  box-shadow: 0 0 40px -8px rgba(239, 185, 63, .45), inset 0 0 24px -10px rgba(239, 185, 63, .4);
}
.ck-selo-miolo svg { width: 22px; height: 22px; }
.ck-selo-miolo small { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* CKPG-62 — quem pediu menos movimento não recebe um selo girando ao lado do campo
   de cartão. É preferência declarada pelo sistema operacional, não enfeite. */
@media (prefers-reduced-motion: reduce) {
  .ck-selo-anel { animation: none; }
  .ck-travado { transition: none; }
}

.ck-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 247, 234, .04);
}
.ck-card-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid rgba(239, 185, 63, .3);
  border-radius: 12px;
  background: var(--card);
  color: var(--gold);
}
.ck-card-ico svg { width: 20px; height: 20px; }
.ck-card-titulo { margin: 0; font-size: .9rem; font-weight: 700; }
.ck-card-txt { margin: 3px 0 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.ck-card-total { display: block; margin-top: 5px; color: var(--ink); font-weight: 700; }