/* ═══════════════════════════════════════════════════════════════
   AZUL 360 · CHECKOUT — pele do design system

   Só aparência. Os tokens vêm de /design/tokens.css (nada é
   redeclarado aqui); o comportamento vem de base.css.

   Regras da casa aplicadas nesta tela:
     · canvas BRANCO, cartão --cartao com fio 1px, SEM sombra
     · sombra SÓLIDA de 3px é EXCLUSIVA de botão — e todo botão tem:
       tecla escura no azul, tecla clara no branco; ao apertar afunda
       (translateY 2px + sombra encurta para 1px)
     · raio 24px domina; 14px em campo e chip; 8px em detalhe
     · azul só em ação: botão, link, item selecionado, foco
     · mobile-first (base 390px) — 88% do tráfego é celular
   ═══════════════════════════════════════════════════════════════ */

/* ── Variáveis do próprio checkout (não são tokens do sistema) ── */
:root{
  /* Coluna curta e única: checkout é leitura vertical, não layout. */
  --ck-col: 600px;

  /* O qr.js lê esta cor com getComputedStyle e joga direto no
     canvas.fillStyle. Precisa ser um literal: se viesse como
     var(--tinta) e algum motor não substituísse, o fillStyle seria
     descartado e o QR sairia branco sobre branco — ilegível.
     O valor é exatamente o de --tinta (#202020). */
  --qr-dark: #202020;
}

/* ═══ Coluna ═══ */
.ck-wrap{
  width:100%;
  max-width:var(--ck-col);
  margin-inline:auto;
  padding-inline:var(--e16);
}

/* ═══ Cabeçalho ═══ */
.ck-top{
  position:sticky; top:0; z-index:20;
  background:var(--branco);
  border-bottom:1px solid var(--fio);
  padding-top:env(safe-area-inset-top);
}
.ck-top-in{
  min-height:64px;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e12);
}
.ck-brand{ display:inline-flex; align-items:center; }
.ck-brand-logo{ height:30px; width:auto; object-fit:contain; }

.ck-top-seal{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-corpo-sm); font-weight:var(--p-med);
  color:var(--tinta-2); white-space:nowrap;
}
/* o ícone é máscara e herda currentColor; aqui ele vira ação */
.ck-top-seal::before{ background:var(--acao); }

/* ═══ Corpo ═══ */
.ck-main{
  display:block;
  padding-block:var(--e24) var(--e48);
}

/* ═══ Abertura ═══ */
.ck-lede{ margin-bottom:var(--e24); }

.ck-eyebrow{
  display:inline-flex; align-items:center;
  margin-bottom:var(--e16);
  padding:5px 12px;
  border-radius:var(--r-pilula);
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  color:var(--tinta-2);
  font-size:var(--t-legenda); font-weight:var(--p-semi);
  line-height:1.35; letter-spacing:.06em; text-transform:uppercase;
}

/* título enorme e apertado × corpo pequeno: é esse contraste que dá o tom */
.ck-h1{
  font-size:var(--t-titulo-lg);
  line-height:var(--lh-titulo-lg);
  letter-spacing:var(--ls-titulo-lg);
  font-weight:var(--p-bold);
  color:var(--tinta);
  text-wrap:balance;
}
.ck-h1 em{ font-style:normal; color:var(--acao); }

.ck-sub{
  margin-top:var(--e12);
  max-width:46ch;
  font-size:var(--t-corpo-lg);
  line-height:var(--lh-corpo-lg);
  letter-spacing:var(--ls-corpo-lg);
  color:var(--tinta-2);
}

/* ═══ Blocos — cartão cinza levíssimo, fio, SEM sombra ═══ */
.ck-block{
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  border-radius:var(--r);
  padding:var(--pad-cartao);
}
.ck-block + .ck-block{ margin-top:var(--e16); }

.ck-block-hd{
  display:flex; align-items:center; gap:var(--e12);
  margin-bottom:var(--e16);
}
.ck-step-n{
  flex:0 0 auto;
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-mini);
  background:var(--acao); color:var(--branco);
  font-size:var(--t-corpo-sm); font-weight:var(--p-bold);
  line-height:1; letter-spacing:0;
}
.ck-block-t{
  font-size:var(--t-subtitulo);
  line-height:var(--lh-subtitulo);
  letter-spacing:var(--ls-subtitulo);
  font-weight:var(--p-bold);
  color:var(--tinta);
}

/* ═══ Campos ═══ */
.ck-field{ display:flex; flex-direction:column; gap:8px; }
.ck-field + .ck-field{ margin-top:var(--e16); }

