/* SIPAT de demonstracao — componentes da pagina (quiz, cena, certificado e
   relatorio). Os tokens (cores, fontes, botoes) vem do assets/css/srchz.css. */
.hero.hero-svc{min-height:auto; padding-top:calc(var(--nav-h) + 56px); padding-bottom:40px}
.crumbs{font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--soft); text-decoration:none; border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--gold-2)}
#inicio{padding-top:24px}
.section[hidden]{display:none}

.demo-card{border:1px solid var(--line); background:var(--panel); padding:clamp(18px,3vw,28px); border-radius:2px}
.demo-card + .demo-card{margin-top:18px}

/* etapas */
.demo-steps{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.demo-steps li{display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line-2); padding:7px 14px 7px 8px; border-radius:40px}
.demo-steps li b{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--panel-2); color:var(--soft); font-size:12px}
.demo-steps li.on{color:var(--ink); border-color:var(--line)}
.demo-steps li.on b{background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#0a0a0a}

.start-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 14px}
.start-row label{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-2)}
.start-row select,.start-row input{min-width:0; flex:1 1 220px; max-width:360px; background:#0b0b0e; color:var(--ink);
  border:1px solid var(--line); padding:12px 14px; font:inherit; border-radius:2px}
.start-row input[aria-invalid="true"]{border-color:#e0573f}

/* quiz */
.quiz-top{display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.quiz-tema{color:var(--gold-2)}
.quiz-num{color:var(--muted)}
.quiz-bar{height:3px; background:var(--panel-2); margin:12px 0 20px}
.quiz-bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); transition:width .4s var(--ease)}
.quiz-q{font-family:var(--serif); font-size:clamp(24px,3.4vw,32px); line-height:1.25; font-weight:600; margin-bottom:18px; text-wrap:balance}
.quiz-ops{display:grid; gap:10px}
.quiz-ops .op{text-align:left; font:inherit; font-size:15px; line-height:1.45; color:var(--ink); background:#0b0b0e;
  border:1px solid var(--line); padding:14px 16px; border-radius:2px; cursor:pointer; transition:border-color .2s, background .2s}
