/* Checkout Traction Gallery.
   Identidade da loja (tema Horizon): preto, acento verde-limão #c0ff00, vermelho
   #c10a0a, corpo em mono e display na gothicus do Typekit da marca.

   Três fontes, cada uma com um trabalho:
   - gothicus (Typekit da marca): SÓ o logo e o título "Finalizar compra"
   - Inter: todos os outros títulos, porque ler rápido vale mais que estilo
   - Anonymous Pro (mono): campo, preço e texto de leitura

   Blackletter em campo de CEP ou em "Pague R$ 25,56 com Pix" faz a pessoa parar
   para decifrar no pior momento possível, que é na hora de pagar. */
:root{
  /* CLARO desde 22/09/2026, por pedido do Vini ("deixa o checkout light
     também"), no mesmo dia em que a loja voltou ao tema claro. O checkout e a
     loja têm que parecer o mesmo site: paleta diferente entre os dois faz a
     pessoa achar que caiu em outro lugar bem na hora de pagar.

     ⚠️ Toda cor deste arquivo mora AQUI. Precisou de cor nova, cria token, não
     escreve o hexadecimal no meio da regra: a virada para claro encontrou 18
     cores fixas espalhadas, e cada uma era uma chance de deixar um bloco preto
     para trás no meio de um checkout branco.

     ⚠️ O cabeçalho (.topo) continua PRETO de propósito: o da loja também é, e é
     o que dá continuidade de um para o outro.

     O limão é cor de marca e não muda. Sobre claro ele pede texto preto, nunca
     branco, senão o contraste cai abaixo do legível.

     ⚠️ TODO TOM SECUNDÁRIO PASSA PELA RÉGUA de 4,5:1 sobre o fundo em que ele
     é usado, e quem mede é o auditar-contraste.cjs (na pasta do tema), não o
     olho. A primeira versão clara reprovou: --apagado era #8a8a8a, que dá
     3,2:1 sobre #f7f7f7 e estava em 10 rótulos de campo. O Vini resumiu como
     "tá muito claro, tá atrapalhando a leitura", e a medição deu o mesmo
     veredito com número. Cor nova aqui: rodar o auditor antes de subir.

     ⚠️ ESCURECER O FUNDO ENCURTA TODO TOM SECUNDÁRIO. Quando o bloco foi de
     #f3f3f3 para #dcdcdc, seis textos que passavam passaram a reprovar sem
     ninguém ter tocado neles: o cinza de apoio caiu para 4,19:1 e os links em
     limão para 4,46:1. A régua vale contra o PIOR fundo em que a cor aparece,
     que aqui é o bloco, não a página. */
  /* ⚠️ A PÁGINA É CINZA E O BLOCO É MAIS ESCURO QUE ELA. Pedido do Vini em
     22/09/2026 ("tira o branco do fundo, põe cinza claro e o interior dos
     blocos mais escuro"). É o contrário do cartão branco flutuando em cinza que
     a maioria dos checkouts usa, e é de propósito.

     Quem NÃO acompanha esse escurecimento é o campo de preencher: ele fica
     claro (--campo-fundo) dentro do bloco escuro. Campo da mesma cor do bloco
     apaga a noção de "aqui se digita", e num checkout isso é formulário
     abandonado. */
  --fundo:#e9e9e9;--superficie:#dcdcdc;--superficie-2:#d2d2d2;--elevado:#e4e4e4;
  --tinta:#121212;--suave:#444444;--apagado:#595959;
  --limao:#c0ff00;--limao-forte:#d4ff4d;--limao-fosco:#7ea600;
  --sangue:#b00909;--erro:#b00909;--ok:#3c6300;
  --linha:#c6c6c6;--linha-forte:#ababab;--campo-borda:#a6a6a6;
  /* Superfícies e realces que antes estavam escritos no meio das regras. */
  --campo-fundo:#fafafa;--campo-fundo-foco:#ffffff;--realce:#c9c9c9;
  --foto-fundo:#efefef;
  --limao-fundo:#f0ffc4;--limao-fundo-forte:#e4ff9c;
  --aviso-fundo:#fdf4cc;--aviso-borda:#e0c55a;
  --aviso-botao:#f0e2a8;--aviso-botao-hover:#e6d48c;
  --erro-fundo:#fbe2e2;--erro-borda:#e8a0a0;
  /* ⚠️ LIMÃO TEM DOIS PAPÉIS E DUAS COBRES. Como FUNDO e como BORDA vale o
     limão de marca (--limao). Como TEXTO sobre claro ele é ilegível: #c0ff00
     sobre branco dá cerca de 1,6:1 de contraste, contra os 4,5:1 mínimos. Todo
     "color:" usa --limao-texto, que é o mesmo limão puxado para baixo até ficar
     legível sobre branco e sobre o limão-fundo. Isso não existia no tema
     escuro, onde o limão puro era o texto certo. */
  --limao-texto:#425900;
  --preto-marca:#000;--branco:#fff;
  /* A blackletter da marca fica SÓ no logo e no título da página. Em qualquer
     outro lugar ela custa leitura, e num checkout leitura é conversão: o Vini
     apontou isso em 22/09/2026 vendo "Pague R$ 25,56 com Pix" em gothicus.
     Os demais títulos vão na Inter, que já é a fonte de destaque do tema da
     loja, então não é fonte nova na marca: é a que já estava lá. */
  --display:"gothicus","gothicus-roman",Georgia,"Times New Roman",serif;
  --titulo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Anonymous Pro",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --sans:var(--mono);
  --serif:var(--titulo);
  --raio:4px;--raio-botao:14px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font:15px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--limao-texto);text-underline-offset:3px}
