/* =====================================================================
   AIOX Cockpit · componentes · v0.3 · usa tokens.css
   Prefixo ck- = componente reutilizável nas páginas do Cockpit.
   ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:var(--peso-corpo) var(--t-corpo)/var(--entrelinha-corpo) var(--fonte-texto);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--lima);color:var(--texto-na-lima)}
:focus-visible{outline:var(--foco);outline-offset:3px;box-shadow:0 0 0 6px var(--lima-15)}

/* ---------- texto ---------- */
.ck-display,.ck-h1,.ck-h2{font-family:var(--fonte-display);font-weight:var(--peso-display);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--entrelinha-display);margin:0;color:var(--texto)}
.ck-display{font-size:var(--t-display)}
.ck-h1{font-size:var(--t-h1)}
.ck-h2{font-size:var(--t-h2);font-weight:var(--peso-titulo)}
.ck-h3{font:var(--peso-forte) var(--t-h3)/1.2 var(--fonte-display);margin:0}
.ck-h4{font:var(--peso-forte) var(--t-h4)/1.3 var(--fonte-display);margin:0}
.ck-destaque{color:var(--lima)}
.ck-lead{font:var(--peso-leve) var(--t-lead)/1.55 var(--fonte-texto); /* B: a família do título (decisão Ximenes, 23/10; antes mono) */color:var(--texto-2);max-width:52ch;margin:0}
.ck-rotulo{font:500 var(--t-rotulo)/1.3 var(--fonte-mono);letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-meta)}
.ck-rotulo.lima{color:var(--lima)}
.ck-mono{font-family:var(--fonte-mono)}

/* ---------- fundo da página: quadriculado ---------- */
.ck-quadriculado{background:
  linear-gradient(var(--grade) 1px,transparent 1px) 0 0/var(--celula) var(--celula),
  linear-gradient(90deg,var(--grade) 1px,transparent 1px) 0 0/var(--celula) var(--celula),
  var(--fundo)}

/* ---------- botões ---------- */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--raio);border:var(--linha) solid transparent;font:var(--peso-forte) 15px/1 var(--fonte-display);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:filter var(--dur-rapida) var(--curva-suave),border-color var(--dur-rapida),background var(--dur-rapida),transform var(--dur-rapida) var(--curva-suave)}
.ck-btn svg{width:18px;height:18px}
.ck-btn-primario{background:var(--lima);color:var(--texto-na-lima);box-shadow:var(--sombra-cta)}
.ck-btn-primario:hover{filter:brightness(1.08);transform:translateY(-2px)}
.ck-btn-vidro{background:var(--vidro);color:var(--texto);border-color:var(--borda-forte);backdrop-filter:blur(var(--vidro-blur))}
.ck-btn-vidro:hover{border-color:var(--texto-3)}
.ck-btn-escuro{background:var(--fundo);color:var(--lima)}
.ck-btn-fantasma{background:transparent;color:var(--texto-2);padding:0 8px}
.ck-btn-fantasma:hover{color:var(--texto)}
.ck-btn-destrutivo{background:var(--erro);color:#fff}
.ck-btn-p{min-height:44px;padding:0 16px;font-size:13px}
.ck-btn-g{min-height:56px;padding:0 32px;font-size:16px}
.ck-btn[disabled],.ck-btn.desativado{opacity:.4;pointer-events:none}

/* ---------- chips, selos, pílula de número ---------- */
.ck-chip{display:inline-flex;align-items:center;gap:14px;padding:8px 16px;border-radius:var(--raio);background:var(--lima-10);border:var(--linha) solid var(--lima-20);font:500 13px/1 var(--fonte-display);text-transform:uppercase;color:var(--texto)}
.ck-chip::before,.ck-chip::after{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.ck-chip.na-lima{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.14);color:var(--texto-na-lima)}
.ck-selo{display:inline-block;padding:4px 8px;border-radius:var(--raio);font:600 11px/1 var(--fonte-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--lima-10);border:var(--linha) solid var(--lima-20);color:var(--lima)}
.ck-selo.solido{background:var(--lima);border-color:var(--lima);color:var(--texto-na-lima)}
.ck-selo.neutro{background:var(--superficie);border-color:var(--borda);color:var(--texto-meta)}
.ck-num{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:var(--raio);background:var(--lima-10);border:var(--linha) solid var(--lima-20);font:600 13px var(--fonte-display);color:var(--texto)}
.ck-status{display:inline-block;width:8px;height:8px;border-radius:var(--raio-marcador);background:var(--ok);box-shadow:0 0 8px currentColor}

/* ---------- ícone em caixa (Carbon) ---------- */
.ck-ico{width:22px;height:22px;display:block}
.ck-icobox{width:48px;height:48px;display:grid;place-items:center;color:var(--lima);background:var(--lima-06);border:var(--linha) solid var(--lima-20);border-radius:var(--raio);flex:none}
.ck-icobox.neutro{color:var(--texto-meta);background:transparent;border-color:var(--borda-forte)}
.ck-icobox.p{width:40px;height:40px}
.ck-icobox.p .ck-ico{width:20px;height:20px}

/* ---------- cartões ---------- */
.ck-cartao{background:var(--superficie);border:var(--linha) solid var(--borda);border-radius:var(--raio);padding:var(--s6)}
.ck-vidro{position:relative;background:var(--vidro);backdrop-filter:blur(var(--vidro-blur));border:var(--linha) solid var(--borda);border-radius:var(--raio)}
.ck-vidro::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 49%,rgba(255,255,255,.06));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.ck-cartao:hover,.ck-vidro:hover{border-color:var(--borda-hover)}
.ck-grade-fina{display:grid;gap:1px;background:var(--borda)} /* [aiox] hairline grid */
.ck-grade-fina>*{background:var(--fundo)}

