/* ═══════════════════════════════════════════════════════════
   Novelas Turcas — checkout próprio (checkout.html)

   Herda paleta e fontes de landing.css: quem clica no anúncio vê a landing e
   cai aqui, e um checkout com outra cara parece outro site — que é exatamente
   o momento em que se desiste de pagar.

   PISO DE NAVEGADOR: os arquivos de public/ são servidos crus e boa parte do
   público está em TV/Chrome 63-79. Por isso NÃO aparecem aqui: a razão de
   proporção automática (Chrome 88), a propriedade de deslocamento em quatro
   lados de uma vez (87), o espaçamento por gap em flexbox (84), o desfoque de
   fundo (76) e as unidades de viewport dinâmicas (108). No lugar da razão de
   proporção, o truque do padding percentual; no lugar do gap, margem.

   PÚBLICO 50+: alvo de toque nunca abaixo de 52px e texto de botão em 18px.
   Botão grande com letra pequena não resolve presbiopia.
   ═══════════════════════════════════════════════════════════ */

.ck-shell {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 96px; /* espaço pra barra fixa não cobrir o rodapé */
}

.ck {
  padding: 22px var(--margem) 34px;
}

.ck-centro { text-align: center; }

.ck-sem-js {
  max-width: 460px;
  margin: 40px auto;
  padding: 18px;
  border: 1px solid var(--crimson);
  background: rgba(200, 31, 46, .12);
  border-radius: 12px;
  text-align: center;
}

/* ─── topo e progresso ─── */

.ck-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--margem);
  border-bottom: 1px solid rgba(244, 234, 217, .12);
}

.ck-marca {
  font-family: var(--shout);
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Creme e nao vermelho: e a mesma marca do topo da landing, e la ela e
     creme com a segunda linha vermelha. */
  color: var(--cream);
  font-size: 15px;
}
.ck-marca b { color: var(--crimson-bright); font-weight: inherit; }

.ck-seguro { font-size: 12px; color: var(--cream-dim); }

.ck-prog {
  display: flex;
  padding: 0 var(--margem);
  margin-top: 12px;
}
.ck-prog i {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(244, 234, 217, .14);
  margin-right: 5px;
}
.ck-prog i:last-child { margin-right: 0; }
.ck-prog i.on { background: var(--crimson); }
.ck-prog i.done { background: var(--green); }

.ck-passo {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--crimson-claro);
  margin: 0 0 8px;
  font-weight: 700;
}
.ck-passo--ok { color: var(--green-bright); }

.ck-titulo {
  font-family: var(--romance);
  font-size: 28px;
  line-height: 1.18;
  margin: 0 0 18px;
}

/* ─── catálogo ─── */

/* Vive no rodape: as capas sao lembrete do que vem junto, nao a primeira
   coisa a decidir. Por isso o respiro em cima. */
.ck-cat-h {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: center;
  margin: 26px 0 10px;
}

.ck-cat {
  display: flex;
  margin-bottom: 10px;
}

.ck-cat-item {
  display: block;
  width: 25%;
  padding: 0 3px;
}

/* Proporção 2:3 pelo padding percentual — a razão de proporção automática só
   existe do Chrome 88 pra frente, e sem ela as capas colapsariam pra zero. */
.ck-cat-item span,
.ck-cat-item {
  position: relative;
}
.ck-cat-item img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(244, 234, 217, .1);
}

.ck-cat-nota {
  font-size: 14px;
  color: var(--cream-dim);
  text-align: center;
  margin: 0 0 22px;
}
.ck-cat-nota b { color: var(--cream); }

/* ─── planos ─── */

.ck-planos { margin-bottom: 22px; }

.ck-plano {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  margin-bottom: 10px;
  border: 1px solid #3a2422;
  border-radius: 12px;
  background: var(--ink-2);
  color: var(--cream);
  font-family: var(--body);
  cursor: pointer;
}

.ck-plano:hover { border-color: var(--crimson-bright); }