.ck-lbl{
  font-size:var(--t-corpo-sm); font-weight:var(--p-semi);
  color:var(--tinta);
}
.ck-tz{
  margin-left:6px;
  font-style:normal; font-weight:var(--p-reg);
  font-size:var(--t-legenda); color:var(--tinta-2);
}

.ck-in{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  /* 16px trava o zoom automático do Safari no iPhone */
  font-size:16px; font-weight:var(--p-reg); line-height:1.4;
  color:var(--tinta); background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r-medio);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.ck-in::placeholder{ color:var(--tinta-3); }
/* anel de foco com desfoque ZERO — no sistema não existe sombra difusa */
.ck-in:focus{
  outline:none;
  border-color:var(--acao);
  box-shadow:0 0 0 3px var(--acao-fraca);
}
.ck-in.is-bad{ border-color:var(--erro); }
.ck-in.is-bad:focus{ box-shadow:0 0 0 3px var(--erro-fundo); }

.ck-err{
  font-size:var(--t-corpo-sm); font-weight:var(--p-med);
  color:var(--erro);
}

select.ck-in{
  cursor:pointer; appearance:none; -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
}

/* grade de campos */
.ck-grid{ display:grid; gap:var(--e16); }
.ck-grid .ck-field + .ck-field{ margin-top:0; }
.ck-grid-3{ grid-template-columns:1fr 1fr; margin-top:var(--e16); }
/* "12x de R$ 8,08 sem juros" não cabe em um terço de coluna:
   parcelas ocupa a linha inteira em qualquer largura. */
.ck-field-parc{ grid-column:1 / -1; }

/* ═══ 1 · Agenda ═══ */
/* Faixa que corre até a borda do cartão: no celular a rolagem
   horizontal com snap é mais rápida que qualquer calendário.
   O respiro de baixo (12px) existe para a sombra sólida das teclas. */
.ck-dias{
  display:flex; gap:var(--e8);
  margin-inline:calc(var(--pad-cartao) * -1);
  padding:4px var(--pad-cartao) 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad-cartao);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ck-dias::-webkit-scrollbar{ display:none; }

.ck-dia{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:76px; min-height:84px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  padding:10px 6px;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r-medio);
  box-shadow:var(--tecla-clara);
  transition:background .14s ease, border-color .14s ease,
             transform .08s ease, box-shadow .08s ease;
}
.ck-dia-sem{
  font-style:normal;
  font-size:var(--t-legenda); font-weight:var(--p-med);
  color:var(--tinta-2); letter-spacing:0;
}
.ck-dia-n{
  font-size:var(--t-subtitulo);
  font-weight:var(--p-bold);
  line-height:1; letter-spacing:var(--ls-subtitulo);
}
.ck-dia-mes{
  font-style:normal;
  font-size:var(--t-legenda); font-weight:var(--p-med);
  color:var(--tinta-2); text-transform:uppercase; letter-spacing:.04em;
}
/* selecionado = tecla azul: fundo, borda escura e sombra sólida */
.ck-dia.is-sel{
  background:var(--acao);
  border-color:var(--acao-fundo);
  box-shadow:var(--tecla);
  color:var(--branco);
}
/* sobre azul nada pode ficar cinza — filhos vão a branco na marra */
.ck-dia.is-sel .ck-dia-sem,
.ck-dia.is-sel .ck-dia-mes,
.ck-dia.is-sel .ck-dia-n,
.ck-dia.is-sel i,
.ck-dia.is-sel b{ color:var(--branco); }
/* afunda */
.ck-dia:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-dia.is-sel:active{ box-shadow:var(--tecla-press); }

.ck-horas{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:var(--e12) var(--e8);
}
.ck-hora{
  min-height:52px;
  padding:12px 6px;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r-medio);
  box-shadow:var(--tecla-clara);
  font-size:var(--t-corpo); font-weight:var(--p-semi);
  font-variant-numeric:tabular-nums;
  transition:background .14s ease, border-color .14s ease,
             transform .08s ease, box-shadow .08s ease;
}
.ck-hora.is-sel{
  background:var(--acao);
  border-color:var(--acao-fundo);
  box-shadow:var(--tecla);
}
.ck-hora.is-sel,
.ck-hora.is-sel b,
.ck-hora.is-sel i{ color:var(--branco); }
.ck-hora:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-hora.is-sel:active{ box-shadow:var(--tecla-press); }

/* aviso de "sem horários": o JS injeta este <p> DENTRO da grade,
   então ele precisa atravessar as colunas — senão vira uma tira de 84px */
.ck-vazio{
  grid-column:1 / -1;
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}

