/* checkout · usa os tokens e componentes de /css/style.css */
.ck { background: var(--bg); }
.ck-container { max-width: 1080px; margin-inline: auto; padding-inline: 1.25rem; }

/* topo */
.ck-topo { border-bottom: 1px solid var(--line); }
.ck-topo-in { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.ck-marca { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.04em; text-decoration: none; }
.ck-seguro { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 500; color: var(--text-2); }
.ck svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* grade */
.ck-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}
.ck-titulo { margin-bottom: 2rem; }
.ck-titulo .lk-medio { font-size: clamp(2rem, 5vw, 3rem); }

/* passos */
.ck-passo { border: 0; padding: 0; margin: 0 0 2.25rem; min-width: 0; }
.ck-passo legend { display: flex; align-items: center; gap: .65rem; padding: 0; margin-bottom: 1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.ck-n { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--text); color: var(--bg); font-size: .9rem; }

/* opções (radio em card) */
.ck-formas { display: grid; gap: .65rem; }
.ck-op input, .ck-livro input { position: absolute; opacity: 0; pointer-events: none; }
.ck-op-in {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem 1rem 3rem; border: 1px solid var(--line); border-radius: 1.1rem; cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.ck-op-in::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid #bdbdbd; background: var(--bg); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ck-op-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ck-op-topo b { font-weight: 600; }
.ck-op-in small { color: var(--text-2); font-size: .88rem; }
.ck-reco { align-self: flex-start; margin-top: .25rem; font-size: .75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ck-op-in:hover { border-color: #9c9c9c; }
.ck-op input:checked + .ck-op-in { border-color: var(--text); background: var(--soft); }
.ck-op input:checked + .ck-op-in::before { border-color: var(--text); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--text); }
.ck-op input:focus-visible + .ck-op-in, .ck-livro input:focus-visible + .ck-livro-in { outline: 2px solid var(--text); outline-offset: 3px; }

/* livros (forma 2) */
.ck-livros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.ck-livro-in {
  position: relative; display: flex; flex-direction: column; gap: .6rem; height: 100%;
  padding: .6rem .6rem .8rem; border: 1px solid var(--line); border-radius: 1.1rem; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.ck-livro-img { position: relative; aspect-ratio: 1; border-radius: .8rem; background: var(--soft); }
.ck-livro-img img { position: absolute; inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); object-fit: contain; }
.ck-livro-in b { font-weight: 500; font-size: .82rem; line-height: 1.3; }
.ck-ganho { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; color: var(--text-2); font-size: .74rem; line-height: 1.25; }
.ck-ganho strong { font-size: .9rem; white-space: nowrap; }
.ck-ganho-nota { margin-top: .7rem; color: var(--text-2); font-size: .78rem; line-height: 1.4; }
.ck-livro-in:hover { border-color: #9c9c9c; }
.ck-livro input:checked + .ck-livro-in { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.ck-selo { position: absolute; z-index: 1; top: 1rem; left: 1rem; font: 600 .68rem/1 var(--font-body); color: var(--bg); background: var(--text); padding: .35rem .55rem; border-radius: 999px; }

/* campos */
.ck-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ck-campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ck-campo--cheio { grid-column: 1 / -1; }
.ck-campo > span { font-size: .85rem; font-weight: 500; }
.ck-campo input, .ck-campo select {
  width: 100%; font: 400 1rem/1.2 var(--font-body); color: var(--text);
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--bg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); appearance: none; -webkit-appearance: none;
}
.ck-campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.75rem;
}
.ck-campo input::placeholder { color: #b0b0b0; }
.ck-campo input:hover, .ck-campo select:hover { border-color: #9c9c9c; }
.ck-campo input:focus, .ck-campo select:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.ck-campo.erro input { border-color: #d12c2c; box-shadow: 0 0 0 1px #d12c2c; }
.ck-erro { font-style: normal; font-size: .8rem; color: #d12c2c; }
p.ck-erro { margin-top: .6rem; }

/* abas de pagamento */
.ck-abas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 4px; border: 1px solid var(--line); border-radius: 1rem; margin-bottom: 1rem; }
.ck-abas button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 .95rem/1 var(--font-body); color: var(--text-2); background: none; border: 0; border-radius: .75rem; padding: .85rem; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.ck-abas button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.ck-abas button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ck-pix-info { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--soft); font-size: .9rem; color: var(--text-2); }
.ck-pix-info li { position: relative; padding-left: 1.2rem; }
.ck-pix-info li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--text); }

/* cartão desenhado: é o próprio formulário */
.ck-cv-dica { margin-bottom: .8rem; font-size: .85rem; color: var(--text-2); }
.ck-cartao { max-width: 23rem; margin-bottom: .6rem; perspective: 1200px; }
.ck-cartao-in { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.ck-cartao.virado .ck-cartao-in { transform: rotateY(180deg); }
.ck-cv-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem;
  padding: 1.1rem 1.25rem; border-radius: 1.2rem; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #1d1d1d, #000);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ck-cv-verso { transform: rotateY(180deg); justify-content: flex-start; padding-top: 0; pointer-events: none; }
.ck-cartao.virado .ck-cv-verso { pointer-events: auto; }
.ck-cartao.virado .ck-cv-frente { pointer-events: none; }
.ck-cv-chip { position: absolute; top: 1.15rem; left: 1.25rem; width: 2.4rem; height: 1.8rem; border-radius: .4rem; background: linear-gradient(135deg, #d9d9d9, #8f8f8f); }
.ck-cv-bandeira { position: absolute; top: 1.05rem; right: 1.25rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; opacity: .5; transition: opacity .3s var(--ease); }
.ck-cartao[data-bandeira]:not([data-bandeira=""]) .ck-cv-bandeira { opacity: 1; }

/* campos dentro do cartão: transparentes, acendem ao tocar */
.ck-cv-campo { gap: .1rem; }
.ck-cv-campo > span { font-size: .66rem; font-weight: 500; color: #9a9a9a; padding-left: .45rem; }
.ck-campo.ck-cv-campo input {
  padding: .35rem .45rem; border: 0; border-radius: .55rem; background: transparent; color: #fff; caret-color: #fff;
  font-size: 1rem; box-shadow: none; transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ck-campo.ck-cv-campo input::placeholder { color: #6f6f6f; }
.ck-campo.ck-cv-campo input:hover { background: rgba(255,255,255,.06); }
.ck-campo.ck-cv-campo input:focus { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.ck-campo.ck-cv-campo.erro input { box-shadow: inset 0 0 0 1px #ff6b6b; }
.ck-cv-num input { font-size: clamp(1.05rem, 4.4vw, 1.3rem); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ck-cv-baixo { display: flex; gap: .5rem; }
.ck-cv-nome { flex: 1; }
.ck-cv-val { flex: none; width: 5.2rem; }
.ck-cv-val input, .ck-cv-cvv input { font-variant-numeric: tabular-nums; }
.ck-cv-virar {
  position: absolute; right: 1.25rem; top: 3.3rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #cfcfcf;
  font: 500 .68rem/1.4 var(--font-body); cursor: pointer;
}
.ck-cv-virar:hover { background: rgba(255,255,255,.18); color: #fff; }
.ck-cv-virar svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-cv-verso .ck-cv-virar { top: auto; bottom: 1rem; }
.ck-cv-tarja { display: block; height: 2.6rem; margin: 1.2rem -1.25rem .9rem; background: #0b0b0b; box-shadow: inset 0 1px 0 #2a2a2a, inset 0 -1px 0 #2a2a2a; }
.ck-cv-assina { display: flex; align-items: flex-end; gap: .6rem; }
.ck-cv-risco { flex: 1; height: 2.2rem; border-radius: .35rem; background: repeating-linear-gradient(-45deg, #e9e9e9 0 6px, #d6d6d6 6px 12px); }
.ck-cv-cvv { flex: none; width: 4.6rem; }
.ck-cv-ajuda { font-size: .72rem; color: #9a9a9a; max-width: 13rem; }
.ck-cv-erros { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; }
.ck-cv-erros:not(:has(.ck-erro:not([hidden]))) { display: none; }

/* pagar */
.ck-pagar { padding-block: 1.15rem; font-size: 1.02rem; font-weight: 600; }
.ck-pagar[aria-busy="true"] { opacity: .7; pointer-events: none; }
.ck-letras { margin-top: .9rem; font-size: .78rem; color: var(--text-2); text-align: center; }

/* resumo */
.ck-resumo { position: sticky; top: 1.5rem; }
.ck-resumo-in { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1.4rem; }
.ck-resumo-t { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1; }
.ck-capas { display: flex; justify-content: center; align-items: flex-end; height: 9rem; border-radius: 1rem; background: var(--soft); padding: 1rem 1rem .9rem; }
.ck-capas img { height: 100%; width: auto; max-width: 30%; object-fit: contain; margin-inline: -.45rem; }
.ck-capas img:nth-child(odd) { transform: rotate(-4deg); }
.ck-capas img:nth-child(even) { transform: rotate(4deg) translateY(-4px); }
.ck-capas.um img { max-width: 60%; margin: 0; transform: none; }
.ck-resumo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.ck-resumo-topo b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.02em; }
.ck-resumo-topo .modelo { flex: none; }
.ck-resumo .ganho strong { font-size: 1.25rem; }
.ck-resumo .lista { font-size: .9rem; }
.ck-total { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 1rem; border-top: 1px solid var(--line); }
.ck-total span { font-weight: 500; }
.ck-total small { display: block; font-size: .78rem; font-weight: 400; color: var(--text-2); }
.ck-total b { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; }
.ck-garantias { display: grid; gap: .55rem; font-size: .85rem; color: var(--text-2); }
.ck-garantias li { display: flex; align-items: center; gap: .55rem; }

/* tela do pix */
.ck-pixtela { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.25rem; background: rgba(255,255,255,.92); overflow-y: auto; }
.ck-pixtela[hidden] { display: none; }
.ck-pixcaixa {
  width: 100%; max-width: 26rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 2rem 1.5rem; border: 1px solid var(--line); border-radius: 1.6rem; background: var(--bg);
  animation: entra .6s var(--ease) both;
}
.ck-pixcaixa .lk-medio { font-size: clamp(2rem, 7vw, 2.6rem); }
.ck-pix-sub { margin: .75rem 0 1.25rem; color: var(--text-2); font-size: .92rem; }
.ck-pix-sub b { color: var(--text); }
.ck-qr { display: grid; place-items: center; width: 13rem; aspect-ratio: 1; border: 1.5px dashed #cfcfcf; border-radius: 1.2rem; color: #b4b4b4; font-size: .8rem; }
.ck-copia { display: flex; gap: .5rem; width: 100%; margin-top: 1.25rem; }
.ck-copia input { flex: 1; min-width: 0; font: 400 .85rem/1 var(--font-body); color: var(--text-2); padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); }
.ck-copia .btn { padding: .85rem 1.2rem; }
.ck-espera { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-size: .85rem; color: var(--text-2); }
.ck-pulso { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text); animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .2; } }
.ck-voltar { margin-top: .9rem; font: 500 .85rem/1 var(--font-body); color: var(--text); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* responsivo */
@media (max-width: 900px) {
  .ck-grid { grid-template-columns: 1fr; }
  .ck-resumo { position: static; order: -1; }
  .ck-capas { height: 7.5rem; }
}
@media (max-width: 620px) {
  .ck-livros { grid-template-columns: 1fr 1fr; }
  .ck-campos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-pixcaixa, .ck-pulso { animation: none; }
  .ck-op-in, .ck-op-in::before, .ck-livro-in, .ck-campo input, .ck-abas button, .ck-cartao-in { transition: none; }
}
.ck-capas-vazio { align-self: center; font-size: .8rem; color: #b4b4b4; }

/* "relaxe, seus dados estão seguros" */
.ck-titulo { margin-bottom: 1rem; }
.ck-relaxe {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 2rem;
  padding: .6rem .95rem; border-radius: 999px; background: var(--soft);
  font-size: .88rem; color: var(--text); text-decoration: none;
  transition: background-color .25s var(--ease);
}
.ck-relaxe u { text-underline-offset: 3px; }
.ck-relaxe:hover { background: #ebebeb; }
.ck-relaxe:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* etiqueta e preço dentro de cada opção (igual aos cards da home) */
.ck-op-tag { font-size: .75rem; font-weight: 500; color: var(--text-2); }
.ck-op-preco { margin-top: .2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.ck-op-preco em { font: 400 .8rem/1.3 var(--font-body); font-style: normal; color: var(--text-2); letter-spacing: 0; }
/* etiqueta de preço: verde, ponta cortada e furinho à esquerda, valor em preto */
.ck-ganho strong, .ck-op-ganho, .ganho-valor {
  position: relative; display: inline-flex; align-items: center; width: fit-content;
  padding: .3em .75em .3em 1.25em; background: #4ade80; color: #0a0a0a; font-weight: 600; line-height: 1.2;
  clip-path: polygon(.75em 0, 100% 0, 100% 100%, .75em 100%, 0 50%);
}
.ck-ganho strong::before, .ck-op-ganho::before, .ganho-valor::before {
  content: ""; position: absolute; left: .6em; top: 50%; width: .34em; height: .34em; margin-top: -.17em;
  border-radius: 50%; background: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.ck-op-ganho { font-size: .85rem; }
.ganho-valor { margin-top: .45rem; font-size: .9rem; }
.ganho-valor:empty { display: none; }
.ck-r-nota { margin-top: -.4rem; font-size: .85rem; font-weight: 500; }
.ck-r-nota:empty { display: none; }

/* erro geral do pagamento (acima do botão) */
.ck-erro-geral { margin: 0 0 .75rem; padding: .8rem 1rem; border-radius: .9rem; background: #fff1f0; color: #b42318; font-size: .9rem; line-height: 1.4; }
.ck-qr svg { width: 100%; height: 100%; }
.ck-qr:has(svg) { border-style: solid; border-color: var(--line); padding: .8rem; }
#ck-fim .btn { margin-top: 1.1rem; }
.ck-espera[hidden] { display: none; }