p{margin:0 0 12px}
h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
:focus-visible{outline:2px solid var(--limao);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:16px;top:-80px;z-index:20;background:var(--limao);color:#000;padding:10px 14px;border-radius:var(--raio);text-decoration:none;font-weight:700}
.pular:focus{top:12px}

/* ------------------------------------------------------------------ topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,4vw,48px);background:#000;border-bottom:1px solid var(--linha);color:var(--tinta)}
/* ⚠️ O .topo é PRETO numa página clara, então nada ali dentro pode herdar a
   tinta do corpo. A .marca-nome não declarava cor, herdava #141414 e ficava
   preto sobre preto: 1,14:1, praticamente invisível. Medido em 22/09/2026. */
.topo{color:var(--branco)}
.topo a{color:var(--branco)}
.topo .seguro{color:var(--limao)}
.topo :focus-visible{outline-color:var(--limao)}
/* Lockup da marca: o símbolo da loja mais a palavra na gothicus do Typekit,
   que é a fonte de marca da Traction. */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:var(--raio);color:var(--tinta)}
.marca img{width:auto;height:44px}
.marca-nome{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.02em;white-space:nowrap}
.seguro{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--limao-texto);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.icone{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aviso-teste{margin:0;background:var(--aviso-fundo);border-bottom:1px solid var(--aviso-borda);color:var(--limao-texto);font-size:13px;text-align:center;padding:8px 16px;letter-spacing:.04em}

.checkout{width:min(1180px,100%);margin:0 auto;padding:28px clamp(16px,4vw,40px) 72px}
/* O único título em blackletter da página, por pedido do Vini. */
.titulo-pagina{font-family:var(--display);font-weight:400;letter-spacing:.01em;font-size:clamp(32px,4.4vw,46px);margin-bottom:20px;color:var(--tinta)}
.grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.carregando,.vazio{text-align:center;padding:64px 0}
.vazio h1{font-size:clamp(30px,6vw,42px)}
.vazio .botao{width:auto;margin-top:8px}

/* Trilha de progresso: mostra em que etapa a pessoa está sem tirar ela da
   página única. Preenche conforme os blocos ficam completos (checkout.js). */
.trilha{display:flex;align-items:center;gap:0;margin:0 0 20px;padding:0;list-style:none;counter-reset:etapa}
.trilha li{position:relative;flex:1;min-width:0;padding:0 0 0 0;text-align:center;font-size:11px;line-height:1.3;color:var(--apagado);text-transform:uppercase;letter-spacing:.1em}
.trilha li::before{content:"";display:block;height:3px;margin:0 2px 8px;border-radius:2px;background:var(--linha);transition:background-color .35s ease}
.trilha li.ativa{color:var(--limao-texto)}
.trilha li.ativa::before{background:var(--limao)}
.trilha li.pronta{color:var(--suave)}
.trilha li.pronta::before{background:var(--limao-fosco)}

/* ------------------------------------------------------------- blocos */
.bloco{position:relative;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(16px,3vw,24px);margin:0 0 16px;transition:border-color .22s,box-shadow .22s,background-color .22s}
/* Etapa em preenchimento: contorno verde-limão, o destaque da marca. */
.bloco:focus-within{border-color:var(--limao);box-shadow:0 0 0 1px var(--limao),0 0 24px -6px rgba(192,255,0,.35);background:var(--superficie-2)}
.bloco.completo{border-color:var(--linha-forte)}
.bloco h2{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:.01em;margin-bottom:18px;color:var(--tinta)}
.passo{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--elevado);border:1px solid var(--linha-forte);color:var(--suave);font:700 13px/1 var(--mono);transition:background-color .25s,color .25s,border-color .25s,transform .25s}
.bloco:focus-within .passo{background:var(--limao);border-color:var(--limao);color:#000;transform:scale(1.06)}
.bloco.completo .passo{background:transparent;border-color:var(--limao-fosco);color:var(--limao-texto)}
/* Etapa concluída troca o número por um tique, sem mexer no HTML. */
.bloco.completo .passo{font-size:0}
.bloco.completo .passo::after{content:"✓";font-size:15px;line-height:1}

.campos{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.campos-cartao{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:12px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-largo{grid-column:1/-1}
.campo label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.campo input,.campo select,.campo textarea{width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid var(--campo-borda);border-radius:var(--raio);background:var(--campo-fundo);color:var(--tinta);font-size:16px;line-height:1.3}
.campo select{appearance:none;-webkit-appearance:none;padding-right:38px;background:var(--campo-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555555' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
/* Campos com o nome dentro, um por linha, que sobe quando o campo é preenchido */
.campo-flutuante{position:relative}
.campo-flutuante input,.campo-flutuante select{min-height:58px;padding:25px 15px 7px;border:1px solid var(--campo-borda);border-radius:var(--raio);background-color:var(--campo-fundo);transition:border-color .15s,box-shadow .15s,background-color .15s}
.campo-flutuante label{position:absolute;left:16px;right:16px;top:18px;margin:0;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.3;color:var(--apagado);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .15s ease,font-size .15s ease,color .15s ease}
.campo-flutuante input:focus+label,.campo-flutuante input:not(:placeholder-shown)+label,.campo-flutuante select+label{top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.campo-flutuante input:focus,.campo-flutuante select:focus{border-color:var(--limao);box-shadow:0 0 0 1px var(--limao);background-color:var(--campo-fundo-foco);outline:none}
.campo-flutuante input:focus+label{color:var(--limao-texto)}
.campo input[aria-invalid=true],.campo select[aria-invalid=true]{border-color:var(--erro);box-shadow:0 0 0 1px var(--erro)}
.ajuda{font-size:12px;color:var(--apagado);margin:0}
.erro-campo{font-size:13px;color:var(--erro);margin:0}

/* CEP: lupa no campo e sugestões enquanto a pessoa digita (sugestoes-cep.js) */
.cep-caixa{position:relative}
.cep-caixa input{padding-right:46px}
.cep-lupa{position:absolute;right:16px;top:19px;width:20px;height:20px;color:var(--suave);pointer-events:none}
.cep-sugestoes{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:100%;max-height:min(320px,55vh);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:4px;list-style:none;background:var(--elevado);border:1px solid var(--linha-forte);border-radius:var(--raio);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.cep-sugestoes [role=option]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:1px;padding:10px 12px;border-radius:var(--raio);cursor:pointer;line-height:1.35}
.cep-sugestoes [role=option] strong{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--limao-texto)}
.cep-sugestoes [role=option] span{min-width:0;overflow-wrap:anywhere}
.cep-sugestoes [role=option] small{grid-column:2;font-size:12px;color:var(--apagado)}
.cep-sugestoes [role=option][aria-selected=true],.cep-sugestoes [role=option]:hover{background:var(--realce)}
.cep-mais{padding:8px 12px;font-size:12px;color:var(--apagado)}
.nota{font-size:13px;color:var(--apagado);margin:10px 0 0}

/* Caixa "Criar minha conta", com o desconto no Pix */
.opcao-conta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px dashed var(--limao-fosco);border-radius:var(--raio);background:var(--limao-fundo)}
.opcao-conta input{width:22px;height:22px;flex:0 0 22px;margin:1px 0 0;accent-color:var(--limao);cursor:pointer}
.opcao-conta label{min-width:0;cursor:pointer}
.opcao-conta strong{display:block;font-size:15px;line-height:1.35}
.opcao-conta label>span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--suave)}
.opcao-conta:has(input:checked){border-style:solid;border-color:var(--limao);box-shadow:inset 0 0 0 1px var(--limao);background:var(--limao-fundo-forte)}
.metodo label .metodo-oferta,.metodo label .metodo-oferta span{color:var(--limao-texto);font-weight:700}
.pix-conta{display:grid;gap:10px;margin-top:12px}
.painel .pix-conta p{font-size:14px;font-weight:700;color:var(--limao-texto)}
.pix-conta .botao{min-height:46px;font-size:15px}

/* ------------------------------------------------------------------ frete */
.fretes{margin:0;padding:0;border:0;min-width:0}
.fretes-lista{display:grid;gap:10px}
.frete-aviso{margin:0;padding:14px 16px;border:1px dashed var(--campo-borda);border-radius:var(--raio);background:var(--superficie-2);font-size:14px;color:var(--suave)}
/* Enquanto o Melhor Envio responde, o aviso pulsa: a pessoa vê que a página
   está trabalhando com o CEP que ela acabou de digitar. */
.frete-aviso.cotando{border-style:solid;border-color:var(--limao-fosco);color:var(--limao-texto);animation:pulsar 1.2s ease-in-out infinite}
.opcao-frete{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--campo-borda);border-radius:var(--raio);background:var(--superficie-2);transition:border-color .18s,box-shadow .18s,background-color .18s,transform .18s}
.opcao-frete:hover{border-color:var(--linha-forte)}
.opcao-frete:has(input:checked){border-color:var(--limao);box-shadow:inset 0 0 0 1px var(--limao);background:var(--limao-fundo)}
.opcao-frete input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--limao)}
.opcao-frete label{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
.opcao-frete label .frete-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.frete-rotulo{margin-bottom:3px;padding:1px 8px;border-radius:999px;background:var(--limao);color:#000;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.opcao-frete small.frete-fixo{color:var(--ok);font-weight:700}
.opcao-frete small{font-size:13px;color:var(--suave)}
.opcao-frete label>strong{white-space:nowrap;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- pagamento */
.metodos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:0;border:0}
.metodo{position:relative;min-width:0}
.metodo input{position:absolute;opacity:0;width:1px;height:1px}
.metodo label{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px 14px;border:1px solid var(--campo-borda);border-radius:var(--raio);background:var(--superficie-2);cursor:pointer;transition:border-color .18s,box-shadow .18s,background-color .18s}
.metodo label:hover{border-color:var(--linha-forte)}
.metodo label strong{font-size:14px;font-weight:700}
.metodo label span{font-size:12px;color:var(--suave)}
.metodo input:checked+label{border-color:var(--limao);box-shadow:inset 0 0 0 1px var(--limao);background:var(--limao-fundo)}
.metodo input:focus-visible+label{outline:2px solid var(--limao);outline-offset:2px}
.metodo-topo{display:inline-flex;align-items:center;gap:6px}
.metodo-icone{display:block;width:auto;height:18px}
.metodo-bandeiras{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.metodo-bandeiras img{display:block;width:auto;height:15px}
.painel{border-top:1px solid var(--linha);padding-top:16px}
.painel p{margin:0}

/* ----------------------------------------------------------------- botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:14px 22px;border:1px solid transparent;border-radius:var(--raio-botao);background:var(--limao);color:#000;font:700 15px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background .18s,transform .12s,box-shadow .18s}
.botao:hover{background:var(--limao-forte);box-shadow:0 0 28px -8px rgba(192,255,0,.6)}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.5;cursor:wait;box-shadow:none}
.botao[aria-busy=true]::after{content:"";width:16px;height:16px;border:2px solid rgba(0,0,0,.3);border-top-color:#000;border-radius:50%;animation:girar .7s linear infinite}
.botao-secundario{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.botao-secundario:hover{background:var(--superficie-2);border-color:var(--limao);box-shadow:none}
.botao-secundario[aria-busy=true]::after{border-color:rgba(242,242,242,.25);border-top-color:var(--tinta)}
.botao-teste{background:var(--aviso-botao);color:var(--aviso-borda)}
.botao-teste:hover{background:var(--aviso-botao-hover)}
.texto-botao{background:none;border:0;padding:8px 0;color:var(--limao-texto);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulsar{50%{opacity:.4}}
/* O total pisca em verde-limão quando muda, para a pessoa notar o recálculo. */
@keyframes destacar{0%{color:var(--limao-texto);transform:scale(1.04)}100%{color:var(--tinta);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
.letra-miuda{font-size:12px;color:var(--apagado);text-align:center;margin:12px 0 0}

/* Selos de segurança e formas de pagamento aceitas, embaixo do botão */
.selos{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--linha);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.selos li{display:flex;gap:9px;align-items:flex-start;min-width:0;font-size:12px;line-height:1.35;color:var(--apagado)}
.selos .icone{width:24px;height:24px;flex:0 0 24px;color:var(--limao-texto)}
.selos strong{display:block;color:var(--tinta);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.formas{margin:16px 0 0;text-align:center}
.formas-rotulo{display:block;font-size:11px;color:var(--apagado);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
.formas-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.formas-lista img{display:block;width:auto;height:26px}
/* Bandeira clara sobre fundo escuro já se destaca; a Hipercard não precisa mais
   do contorno que tinha no fundo claro. */
.erro-geral{border:1px solid var(--erro-borda);background:var(--erro-fundo);color:var(--erro);border-radius:var(--raio);padding:12px 14px;margin:0 0 12px;font-size:14px}
.avisos{border:1px solid var(--aviso-borda);background:var(--aviso-fundo);color:var(--limao-texto);border-radius:var(--raio);padding:12px 14px;margin:0 0 16px;font-size:14px}
.avisos p{margin:0}
.avisos p+p{margin-top:6px}

/* ----------------------------------------------------------------- resumo */
.coluna-resumo{position:sticky;top:20px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:24px}
.resumo-alternar{display:none}
.resumo-titulo{font-size:19px;text-transform:uppercase;letter-spacing:.08em}
.itens{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:16px}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center}
.item-foto{position:relative;width:64px;height:64px}
.item-foto img{width:64px;height:64px;object-fit:cover;border-radius:var(--raio);border:1px solid var(--linha);background:var(--foto-fundo)}
.item-qtd{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--limao);color:#000;font:700 12px/22px var(--mono);text-align:center}
.item-nome{font-weight:700;font-size:13px;line-height:1.35;margin:0}
.item-detalhe{font-size:12px;color:var(--suave);margin:2px 0 0}
.item-selo{font-size:11px;font-weight:700;color:var(--limao-texto);margin:2px 0 0;text-transform:uppercase;letter-spacing:.05em}
.item-preco{text-align:right;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.item-preco s{display:block;color:var(--apagado);font-size:12px}
.link-sacola{display:inline-block;font-size:13px;margin-bottom:4px}

.bump{border:1.5px dashed var(--limao);background:var(--limao-fundo);border-radius:var(--raio);padding:16px;margin:16px 0}
.bump-topo{display:flex;gap:12px;align-items:flex-start}
.bump-topo input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--limao);cursor:pointer}
.bump-topo label{cursor:pointer}
.bump-topo strong{display:block;font-size:15px;line-height:1.35}
.bump-topo span{display:block;font-size:12px;color:var(--suave);margin-top:2px}
.bump-escolha{margin-top:14px;min-width:0}
.bump-escolha>.campo{margin-top:6px}

/* Seletor de estampa por fotos (bump e oferta da página de obrigado) */
.estampas-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.estampas-rotulo{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.estampas-setas{display:flex;gap:6px;flex-shrink:0}
.estampas-setas button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--linha-forte);border-radius:50%;background:var(--superficie-2);color:var(--limao-texto);cursor:pointer;transition:background-color .16s,border-color .16s}
.estampas-setas button:hover{background:var(--realce);border-color:var(--limao)}
.estampas{display:flex;align-items:stretch;gap:10px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--limao-fosco) var(--superficie-2);padding:3px 3px 12px}
.estampas::-webkit-scrollbar{height:6px}
.estampas::-webkit-scrollbar-thumb{background:var(--limao-fosco);border-radius:9px}
.estampas::-webkit-scrollbar-track{background:var(--superficie-2);border-radius:9px}
.estampa{position:relative;display:block;flex:0 0 136px;min-width:0;margin:0;cursor:pointer;scroll-snap-align:start}
.estampa input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;opacity:0}
.estampa-cartao{display:flex;flex-direction:column;height:100%;overflow:hidden;border:2px solid var(--linha-forte);border-radius:var(--raio);background:var(--superficie-2);transition:border-color .16s,box-shadow .16s,transform .16s}
.estampa-cartao:hover{transform:translateY(-2px)}
.estampa-cartao img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--foto-fundo)}
.estampa-nome{display:block;padding:8px 8px 6px;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.estampa-marca{display:block;visibility:hidden;margin-top:auto;padding:5px 8px;background:var(--limao);color:#000;font-size:11px;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.estampa input:checked+.estampa-cartao{border-color:var(--limao);box-shadow:0 0 0 1px var(--limao),0 0 20px -6px rgba(192,255,0,.5)}
.estampa input:checked+.estampa-cartao .estampa-marca{visibility:visible}
.estampa input:focus-visible+.estampa-cartao{outline:3px solid var(--tinta);outline-offset:2px}
.oferta-preco{margin:10px 0 0;font-size:14px}
.oferta-preco s{color:var(--apagado);margin-right:6px}
.oferta-preco strong{color:var(--limao-texto);font-size:18px;font-variant-numeric:tabular-nums}

.cupom{margin:16px 0;padding-top:16px;border-top:1px solid var(--linha)}
.cupom>label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.cupom-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.cupom-linha input{width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid var(--campo-borda);border-radius:var(--raio);background:var(--campo-fundo);color:var(--tinta);font-size:16px;text-transform:uppercase;letter-spacing:.05em}
.cupom-linha input:focus{border-color:var(--limao);box-shadow:0 0 0 1px var(--limao);outline:none}
.cupom-linha .botao{width:auto;min-height:48px;padding:10px 16px;font-size:14px}
.cupom-mensagem{font-size:13px;margin:8px 0 0}
.cupom-mensagem.ok{color:var(--ok)}
.cupom-mensagem.alerta{color:var(--erro)}

.totais{margin:0;padding-top:16px;border-top:1px solid var(--linha);display:grid;gap:8px;transition:opacity .2s}
.totais div{display:flex;justify-content:space-between;gap:12px}
.totais dt{color:var(--suave);min-width:0}
.totais dd{margin:0;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.totais .economia dd{color:var(--ok)}
.totais .total{padding-top:12px;margin-top:4px;border-top:1px solid var(--linha);align-items:baseline}
.totais .total dt{color:var(--tinta);font-weight:700;font-family:var(--titulo);font-size:16px;text-transform:uppercase;letter-spacing:.06em}
.totais .total dd{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--tinta)}
/* Recalculando: o resumo esmaece. Ao terminar, o total pisca uma vez. */
.atualizando .totais{opacity:.45}
.totais .total dd.mudou{animation:destacar .6s ease-out}

.pix-resultado{text-align:center}
.pix-resultado h2{display:block}
.pix-qr{width:min(240px,100%);height:auto;margin:8px auto 16px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:#fff;padding:8px}
.pix-codigo{width:100%;min-height:84px;font:13px/1.4 var(--mono);padding:10px;border:1px solid var(--campo-borda);border-radius:var(--raio);resize:none;background:var(--campo-fundo);color:var(--tinta);word-break:break-all}
.status-espera{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin:14px 0 4px;color:var(--limao-texto)}
.status-espera::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--limao);animation:pulsar 1.4s ease-in-out infinite}
.acoes{display:grid;gap:10px;margin-top:14px}
.pix-resultado .campo{text-align:left}

/* ------------------------------------------------------------- obrigado */
.obrigado{width:min(760px,100%);margin:0 auto;padding:32px clamp(16px,4vw,40px) 72px}
.sobretitulo{display:block;font-family:var(--titulo);text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--limao-texto);margin-bottom:10px}
.status h1{font-size:clamp(32px,6vw,48px)}
.status.aprovado .sobretitulo{color:var(--ok)}
.status h1:focus{outline:none}
.upsell{border:1.5px solid var(--limao);background:var(--limao-fundo);border-radius:var(--raio);padding:clamp(16px,3vw,28px);margin:0 0 16px}
.upsell h2{font-size:clamp(26px,5vw,34px);margin-bottom:8px}
.selo-tempo{display:inline-flex;align-items:center;gap:6px;background:var(--limao);color:#000;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;margin:0 0 12px;font-variant-numeric:tabular-nums}
.upsell-escolha{margin:16px 0;min-width:0}
.upsell-campos{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:6px}
.upsell-campos .oferta-preco{margin:0 0 14px}
.upsell .estampa{flex-basis:156px}
.upsell .texto-botao{margin-right:20px}
.upsell-resultado{border-radius:var(--raio);padding:14px;background:var(--limao-fundo);border:1px solid var(--limao-fosco);color:var(--ok);font-weight:700}
.boleto-linha{font:14px/1.5 var(--mono);word-break:break-all;background:var(--campo-fundo);border:1px solid var(--campo-borda);border-radius:var(--raio);padding:12px;margin:8px 0 12px}
.simulado{margin:16px 0;font-size:13px}
.simulado summary{cursor:pointer;color:var(--suave);padding:8px 0}
.simulado pre{overflow:auto;max-height:420px;background:var(--campo-fundo);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;font-size:12px;line-height:1.45;white-space:pre;color:var(--tinta)}
.voltar{display:inline-block;margin-top:8px}

/* ------------------------------------------------------------ responsivo */
@media (max-width:900px){
  .grade{grid-template-columns:minmax(0,1fr);gap:16px}
  .coluna-resumo{position:static;order:-1;padding:0;background:transparent;border:0}
  .resumo-alternar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:12px 16px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);color:var(--tinta);cursor:pointer;text-align:left}
  .resumo-alternar .rotulo{display:inline-flex;align-items:center;gap:8px;color:var(--limao-texto);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
  .resumo-alternar strong{font-family:var(--mono);font-size:22px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .resumo-alternar .seta{transition:transform .2s}
  .resumo-alternar[aria-expanded=true] .seta{transform:rotate(180deg)}
  .resumo-conteudo{margin-top:8px;padding:16px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio)}
  .recolhido .resumo-conteudo{display:none}
  .titulo-pagina{font-size:32px;margin-bottom:14px}
  .trilha li{font-size:10px;letter-spacing:.06em}
}
@media (max-width:560px){
  .metodos{grid-template-columns:minmax(0,1fr)}
  .metodo label{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
  .metodo-bandeiras{flex-basis:100%;margin-top:0}
  .selos{grid-template-columns:minmax(0,1fr)}
  .seguro span{display:none}
  .marca img{height:34px}
  .marca-nome{font-size:24px}
  .trilha li{font-size:0}
  .trilha li::before{margin-bottom:0;height:4px}
}
@media (max-width:420px){
  .upsell-campos{grid-template-columns:minmax(0,1fr)}
  .upsell-campos .oferta-preco{margin:0}
  .estampa,.upsell .estampa{flex-basis:124px}
  .item{grid-template-columns:56px minmax(0,1fr);}
  .item-foto,.item-foto img{width:56px;height:56px}
  .item-preco{grid-column:2;text-align:left}
  .item-preco s{display:inline;margin-right:6px}
}

/* "Você economizou", abaixo do total. Pedido do Vini em 22/09/2026.
   Fica em limão legível e num fundo de limão bem claro, para ser a única coisa
   que salta depois do total sem competir com ele. */
/* ⚠️ Sem prefixo .resumo de propósito: a linha NÃO está dentro de um elemento
   com essa classe, e o seletor com prefixo não casava com nada. Ela aparecia
   sem destaque nenhum, cinza sobre branco, e o defeito não dá erro em lugar
   nenhum. Descoberto na conferência em 22/09/2026. */
.economia-total{margin-top:8px;padding:9px 11px;border-radius:var(--raio);background:var(--limao-fundo);border:1px solid var(--limao-fosco)}
.economia-total dt,.economia-total dd{color:var(--limao-texto);font-weight:700;font-size:14px}
.economia-total dd{font-variant-numeric:tabular-nums}