/* outline junto do focus: em TV a navegação é por controle remoto, e sem isto
   não dá pra saber qual plano está selecionado. */
.ck-plano:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold);
}

.ck-plano.on {
  border-color: var(--crimson-bright);
  background: #241412;
}

/* `.ck-plano--destaque` existe no HTML (checkout.js marca qual plano tem o
   melhor preço por mês) mas NÃO tem estilo de propósito.

   Borda ou fundo próprios faziam o cartão parecer já selecionado, e a pessoa
   abria a tela achando que a escolha estava feita. Quem sugere é só a tag
   "Mais escolhido"; quem diz o que está selecionado é `.ck-plano.on`, e uma
   coisa só de cada vez.
   A classe fica como marcador: se um dia o destaque voltar a ter cor, o gancho
   já está aqui. */

.ck-plano-esq { display: block; }
.ck-plano-esq b {
  display: block;
  font-size: 17px;
  font-weight: 700;
}
.ck-plano-esq small {
  display: block;
  color: var(--cream-dim);
  font-size: 14px;
  margin-top: 3px;
}

.ck-plano-selo {
  display: inline-block;
  background: var(--crimson);
  color: var(--cream);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 5px;
}

.ck-plano-dir {
  display: block;
  text-align: right;
  white-space: nowrap;
  padding-left: 10px;
}
.ck-plano-dir s {
  display: block;
  color: #7c7378;
  font-size: 13px;
}
.ck-plano-dir b {
  display: block;
  font-family: var(--romance);
  font-size: 24px;
  color: var(--crimson-bright);
  line-height: 1.15;
}
.ck-plano-eco {
  display: inline-block;
  margin-top: 4px;
  color: var(--green-bright);
  font-size: 13px;
  font-weight: 700;
}

/* ─── formulário ─── */

.ck-campo { margin-bottom: 14px; }
.ck-campo[hidden] { display: none; }

.ck-campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.ck-inp {
  width: 100%;
  padding: 15px 14px;
  border: 1px solid #3a2422;
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--cream);
  font-family: var(--body);
  /* 16px é o mínimo que impede o iOS de dar zoom ao focar o campo — abaixo
     disso a tela salta e a pessoa perde de vista o resto do formulário. */
  font-size: 16px;
}
.ck-inp:focus { outline: none; border-color: var(--gold); }
.ck-inp::placeholder { color: #6e666b; }

.ck-sugestao {
  display: block;
  background: none;
  border: 0;
  padding: 6px 0 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--crimson-claro);
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
}

.ck-linha { display: flex; }
.ck-linha .ck-campo { flex: 1; }
/* Margem e não gap: gap em flexbox é Chrome 84. */
.ck-linha .ck-campo + .ck-campo { margin-left: 12px; }

/* ─── forma de pagamento ─── */

.ck-metodos {
  display: flex;
  border: 1px solid #3a2422;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 12px;
  background: var(--ink-2);
}

.ck-metodo {
  flex: 1;
  padding: 11px 4px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--cream-dim);
  font-family: var(--body);
  cursor: pointer;
  margin-right: 4px;
  min-height: 56px;
}
.ck-metodo:last-child { margin-right: 0; }
.ck-metodo b { display: block; font-size: 14px; font-weight: 700; }
.ck-metodo small { display: block; font-size: 11px; margin-top: 2px; }
.ck-metodo.on {
  background: var(--crimson);
  color: var(--cream);
}

.ck-beneficios {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 164, 90, .3);
  background: rgba(34, 164, 90, .07);
  border-radius: 11px;
  font-size: 14px;
  color: var(--cream);
  line-height: 1.45;
}
.ck-beneficios li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
}
.ck-beneficios li:last-child { margin-bottom: 0; }
/* Check em CSS: sem ícone, sem arquivo, e escala junto se a pessoa aumentar a
   fonte do navegador. */
.ck-beneficios li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green-bright);
  font-weight: 800;
}

.ck-cartao[hidden] { display: none; }

/* ─── total ─── */

