/* ============================================================================
   PEDIDO DE ORCAMENTO PELO PROPRIO CLIENTE

   Tema unico e escuro, travado. Nao e preferencia: a peca central da tela e um
   desenho tecnico que se monta enquanto a pessoa responde, e traco claro sobre
   fundo escuro tem muito mais leitura do que o contrario. E separa
   visualmente o que e publico do que e o app interno.

   Sistema herdado do site novo (DESIGN.md): Archivo expandida nos titulos,
   concreto e carvao, vermelho so em acao. Raio 4px em botao, 8px em midia.
   ========================================================================== */

* {}
:root{
  /* CLARO. O cliente esta preenchendo um pedido, nao operando um painel: fundo
     de papel, o desenho da obra dele como unica coisa que ocupa espaco.
     Mesma familia da apresentacao, para as duas telas serem a mesma empresa. */
  --papel:#FFFFFF;
  --papel-2:#F6F7F8;
  --papel-3:#EDEFF1;
  --fio:#E2E5E8;
  --fio-2:#CBD0D5;
  --tinta:#16191C;
  --tinta-2:#4A5158;
  --tinta-3:#636B73;      /* passa AA nas tres superficies claras */
  --red:#C1171F;          /* o vermelho do logo: 6,16:1 sobre branco */
  --red-forte:#A5131A;
  --red-fraco:rgba(193,23,31,.08);
  --fonte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,5vw,56px);
  --r:12px;
  --r-c:6px;

  --tinta-inv:#FFFFFF;
  --capa:#0E1114;      /* o unico fundo escuro do fluxo: a foto de abertura */
}

*{box-sizing:border-box}
/* O atributo hidden esconde via folha do navegador, que perde de qualquer
   regra de classe. Como .abre, .quiz e .fim declaram display:grid, o hidden
   nao surtia efeito nenhum e as tres telas ficavam empilhadas. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--papel)}
body{
  font-family:var(--fonte);color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}

.d1,.d2,.d3{
  font-stretch:125%;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.04;text-wrap:balance;margin:0;
}
.d1{font-size:clamp(1.85rem,3.9vw,3.3rem)}
.d2{font-size:clamp(1.5rem,3.4vw,2.5rem)}
.d3{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:700;line-height:1.15}

.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--fio-2);background:var(--papel);color:var(--tinta);
  border-radius:var(--r);padding:.85rem 1.4rem;font-size:1rem;font-weight:500;
  transition:background .18s ease-out,border-color .18s ease-out,transform .12s ease-out;
  white-space:nowrap;text-decoration:none;
}
.bt:hover{border-color:var(--tinta-3);background:var(--papel-2)}
.bt:active{transform:translateY(1px)}
.bt:focus-visible{outline:2px solid var(--red-forte);outline-offset:2px}
.bt--red{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.bt--red:hover{background:var(--red-forte);border-color:var(--red-forte)}
.bt--red:disabled{opacity:.5;cursor:default;transform:none}
.bt--g{padding:1rem 1.8rem;font-size:1.06rem}

/* ================================================================ abertura */
.abre{
  position:relative;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;
  overflow:hidden;background:var(--capa);
}
.abre__foto{position:absolute;inset:0;z-index:0}
.abre__foto img{width:100%;height:100%;object-fit:cover;opacity:.72}
.abre__foto::after{
  content:"";position:absolute;inset:0;
  /* Escuro o bastante para o texto passar em AA, claro o bastante para a obra
     continuar sendo a prova. */
  /* A capa e a unica superficie escura do fluxo: foto de obra entregue com o
     texto por cima. Nao ha continuidade a preservar com o formulario — sao
     telas que se substituem — entao o veu termina escuro, sem clarear. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--capa) 28%,transparent) 0%,
    color-mix(in srgb,var(--capa) 50%,transparent) 38%,
    color-mix(in srgb,var(--capa) 86%,transparent) 78%,
    color-mix(in srgb,var(--capa) 94%,transparent) 100%);
}
.abre__topo,.abre__meio{position:relative;z-index:1}
.abre__topo{padding:clamp(18px,3vw,30px) var(--gutter)}
.abre__topo img{height:38px;width:auto}
.abre__meio{
  padding:0 var(--gutter) clamp(40px,7vw,80px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.2rem;
  max-width:56rem;
}
.abre__meio p{
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;color:rgba(255,255,255,.86);
  max-width:34ch;margin:0;
}
.abre__acao{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.abre__acao span{font-size:.9rem;color:rgba(255,255,255,.72)}

/* ================================================================ perguntas */
.quiz{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}

.barra{position:sticky;top:0;z-index:5;background:var(--papel)}
.barra__linha{height:3px;background:var(--papel-3)}
.barra__cheia{height:100%;width:0;background:var(--red);transition:width .45s cubic-bezier(.16,1,.3,1)}
.barra__topo{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem var(--gutter);border-bottom:1px solid var(--fio);
}
.barra__topo img{height:26px;width:auto;opacity:.85}
.barra__conta{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--tinta-3)}