.ck-agenda-note{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:var(--e16);
  padding:12px 14px;
  background:var(--ok-fundo);
  border-radius:var(--r-medio);
  font-size:var(--t-corpo-sm); color:var(--tinta);
}
.ck-agenda-note [data-ico]{
  flex:0 0 auto;
  display:inline-flex; line-height:1;
  margin-top:1px;
  font-size:16px; color:var(--ok);
}
.ck-agenda-note b{ font-weight:var(--p-semi); }

/* ═══ 3 · Pagamento ═══ */
.ck-metodos{ display:flex; flex-direction:column; gap:var(--e12); }

.ck-metodo{
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:64px;
  padding:12px 40px 12px 12px;
  text-align:left; color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r);
  box-shadow:var(--tecla-clara);
  transition:background .14s ease, border-color .14s ease,
             transform .08s ease, box-shadow .08s ease;
}
/* marca de seleção circular */
.ck-metodo::after{
  content:"";
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  border-radius:var(--r-pilula);
  border:2px solid var(--fio-forte);
  background:var(--branco);
}
.ck-metodo.is-sel{
  border-color:var(--acao);
  background:var(--acao-fraca);
  box-shadow:0 3px 0 0 var(--acao);
}
.ck-metodo.is-sel::after{
  border-color:var(--acao);
  background:var(--acao) radial-gradient(circle at center, var(--branco) 0 3.5px, transparent 4px);
}
.ck-metodo:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-metodo.is-sel:active{ box-shadow:0 1px 0 0 var(--acao); }

.ck-metodo-ic{
  flex:0 0 auto;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-mini);
  background:var(--cartao); color:var(--tinta);
  font-size:20px; line-height:1;
}
.ck-metodo.is-sel .ck-metodo-ic{ background:var(--branco); color:var(--acao); }

.ck-metodo-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ck-metodo-txt b{ font-size:var(--t-corpo); font-weight:var(--p-semi); }
.ck-metodo-txt i{
  font-style:normal;
  font-size:var(--t-legenda); color:var(--tinta-2);
}

.ck-metodo-tag{
  flex:0 0 auto;
  margin-left:auto;
  padding:4px 8px;
  border-radius:var(--r-pilula);
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  color:var(--tinta-2);
  font-size:var(--t-legenda); font-weight:var(--p-semi);
  line-height:1.25; letter-spacing:0; white-space:nowrap;
}
.ck-metodo.is-sel .ck-metodo-tag{
  background:var(--branco);
  border-color:var(--acao);
  color:var(--acao);
}

.ck-card-fields{ margin-top:var(--e16); }
.ck-card-fields > * + *{ margin-top:var(--e16); }

/* ── Ofertas extras ── */
.ck-bumps{
  display:flex; flex-direction:column; gap:var(--e12);
  margin-top:var(--e16);
}
.ck-bump{
  display:flex; align-items:flex-start; gap:var(--e12);
  width:100%;
  padding:14px;
  text-align:left; color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r);
  box-shadow:var(--tecla-clara);
  transition:background .14s ease, border-color .14s ease,
             transform .08s ease, box-shadow .08s ease;
}
.ck-bump.is-sel{
  border-color:var(--acao);
  background:var(--acao-fraca);
  box-shadow:0 3px 0 0 var(--acao);
}
.ck-bump:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-bump.is-sel:active{ box-shadow:0 1px 0 0 var(--acao); }

.ck-bump-mark{
  position:relative;
  flex:0 0 auto;
  width:22px; height:22px;
  margin-top:2px;
  border:2px solid var(--acao);
  border-radius:var(--r-mini);
  background:var(--branco);
}
.ck-bump.is-sel .ck-bump-mark{ background:var(--acao); }
/* o check usa a mesma máscara dos ícones do sistema */
.ck-bump.is-sel .ck-bump-mark::after{
  content:"";
  position:absolute; inset:2px;
  background:var(--branco);
  -webkit-mask:var(--i-check) center/contain no-repeat;
          mask:var(--i-check) center/contain no-repeat;
}

.ck-bump-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ck-bump-t{ font-size:var(--t-corpo); font-weight:var(--p-semi); }
.ck-bump-d{
  font-style:normal;
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}
.ck-bump-p{
  font-size:var(--t-corpo-sm); font-weight:var(--p-bold);
  color:var(--acao);
}