/* ---------- lista em barras (Figma) ---------- */
.ck-barras{display:flex;flex-direction:column;gap:12px}
.ck-barra{display:flex;align-items:center;gap:16px;padding:18px 22px 18px 12px}
.ck-barra .traco{width:1.5px;height:24px;background:var(--lima);flex:none}
.ck-barra p{margin:0;font-size:18px}

/* ---------- moldura acesa (vitrine do produto) ---------- */
.ck-acesa{position:relative;background:var(--superficie);padding:10px;border:var(--linha) solid var(--borda)}
.ck-acesa::after{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:var(--lima);box-shadow:0 0 24px 2px var(--lima-40)}
.ck-acesa .tela{aspect-ratio:16/10;background:var(--superficie-funda);display:grid;place-items:center;font:500 13px var(--fonte-mono);color:var(--texto-meta);border:var(--linha) solid var(--borda-suave)}

/* ---------- planos ---------- */
.ck-planos{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:960px){.ck-planos{grid-template-columns:repeat(3,1fr)}}
.ck-plano{position:relative;padding:32px;display:flex;flex-direction:column;gap:18px;background:var(--vidro);backdrop-filter:blur(var(--vidro-blur));border:var(--linha) solid var(--borda)}
.ck-plano.ancora{border-color:var(--lima-50);box-shadow:0 0 0 1px var(--lima-15),0 30px 80px -30px var(--lima-40)}
.ck-plano .ck-selo.solido{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap}
.ck-plano .topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ck-plano .desc{color:var(--texto-2);font-size:16px;margin:0}
.ck-plano .preco{display:flex;align-items:baseline;gap:8px;font:var(--peso-display) 44px/1 var(--fonte-display);letter-spacing:-.03em}
.ck-plano .preco small{font:500 15px var(--fonte-mono);color:var(--texto-meta);letter-spacing:0}
.ck-plano.ancora .preco{color:var(--lima)}
.ck-plano .avista{font:400 13px var(--fonte-mono);color:var(--texto-meta);margin:-8px 0 0}
.ck-plano hr{border:0;border-top:var(--linha) solid var(--borda);margin:4px 0;width:100%}
.ck-plano ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px}
.ck-plano li{display:flex;gap:10px;align-items:flex-start;color:var(--texto-2)}
.ck-plano li .ck-ico{width:18px;height:18px;color:var(--lima);margin-top:2px;flex:none}
.ck-plano:not(.ancora) li .ck-ico{color:var(--texto-meta)}
.ck-plano .ck-btn{width:100%;margin-top:auto}
.ck-plano .seguro{text-align:center;font:400 12px var(--fonte-mono);color:var(--texto-meta);margin:-6px 0 0}
.ck-alternar{display:inline-flex;gap:2px;padding:4px;background:var(--vidro);border:var(--linha) solid var(--borda);font:500 14px var(--fonte-display)}
.ck-alternar span{padding:7px 14px;color:var(--texto-2);cursor:pointer}
.ck-alternar span.on{background:var(--lima);color:var(--texto-na-lima)}