.ck-total {
  border-top: 1px solid rgba(244, 234, 217, .12);
  padding-top: 15px;
  margin-top: 20px;
}
.ck-trow {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--cream-dim);
  margin-bottom: 7px;
}
.ck-trow--big {
  font-size: 20px;
  color: var(--cream);
  font-weight: 700;
  margin-top: 10px;
}
.ck-recorrencia {
  font-size: 13px;
  color: var(--cream-dim);
  text-align: right;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(244, 234, 217, .12);
}

/* ─── ações ─── */

.ck-botao {
  display: block;
  width: 100%;
  padding: 17px;
  min-height: 56px;
  border: 0;
  border-radius: 11px;
  background: var(--green);
  color: #fff;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.ck-botao:hover { background: var(--green-bright); }
.ck-botao:disabled { opacity: .55; cursor: default; }
.ck-botao--wa { margin-top: 8px; text-decoration: none; text-align: center; }

/* Aviso roxo (Nubank): sinaliza sem parecer erro — vermelho aqui competiria
   com a mensagem de falha logo abaixo. */
.ck-aviso {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #8b5cf6;
  border-left-width: 4px;
  border-radius: 10px;
  background: #f4efff;
  color: #4c1d95;
  font-size: 13.5px;
  line-height: 1.45;
}
.ck-aviso b { color: #3b0f7a; }

.ck-erro {
  background: rgba(200, 31, 46, .14);
  border: 1px solid var(--crimson);
  color: var(--cream);
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 15px;
  margin: 0 0 14px;
}

.ck-fino {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-dim);
  text-align: center;
  margin: 14px auto 0;
  max-width: 36ch;
}
.ck-fino a { color: var(--crimson-claro); }

.ck-garantia {
  display: flex;
  border: 1px solid rgba(34, 164, 90, .3);
  background: rgba(34, 164, 90, .07);
  border-radius: 11px;
  padding: 13px 14px;
  margin-top: 18px;
}
.ck-garantia-ico {
  color: var(--green-bright);
  font-weight: 800;
  font-size: 18px;
  margin-right: 11px;
}
.ck-garantia b { display: block; font-size: 15px; margin-bottom: 2px; }
.ck-garantia span { font-size: 13.5px; color: var(--cream-dim); line-height: 1.45; }

.ck-entrar {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 15px;
  color: var(--cream-dim);
  text-decoration: none;
}
.ck-entrar b { color: var(--crimson-claro); text-decoration: underline; }

.ck-cnpj {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream-dim);
  opacity: .75;
  margin: 18px 0 0;
}

.ck-voltar {
  background: none;
  border: 0;
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.ck-voltar:hover { color: var(--cream); }

/* ─── etapa 2 ─── */

.ck-pix-ajuda {
  color: var(--cream-dim);
  font-size: 15px;
  margin: 0 0 16px;
}

/* Largura fixa e fundo branco: o QR precisa de contraste e área de silêncio
   pra ser lido, e o app é escuro. */
.ck-qr {
  width: 220px;
  max-width: 70%;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
}
.ck-qr:empty { display: none; }
.ck-qr[hidden] { display: none; }
.ck-qr svg { display: block; width: 100%; height: auto; }

.ck-copiado {
  background: rgba(34, 164, 90, .14);
  border: 1px solid rgba(34, 164, 90, .4);
  color: var(--green-bright);
  border-radius: 9px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  margin: 0 0 12px;
}

.ck-copia {
  width: 100%;
  padding: 12px;
  border: 1px solid #3a2422;
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--cream);
  /* O código é longo e sem espaços: quebrar em qualquer ponto é o que impede
     de vazar da caixa numa tela estreita. */
  word-break: break-all;
  font-family: monospace;
  font-size: 13px;
  margin-bottom: 12px;
  resize: none;
}

