/* Checkout, resultado e área de membro. */

[data-tema="noite"] { background: var(--cor-noite); color: var(--cor-texto-noite); }
[data-tema="noite"] h1 em, [data-tema="noite"] h2 em { color: var(--cor-primaria-noite); }
.topo-noite { border-bottom-color: var(--cor-noite-superficie); }
.topo-noite .marca { color: var(--cor-texto-noite); }
.btn-entrar { color: var(--cor-texto-noite); text-decoration: none; font-weight: 600; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--cor-noite-superficie); font-size: .92rem; }
.dentro { max-width: var(--largura-lp); margin: 0 auto; }
.dentro-estreito { max-width: 640px; margin: 0 auto; }
.sobre-titulo { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--cor-texto-noite-suave); margin-bottom: 8px; }

/* ---------- checkout ---------- */
.palco h1.display em { font-style: normal; color: var(--cor-primaria); }
.selo-seguro { font-size: .8rem; font-weight: 700; color: var(--cor-acento-texto); background: #fbeed8; padding: 4px 10px; border-radius: 999px; }
.escolha-plano { border: 0; padding: 0; margin: 0; }
.escolha-plano legend { font-weight: 700; margin-bottom: 12px; padding: 0; }
#lista-planos { display: grid; gap: 12px; }
.opcao-plano {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  padding: 18px 16px; background: var(--cor-superficie); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-m);
}
.opcao-plano input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--cor-primaria); }
.opcao-plano:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.opcao-plano:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.op-corpo { display: grid; gap: 2px; }
.op-titulo { font-weight: 700; }
.op-preco { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-depois { font-weight: 600; color: var(--cor-texto); font-size: .95rem; }
.op-itens { color: var(--cor-texto-suave); font-size: .88rem; }
.resumo { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: 16px; display: grid; gap: 12px; }
.resumo-titulo { font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 700; margin: 0; }
.resumo dl { margin: 0; display: grid; gap: 8px; }
.resumo dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.resumo dt { color: var(--cor-texto-suave); }
.resumo dd { margin: 0; font-weight: 600; }
.demo-aviso { font-size: .88rem; color: var(--cor-texto-suave); background: var(--cor-superficie-2); padding: 12px 14px; border-radius: var(--raio-m); margin: 0; }
.btn-pagar { height: 56px; min-height: 56px; font-size: 1.08rem; white-space: nowrap; }
.rodape-checkout { font-size: .82rem; color: var(--cor-texto-suave); text-align: center; }

/* ---------- resultado ---------- */
.res-hero { padding: 36px var(--gutter) 40px; text-align: center; }
.res-hero h1 { font-family: var(--fonte-corpo); font-size: 1.1rem; font-weight: 600; color: var(--cor-texto-noite-suave); margin: 0; }
.res-hero h1:focus { outline: none; }
.qi-grande { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 7rem; line-height: 1; margin: 4px 0 8px; color: var(--cor-texto-noite); }
.faixa { color: var(--cor-texto-noite-suave); margin-bottom: 20px; }
.curva svg { width: 100%; height: auto; }
.res-fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 0; }
.res-fatos div { background: var(--cor-noite-superficie); border-radius: var(--raio-m); padding: 12px 6px; }
.res-fatos dt { font-size: .78rem; color: var(--cor-texto-noite-suave); }
.res-fatos dd { margin: 0; font-size: 1.3rem; font-weight: 700; }

.res-secao { padding: 40px var(--gutter); }
.res-alt { background: var(--cor-superficie-2); }
.sub-secao { color: var(--cor-texto-suave); font-size: .92rem; }
.nota-metodo { color: var(--cor-texto-suave); font-size: .9rem; border-left: 3px solid var(--cor-acento); padding-left: 12px; }