.palco{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(24px,4vw,56px);align-items:start;
  padding:clamp(28px,5vw,60px) var(--gutter);width:100%;
  max-width:78rem;margin:0 auto;
}
.pergunta{min-width:0}
.pergunta h2{margin:0 0 .5rem}
.pergunta__apoio{margin:0 0 1.6rem;color:var(--tinta-2);font-size:1rem;line-height:1.55;max-width:46ch}

/* ------------------------------------------------------- cartoes de escolha */
/* A foto aerea nao distinguia nada: de cima, industrial e logistico sao
   iguais. Cada opcao passou a ter um CORTE que mostra a diferenca de forma
   (altura, doca, pavimento, vao aberto) e uma linha dizendo o que aquilo muda
   no orcamento. Botao de escolha tem que informar, nao so parecer bonito. */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.8rem}
.cart{
  position:relative;display:grid;gap:.6rem;text-align:left;padding:.9rem 1rem 1rem;
  border:1.5px solid var(--fio);border-radius:var(--r);background:var(--papel);
  color:var(--tinta);transition:border-color .18s ease-out,transform .14s ease-out,
    box-shadow .18s ease-out;
}
.cart:hover{border-color:var(--fio-2);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(22,25,28,.07)}
.cart:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cart.e{
  border-color:var(--red);background:var(--red-fraco);
  box-shadow:0 8px 22px rgba(193,23,31,.1);
}
.cart__fig{display:block;background:var(--papel-2);border-radius:var(--r-c);padding:.5rem}
.cart.e .cart__fig{background:rgba(255,255,255,.72)}
.fig{width:100%;height:auto;max-height:5.4rem;display:block}
.fig .ch{stroke:var(--fio-2);stroke-width:2}
.fig .pe{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linejoin:round}
.fig .te{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.fig .la{stroke:var(--tinta);stroke-width:2}
/* O tracejado vermelho e o que separa um uso do outro: ponte rolante, doca,
   pavimento, vao aberto. Por isso e ele que recebe o acento. */
.fig .mv{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.fig .cx2{fill:var(--fio);stroke:var(--tinta-3);stroke-width:1.2}
.cart.e .fig .cx2{fill:var(--papel-3)}

.cart__txt{display:grid;gap:.2rem}
.cart__txt b{font-size:1.02rem;font-weight:700;line-height:1.2}
.cart__txt > span{font-size:.86rem;color:var(--tinta-2);line-height:1.4}
.cart__txt i{font-style:normal;font-size:.78rem;color:var(--tinta-3);line-height:1.4;margin-top:.1rem}

/* Marca de escolhido: circulo que ganha o tique. Feedback tem que ser visivel
   sem depender so da cor, para quem nao distingue vermelho de cinza. */
.cart__marca{
  position:absolute;top:.9rem;right:.9rem;width:1.35rem;height:1.35rem;border-radius:50%;
  border:1.5px solid var(--fio-2);background:var(--papel);transition:.16s ease-out;
}
.cart.e .cart__marca{border-color:var(--red);background:var(--red)}
.cart.e .cart__marca::after{
  content:"";position:absolute;left:.42rem;top:.2rem;width:.32rem;height:.6rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
@media(max-width:40rem){
  .cartoes{grid-template-columns:1fr}
  .cart{grid-template-columns:5.5rem 1fr;align-items:center;gap:.9rem}
  .cart__fig{grid-row:span 2}
  .cart__marca{top:.7rem;right:.7rem}
}

/* lista de faixas */
.faixas{display:grid;gap:.5rem}
.faixa{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1rem 1.15rem;border:1.5px solid var(--fio);border-radius:var(--r-c);
  background:var(--papel);text-align:left;color:var(--tinta);
  transition:border-color .18s ease-out,background .18s ease-out;
}
.faixa:hover{border-color:var(--fio-2);background:var(--papel-2)}
.faixa:focus-visible{outline:2px solid var(--red-forte);outline-offset:2px}
.faixa.e{border-color:var(--red);background:var(--red-fraco)}
.faixa b{display:block;font-size:1.02rem;font-weight:600}
.faixa i{display:block;font-style:normal;font-size:.84rem;color:var(--tinta-3);margin-top:.1rem}
.faixa__marca{
  width:1.25rem;height:1.25rem;border-radius:50%;border:1.5px solid var(--fio-2);
  flex:none;
}
.faixa.e .faixa__marca{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px var(--papel)}

/* campos */
.campos{display:grid;gap:1.1rem;max-width:32rem}
.campo label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.4rem}
.campo input{
  width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem;
  background:var(--papel);border:1.5px solid var(--fio-2);border-radius:var(--r-c);
  color:var(--tinta);
}
.campo input::placeholder{color:var(--tinta-3)}
.campo input:focus{outline:none;border-color:var(--red);background:var(--papel)}
.campo__erro{display:block;margin-top:.35rem;font-size:.86rem;color:var(--red-forte);font-weight:500}
/* Armadilha para robo: fora da tela, sem display:none, que os robos ignoram. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------- desenho ao vivo */
.obra{
  position:sticky;top:5.5rem;border:1px solid var(--fio);
  border-radius:var(--r-midia);background:var(--papel-2);padding:1.2rem;
  transition:background .3s ease-out,border-color .3s ease-out;
}
.obra__rot{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:600;margin:0 0 .8rem;
}
.obra svg{width:100%;height:auto;display:block}
.obra__linhas{margin-top:1rem;display:grid;gap:.3rem;border-top:1px solid var(--fio);padding-top:.9rem}
.obra__l{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem}
.obra__l span{color:var(--tinta-3)}
.obra__l b{font-weight:600;text-align:right}
.obra__vazio{color:var(--tinta-3);font-size:.88rem;line-height:1.5;margin:0}

/* traco do desenho */
.dz .chao{stroke:var(--fio-2);stroke-width:2}
.dz .peca{fill:#DDE1E5;stroke:var(--tinta);stroke-width:1.3;stroke-linejoin:round}
.dz .telhado{fill:#B9C0C7;stroke:var(--tinta);stroke-width:1.3;stroke-linejoin:round}
.dz .luz{fill:#8FC0DA;stroke:var(--tinta);stroke-width:1}
.dz .gente{fill:var(--red)}
.dz .cota{stroke:var(--tinta-3);stroke-width:1}
.dz .cota-t{fill:var(--tinta-2);font-family:var(--mono);font-size:9px}

/* ------------------------------------------------------------------- pe */
.pe{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--fio);background:var(--papel);
}
.pe__aviso{font-size:.88rem;color:var(--red-forte);font-weight:500}

/* =================================================================== fim */
.fim{
  min-height:100dvh;display:grid;place-items:center;padding:var(--gutter);
}
.fim__caixa{max-width:38rem;text-align:left}
.fim__proto{
  display:inline-block;margin:1.4rem 0 1.6rem;padding:.7rem 1.1rem;
  border:1.5px solid var(--red);border-radius:var(--r-c);color:var(--red);
  font-family:var(--mono);font-size:1.15rem;letter-spacing:.04em;
}
.fim ol{margin:0 0 2rem;padding-left:1.3rem;display:grid;gap:.7rem}
.fim li{color:var(--tinta-2);line-height:1.6}
.fim p{color:var(--tinta-2);line-height:1.6}

/* =============================================================== respostas */
@media(max-width:60rem){
  .palco{grid-template-columns:1fr}
  /* No celular a pergunta vem primeiro. O desenho e recompensa por responder,
     e recompensa nao vai antes da tarefa — muito menos como caixa vazia. */
  .obra{position:static}
  .obra.vazia{display:none}
}
@media(max-width:40rem){
  .cartoes{grid-template-columns:1fr}
  .cart{display:grid;grid-template-columns:7rem 1fr;align-items:stretch}
  .cart__foto{aspect-ratio:1}
  .abre__meio p{max-width:none}
  .pe{flex-direction:column-reverse;align-items:stretch}
  .pe .bt{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Transicao entre perguntas: sequencia, nao enfeite. */
@media(prefers-reduced-motion:no-preference){
  .entra{animation:entra .38s cubic-bezier(.16,1,.3,1) both}
  @keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ==================================================== trilha de progresso */
/* Etapas com nome, nao so uma barra. A pessoa ve quantas faltam e volta em
   uma so batida — o que reduz abandono mais do que qualquer enfeite. */
.trilha{
  display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0;
  flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;
}
.trilha::-webkit-scrollbar{display:none}
.tr__p button{
  display:flex;align-items:center;gap:.4rem;padding:.3rem .6rem .3rem .35rem;
  border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;
  font:inherit;color:var(--tinta-3);white-space:nowrap;transition:.16s ease-out;
}
.tr__p button:disabled{cursor:default;opacity:.7}
.tr__p button:not(:disabled):hover{background:var(--papel-2);color:var(--tinta)}
.tr__p button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tr__b{
  display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;
  border:1.5px solid var(--fio-2);font-family:var(--mono);font-size:.72rem;line-height:1;
  transition:.16s ease-out;
}
.tr__r{font-size:.82rem;font-weight:500}
.tr__p.ok .tr__b{background:var(--tinta);border-color:var(--tinta);color:#fff}
.tr__p.ok button{color:var(--tinta-2)}
.tr__p.ag button{color:var(--tinta);border-color:var(--fio-2);background:var(--papel-2)}
.tr__p.ag .tr__b{background:var(--red);border-color:var(--red);color:#fff}
/* Nas telas estreitas a trilha vira so os marcadores: o nome de oito etapas
   nao cabe em 360px, e forcar rolagem lateral no topo atrapalha mais do que
   informa. A contagem "3 de 8" ao lado continua dizendo onde estamos. */
@media(max-width:60rem){
  .tr__r{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tr__p button{padding:.25rem}
  .trilha{gap:.28rem;justify-content:flex-start}
}

/* Dica da tecla. So em quem tem teclado: no celular seria ruido.
   Sempre fora do fluxo (absoluta ou nenhuma), nunca um terceiro filho no
   grid — foi assim que a lista de pendencias quebrou uma vez. */
.tecla{
  position:absolute;display:none;
  font-family:var(--mono);font-size:.68rem;line-height:1;color:var(--tinta-3);
  border:1px solid var(--fio-2);border-radius:4px;padding:.2rem .34rem;background:var(--papel);
}
.cart .tecla{left:.9rem;top:.9rem}
.faixa .tecla{left:1.15rem;top:50%;transform:translateY(-50%)}
.faixa{position:relative}
@media(hover:hover) and (pointer:fine) and (min-width:60rem){
  .cart .tecla,.faixa .tecla{display:block}
  .cart__fig{margin-top:1.5rem}
  .faixa{padding-left:3.2rem}
}
.cart.e .tecla,.faixa.e .tecla{border-color:var(--red);color:var(--red)}

/* Ainda sem medidas: o painel recua para nao competir com a pergunta. */
.obra.vazia{background:none;border-color:transparent;padding:1.2rem 0}
.obra.vazia .obra__rot{color:var(--fio-2)}

/* A capa e escura: a cor do texto vem daqui, nunca herdada do tema claro. */
.abre__meio h1,.abre__meio p,.abre__acao span{color:#FFFFFF}
.abre__meio p{color:rgba(255,255,255,.86)}
.abre__acao span{color:rgba(255,255,255,.74)}