/* O quiz. Ele é a construção acontecendo: cada resposta assenta um nível na torre.
   Régua: uma pergunta por tela, resposta ilustrada, nada de barra de progresso genérica. */
/* UM CARD SÓ, NO MEIO DA SEÇÃO. Antes o quiz era a tela inteira dividida em
   duas colunas full-bleed, e na home isso o fazia parecer outra PÁGINA no meio
   do caminho: sem respiro em volta, brigava com a seção de cima e a de baixo.
   Pedido dele em 12/08: *"tem que ser um card centralizado o quiz... imaginei
   as perguntas e a torre tudo em um grande card no meio da sessão"*.
   As perguntas e a torre continuam lado a lado, mas DENTRO da mesma peça, com
   uma borda fechando as duas — é o que faz o quiz ler como uma coisa só, e não
   como duas colunas que por acaso estão juntas.
   Vale nas duas páginas: no `/montar` o card fica sozinho na noite, que é
   exatamente o que ele já queria ser. */
.quiz{padding:12vh 5vw;background:var(--noite)}
.quiz-card{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  border:1px solid var(--linha);border-radius:20px;background:var(--noite2);overflow:hidden}
.perguntas{padding:56px 52px 52px;min-width:0}
.obra{position:relative;border-left:1px solid var(--linha);display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:44px 30px;background:var(--noite);min-width:0}
.obra .ceu{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 90%,rgba(240,168,60,.10),transparent 60%)}
.obra svg{position:relative;width:100%;max-width:300px;height:auto;overflow:visible}
/* a torre de verdade toma o lugar do SVG assim que o WebGL responde — o
   desenho antigo continua no DOM como reserva, só sai de cena */
#quiz-cv{position:relative;width:100%;max-width:320px;aspect-ratio:3/4;display:none}
.com-torre3d #quiz-cv{display:block}
.com-torre3d #torre{display:none}
.obra .quanto{position:relative;text-align:center;margin-top:34px}
.obra .quanto .n{font-family:var(--tit);font-weight:500;font-size:clamp(1.8rem,2.6vw,2.9rem);
  line-height:1.05;color:var(--papel);letter-spacing:-.02em}
.obra .quanto .u{font-family:var(--rot);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fraco);margin-top:12px;min-height:1em}
.obra .quanto .d{font-size:.86rem;color:var(--fraquinho);margin-top:10px}

.passo{display:none}
.passo.on{display:block;animation:entra .5s ease both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.conta-passo{font-family:var(--rot);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fio)}
.passo h2{font-size:clamp(1.5rem,2.8vw,2.4rem);margin-top:18px;max-width:20ch}
.passo .ajuda{color:var(--fraco);margin-top:14px;max-width:48ch;font-size:.98rem}

.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.opcoes.duas{grid-template-columns:repeat(2,1fr)}
/* button centra o conteúdo por conta própria, e como a grade estica todos à
   mesma altura, o card de texto curto descia 10px e desalinhava os títulos.
   O flex com início no topo é o que faz a fileira ler como fileira. */
.op{text-align:left;background:transparent;border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px 22px 24px;cursor:pointer;font-family:inherit;color:var(--pedra);
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  transition:all .25s var(--curva)}
.op:hover{border-color:var(--fio-borda);background:var(--fio-veu)}
.op.sel{border-color:var(--fio);background:rgba(240,168,60,.09)}
/* `.opfig`, e nao `.fg`: o painel.css usa `.fg` para a miniatura de arquivo,
   com `background:var(--dia)`, `aspect-ratio:1` e `overflow:hidden`. Na home,
   onde as duas folhas convivem, isso punha um retangulo claro atras de cada
   icone de opcao do quiz. */
/* MENOR E MAIS LEVE. A 58px o ícone virava a peça principal do cartão, e os
   logos das marcas pioram isso: eles vêm preenchidos, em silhueta sólida, ao
   lado de desenhos de traço fino. A 34px o ícone volta a ser sinal, não
   ilustração, e a mancha sólida do logo encolhe junto até pesar o mesmo que
   uma linha. */