.avisos-res { margin: 12px 0 0; padding-left: 20px; color: var(--cor-texto-suave); font-size: .9rem; display: grid; gap: 6px; }
.avisos-res:empty { display: none; }
.selo-alerta { display: inline-block; background: #fbeed8; color: var(--cor-acento-texto); font-weight: 700; font-size: .88rem; padding: 6px 12px; border-radius: 999px; }
.dom-rel { font-size: .85rem; color: var(--cor-texto-suave); margin: 6px 0 0; }
.dom-rel.sobe { color: #17603f; }
.dom-rel.desce { color: #7f4a05; }
.dominios { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 16px; }
.dom-topo { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.dom-topo .num { color: var(--cor-texto-suave); font-weight: 500; }
.dom-barra { height: 10px; background: var(--cor-superficie); border-radius: 5px; overflow: hidden; border: 1px solid var(--cor-borda); }
.dom-barra > div { height: 100%; background: var(--cor-primaria); border-radius: 5px; }

.auto-card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: 16px; margin-bottom: 12px; }
.auto-card p { margin: 0 0 6px; }
.auto-frase { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 1.4rem; line-height: 1.2; }

.linha-cert { display: flex; gap: 8px; margin-bottom: 20px; }
.certificado {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 32px 20px; text-align: center; margin-bottom: 16px;
  box-shadow: inset 0 0 0 8px var(--cor-superficie), inset 0 0 0 9px var(--cor-borda);
}
.cert-marca { display: inline-flex; gap: 8px; align-items: center; font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 1.4rem; margin-bottom: 12px; }
.cert-marca [data-logo] { width: 26px; height: 26px; display: inline-flex; color: var(--cor-primaria); }
.cert-titulo { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; color: var(--cor-acento-texto); }
.cert-texto { color: var(--cor-texto-suave); margin: 0; }
.cert-nome { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 2.4rem; line-height: 1.1; margin: 6px 0 10px; overflow-wrap: anywhere; }
.cert-qi { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 4rem; line-height: 1; margin: 8px 0; color: var(--cor-primaria); }
.cert-rodape { font-size: .9rem; color: var(--cor-texto-suave); }
.cert-aviso { font-size: .75rem; color: var(--cor-texto-suave); margin: 0; }

.grade-respostas { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.bolinha { width: 100%; aspect-ratio: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid transparent; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.bolinha.acerto { background: #e3f3eb; color: #155c3c; border-color: #b7ddc9; }
.bolinha.erro { background: #f8e6e2; color: #93301f; border-color: #ebc3ba; }
.bolinha.neutra { background: var(--cor-superficie-2); color: var(--cor-texto-suave); }
.bolinha[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cor-primaria); }
.detalhe-resposta:not(:empty) { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: 16px; }
.detalhe-resposta p { margin: 0 0 6px; }
.det-figura { max-width: 260px; margin: 8px auto 12px; border: 1px solid var(--cor-borda); border-radius: var(--raio-p); overflow: hidden; }
.txt-acerto { color: var(--cor-sucesso); }
.txt-erro { color: var(--cor-erro); }
.disclaimer { font-size: .92rem; color: var(--cor-texto-suave); background: var(--cor-superficie-2); padding: 16px; border-radius: var(--raio-m); }

#cert-folha { display: none; }
@media print {
  /* só a cópia do certificado vai para o papel (resultado.js monta #cert-folha) */
  body.imprimindo-cert > *:not(#cert-folha) { display: none !important; }
  body.imprimindo-cert { margin: 0; padding: 0; background: #fff; }
  body.imprimindo-cert #cert-folha { display: flex; align-items: center; justify-content: center; width: 297mm; height: 209mm; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimindo-cert #cert-folha .cert3d { transform: none !important; }
  body.imprimindo-cert #cert-folha > * { width: 265mm !important; max-width: none !important; height: auto; margin: 0 !important; transform: none !important; box-shadow: none !important; animation: none !important; }
  body.imprimindo-cert #cert-folha * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
}

/* ---------- área de membro ---------- */
.membro-palco { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 110px; }
.membro-palco h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
.abas-baixo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas-baixo a { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; min-height: 60px; font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); text-decoration: none; }
.abas-baixo a svg { width: 22px; height: 22px; }
.abas-baixo a[aria-current="page"] { color: var(--cor-primaria); }
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: 20px; margin-bottom: 16px; }
.cartao h3 { margin-bottom: 4px; }
.cartao p { color: var(--cor-texto-suave); }
.cartao-jogo { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.icone-jogo { width: 56px; height: 56px; border-radius: 14px; background: var(--cor-primaria-clara); color: var(--cor-primaria); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
.recorde { font-size: .85rem; color: var(--cor-texto-suave); }
.resumo-qi { display: flex; align-items: center; gap: 16px; }
.resumo-qi .n { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 3.4rem; line-height: 1; color: var(--cor-primaria); }
.linha-dados { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.linha-dados:last-child { border-bottom: 0; }
.linha-dados dt { color: var(--cor-texto-suave); }
.linha-dados dd { margin: 0; font-weight: 700; text-align: right; }
.status-ativa { color: var(--cor-sucesso); }
.status-cancelada { color: var(--cor-erro); }
.vazio { text-align: center; padding: 32px 16px; color: var(--cor-texto-suave); }

/* jogos */
.jogo-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.placar { display: flex; gap: 10px; }
.placar div { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 6px 12px; text-align: center; min-width: 70px; }
.placar span { display: block; font-size: .72rem; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.placar strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; }

.memoria-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 0 auto 16px; }
.memoria-grade button { aspect-ratio: 1; border-radius: 16px; border: 0; background: var(--cor-superficie-2); cursor: pointer; transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.memoria-grade button.aceso { background: var(--cor-primaria); transform: scale(.96); }
.memoria-grade button.erro { background: var(--cor-erro); }
.memoria-grade button:disabled { cursor: default; }
.msg-jogo { text-align: center; min-height: 1.5em; font-weight: 600; }

.g2048 { position: relative; max-width: 380px; margin: 0 auto 16px; background: #d9d3c6; border-radius: 14px; padding: 8px; touch-action: none; user-select: none; }
.g2048 .grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g2048 .cel { aspect-ratio: 1; border-radius: 10px; background: #eee9df; display: grid; place-items: center; font-weight: 800; font-size: clamp(1.1rem, 6vw, 1.8rem); font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.g2048 .v2 { background: #fff; } .g2048 .v4 { background: #f3efe6; }
.g2048 .v8 { background: #e9e8fb; } .g2048 .v16 { background: #cfcdf6; }
.g2048 .v32 { background: #aeaaf0; } .g2048 .v64 { background: #8f8bff; color: #fff; }
.g2048 .v128 { background: #6a64e0; color: #fff; font-size: clamp(1rem, 5vw, 1.5rem); } .g2048 .v256 { background: #3a34c4; color: #fff; font-size: clamp(1rem, 5vw, 1.5rem); }
.g2048 .v512 { background: #2a2596; color: #fff; font-size: clamp(1rem, 5vw, 1.5rem); } .g2048 .v1024, .g2048 .v2048, .g2048 .vmax { background: #e9a23b; color: #14172e; font-size: clamp(.9rem, 4.5vw, 1.3rem); }
.g2048 .fim { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: rgb(247 245 240 / 88%); border-radius: 14px; font-weight: 700; font-size: 1.3rem; }
.controles-2048 { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); gap: 6px; justify-content: center; margin-bottom: 12px; }
.controles-2048 button { border-radius: 12px; border: 1px solid var(--cor-borda); background: var(--cor-superficie); font-size: 1.3rem; cursor: pointer; }
.controles-2048 .c-cima { grid-column: 2; }
.controles-2048 .c-esq { grid-column: 1; grid-row: 2; }
.controles-2048 .c-baixo { grid-column: 2; grid-row: 2; }
.controles-2048 .c-dir { grid-column: 3; grid-row: 2; }

/* ---------- checkout (fase com movimento) ---------- */
.checkout { display: grid; gap: 28px; }
.topo-checkout { text-align: center; }
.topo-checkout h1 { margin-bottom: 8px; }
.check-grande { display: flex; justify-content: center; margin-bottom: 8px; }
.check-grande .t-success-check { width: 56px; height: 56px; border-radius: 50%; background: var(--cor-sucesso); color: #fff; display: grid; place-items: center; }
.check-grande .t-success-check svg { width: 30px; height: 30px; }
.h-secao { font-family: var(--fonte-corpo); font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; letter-spacing: 0; }
.previa { background: var(--cor-noite); color: var(--cor-texto-noite); box-shadow: var(--sombra); }
.previa .t-skel-skeleton { background: var(--cor-noite-superficie); }
.previa .t-skel-skeleton > i { background: rgb(255 255 255 / 10%); }
.previa-rotulo { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--cor-texto-noite-suave); margin: 0 0 8px; }
.previa-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.previa-mini { display: block; font-size: .8rem; color: var(--cor-texto-noite-suave); }
.previa-qi, .previa-pct { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 3rem; line-height: 1; display: inline-block; }
.borrado { filter: blur(9px); user-select: none; }
.previa-curva { margin: 8px 0; }
.previa-curva svg { width: 100%; height: auto; }
.previa-doms { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .85rem; color: var(--cor-texto-noite-suave); }
.previa-doms li { display: grid; grid-template-columns: minmax(8.5rem, max-content) 1fr; gap: 10px; align-items: center; }
.previa-doms li span { white-space: nowrap; }
.previa-doms i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cor-primaria-noite) calc(var(--v) * 100%), rgb(255 255 255 / 10%) 0); }
.previa-cadeado { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; background: rgb(14 16 36 / 80%); color: var(--cor-texto-noite); font-weight: 700; font-size: .88rem; padding: 10px 16px; border-radius: 999px; white-space: nowrap; border: 1px solid rgb(255 255 255 / 12%); }
.lista-incluido { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-incluido li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.lista-incluido .mini { color: var(--cor-texto-suave); font-size: .9rem; }
.check-item { width: 24px; height: 24px; border-radius: 50%; background: var(--cor-primaria-clara); color: var(--cor-primaria); display: grid !important; place-items: center; margin-top: 2px; }
.check-item svg { width: 14px; height: 14px; }
.metodo { display: grid; gap: 8px; }
.metodo-info { color: var(--cor-texto-suave); font-size: .9rem; margin: 0; min-height: 2.8em; }
.aprovado { position: fixed; inset: 0; z-index: 50; background: rgb(14 16 36 / 55%); display: grid; place-items: center; padding: var(--gutter); }
.aprovado-caixa { background: var(--cor-superficie); border-radius: var(--raio); padding: 28px 24px; text-align: center; max-width: 360px; box-shadow: var(--sombra-elevada); }
.aprovado-caixa h2 { font-size: 2rem; margin: 8px 0 4px; }
.aprovado-caixa p { color: var(--cor-texto-suave); margin: 0; }
.faq-checkout { margin-top: 4px; }

.par-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
.mini-alt { margin: 0; border: 2px solid var(--cor-borda); border-radius: var(--raio-m); padding: 8px; background: #fff; }
.mini-alt.ok { border-color: var(--cor-sucesso); }
.mini-alt.nao { border-color: var(--cor-erro); }
.mini-alt img, .mini-alt svg { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mini-alt figcaption { font-size: .8rem; font-weight: 700; text-align: center; color: var(--cor-texto-suave); margin-top: 4px; }
.destaque-auto { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.tilt-cert { border-radius: var(--raio); margin-bottom: 16px; }
.tilt-cert .certificado { margin-bottom: 0; }

/* ---------- compartilhar ---------- */
.caixa-compartilhar { max-height: calc(100dvh - 32px); overflow: auto; }
.cmp-previa { display: flex; justify-content: center; margin: 4px 0 12px; }
.cmp-story { width: min(180px, 42vw); height: auto; border-radius: 14px; box-shadow: var(--sombra-elevada);
  transition: opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); }
.cmp-story.troca { opacity: 0; filter: blur(var(--blur-small)); }
.cmp-cartao { display: none; }
.cmp-acoes { display: grid; gap: 10px; margin: 12px 0 4px; }
.caixa-compartilhar .btn-link { display: block; margin: 0 auto; }
@media (min-height: 800px) { .cmp-story { width: min(220px, 50vw); } }

/* ---------- imagens finais: resultado e certificado ---------- */
/* fundo do resultado: só a textura de rede (a imagem anterior foi reprovada) */
/* Topo do relatório: fundo liso da marca (docs/cro.md §2.5; a textura de rede
   saiu). O destaque é o número e a curva, com dois brilhos leves em CSS. */
.res-hero { background:
  radial-gradient(90% 70% at 90% 0%, rgb(143 139 255 / 18%), transparent 60%),
  radial-gradient(70% 60% at 0% 100%, rgb(233 162 59 / 10%), transparent 60%),
  var(--cor-noite); }
/* certificado com o papel e o selo da marca a partir de 640 px (no celular a
   proporção 4:3 não cabe o texto, então fica o cartão simples) */
@media (min-width: 640px) {
  .certificado { aspect-ratio: 4 / 3; padding: 9% 12% 7%; display: flex; flex-direction: column; justify-content: center;
    background: #f7f1e3 url(../img/certificado-fundo.webp) center / 100% 100% no-repeat; box-shadow: var(--sombra); border: 0; }
  .certificado .cert-aviso { max-width: 70%; margin: 8px auto 0; }
}

/* pedidos do backend: texto da prévia quebra linha; e-mail longo não vaza */
.previa-cadeado { white-space: normal; text-align: center; max-width: calc(100% - 32px); width: max-content; line-height: 1.35; }
.linha-dados { grid-template-columns: minmax(min-content, auto) minmax(0, 1fr); column-gap: 16px; }
/* rótulo quebra só entre palavras (nunca letra por letra) e nunca fica mais
   estreito que a maior palavra; só o valor (e-mail longo) quebra onde precisar */
.linha-dados dt { overflow-wrap: normal; word-break: normal; min-width: min-content; }
.linha-dados dd { min-width: 0; overflow-wrap: anywhere; }

.aviso-checkout { display: grid; gap: 8px; }
.aviso-checkout p { margin: 0; }
@media (min-width: 1024px) { .checkout > .aviso-checkout { grid-column: 1 / -1; } }

.selo-mini { display: inline-block; margin-top: 6px; font-size: .78rem; padding: 3px 10px; }

/* prévia do checkout: sem número, sem eixo (marcas 70-130 sobre nada confundem) */
.previa-curva .eixo { display: none; }
/* cartão do reteste no resultado (forma B) */
.reteste { margin: 16px 0 0; border-left: 4px solid var(--cor-primaria); }
.reteste h2 { margin: 0 0 8px; }
.reteste p { margin: 0 0 8px; }
.reteste ul { margin: 8px 0 0; padding-left: 18px; color: var(--cor-texto-suave); font-size: .9rem; display: grid; gap: 4px; }
.reteste strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.linha-toggle-desc { align-items: flex-start; }
.linha-toggle-desc .rot-toggle { display: block; }
.linha-toggle-desc .desc-toggle { display: block; font-size: .85rem; color: var(--cor-texto-suave); margin-top: 4px; }
.linha-toggle-desc .t-toggle { margin-top: 4px; }

/* ---------- app de membro (shell único, DS v2 q-nav) ---------- */
.app-nav.q-nav { grid-template-columns: repeat(5, 1fr); z-index: 30; }
.app-nav.q-nav a { min-width: 0; }
.membro-palco { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* o relatório dentro do app: o topo escuro vira um cartão, sem sangrar */
.relatorio .res-hero { border-radius: var(--q-r-xl); margin: 0 0 8px; }
.relatorio .res-secao { padding-inline: 0; }
.relatorio .dentro-estreito { max-width: none; }
.grade-jogos { display: grid; gap: 12px; }
.grade-jogos .cartao { margin: 0; }
.reembolso p { margin-bottom: 12px; }
body:has(.app-nav) .aviso-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); max-width: 1280px; margin: 0 auto; align-items: start; }
  .app-nav.q-nav { top: 65px; height: calc(100dvh - 65px); grid-template-columns: 1fr; }
  .membro-palco { max-width: 960px; width: 100%; padding: 32px 40px 64px; margin: 0; }
  .grade-jogos { grid-template-columns: 1fr 1fr; }
  body:has(.app-nav) .aviso-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* escala de título dentro do app: tela de app, não página de venda */
.membro-palco h1 { font-size: clamp(28px, 6vw, 40px); }
.membro-palco h2 { font-size: clamp(20px, 4vw, 24px); letter-spacing: -0.02em; }
.membro-palco .relatorio .res-hero h1 { font: 600 15px/1.3 var(--fonte-corpo); letter-spacing: 0; color: var(--cor-texto-noite-suave); margin: 0; }
.membro-palco .relatorio .res-secao h2 { font-size: clamp(22px, 4.4vw, 28px); }

/* certificado: campo da marca + botão na mesma linha (o botão alinha com a caixa) */
.linha-cert { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.linha-cert .btn { height: 56px; min-height: 56px; }

/* ---------- checkout v2 (docs/cro.md §1, componentes do DS v2) ---------- */
.checkout .topo-checkout { text-align: center; }
.checkout .topo-checkout h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 6px; }
.checkout .topo-checkout .sub { margin: 0 auto; max-width: 40ch; }
.compra { display: grid; gap: 14px; }
.compra .escolha-plano { border: 0; padding: 0; margin: 0; }
.compra .escolha-plano legend { font: 600 15px/1.3 var(--fonte-titulo); color: var(--cor-texto); margin-bottom: 10px; padding: 0; }
.lista-planos { display: grid; gap: 12px; padding-top: 6px; }
.compra .resumo { border: 0; padding: 0; background: none; display: grid; gap: 10px; }
.compra .q-check { padding: 4px 0; }
.compra .metodo-info { font-size: .88rem; color: var(--cor-texto-suave); margin: 8px 2px 0; }
.btn-pagar { height: 56px; min-height: 56px; font-size: 17px; }
.garantia { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font: 600 13px/1.3 var(--fonte-corpo); color: var(--cor-texto-suave); }
.garantia svg { width: 16px; height: 16px; stroke: var(--cor-sucesso); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.q-confianca > div span { display: block; }
.q-confianca--1 { grid-template-columns: 1fr; }
.compra .demo-aviso { margin: 0; font-size: .8rem; color: var(--cor-texto-suave); text-align: center; background: none; padding: 0; }
.libera .previa { margin-bottom: 20px; }
.rodape-checkout { font-size: .85rem; color: var(--cor-texto-suave); text-align: center; margin: 8px 0 0; }
/* o " · " antes de "Preferências de cookies" só existe quando o link aparece (hidden some com ele);
   inline-block tira o separador do sublinhado do link */
.rodape-checkout [data-pref-cookies]::before { content: "·"; display: inline-block; margin-right: .3em; color: var(--cor-texto-suave); text-decoration: none; }
/* no celular a compra fica sobre o papel: o resumo precisa de fundo próprio */
@media (max-width: 1023px) { .compra .q-resumo { background: var(--q-sup); box-shadow: inset 0 0 0 1px var(--q-borda); } }

/* ---------- oferta única (estrutura do myIQ, DS v2) ---------- */
.checkout .topo-checkout .check-grande { margin: 0 auto 10px; }
.oferta { display: grid; gap: 6px; }
.oferta-hoje { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.oferta-hoje span { font: 600 18px/1.2 var(--fonte-titulo); color: var(--cor-texto); }
.oferta-hoje strong { font: 800 clamp(36px, 9vw, 44px)/1 var(--fonte-titulo); letter-spacing: -0.03em; color: var(--cor-primaria); }
.oferta-desc { margin: 0; color: var(--cor-texto-suave); font-size: .95rem; }
/* a recorrência: legível, contraste AA (12:1), nunca cinza-claro nem miúda */
.recorrencia { margin: 0; font: 500 14px/1.45 var(--fonte-corpo); color: var(--q-texto, var(--cor-texto)); }
.aceite-implicito { margin: -6px 0 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--cor-texto-suave); }
.cta-fim { display: grid; gap: 12px; margin: 8px 0 0; padding: 20px; border-radius: var(--raio); background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
.cta-fim .garantia { margin: 0; }
/* celular: prévia compacta, para a oferta chegar perto da primeira dobra */
@media (max-width: 1023px) {
  .checkout .topo-checkout .check-grande { margin-bottom: 6px; }
  .checkout .topo-checkout .check-grande .t-success-check { width: 44px; height: 44px; }
  .checkout .topo-checkout .check-grande .t-success-check svg { width: 24px; height: 24px; }
  .checkout .topo-checkout h1 { font-size: 26px; }
  .checkout .topo-checkout .sub { font-size: .95rem; }
  .compra .metodo-info { display: none; }
  .compra { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 20px 20px 24px; box-shadow: var(--sombra); }
}

/* ---------- cabeçalho do app: avatar com a inicial (R4-L2) ---------- */
.topo-app #email-topo.conta-topo { max-width: none; overflow: visible; display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.avatar-topo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--q-prim-100, #EFEEFD); color: var(--cor-primaria); font: 700 15px/1 var(--fonte-titulo); }
.email-topo-txt { display: none; }
@media (min-width: 900px) {
  .email-topo-txt { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); font-size: .9rem; }
}

/* ---------- aviso (toast) no app: 1 linha, acima da barra de abas ---------- */
body:has(.app-nav) .aviso-toast { max-width: min(calc(100vw - 32px), 420px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- certificado: código de verificação ---------- */
.cert-verificacao { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; font-size: .78rem; line-height: 1.35; color: var(--cor-texto-suave); text-align: left; }
.cert-verificacao strong { font-family: var(--fonte-titulo); letter-spacing: .06em; color: var(--cor-texto); }
.cert-qr { flex: none; width: 56px; height: 56px; }
.cert-qr svg { width: 100%; height: 100%; }

/* ---------- avaliações: o pedido no app está no fim deste arquivo ---------- */
/* a lista pública de avaliações está em site.css (LP e páginas de conteúdo) */


.aviso-moeda { margin: 0; font-size: 13px; line-height: 1.4; color: var(--q-texto, var(--cor-texto)); background: var(--q-aviso-100, #FDF3DF); border-radius: var(--raio-p); padding: 8px 10px; }

/* Pedido de avaliação no fim do relatório (js/avaliacoes.js). Mora aqui, e não
   no site.css, porque o relatório está no app (membro.html) — QA R7-A1. */
.pedir-avaliacao { display: grid; gap: 16px; margin-top: 24px; }
.pedir-avaliacao .h-secao { margin: 0; }
.estrelas-escolha { display: flex; gap: 8px; }
.estrela-btn { width: 48px; height: 48px; padding: 10px; border: 0; border-radius: 12px; background: var(--cor-superficie-2); color: var(--cor-borda-forte, #CFC9BC); cursor: pointer; transition: color var(--duration-quick), background-color var(--duration-quick), scale var(--duration-quick) var(--ease-bounce); }
.estrela-btn svg { width: 100%; height: 100%; fill: currentColor; }
.estrela-btn[aria-pressed="true"] { color: var(--cor-acento); background: #FDF3DF; }
@media (hover: hover) { .estrela-btn:hover { color: var(--cor-acento); } }
.estrela-btn:active { scale: .92; }
.aval-extra, .aval-dados { display: grid; gap: 14px; }
.aval-local { display: grid; gap: 14px; }
.aval-local { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (prefers-reduced-motion: reduce) { .estrela-btn { transition: none; } .estrela-btn:active { scale: 1; } }
.pedir-avaliacao > *, .aval-extra > *, .aval-dados > * { min-width: 0; }

/* Checkout: curiosidade das figuras históricas (catálogo Cox, retratos em
   domínio público). Sem número nenhum. Fica depois do cartão de compra no
   celular; no desktop, na coluna esquerda (desktop.css). */
.ck-figuras { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 20px; border-radius: var(--raio); background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
.ck-figuras__fila { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ck-figuras__retratos { display: flex; }
.ck-figuras__retrato { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--cor-superficie); background: var(--cor-borda); }
.ck-figuras__retrato + .ck-figuras__retrato { margin-left: -10px; }
.ck-figuras__voce { display: grid; justify-items: center; gap: 2px; }
.ck-figuras__voce b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--cor-primaria); color: var(--cor-primaria); font: 800 20px/1 var(--fonte-titulo); }
.ck-figuras__voce small { font-size: .75rem; color: var(--cor-texto-suave); }
.ck-figuras .h-secao { margin: 4px 0 0; }
.ck-figuras__texto { margin: 0; max-width: 46ch; font-size: .95rem; }
.ck-figuras__nomes { margin: 0; font-size: .85rem; color: var(--cor-texto-suave); }
.ck-figuras__nota { margin: 0; font-size: .8rem; color: var(--cor-texto-suave); }

/* ---------- checkout com cara de compra (03/nov, Daniel) ----------
   As opções viram cartões de produto lado a lado (o teste marcado, com o selo
   de "mais completo", que é fato: a comparação mostra item por item) e o bloco
   da oferta vira o "Seu pedido": produto, o que inclui, total de hoje e as
   próximas cobranças, antes da linha de recorrência e do botão. */
.compra .escolha-plano { display: grid; gap: 10px; }
.compra .escolha-plano legend { margin-bottom: 10px; }
.planos-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plano-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 12px 12px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); cursor: pointer; min-width: 0;
  transition: border-color var(--duration-quick, .15s) ease, box-shadow var(--duration-quick, .15s) ease, background-color var(--duration-quick, .15s) ease; }
.plano-card.is-sel { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); box-shadow: 0 0 0 1px var(--cor-primaria); }
.plano-card:focus-within { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.plano-selo { position: absolute; top: -10px; left: 12px; padding: 2px 8px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font: 700 11px/1.5 var(--fonte-corpo); letter-spacing: .02em; white-space: nowrap; }
.plano-topo { display: flex; align-items: flex-start; gap: 8px; }
.plano-radio { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cor-primaria); }
.plano-nome { font: 700 14px/1.3 var(--fonte-titulo); color: var(--cor-texto); overflow-wrap: anywhere; }
.plano-preco { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plano-preco b { font: 800 22px/1.1 var(--fonte-titulo); letter-spacing: -0.02em; color: var(--cor-texto); }
.plano-card.is-sel .plano-preco b { color: var(--cor-primaria); }
.plano-preco small { font-size: 12px; color: var(--cor-texto-suave); }
.plano-legenda { font-size: 12.5px; line-height: 1.35; color: var(--cor-texto); }
.plano-detalhe, .plano-diferenca { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cor-texto-suave); }
/* comparação: a coluna da opção marcada em destaque */
.comparacao-planos { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.comparacao-planos caption { text-align: left; font-weight: 700; padding: 2px 0 6px; font-size: 14px; }
.comparacao-planos th, .comparacao-planos td { padding: 7px 4px; border-top: 1px solid var(--cor-borda); }
.comparacao-planos thead th { border-top: 0; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; padding-bottom: 6px; color: var(--cor-texto-suave); }
.comparacao-planos thead th:first-child, .comparacao-planos tbody th { text-align: left; padding-left: 0; }
.comparacao-planos tbody th { font-weight: 400; }
.comp-marca { text-align: center; width: 23%; font-weight: 700; color: var(--cor-texto-suave); }
.comp-marca.comp-sim { color: var(--cor-sucesso, #1a7f4b); }
.comparacao-planos[data-sel="plano"] .comp-plano, .comparacao-planos[data-sel="avulso"] .comp-avulso { background: var(--cor-primaria-clara); }
.comparacao-planos[data-sel="plano"] thead .comp-plano, .comparacao-planos[data-sel="avulso"] thead .comp-avulso { color: var(--cor-primaria); border-radius: 8px 8px 0 0; }
/* Seu pedido */
.pedido { gap: 10px; padding: 16px; border-radius: var(--raio-m); background: var(--cor-superficie-2); }
.pedido-rotulo { margin: 0; font: 700 12px/1.3 var(--fonte-corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.pedido-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pedido-produto .q-sobre { font: 700 16px/1.3 var(--fonte-titulo); letter-spacing: 0; text-transform: none; color: var(--cor-texto); }
.pedido-produto .num { font-weight: 700; white-space: nowrap; }
.pedido .oferta-desc { font-size: .9rem; }
.pedido-itens { gap: 8px; margin: 2px 0; }
.pedido-itens li { grid-template-columns: 20px 1fr; gap: 8px; font-size: 14px; }
.pedido-itens li strong { font-weight: 500; }
.pedido-itens .check-item { width: 20px; height: 20px; margin-top: 0; }
.pedido-itens .check-item svg { width: 12px; height: 12px; }
.pedido-total { padding-top: 10px; border-top: 1px solid var(--cor-borda); }
.pedido-total span { font: 700 17px/1.2 var(--fonte-titulo); }
.pedido .oferta-hoje strong { font-size: clamp(30px, 8vw, 38px); }
.pedido-depois { align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.pedido-depois > span:first-child { flex: none; color: var(--cor-texto-suave); font-weight: 600; }
.pedido-depois > span:last-child { text-align: right; color: var(--cor-texto); max-width: 62%; }
/* telas muito estreitas: a legenda do cartão e o selo em fonte menor */
@media (max-width: 359px) { .planos-grade { gap: 8px; } .plano-card { padding: 14px 10px 10px; } .plano-preco b { font-size: 20px; } }

/* ---------- checkout v2 (03/nov, Lead): prévia que dá vontade de ver, pedido
   colado no botão, botão sólido, aviso de "rápido demais" compacto ----------
   A prévia é forma FIXA (checkout-previa.js): nenhum dado do teste aqui. */
/* o conteúdo entra no fluxo (no t-skel ele é absoluto numa caixa de 300 px, o que
   cortava a curva e as áreas); o esqueleto fica por cima até o revelar */
.checkout .previa.t-skel { min-height: 0; overflow: hidden; }
.checkout .previa .t-skel-content { position: relative; inset: auto; padding: 18px 18px 16px; }
.rel-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.rel-num { display: grid; gap: 6px; }
.rel-num__valor { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rel-borrado { display: block; width: 74px; height: 30px; border-radius: 8px; background: linear-gradient(90deg, rgb(143 139 255 / 70%), rgb(255 255 255 / 55%), rgb(143 139 255 / 70%)); filter: blur(7px); }
.rel-cadeado { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / 10%); color: var(--cor-texto-noite); flex: none; }
.rel-cadeado svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rel-cadeado--mini { width: 20px; height: 20px; }
.rel-cadeado--mini svg { width: 11px; height: 11px; }
.rel-curva { margin: 2px -4px 0; }
.rel-curva-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rel-curva-svg text { font-variant-numeric: tabular-nums; }
.rel-marcador { animation: rel-varre 6s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes rel-varre { from { transform: translateX(var(--rel-x0)); } to { transform: translateX(var(--rel-x1)); } }
@media (prefers-reduced-motion: reduce) { .rel-marcador { animation: none; } }
.rel-areas__titulo { margin: 10px 0 8px; font: 700 12px/1.3 var(--fonte-corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-noite-suave); }
.rel-areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 13px; color: var(--cor-texto-noite); }
.rel-areas li { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr auto; gap: 10px; align-items: center; }
.rel-area__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-area__barra { display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 10%); position: relative; overflow: hidden; }
.rel-area__barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 4px; background: var(--cor-primaria-noite); filter: blur(4px); opacity: .85; }
.rel-pilula { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 12%); font: 600 13px/1.4 var(--fonte-corpo); color: var(--cor-texto-noite); }
@media (max-width: 359px) { .rel-areas li { grid-template-columns: minmax(0, 7.5rem) 1fr auto; } }

/* botão de pagar: sólido, da cor da marca, largura cheia, com o valor */
.compra .btn-pagar, .cta-fim .btn-pagar { background: var(--cor-primaria); color: var(--cor-primaria-texto); box-shadow: 0 6px 18px rgb(58 52 196 / 28%); font-weight: 700; width: 100%; }
@media (hover: hover) { .compra .btn-pagar:hover, .cta-fim .btn-pagar:hover { background: var(--cor-primaria-escura); } }
.compra .btn-pagar:disabled, .cta-fim .btn-pagar:disabled { background: var(--q-sup-2); color: var(--q-apagado); box-shadow: none; }

/* forma de pagamento: com um método só (avulso, Pix), sem abas */
.metodo.is-unico .q-seg { display: none; }
.metodo-unico { margin: 0; padding: 10px 12px; border-radius: var(--raio-m); background: var(--cor-superficie-2); font: 600 14px/1.4 var(--fonte-corpo); color: var(--cor-texto); }
/* nome e CPF: obrigatórios marcados no rótulo */
.pagador-pix { display: grid; gap: 12px; margin: 12px 0 0; }
.pagador-pix[hidden] { display: none; }
.campo-pagador { display: grid; gap: 6px; font-weight: 600; }
/* cartão na nossa página (Asaas, 03/nov): número, validade e CVV logo abaixo do nome e CPF */
.cartao-asaas { display: grid; gap: 12px; margin: 12px 0 0; }
.cartao-asaas[hidden], .cartao-endereco[hidden] { display: none; }
.cartao-endereco { display: grid; gap: 12px; }
.cartao-asaas .campo-pagador { align-content: start; }
.cartao-erro:empty { display: none !important; }
.campo-obrig { font-weight: 500; font-size: 13px; color: var(--cor-texto-suave); }
.pagador-motivo { margin: 0; font-size: .85rem; color: var(--cor-texto-suave); }

/* comparação: seção própria, fora do cartão de compra */
.comparacao-secao { display: grid; gap: 10px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 18px 18px 16px; }
.comparacao-secao .plano-diferenca[hidden] { display: none; }

/* aviso de "respondeu rápido demais": mesmo gatilho e texto, em menos altura */
.aviso-checkout--compacto { gap: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.aviso-checkout__refazer { min-height: 44px; height: auto; padding: 8px 16px; font-size: 15px; justify-self: start; }
/* nomes longos no cartão (es: "Suscripción IQNorth") quebram com hífen, não no meio da letra */
.plano-nome { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 400px) { .plano-nome { font-size: 13px; } }
/* ---------- checkout limpo (04/nov, "copie o MyIQ"): uma coluna, sem texto explicativo ---------- */
.ck-limpo { gap: 20px; }
.ck-limpo .topo-checkout .sub { color: var(--cor-texto-suave); }
/* VOCÊ ??? entre duas figuras de Cox (avatares de iniciais, sem foto) */
.ck-comparar { display: grid; gap: 6px; justify-items: center; }
.ck-comparar[hidden] { display: none; }
.ck-comparar-linha { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; width: 100%; max-width: 420px; }
.ck-fig { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.ck-fig-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cor-superficie-2); color: var(--cor-texto); font: 700 18px/1 var(--fonte-titulo); box-shadow: inset 0 0 0 1.5px var(--cor-borda); }
.ck-fig-qi { font: 700 15px/1.2 var(--fonte-titulo); color: var(--cor-texto); }
.ck-fig-nome { font: 500 12px/1.25 var(--fonte-corpo); color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.ck-fig--voce .ck-fig-avatar { width: 72px; height: 72px; background: var(--cor-primaria); color: #fff; font-size: 30px; box-shadow: 0 6px 18px rgba(46, 37, 150, .28); }
.ck-fig--voce .ck-fig-qi { font-size: 20px; color: var(--cor-primaria); letter-spacing: .08em; }
.ck-fig--voce .ck-fig-nome { font-weight: 700; color: var(--cor-texto); }
.ck-comparar-fonte { margin: 0; font: 500 11px/1.3 var(--fonte-corpo); color: var(--cor-texto-suave); }
/* números reais do D1 (só aparecem acima do limiar) */
.ck-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.ck-stats[hidden] { display: none; }
.ck-stats li { display: grid; justify-items: center; font: 500 12px/1.3 var(--fonte-corpo); color: var(--cor-texto-suave); }
.ck-stats strong { font: 700 17px/1.2 var(--fonte-titulo); color: var(--cor-texto); }
/* oferta: selo do preço de boas-vindas + nome + preço (o mensal riscado) */
.ck-oferta { display: grid; gap: 6px; }
.ck-cupom { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--q-ok-100, #E6F4EC); color: var(--cor-sucesso, #1F7550); font: 700 12px/1.3 var(--fonte-corpo); }
.ck-cupom[hidden] { display: none; }
.ck-cupom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ck-oferta-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-oferta-nome { font: 700 18px/1.25 var(--fonte-titulo); color: var(--cor-texto); }
.ck-oferta-preco { white-space: nowrap; font: 700 22px/1.2 var(--fonte-titulo); color: var(--cor-primaria); }
.ck-ancora { font: 500 14px/1.2 var(--fonte-corpo); color: var(--cor-texto-suave); margin-right: 4px; }
.ck-ancora[hidden] { display: none; }
.ck-limpo .oferta-desc { font-size: .9rem; }
/* a caixa de pagamento: formas empilhadas, campos e UM botão */
.ck-pagamento { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); }
.ck-metodos { display: grid; gap: 8px; }
.ck-metodo { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); font: 600 16px/1.2 var(--fonte-corpo); text-align: left; cursor: pointer; }
.ck-metodo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.ck-metodo-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cor-borda); flex: none; }
.ck-metodo[aria-checked="true"] { border-color: var(--cor-primaria); background: var(--q-prim-100, #EFEEFD); }
.ck-metodo[aria-checked="true"] .ck-metodo-radio { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 4px var(--cor-superficie); background: var(--cor-primaria); }
.ck-metodo:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
/* avulso (só Pix): fica só a opção Pix, marcada; sem frase explicando */
.metodo.is-unico .ck-metodo:not([data-metodo="pix"]) { display: none; }
.ck-limpo .metodo-unico { display: none; }
.ck-limpo .pagador-pix, .ck-limpo .cartao-asaas { margin: 0; }
.ck-limpo .btn-pagar { background: var(--cor-primaria); color: #fff; }
.ck-limpo .garantia { margin: 0; }
/* com o QR do Pix na tela, o botão "Processando…" sai (volta se der erro ou trocar de método) */
.ck-limpo #caixa-pix:not([hidden]) ~ #pagar-wrap { display: none; }
/* celular: a caixa de pagamento fica dentro do cartão da compra; menos padding para os campos caberem */
@media (max-width: 1023px) { .ck-limpo .compra { padding: 16px 14px 20px; } .ck-limpo .ck-pagamento { padding: 12px; } }
/* a recorrência: UMA linha pequena embaixo da caixa (como no MyIQ), com os termos */
.ck-miuda { margin: 0; text-align: center; font: 500 11.5px/1.45 var(--fonte-corpo); color: var(--cor-texto-suave); }
.ck-miuda a { color: inherit; text-decoration: underline; }
/* o avulso: um link discreto, não um 2º cartão */
.ck-avulso { margin: 0; text-align: center; }
.ck-avulso[hidden] { display: none; }
.ck-link { background: none; border: 0; padding: 6px 4px; color: var(--cor-primaria); font: 600 14px/1.35 var(--fonte-corpo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-limpo .faq-checkout .h-secao { font-size: 18px; }