/* ── Cupom ── */
.ck-cupom{ margin-top:var(--e16); }
.ck-cupom-abrir{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0;
  color:var(--acao);
  font-size:var(--t-corpo-sm); font-weight:var(--p-semi);
  text-decoration:underline; text-underline-offset:3px;
}
.ck-cupom-box{
  display:flex; flex-direction:column; gap:8px;
  margin-top:8px;
}
.ck-cupom-row{ display:flex; align-items:flex-start; gap:var(--e8); }
.ck-cupom-row .ck-in{ flex:1 1 auto; min-width:0; text-transform:uppercase; }
.ck-cupom-btn{
  flex:0 0 auto;
  min-height:52px; padding:0 18px;
  color:var(--tinta); background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r-medio);
  box-shadow:var(--tecla-clara);
  font-size:var(--t-corpo-sm); font-weight:var(--p-semi);
  transition:background .14s ease, transform .08s ease, box-shadow .08s ease;
}
.ck-cupom-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-cupom-btn:disabled{
  opacity:.5; cursor:not-allowed;
  transform:none; box-shadow:var(--tecla-clara);
}
.ck-cupom-msg{
  font-size:var(--t-corpo-sm); font-weight:var(--p-med);
  color:var(--erro);
}
.ck-cupom-msg.is-ok{ color:var(--ok); }

/* ── Resumo ── */
.ck-resumo{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e12);
  margin-top:var(--e16);
  padding:16px;
  background:var(--branco);
  border:1px solid var(--cartao-fio);
  border-radius:var(--r-medio);
}
.ck-resumo-l{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ck-resumo-item{ font-size:var(--t-corpo); font-weight:var(--p-semi); }
.ck-resumo-sub{ font-size:var(--t-corpo-sm); color:var(--tinta-2); }
.ck-resumo-r{
  margin-left:auto;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
}
/* preço antigo: --tinta-3 não passa AA em 14px, então vai de --tinta-2 */
.ck-de{
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
  text-decoration:line-through;
}
.ck-por{
  font-size:var(--t-titulo-sm);
  line-height:1;
  letter-spacing:var(--ls-titulo-sm);
  font-weight:var(--p-bold);
  color:var(--tinta);
}
/* injetada pelo JS quando o cupom é aceito — mora DENTRO do resumo */
.ck-resumo-desconto{
  flex:1 0 100%;
  display:flex; justify-content:space-between; gap:var(--e12);
  padding-top:12px;
  border-top:1px solid var(--fio);
  font-size:var(--t-corpo-sm); font-weight:var(--p-semi);
  color:var(--ok);
}

/* ── A tecla principal ── */
.ck-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:56px;
  margin-top:var(--e16);
  padding:16px 24px;
  color:var(--branco); background:var(--acao);
  border:1px solid var(--acao-fundo);
  border-radius:var(--r);
  box-shadow:var(--tecla);
  font-size:var(--t-corpo-lg); font-weight:var(--p-semi);
  letter-spacing:var(--ls-corpo-lg); line-height:1.2;
  transition:background .14s ease, transform .08s ease, box-shadow .08s ease;
}
.ck-cta:hover{ background:var(--acao-hover); }
.ck-cta:active{ transform:translateY(2px); box-shadow:var(--tecla-press); }
.ck-cta:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:var(--tecla); }
.ck-cta-txt{ font-weight:var(--p-semi); }
.ck-cta-ic{
  display:inline-flex; line-height:1; font-size:20px;
  transition:transform .16s ease;
}
.ck-cta .ck-spin{ font-size:18px; }

/* ── Selos de confiança ── */
.ck-trust{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px var(--e16);
  margin-top:var(--e16);
}
.ck-trust span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}
.ck-trust span::before{ background:var(--acao); }

/* ═══ Tela PIX ═══ */
.ck-pix{
  display:flex; flex-direction:column;
  text-align:center;
}
.ck-pix .ck-eyebrow{ align-self:center; }
.ck-pix .ck-sub{ margin-inline:auto; }

.ck-timer{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-top:var(--e24);
  padding:16px;
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  border-radius:var(--r-medio);
}
.ck-timer-lbl{ font-size:var(--t-corpo-sm); color:var(--tinta-2); }
.ck-timer-n{
  font-size:var(--t-titulo-sm);
  line-height:1;
  letter-spacing:var(--ls-titulo-sm);
  font-weight:var(--p-bold);
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
}

.ck-qr{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:var(--e24);
}
/* fundo branco SÓLIDO e respiro: sem isso a câmera não lê o QR */
.ck-qr-box{
  width:100%; max-width:260px;
  padding:16px;
  background:var(--branco);
  border:1px solid var(--cartao-fio);
  border-radius:var(--r-medio);
}
.ck-qr-cap{ font-size:var(--t-corpo-sm); color:var(--tinta-2); }
.ck-qr-cap b{ color:var(--tinta); font-weight:var(--p-semi); }

.ck-copia{
  display:flex; flex-direction:column; gap:8px;
  margin-top:var(--e24);
  text-align:left;
}
.ck-copia-row{ display:flex; flex-direction:column; gap:var(--e12); }
/* o código tem 166 caracteres: quebra em qualquer ponto e rola dentro
   da própria caixa — nunca empurra a página no 360px */
