@charset "utf-8";
/* =====================================================================
   KM SPORTS — checkout (inscrição, resumo, pagamento, pix, boleto)
   Sobrescreve carrinho.css / pagamento.css / pix.css / boleto.css mantendo
   todos os ids/classes usados pelo JS (carrinho.js, pagamento.js).
   Carregado DEPOIS dos CSS antigos.
   ===================================================================== */
body.km.km-pg-carrinho, body.km.km-pg-pagamento, body.km.km-pg-resumo_pedido, body.km.km-pg-pix, body.km.km-pg-boleto{ background:var(--km-bg) !important; }
body.km-pg-carrinho section:after, body.km-pg-pagamento section:after, body.km-pg-resumo_pedido section:after{ display:none !important; }
body.km-pg-carrinho section .util, body.km-pg-pagamento section .util, body.km-pg-resumo_pedido section .util, body.km-pg-pix section .util, body.km-pg-boleto section .util{ text-align:left; max-width:var(--km-container); width:auto; padding:0 24px; margin:0 auto; }
body.km-pg-carrinho > section, body.km-pg-pagamento > section, body.km-pg-resumo_pedido > section, body.km-pg-pix > section, body.km-pg-boleto > section{ padding-top:120px !important; padding-bottom:clamp(64px,9vw,96px) !important; }
body.km.km-com-timer > section{ padding-top:150px !important; }

/* cabeçalho do checkout (breadcrumb + voltar) */
.km-checkout-topo{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }

/* ---- layout principal: formulário + coluna lateral ---- */
.detalhes{ padding:0 !important; text-align:left !important; display:grid !important; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; width:100% !important; }
.detalhes form#jogo{ display:contents; }
.detalhes .pagamento{ width:100% !important; margin:0 !important; padding:0 !important; float:none !important; display:flex; flex-direction:column; gap:20px; min-width:0; }
.detalhes .pagamento.sem_coluna{ grid-column:1 / -1; }
.detalhes .coluna_flutua{ width:100% !important; margin:0 !important; padding:0 !important; float:none !important; position:sticky; top:118px; display:flex; flex-direction:column; gap:20px; }
.detalhes .menu_equipe, .detalhes .membro_escolhido{ grid-column:1 / -1; }
@media (max-width:980px){ .detalhes{ grid-template-columns:1fr; } .detalhes .coluna_flutua{ position:static; } }