/* ---------- garantia com selo quadrado ---------- */
.ck-garantia{display:grid;gap:40px;align-items:center;grid-template-columns:1fr;padding:48px;background:linear-gradient(135deg,var(--lima-06),rgba(15,15,17,.92) 45%);border:var(--linha) solid var(--lima-20)}
@media(min-width:900px){.ck-garantia{grid-template-columns:240px 1fr}}
.ck-selo-q{position:relative;width:200px;height:200px;margin:0 auto}
.ck-selo-q svg{width:100%;height:100%;overflow:visible}
.ck-selo-q text{font:600 10px var(--fonte-mono);fill:var(--lima)}
.ck-selo-q .miolo{position:absolute;inset:36px;border:var(--linha) solid var(--lima-40);display:grid;place-items:center;text-align:center;color:var(--lima)}
.ck-selo-q .miolo .ck-ico{width:28px;height:28px;margin:0 auto 6px}
.ck-selo-q .miolo span{font:var(--peso-display) 18px var(--fonte-display);color:var(--texto)}
.ck-passos3{display:grid;gap:20px;grid-template-columns:1fr;border-top:var(--linha) solid var(--borda);padding-top:24px;margin-top:8px}
@media(min-width:720px){.ck-passos3{grid-template-columns:repeat(3,1fr)}}
.ck-passos3 b{display:block;font:500 12px var(--fonte-mono);color:var(--lima);margin-bottom:6px}
.ck-passos3 p{margin:0;color:var(--texto-2);font-size:16px}

/* ---------- perguntas ---------- */
.ck-faq details{padding:22px 24px;margin-bottom:10px;background:var(--vidro);border:var(--linha) solid var(--borda)}
.ck-faq details[open]{border-color:var(--borda-lima)}
.ck-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:var(--peso-forte);font-size:17px}
.ck-faq summary::-webkit-details-marker{display:none}
@media(max-width:959px){.ck-faq summary{min-height:44px}.ck-alternar button{min-height:44px}} /* área de toque (critique 30/10) */
.ck-faq summary .ck-ico{width:18px;height:18px;color:var(--lima);flex:none}
.ck-faq summary .menos{display:none}
.ck-faq details[open] summary .mais{display:none}
.ck-faq details[open] summary .menos{display:block}
.ck-faq details p{margin:12px 0 0;color:var(--texto-2);font:var(--peso-leve) var(--t-corpo)/1.6 var(--fonte-texto)}

/* ---------- mosaico de números ---------- */
.ck-mosaico{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda)}
@media(min-width:900px){.ck-mosaico{grid-template-columns:repeat(3,1fr)}}
.ck-mosaico>div{padding:40px;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--superficie)}
.ck-mosaico>.lima{background:var(--lima);color:var(--texto-na-lima)}
.ck-mosaico>.lima .ck-rotulo{color:#323232}
.ck-numero{font:var(--peso-display) clamp(48px,6vw,88px)/1 var(--fonte-display);letter-spacing:-.03em}

/* ---------- faixa lima ---------- */
.ck-faixa-lima{background:
  linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/var(--celula) var(--celula),
  linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px) 0 0/var(--celula) var(--celula),
  linear-gradient(180deg,rgba(0,0,0,.18),rgba(255,255,255,.08)),var(--lima);
  color:var(--texto-na-lima);text-align:center;padding:var(--secao) var(--margem)}
.ck-faixa-lima .ck-h1{color:var(--texto-na-lima)}

/* ---------- navegação ---------- */
.ck-nav{position:sticky;top:0;z-index:var(--camada-nav);background:rgba(5,5,5,.7);backdrop-filter:blur(var(--vidro-blur));border-bottom:var(--linha) solid var(--borda-suave)}
.ck-nav .dentro{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;max-width:var(--largura);margin:0 auto;padding:0 var(--margem)}
.ck-nav img{height:20px;display:block} /* assinatura no mínimo de 20 px (decisão Ximenes, 21/10) */
.ck-nav .itens{display:none;gap:48px;font:500 14px var(--fonte-display);color:var(--texto-3)}
@media(min-width:960px){.ck-nav .itens{display:flex}}
.ck-nav .ck-btn{min-height:44px;padding:0 16px;font-size:13px}


/* ===================== v0.3 ===================== */
/* vidro com reflexo na borda (taste-skill, aprovado pelo Ximenes) */
.ck-vidro,.ck-plano,.ck-btn-vidro{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ck-plano.ancora{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--lima-15),0 30px 80px -30px var(--lima-40)}

/* botão afunda no clique */
.ck-btn:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
.ck-btn-primario:hover:active{transform:translateY(1px) scale(.99)}