.ck-copia-code{
  display:block;
  max-height:160px; overflow-y:auto;
  padding:14px;
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r-medio);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--t-legenda); line-height:1.55; letter-spacing:0;
  color:var(--tinta-2);
  overflow-wrap:anywhere; word-break:break-all;
}
/* botão solto = tecla clara, com a mesma física de todos os outros */
.ck-copia-btn{
  width:100%; min-height:52px;
  padding:14px 20px;
  color:var(--tinta); background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:var(--r);
  box-shadow:var(--tecla-clara);
  font-size:var(--t-corpo); font-weight:var(--p-semi);
  transition:background .14s ease, color .14s ease,
             transform .08s ease, box-shadow .08s ease;
}
.ck-copia-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); }
.ck-copia-btn.is-ok{
  background:var(--ok-fundo); color:var(--ok);
  border-color:var(--ok);
  box-shadow:0 3px 0 0 var(--ok);
}
.ck-copia-btn.is-ok:active{ box-shadow:0 1px 0 0 var(--ok); }

.ck-aguard{
  align-self:center;
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--e24);
  padding:10px 16px;
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  border-radius:var(--r-pilula);
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}
.ck-pulse{ background:var(--acao); }
/* botão-link "gerar um novo", injetado quando o código expira */
.ck-link{
  display:inline; padding:4px 2px;
  color:var(--acao); font:inherit; font-weight:var(--p-semi);
  text-decoration:underline; text-underline-offset:3px;
}
.ck-pix-agenda{
  margin-top:var(--e16);
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}
.ck-pix-agenda:empty{ display:none; }

/* ═══ Tela de oferta extra ═══ */
.ck-up-card{
  margin-top:var(--e24);
  padding:var(--pad-cartao);
  background:var(--branco);
  border:1px solid var(--acao);
  border-radius:var(--r);
}
.ck-up-t{
  font-size:var(--t-titulo-sm);
  line-height:var(--lh-titulo-sm);
  letter-spacing:var(--ls-titulo-sm);
  font-weight:var(--p-bold);
  color:var(--tinta);
}
.ck-up-d{
  margin-top:10px;
  font-size:var(--t-corpo); color:var(--tinta-2);
}
.ck-up-preco{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  margin-top:var(--e16);
}
.ck-up-nao{
  display:block; width:100%;
  min-height:44px; margin-top:12px; padding:10px;
  color:var(--tinta-2);
  font-size:var(--t-corpo-sm); font-weight:var(--p-med);
  text-decoration:underline; text-underline-offset:3px;
}
.ck-up-nao:hover{ color:var(--tinta); }
.ck-up-nota{
  margin-top:var(--e16);
  font-size:var(--t-corpo-sm); color:var(--tinta-2);
}

/* ═══ Tela de sucesso ═══ */
.ck-ok{ text-align:center; }
.ck-ok-mark{
  width:64px; height:64px;
  margin:0 auto var(--e16);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pilula);
  background:var(--ok-fundo); color:var(--ok);
  font-size:30px; line-height:1;
}
.ck-ok .ck-sub{ margin-inline:auto; }

.ck-ok-card{
  display:flex; flex-direction:column; gap:6px;
  margin-top:var(--e24);
  padding:var(--pad-cartao);
  text-align:left;
  background:var(--acao-fraca);
  border:1px solid var(--acao);
  border-radius:var(--r);
}
.ck-ok-quando{
  font-size:var(--t-subtitulo);
  line-height:var(--lh-subtitulo);
  letter-spacing:var(--ls-subtitulo);
  font-weight:var(--p-bold);
  color:var(--tinta);
}
.ck-ok-nota{ font-size:var(--t-corpo-sm); color:var(--tinta-2); }

.ck-passos{
  counter-reset:passo;
  display:flex; flex-direction:column; gap:12px;
  margin-top:var(--e24);
  text-align:left;
}
.ck-passos li{
  position:relative;
  counter-increment:passo;
  min-height:28px; padding-left:40px;
  font-size:var(--t-corpo); color:var(--tinta-2);
}
.ck-passos li::before{
  content:counter(passo);
  position:absolute; left:0; top:0;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-mini);
  background:var(--acao); color:var(--branco);
  font-size:var(--t-corpo-sm); font-weight:var(--p-bold);
  line-height:1;
}
.ck-passos b{ color:var(--tinta); font-weight:var(--p-semi); }