/* ---- cartões brancos ---- */
.detalhes .pagamento .titulo_principal, .detalhes .pagamento .doador, .detalhes .pagamento .colunas_esquerda, .detalhes .pagamento .cartao, .detalhes .pagamento .sou_eu_box{ background:#fff; border:1px solid var(--km-borda); border-radius:20px; padding:clamp(20px,3vw,30px) !important; box-sizing:border-box; width:100% !important; margin:0 !important; text-align:left !important; }
.detalhes .pagamento .titulo_principal{ display:flex !important; flex-direction:column; gap:6px; line-height:1.2 !important; font-size:clamp(20px,2.8vw,26px) !important; color:var(--km-texto) !important; letter-spacing:-.01em !important; font-family:var(--km-font) !important; }
.detalhes .pagamento .titulo_principal p.titulo_carrinho{ font-size:12px !important; letter-spacing:.1em !important; color:var(--km-accent) !important; text-align:left !important; padding:0 !important; }
.detalhes .pagamento .titulo_principal span{ color:var(--km-accent) !important; font-size:20px !important; margin:0 !important; }
.detalhes .pagamento .titulo_principal span:before{ display:none !important; }
.detalhes .pagamento .titulo_principal strong{ color:var(--km-accent); }
.detalhes .pagamento .tag_destaque{ position:static !important; display:inline-block; align-self:flex-start; background:var(--km-accent) !important; color:#fff !important; font-size:10.5px !important; letter-spacing:.08em; padding:6px 14px !important; border-radius:99px; margin-bottom:-6px; }
.detalhes .pagamento .titulo_formas{ font-size:19px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--km-texto) !important; font-family:var(--km-font) !important; display:flex !important; align-items:center; gap:9px; margin:0 0 14px !important; line-height:1.3 !important; }
.detalhes .pagamento .titulo_formas i{ color:var(--km-accent) !important; font-size:20px !important; width:auto !important; height:auto !important; line-height:1 !important; }
.detalhes .pagamento .titulo_formas span, .detalhes .pagamento .titulo_formas a{ color:var(--km-accent) !important; font-size:inherit !important; letter-spacing:0 !important; }
.detalhes .pagamento .titulo_formas .meu_ingresso{ display:block; width:100%; font-size:13px; font-weight:500; color:var(--km-texto2) !important; margin-top:4px; }
.detalhes .pagamento .titulo_formas .meu_ingresso span{ font-weight:700; }

/* ---- campos ---- */
.detalhes .pagamento .doador .colunas_cc, .detalhes .pagamento .doador .colunas_cc_esquerda, .detalhes .pagamento .doador .linha, .detalhes .pagamento .dados_cartao .colunas_cc, .detalhes .pagamento .dados_cartao .colunas_cc_esquerda, .detalhes .pagamento .field-container{ float:none !important; width:100% !important; margin:0 !important; padding:0 !important; }
.detalhes .pagamento .doador{ display:flex; flex-direction:column; }
.detalhes .pagamento .doador > .clearfix{ display:none; }
.detalhes .pagamento .doador .km-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.detalhes .pagamento .doador .km-campos .linha{ grid-column:1 / -1; }
.campo-contato, .detalhes input[type=text], .detalhes input[type=password], .detalhes input[type=number], .detalhes select, .detalhes textarea, .detalhes .field-container input{ box-sizing:border-box; width:100% !important; font-family:var(--km-font) !important; font-size:14.5px !important; padding:12px 14px !important; height:auto !important; line-height:1.3 !important; border:1px solid var(--km-borda2) !important; border-radius:11px !important; outline:none; color:var(--km-texto) !important; background:#fff !important; margin:0 !important; text-align:left !important; -webkit-appearance:none; appearance:none; }
.detalhes select{ background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235c6b82' stroke-width='1.6' fill='none'/></svg>") no-repeat right 14px center !important; padding-right:36px !important; }
.campo-contato:focus, .detalhes input:focus, .detalhes select:focus{ border-color:var(--km-accent) !important; box-shadow:0 0 0 3px rgba(var(--km-accent-rgb),.12); }
.campo-contato::placeholder{ color:var(--km-texto3); }
.detalhes input.erro, .detalhes select.erro, .detalhes .campo-contato.erro{ border-color:#d33 !important; }
.detalhes input[type=checkbox]{ width:18px !important; height:18px; accent-color:var(--km-accent); vertical-align:middle; }
.aceite_lgpd{ display:flex; align-items:flex-start; gap:10px; font-size:13px !important; color:var(--km-texto2) !important; line-height:1.5; margin:16px 0 0 !important; padding:0 !important; text-align:left !important; width:100% !important; font-family:var(--km-font) !important; }
.aceite_lgpd a{ color:var(--km-accent) !important; text-decoration:underline; font-size:13px !important; }
.aceite_lgpd label{ display:block; }

/* ---- botões de ação ---- */
.detalhes .quantas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px !important; width:100% !important; text-align:left !important; }
.detalhes .quantas .adiciona_carrinho, .detalhes .quantas .periodicidade{ display:inline-flex !important; align-items:center; justify-content:center; gap:8px; font-family:var(--km-font) !important; font-weight:700 !important; font-size:14.5px !important; padding:14px 22px !important; border-radius:var(--km-r-btn) !important; border:none !important; cursor:pointer; background:var(--km-accent) !important; color:#fff !important; box-shadow:0 0 28px var(--km-glow); text-transform:none !important; letter-spacing:0 !important; line-height:1.2 !important; width:auto !important; margin:0 !important; height:auto !important; transition:box-shadow .25s,opacity .25s; }
.detalhes .quantas .adiciona_carrinho:hover, .detalhes .quantas .periodicidade:hover{ box-shadow:0 0 40px var(--km-glow-forte); }
.detalhes .quantas .adiciona_carrinho.opaco{ opacity:.55; }
.detalhes .quantas .adiciona_carrinho.mais_ingressos{ background:#fff !important; color:var(--km-accent) !important; border:1.5px solid var(--km-accent) !important; box-shadow:none; }
.detalhes .quantas .adiciona_carrinho.voltar_inscricao{ background:#eef1f6 !important; color:var(--km-texto2) !important; box-shadow:none; padding:14px 16px !important; }
.detalhes .quantas .adiciona_carrinho i{ margin:0 !important; padding:0 !important; font-size:15px !important; line-height:1 !important; color:inherit !important; width:auto !important; height:auto !important; }
.detalhes .quantas .periodicidade.volta_padrao{ background:none !important; color:var(--km-texto2) !important; box-shadow:none; padding:10px 0 !important; width:100% !important; }
.detalhes .quantas .periodicidade i{ color:inherit !important; font-size:15px !important; padding:0 !important; line-height:1 !important; }

/* ---- temporizador de reserva ---- */
.reserva_timer{ position:fixed; top:72px; left:0; right:0; z-index:990; background:var(--km-escuro) !important; color:#fff !important; text-align:center; font-family:var(--km-font) !important; font-size:13.5px !important; font-weight:600 !important; padding:9px 24px !important; margin:0 !important; border:none !important; border-radius:0 !important; width:auto !important; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; transition:background .4s; }
.reserva_timer i{ animation:km-timer 1.4s ease-in-out infinite; font-size:17px !important; color:#fff !important; }
.reserva_timer #reserva_contador{ font-variant-numeric:tabular-nums; font-size:15px; font-weight:700; background:rgba(255,255,255,.16); padding:2px 10px; border-radius:8px; color:#fff !important; }
.reserva_timer.alerta{ background:var(--km-accent) !important; }
.reserva_timer.expirado{ background:#5c141c !important; }

/* ---- compre junto (coluna) — cartao branco separado do resumo, linhas no padrao do layout ----
   os seletores carregam o prefixo .detalhes .coluna_flutua porque o carrinho.css usa !important
   nas mesmas propriedades com 3 classes de especificidade. */
body.km-checkout2 .detalhes .coluna_flutua{ background:none !important; border:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:20px; }
body.km-checkout2 .detalhes .coluna_flutua > *{ margin:0 !important; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-card{ background:#fff; border:1px solid var(--km-borda); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:14px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-card .titulo_coluna{ font-family:var(--km-font) !important; font-size:17px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--km-texto) !important; margin:0 !important; padding:0 !important; display:flex; align-items:center; gap:8px; text-align:left !important; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-card .titulo_coluna i{ font-size:20px; color:var(--km-accent); }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-card .titulo_coluna:before{ content:none !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido{ margin:0 !important; padding:0 !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul{ display:flex !important; flex-direction:column; gap:10px; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li{ cursor:pointer; width:100% !important; margin:0 !important; padding:12px !important; border:1.5px solid var(--km-borda) !important; border-radius:14px !important; background:#fff !important; display:flex !important; align-items:center; gap:12px; text-align:left !important; overflow:visible !important; color:var(--km-texto) !important; line-height:1.4 !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li:hover{ border-color:var(--km-accent) !important; background:#fff !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.selecionado, body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.selecionado:hover{ border:1.5px solid var(--km-accent) !important; background:rgba(var(--km-accent-rgb),.06) !important; }
/* o overlay invisivel do input cobria o cartao; o clique fica no proprio li (carrinho.js) */
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li input[type=checkbox]{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; z-index:0 !important; }
/* miniatura: foto do produto ou icone quando o evento nao subiu imagem */
body.km-checkout2 .detalhes .coluna_flutua .km-cj-thumb{ width:44px; height:44px; border-radius:11px; background:var(--km-bg2,#f2f6fc); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-thumb img{ width:100% !important; height:100% !important; object-fit:cover; display:block; margin:0 !important; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-thumb i{ font-size:20px; color:var(--km-accent); }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-txt{ flex:1 1 auto; min-width:0; display:block; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-txt b{ display:block; font-size:13.5px; font-weight:700; color:var(--km-texto); line-height:1.3; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-txt small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; color:var(--km-texto2); line-height:1.4; margin-top:2px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-dir{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-dir b{ font-size:14px; font-weight:700; color:var(--km-accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-dir b.km-cj-gratis{ color:var(--km-texto2); }
/* marcador desenhado em CSS (nao depende de glifo de fonte de icone) */
body.km-checkout2 .detalhes .coluna_flutua .km-cj-ck{ width:19px; height:19px; border-radius:6px; border:1.5px solid var(--km-borda2); background:#fff; position:relative; flex:none; transition:border-color .2s, background .2s; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-ck:after{ content:''; position:absolute; left:6px; top:2px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; transition:opacity .15s; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li:hover .km-cj-ck{ border-color:var(--km-accent); }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.selecionado .km-cj-ck{ background:var(--km-accent); border-color:var(--km-accent); }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.selecionado .km-cj-ck:after{ opacity:1; }
/* generico: titulo das colunas laterais (usado tambem no pagamento) */
.detalhes .coluna_flutua .titulo_coluna{ font-family:var(--km-font) !important; font-size:17px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--km-texto) !important; margin:0 0 4px !important; display:flex; align-items:center; gap:8px; }
.cj_teaser{ display:none !important; }

/* ---- resumo do pedido (pagamento) ---- */
body.km-pg-pagamento .detalhes .coluna_flutua{ background:var(--km-escuro); color:#fff; border-radius:20px; padding:24px !important; gap:14px; position:sticky; overflow:hidden; }
body.km-pg-pagamento .detalhes .coluna_flutua:before{ content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--km-accent-rgb),.9),transparent); }
body.km-pg-pagamento .detalhes .coluna_flutua .titulo_coluna{ color:#fff !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .titulo_coluna:before{ content:'\e2a2'; font-family:'Phosphor'; color:var(--km-accent-texto); font-size:20px; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul{ display:flex; flex-direction:column; gap:9px; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li{ width:100% !important; padding:0 !important; display:flex; justify-content:space-between; gap:12px; font-size:13.5px !important; color:rgba(255,255,255,.75) !important; text-align:left !important; border:none !important; background:none !important; font-family:var(--km-font) !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li span{ float:none !important; font-variant-numeric:tabular-nums; font-weight:600 !important; color:#fff !important; font-size:13.5px !important; white-space:nowrap; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li.total_pedido{ border-top:1px solid rgba(255,255,255,.12) !important; padding:14px 0 0 !important; margin-top:6px; font-size:14px !important; font-weight:600 !important; color:rgba(255,255,255,.7) !important; align-items:baseline; border-radius:0 !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li.total_pedido span{ font-size:26px !important; font-weight:700 !important; color:var(--km-accent-texto) !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li.descontado, body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido ul li.descontado span{ color:#7bd88a !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia{ padding:0 !important; text-align:left !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia .titulo_referencia{ font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.7) !important; text-align:left !important; margin-bottom:6px; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia select, body.km-pg-pagamento .detalhes .coluna_flutua .referencia input[type=text]{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.18) !important; color:#fff !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia select option{ color:#0b1220; }
body.km-pg-pagamento .detalhes .coluna_flutua .ativa_cupom{ padding:0 !important; text-align:left !important; color:var(--km-accent-texto) !important; font-size:13px !important; font-weight:600; }
/* Campo e botão EMPILHADOS (o botão flutuando sobre o input tapava o que era digitado) */
body.km-pg-pagamento .detalhes .coluna_flutua .tem_cupom{ padding:0 !important; position:static; display:flex; flex-direction:column; gap:8px; }
body.km-pg-pagamento .detalhes .coluna_flutua .tem_cupom input{ box-sizing:border-box; width:100%; margin:0; padding-right:14px; }
body.km-pg-pagamento .detalhes .coluna_flutua .tem_cupom .valida_cupom{ position:static; right:auto; top:auto; bottom:auto; left:auto; box-sizing:border-box; width:100%; background:var(--km-accent) !important; color:#fff; border-radius:8px; padding:0 14px !important; display:flex; align-items:center; justify-content:center; min-height:42px; font-size:12.5px; font-weight:700; margin:0 !important; height:auto !important; line-height:1 !important; cursor:pointer; }
body.km-pg-pagamento .detalhes .coluna_flutua .aceite_lgpd{ color:rgba(255,255,255,.7) !important; margin:0 !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .aceite_lgpd a{ color:#fff !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas{ margin:0 !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .periodicidade{ width:100% !important; font-size:15.5px !important; padding:15px !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .pix, body.km-pg-pagamento .detalhes .coluna_flutua .boleto{ text-align:left !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .avanca_pix, body.km-pg-pagamento .detalhes .coluna_flutua .avanca_boleto{ width:100% !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .alerta, body.km-pg-pagamento .detalhes .coluna_flutua .alerta_dividido{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px !important; font-size:13px !important; color:rgba(255,255,255,.75) !important; text-align:left !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .alerta i{ color:var(--km-lima) !important; display:inline !important; width:auto !important; margin-right:6px !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .alerta strong{ color:#fff; }

/* ---- formas de pagamento ---- */
.opcoes_pagamento, #como_pagar{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; width:100% !important; margin:0 !important; }
.opcoes_pagamento > div, #como_pagar > div, .opcoes_pagamento > label{ cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:7px; background:#fff !important; border:1.5px solid var(--km-borda2) !important; border-radius:16px !important; padding:16px !important; margin:0 !important; width:auto !important; height:auto !important; font-family:var(--km-font) !important; font-size:14.5px !important; font-weight:700 !important; color:var(--km-texto) !important; transition:border-color .2s,background .2s; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.3 !important; }
.opcoes_pagamento > div:hover, #como_pagar > div:hover{ border-color:var(--km-accent) !important; }
.opcoes_pagamento > div.ativo, #como_pagar > div.ativo, .opcoes_pagamento > div.selecionado, #como_pagar > div.selecionado, .opcoes_pagamento > div.escolhido, #como_pagar > div.escolhido{ border-color:var(--km-accent) !important; background:rgba(var(--km-accent-rgb),.06) !important; color:var(--km-texto) !important; }
.opcoes_pagamento > div i, #como_pagar > div i{ font-size:24px !important; color:var(--km-texto3) !important; width:auto !important; height:auto !important; line-height:1 !important; margin:0 !important; padding:0 !important; display:block; }
.opcoes_pagamento > div.ativo i, #como_pagar > div.ativo i, #como_pagar > div.selecionado i, #como_pagar > div.escolhido i{ color:var(--km-accent) !important; }

/* cartão */
.detalhes .pagamento .cartao .container.preload{ margin:0 auto 18px; }
.detalhes .pagamento .dados_cartao .form-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; width:100% !important; }
.detalhes .pagamento .dados_cartao .form-container > *{ width:100% !important; margin:0 !important; }
.detalhes .pagamento .dados_cartao .form-container .field-container:first-of-type, .detalhes .pagamento .dados_cartao .usar_pagador{ grid-column:1 / -1; }
.detalhes .pagamento .dados_cartao .usar_pagador label{ font-size:13px; color:var(--km-texto2); display:flex; gap:8px; align-items:center; }
.detalhes .pagamento .dados_cartao .field-container{ position:relative; }
.detalhes .pagamento .dados_cartao .field-container svg#ccicon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:44px; height:auto; }
.detalhes .pagamento .dados_cartao select{ width:100% !important; }

/* ---- resumo do pedido (tela de resumo) ---- */
/* o resumo passou a ter coluna lateral: volta ao grid de duas colunas do checkout */
.carrinho_vazio{ background:#fff; border:1px solid var(--km-borda); border-radius:20px; padding:32px !important; text-align:center; font-family:var(--km-font) !important; font-size:16px !important; color:var(--km-texto) !important; margin:0 0 16px !important; width:100% !important; box-sizing:border-box; }
.carrinho_vazio i{ display:block; font-size:32px; color:var(--km-accent); margin-bottom:10px; }
.mais_ingressos, .avancar_pagamento{ display:inline-flex !important; align-items:center; gap:8px; font-family:var(--km-font) !important; font-weight:700 !important; font-size:14.5px !important; padding:14px 22px !important; border-radius:var(--km-r-btn) !important; background:var(--km-accent) !important; color:#fff !important; text-transform:none !important; letter-spacing:0 !important; margin:6px 8px 6px 0 !important; width:auto !important; box-shadow:0 0 28px var(--km-glow); border:none !important; }
.mais_ingressos{ background:#fff !important; color:var(--km-accent) !important; border:1.5px solid var(--km-accent) !important; box-shadow:none; }

/* ---- pix / cartão (pg/pix.php) — tela de "falta só o pagamento" ---- */
body.km-pg-pix .titulo_padrao, body.km-pg-boleto .titulo_padrao{ font-family:var(--km-font) !important; color:var(--km-texto) !important; text-align:left; }
.kmx{ font-family:var(--km-font); color:var(--km-texto); text-align:left; }
.kmx .km-breadcrumb .km-feito{ color:var(--km-verde) !important; }
.kmx .km-breadcrumb .km-feito i{ font-size:15px; }
.kmx-cab{ margin:6px 0 22px; }
.kmx-pedido{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--km-texto3); font-weight:600; }
.kmx-pedido b{ color:var(--km-accent); font-weight:700; letter-spacing:.02em; text-transform:none; }
.kmx-titulo{ margin:8px 0 6px; font-family:var(--km-font-titulo); font-size:clamp(24px,3.2vw,34px); line-height:1.15; font-weight:800; color:var(--km-texto); letter-spacing:-.01em; }
.kmx-sub{ margin:0; max-width:640px; font-size:15px; line-height:1.55; color:var(--km-texto2); }
.kmx-sub b{ color:var(--km-texto); }

.kmx-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.kmx-card{ background:#fff; border:1px solid var(--km-borda); border-radius:var(--km-r-card,20px); padding:clamp(20px,3vw,30px); box-sizing:border-box; }
.kmx-unico{ max-width:560px; text-align:center; }
.kmx-unico .kmx-status{ justify-content:center; }
.kmx-unico .kmx-valor{ justify-content:center; text-align:center; }

.kmx-status{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#8a5a00; background:#fff6e0; border:1px solid #f4dea3; border-radius:99px; padding:7px 14px; }
.kmx-dot{ width:8px; height:8px; border-radius:50%; background:#e69b00; box-shadow:0 0 0 0 rgba(230,155,0,.55); animation:kmx-pulsa 1.6s ease-out infinite; }
@keyframes kmx-pulsa{ 0%{ box-shadow:0 0 0 0 rgba(230,155,0,.55); } 100%{ box-shadow:0 0 0 9px rgba(230,155,0,0); } }

.kmx-valor{ display:flex; align-items:baseline; gap:12px; margin:18px 0 6px; padding-bottom:18px; border-bottom:1px solid var(--km-borda); }
.kmx-valor span{ font-size:13px; color:var(--km-texto2); font-weight:600; }
.kmx-valor b{ font-family:var(--km-font-titulo); font-size:clamp(26px,3vw,32px); font-weight:800; color:var(--km-accent); letter-spacing:-.01em; }

.kmx-passos{ list-style:none; margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:kmx; }
.kmx-passos li{ display:flex; gap:14px; align-items:flex-start; }
.kmx-passos li > i{ flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:var(--km-bg2); color:var(--km-accent); display:inline-flex; align-items:center; justify-content:center; font-size:19px; }
.kmx-passos li b{ display:block; font-size:14.5px; color:var(--km-texto); }
.kmx-passos li > div > span{ display:block; font-size:13.5px; line-height:1.5; color:var(--km-texto2); margin-top:2px; }
.kmx-passos li em{ font-style:normal; font-weight:600; color:var(--km-texto); }
.kmx-so-desktop{ display:inline; }

.kmx-cod-label{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--km-texto2); margin-bottom:8px; }
.kmx-cod-label i{ color:var(--km-accent); font-size:16px; }
.kmx-cod{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.55; word-break:break-all; overflow-wrap:anywhere; background:var(--km-bg2); border:1px dashed var(--km-borda2); border-radius:12px; padding:14px 16px; color:var(--km-texto); user-select:all; -webkit-user-select:all; }
.kmx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:52px; margin-top:12px; border:0; border-radius:var(--km-r-btn,12px); background:var(--km-accent); color:#fff !important; font-family:var(--km-font); font-size:15px; font-weight:700; cursor:pointer; text-decoration:none !important; box-sizing:border-box; transition:filter .15s, transform .12s; }
.kmx-btn:hover{ filter:brightness(.94); }
.kmx-btn:active{ transform:translateY(1px); }
.kmx-btn i{ font-size:19px; }
.kmx-btn--ok{ background:var(--km-verde) !important; }
.kmx-btn--whats{ background:var(--km-whats1); }
.kmx-prazo{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:13px; line-height:1.5; color:var(--km-texto2); }
.kmx-prazo i{ color:var(--km-accent); font-size:17px; flex:0 0 auto; margin-top:1px; }
.kmx-prazo b{ color:var(--km-texto); }
.kmx-unico .kmx-prazo{ justify-content:center; text-align:left; }

.kmx-lado{ text-align:center; position:sticky; top:96px; }
.kmx-qr-titulo{ font-size:14.5px; font-weight:700; color:var(--km-texto); margin-bottom:12px; }
.kmx-qr-box{ display:inline-flex; align-items:center; justify-content:center; width:236px; max-width:100%; aspect-ratio:1/1; background:#fff; border:1px solid var(--km-borda2); border-radius:16px; padding:10px; box-shadow:0 10px 30px rgba(11,18,32,.06); }
.kmx-qr-box img{ width:100%; height:100%; object-fit:contain; display:block; }
.kmx-qr-dica{ margin-top:10px; font-size:12.5px; color:var(--km-texto3); }

.kmx-troca{ margin-top:18px; padding-top:16px; border-top:1px solid var(--km-borda); font-size:13px; color:var(--km-texto2); display:flex; flex-direction:column; gap:8px; align-items:center; }
.kmx-troca a{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:99px; border:1.5px solid var(--km-borda2); background:#fff; color:var(--km-texto) !important; font-size:13px; font-weight:700; text-decoration:none !important; cursor:pointer; transition:border-color .15s, color .15s; }
.kmx-troca a:hover{ border-color:var(--km-accent); color:var(--km-accent) !important; }
.kmx-troca a i{ color:var(--km-accent); font-size:17px; }
.kmx-troca-aguarde{ display:inline-flex; align-items:center; gap:8px; color:var(--km-texto2); }
.kmx-gira{ animation:kmx-gira .9s linear infinite; }
@keyframes kmx-gira{ to{ transform:rotate(360deg); } }

.kmx-cartao-ico{ width:72px; height:72px; margin:18px auto 6px; border-radius:22px; background:var(--km-bg2); color:var(--km-accent); display:flex; align-items:center; justify-content:center; font-size:36px; }
.kmx-cartao-ico--aviso{ background:#fff6e0; color:#e69b00; }
.kmx-pulsa-ico{ animation:kmx-pulsa-ico 1.4s ease-in-out infinite; }
@keyframes kmx-pulsa-ico{ 0%,100%{ opacity:.45; transform:scale(.94); } 50%{ opacity:1; transform:scale(1); } }
.kmx-exp-txt{ font-size:15px; color:var(--km-texto2); line-height:1.55; margin:8px 0 6px; }
.kmx-link{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--km-texto2) !important; text-decoration:underline !important; }

@media (max-width:820px){
  .kmx-grid{ grid-template-columns:1fr; }
  .kmx-lado{ position:static; }
  .kmx-so-desktop{ display:none; } /* no celular o QR fica abaixo, não "ao lado" */
  .kmx-unico{ max-width:none; }
}

/* ---- membros da equipe (carrinho) ---- */
.menu_equipe{ background:#fff; border:1px solid var(--km-borda); border-left:3px solid var(--km-accent); border-radius:16px; padding:14px 18px !important; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--km-font) !important; margin-bottom:0 !important; width:100% !important; box-sizing:border-box; }
.menu_equipe .adiciona_membro{ background:var(--km-accent) !important; color:#fff !important; border-radius:99px !important; padding:9px 16px !important; font-size:12.5px !important; font-weight:700 !important; text-transform:none !important; }
.menu_equipe .adiciona_membro.gerencia{ background:#eef1f6 !important; color:var(--km-texto) !important; }
.menu_equipe .qual_equipe > i{ color:var(--km-accent) !important; }
.menu_equipe .qual_equipe .equipe_rotulo span{ color:var(--km-texto2) !important; font-family:var(--km-font) !important; }
.menu_equipe .qual_equipe .equipe_rotulo strong{ color:var(--km-texto) !important; font-family:var(--km-font) !important; }
.membro_escolhido{ background:rgba(46,125,50,.08); border:1px solid rgba(46,125,50,.3); border-radius:14px; padding:12px 16px !important; font-family:var(--km-font) !important; font-size:13.5px !important; color:var(--km-texto) !important; }
.membro_escolhido strong{ color:var(--km-texto) !important; } .membro_escolhido > i{ color:#2e7d32 !important; }
.sou_eu_box{ background:#fff !important; border:1px solid var(--km-borda) !important; border-left:3px solid var(--km-accent) !important; border-radius:16px !important; }
.sou_eu_box .sou_eu_label{ color:var(--km-texto) !important; font-family:var(--km-font) !important; }
.sou_eu_box .sou_eu_label strong{ color:var(--km-accent) !important; }
.sou_eu_box small{ color:var(--km-texto2) !important; }
.sou_eu_box small a{ color:var(--km-accent) !important; }
.virada_urgencia{ background:#fff !important; border:1px solid var(--km-borda) !important; border-left:3px solid var(--km-accent) !important; box-shadow:0 10px 30px rgba(7,11,20,.18) !important; }
.virada_urgencia .vu_txt strong{ color:var(--km-texto) !important; }
.virada_urgencia .vu_txt span{ color:var(--km-texto2) !important; }
.virada_urgencia .vu_fogo{ color:var(--km-accent) !important; }
.virada_urgencia .vu_fechar{ color:var(--km-texto3) !important; }

/* modal "encontramos um cadastro" */
.box_modal{ font-family:var(--km-font) !important; border-radius:20px !important; }

/* prioridade sobre regras escuras do carrinho.css (#141414) */
body.km .detalhes .pagamento, body.km #jogo .pagamento{ background:transparent !important; border:none !important; box-shadow:none !important; }
body.km #jogo input[type=text], body.km #jogo input[type=password], body.km #jogo input[type=number], body.km #jogo select, body.km #jogo textarea, body.km #jogo .campo-contato, body.km .detalhes input[type=text], body.km .detalhes select{ background-color:#fff !important; color:var(--km-texto) !important; border:1px solid var(--km-borda2) !important; }
body.km #jogo select{ background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235c6b82' stroke-width='1.6' fill='none'/></svg>") no-repeat right 14px center !important; }
body.km #jogo input::placeholder{ color:var(--km-texto3) !important; }
body.km #jogo .campo-contato.obrigatorio.erro, body.km #jogo input.obrigatorio.erro{ border-color:#d33 !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li .nome_item{ width:auto !important; flex:1 1 auto !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li .avatar:empty{ display:none; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li .nome_item p{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
body.km .detalhes .pagamento .titulo_formas{ padding:0 !important; }

body.km #jogo #id_bateria, body.km #jogo select#id_bateria{ background-color:#fff !important; color:var(--km-texto) !important; border-color:var(--km-borda2) !important; }

/* A barra da reserva acompanha a ALTURA REAL do header: 75px com o topo expandido e
   60px quando o header encolhe no scroll (senão ela nasce por baixo e fica cortada). */
.reserva_timer, .km-timer-bar{ transition:top .3s ease, background .4s; }
#km-header.km-scrolled ~ * .reserva_timer,
#km-header.km-scrolled ~ .reserva_timer,
#km-header.km-scrolled ~ * .km-timer-bar,
#km-header.km-scrolled ~ .km-timer-bar{ top:57px; }
@media (max-width:980px){
  .reserva_timer, .km-timer-bar{ top:68px; }
  #km-header.km-scrolled ~ * .reserva_timer, #km-header.km-scrolled ~ * .km-timer-bar{ top:56px; }
}

/* =====================================================================
   TELA DE INSCRIÇÃO — alinhada ao layout "KM Sports - Inscricao"
   ===================================================================== */
.km-checkout-topo{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.km-voltar-ev{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--km-texto2) !important; }
.km-voltar-ev:hover{ color:var(--km-accent) !important; }
.km-voltar-ev i{ font-size:15px; }

/* cartão do evento + categoria escolhida */
.km-ins-evento{ background:#fff; border:1px solid var(--km-borda); border-radius:20px; padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; gap:18px; }
.km-ins-topo{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.km-ins-capa{ width:74px; height:74px; border-radius:16px; overflow:hidden; flex:none; background:var(--km-escuro); }
.km-ins-capa img{ width:100%; height:100%; object-fit:cover; display:block; }
.km-ins-ident{ min-width:0; flex:1; }
.km-ins-sobre{ font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--km-accent); margin-bottom:4px; }
.km-ins-ident h1{ margin:0; font-size:clamp(20px,2.8vw,26px); font-weight:700; letter-spacing:-.01em; color:var(--km-texto); line-height:1.15; }
.km-ins-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:13.5px; color:var(--km-texto2); }
.km-ins-meta span{ display:flex; align-items:center; gap:6px; }
.km-ins-meta i{ font-size:15px; color:var(--km-accent); }
.km-ins-cat{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--km-bg2); border:1px solid var(--km-borda2); border-radius:14px; padding:14px 18px; }
.km-ins-cat-txt{ display:flex; align-items:center; gap:10px; min-width:0; }
.km-ins-cat-txt > i{ font-size:22px; color:var(--km-accent); flex:none; }
.km-ins-cat-txt b{ display:block; font-size:15px; font-weight:700; color:var(--km-texto); }
.km-ins-cat-txt small{ display:block; font-size:12.5px; color:var(--km-texto2); margin-top:2px; }
.km-ins-cat-vlr{ display:flex; align-items:center; gap:12px; }
.km-ins-cat-preco{ display:inline-block; font-size:20px; font-weight:700; color:var(--km-accent); font-variant-numeric:tabular-nums; }

.km-ins-cat-vlr a{ font-size:13px; font-weight:600; color:var(--km-texto2) !important; text-decoration:underline; }
.km-ins-cat-vlr a:hover{ color:var(--km-accent) !important; }

/* campos do participante em grade de 2 colunas, como no layout */
.detalhes .pagamento .doador{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; align-items:start; }
.detalhes .pagamento .doador > .linha, .detalhes .pagamento .doador > .aceite_lgpd, .detalhes .pagamento .doador > .quantas, .detalhes .pagamento .doador > .titulo_formas{ grid-column:1 / -1; }

/* resumo do pedido (card escuro) */
.km-ins-resumo{ background:var(--km-escuro); color:#fff; border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.km-ins-resumo:before{ content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg,transparent,var(--km-accent),transparent); }
.km-ins-resumo h2{ margin:0; font-size:17px; font-weight:700; color:#fff; }
.km-ins-linhas{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.km-ins-linhas div{ display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.75); }
.km-ins-linhas b{ font-variant-numeric:tabular-nums; font-weight:600; color:#fff; }
.km-ins-extras{ display:flex !important; flex-direction:column; gap:9px; }
.km-ins-total{ border-top:1px solid rgba(255,255,255,.12); padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; }
.km-ins-total span{ font-size:14px; font-weight:600; color:rgba(255,255,255,.7); }
.km-ins-total b{ font-size:26px; font-weight:700; color:var(--km-accent-texto); font-variant-numeric:tabular-nums; }
.km-ins-reserva{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.5); }
.km-ins-reserva i{ font-size:15px; color:var(--km-accent-texto); }
.km-ins-cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer; font-family:inherit; text-align:center; background:var(--km-accent); color:#fff; border:0; font-weight:700; font-size:15.5px; padding:15px; border-radius:13px; box-shadow:0 0 28px var(--km-glow); }
.km-ins-cta:hover{ box-shadow:0 0 40px var(--km-glow-forte); }
.km-ins-seguro{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; color:rgba(255,255,255,.4); }
.km-ins-cat-txt{ flex:1 1 300px; }
.km-ins-cat-txt small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.km-ins-cat-vlr{ flex:none; margin-left:auto; }
.km-ins-capa{ position:relative; display:flex; align-items:center; justify-content:center; }
.km-ins-capa i{ position:absolute; font-size:26px; color:rgba(255,255,255,.35); }
.km-ins-capa img{ position:relative; z-index:2; }

/* ---- seletores visuais (sexo, camiseta, baterias) — padrão do layout ---- */
/* select escondido atrás dos botões: precisa vencer ".detalhes select{width:100%}" e ficar ancorado no próprio campo,
   senão ele estica para a direita e cria rolagem horizontal na página (a FAQ e o rodapé parecem "estourar" o container) */
body.km .detalhes select.km-opc-oculto, body.km select.km-opc-oculto, .km-opc-oculto{ position:absolute !important; left:0 !important; top:0 !important; width:1px !important; max-width:1px !important; min-width:0 !important; height:1px !important; padding:0 !important; margin:0 !important; border:0 !important; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0); }
.km-opc-campo{ display:flex; flex-direction:column; position:relative; }
.km-opc{ display:flex; flex-direction:column; gap:6px; }
.km-opc-rot{ font-size:12.5px; font-weight:600; color:var(--km-texto2); }
.km-opc-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.km-opc-bt{ cursor:pointer; font-family:inherit; background:#fff; border:1.5px solid var(--km-borda2); border-radius:11px; color:var(--km-texto); transition:border-color .2s, background .2s, color .2s; }
.km-opc-bt:hover{ border-color:var(--km-accent); }
.km-opc-bt.km-opc-sel{ border-color:var(--km-accent); background:rgba(var(--km-accent-rgb),.07); }
.km-opc-bt.km-opc-off{ opacity:.45; cursor:not-allowed; }
/* sexo: ícone + rótulo curto */
.km-opc-icones .km-opc-bt{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 14px; min-width:74px; color:var(--km-texto2); }
.km-opc-icones .km-opc-bt i{ font-size:22px; }
.km-opc-icones .km-opc-bt small{ font-size:11px; font-weight:600; }
.km-opc-icones .km-opc-bt.km-opc-sel{ color:var(--km-accent); }
/* camiseta: botões com a letra */
.km-opc-texto .km-opc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
.km-opc-texto .km-opc-bt{ padding:12px 6px; text-align:center; font-size:14px; font-weight:700; }
.km-opc-texto .km-opc-bt.km-opc-sel{ color:var(--km-accent); }
.km-opc-texto .km-opc-bt .km-opc-acr{ display:block; margin-top:2px; font-size:10.5px; font-weight:700; color:var(--km-accent); white-space:nowrap; } /* acréscimo do tamanho (Eventos > Tamanhos) */
/* baterias: cards com hora, nome e disponibilidade */
.km-opc-cards{ margin-top:4px; }
.km-opc-cards .km-opc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.km-opc-cards .km-opc-bt{ display:flex; flex-direction:column; gap:8px; text-align:left; padding:16px; border-radius:16px; }
.km-opc-cards .km-bat-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.km-opc-cards .km-bat-top b{ font-size:19px; font-weight:700; color:var(--km-texto); font-variant-numeric:tabular-nums; }
.km-opc-cards .km-bat-top i{ font-size:20px; color:var(--km-borda2); }
.km-opc-cards .km-opc-sel .km-bat-top i{ color:var(--km-accent); }
.km-opc-cards .km-bat-nome{ font-size:13.5px; font-weight:600; color:var(--km-texto2); }
.km-opc-cards .km-bat-vagas{ font-size:12px; color:var(--km-texto3); }
.km-opc-cards .km-opc-off .km-bat-vagas{ color:#b02a37; font-weight:700; }

/* ---- resumo do pedido acompanha a rolagem e encosta abaixo do header + barra ---- */
.detalhes .coluna_flutua{ position:sticky !important; top:calc(72px + 47px + 16px); align-self:start; }
#km-header.km-scrolled ~ * .detalhes .coluna_flutua{ top:calc(57px + 47px + 16px); }
body:not(.km-com-timer) .detalhes .coluna_flutua{ top:90px; }
@media (max-width:980px){ .detalhes .coluna_flutua{ position:static !important; } }
.km-opc, .km-opc-rot{ text-align:left !important; }
.km-opc-campo{ align-items:stretch; }

/* nascimento + sexo dividindo a mesma linha (sexo com a largura do conteúdo) */
.detalhes .pagamento .doador .km-dupla{ display:flex; gap:12px; align-items:flex-end; min-width:0; }
.detalhes .pagamento .doador .km-dupla > *:first-child{ flex:1 1 auto; min-width:0; }
.detalhes .pagamento .doador .km-dupla > *:last-child{ flex:0 0 auto; width:auto; }
.km-opc-icones .km-opc-grid{ flex-wrap:nowrap; }
/* camiseta ocupa a linha inteira e os botões dividem a largura */
.detalhes .pagamento .doador .km-opc-texto{ width:100%; }
@media (max-width:520px){
  .detalhes .pagamento .doador .km-dupla{ flex-direction:column; align-items:stretch; }
  .detalhes .pagamento .doador .km-dupla > *:last-child{ width:100%; }
}
/* a dupla ocupa duas colunas do grid (o sexo é largo demais para uma coluna só) */
.detalhes .pagamento .doador .km-dupla{ grid-column:span 2; flex-wrap:wrap; }
.detalhes .pagamento .doador .km-dupla > *:first-child{ flex:1 1 200px; }
.km-opc-icones .km-opc-bt{ min-width:66px; padding:8px 12px; }
/* a regra legada força width:100% nas células — o sexo precisa de largura automática */
.detalhes .pagamento .doador .km-dupla > *:last-child{ width:auto !important; flex:0 0 auto; }
.detalhes .pagamento .doador .km-dupla{ flex-wrap:nowrap; }

/* sexo sem rótulo: botões quadrados na mesma altura do campo de nascimento */
.km-opc-icones .km-opc-bt{ min-width:0; padding:0; width:var(--km-h-campo,46px); height:var(--km-h-campo,46px); justify-content:center; }
.km-opc-icones .km-opc-bt i{ font-size:20px; }
.km-opc-icones .km-opc-grid{ gap:8px; }
.detalhes .pagamento .doador .km-dupla{ align-items:flex-end; }

/* tooltip proprio dos icones de sexo — o balao nativo do navegador demora e nao combina com o layout */
.km-opc-icones .km-opc-bt{ position:relative; }
.km-opc-icones .km-opc-bt[data-km-tip]:before,
.km-opc-icones .km-opc-bt[data-km-tip]:after{ position:absolute; left:50%; opacity:0; pointer-events:none; z-index:40; transition:opacity .16s ease, transform .16s ease; }
.km-opc-icones .km-opc-bt[data-km-tip]:before{ content:attr(data-km-tip); bottom:calc(100% + 9px); transform:translate(-50%,5px); background:var(--km-escuro,#0a0808); color:#fff; font-family:var(--km-font); font-size:12px; font-weight:600; line-height:1; letter-spacing:.01em; white-space:nowrap; padding:8px 11px; border-radius:9px; box-shadow:0 10px 24px rgba(11,18,32,.25); }
.km-opc-icones .km-opc-bt[data-km-tip]:after{ content:''; bottom:calc(100% + 3px); transform:translate(-50%,5px); border:5px solid transparent; border-top-color:var(--km-escuro,#0a0808); }
.km-opc-icones .km-opc-bt[data-km-tip]:hover:before,
.km-opc-icones .km-opc-bt[data-km-tip]:focus-visible:before,
.km-opc-icones .km-opc-bt[data-km-tip]:hover:after,
.km-opc-icones .km-opc-bt[data-km-tip]:focus-visible:after{ opacity:1; transform:translate(-50%,0); }
/* o rotulo escrito so entra em telas de toque, onde nao ha hover para o balao */
.km-opc-icones .km-opc-bt small{ display:none; }
@media (hover:none){
  .km-opc-icones .km-opc-bt[data-km-tip]:before, .km-opc-icones .km-opc-bt[data-km-tip]:after{ display:none; }
  .km-opc-icones .km-opc-bt{ width:auto !important; min-width:66px; padding:0 12px; flex-direction:column; gap:2px; }
  .km-opc-icones .km-opc-bt small{ display:block; font-size:11px; font-weight:600; }
}

/* ============ RESUMO DO PEDIDO (revisão dos ingressos antes do pagamento) ============ */
body.km-pg-resumo_pedido .detalhes .pagamento{ display:flex; flex-direction:column; gap:20px; }
body.km-pg-resumo_pedido #jogo{ display:flex; flex-direction:column; gap:20px; }
/* aviso de item adicionado/removido: chip discreto no lugar da faixa verde cheia */
body.km-pg-resumo_pedido .alerta{ display:inline-flex !important; align-items:center; gap:9px; width:auto !important; background:rgba(28,160,90,.10) !important; border:1px solid rgba(28,160,90,.30); color:#177a48 !important; font-family:var(--km-font) !important; font-size:13.5px !important; font-weight:600 !important; line-height:1.4 !important; text-align:left !important; padding:12px 16px !important; border-radius:12px !important; margin:0 0 18px !important; }
body.km-pg-resumo_pedido .alerta i{ font-size:15px; color:#1ca05a; }
.km-res-card{ background:#fff; border:1px solid var(--km-borda); border-radius:20px; padding:clamp(20px,3vw,26px); display:flex; flex-direction:column; gap:16px; }
.km-res-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.km-res-head h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--km-texto); display:flex; align-items:center; gap:8px; }
.km-res-head h2 i{ font-size:20px; color:var(--km-accent); }
.km-res-head span{ font-size:12.5px; font-weight:600; color:var(--km-texto2); background:var(--km-bg2,#f2f6fc); padding:5px 11px; border-radius:99px; }
.km-res-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.km-res-lista li{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--km-borda); border-radius:16px; background:#fff; transition:border-color .2s; }
.km-res-lista li:hover{ border-color:var(--km-borda2); }
.km-res-num{ flex:none; width:34px; height:34px; border-radius:10px; background:var(--km-bg2,#f2f6fc); color:var(--km-texto2); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.km-res-txt{ flex:1 1 auto; min-width:0; }
.km-res-txt b{ display:block; font-size:14.5px; font-weight:700; color:var(--km-texto); line-height:1.3; }
.km-res-txt small{ display:block; font-size:12px; color:var(--km-texto3,var(--km-texto2)); margin-top:2px; }
.km-res-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.km-res-chips span{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--km-texto2); background:var(--km-bg2,#f2f6fc); padding:4px 9px; border-radius:99px; }
.km-res-chips i{ font-size:13px; color:var(--km-accent); }
.km-res-vlr{ flex:none; font-size:15px; font-weight:700; color:var(--km-texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.km-res-rm{ flex:none; width:34px; height:34px; border-radius:10px; border:1px solid var(--km-borda); display:flex; align-items:center; justify-content:center; color:var(--km-texto2) !important; transition:all .2s; }
.km-res-rm i{ font-size:16px; }
.km-res-rm:hover{ border-color:var(--km-accent); background:rgba(var(--km-accent-rgb),.07); color:var(--km-accent) !important; }
.km-res-mais{ display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start; font-size:13.5px; font-weight:600; color:var(--km-texto) !important; border:1.5px dashed var(--km-borda2); border-radius:12px; padding:11px 18px; transition:all .2s; }
.km-res-mais:hover{ border-color:var(--km-accent); border-style:solid; color:var(--km-accent) !important; }
.km-res-mais i{ font-size:17px; }
/* linhas do resumo lateral com nomes longos */
body.km-pg-resumo_pedido .km-ins-linhas span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* "mais ingressos?" reaproveita o cartao do compre junto, mas cada item e um link */
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.mais_ingressos_adiciona{ padding:0 !important; background:#fff !important; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li.mais_ingressos_adiciona > a{ display:flex; align-items:center; gap:12px; width:100%; padding:12px; box-sizing:border-box; color:inherit !important; }
.km-cj-add{ font-size:19px; color:var(--km-borda2); transition:color .2s; }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li:hover .km-cj-add{ color:var(--km-accent); }
@media (max-width:1100px){
  body.km-pg-resumo_pedido .detalhes .pagamento, body.km-pg-resumo_pedido .detalhes .coluna_flutua{ width:100% !important; margin:0 !important; }
}
@media (max-width:560px){
  .km-res-lista li{ flex-wrap:wrap; }
  .km-res-txt{ flex:1 1 100%; order:2; }
  .km-res-num{ order:1; }
  .km-res-vlr{ order:3; margin-left:auto; }
  .km-res-rm{ order:4; }
}

/* carrinho vazio: cartao unico com titulo, explicacao e acao */
.carrinho_vazio{ display:flex !important; flex-direction:column; align-items:center; gap:6px; padding:clamp(28px,5vw,44px) 24px !important; }
.carrinho_vazio i{ font-size:34px; color:var(--km-accent); margin-bottom:6px; }
.carrinho_vazio b{ font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--km-texto); }
.carrinho_vazio span{ font-size:13.5px; line-height:1.6; color:var(--km-texto2); max-width:430px; }
.carrinho_vazio .km-vazio-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:var(--km-accent); color:#fff !important; font-size:14.5px; font-weight:700; padding:13px 22px; border-radius:12px; box-shadow:0 0 28px var(--km-glow); }
.carrinho_vazio .km-vazio-cta:hover{ box-shadow:0 0 40px var(--km-glow-forte); }
.carrinho_vazio .km-vazio-cta i{ font-size:16px; color:#fff; margin:0; }

/* ============ PAGAMENTO: fidelidade ao layout ============ */
/* barra de tempo fixa (o pagamento.css a deixava sticky dentro da coluna) */
body.km-pg-pagamento .util .reserva_timer{ position:fixed !important; top:72px !important; left:0 !important; right:0 !important; max-width:none !important; width:100% !important; margin:0 !important; border:0 !important; border-radius:0 !important; z-index:990; background:var(--km-escuro) !important; box-shadow:none !important; }
body.km-pg-pagamento #km-header.km-scrolled ~ * .util .reserva_timer{ top:57px !important; }
body.km-pg-pagamento .util .reserva_timer.alerta{ background:var(--km-accent) !important; }
body.km-pg-pagamento .util .reserva_timer.expirado{ background:#5c141c !important; }
body.km-pg-pagamento .util .reserva_timer #reserva_contador{ color:#fff !important; font-family:var(--km-font) !important; }
/* cabeçalho do pedido: linha discreta, não um cartão (o evento aparece no resumo) */
body.km-pg-pagamento .detalhes .pagamento .titulo_principal{ background:none !important; border:0 !important; padding:0 !important; font-size:13px !important; flex-direction:row !important; align-items:baseline; gap:10px; flex-wrap:wrap; color:var(--km-texto2) !important; }
body.km-pg-pagamento .detalhes .pagamento .titulo_principal .titulo_carrinho{ font-size:11.5px !important; letter-spacing:.09em !important; }
body.km-pg-pagamento .detalhes .pagamento .titulo_principal strong{ font-size:13px !important; font-weight:700; color:var(--km-texto) !important; }
/* formas de pagamento: cartões com ícone, nome e etiqueta */
body.km-pg-pagamento .opcoes_pagamento{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; width:100% !important; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao{ cursor:pointer; width:auto !important; margin:0 !important; display:flex !important; flex-direction:column; align-items:flex-start; gap:7px; background:#fff !important; border:1.5px solid var(--km-borda2) !important; border-radius:16px !important; padding:16px !important; text-align:left !important; font-family:var(--km-font) !important; font-size:14.5px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--km-texto) !important; text-transform:none !important; letter-spacing:0 !important; transition:border-color .2s, background .2s; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao:hover{ border-color:var(--km-accent) !important; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao > i{ font-size:24px; color:var(--km-texto3,#8494ab); margin:0 !important; transition:color .2s; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao b{ font-size:14.5px; font-weight:700; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao .km-fp-tag{ font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:4px 10px; border-radius:99px; color:var(--km-texto2); background:#eef1f6; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao.ativo{ border-color:var(--km-accent) !important; background:rgba(var(--km-accent-rgb),.05) !important; }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao.ativo > i{ color:var(--km-accent); }
body.km-pg-pagamento .opcoes_pagamento .outra_opcao.ativo .km-fp-tag{ background:var(--km-accent); color:#fff; }
/* painel explicativo da forma escolhida */
.km-fp-info{ display:none; gap:16px; align-items:flex-start; background:var(--km-bg2,#f2f6fc); border:1px solid #e0e8f3; border-radius:16px; padding:20px; margin-top:16px; }
.km-fp-info.km-on{ display:flex; }
.km-fp-info > i{ font-size:28px; color:var(--km-accent); flex:none; }
.km-fp-info b{ display:block; font-size:15px; font-weight:700; color:var(--km-texto); margin-bottom:6px; }
.km-fp-info span{ display:block; font-size:13.5px; line-height:1.6; color:var(--km-texto2); }
.km-fp-info.km-fp-boleto{ background:#fdf6e8; border-color:#f0e2be; }
.km-fp-info.km-fp-boleto > i{ color:#a97b1f; }
.km-fp-info.km-fp-boleto b{ color:#7a5a12; }
.km-fp-info.km-fp-boleto span{ color:#8a6d2a; }
/* parcelamento em botões */
.km-parc-oculto{ position:absolute !important; width:1px !important; height:1px; opacity:0; pointer-events:none; }
.km-parc{ display:flex; flex-direction:column; gap:8px; width:100%; }
.km-parc-rot{ font-size:12.5px; font-weight:600; color:var(--km-texto2); }
.km-parc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.km-parc-bt{ cursor:pointer; font-family:inherit; text-align:left; display:flex; flex-direction:column; gap:4px; background:#fff; border:1.5px solid var(--km-borda2); border-radius:13px; padding:12px 14px; transition:border-color .2s, background .2s; }
.km-parc-bt:hover{ border-color:var(--km-accent); }
.km-parc-bt .km-parc-x{ font-size:14px; font-weight:700; color:var(--km-texto); }
.km-parc-bt small{ font-size:11.5px; color:var(--km-texto3,#8494ab); }
.km-parc-bt.km-parc-sel{ border-color:var(--km-accent); background:rgba(var(--km-accent-rgb),.06); }
.km-parc-bt.km-parc-sel .km-parc-x{ color:var(--km-accent); }
/* selos de segurança abaixo do bloco de pagamento */
.km-pg-selos{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--km-texto2); padding:0 6px; }
.km-pg-selos span{ display:flex; align-items:center; gap:6px; }
.km-pg-selos i{ font-size:15px; color:#2e7d32; }
/* identificação do evento no topo do resumo escuro */
.km-pg-evento{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); }
.km-pg-capa{ width:52px; height:52px; border-radius:12px; overflow:hidden; flex:none; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; position:relative; }
.km-pg-capa img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.km-pg-capa i{ position:absolute; font-size:22px; color:rgba(255,255,255,.35); }
.km-pg-ident{ min-width:0; }
.km-pg-ident b{ display:block; font-size:14.5px; font-weight:700; color:#fff; line-height:1.3; }
.km-pg-ident span{ display:block; font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }
/* cartão de ajuda abaixo do resumo */
.km-pg-ajuda{ display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--km-borda); border-radius:16px; padding:16px 18px; margin-top:14px; }
.km-pg-ajuda > i{ font-size:22px; color:var(--km-accent); flex:none; }
.km-pg-ajuda div{ font-size:12.5px; line-height:1.5; color:var(--km-texto2); }
.km-pg-ajuda a{ color:var(--km-accent) !important; font-weight:600; text-decoration:underline; }
/* o CSS antigo escondia o ícone da forma de pagamento (era só um "check" invisível) */
body.km-pg-pagamento #jogo .opcoes_pagamento .outra_opcao > i{ display:block !important; line-height:1 !important; }
/* o glifo do título do resumo saía errado nesta fonte: usa só o texto */
body.km-pg-pagamento .detalhes .coluna_flutua .titulo_coluna:before{ content:none !important; }
/* cartão: ilustração à esquerda e campos em grade (o form-container legado virava 3 colunas estreitas) */
/* o :not([style*="none"]) preserva o display:none inline que o pagamento.js aplica ao trocar de forma */
body.km-pg-pagamento .cartao:not([style*="none"]){ display:flex !important; flex-wrap:wrap; gap:22px; align-items:flex-start; }
body.km-pg-pagamento .cartao > .titulo_formas{ width:100% !important; margin:0 !important; }
body.km-pg-pagamento .cartao > .container{ flex:1 1 100%; width:100% !important; max-width:350px; margin:0 auto 4px !important; }
body.km-pg-pagamento .cartao .dados_cartao{ flex:1 1 100%; width:100% !important; min-width:0; display:block !important; margin:0 !important; }
body.km-pg-pagamento .cartao .form-container{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:14px !important; width:100% !important; align-items:start; }
body.km-pg-pagamento .cartao .form-container > div{ width:auto !important; margin:0 !important; padding:0 !important; float:none !important; min-width:0; grid-area:auto !important; }
body.km-pg-pagamento .cartao .form-container > .usar_pagador,
body.km-pg-pagamento .cartao .form-container > .field-container{ grid-column:1 / -1 !important; }
body.km-pg-pagamento .cartao .form-container input{ width:100% !important; box-sizing:border-box; margin:0 !important; }
body.km-pg-pagamento .cartao .form-container .ccicon{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:44px; height:auto; }
body.km-pg-pagamento .cartao .form-container > .field-container{ position:relative; }
@media (max-width:760px){
  body.km-pg-pagamento .cartao > .container{ max-width:100%; }
}
body.km-pg-pagamento .cartao .usar_pagador label{ display:flex !important; align-items:center; gap:9px; width:100%; text-align:left !important; font-size:13px; font-weight:600; color:var(--km-texto2); cursor:pointer; }
body.km-pg-pagamento .cartao .usar_pagador input[type=checkbox]{ width:17px !important; height:17px; flex:none; margin:0 !important; accent-color:var(--km-accent); }
/* avisos "finalize para gerar…" dentro do resumo escuro */
body.km-pg-pagamento .coluna_flutua .alerta{ display:flex !important; align-items:flex-start; gap:9px; width:100% !important; box-sizing:border-box; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:12px !important; padding:12px 14px !important; margin:0 !important; font-family:var(--km-font) !important; font-size:12.5px !important; font-weight:500 !important; line-height:1.5 !important; text-align:left !important; color:rgba(255,255,255,.75) !important; }
body.km-pg-pagamento .coluna_flutua .alerta i{ color:var(--km-accent-texto) !important; font-size:14px !important; margin-top:2px; }
body.km-pg-pagamento .coluna_flutua .alerta strong{ color:#fff !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .pix .avanca_pix, body.km-pg-pagamento .detalhes .coluna_flutua .boleto .avanca_boleto{ background:none !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .pix .avanca_pix .alerta i, body.km-pg-pagamento .detalhes .coluna_flutua .boleto .avanca_boleto .alerta i{ display:inline-block !important; width:auto !important; padding:0 !important; }

/* resumo: a coluna rola junto e só o cartão do resumo trava no topo (o "mais ingressos" segue abaixo) */
body.km-pg-resumo_pedido .detalhes .coluna_flutua{ position:static !important; top:auto !important; align-self:stretch; }
/* a coluna inteira (.coluna_flutua) já é sticky; o resumo NÃO pode ser sticky de novo, senão passa por cima do "Mais ingressos" */
body.km-pg-resumo_pedido .km-ins-resumo{ position:relative; top:auto; }
/* coluna mais alta que a tela: rola dentro do próprio espaço em vez de esconder o fim */
body.km-pg-resumo_pedido .detalhes .coluna_flutua{ max-height:calc(100vh - 72px - 47px - 24px); overflow-y:auto; overflow-x:visible; padding:2px 2px 12px !important; margin:-2px !important; scrollbar-width:none; }
body.km-pg-resumo_pedido .detalhes .coluna_flutua::-webkit-scrollbar{ display:none; }
body.km-pg-resumo_pedido:not(.km-com-timer) .detalhes .coluna_flutua{ max-height:calc(100vh - 100px); }
@media (max-width:980px){ body.km-pg-resumo_pedido .detalhes .coluna_flutua{ max-height:none; overflow:visible; } }
/* resumo do pagamento: o layout começa pelo evento, sem título repetido */
body.km-pg-pagamento .detalhes .coluna_flutua .titulo_coluna{ display:none !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .km-pg-evento{ padding-bottom:16px; }
body.km-pg-pagamento .detalhes .coluna_flutua .itens_pedido{ margin:0 !important; }
/* CTA no padrão do layout: cheio, com brilho, e recolhido quando ainda falta aceitar */
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .botao_avanca_pagamento{ background:var(--km-accent) !important; color:#fff !important; border:0 !important; border-radius:13px !important; font-weight:700 !important; box-shadow:0 0 28px var(--km-glow) !important; justify-content:center; gap:9px; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .botao_avanca_pagamento:hover{ box-shadow:0 0 40px var(--km-glow-forte) !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .botao_avanca_pagamento.opaco{ opacity:.55; box-shadow:none !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .botao_avanca_pagamento i{ margin:0 !important; }
.km-pg-aviso{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; color:rgba(255,255,255,.45); margin-top:-4px; }
.km-pg-aviso i{ font-size:13px; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas{ display:flex; flex-direction:column; gap:10px; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .volta_padrao{ order:3; color:rgba(255,255,255,.55) !important; font-size:13px !important; padding:2px 0 !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .quantas .km-pg-aviso{ order:2; }
/* "fulano será o comprador": linha discreta sob o título (o CSS antigo pintava uma barra) */
body.km-pg-pagamento .detalhes .pagamento .titulo_formas{ flex-wrap:wrap; }
body.km-pg-pagamento .detalhes .pagamento .titulo_formas .meu_ingresso{ background:none !important; padding:0 !important; margin:6px 0 0 !important; width:100% !important; text-align:left !important; line-height:1.5 !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:0 !important; }
body.km-pg-pagamento .coluna_flutua .alerta strong{ background:none !important; padding:0 !important; margin:0 !important; }

/* ---- Compre junto: variação obrigatória (ex.: tamanho) dentro do item marcado ---- */
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li{ flex-wrap:wrap; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-var{ display:none; flex-basis:100%; flex-direction:column; gap:8px; margin-top:4px; padding:10px 12px; background:var(--km-bg2); border:1px solid var(--km-borda); border-radius:12px; cursor:default; }
body.km-checkout2 .detalhes .coluna_flutua li.selecionado .km-cj-var{ display:flex; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-var small{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--km-texto3); }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-var small em{ font-style:normal; font-weight:600; text-transform:none; letter-spacing:0; color:var(--km-accent); margin-left:6px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-var-ops{ display:flex; flex-wrap:wrap; gap:6px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-op{ position:relative; cursor:pointer; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-op input{ position:absolute; opacity:0; width:1px; height:1px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-op span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:32px; padding:0 12px; border-radius:99px; border:1.5px solid var(--km-borda2); background:#fff; font-size:12.5px; font-weight:700; color:var(--km-texto); transition:all .15s; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-op:hover span{ border-color:var(--km-accent); }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-op input:checked + span{ background:var(--km-accent); border-color:var(--km-accent); color:#fff; }
body.km-checkout2 .detalhes .coluna_flutua li.km-cj-var-erro .km-cj-var{ border-color:var(--km-accent); box-shadow:0 0 0 3px var(--km-glow); }
/* compre junto: miniatura | texto | preço+marcador na mesma linha; só a variação quebra para a linha de baixo */
body.km-checkout2 .detalhes .coluna_flutua .km-cj-txt{ flex:1 1 0 !important; min-width:0; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-dir{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
body.km-checkout2 .detalhes .coluna_flutua .km-cj-dir{ flex-direction:row !important; }
/* pagamento: "como ficou sabendo" na coluna escura, no padrão dos demais campos do resumo */
body.km-pg-pagamento .detalhes .coluna_flutua .referencia .titulo_referencia{ font-family:var(--km-font) !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.7) !important; margin:0 0 8px !important; text-align:left !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia select{ width:100% !important; height:46px !important; box-sizing:border-box; margin:0 !important; padding:0 40px 0 14px !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important; background:rgba(255,255,255,.08) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.6' fill='none'/></svg>") no-repeat right 14px center !important; color:#fff !important; font-family:var(--km-font) !important; font-size:14px !important; font-weight:600; appearance:none; -webkit-appearance:none; outline:none; text-align:left !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia select:focus{ border-color:var(--km-accent) !important; background-color:rgba(255,255,255,.12) !important; }
body.km-pg-pagamento .detalhes .coluna_flutua .referencia select option{ background:#fff; color:#0b1220; font-weight:400; }

/* ---- tooltip do Compre junto ---- */
.km-cj-tip{ position:absolute; z-index:99999; display:flex; gap:12px; background:#0b1220; color:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 24px 60px -20px rgba(7,11,20,.8); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s, transform .15s; font-family:var(--km-font, inherit); }
.km-cj-tip.on{ opacity:1; transform:translateY(0); }
.km-cj-tip:after{ content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; background:#0b1220; transform:translateX(-50%) rotate(45deg); border-radius:2px; }
.km-cj-tip.abaixo:after{ bottom:auto; top:-6px; }
.km-cj-tip img{ width:64px; height:64px; border-radius:10px; object-fit:cover; flex:none; background:#fff; }
.km-cj-tip-txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.km-cj-tip-txt b{ font-size:14px; font-weight:700; line-height:1.3; }
.km-cj-tip-txt p{ margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.78); white-space:pre-line; }
.km-cj-tip-txt small{ font-size:11.5px; color:rgba(255,255,255,.65); display:flex; gap:6px; align-items:flex-start; line-height:1.4; } .km-cj-tip-txt small i{ color:var(--km-accent-texto,#7db4ff); flex:none; margin-top:2px; }
.km-cj-tip-txt em{ font-style:normal; font-weight:800; font-size:13px; color:var(--km-accent-texto,#7db4ff); }
body.km-checkout2 .detalhes .coluna_flutua .itens_pedido ul li[data-tip-titulo]{ cursor:pointer; }
/* resumo: os cartões da coluna NÃO encolhem (flex-shrink) quando a coluna tem max-height — antes o "Resumo do pedido"
   era espremido e o overflow:hidden cortava o botão "Ir para pagamento"; a coluna rola em vez disso */
body.km-pg-resumo_pedido .detalhes .coluna_flutua > *{ flex:0 0 auto; }
/* na tela de resumo a coluna não é sticky, então não precisa de altura máxima: com max-height + overflow (barra
   escondida) o último cartão ("Mais ingressos?") aparecia cortado. A coluna cresce inteira e a página rola. */
body.km-pg-resumo_pedido .detalhes .coluna_flutua, body.km-pg-resumo_pedido:not(.km-com-timer) .detalhes .coluna_flutua{ max-height:none !important; overflow:visible !important; padding:0 !important; margin:0 !important; }
/* CARTÃO: prévia do cartão (30% menor) à direita dos campos, no topo; parcelamento segue abaixo dos campos, à esquerda */
body.km-pg-pagamento .cartao > .container{ order:2; flex:0 0 245px !important; width:245px !important; max-width:245px !important; margin:0 !important; padding:6px 0 0 !important; height:auto !important; max-height:none !important; }
body.km-pg-pagamento .cartao .dados_cartao{ order:1; flex:1 1 320px !important; width:auto !important; }
body.km-pg-pagamento .cartao .creditcard{ width:245px; height:154px; }
@media (max-width:640px){
  body.km-pg-pagamento .cartao > .container{ order:0; flex:1 1 100% !important; width:100% !important; max-width:260px !important; margin:0 auto !important; }
  body.km-pg-pagamento .cartao .dados_cartao{ order:1; }
}
/* parcelamento: opção abaixo da parcela mínima (R$ 10) fica visível mas desativada + selo explicando */
.km-parc-bt.km-parc-off{ opacity:.55; cursor:not-allowed; background:var(--km-bg,#f6f8fb); border-style:dashed; }
.km-parc-bt.km-parc-off:hover{ border-color:var(--km-borda2); }
.km-parc-bt.km-parc-off small{ color:#c2410c; }
.km-parc-min{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; font-size:11px; font-weight:700; color:#c2410c; background:#fff7ed; border:1px solid #fdba74; border-radius:99px; padding:2px 9px; vertical-align:middle; }
.km-parc-min i{ font-size:13px; }
/* COMPRA MÍNIMA (R$ 10): aviso no lugar do botão de pagar + nota no resumo quando o desconto da equipe foi ignorado */
.km-min-aviso{ display:flex; gap:12px; align-items:flex-start; background:#fff7ed; border:1px solid #fdba74; border-radius:14px; padding:14px 16px; margin:14px 0 0; color:#7c3a10; text-align:left; }
.km-min-aviso > i{ font-size:24px; color:#c2410c; flex:none; }
.km-min-aviso strong{ display:block; font-size:14px; } .km-min-aviso span{ display:block; font-size:13px; line-height:1.5; margin-top:2px; }
body.km-pg-pagamento .itens_pedido ul li.km-min-desc{ display:flex !important; gap:8px; align-items:flex-start; font-size:12px !important; line-height:1.45; color:#fdba74 !important; background:rgba(253,186,116,.10); border:1px solid rgba(253,186,116,.35); border-radius:10px; padding:8px 10px !important; }
body.km-pg-pagamento .itens_pedido ul li.km-min-desc i{ font-size:15px; flex:none; }
/* inscrição: distância da categoria (km) junto do nome, no card e no resumo */
.km-ins-cat-km{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; vertical-align:middle; font-size:11.5px; font-weight:700; color:var(--km-accent); background:rgba(var(--km-accent-rgb),.09); border:1px solid rgba(var(--km-accent-rgb),.25); border-radius:99px; padding:2px 9px; white-space:nowrap; }
.km-ins-cat-km i{ font-size:13px; }
.km-ins-linha-km{ font-style:normal; font-size:12px; color:rgba(255,255,255,.55); }
/* inscrição: faixa de erro de validação (volta do servidor) no topo do formulário */
.km-ins-erro{ display:flex; align-items:flex-start; gap:12px; background:#fdecea; border:1px solid #f2c2bc; border-radius:14px; padding:14px 16px; margin:0 0 16px; color:#7a1a22; }
.km-ins-erro > i{ font-size:22px; color:#b02a37; flex:none; }
.km-ins-erro strong{ display:block; font-size:14px; } .km-ins-erro span{ display:block; font-size:13.5px; line-height:1.5; margin-top:2px; }
.km-ins-erro > div{ flex:1; }
.km-ins-erro button{ background:none; border:0; color:#b02a37; cursor:pointer; font-size:18px; padding:0; line-height:1; }
/* modal "encontramos um cadastro": terceira saída (só fecha, mantém o que foi digitado) */
.box_modal .formulario .botao-nada{ display:inline-block; cursor:pointer; margin:8px 0 0 12px; padding:13px 14px; color:rgba(255,255,255,.7); background:none; border:0; text-decoration:underline; font-size:13.5px; vertical-align:top; }
.box_modal .formulario .botao-nada:hover{ color:#fff; }

/* faixa de erro da inscrição: o form é display:contents dentro da grade, então a faixa ocupa a linha inteira (senão vira uma célula e quebra as colunas) */
.detalhes form#jogo > .km-ins-erro{ grid-column:1 / -1; }

/* ---- celular (<=560px): formulário do participante/pagador em UMA coluna ----
   O .doador é uma grade de auto-fit; no celular só cabe 1 coluna e o bloco data+sexo (.km-dupla) pedia "span 2",
   o que criava uma 2ª coluna implícita de 30px e espremia nome/e-mail nela. */
@media (max-width:560px){
  .detalhes .pagamento .doador{ grid-template-columns:1fr !important; }
  .detalhes .pagamento .doador > *{ grid-column:1 / -1 !important; min-width:0; }
  .detalhes .pagamento .doador .km-dupla{ flex-direction:row; flex-wrap:nowrap; align-items:stretch; }
  .detalhes .pagamento .doador .km-dupla > *:first-child{ flex:1 1 auto; min-width:0; }
  /* barra do temporizador: abaixo do cabeçalho do celular (83px) e em uma linha só */
  .reserva_timer, .km-timer-bar, #km-header.km-scrolled ~ * .reserva_timer, #km-header.km-scrolled ~ * .km-timer-bar, #km-header.km-scrolled ~ .km-timer-bar{ top:82px !important; font-size:12px !important; padding:7px 10px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .reserva_timer #reserva_contador{ font-size:13px; padding:1px 7px; }
  /* celular: só "Conclua ... em 29:57"; o complemento da frase não cabe em 360px e era cortado dos dois lados */
  .reserva_timer .rt_fim, .km-timer-bar .rt_fim{ display:none !important; }
  .reserva_timer i{ font-size:14px !important; }
}
/* temporizador no celular: uma linha só, sem quebrar, logo abaixo do cabeçalho (83px parado / 73px rolado).
   Seletores fortes porque a tela de pagamento posiciona a barra com #id + .util + !important. */
@media (max-width:560px){
  body .reserva_timer, body .km-timer-bar, body.km-pg-pagamento .util .reserva_timer, body #km-header ~ * .reserva_timer{ top:83px !important; display:flex !important; flex-wrap:nowrap !important; justify-content:center; align-items:center; gap:6px; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; font-size:12px !important; padding:7px 8px !important; line-height:1.2 !important; }
  body #km-header.km-scrolled ~ * .reserva_timer, body #km-header.km-scrolled ~ .reserva_timer, body #km-header.km-scrolled ~ * .km-timer-bar, body.km-pg-pagamento #km-header.km-scrolled ~ * .util .reserva_timer{ top:73px !important; }
}
/* páginas do PIX e do boleto no celular: o cartão herdava calc(100% - 100px) + padding 50px do boleto.css e ficava com ~150px */
@media (max-width:560px){
  body.km-pg-pix .contexto, body.km-pg-boleto .contexto{ width:100% !important; box-sizing:border-box !important; padding:16px 14px 28px !important; margin:14px 0 0 !important; }
  body.km-pg-pix .util, body.km-pg-boleto .util{ width:calc(100% - 24px) !important; max-width:none !important; margin:0 12px !important; }
  body.km-pg-pix .titulo_padrao, body.km-pg-boleto .titulo_padrao{ width:100% !important; font-size:22px !important; }
  body.km-pg-pix .titulo_padrao strong, body.km-pg-boleto .titulo_padrao strong{ display:block; font-size:13px !important; letter-spacing:0 !important; word-break:break-all; overflow-wrap:anywhere; margin-top:4px; }
  body.km-pg-pix .contexto .alerta_pix, body.km-pg-boleto .contexto .alerta_pix{ font-size:15px !important; line-height:1.45 !important; }
  body.km-pg-pix .codigo_pix, body.km-pg-boleto .codigo_pix{ word-break:break-all !important; overflow-wrap:anywhere !important; font-size:11px !important; }
  body.km-pg-pix .qr_code img, body.km-pg-boleto .qr_code img{ max-width:100% !important; height:auto !important; }
  body.km-pg-pix .fp_box, body.km-pg-boleto .fp_box{ width:100% !important; box-sizing:border-box; }
}

/* ============================================================================
   QUEM VAI PAGAR — pedido de um ingresso só
   O participante já vem escolhido; a segunda opção abre os campos do pagador.
   Os campos continuam no DOM quando recolhidos (o form os envia mesmo sem JS),
   por isso o estado recolhido é display:none e não remoção do markup.
   ============================================================================ */
.km-pagador{ display:flex; flex-direction:column; gap:10px; margin:0 0 4px; }
.km-pagador-op{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--km-borda); border-radius:14px; cursor:pointer; background:#fff; transition:border-color .15s, background-color .15s; }
.km-pagador-op:hover{ border-color:var(--km-accent); }
.km-pagador-op--sel{ border-color:var(--km-accent); background:rgba(0,0,0,.02); }
.km-pagador-op input[type=radio]{ width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--km-accent); cursor:pointer; }
.km-pagador-txt{ display:block; min-width:0; }
.km-pagador-txt b{ display:block; font-size:14px; line-height:1.35; color:var(--km-texto); font-weight:700; }
.km-pagador-txt small{ display:block; font-size:12.5px; line-height:1.45; color:var(--km-texto2); margin-top:3px; word-break:break-word; }
.km-pagador-campos{ display:block; margin-top:14px; }
.km-pagador-campos--recolhido{ display:none; }

/* ============================================================================
   MODAL DE PROCESSAMENTO DO PAGAMENTO (js/pagamento.js, submit de #jogo)
   Fundo escuro com blur, cartão central, ilustração animada por forma de
   pagamento e 4 etapas que avançam por tempo. Fica acima do loader antigo
   (.carregando tem z-index 5000000).
   ============================================================================ */
.kmp-fundo{ position:fixed; inset:0; z-index:6000000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,10,16,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:kmp-fade .28s ease both; }
body.kmp-aberta{ overflow:hidden; }
.kmp-card-box{ width:100%; max-width:420px; background:#fff; color:#0b1220; border-radius:24px; padding:28px 26px 22px; box-sizing:border-box; box-shadow:0 30px 80px rgba(0,0,0,.45); text-align:center; animation:kmp-sobe .42s cubic-bezier(.2,.9,.3,1.2) both; }
.kmp-ilustra{ height:96px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.kmp-svg{ width:150px; height:100px; overflow:visible; }
.kmp-titulo{ margin:0; font-size:20px; line-height:1.25; font-weight:800; color:#0b1220; font-family:var(--fonte-especial, inherit); }
.kmp-sub{ margin:6px 0 18px; font-size:13px; color:#5c6b82; }
.kmp-barra-prog{ height:6px; border-radius:99px; background:#eef1f6; overflow:hidden; margin:0 0 18px; }
.kmp-barra-fill{ display:block; height:100%; width:6%; border-radius:99px; background:linear-gradient(90deg, var(--km-accent, #c8102e), color-mix(in srgb, var(--km-accent, #c8102e) 60%, #fff)); transition:width .9s cubic-bezier(.4,0,.2,1); }
.kmp-etapas{ list-style:none; margin:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px; }
.kmp-etapa{ display:flex; align-items:center; gap:12px; font-size:14px; color:#8494ab; transition:color .3s; }
.kmp-ico{ width:24px; height:24px; flex:0 0 24px; border-radius:50%; border:2px solid #dfe4ec; display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:transparent; position:relative; transition:border-color .3s, background-color .3s, color .3s; box-sizing:border-box; }
.kmp-etapa--ativa{ color:#0b1220; font-weight:600; }
.kmp-etapa--ativa .kmp-ico{ border-color:transparent; }
.kmp-etapa--ativa .kmp-ico::before{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #e3e8f0; border-top-color:var(--km-accent, #c8102e); animation:kmp-gira .8s linear infinite; }
.kmp-etapa--feita{ color:#3b5a45; }
.kmp-etapa--feita .kmp-ico{ background:#137333; border-color:#137333; color:#fff; animation:kmp-pop .35s cubic-bezier(.2,.9,.3,1.4); }
.kmp-rodape{ margin-top:20px; font-size:11.5px; color:#8494ab; display:flex; align-items:center; justify-content:center; gap:6px; }
.kmp-rodape i{ font-size:14px; }

/* ilustrações */
.kmp-card{ fill:#0b1220; }
.kmp-card-faixa{ fill:#1f2a3d; }
.kmp-chip{ fill:#e8b84a; }
.kmp-num{ fill:rgba(255,255,255,.55); }
.kmp-brilho{ fill:rgba(255,255,255,.28); transform:skewX(-18deg); animation:kmp-brilho 1.8s ease-in-out infinite; }
.kmp-svg--cartao{ animation:kmp-flutua 2.6s ease-in-out infinite; }
.kmp-qr{ fill:var(--km-accent, #c8102e); transform-origin:center; transform-box:fill-box; animation:kmp-qr 1.6s ease-in-out infinite; }
.kmp-scan{ stroke:rgba(11,18,32,.35); stroke-width:2; stroke-linecap:round; animation:kmp-scan 1.6s ease-in-out infinite; }
.kmp-barra{ fill:#0b1220; transform-origin:center bottom; transform-box:fill-box; animation:kmp-barra 1.4s ease-in-out infinite; }
.kmp-linha{ fill:var(--km-accent, #c8102e); }
.kmp-pessoa{ fill:none; stroke:var(--km-accent, #c8102e); stroke-width:3; transform-origin:center; transform-box:fill-box; animation:kmp-pulsa 1.4s ease-in-out infinite; }
.kmp-anel{ fill:none; stroke:#dfe4ec; stroke-width:5; }
.kmp-check{ fill:none; stroke:#137333; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:kmp-check 1.6s ease-in-out infinite; }

@keyframes kmp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kmp-sobe{ from{ transform:translateY(18px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes kmp-gira{ to{ transform:rotate(360deg); } }
@keyframes kmp-pop{ 0%{ transform:scale(.6); } 100%{ transform:scale(1); } }
@keyframes kmp-brilho{ 0%{ transform:translateX(0) skewX(-18deg); } 100%{ transform:translateX(190px) skewX(-18deg); } }
@keyframes kmp-flutua{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-5px) rotate(2deg); } }
@keyframes kmp-qr{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }
@keyframes kmp-scan{ 0%{ transform:translateY(6px); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(74px); opacity:0; } }
@keyframes kmp-barra{ 0%,100%{ transform:scaleY(.55); opacity:.55; } 50%{ transform:scaleY(1); opacity:1; } }
@keyframes kmp-pulsa{ 0%,100%{ transform:scale(.9); opacity:.5; } 50%{ transform:scale(1.05); opacity:1; } }
@keyframes kmp-check{ 0%{ stroke-dashoffset:60; } 45%{ stroke-dashoffset:0; } 70%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-60; } }

@media (prefers-reduced-motion: reduce){
  .kmp-fundo, .kmp-card-box{ animation:none; }
  .kmp-barra-fill{ transition:none; }
  .kmp-svg *, .kmp-svg, .kmp-etapa--ativa .kmp-ico::before, .kmp-etapa--feita .kmp-ico{ animation-duration:.01s !important; animation-iteration-count:1 !important; }
}
@media (max-width: 480px){
  .kmp-card-box{ padding:24px 20px 18px; border-radius:20px; }
  .kmp-titulo{ font-size:18px; }
}

/* estado de erro da modal de processamento (resposta 'errado' do servidor) */
.kmp-ilustra--erro{ height:auto; margin-bottom:6px; }
.kmp-ilustra--erro i{ font-size:56px; color:#c8102e; }
.kmp-erro-msg{ margin:8px 0 20px; font-size:14px; line-height:1.55; color:#3b4656; }
.kmp-botao{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 24px; border-radius:99px; background:var(--km-accent, #c8102e); color:#fff !important; font-weight:700; font-size:14px; text-decoration:none !important; }
.kmp-botao:hover{ filter:brightness(.92); }

/* =====================================================================
   EVENTO FECHADO (agenda.exige_cupom): o campo do cupom sobe aberto e em
   destaque, porque sem cupom válido o pedido não fecha. Cores próprias e
   não herdadas do tema: o bloco precisa ler igual no layout novo (km) e no
   antigo (css/pagamento.css), que não compartilham os mesmos tokens.
   ===================================================================== */
.km-cupom-exigido{ box-sizing:border-box; width:100%; margin:14px 0; padding:16px; border-radius:12px; border:1px solid rgba(200,16,46,.38); background:rgba(200,16,46,.07); text-align:left; }
.km-cupom-exigido .km-cupom-titulo{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; line-height:1.3; color:var(--km-accent, #c8102e); }
.km-cupom-exigido .km-cupom-titulo i{ font-size:19px; flex:none; }
.km-cupom-exigido .km-cupom-sub{ margin:6px 0 12px; font-size:12.5px; line-height:1.5; color:inherit; opacity:.85; }
/* Campo e botão EMPILHADOS: o botão flutuando sobre o input tapava o que estava sendo
   digitado e encostava no cursor em telas estreitas. Agora o APLICAR fica embaixo,
   na largura inteira, com área de toque confortável. */
.km-cupom-exigido .km-cupom-aberto{ position:static; display:flex; flex-direction:column; gap:8px; padding:0 !important; }
.km-cupom-exigido .km-cupom-aberto input{ box-sizing:border-box; width:100%; margin:0; padding-right:14px; text-transform:uppercase; }
.km-cupom-exigido .km-cupom-aberto .valida_cupom{ position:static; right:auto; top:auto; bottom:auto; left:auto; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:center; margin:0 !important; padding:0 16px !important; min-height:44px; height:auto !important; border-radius:8px; background:var(--km-accent, #c8102e); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; line-height:1 !important; cursor:pointer; }
.km-cupom-exigido .km-cupom-aberto .valida_cupom:hover{ filter:brightness(.92); }
.km-cupom-exigido .km-cupom-estado{ margin-top:10px; font-size:12px; font-weight:700; line-height:1.45; }
.km-cupom-exigido.km-cupom-falta .km-cupom-estado{ color:var(--km-accent, #c8102e); }
.km-cupom-exigido.km-cupom-ok{ border-color:rgba(19,115,51,.40); background:rgba(19,115,51,.08); }
.km-cupom-exigido.km-cupom-ok .km-cupom-estado{ color:#137333; }
@media (max-width:560px){
  .km-cupom-exigido{ padding:13px; }
  .km-cupom-exigido .km-cupom-aberto input{ padding-right:92px; }
  .km-cupom-exigido .km-cupom-aberto .valida_cupom{ min-width:76px; padding:0 12px !important; }
}