/* ---------- formulários ---------- */
.ck-form{display:flex;flex-direction:column;gap:20px;max-width:520px}
.ck-campo{display:flex;flex-direction:column;gap:8px}
.ck-campo>label,.ck-campo>.legenda{font:var(--peso-forte) 14px/1.3 var(--fonte-texto);color:var(--texto)}
.ck-campo .opcional{font:400 12px var(--fonte-mono);color:var(--texto-meta);margin-left:6px}
.ck-entrada{width:100%;min-height:48px;padding:0 14px;background:var(--superficie-funda);border:var(--linha) solid var(--borda-campo);border-radius:var(--raio);color:var(--texto);font:var(--peso-corpo) 16px/1.4 var(--fonte-texto);transition:border-color var(--dur-rapida),box-shadow var(--dur-rapida)}
textarea.ck-entrada{min-height:112px;padding:12px 14px;resize:vertical}
.ck-entrada::placeholder{color:var(--texto-fraco)}
.ck-entrada:hover{border-color:var(--borda-hover)}
.ck-entrada:focus{outline:none;border-color:var(--lima);box-shadow:0 0 0 3px var(--lima-15)}
.ck-campo .ajuda{font:400 13px/1.5 var(--fonte-mono);color:var(--texto-meta);margin:0}
.ck-campo.com-erro .ck-entrada{border-color:var(--erro);box-shadow:0 0 0 3px rgba(255,92,92,.12)}
.ck-campo .erro{display:none;align-items:center;gap:8px;font:500 13px/1.4 var(--fonte-mono);color:var(--erro);margin:0}
.ck-campo .erro .ck-ico{width:16px;height:16px;flex:none}
.ck-campo.com-erro .erro{display:flex}
.ck-campo.com-erro .ajuda{display:none}
.ck-marcar{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:16px;color:var(--texto-2)}
.ck-marcar input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:var(--linha) solid var(--borda-forte);background:var(--superficie-funda);border-radius:var(--raio);display:grid;place-items:center;cursor:pointer}
.ck-marcar input:checked{background:var(--lima);border-color:var(--lima)}
.ck-marcar input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--texto-na-lima);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

/* botão carregando: barra correndo embaixo, sem rodinha */
.ck-btn.carregando{position:relative;pointer-events:none;overflow:hidden;filter:saturate(.7)}
.ck-btn.carregando::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:currentColor;animation:ck-corre 1.1s var(--curva-suave) infinite}
@keyframes ck-corre{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* ---------- avisos ---------- */
.ck-aviso{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--superficie);border:var(--linha) solid var(--borda);border-left:2px solid var(--info);font-size:16px;color:var(--texto-2)}
.ck-aviso .ck-ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--info)}
.ck-aviso b{color:var(--texto)}
.ck-aviso.ok{border-left-color:var(--ok)} .ck-aviso.ok .ck-ico{color:var(--ok)}
.ck-aviso.atencao{border-left-color:var(--atencao)} .ck-aviso.atencao .ck-ico{color:var(--atencao)}
.ck-aviso.erro{border-left-color:var(--erro)} .ck-aviso.erro .ck-ico{color:var(--erro)}

/* ---------- vazio e carregando ---------- */
.ck-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 24px;border:var(--linha) dashed var(--borda-forte)}
.ck-vazio p{margin:0;color:var(--texto-2);max-width:40ch;font-size:16px}
.ck-esqueleto{position:relative;overflow:hidden;background:var(--superficie-alt)}
.ck-esqueleto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(244,244,232,.06),transparent);transform:translateX(-100%);animation:ck-brilho 1.6s linear infinite}
@keyframes ck-brilho{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ck-btn.carregando::after,.ck-esqueleto::after{animation:none}}

/* ---------- cartão elevado (vidro elevado) · decisão Ximenes 23/10/2026, páginas de Afiliados ----------
   Do C15 da home do ClickMax (programa de indicação): o cartão fica "acima" da página. No preto, quem eleva é a sombra
   longa e o fio aceso no topo. Canto reto, como o resto. As linhas curvas de dentro saíram em 23/10 (Ximenes).
   Uso: <div class="ck-elevado"> … </div>
   + .largo: passa 80 px da largura do conteúdo de cada lado (como o ClickMax, 1360 contra 1200). */
.ck-elevado{position:relative;overflow:hidden;isolation:isolate;padding:clamp(28px,4vw,56px);
  background:linear-gradient(180deg,var(--superficie-hover),var(--superficie-funda));border:var(--linha) solid var(--borda-forte);border-radius:var(--raio);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 100px -30px rgba(0,0,0,.9),0 0 0 1px var(--lima-06)}
.ck-elevado::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:var(--lima);box-shadow:0 0 24px 2px var(--lima-40);pointer-events:none}
.ck-elevado.largo{max-width:calc(var(--largura) + 160px);margin-left:auto;margin-right:auto}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}