.quiz-ops .op:hover:not(:disabled){border-color:var(--gold); background:rgba(201,162,75,.06)}
.quiz-ops .op:disabled{cursor:default; opacity:.7}
.quiz-ops .op.ok{border-color:#3fbf7f; background:rgba(63,191,127,.10); opacity:1}
.quiz-ops .op.no{border-color:#e0573f; background:rgba(224,87,63,.10); opacity:1}
.quiz-fb{margin-top:16px; color:var(--soft); line-height:1.65; min-height:1px}
.quiz-fb.fb-ok strong{color:#5fd39a}
.quiz-fb.fb-no strong{color:#f08a73}
.quiz-fb .fonte,.risco-card .fonte{display:block; margin-top:8px; font-size:13px; color:var(--gold-2)}
.quiz-next{margin-top:16px; display:flex; justify-content:flex-end}
.quiz-score{font-family:var(--serif); font-size:clamp(26px,3.6vw,34px); font-weight:600; margin-bottom:14px}
.tema-list{list-style:none; display:grid; gap:8px; margin-bottom:20px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tema-list li{display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line-2); padding:10px 12px; font-size:14px}
.tema-list li.ok b{color:#5fd39a}
.tema-list li.meio b{color:var(--gold-2)}
.tema-list li.no b{color:#f08a73}

/* cena 3D */
.jogo-box{position:relative; height:min(66vh,560px); min-height:340px; border:1px solid var(--line); overflow:hidden; border-radius:2px;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#1b1a16 0%,#111113 55%,#0a0a0c 100%)}
.jogo-box.so-lista{height:auto; min-height:0; border:0; background:none}
.cena-canvas{display:block; width:100%; height:100%; cursor:grab}
.cena-canvas:active{cursor:grabbing}
.jogo-capa{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:var(--soft)}
.jogo-capa[hidden]{display:none}
.jogo-capa .carregando{color:var(--gold-2)}
.jogo-hud{position:absolute; left:10px; right:10px; top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; pointer-events:none}
.jogo-hud[hidden]{display:none}
.jogo-hud > span{pointer-events:auto; background:rgba(9,9,11,.82); border:1px solid var(--line); padding:7px 12px; font-size:14px; border-radius:2px}
.hud-n b{color:var(--gold-2); font-size:16px}
.hud-t{font-variant-numeric:tabular-nums; color:var(--soft)}
.hud-btns{display:flex; gap:6px; margin-left:auto; padding:4px !important}
.hud-btns button{font:inherit; font-size:13px; color:var(--ink); background:#18181c; border:1px solid var(--line); padding:6px 11px; cursor:pointer; border-radius:2px; min-width:34px}
.hud-btns button:hover:not(:disabled){border-color:var(--gold)}
.hud-btns button:disabled{opacity:.45; cursor:default}
.jogo-toast{position:absolute; left:50%; bottom:14px; transform:translate(-50%,8px); max-width:calc(100% - 24px);
  background:rgba(9,9,11,.9); border:1px solid var(--line); padding:9px 14px; font-size:14px; color:var(--ink);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; text-align:center}
.jogo-toast.on{opacity:1; transform:translate(-50%,0)}
.jogo-info{margin-top:14px}
.jogo-dica{color:var(--muted); font-size:14px}
.risco-card{border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--panel); padding:16px 18px}
.risco-card.certo{border-left-color:#3fbf7f}
.risco-card h3{font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:6px}
.risco-card p{color:var(--soft); line-height:1.6}
.risco-card p + p{margin-top:4px}
.risco-card b{color:var(--ink)}
.achados{margin:14px 0 0 20px; color:var(--soft); display:grid; gap:4px; font-size:14px}
.achados:empty{display:none}
.jogo-fim{margin-top:18px}
.faltou{margin:10px 0 18px 18px; display:grid; gap:8px; color:var(--soft); line-height:1.55}
.jogo-lista{margin-top:14px; border:1px solid var(--line); background:var(--panel); padding:18px}
.jogo-lista[hidden]{display:none}
.jogo-lista > p{color:var(--soft); margin-bottom:12px}
#listaItens{display:grid; gap:8px; margin-bottom:16px}
.item-lista{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line-2); padding:12px; cursor:pointer; line-height:1.5}
.item-lista input{margin-top:4px; width:18px; height:18px; accent-color:var(--gold)}
.item-lista.certo{border-color:#3fbf7f}
.item-lista.errado{border-color:#e0573f}

/* certificado */
.cert-view{margin-top:16px}
.cert-view[hidden]{display:none}
#certCanvas{display:block; width:100%; max-width:900px; height:auto; aspect-ratio:1600/1131; border:1px solid var(--line); background:#fbf8f1}
.cert-actions{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0}
.cert-print{display:none}

/* relatorio */
.rel-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.rel-grid .demo-card + .demo-card{margin-top:0}
.rel-h{font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:12px}
.tabela-wrap{overflow-x:auto}
.rank{width:100%; border-collapse:collapse; font-size:14px; min-width:380px}
.rank th,.rank td{padding:9px 8px; border-bottom:1px solid var(--line-2); text-align:left; font-weight:400}
.rank thead th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.rank td{font-variant-numeric:tabular-nums}
.rank tr.meu th,.rank tr.meu td{color:var(--gold-2)}
.bars{list-style:none; display:grid; gap:10px}
.bar-l{display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--soft)}
.bar-l b{color:var(--ink); font-variant-numeric:tabular-nums}
.bar-t{display:block; height:6px; background:var(--panel-2); margin-top:5px}
.bar-f{display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2))}
.bar-f.baixo{background:linear-gradient(90deg,#8f3b2b,#e0573f)}
.offline-nota{margin-top:14px; font-size:14px; color:var(--soft); line-height:1.6}
.offline-nota a{color:var(--gold-2); text-decoration:underline; text-underline-offset:3px}
.ata{color:var(--soft); line-height:1.7; margin-bottom:14px}
.copiado{margin-left:10px; font-size:13px; color:var(--gold-2)}
.demo-fontes{padding-top:0}

@media (max-width:640px){
  .jogo-box{height:min(62vh,520px)}
  /* no celular a pinca aproxima: sem os botoes - e +, o painel cabe numa
     linha e nao cobre a cena */
  .jogo-hud{flex-wrap:nowrap; gap:6px; left:8px; right:8px; top:8px}
  .jogo-hud > span{padding:6px 9px; font-size:13px}
  #btnMenos,#btnMais{display:none}
  .quiz-next .btn,.start-row .btn{width:100%}
}

/* impressao: so o certificado, numa folha deitada */
@media print{
  @page{size:A4 landscape; margin:0}
  body > *:not(.cert-print){display:none !important}
  .cert-print{display:block !important}
  .cert-print img{width:100%; height:auto; display:block}
}