.op .opfig{height:34px;margin-bottom:14px;background:none;display:flex;align-items:center}
/* 58px de altura num viewBox de 90: sem engrossar, o traço sai com 0,77px
   reais e a figura acinzenta. Ver a tabela de espessuras no casca.css. */
/* 34px num viewBox de 90: sem engrossar, o traço sai com 0,45px reais e
   some. 3.2 devolve ~1,2px, a mesma espessura do resto do site. */
.op .opfig svg{height:100%;width:auto;stroke-width:3.2}
/* o logo da marca é preenchido e não tem traço: encolhe e recua um pouco
   para não gritar ao lado dos desenhos de linha */
.op .opfig svg[fill]{height:82%;opacity:.78}
.op b{display:block;font-family:var(--tit);font-weight:600;font-size:.98rem;color:var(--papel)}
.op i{display:block;font-style:normal;font-size:.84rem;color:var(--fraco);margin-top:8px;line-height:1.5}
.op .h{display:block;font-family:var(--rot);font-size:.52rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fio);margin-top:14px;opacity:0;transition:opacity .3s}
.op.sel .h{opacity:1}

.navega{display:flex;gap:12px;align-items:center;margin-top:46px;flex-wrap:wrap}
.navega .dica{font-size:.82rem;color:var(--fraquinho)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px;max-width:620px}
.campos .c{display:flex;flex-direction:column}
.campos label{font-family:var(--rot);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fraquinho);margin-bottom:9px}
.campos input{background:transparent;border:0;border-bottom:1px solid var(--linha);color:var(--papel);
  font-family:var(--txt);font-size:1rem;font-weight:300;padding:10px 0;outline:none}
.campos input:focus{border-color:var(--fio)}
/* o campo aberto: mesma régua do input, mas com caixa, porque texto de três
   linhas sobre uma linha só de base fica boiando */
.campos textarea{background:transparent;border:1px solid var(--linha);border-radius:12px;
  color:var(--papel);font-family:var(--txt);font-size:.95rem;padding:12px 14px;
  margin-top:8px;resize:vertical;min-height:84px;width:100%}
.campos textarea:focus{border-color:var(--fio);outline:none}
.campos textarea::placeholder{color:var(--fraquinho)}
.campos .largo{grid-column:1/-1}

.resumo{margin-top:30px;border-top:1px solid var(--linha);padding-top:26px;max-width:620px}
.resumo .l{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(250,250,248,.06);
  font-size:.92rem}
.resumo .l span:first-child{color:var(--fraquinho)}
.resumo .l span:last-child{color:var(--papel);text-align:right}

@media(max-width:899px){
  /* A GRADE MORA NO `.quiz-card`, NÃO NO `.quiz`, e este media query tinha
     ficado mirando o antigo quando o card ganhou o wrapper. O resultado no
     celular era o pior tipo de bug: a regra de duas colunas continuava valendo,
     a torre segurava seus 400px fixos numa tela de 387, e a coluna das
     PERGUNTAS colapsava para ZERO. O quiz existia no DOM e não aparecia. */
  .quiz{padding:6vh 4vw}
  .quiz-card{grid-template-columns:1fr;border-radius:16px}
  .obra{order:-1;height:auto;position:static;background:var(--noite);
    border-left:0;border-bottom:1px solid var(--linha);padding:26px 18px 20px;
    flex-direction:row;gap:20px;justify-content:center;align-items:center}
  .obra svg{max-width:120px}
  #quiz-cv{max-width:110px;aspect-ratio:1/1}
  .obra .quanto{margin-top:0;text-align:left}
  .obra .quanto .u{margin-top:6px}
  .obra .quanto .d{font-size:.74rem;margin-top:6px;max-width:22ch}
  .obra .quanto .n{font-size:1.5rem}
  .perguntas{padding:30px 22px 34px}
  .opcoes{grid-template-columns:1fr}
  .campos{grid-template-columns:1fr}
}