/* ═══ Rodapé ═══ */
.ck-foot{
  margin-top:var(--e48);
  padding-block:var(--e24);
  padding-bottom:calc(var(--e24) + env(safe-area-inset-bottom));
  border-top:1px solid var(--fio);
}
.ck-foot p{
  font-size:var(--t-corpo-sm); line-height:var(--lh-corpo-sm);
  color:var(--tinta-2);
}
.ck-foot-links{ margin-top:6px; }
/* alvo de toque decente para link de rodapé no celular */
.ck-foot-links a{
  display:inline-block; padding:8px 2px;
  color:var(--tinta);
  text-decoration:underline; text-underline-offset:3px;
}

/* ═══ Foco ═══
   O sistema aplica border-radius 8px no :focus-visible; aqui devolvemos
   a forma real de cada peça para o canto não achatar ao focar. */
.ck-cta:focus-visible,
.ck-metodo:focus-visible,
.ck-bump:focus-visible,
.ck-copia-btn:focus-visible{ border-radius:var(--r); }
.ck-in:focus-visible,
.ck-dia:focus-visible,
.ck-hora:focus-visible,
.ck-cupom-btn:focus-visible{ border-radius:var(--r-medio); }
.ck-eyebrow:focus-visible{ border-radius:var(--r-pilula); }

/* ═══ Entrada em cascata ═══ */
@keyframes ckEntra{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:none; }
}
.ck-view.is-on .ck-lede,
.ck-view.is-on .ck-block,
.ck-view.is-on .ck-pix,
.ck-view.is-on .ck-up,
.ck-view.is-on .ck-ok{
  animation:ckEntra .5s cubic-bezier(.22,.61,.36,1) both;
}
.ck-view.is-on .ck-agenda{ animation-delay:.06s; }
.ck-view.is-on .ck-dados{  animation-delay:.12s; }
.ck-view.is-on .ck-pag{    animation-delay:.18s; }

/* ═══ Hover só onde existe mouse ═══ */
@media (hover:hover){
  .ck-dia:hover{ border-color:var(--tinta-3); }
  .ck-dia.is-sel:hover{ background:var(--acao-hover); border-color:var(--acao-fundo); }
  .ck-hora:hover{ border-color:var(--tinta-3); }
  .ck-hora.is-sel:hover{ background:var(--acao-hover); border-color:var(--acao-fundo); }
  .ck-metodo:hover{ border-color:var(--tinta-3); }
  .ck-metodo.is-sel:hover{ border-color:var(--acao); }
  .ck-bump:hover{ border-color:var(--tinta-3); }
  .ck-bump.is-sel:hover{ border-color:var(--acao); }
  .ck-cupom-btn:hover{ background:var(--cartao); }
  .ck-copia-btn:hover{ background:var(--cartao); }
  .ck-cta:hover .ck-cta-ic{ transform:translateX(3px); }
  .ck-cupom-abrir:hover{ color:var(--acao-hover); }
}

/* ═══ Tablet ═══ */
@media (min-width:768px){
  .ck-wrap{ padding-inline:var(--e24); }

  .ck-top-in{ min-height:68px; }
  .ck-brand-logo{ height:32px; }

  .ck-main{ padding-block:var(--e40) var(--e64); }
  .ck-lede{ margin-bottom:var(--e32); }
  .ck-block + .ck-block{ margin-top:var(--e24); }

  /* dois campos por linha só a partir daqui: no celular a coluna
     única é mais rápida de preencher com o polegar */
  .ck-grid{ grid-template-columns:1fr 1fr; }

  .ck-dia{ width:84px; min-height:88px; }
  .ck-horas{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }

  /* sobra largura: método volta ao tamanho cheio */
  .ck-metodo{ gap:var(--e12); padding:14px 48px 14px 14px; }
  .ck-metodo-ic{ width:40px; height:40px; }
  .ck-metodo-txt i{ font-size:var(--t-corpo-sm); }
  .ck-metodo-tag{ padding:4px 10px; }

  .ck-resumo{ padding:20px; }
  .ck-cta{ min-height:60px; }
  .ck-foot{ margin-top:var(--e64); }
}

/* ═══ Desktop — segue coluna única, só respira mais ═══ */
@media (min-width:1024px){
  .ck-main{ padding-block:var(--e48) var(--e80); }
  .ck-cta{ min-height:64px; }
}