.ck-esperando {
  text-align: center;
  color: var(--crimson-claro);
  font-weight: 600;
  font-size: 15px;
  margin: 18px 0 0;
}
.ck-ponto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--crimson-bright);
  margin-right: 7px;
  animation: ck-pulsa 1.4s infinite;
}
@keyframes ck-pulsa { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .ck-ponto { animation: none } }

.ck-passos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 14.5px;
  color: var(--cream-dim);
  line-height: 1.5;
}
.ck-passos li {
  position: relative;
  padding: 8px 0 8px 34px;
}
.ck-passos i {
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--crimson-claro);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}

.ck-wa {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 234, 217, .1);
  font-size: 14px;
  color: var(--cream-dim);
}

/* ─── etapa 3 ─── */

.ck-check {
  width: 66px;
  height: 66px;
  line-height: 62px;
  border-radius: 50%;
  background: rgba(34, 164, 90, .14);
  border: 2px solid var(--green);
  color: var(--green-bright);
  font-size: 30px;
  margin: 16px auto 18px;
}

.ck-ok-resumo {
  font-size: 15px;
  color: var(--cream-dim);
  margin: 0 0 20px;
}

.ck-ok-nota {
  font-size: 14px;
  color: var(--cream-dim);
  margin: 12px 0 0;
}

/* ─── barra fixa ─── */

.ck-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--ink-2);
  border-top: 1px solid rgba(244, 234, 217, .14);
  padding: 11px var(--margem);
}
.ck-dock[hidden] { display: none; }

.ck-dock-in {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.ck-dock-v {
  display: block;
  line-height: 1.15;
  margin-right: 13px;
  white-space: nowrap;
}
.ck-dock-v small {
  display: block;
  font-size: 11px;
  color: var(--cream-dim);
  letter-spacing: .05em;
}
.ck-dock-v b { font-size: 19px; color: var(--crimson-bright); }
.ck-dock .ck-botao { flex: 1; padding: 14px; font-size: 16px; min-height: 52px; }

/* ─── order bumps (etapa 1) ───
   Caixinhas que somam no mesmo PIX. Ficam entre o plano e o formulário: só
   fazem sentido depois que a pessoa escolheu o que está comprando.

   Nenhuma vem marcada, e a marca só aparece no clique. Vir marcado é o que
   gera "não pedi isso" e estorno — e estorno custa mais que o bump rende. */

.ck-bumps { margin-bottom: 22px; }
.ck-bumps[hidden] { display: none; }

.ck-bump {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px dashed rgba(34, 164, 90, .45);
  border-radius: 12px;
  background: rgba(34, 164, 90, .05);
  color: var(--cream);
  font-family: var(--body);
  cursor: pointer;
  min-height: 72px;
}

/* Tracejado vira sólido ao marcar: a borda muda de "convite" pra "escolhido"
   sem precisar de uma segunda cor. */
.ck-bump.on {
  border-style: solid;
  border-color: var(--green);
  background: rgba(34, 164, 90, .12);
}

.ck-bump:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--green-bright);
}

/* Ícone da oferta. Some sozinho se o arquivo faltar (onerror no checkout.js),
   então a linha nunca fica com um espaço vazio no lugar da arte. */
.ck-bump-icone {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  margin-right: 12px;
  display: block;
}

/* A caixinha. 24px porque é o alvo que o dedo procura primeiro, e o público
   erra alvo pequeno. */
.ck-bump-marca {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(244, 234, 217, .35);
  border-radius: 6px;
  margin-right: 13px;
  position: relative;
}
.ck-bump.on .ck-bump-marca {
  background: var(--green);
  border-color: var(--green);
}
.ck-bump.on .ck-bump-marca::after {
  content: "✓";
  position: absolute;
  left: 4px;
  top: -2px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.ck-bump-meio { flex: 1; min-width: 0; }
.ck-bump-meio b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ck-bump-meio small {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--cream-dim);
}

.ck-bump-dir {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  padding-left: 10px;
}
.ck-bump-dir s {
  display: block;
  color: #7c7378;
  font-size: 13px;
}
.ck-bump-dir b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--green-bright);
}

