/* Checkout V6 — tela escura de pagamento (comprar.php).
*
* Vem do redesign de 10/08/2026 (Desktop\Checkout), com duas mudanças de rumo:
* - os "selos" que eram imagem gerada por IA (escudo dourado, raio, faixa de
* WhatsApp) viraram selos NATIVOS — SVG inline + texto, na paleta do site.
* O dono achou as artes "ridículas" e elas pesavam ~100 KB;
* - os glifos de teclado (◆ ▰ ✓ ○) viraram SVG de verdade.
* Ficaram do template só as duas imagens boas: fundo e palco do produto.
*/
:root{
--bg:#04101f; --bg-deep:#020a14;
--line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.22);
--text:#f7f8fa; --muted:#a7b1bf;
--gold:#efbd55; --gold-2:#ffd77b; --green:#62db94;
--shadow:0 24px 72px rgba(0,0,0,.36); --radius:18px;
--form-font:Calibri,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;min-height:100vh;color:var(--text);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
-webkit-font-smoothing:antialiased;
background-color:#03101f;
background-image:
linear-gradient(180deg,rgba(2,10,20,.84) 0%,rgba(3,15,29,.89) 44%,rgba(3,14,27,.95) 100%),
url('img/checkout/fundo.webp');
background-size:cover;background-position:center top;background-repeat:no-repeat;
background-attachment:fixed;
}
button,input{font:inherit}
.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* ── cabeçalho ─────────────────────────────────────────────────────────── */
.ck-header{border-bottom:1px solid rgba(255,255,255,.09);background:rgba(3,13,25,.9);position:relative;z-index:10}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand img{width:46px;height:46px;object-fit:contain}
.brand-copy{padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.brand-copy strong,.brand-copy small{display:block}
.brand-copy strong{color:#f5cd76;font-size:17px;letter-spacing:.08em}
.brand-copy small{font-size:11px;color:#9eabbc;letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
/* selo nativo: escudo SVG + texto, sem imagem */
.header-security{display:flex;align-items:center;gap:10px;text-align:left}
.header-security svg{width:30px;height:30px;fill:var(--gold);flex:0 0 30px}
.header-security strong,.header-security small{display:block}
.header-security strong{font-size:13px;color:#e9edf2}
.header-security small{font-size:11px;color:#95a2b3;margin-top:2px}
/* ── grade ─────────────────────────────────────────────────────────────── */
.ck-main{padding:38px 0 36px}
.ck-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:48px;align-items:start}
.form-column{min-width:0}
.intro{max-width:650px;margin-bottom:24px}
.intro-kicker{color:var(--gold);font-size:13px;font-weight:850;letter-spacing:.13em;margin:0 0 9px}
.intro h1{font-size:clamp(36px,4.4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 10px}
.intro>p:last-child{color:#c2cbd7;font-size:17px;line-height:1.58;margin:0;max-width:620px}
.ck-erro{background:rgba(233,111,111,.12);border:1px solid rgba(233,111,111,.4);color:#ffc9c9;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;margin:0 0 16px}
/* ── formulário ────────────────────────────────────────────────────────── */
.ck-form{font-family:var(--form-font);display:grid;gap:18px}
/* SECAO COMUM: PLANA. Ate 26/08/2026 as duas secoes eram cartoes identicos —
"Seus dados" tinha exatamente a mesma borda, o mesmo gradiente e a mesma
sombra de "Forma de pagamento". O Baymard e explicito: se o mesmo estilo
aparece em area menos sensivel, o reforco vira estilo generico e o ganho de
confianca some. A distincao e RELATIVA, nao absoluta: em vez de enfeitar
mais o pagamento (o que so produziria um cartao mais barulhento), achatamos
o resto e deixamos o pagamento ser o unico cartao da coluna. */
.form-section{border:0;background:none;border-radius:0;padding:2px 0 10px;box-shadow:none}
.form-section+.form-section{border-top:1px solid rgba(255,255,255,.07);padding-top:20px}
/* A CAIXA DE PAGAMENTO: o unico cartao, com dois marcadores que nao existem em
nenhum outro lugar da pagina — filete dourado a esquerda e borda com tinta
dourada. Nada mais na tela usa filete lateral, entao "filete dourado" passa a
significar, sozinho, "aqui e a parte do dinheiro". */
.form-section--pagamento{
border:1px solid rgba(239,189,85,.30);
border-left:3px solid var(--gold);
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(16,38,63,.96),rgba(7,22,40,.98));
box-shadow:0 18px 50px rgba(0,0,0,.42);
padding:24px;
}
.form-section--pagamento+.form-section,.form-section+.form-section--pagamento{border-top:0;padding-top:24px}
.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
/* neutro DE PROPOSITO: era o unico outro elemento com borda dourada da tela,
e a caixa de pagamento precisa que "dourado em borda" signifique so ela */
.section-number{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#cfd8e3;font-weight:800}
.section-heading h2{font-family:var(--form-font);font-size:22px;line-height:1.25;margin:1px 0 4px}
.section-heading p{font-size:15px;color:#b1bdcb;margin:0;line-height:1.45}
.field{display:grid;gap:6px;margin-top:16px}
.field-label{font-size:15px;font-weight:700;color:#f4f6f8;line-height:1.35}
.field-label em{font-style:normal;color:#a6b1c0;font-size:12.5px;font-weight:400;margin-left:5px}
.input-wrap{min-height:62px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(4,17,30,.68);display:flex;align-items:center;gap:10px;padding:0 14px;transition:border-color .16s,box-shadow .16s}
.input-wrap:focus-within{border-color:#e8b650;box-shadow:0 0 0 3px rgba(232,182,80,.11)}
.input-wrap svg{width:18px;height:18px;fill:#7e8da1;flex:0 0 18px}
.input-wrap input{width:100%;min-height:60px;border:0;outline:0;background:transparent;color:#fff;font-family:var(--form-font);font-size:17px;line-height:1.35}
.input-wrap input::placeholder{color:#94a1b2}
.field-help{font-size:13.5px;color:#a8b3c2;line-height:1.45}
/* estado do campo conferido (ver checkout-ui.js). O icone e desenhado em
::after para nao inventar um elemento novo dentro do campo — e o campo do
telefone ja tem a caixinha "uso numero internacional" disputando espaco. */
/* O SLOT E RESERVADO DESDE O INICIO e so a opacidade muda. Antes o icone
crescia de 0 para 18px, o que empurrava o texto do campo a cada mudanca de
estado — reflow visivel numa tela pequena. */
.input-wrap::after{
content:"";width:18px;height:18px;flex:0 0 18px;opacity:0;
background-repeat:no-repeat;background-position:center;background-size:18px 18px;
transition:opacity .14s;
}
.input-wrap.is-ok{border-color:rgba(98,219,148,.7)}
.input-wrap.is-bad{border-color:rgba(233,130,130,.7)}
.input-wrap.is-ok::after,.input-wrap.is-bad::after{opacity:1}
/* a ajuda do campo passa a ECOAR o endereco digitado */
.field-help .eco-ok{color:#7fd6a6;font-weight:700;margin-right:5px}
.field-help strong{color:#dbe3ec;font-weight:600;word-break:break-all}
.input-wrap.is-ok::after{
background-image:url("data:image/svg+xml;utf8,");
}
.input-wrap.is-bad::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* comprador logado */
.conta-box{display:flex;align-items:center;gap:12px;border:1px solid rgba(98,219,148,.3);background:rgba(98,219,148,.07);border-radius:12px;padding:13px 15px}
.conta-box svg{width:22px;height:22px;fill:#69df9a;flex:0 0 22px}
.conta-box p{margin:0;font-size:15px;line-height:1.45;min-width:0}
.conta-box strong{display:block;overflow:hidden;text-overflow:ellipsis}
.conta-box small{color:#9fb4a8;font-size:12px}
.conta-box a,.conta-box .conta-sair{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline;color:#8fd8ae;font-size:13px;white-space:nowrap;margin-left:auto}
/* meios de pagamento — rádio de verdade, sem glifo de teclado */
.payment-options{border:0;margin:0;padding:0;display:grid;gap:10px}
.payment-option{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 26px;align-items:center;gap:14px;min-height:86px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(4,17,30,.56);cursor:pointer;transition:border-color .16s,background .16s}
.payment-option:hover{border-color:rgba(255,255,255,.34)}
.payment-option input{position:absolute;opacity:0;pointer-events:none}
.payment-option:has(input:checked),.payment-option.is-selected{border-color:#5ddd90;background:linear-gradient(90deg,rgba(38,112,75,.22),rgba(4,17,30,.62));box-shadow:inset 0 0 0 1px rgba(93,221,144,.14)}
.payment-icon{width:48px;height:48px;border-radius:10px;display:grid;place-items:center}
.payment-icon svg{width:27px;height:27px}
.payment-icon--pix{background:rgba(52,190,128,.15)}
.payment-icon--card{background:rgba(70,127,203,.2)}
.payment-copy strong,.payment-copy small{display:block}
.payment-copy strong{font-size:17px;font-weight:700;line-height:1.25}
.payment-copy small{font-size:14px;color:#b0bac7;margin-top:4px;line-height:1.35}
.payment-copy em{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 6px;border-radius:999px;background:rgba(86,210,139,.14);color:#71dda0;margin-left:5px}
.payment-radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;transition:border-color .16s}
.payment-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:transparent;transition:background .16s}
.payment-option:has(input:checked) .payment-radio,.payment-option.is-selected .payment-radio{border-color:#64df97}
.payment-option:has(input:checked) .payment-radio::after,.payment-option.is-selected .payment-radio::after{background:#64df97}
/* ── AREA DE PAGAMENTO ENCAPSULADA (26/08/2026) ───────────────────────────
O Baymard testa isto desde 2009 e reverificou em 2012, 2016 e 2023: as
pessoas percebem partes diferentes da MESMA pagina como tendo segurancas
diferentes, e a secao de pagamento precisa de um tratamento visual que nao
se repita em nenhum outro lugar. Aqui as duas secoes eram cartoes gemeos —
nada dizia ao olho "aqui e a parte do dinheiro".
A distincao escolhida e de PROFUNDIDADE, nao de cor: os cartoes da pagina
sao levantados (fundo mais claro que o fundo, sombra para fora) e esta caixa
e afundada (fundo mais escuro, sombra para dentro). Linguagem oposta, sem
introduzir uma cor nova que competisse com o dourado do botao. */
/* O invólucro NAO tem moldura propria: a secao inteira ja e a caixa. Com
borda aqui virava moldura dentro de moldura dentro de moldura (secao >
pay-box > opcao). Ele existe so para agrupar o que decide a compra —
escolha do meio, total e botao — e para ancorar o cadeado no fim. */
.pay-box{display:block}
/* o cadeado mora DENTRO da caixa: um selo longe do botao nao transfere
seguranca para o momento do clique */
.pay-secure{
display:flex;align-items:flex-start;gap:9px;
margin:11px 2px 1px;
font-size:12.5px;line-height:1.45;color:#9fadbe;
}
.pay-secure svg{width:17px;height:17px;fill:#7fd6a6;flex:0 0 17px;margin-top:1px}
.pay-secure strong{color:#c7d2df;font-weight:600}
/* bandeiras: pastilha BRANCA em volta de cada marca. Sem ela o preto do Elo e
o azul da Visa desaparecem no tema escuro — e uma pastilha resolve os dois
temas com um arquivo de imagem so. */
.bandeiras{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
/* A pastilha tem LARGURA LIVRE e a marca tem ALTURA TRAVADA. Igualar pela
largura deixaria a Mastercard (proporcao 1,23) enorme e a Visa (2,46)
espremida; o que o olho compara e a altura optica. */
.bandeira{
display:inline-flex;align-items:center;justify-content:center;
height:30px;padding:0 7px;border-radius:5px;
background:#fff;border:1px solid rgba(0,0,0,.08);
box-shadow:0 1px 2px rgba(0,0,0,.18);
}
/* nenhum filtro, nenhuma opacidade, nenhum tingimento: Mastercard e Pix
exigem paridade de cor, e apagar a marca destruiria o sinal de confianca */
.bandeira img{display:block;height:16px;width:auto;max-width:46px}
/* A Amex e a unica marca QUADRADA da fileira: na mesma altura das outras o
"AMERICAN EXPRESS" dentro do Blue Box fica ilegivel. Logotipo horizontal e
marca quadrada nao se igualam pela altura, se igualam pelo peso optico. */
.bandeira--amex img{height:21px}
.charge-summary{margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding:13px 2px 4px;border-top:1px solid rgba(255,255,255,.09)}
.charge-summary span{font-size:15px;color:#bdc6d1}
.charge-summary strong{font-size:26px;color:#fff}
.cta{width:100%;min-height:78px;margin-top:5px;border:0;border-radius:11px;background:linear-gradient(180deg,#f7cc69,#dca43b);color:#17140e;box-shadow:0 14px 30px rgba(222,166,57,.2),inset 0 1px rgba(255,255,255,.55);font-family:var(--form-font);cursor:pointer;padding:12px 18px;transition:transform .16s,filter .16s}
.cta:hover{transform:translateY(-1px);filter:brightness(1.035)}
.cta:focus-visible{outline:3px solid rgba(255,215,123,.38);outline-offset:3px}
.cta-main,.cta-sub{display:block}
.cta-main{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:.025em}
.cta-sub{font-size:13px;line-height:1.35;margin-top:4px}
.submit-note{text-align:center;color:#9da9b8;font-size:12.5px;line-height:1.5;margin:9px 10px 0}
.submit-note a{color:#adb8c7;text-underline-offset:2px}
/* ── resumo do pedido ──────────────────────────────────────────────────── */
.order-column{position:relative}
.order-card{position:sticky;top:24px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(12,31,52,.96),rgba(6,20,36,.975));border-radius:22px;padding:28px;box-shadow:var(--shadow);overflow:hidden}
.order-label{color:#b8c2cf;font-size:12px;font-weight:800;letter-spacing:.12em;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.09)}
.product-visual{height:380px;margin:6px -10px 0;border-radius:16px;position:relative;overflow:hidden;display:grid;place-items:center;
background:
radial-gradient(ellipse 68% 30% at 50% 96%,rgba(239,189,85,.26),transparent 60%),
radial-gradient(ellipse 90% 65% at 50% 18%,rgba(25,70,118,.4),transparent 75%),
linear-gradient(180deg,#0a2036,#061426)}
.product-cover-slot{position:relative;z-index:2}
.product-cover-slot img{display:block;width:236px;max-height:342px;object-fit:contain;border-radius:12px;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 34px 60px rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.4),0 0 0 1px rgba(239,189,85,.12)}
.product-cover-slot .sem-capa{width:220px;height:300px;display:grid;place-items:center;border:1px dashed rgba(239,189,85,.3);border-radius:12px;background:rgba(5,20,36,.38);color:#8494a8;font-size:10px;letter-spacing:.1em;text-align:center;padding:12px}
.product-title-block{text-align:center;margin-top:14px}
.product-title-block>small{display:block;color:#a5b0bf;font-size:12.5px}
.product-title-block h2{font-size:23px;line-height:1.28;margin:6px auto 10px;max-width:360px}
.access-pill{display:inline-flex;gap:6px;align-items:center;border:1px solid rgba(239,189,85,.36);background:rgba(239,189,85,.04);color:#d9b66b;border-radius:999px;padding:7px 13px;font-size:12.5px}
.order-price{margin-top:18px;padding:15px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.order-price__row{display:flex;justify-content:space-between;gap:16px;align-items:center;color:#aeb9c7;font-size:14px;line-height:1.35}
.order-price__row+.order-price__row{margin-top:8px}
.order-price__row strong{color:#edf0f4;font-size:14.5px;text-align:right}
.order-price__row--de span{color:#8b98a8}
.order-price__row--de s{color:#8b98a8;font-weight:600}
.order-price__row--de em{font-style:normal;font-size:10.5px;font-weight:800;color:#67dd99;background:rgba(86,210,139,.12);border-radius:999px;padding:3px 7px;margin-left:7px}
.order-price__row--total span{color:#d9dfe7;font-weight:700}
.order-price__row--total strong{font-size:32px;color:#f5cb70}
.benefits{list-style:none;margin:17px 0 0;padding:0;display:grid;gap:9px}
.benefits li{display:flex;align-items:center;gap:11px;font-size:14.5px;line-height:1.35;color:#d7dde5}
.benefits li .b-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(96,217,144,.12);flex:0 0 22px}
.benefits li .b-ic svg{width:12px;height:12px;fill:#66dd98}
.benefits li strong{font-weight:600}
/* selos nativos: garantia + acesso imediato (no lugar das artes de IA) */
.trust-chips{margin-top:17px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Com um chip so, duas colunas deixariam a garantia ocupando meia largura e um
buraco do lado — ela passa a ocupar a linha inteira. Seletor DUPLICADO de
proposito (.x.x--so1): a regra de .mobile-trust mora dentro do @media do
celular, mais abaixo no arquivo, e venceria por ordem se a especificidade
fosse igual. */
.trust-chips.trust-chips--so1,.mobile-trust.mobile-trust--so1{grid-template-columns:1fr}
.trust-chip{display:flex;align-items:center;gap:9px;border:1px solid rgba(239,189,85,.24);background:rgba(239,189,85,.05);border-radius:11px;padding:10px 12px}
.trust-chip svg{width:22px;height:22px;fill:var(--gold);flex:0 0 20px}
.trust-chip strong,.trust-chip small{display:block}
.trust-chip strong{font-size:13px;line-height:1.25}
.trust-chip small{font-size:11.5px;color:#a89f8a;margin-top:2px;line-height:1.3}
.trust-processor{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(3,15,28,.38)}
.trust-processor svg{width:26px;height:26px;fill:#69df9a;flex:0 0 26px}
.trust-processor p{margin:0}
.trust-processor strong,.trust-processor small{display:block}
.trust-processor strong{font-size:13.5px;line-height:1.3}
.trust-processor small{font-size:12px;line-height:1.4;color:#9facbc;margin-top:2px}
/* linha do tempo do pos-pagamento: sem caixa, so numeros e um fio ligando —
caixa aqui competiria com a capsula de pagamento logo acima */
.depois-bloco{margin:18px 2px 0}
.depois{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.depois li{display:flex;align-items:flex-start;gap:11px;position:relative}
.depois li:not(:last-child)::before{
content:"";position:absolute;left:9.5px;top:22px;bottom:-12px;width:1px;
background:rgba(255,255,255,.13);
}
.depois-rotulo{
margin:0 2px 11px;font-size:11px;font-weight:800;letter-spacing:.12em;
color:#8d9bad;
}
/* MENOR E MAIS MAGRO que o .section-number das secoes (30px, preenchido).
Dois sistemas de numeracao identicos na mesma tela fariam a pessoa achar que
o checkout tem cinco passos, e nao dois. */
.depois-n{
width:20px;height:20px;flex:0 0 20px;border-radius:50%;
display:grid;place-items:center;
background:none;border:1px solid rgba(255,255,255,.20);
color:#9fadbe;font-size:11px;font-weight:700;font-family:var(--form-font);
position:relative;z-index:1;
}
/* o ultimo passo e o unico que ja aconteceu do ponto de vista de quem le: o
visto fecha a historia melhor que um "3" */
.depois-n--fim{border-color:rgba(98,219,148,.45)}
.depois-n--fim svg{width:12px;height:12px;fill:#7fd6a6}
.depois strong,.depois small{display:block}
.depois strong{font-size:14px;line-height:1.3;font-weight:600;color:#dbe3ec}
.depois small{font-size:12.5px;line-height:1.35;color:#93a1b2;margin-top:2px}
/* suporte: link limpo, no lugar da faixa de IA */
.support-link{margin-top:16px;display:flex;justify-content:center}
.support-link a{display:inline-flex;align-items:center;gap:9px;color:#c4cedb;text-decoration:none;font-size:14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 18px;transition:border-color .16s,background .16s}
.support-link a:hover{border-color:rgba(98,219,148,.5);background:rgba(98,219,148,.06)}
.support-link svg{width:18px;height:18px;fill:#62db94}
/* resumo mobile: nativo, funciona sem JS */
.mobile-summary{display:none}
.ck-footer{border-top:1px solid rgba(255,255,255,.07);padding:18px 0 25px;color:#8f9cad;font-size:12.5px;line-height:1.4}
.ck-footer .shell{display:flex;justify-content:space-between;gap:20px}
.ck-footer nav{display:flex;gap:18px}
.ck-footer a{color:#8896a7;text-decoration:none}
.ck-footer a:hover{text-decoration:underline}
@media(max-width:960px){
.ck-grid{grid-template-columns:minmax(0,1fr) 380px;gap:30px}
.shell{width:min(100% - 34px,1080px)}
.product-visual{height:330px}
.product-cover-slot img{width:200px;max-height:292px}
.order-card{padding:20px}
.intro h1{font-size:38px}
}
@media(max-width:760px){
body{background-size:auto 100%;background-position:70% top;background-attachment:scroll}
.shell{width:min(100% - 24px,560px)}
/* O CABECALHO SAI NO CELULAR (27/08/2026).
Ele custava 62px na tela mais disputada da compra — a mesma altura que
decide se a opcao de cartao aparece ou nao quando a pessoa entra.
Por que da para tirar AQUI e nao no desktop: o papel do logo numa pagina de
pagamento e confirmar "estou no site certo", e no celular quem faz isso e a
barra do navegador, que mostra o dominio logo acima da pagina. No desktop a
barra fica longe do conteudo e sobra altura, entao la o cabecalho fica. */
.ck-header{display:none}
.ck-main{padding:10px 0 26px}
.ck-grid{display:block}
/* MENOS PREAMBULO ANTES DO PRIMEIRO CAMPO (26/08/2026).
Media do topo antigo: 481px de rolagem ate o campo de e-mail, numa tela
de 844px — mais de um terco da pagina era enfeite. Some o kicker (dizia
"FINALIZE SEU ACESSO" logo abaixo de um cabecalho que ja diz "CHECKOUT
OFICIAL") e some o paragrafo, que anunciava exatamente os dois titulos
numerados logo abaixo: "confira seus dados, escolha a forma de pagamento".
A frase de animo fica — ela e curta e vale o espaco que ocupa. */
/* O titulo encolhe mais um degrau: e o unico elemento da primeira tela sem
informacao nenhuma, e cada pixel dele empurra a escolha do meio de
pagamento para baixo da dobra. */
/* O TITULO SAI NO CELULAR (27/08/2026).
"Falta muito pouco." e animo, nao informacao — e era o unico elemento da
primeira tela que nao dizia nada. Os 45px dele eram justamente o que
empurrava a escolha do meio de pagamento para baixo da dobra num aparelho
com ~620px uteis. No desktop ele continua, porque la sobra altura. */
.intro{display:none}
.intro>p:last-child{display:none}
/* Subtitulo das secoes: no celular ele so repete o proprio titulo
("Forma de pagamento" / "Escolha como prefere concluir a compra") ou o
texto de ajuda do campo logo abaixo ("O acesso sera liberado no e-mail
informado abaixo" / "Confira com atencao: e neste endereco que o acesso
sera liberado"). Uma frase basta, e a de baixo esta mais perto do campo. */
.section-heading{align-items:center}
.section-heading p{display:none}
/* excecao: o subtitulo do pagamento fica, porque ele nao repete o titulo —
ele conta o que so se descobriria rolando (que existe cartao parcelado) */
.section-heading p.pg-resumo{display:block;font-size:13px;margin-top:2px}
.form-section--pagamento .section-heading{align-items:flex-start}
/* Ajuda de campo: fica so a do e-mail, que evita o "comprei e nao recebi".
A do WhatsApp e simpatia, nao instrucao. */
.field-help--extra{display:none}
.order-column{display:none}
.mobile-summary{display:block;border:1px solid var(--line);border-radius:15px;background:rgba(13,31,52,.86);margin-bottom:11px;overflow:hidden}
.mobile-summary summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}
.mobile-summary summary::-webkit-details-marker{display:none}
/* flex:1 1 auto + min-width:0 = o titulo encolhe ate o que sobrar, em vez de
ter uma largura fixa que colidia com o bloco de preco depois que o
parcelamento entrou nele */
.ms-product{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.ms-cover{width:46px;height:60px;flex:0 0 46px;display:grid;place-items:center;border-radius:7px;overflow:hidden;background:#0a1a2c}
.ms-cover img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.ms-product small,.ms-product strong{display:block}
.ms-product small{font-size:10.5px;color:#a0acbb;margin-bottom:3px}
.ms-product strong{font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ms-product>span{min-width:0}
.ms-price{text-align:right;flex:0 0 auto}
.ms-price strong,.ms-price small{display:block}
.ms-price strong{font-family:var(--form-font);font-size:17px;color:#f3ca70}
.ms-price small{font-size:10.5px;color:#a0acbb;margin-top:3px;display:flex;align-items:center;gap:4px;justify-content:flex-end;white-space:nowrap}
.ms-seta{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg);margin:-3px 0 0 1px;transition:transform .18s}
.mobile-summary[open] .ms-seta{transform:rotate(-135deg);margin-top:1px}
.ms-details{padding:0 12px 11px;border-top:1px solid rgba(255,255,255,.08)}
.ms-line{display:flex;justify-content:space-between;gap:14px;padding:8px 0 0;color:#a8b3c2;font-family:var(--form-font);font-size:12px;line-height:1.35}
.ms-line strong{color:#cbd3de;font-weight:600}
.ms-line--total{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ms-line--total strong{font-size:16px;color:#f3ca70}
.ck-form{gap:12px}
/* No celular as secoes aparecem uma DEPOIS da outra, nunca lado a lado:
diferenca sutil de fundo some na comparacao sequencial. O que sobrevive e
presenca x ausencia de contorno — por isso a secao comum fica sem caixa
nenhuma e so o pagamento tem moldura. O filete dourado nao encolhe. */
.form-section{padding:2px 0 9px}
.form-section--pagamento{padding:13px 14px;border-radius:15px;border-left-width:3px}
.form-section--pagamento .section-heading{margin-bottom:9px}
/* pastilhas um degrau menores no celular: elas nao precisam ser lidas, so
reconhecidas, e cada linha aqui custa a visibilidade da opcao de cartao */
/* em meia largura cabem quatro pastilhas de 23px com folga */
.bandeiras{gap:4px;margin-top:7px}
.bandeira{height:23px;padding:0 4px;border-radius:4px}
.bandeira img{height:12px;max-width:34px}
.bandeira--amex img{height:15px}
.section-heading{gap:9px;margin-bottom:11px}
.section-number{width:24px;height:24px;flex-basis:24px;font-size:11.5px}
.section-heading h2{font-size:19px}
.section-heading p{font-size:14px;line-height:1.4}
.field{margin-top:12px}
.input-wrap{min-height:52px;padding:0 13px}
.input-wrap input{font-size:16px;min-height:50px}
/* AS DUAS OPCOES LADO A LADO.
Empilhadas somavam 190px e a de cartao nascia abaixo da dobra numa tela de
~620px uteis. Em duas colunas somam ~95px e as duas aparecem de cara —
que e o que a pesquisa cobra: quem nao ve o meio que prefere, nao segue. */
.payment-options{grid-template-columns:1fr 1fr;gap:8px}
/* Tentei por o icone na mesma linha do nome, com display:contents e tres
colunas, para economizar 34px de altura. Nao aguenta esta largura: em meia
coluna "Cartao de credito" quebrava em tres linhas por cima do radio e as
bandeiras iam para duas fileiras. Fica o empilhado, que e estavel. */
.payment-option{
min-height:0;padding:11px 11px 12px;gap:7px;
grid-template-columns:auto 1fr;
grid-template-areas:"icone marca" "texto texto";
align-items:start;
}
.payment-icon{grid-area:icone;width:32px;height:32px;border-radius:9px}
.payment-icon svg{width:17px;height:17px}
.payment-radio{grid-area:marca;justify-self:end;align-self:center;width:18px;height:18px}
.payment-radio::after{width:8px;height:8px}
.payment-copy{grid-area:texto;min-width:0}
.payment-copy strong{font-size:14.5px;line-height:1.2}
.payment-copy small{font-size:12px;line-height:1.3;margin-top:2px}
/* a etiqueta "Liberacao na hora" nao cabe em meia largura e diria o mesmo
que a linha de baixo — some, e a linha assume o recado */
.payment-copy em{display:none}
.charge-summary strong{font-size:23px}
.cta-main{font-size:18.5px}
.cta-sub{font-size:11.5px}
.submit-note{font-size:11px;margin-inline:4px}
.trust-chips{grid-template-columns:1fr 1fr;margin-top:2px;padding-top:0;border-top:0}
.mobile-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0 0}
/* BARRA FIXA DE ACAO. So no celular: no desktop o botao nunca fica longe. */
.barra-fixa{
position:fixed;left:0;right:0;bottom:0;z-index:40;
display:flex;align-items:center;gap:12px;
/* max() e nao calc(): quando o Safari devolve 0 para a area segura, o
calc deixava a barra magra; assim ela nunca fica nem magra nem alta
demais no iPhone com barrinha de gestos. */
padding:10px 14px max(10px, env(safe-area-inset-bottom,0px));
background:#041020;
border-top:1px solid rgba(255,255,255,.12);
box-shadow:0 -8px 22px rgba(0,0,0,.45);
/* SEM backdrop-filter: sobre fundo solido o desfoque e invisivel e custa
um repaint a cada quadro de rolagem no iOS. */
}
.barra-fixa[hidden]{display:none}
.barra-total{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto}
.barra-total small{font-size:10.5px;color:#9fadbe}
.barra-total strong{font-size:18px;color:#f3ca70;font-family:var(--form-font)}
.barra-bt{
flex:1 1 auto;min-height:52px;border:0;border-radius:10px;cursor:pointer;
background:linear-gradient(180deg,#f7cc69,#dca43b);color:#17140e;
font-family:var(--form-font);font-size:16px;font-weight:800;
box-shadow:inset 0 1px rgba(255,255,255,.5);
}
.barra-bt:disabled{filter:grayscale(.3);cursor:default}
/* ESPACO RESERVADO SEMPRE, e nao so quando a barra esta na tela.
Com a reserva condicional havia um LOOP DE TREMOR: perto do fim da pagina
o botao real entrava na tela, a barra sumia, o documento encolhia 86px, o
navegador reancorava a rolagem, o botao saia da tela de novo e a barra
voltava. A altura do documento tem de ser constante. */
.ck-footer{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
/* ao chegar num campo pela tabulacao, o navegador rola o campo para a borda
de baixo — exatamente onde a barra fica (falha F110 do WCAG, criterio
2.4.11). O recuo de rolagem tira o campo de debaixo dela. */
html{scroll-padding-bottom:96px}
.ck-footer .shell{display:block;text-align:center}
.ck-footer nav{justify-content:center;margin-top:8px;gap:14px}
}
@media(min-width:761px){.mobile-trust{display:none}.barra-fixa{display:none!important}}
@media(max-width:380px){
.shell{width:calc(100% - 18px)}
.header-security strong{font-size:11px}
.brand-copy strong{font-size:13px}
.intro h1{font-size:27px}
.ms-product strong{max-width:145px}
.form-section--pagamento{padding-inline:13px}
.payment-copy em{display:none}
.trust-chip small{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* "Uso número internacional" (dono, 11/08/2026): abaixo do campo de WhatsApp.
O fone-br.js cria a caixinha; o estilo acompanha o tom escuro do checkout. */
.fone-intl{display:flex;align-items:center;gap:7px;margin:7px 2px 0;
font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.62);cursor:pointer;user-select:none}
.fone-intl input{width:15px;height:15px;margin:0;accent-color:#e8b64c;cursor:pointer;flex:0 0 auto}
.fone-intl:hover{color:#fff}
/* ── CUPOM (12/08/2026) ────────────────────────────────────────────────────
Discreto DE PROPÓSITO, a pedido do dono: dobrado, letra pequena, cinza, sem
caixa destacada. Um campo de cupom chamativo faz quem NÃO tem cupom parar a
compra e sair procurando um — e boa parte não volta.
Feito com /: abre e fecha sem uma linha de JavaScript, que
a CSP do site (script-src 'self', sem unsafe-inline) não permitiria inline. */
.cw-cupom{margin:.45rem 0 0;font-size:.82rem}
.cw-cupom>summary{cursor:pointer;color:#8b93a1;list-style:none;padding:.2rem 0;
display:inline-flex;align-items:center;gap:.35rem;-webkit-user-select:none;user-select:none}
.cw-cupom>summary::-webkit-details-marker{display:none}
.cw-cupom>summary::before{content:"+";font-weight:700;opacity:.7}
.cw-cupom[open]>summary::before{content:"\2212"}
.cw-cupom>summary:hover{color:#c9a24b}
.cw-cupom__linha{display:flex;gap:.4rem;margin:.45rem 0 0;max-width:22rem}
.cw-cupom__linha input{flex:1 1 auto;min-width:0;padding:.42rem .55rem;font:inherit;
text-transform:uppercase;border:1px solid rgba(255,255,255,.16);border-radius:7px;
background:rgba(255,255,255,.04);color:inherit}
.cw-cupom__linha input:focus{outline:2px solid rgba(201,162,75,.5);outline-offset:1px}
.cw-cupom__linha button{flex:0 0 auto;padding:.42rem .8rem;font:inherit;font-size:.82rem;
border:1px solid rgba(255,255,255,.18);border-radius:7px;background:transparent;
color:#c9a24b;cursor:pointer}
.cw-cupom__linha button:hover{background:rgba(201,162,75,.12)}
.cw-cupom__ok{margin:.4rem 0 0;color:#7fd6a6}
.cw-cupom__erro{margin:.4rem 0 0;color:#e79a9a}