/* ═══ Movimento reduzido ═══ */
@media (prefers-reduced-motion:reduce){
  .ck-cta:active,
  .ck-dia:active,
  .ck-hora:active,
  .ck-metodo:active,
  .ck-bump:active,
  .ck-cupom-btn:active,
  .ck-copia-btn:active{ transform:none; }
  .ck-dias{ scroll-snap-type:none; }
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTE — PADRÃO DO CHECKOUT DO WHOP
   A home do Whop é expansiva; o checkout dele é o oposto: enxuto,
   campos de 44px agrupados, botão de raio 8px, coluna de ~324px
   num aparelho de 390px. Este bloco vem por último e recalibra a
   tela para esse padrão, sem tocar no design system.

   Valores medidos no checkout real:
     coluna 324px · campo 44px · botão 55px raio 8px peso 500
     preço 32px peso 600 tracking -1.78px · rótulo 14px peso 500
   ═══════════════════════════════════════════════════════════════ */

/* ── Coluna mais estreita e respiro menor ── */
.ck-wrap{ max-width:440px; padding-inline:20px; }
.ck-main{ padding-block:var(--e16) var(--e32); }

/* ── Abertura compacta: o preço é o herói, não o título ── */
.ck-lede{ margin-bottom:var(--e16); text-align:center; }
.ck-eyebrow{ margin-bottom:10px; }
.ck-h1{
  font-size:var(--t-titulo-sm);
  line-height:1.1;
  letter-spacing:-0.9px;
}
.ck-sub{
  margin-top:8px;
  margin-inline:auto;
  font-size:var(--t-corpo);
  max-width:38ch;
}

/* ── Blocos: sem cartão cinza, apenas régua entre etapas ── */
.ck-block{
  background:transparent;
  border:0;
  border-top:1px solid var(--fio);
  border-radius:0;
  padding:var(--e24) 0 0;
}
.ck-block:first-of-type{ border-top:0; padding-top:var(--e8); }
.ck-block + .ck-block{ margin-top:var(--e24); }

.ck-block-hd{ margin-bottom:var(--e12); gap:10px; }
.ck-step-n{
  width:24px; height:24px;
  font-size:var(--t-legenda);
  border-radius:6px;
}
.ck-block-t{
  font-size:var(--t-corpo-lg);
  letter-spacing:-0.3px;
  font-weight:var(--p-semi);
}

/* ── AGENDA COMPACTA ──
   Era o bloco mais alto da tela: 20 horários em cartões grandes
   empurravam o botão de pagar para muito abaixo da dobra. Agora os
   chips de dia são menores e os horários ficam numa grade de 4
   colunas com altura limitada e rolagem própria. */
.ck-dias{
  margin-inline:0;
  padding:2px 0 8px;
  gap:6px;
}
.ck-dia{
  width:58px; min-height:62px;
  padding:6px 4px; gap:1px;
  border-radius:10px;
  box-shadow:none;              /* sem tecla aqui: é uma lista, não um botão de ação */
  border-color:var(--fio-forte);
}
.ck-dia-sem{ font-size:10px; }
.ck-dia-n{ font-size:18px; letter-spacing:-0.4px; }
.ck-dia-mes{ font-size:9px; }
.ck-dia.is-sel{ box-shadow:none; }
.ck-dia:active{ transform:none; box-shadow:none; }

.ck-horas{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  /* ~4 linhas visíveis; o resto rola dentro do próprio bloco */
  max-height:196px;
  overflow-y:auto;
  padding:2px 2px 2px 0;
  scrollbar-width:thin;
}
.ck-hora{
  min-height:42px;
  padding:0 4px;
  font-size:var(--t-corpo-sm);
  font-weight:var(--p-semi);
  border-radius:10px;
  box-shadow:none;              /* idem: lista, não tecla */
  border-color:var(--fio-forte);
}
.ck-hora.is-sel{ box-shadow:none; }
.ck-hora:active{ transform:none; box-shadow:none; }

/* ── Campos no padrão do checkout: 44px, agrupados ── */
.ck-in{
  min-height:44px;
  padding:10px 14px;
  border-radius:10px;
}
.ck-lbl{ font-size:var(--t-corpo-sm); font-weight:var(--p-med); }
.ck-field + .ck-field{ margin-top:var(--e12); }
.ck-grid{ gap:var(--e12); }

/* ── Métodos de pagamento: linhas coladas, como no Stripe/Whop ── */
.ck-metodos{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--fio-forte);
  border-radius:10px;
  overflow:hidden;
}
.ck-metodo{
  border:0;
  border-bottom:1px solid var(--fio-forte);
  border-radius:0;
  box-shadow:none;
  min-height:56px;
  background:var(--branco);
}
.ck-metodo:last-child{ border-bottom:0; }
.ck-metodo.is-sel{ background:var(--acao-fraca); }
.ck-metodo:active{ transform:none; box-shadow:none; }

/* ── Resumo enxuto: o preço é o elemento dominante ── */
.ck-resumo{
  background:transparent;
  border:0;
  border-top:1px solid var(--fio);
  border-radius:0;
  padding:var(--e16) 0 0;
  margin-top:var(--e16);
}
.ck-por{
  font-size:32px;
  font-weight:var(--p-semi);
  letter-spacing:-1.78px;
}
.ck-de{ font-size:var(--t-corpo-sm); }

