/* ============================================================================
   Checkout e página do pedido.

   Arquivo próprio, e não um bloco no estilo.css de 78 KB: quem compra carrega
   isto e mais nada, e quem só navega no catálogo não carrega isto.
   As cores e a fonte vêm do estilo.css, que continua sendo carregado antes.

   Tema CLARO, com a cor do próprio material (--cor, vinda de estilo_cor) nos
   botões e no preço. Houve uma versão escura desta tela, no estilo do checkout
   do Vade Mecum digital, e o dono preferiu a clara — o que sobrou daquela
   tentativa é a foto grande do item, que era o que faltava aqui.
   ========================================================================= */

.ck {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.2rem 1.1rem 4rem;
}

.ck__caixa {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  align-items: start;
}
.ck__caixa--uma { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin: 0 auto; }

@media (max-width: 46rem) {
  .ck__caixa { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- item comprado */

.ck__item {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  overflow: hidden;
  /* Acompanha a rolagem do formulário: o comprador continua vendo o que está
     comprando enquanto preenche, que é o ponto de ter a foto grande. */
  position: sticky;
  top: 1.2rem;
}
@media (max-width: 46rem) { .ck__item { position: static; } }

/* A foto grande. Quadrada porque as capas do catálogo são 1080x1080, e outro
   aspecto cortaria o título do livro justamente onde ele está. O fundo levemente
   colorido vem da cor do material: a capa é fotografada sobre branco e, sem ele,
   se dissolve dentro do cartão branco. */
.ck__item-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 90% at 50% 8%,
                    color-mix(in srgb, var(--cor, #c8102e) 16%, #fff),
                    color-mix(in srgb, var(--cor, #c8102e) 6%, #fff));
  display: grid;
  place-items: center;
  padding: 1.1rem;
}
.ck__item-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
}

.ck__item-corpo { padding: 1.15rem 1.1rem 1.3rem; }

.ck__item-titulo { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.35; color: #111827; }
.ck__item-sub    { margin: .3rem 0 0; font-size: .84rem; color: #6b7280; line-height: 1.45; }

.ck__item-valores { margin: .95rem 0 0; padding: .9rem 0 0; border-top: 1px solid #eceef1; }
.ck__item-de {
  margin: 0; font-size: .88rem; color: #9ca3af; text-decoration: line-through;
}
.ck__item-preco {
  margin: .1rem 0 0;
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--cor-forte, #c8102e);
  font-variant-numeric: tabular-nums;
}
.ck__item-desconto { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; color: #2f855a; }
.ck__item-parcela  { margin: .2rem 0 0; font-size: .82rem; color: #6b7280; }

/* ------------------------------------------------------------------ frete */

/* A linha do frete é a que mais precisa ser vista: é o argumento de venda que o
   dono paga do próprio bolso. Por isso ela sai da lista de selos e vira uma
   faixa verde própria, com o valor riscado ao lado do GRÁTIS. */
.ck__frete {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .95rem 0 0;
  padding: .7rem .85rem;
  border-radius: 11px;
  background: #e9f8ef;
  border: 1px solid #a8ddc0;
}
.ck__frete-ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: #1f6b45;
}
.ck__frete-ico svg { width: 20px; height: 20px; }
.ck__frete-tx { min-width: 0; line-height: 1.3; }
.ck__frete-rot { display: block; font-size: .74rem; color: #2f6b4c; letter-spacing: .02em; }
.ck__frete-val { display: flex; align-items: baseline; gap: .45rem; }
.ck__frete-de {
  font-size: .86rem;
  color: #7e9c8b;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.ck__frete-gratis {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1c7a4d;
}

.ck__item-selos {
  list-style: none;
  margin: .9rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid #eceef1;
  display: grid;
  gap: .45rem;
}
.ck__item-selos li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .82rem;
  color: #4b5563;
  line-height: 1.45;
}
.ck__item-selos li::before {
  content: '';
  position: absolute;
  left: 0; top: .42rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cor-forte, #c8102e);
}

/* ------------------------------------------------------------- formulário */

.ck__form,
.pd__bloco {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.7rem;
}

.ck__form h1,
.pd__bloco h1 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}

.ck__campos label,
.pd__form label {
  display: block;
  margin: 1rem 0 .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
}

.ck__campos input,
.pd__form input {
  width: 100%;
  padding: .68rem .8rem;
  border: 1px solid #d3d7de;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;   /* 16px: abaixo disso o iPhone dá zoom ao focar o campo */
  background: #fff;
  color: #111827;
}
.ck__campos input:focus,
.pd__form input:focus {
  outline: 2px solid var(--cor-forte, #c8102e);
  outline-offset: 1px;
  border-color: transparent;
}

.ck__ajuda { margin: .3rem 0 0; font-size: .78rem; color: #6b7280; line-height: 1.45; }
.ck__opc   { font-weight: 400; color: #9ca3af; }

.ck__erro {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: #fdecec;
  border: 1px solid #f0a3a3;
  color: #8c1d1d;
  font-size: .88rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------ escolhas */

.ck__grupo { border: 0; padding: 0; margin: 1.4rem 0 0; }
.ck__grupo legend {
  padding: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #111827;
}

.ck__opcoes { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin-top: .6rem; }
@media (max-width: 30rem) { .ck__opcoes { grid-template-columns: 1fr; } }

.ck__opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .9rem;
  border: 1.5px solid #d3d7de;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.ck__opcao:hover { border-color: #9aa2af; }
.ck__opcao input { width: 18px; height: 18px; accent-color: var(--cor-forte, #c8102e); flex: 0 0 auto; }
.ck__opcao span  { display: block; font-size: .92rem; line-height: 1.3; }
.ck__opcao small { display: block; font-size: .76rem; color: #6b7280; font-weight: 400; }
.ck__opcao:has(input:checked) {
  border-color: var(--cor-forte, #c8102e);
  background: color-mix(in srgb, var(--cor-forte, #c8102e) 5%, #fff);
}

/* Bloco de "sou de outro estado". Aparece só quando a opção está marcada, e a
   regra é CSS puro: sem isso, quem estiver com o JavaScript bloqueado marcaria
   "outro estado" e não veria explicação nenhuma. */
.ck__fora { display: none; margin-top: .8rem; }
#ck-goias:has(input[value="nao"]:checked) .ck__fora { display: block; }
#ck-goias:has(input[value="nao"]:checked) ~ .ck__campos,
#ck-goias:has(input[value="nao"]:checked) ~ .ck__grupo,
#ck-goias:has(input[value="nao"]:checked) ~ .ck__cupom,
#ck-goias:has(input[value="nao"]:checked) ~ .ck__botao { opacity: .35; pointer-events: none; }

.ck__fora p {
  margin: 0 0 .7rem;
  padding: .8rem .9rem;
  background: #fff8e6;
  border: 1px solid #f0d68a;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.5;
  color: #6b4b00;
}

.ck__zap {
  display: inline-block;
  padding: .7rem 1.2rem;
  background: #25d366;
  color: #05341a;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}
.ck__zap:hover { filter: brightness(1.05); }

/* --------------------------------------------------------------- cupom --- */

.ck__cupom { margin: 1.3rem 0 0; }
.ck__cupom > summary {
  cursor: pointer;
  font-size: .88rem;
  color: #4b5563;
  padding: .3rem 0;
  user-select: none;
}
.ck__cupom > summary:hover { color: #111827; }

.ck__cupom-caixa { display: flex; gap: .5rem; margin-top: .55rem; }
.ck__cupom-caixa input {
  flex: 1; min-width: 0;
  padding: .68rem .8rem;
  border: 1px solid #d3d7de;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  letter-spacing: .06em;
}
.ck__cupom-caixa button {
  flex: 0 0 auto;
  padding: .68rem 1.1rem;
  border: 1px solid #d3d7de;
  border-radius: 10px;
  background: #f3f4f6;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
}
.ck__cupom-caixa button:hover { background: #e5e7eb; }

.ck__cupom-aviso { margin: .5rem 0 0; font-size: .84rem; color: #8c1d1d; line-height: 1.45; }
.ck__cupom-aviso--ok { color: #2f855a; font-weight: 600; }

/* ---------------------------------------------------------------- botão */

.ck__botao {
  display: block;
  width: 100%;
  margin-top: 1.6rem;
  padding: .95rem 1rem;
  border: 0;
  border-radius: 11px;
  background: var(--cor-forte, #c8102e);
  color: #fff;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
}
/* O mesmo botão principal quando ele é um link, e não um <button>: só o que
   um <a> não herda sozinho. */
a.ck__botao { text-align: center; text-decoration: none; }
/* Vira flex por causa do cadeado ao lado do texto. `display: block` continuaria
   funcionando, mas o SVG cairia na linha de base do texto e ficaria desalinhado
   por um fio de cabelo. */
.ck__botao { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.ck__botao svg { width: 17px; height: 17px; flex: none; }
.ck__botao:hover  { filter: brightness(1.07); }
.ck__botao:disabled { opacity: .55; cursor: progress; }

.ck__selo {
  margin: .9rem 0 0;
  font-size: .76rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

/* =========================================================== página do pedido */

.pd__topo { text-align: center; margin: 0 0 1.2rem; }
.pd__codigo  { margin: 0; font-size: .82rem; color: #6b7280; letter-spacing: .04em; }
.pd__codigo b { color: #111827; letter-spacing: .08em; }
.pd__produto { margin: .25rem 0 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }

/* Trilha do pedido. Números, e não ícones: ícone de caminhão em três estados
   vira adivinhação, número com rótulo não. */
.pd__trilha {
  display: flex;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  counter-reset: passo;
}
.pd__trilha li {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: .72rem;
  color: #9ca3af;
  padding-top: 1.9rem;
  line-height: 1.25;
}
.pd__trilha li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e6e8ec;
  color: #6b7280;
  font-size: .74rem;
  font-weight: 700;
}
/* A linha liga um passo ao anterior, e por isso sai do ::after do ANTERIOR —
   assim o último passo não fica com um traço solto para fora.

   OS 16px DE CADA LADO NÃO SÃO ENFEITE. A linha nasce no centro do <li>, que é
   exatamente o centro do círculo do número; e, sendo ::after, ela é pintada
   DEPOIS do ::before do mesmo <li> — ou seja, por cima do número. O resultado
   era um traço cortando o "1" e o "3" ao meio. Recuando 16px (12 de raio + 4 de
   respiro) a linha passa a começar e terminar FORA dos dois círculos que ela
   liga. Mexer no tamanho do círculo exige mexer aqui junto. */
.pd__trilha li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: #e6e8ec;
}
.pd__trilha li.feito::before { background: #2f855a; color: #fff; }
.pd__trilha li.feito::after  { background: #2f855a; }
.pd__trilha li.feito         { color: #2f855a; }
.pd__trilha li.agora::before { background: var(--cor-forte, #c8102e); color: #fff; }
.pd__trilha li.agora         { color: #111827; font-weight: 700; }

.pd__ok {
  margin: 0 0 1.1rem;
  padding: .8rem .9rem;
  border-radius: 10px;
  background: #e8f7ee;
  border: 1px solid #93d3ac;
  color: #1c5136;
  font-size: .9rem;
  font-weight: 600;
}

.pd__bloco p { line-height: 1.6; color: #374151; }
.pd__nota    { font-size: .82rem; color: #6b7280; }

.pd__qr {
  display: block;
  margin: 1.2rem auto;
  width: 260px; height: 260px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}

.pd__rotulo { display: block; margin: 1rem 0 .35rem; font-size: .85rem; font-weight: 600; color: #374151; }

.pd__copia { display: flex; gap: .5rem; }
.pd__copia input {
  flex: 1; min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid #d3d7de;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  background: #f8f9fb;
  color: #374151;
}
.pd__copia button {
  flex: 0 0 auto;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.pd__copia button:hover { filter: brightness(1.25); }

.pd__linha { display: grid; gap: 0 .8rem; grid-template-columns: 1fr 1fr; }

.pd__endereco {
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  background: #f8f9fb;
  border: 1px solid #e6e8ec;
  border-radius: 11px;
  font-size: .9rem;
}
.pd__endereco p { margin: 0 0 .15rem; line-height: 1.5; }

.pd__aviso { text-align: center; }
.pd__rodape {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: .82rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ------------------------------------------------- valor na página do pedido */

.pd__valor {
  margin: .7rem 0 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cor-forte, #c8102e);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pd__valor-nota { margin: .2rem 0 0; font-size: .82rem; color: #6b7280; }
.pd__valor-nota s { color: #9ca3af; margin-right: .25rem; }

/* Trocar a forma de pagamento não pode competir com o botão de pagar: é uma
   saída para quem já decidiu que não vai pagar daquele jeito, e não uma segunda
   opção oferecida a quem ainda está decidindo. Por isso é link, e discreto. */
.pd__trocar { margin: 1.1rem 0 0; text-align: center; }
/* O losango do Pix ao lado do texto, e o sublinhado que o mockup pede. */
.pd__trocar a svg { width: 15px; height: 15px; flex: none; }
.pd__trocar a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .84rem;
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pd__trocar a:hover { color: var(--cor-forte, #c8102e); }

/* ------------------------------------------ conferência do cartão, ao vivo */

/* O selo da bandeira fica DENTRO do campo, à direita. É texto e não logotipo:
   logo de bandeira é imagem de terceiro, e esta página já carrega o mínimo
   necessário de fora. O nome escrito cumpre o mesmo papel — dizer que o número
   foi reconhecido — sem mais uma origem na CSP. */
.pd__com-marca { position: relative; display: block; }
.pd__com-marca input { padding-right: 6.4rem; }
.pd__bandeira {
  position: absolute;
  right: .6rem; top: 50%;
  transform: translateY(-50%);
  padding: .2rem .5rem;
  border-radius: 6px;
  background: #eef1f5;
  color: #4b5563;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.pd__bandeira.visivel { opacity: 1; }

.pd__campo-aviso {
  display: block;
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: #6b7280;
  min-height: 1.05rem;   /* reserva a linha: sem isso o campo pula ao avisar */
}
.pd__campo-aviso.ruim { color: #b42318; }
.pd__campo-aviso.ok   { color: #1c7a4d; }

.pd__form input.campo--ok   { border-color: #6cc295; }
.pd__form input.campo--ruim { border-color: #e07a7a; background: #fffafa; }
.pd__form input.campo--ok:focus   { outline-color: #1c7a4d; }
.pd__form input.campo--ruim:focus { outline-color: #b42318; }

/* ------------------------------------------------------------- parcelas -- */

.pd__campo-rotulo {
  display: block;
  margin: 1.2rem 0 .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
}

.pd__parcelas { display: grid; gap: .5rem; }
@media (min-width: 30rem) { .pd__parcelas { grid-template-columns: 1fr 1fr; } }

.pd__parcela {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
  border: 1.5px solid #d3d7de;
  border-radius: 11px;
  cursor: pointer;
  background: #fff;
  transition: border-color .13s, background .13s;
}
.pd__parcela:hover { border-color: #9aa2af; }

/* O radio nativo, visível. accent-color pinta a bolinha com a cor do material
   sem precisar redesenhar o controle — e redesenhar foi o que quebrou antes. */
.pd__parcela input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--cor-forte, #c8102e);
  cursor: pointer;
}
.pd__parcela__corpo { min-width: 0; }
.pd__parcela__corpo b { display: block; font-size: .95rem; font-weight: 700; color: #111827; }
.pd__parcela__corpo small { display: block; margin-top: .1rem; font-size: .76rem; color: #6b7280; }

.pd__parcela:has(input:checked) {
  border-color: var(--cor-forte, #c8102e);
  background: color-mix(in srgb, var(--cor-forte, #c8102e) 5%, #fff);
}

/* O <select> que sobrou em outros formulários também merece parecer do site. */
.pd__form select {
  width: 100%;
  padding: .68rem .8rem;
  border: 1px solid #d3d7de;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: #111827;
}
.pd__form select:focus { outline: 2px solid var(--cor-forte, #c8102e); outline-offset: 1px; }

/* --------------------------------------------- avisos por campo no checkout */

.ck__campo-aviso {
  display: block;
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: #6b7280;
  min-height: 1.05rem;   /* reserva a linha: sem isso o formulário pula ao avisar */
}
.ck__campo-aviso.ruim { color: #b42318; }
.ck__campo-aviso.ok   { color: #1c7a4d; }

.ck__campos input.campo--ok   { border-color: #6cc295; }
.ck__campos input.campo--ruim { border-color: #e07a7a; background: #fffafa; }
.ck__campos input.campo--ok:focus   { outline-color: #1c7a4d; }
.ck__campos input.campo--ruim:focus { outline-color: #b42318; }

/* Quando há aviso logo abaixo, a linha de ajuda encosta demais no campo. */
.ck__campo-aviso + .ck__ajuda { margin-top: .1rem; }

/* ===========================================================================
   PÁGINA DO CARTÃO

   Ela precisa parecer confiável antes de a pessoa digitar o primeiro dígito.
   O que constrói isso aqui, em ordem de peso:
     1. mostrar o PRODUTO com a capa — antes a tela tinha só um código e um
        valor, o que numa página de cartão parece cobrança solta
     2. dizer onde a pessoa está na compra, e que ainda vem o endereço
     3. o cadeado junto do título, não perdido no rodapé
     4. bandeiras aceitas e o que acontece com os dados, escritos por extenso
   ========================================================================= */

.pg__passos {
  display: flex;
  align-items: center;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-size: .76rem;
  color: #9ca3af;
}
.pg__passos li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pg__passos li + li::before {
  content: '';
  width: 1.3rem; height: 1px;
  background: #d3d7de;
  margin-right: .45rem;
}
.pg__passos span {
  width: 21px; height: 21px; flex: 0 0 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #d3d7de;
  font-size: .7rem; font-weight: 700;
}
.pg__passos .feito       { color: #2f855a; }
.pg__passos .feito span  { background: #2f855a; border-color: #2f855a; color: #fff; }
.pg__passos .agora       { color: #111827; font-weight: 700; }
.pg__passos .agora span  { background: var(--cor-forte, #c8102e); border-color: var(--cor-forte, #c8102e); color: #fff; }

/* ------------------------------------------------------------- resumo ---- */

.pg__resumo {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1rem;
  padding: .8rem .95rem;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 13px;
}
.pg__resumo-capa {
  width: 56px; height: 56px; flex: 0 0 56px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid #eceef1;
  background: #f6f7f9;
}
.pg__resumo-tx { min-width: 0; flex: 1; }
.pg__resumo-rot {
  margin: 0;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 700;
}
.pg__resumo-nome {
  margin: .12rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}
.pg__resumo-valor {
  margin: 0;
  flex: 0 0 auto;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cor-forte, #c8102e);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- caixa ----- */

/* A faixa colorida no topo é o único enfeite da tela, e serve de âncora: dá à
   caixa o peso de "documento oficial" sem precisar de sombra pesada. */
.pg__caixa { position: relative; overflow: hidden; }
.pg__caixa::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cor-forte, #c8102e), color-mix(in srgb, var(--cor-forte, #c8102e) 45%, #fff));
}

.pg__cabecalho { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 .3rem; }
.pg__cabecalho h1 { margin: 0; font-size: 1.2rem; }
/* O cadeado do topo usa a cor da MARCA, e não o verde dos selos de confiança.
   Ele é a primeira coisa que o olho pega nesta tela, e em verde puxava a
   atenção para uma cor que não se repete em mais nada aqui. */
.pg__cadeado {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #fdecef;
  border: 1px solid #f3c2cc;
  color: var(--cor-forte, #c8102e);
}
.pg__cadeado svg { width: 21px; height: 21px; }
.pg__sub { margin: .25rem 0 0; font-size: .8rem; color: #6b7280; line-height: 1.45; }

/* ------------------------------------------------------------ confiança -- */

.pg__bandeiras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin: 1.3rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid #eceef1;
}
.pg__bandeiras img {
  display: block;
  width: 64px; height: 26px;
  object-fit: contain;
  border: 1px solid #e6e8ec;
  border-radius: 7px;
  background: #fff;
}

.pg__selos { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pg__selos li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .79rem;
  color: #4b5563;
  line-height: 1.45;
}
.pg__selos svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .1rem; color: #1c7a4d; }

.pg__botao-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: .8rem 0 0;
  font-size: .77rem;
  font-weight: 600;
  color: #1c7a4d;
}
.pg__botao-nota svg { width: 15px; height: 15px; }

/* ------------------------------------------------- ícone dentro do campo -- */

/* O <span> é só a âncora do posicionamento; quem tem borda continua sendo o
   input. Assim o foco, o estado de erro e o preenchimento automático do
   navegador seguem funcionando como sempre. */
.pd__campo-icone { position: relative; display: block; }
.pd__campo-icone > svg {
  position: absolute;
  left: .72rem;
  top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  color: #9aa2ad;
  pointer-events: none;   /* o clique atravessa e cai no input, como se não existisse */
}
/* Combinador de irmão POSTERIOR: por isso o <svg> vem depois do <input>. */
.pd__campo-icone input:focus ~ svg { color: var(--cor-forte, #c8102e); }
.pd__campo-icone input { padding-left: 2.5rem; }

/* O "?" ao lado de "Código de segurança". aria-hidden porque a explicação está
   no title, e um leitor de tela anunciando "interrogação" não ajuda ninguém. */
.pd__rotulo-ajuda {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: .25rem;
  width: 14px; height: 14px;
  color: #9aa2ad;
  cursor: help;
}
.pd__rotulo-ajuda svg { width: 14px; height: 14px; }

/* ------------------------------------------- espera do pagamento, saídas -- */

.pd__conferir { margin: 1.2rem 0 0; text-align: center; }
.pd__conferir-btn {
  display: inline-block;
  padding: .7rem 1.3rem;
  border: 1.5px solid #d3d7de;
  border-radius: 11px;
  background: #fff;
  color: #111827;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
.pd__conferir-btn:hover { border-color: var(--cor-forte, #c8102e); color: var(--cor-forte, #c8102e); }

.pd__demora {
  margin: 1rem 0 0;
  padding: .8rem .95rem;
  border-radius: 10px;
  background: #fff8e6;
  border: 1px solid #f0d68a;
  color: #6b4b00;
  font-size: .84rem;
  line-height: 1.55;
}
.pd__demora a { color: #6b4b00; text-decoration: underline; }

/* ------------------------------------------- relógio da espera ----------- */

/* A ESPERA PRECISA PARECER TRABALHO ACONTECENDO.
   O que havia aqui era um título e dois parágrafos parados. Quem acabou de
   pagar encara uma tela imóvel e conclui que travou — e o reflexo seguinte é
   apertar F5 ou pagar de novo. O anel girando não informa nada que o texto já
   não diga; ele diz que o site está VIVO, que é a dúvida real de quem está com
   o dinheiro já debitado. */
.pd__espera {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.1rem;
}
/* min-width:0 porque item de flex nasce com min-width:auto: sem isto o e-mail
   do comprador — uma palavra que não quebra — vira o piso da largura e empurra
   a caixa inteira para fora da tela no celular. overflow-wrap deixa esse
   e-mail quebrar, e só quando não couber. */
.pd__espera-texto { min-width: 0; overflow-wrap: anywhere; }
.pd__espera-texto h1 { margin: 0 0 .35rem; }
.pd__espera-texto p  { margin: 0; }

.pd__relogio { flex: 0 0 96px; width: 96px; height: 96px; display: block; }
.pd__relogio svg { width: 100%; height: 100%; display: block; }

/* O trilho é o círculo apagado por baixo do arco. */
.pd__relogio .trilho { fill: none; stroke: #f1e4e7; stroke-width: 5; }

/* Os tracinhos NÃO são 48 elementos: é um círculo só, com traço tracejado.
   A conta: circunferência = 2·π·44 ≈ 276,5; dividida por 48 dá 5,76 de passo,
   que viram `1.6 4.16` (tracinho e vão). Mexer no raio obriga a refazer isto. */
.pd__relogio .ticks {
  fill: none;
  stroke: #f3c2cc;
  stroke-width: 5;
  stroke-dasharray: 1.6 4.16;
}

/* O arco que gira: 108 pintado para 219 vazio deixa cerca de um terço aceso. */
.pd__relogio .arco {
  fill: none;
  stroke: var(--cor-forte, #c8102e);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 108 219;
  transform-origin: 60px 60px;
  animation: pd-gira 1.5s linear infinite;
  filter: drop-shadow(0 0 5px rgba(200, 16, 46, .45));
}
@keyframes pd-gira { to { transform: rotate(360deg); } }

/* O mostrador fica PARADO. Relógio com a carcaça girando junto vira cata-vento
   e perde a leitura de "relógio"; só o ponteiro dos minutos anda, devagar. */
.pd__relogio .face      { fill: none; stroke: #111827; stroke-width: 4; }
.pd__relogio .ponteiros { fill: none; stroke: #111827; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pd__relogio .minuto {
  transform-origin: 60px 60px;
  animation: pd-gira 6s linear infinite;
}

/* No celular EMPILHA. Lado a lado nesta largura sobra uma coluna de texto de
   cinco linhas com um relógio pequeno flutuando no meio dela: o desenho perde
   o peso e o texto fica espremido. Em cima e centralizado, os dois respiram. */
@media (max-width: 35rem) {
  .pd__espera { flex-direction: column; text-align: center; gap: .8rem; }
  .pd__relogio { flex-basis: auto; width: 84px; height: 84px; }
}

/* Movimento reduzido: o anel para, mas fica quase fechado — assim ele continua
   dizendo "em andamento" sem se mexer. */
@media (prefers-reduced-motion: reduce) {
  .pd__relogio .arco,
  .pd__relogio .minuto { animation: none; }
  .pd__relogio .arco { stroke-dasharray: 245 82; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT NO CELULAR — desenho do Vade Mecum digital, cores da loja impressa
   (29/08/2026)

   A queixa era a foto: 353px de altura numa tela de 844, e o formulário só
   começando em 885px — a pessoa rolava uma tela inteira antes de ver
   "Finalizar compra". Medido com o Chrome em emulação de iPhone, não no olho.

   Nada aqui vaza para o desktop: os elementos novos nascem escondidos no bloco
   logo abaixo e só acendem dentro do @media. E tudo que toca meio de pagamento
   está preso a .ck__grupo--pagar, porque .ck__opcao também é das opções de
   Goiás.
   ══════════════════════════════════════════════════════════════════════════ */

/* ESPECIFICIDADE, e nao teimosia: `.ck__opcao span { display:block }` mora mais
   acima neste arquivo e pontua (0,1,1). Um seletor de classe sozinha faz (0,1,0)
   e PERDE — os ícones e as bandeiras apareciam no desktop, empurrando o botão
   208px para baixo. Com o pai no seletor viram (0,2,0) e ganham. */
.ck__item-rotulo,
.ck__opcao .ck__opcao-ico,
.ck__opcao .ck__opcao-marca,
.ck__opcao .ck__bandeiras,
.ck__total,
.ck__botao-sub { display: none; }

@media (max-width: 46rem) {

  /* ---------------------------------------- o que está sendo comprado ----
     De cartão com foto quadrada a uma tarja: miniatura à esquerda, título no
     meio, preço à direita. A capa continua ali — é material impresso e o
     comprador quer ver o livro —, só que do tamanho de uma capa de livro
     (3:4) e não de meia tela. */
  .ck__item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 .7rem;
    padding: .7rem .8rem;
  }
  .ck__item-foto {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 3 / 4;
    width: 54px;
    border-radius: 7px;
    padding: 0;
    overflow: hidden;
  }
  .ck__item-foto img { filter: none; }

  /* display:contents DISSOLVE o corpo: os filhos dele viram itens da grade do
     CARTÃO, e não de uma sub-grade presa à coluna 2. Sem isso a faixa de frete
     começava depois da foto, com um degrau de 54px à esquerda, em vez de
     atravessar o cartão inteiro. */
  .ck__item-corpo { display: contents; }
  .ck__item-rotulo {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 .12rem;
    font-size: .66rem;
    letter-spacing: .03em;
    color: var(--tinta-3, #6b7480);
  }
  /* DUAS linhas, não uma. Numa linha só, "Kit da Aprovação — PMGO" já cortava
     em "Aprovaç…" por 10px — o comprador lia menos do que o nome do produto.
     Três linhas fariam a tarja comer de volta a tela que ela veio devolver;
     duas é o meio-termo, e o clamp corta com reticências só quando precisa. */
  .ck__item-titulo {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: .9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ck__item-sub { display: none; }

  .ck__item-valores {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    border-top: 0;
    text-align: right;
  }
  .ck__item-de     { font-size: .72rem; }
  .ck__item-preco  { font-size: 1.15rem; }
  .ck__item-desconto,
  .ck__item-parcela {
    font-size: .66rem;
    line-height: 1.25;
    /* Sem teto, "ou 6x de R$ 46,67 no cartão" numa linha só empurrava o
       título para "Kit da Aprovaç…" já no terceiro caractere. */
    max-width: 5.6rem;
    margin-left: auto;
  }

  .ck__frete,
  .ck__item-selos { grid-column: 1 / -1; }
  .ck__frete      { margin-top: .7rem; padding: .5rem .6rem; gap: .45rem; }
  .ck__frete-ico  { width: 20px; height: 20px; }
  .ck__frete-ico svg { width: 17px; height: 17px; }
  .ck__frete-rot  { font-size: .66rem; }
  .ck__frete-gratis { font-size: .9rem; }
  .ck__frete-de   { font-size: .76rem; }
  .ck__item-selos {
    margin-top: .6rem;
    padding-top: .6rem;
    gap: .3rem;
    grid-template-columns: 1fr 1fr;
  }
  .ck__item-selos li { font-size: .7rem; padding-left: .8rem; }
  .ck__item-selos li::before { top: .36rem; width: 5px; height: 5px; }

  /* A caixa aperta as laterais no telefone: 1,4rem de cada lado custavam
     45px de largura util, e e nessa largura que as quatro bandeiras cabem ou
     nao numa fileira so. */
  .ck__form { padding: 1.2rem 1.05rem 1.4rem; }

  /* ------------------------------------------- meios de pagamento -------
     DUAS COLUNAS, e não uma. Empilhadas, a opção de cartão nascia abaixo da
     dobra: quem não rolasse via só o Pix já marcado e não imaginava que havia
     parcelamento. Lado a lado, as duas aparecem de cara.
     (Esta regra desfaz o @media 30rem que existe mais acima no arquivo.) */
  .ck__grupo--pagar .ck__opcoes {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  /* Ícone e marca em cima, texto embaixo: em meia largura, "Cartão" na mesma
     linha do ícone quebrava por cima do rádio. */
  .ck__grupo--pagar .ck__opcao {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icone marca" "texto texto";
    align-items: start;
    align-content: start;
    gap: .45rem;
    padding: .65rem .65rem .7rem;
  }
  /* O rádio nativo sai e vira a bolinha desenhada, que é o que dá o ar de
     cartão selecionável do digital. Ele continua no HTML e continua sendo o
     que o formulário envia — só deixa de ser visto. */
  .ck__grupo--pagar .ck__opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }
  .ck__grupo--pagar .ck__opcao .ck__opcao-ico {
    grid-area: icone;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--cor-tenue, #fdf2f4);
    color: var(--cor-forte, #c8102e);
  }
  .ck__grupo--pagar .ck__opcao .ck__opcao-ico svg { width: 17px; height: 17px; }
  /* O Pix guarda o verde do próprio Pix: é por ele que a pessoa reconhece o
     meio antes de ler a palavra. O cartão é que assume a cor do material. */
  .ck__grupo--pagar .ck__opcao .ck__opcao-ico--pix {
    background: #e7f7ef;
    color: #0f7b3f;
  }

  .ck__grupo--pagar .ck__opcao > span:not(.ck__opcao-ico):not(.ck__opcao-marca) {
    grid-area: texto;
    min-width: 0;
  }
  .ck__grupo--pagar .ck__opcao b     { font-size: .88rem; line-height: 1.2; }
  .ck__grupo--pagar .ck__opcao small { font-size: .72rem; margin-top: .1rem; }

  .ck__grupo--pagar .ck__opcao .ck__opcao-marca {
    grid-area: marca;
    display: grid;
    place-items: center;
    justify-self: end;
    align-self: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--linha, #d7dbe0);
  }
  .ck__grupo--pagar .ck__opcao .ck__opcao-marca::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
  }
  .ck__grupo--pagar .ck__opcao:has(input:checked) .ck__opcao-marca {
    border-color: var(--cor-forte, #c8102e);
  }
  .ck__grupo--pagar .ck__opcao:has(input:checked) .ck__opcao-marca::after {
    background: var(--cor-forte, #c8102e);
  }

  /* --------------------------------------------------- bandeiras --------
     Não precisam ser lidas, só reconhecidas: 13px de altura basta para o
     olho identificar, e cada linha a mais aqui custa altura de tela. */
  .ck__grupo--pagar .ck__opcao .ck__bandeiras {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: .4rem;
  }
  .ck__grupo--pagar .ck__bandeira {
    display: grid;
    place-items: center;
    height: 19px;
    padding: 0 1px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--linha, #e3e6ea);
  }
  .ck__grupo--pagar .ck__bandeira img {
    display: block;
    height: 10px;
    width: auto;
    max-width: 23px;
    object-fit: contain;
  }
  .ck__grupo--pagar .ck__bandeira--amex img { height: 13px; }

  /* ------------------------------------------------ total e botão ------- */
  .ck__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin: 1rem 0 .7rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linha, #e3e6ea);
  }
  .ck__total span   { font-size: .88rem; color: var(--tinta-2, #3d444d); }
  .ck__total strong {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cor-forte, #c8102e);
    font-variant-numeric: tabular-nums;
  }

  .ck__botao {
    flex-direction: column;
    gap: .1rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    line-height: 1.25;
  }
  /* O valor sai do botão: a linha de total logo acima já o diz, e repetir
     empurrava o texto para duas linhas. */
  .ck__botao-valor { display: none; }
  .ck__botao-sub {
    font-size: .72rem;
    font-weight: 500;
    opacity: .88;
  }
  /* Qual sublinha aparece sai do rádio marcado, sem JavaScript. */
  .ck__form:has(input[name="meio"][value="pix"]:checked)    .ck__botao-sub--pix,
  .ck__form:has(input[name="meio"][value="cartao"]:checked) .ck__botao-sub--cartao {
    display: block;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT ENXUTO NO CELULAR (31/08/2026)

   Objetivo do dono: caber numa tela só, sem rolar. O ponto de partida eram
   1440px de página, medidos com o Chrome emulando iPhone. De onde saiu cada
   corte está anotado em cada bloco — para que ninguém devolva um deles sem
   saber o que estava pagando por ele.

   Nada disto vale no desktop.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 46rem) {

  /* O respiro do <main> custava 99px (35 em cima, 64 embaixo) num lugar onde
     a tela é o recurso escasso. */
  .ck { padding: .6rem .7rem 1.2rem; }

  /* CARTÃO DO PRODUTO E FORMULÁRIO VIRAM UM BLOCO SÓ: some o vão de 25px entre
     eles e um par de bordas. Também lê melhor — é uma compra, não duas coisas. */
  .ck__caixa { gap: 0; }
  .ck__item { border-radius: 13px 13px 0 0; border-bottom: 0; }
  .ck__item + .ck__form { border-radius: 0 0 13px 13px; }
  .ck__form { padding: .95rem .9rem 1.05rem; }

  /* Prazo e Correios saem do cartão (pedido do dono). A mesma informação está
     na página do produto, onde a pessoa decide; aqui ela já decidiu. */
  .ck__item-selos { display: none; }

  /* O frete continua — é o argumento que o dono paga do bolso —, mas como
     faixa mais baixa. */
  .ck__frete { margin-top: .5rem; padding: .4rem .55rem; }
  .ck__frete-rot { font-size: .64rem; }
  .ck__frete-gratis { font-size: .86rem; }

  .ck__form h1 { font-size: 1.12rem; margin-bottom: .6rem; }

  /* ------------------------------- a pergunta de Goiás -------------------
     As duas respostas lado a lado, como as de pagamento: empilhadas somavam
     66px a mais. E o texto de apoio sai: "Por enquanto a entrega é só para
     endereços em Goiás" repete o que a própria pergunta e as duas opções já
     dizem, e custava 25px. Se a pessoa marcar "outro estado", o aviso de
     verdade aparece logo abaixo — esse fica. */
  /* 1fr auto, e não 1fr 1fr: as respostas deixaram de ter tamanhos parecidos
     ("Sim. Posso receber em Goiás" contra "Não"). Em colunas iguais a longa
     quebrava em três linhas enquanto a curta desperdiçava metade da largura.
     Assim cada uma ocupa o tamanho do que tem a dizer. */
  #ck-goias .ck__opcoes { grid-template-columns: 1fr auto; gap: .5rem; }
  #ck-goias > .ck__ajuda { display: none; }
  #ck-goias .ck__opcao { padding: .6rem .55rem; }
  #ck-goias .ck__opcao span { font-size: .85rem; line-height: 1.2; }

  .ck__grupo legend { font-size: .92rem; line-height: 1.3; }
  .ck__grupo { margin-top: .85rem; }

  /* ------------------------------- e-mail e celular ---------------------- */
  .ck__campos label { margin: .7rem 0 .25rem; font-size: .82rem; }
  .ck__campos input { padding-top: .55rem; padding-bottom: .55rem; }
  .ck__campos .ck__ajuda { font-size: .72rem; line-height: 1.35; margin-top: .25rem; }

  /* A CAIXA DE AVISO DO CAMPO SÓ OCUPA ESPAÇO QUANDO TEM AVISO.
     Ela nasce vazia e mesmo assim reservava 22px por campo — 44px de nada, o
     maior desperdício isolado da tela. O checkout-campos.js limpa com
     `textContent = ''`, então :empty é confiável.
     Troca consciente: quando um erro aparece, o que está abaixo desce um
     pouco. No celular, 44px de tela valem mais que esse pulo. */
  .ck__campos .ck__campo-aviso:empty,
  .pd__form .ck__campo-aviso:empty { display: none; }

  /* O frete numa linha só: rótulo e valor lado a lado em vez de empilhados. */
  .ck__frete-tx { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
  .ck__frete-rot { font-size: .68rem; }

  /* A capa cede mais um degrau. */
  .ck__item-foto { width: 48px; }
  .ck__item { padding: .6rem .7rem; }

  /* Opções de pagamento um pouco mais baixas. */
  .ck__grupo--pagar .ck__opcao { padding: .55rem .55rem .6rem; gap: .35rem; }
  .ck__grupo--pagar .ck__opcao .ck__opcao-ico { width: 28px; height: 28px; border-radius: 8px; }
  .ck__grupo--pagar .ck__opcao .ck__opcao-ico svg { width: 15px; height: 15px; }
  .ck__grupo--pagar .ck__opcao .ck__bandeiras { margin-top: .3rem; }

  /* ------------------------------- fecho --------------------------------- */
  .ck__cupom summary { padding: .4rem 0; font-size: .82rem; }
  .ck__total { margin: .6rem 0 .45rem; padding-top: .55rem; }
  .ck__total span { font-size: .82rem; }
  .ck__total strong { font-size: 1.3rem; }
  .ck__botao { padding-top: .65rem; padding-bottom: .65rem; }
  .ck__selo { margin-top: .5rem; font-size: .68rem; line-height: 1.35; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TELA DO CARTÃO, ENXUTA NO CELULAR (31/08/2026)

   Media 1897px de página. A lista de parcelas sozinha respondia por 735:
   seis opções empilhadas numa coluna só, cada uma com 112px. Em duas colunas
   e mais baixas, as seis cabem em três fileiras.

   A lista CONTINUA sendo lista, e não um <select>: o comentário no pagar.php
   explica por quê — o valor da parcela é o número que a pessoa compara, e
   dentro de uma caixa fechada ele só aparece depois de abrir.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 46rem) {

  /* --------------------------- resumo do pedido -------------------------- */
  .pg__resumo { padding: .55rem .7rem; gap: .55rem; }
  .pg__resumo-capa { width: 40px; height: 40px; }
  .pg__resumo-rot { font-size: .68rem; }
  .pg__resumo-nome { font-size: .82rem; line-height: 1.25; }
  .pg__resumo-valor { font-size: 1.05rem; }

  /* --------------------------- cabeçalho do cartão ----------------------- */
  .pg__caixa { padding: .95rem .9rem 1.05rem; }
  .pg__cabecalho { gap: .55rem; margin-bottom: .7rem; }
  .pg__cabecalho h1 { font-size: 1.08rem; }
  .pg__sub { font-size: .72rem; line-height: 1.35; }
  .pg__cadeado { width: 30px; height: 30px; flex: 0 0 30px; }
  .pg__cadeado svg { width: 17px; height: 17px; }

  /* --------------------------- campos ------------------------------------ */
  .pd__form label { margin: .65rem 0 .25rem; font-size: .82rem; }
  /* SÓ o vertical: `padding` abreviado apagaria o padding-left de 2,5rem
     que .pd__campo-icone input reserva para o ícone dentro do campo, e o
     ícone passava a cair por cima do texto. Os dois seletores empatam em
     especificidade (0,1,1), então quem vem depois ganha — e este vem depois. */
  .pd__form input { padding-top: .55rem; padding-bottom: .55rem; }

  /* --------------------------- parcelas ----------------------------------
     DUAS COLUNAS. O @media (min-width:30rem) mais acima já fazia isso a partir
     de 480px; abaixo disso a lista voltava para uma coluna e seis opções
     custavam 735px — mais de uma tela inteira só para escolher parcela. */
  .pd__parcelas { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .pd__parcela { padding: .5rem .5rem; gap: .4rem; border-radius: 9px; }
  .pd__parcela input { width: 16px; height: 16px; flex: 0 0 16px; }
  .pd__parcela__corpo b { font-size: .82rem; line-height: 1.2; }
  .pd__parcela__corpo small { font-size: .66rem; line-height: 1.25; }
  .pd__campo-rotulo { font-size: .82rem; }

  /* --------------------------- bandeiras do rodapé ----------------------- */
  .pg__bandeiras { gap: .3rem; margin-top: .7rem; }
  .pg__bandeiras img { height: 15px; }
}