/* Linha do total que mostra o tempo somado — é o que prova o bump. */
.ck-trow--ganho { color: var(--green-bright); font-weight: 700; }

/* ─── cartões brancos ───

   O fundo da página continua escuro; branco é só onde se decide e se digita.
   Texto escuro sobre branco é o contraste que o público 50+ lê sem forçar, e
   um cartão por assunto — plano, extras, seus dados, pagamento — transforma
   uma tela comprida em quatro decisões pequenas, uma de cada vez.

   Tudo aqui é cor, não estrutura: as regras acima seguem valendo pra etapa 2 e
   3, que continuam escuras. */

.ck-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  color: #1c1210;
}

.ck-card-h {
  display: flex;
  align-items: center;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 700;
  color: #1c1210;
  margin: 0 0 14px;
}

/* Ícone em SVG e não em arquivo: acompanha a cor e o tamanho da linha, e não é
   mais uma requisição entre a pessoa e o pagamento. */
.ck-card-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-card-sub {
  font-size: 14px;
  color: #6b6360;
  margin: -6px 0 12px;
}

/* Foco: o dourado da landing quase some em cima do branco. */
.ck-card :focus { outline-color: var(--crimson); }

/* ─── dentro do cartão: planos ─── */

.ck-card .ck-planos { margin-bottom: 0; }
/* Nao selecionado fica cinza e recuado; o selecionado e o unico branco, com
   borda vermelha grossa. So a borda vermelha nao dava pra ver de longe. */
.ck-card .ck-plano {
  background: #e6e2de;
  border-color: #cdc8c3;
  color: #4a403d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.ck-card .ck-plano:hover { background: #efece9; }
.ck-card .ck-plano.on {
  border: 2px solid var(--crimson);
  padding: 14px 15px; /* compensa o 2o pixel da borda pra nao pular */
  background: #fff;
  color: #1c1210;
  box-shadow: 0 2px 8px rgba(160,20,40,.14);
}
.ck-card .ck-plano:focus { box-shadow: 0 0 0 2px var(--crimson); }
.ck-card .ck-plano-esq small { color: #6b6360; }
.ck-card .ck-plano-dir s { color: #948d8a; }
.ck-card .ck-plano-dir b { color: var(--crimson); }
.ck-card .ck-plano-eco { color: var(--green); }

/* ─── dentro do cartão: bumps ─── */

.ck-card .ck-bump { color: #1c1210; }
.ck-card .ck-bump:last-child { margin-bottom: 0; }
.ck-card .ck-bump-marca { border-color: #c5c0bc; }
.ck-card .ck-bump-meio small { color: #6b6360; }
.ck-card .ck-bump-dir s { color: #948d8a; }
.ck-card .ck-bump-dir b { color: var(--green); }

/* ─── dentro do cartão: formulário ─── */

.ck-card .ck-campo label { color: #514844; }

.ck-card .ck-inp {
  background: #f7f7f8;
  border-color: #dfdcd9;
  color: #1c1210;
}
.ck-card .ck-inp:focus { border-color: var(--crimson); }
.ck-card .ck-inp::placeholder { color: #948d8a; }

.ck-card .ck-sugestao { color: var(--crimson); }

.ck-card .ck-metodos {
  background: #f2f1f0;
  border-color: #dfdcd9;
}
.ck-card .ck-metodo { color: #514844; }
.ck-card .ck-metodo.on { color: #fff; }

.ck-card .ck-beneficios {
  color: #1c1210;
  background: rgba(34, 164, 90, .09);
  border-color: rgba(34, 164, 90, .35);
}
.ck-card .ck-beneficios li::before { color: var(--green); }

.ck-card .ck-total { border-top-color: #e6e3e0; }
.ck-card .ck-trow { color: #6b6360; }
.ck-card .ck-trow--big { color: #1c1210; }
.ck-card .ck-trow--ganho { color: var(--green); }
.ck-card .ck-recorrencia {
  color: #6b6360;
  border-top-color: #e6e3e0;
}