/* ── Botão: padrão do checkout (raio 8px, sólido, sem tecla) ── */
.ck-cta{
  min-height:52px;
  border-radius:8px;
  border:0;
  box-shadow:none;
  font-size:var(--t-corpo);
  font-weight:var(--p-semi);
  margin-top:var(--e16);
}
.ck-cta:active{ transform:none; box-shadow:none; opacity:.9; }

.ck-trust{ margin-top:var(--e12); font-size:var(--t-legenda); }

/* ── Rodapé compacto ── */
.ck-foot{ margin-top:var(--e32); }

/* ── Desktop: só amplia o respiro, sem virar duas colunas ── */
@media (min-width:768px){
  .ck-wrap{ max-width:460px; }
  .ck-h1{ font-size:var(--t-titulo); letter-spacing:-1.2px; }
  .ck-dia{ width:64px; min-height:66px; }
  .ck-horas{ max-height:220px; }
}

/* ═══════════════════════════════════════════════════════════════
   FLUXO EM DOIS PASSOS
   Passo 1: só o agendamento. Passo 2: dados e pagamento.
   Sem cabeçalho, sem selos e sem rodapé — a tela é a decisão.
   ═══════════════════════════════════════════════════════════════ */

.ck-main{ padding-block:var(--e32) var(--e40); }

/* Mensagem sob o botão Confirmar */
.ck-promessa{
  margin-top:var(--e16);
  padding:14px 16px;
  background:var(--cartao);
  border:1px solid var(--cartao-fio);
  border-radius:12px;
  font-size:var(--t-corpo-sm);
  line-height:1.55;
  color:var(--tinta-2);
  text-align:center;
}
.ck-promessa b{
  color:var(--tinta);
  font-weight:var(--p-semi);
  white-space:nowrap;
}

/* ── Transição de 4s entre os passos ──
   O conteúdo atrás desfoca e escurece de leve; o cartão de status
   entra por cima. Sem isso a troca de tela seria brusca demais para
   um passo que decide a compra. */
.ck-borrado > main{
  filter:blur(6px);
  transform:scale(.99);
  transition:filter .35s ease, transform .35s ease;
  pointer-events:none;
  user-select:none;
}

.ck-transicao{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:var(--e24);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .3s ease;
}
.ck-transicao.is-on{ opacity:1; }

.ck-transicao-in{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:100%; max-width:320px;
  padding:28px 24px;
  background:var(--branco);
  border:1px solid var(--fio-forte);
  border-radius:16px;
  text-align:center;
  transform:translateY(8px) scale(.98);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.ck-transicao.is-on .ck-transicao-in{ transform:none; }

.ck-transicao-spin{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--acao-fraca);
  border-top-color:var(--acao);
  animation:ckGira .8s linear infinite;
}
.ck-transicao-t{
  font-size:var(--t-corpo-lg);
  font-weight:var(--p-semi);
  letter-spacing:-.3px;
  color:var(--tinta);
}
.ck-transicao-d{
  font-size:var(--t-corpo-sm);
  color:var(--tinta-2);
  min-height:1.4em;
}

@media (prefers-reduced-motion:reduce){
  .ck-borrado > main{ filter:none; transform:none; }
  .ck-transicao,
  .ck-transicao-in{ transition:none; }
  .ck-transicao-spin{ animation-duration:1.6s; }
}

/* ═══════════════════════════════════════════════════════════════
   MARCA DO PIX
   O símbolo é do Banco Central. Ele ganha a cor oficial (#32BCAD)
   em vez do azul da nossa paleta: é assim que o cliente reconhece
   o meio de pagamento de imediato — vale mais que a coerência
   cromática aqui. Vale só para este ícone.
   ═══════════════════════════════════════════════════════════════ */
.ck-metodo[data-metodo="pix"] .ck-metodo-ic{
  color:#32BCAD;
  background:#eafaf7;
}
/* Selecionado: o quadro fica branco e o símbolo mantém a cor da marca */
.ck-metodo[data-metodo="pix"].is-sel .ck-metodo-ic{
  background:var(--branco);
  color:#32BCAD;
}

/* Na tela do QR o símbolo aparece acima do código, como assinatura
   do meio de pagamento */
.ck-pix-marca{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:var(--e12);
  font-size:var(--t-corpo-sm);
  font-weight:var(--p-semi);
  color:var(--tinta-2);
}
.ck-pix-marca::before{
  content:"";
  width:20px; height:20px;
  background:#32BCAD;
  -webkit-mask-image:var(--i-pix); mask-image:var(--i-pix);
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}