/* Quiz — CSS do mockup 04-quiz.html (a base está em base.css). */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
.palco-q{background:var(--mata);color:#fff;position:relative;overflow:hidden;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:56px 0}
.palco-q .risco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.palco-q .wrap{position:relative;width:min(760px,100% - 40px)}
.etapa[hidden]{display:none}
[tabindex="-1"]:focus{outline:none}

/* Início */
.inicio{text-align:center}
.inicio .selo{display:inline-block;background:rgba(212,172,76,.16);color:var(--ouro);font-weight:600;font-size:.9rem;padding:.3rem .9rem;border-radius:999px}
.inicio h1{font-size:clamp(2.2rem,5.4vw,3.8rem);margin:1.2rem auto 1rem;max-width:16ch}
.inicio p{color:#C9DBD1;font-size:1.15rem;max-width:48ch;margin:0 auto}
.degraus{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:120px;margin:2.6rem auto 2.4rem}
.degraus span{width:54px;border-radius:10px 10px 4px 4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);display:grid;place-items:start center;padding-top:.5rem;font-family:var(--display);font-weight:700;color:#A9C4B6}
.degraus span:nth-child(1){height:32%} .degraus span:nth-child(2){height:48%} .degraus span:nth-child(3){height:64%} .degraus span:nth-child(4){height:82%}
.degraus span:nth-child(5){height:100%;background:var(--ouro);border-color:var(--ouro);color:var(--mata)}
.inicio .info{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem;color:#A9C4B6;font-size:.93rem;list-style:none}

/* Pergunta */
.progresso-q{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;font-size:.92rem;color:#A9C4B6;font-variant-numeric:tabular-nums}
.progresso-q .trilho-q{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.progresso-q i{display:block;height:100%;background:var(--ouro);border-radius:999px;transition:width .35s ease}
.pergunta h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:1.8rem;max-width:24ch}
.opcoes{display:grid;gap:12px}
.opcao{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff;font:inherit;font-size:1.05rem;padding:1.05rem 1.2rem;border-radius:var(--r-md);cursor:pointer;transition:background .15s,border-color .15s}
.opcao:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
.opcao .letra{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-family:var(--display);font-weight:600;font-size:.92rem}
.opcao[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--mata)}
.opcao[aria-pressed="true"] .letra{background:var(--ouro);color:var(--mata)}
.nav-q{display:flex;justify-content:space-between;align-items:center;margin-top:1.8rem}
.voltar{background:none;border:0;color:#C9DBD1;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0}
.voltar:hover{color:#fff}
.voltar[disabled]{visibility:hidden}
.nav-q small{color:#A9C4B6}

/* Resultado */
.resultado-q .topo-r{text-align:center}
.resultado-q .rot{color:#A9C4B6;font-size:.95rem}
.resultado-q h2{font-size:clamp(2rem,4.6vw,3.2rem);margin:.4rem 0 .8rem}
.resultado-q .desc{color:#C9DBD1;font-size:1.1rem;max-width:52ch;margin:0 auto}
.escada{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:150px;margin:2.2rem 0 .6rem}
.escada div{border-radius:10px 10px 4px 4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);position:relative}
.escada div:nth-child(1){height:30%} .escada div:nth-child(2){height:46%} .escada div:nth-child(3){height:62%} .escada div:nth-child(4){height:80%} .escada div:nth-child(5){height:100%}
.escada div.feito{background:rgba(9,163,91,.45);border-color:rgba(9,163,91,.6)}
.escada div.aqui{background:var(--ouro);border-color:var(--ouro)}
.escada div.aqui::before{content:"Você está aqui";position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--mata);font-size:.78rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.nomes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;font-size:.8rem;color:#A9C4B6;text-align:center;line-height:1.3}
.nomes span.aqui{color:#fff;font-weight:600}
.painel-r{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.2rem}
.bloco-r{background:#fff;color:var(--tinta);border-radius:var(--r-lg);padding:1.5rem}
.bloco-r h3{font-size:1.1rem;margin-bottom:.4rem}
.bloco-r .eti{font-size:.85rem;font-weight:600;color:var(--verde-txt)}
.bloco-r p{color:var(--tinta-2);font-size:.97rem;margin-top:.3rem}
.bloco-r a.ler{display:inline-block;margin-top:.8rem;color:var(--verde-txt);font-weight:600;font-size:.95rem}
.bloco-r.app{background:var(--ouro-claro)}
.bloco-r.app .btn{margin-top:1rem;width:100%}
.forte{margin-top:.8rem;font-size:.93rem;color:var(--tinta-2)}
.forte strong{color:var(--tinta)}
.acoes-r{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.4rem;margin-top:1.8rem;font-size:.95rem}
.acoes-r a,.acoes-r button{color:#fff;background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.email-r{margin-top:1.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:1.1rem 1.2rem;display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center}
.email-r label{grid-column:1/-1;font-size:.95rem;color:#C9DBD1}
.email-r input{font:inherit;border:0;border-radius:999px;padding:.75rem 1.1rem;min-width:0}
.email-r small{grid-column:1/-1;color:#A9C4B6;font-size:.8rem}

/* Acréscimos do tema (não existiam no mockup) */
.email-r .aviso{grid-column:1/-1;font-size:.9rem;margin:0}
.email-r .aviso.ok{color:#9EE2BD}
.email-r .aviso.erro{color:#F2A89E}
.email-r .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:960px){
  .nav{display:none}
  .menu-m{display:block;position:relative}
  .menu-m summary{list-style:none;cursor:pointer;padding:.4rem;color:#fff}
  .menu-m summary::-webkit-details-marker{display:none}
  .menu-m nav{position:absolute;right:0;top:44px;background:#fff;border-radius:var(--r-md);padding:.6rem;min-width:200px;box-shadow:0 20px 40px -12px rgba(0,0,0,.35);display:grid}
  .menu-m nav a{color:var(--tinta);text-decoration:none;padding:.7rem .9rem;border-radius:var(--r-sm)}
  .topo .entrar{display:none} .topo .wrap{gap:1rem} .topo .acoes{margin-left:auto}
  .rodape .grade{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .topo .acoes .btn{display:none}
  .palco-q{padding:36px 0 48px;align-items:flex-start}
  .painel-r{grid-template-columns:1fr}
  .nomes{font-size:.68rem}
  .escada{height:110px}
  .email-r{grid-template-columns:1fr}
  .rodape .grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Caixa de consentimento do e-mail (desmarcada; sem ela nada é enviado) */
.email-r .consente{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;line-height:1.45;color:#C9DBD1;cursor:pointer}
.email-r .consente input{flex:none;width:18px;height:18px;margin:.1rem 0 0;padding:0;border-radius:4px;accent-color:var(--ouro);cursor:pointer}
.email-r .consente a{color:#E2BE62;font-weight:600}
@media (max-width:600px){.email-r button[type=submit]{order:1}.email-r .aviso,.email-r small{order:2}}