/* ═══════════════════════════════════════════════════════════════════════════════
   ORCAMENTO.CSS — a página /orcamento (formulário guiado)
   ═══════════════════════════════════════════════════════════════════════════════
   Tema escuro, próprio desta página: o site inteiro é claro e institucional;
   aqui o fundo escurece para tirar tudo do caminho e sobrar só a pergunta.
   As perguntas se editam no dados.js (seção I) — este arquivo é só o visual.

   PALETA DESTA PÁGINA (independente do resto do site)
   --q-fundo     fundo profundo, verde-carvão (não é preto puro: puxa a mata)
   --q-relevo    cartões e superfícies elevadas
   --q-verde     verde vivo da marca — usado com parcimônia, só no que responde
   --q-madeira   âmbar de eucalipto tratado — contraponto quente ao verde
   --q-texto     texto principal
   --q-suave     apoio, legendas, ajuda
   ═══════════════════════════════════════════════════════════════════════════════ */

.orc{
  --q-fundo:#0E1A12;
  --q-fundo-2:#152A1B;
  --q-relevo:rgba(255,255,255,.045);
  --q-relevo-alto:rgba(255,255,255,.08);
  --q-linha:rgba(255,255,255,.12);
  --q-verde:#76c42c;
  --q-madeira:#C08A4A;
  --q-texto:#EAF0E9;
  --q-suave:#94A896;

  min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(118,196,44,.10) 0%, transparent 60%),
    linear-gradient(170deg, var(--q-fundo-2) 0%, var(--q-fundo) 55%);
  color:var(--q-texto);
  display:flex;flex-direction:column;
}

/* ─── Topo enxuto: só a marca e a saída ─────────────────────────────────────── */
.orc-topo{padding:22px 0;border-bottom:1px solid var(--q-linha)}
.orc-topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.orc-topo img{height:34px;width:auto}
.orc-sair{font-size:.86rem;color:var(--q-suave);display:inline-flex;align-items:center;gap:8px}
.orc-sair:hover{color:var(--q-texto)}

.orc-palco{flex:1;display:flex;align-items:center;padding:44px 0 64px}
.orc-caixa{max-width:680px;margin:0 auto;width:100%}

/* ─── A CERCA: o indicador de progresso ─────────────────────────────────────
   Cada etapa respondida estica mais um fio de arame entre os dois mourões.
   É a metáfora do produto virando interface — e diz, sem texto, quanto falta. */
.cerca{margin-bottom:34px}
.cerca svg{width:100%;max-width:280px;height:auto;display:block}
.cerca .poste{fill:var(--q-madeira);opacity:.55}
.cerca .fio{stroke:var(--q-linha);stroke-width:2.5;stroke-linecap:round;
  transition:stroke .45s ease, opacity .45s ease}
.cerca .fio.feito{stroke:var(--q-verde);opacity:1}
.cerca .fio.atual{stroke:var(--q-verde);opacity:.45;
  stroke-dasharray:4 6;animation:puxaFio 1.4s linear infinite}
@keyframes puxaFio{to{stroke-dashoffset:-20}}
.cerca-rotulo{display:flex;align-items:baseline;gap:10px;margin-top:14px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--q-suave)}
.cerca-rotulo b{color:var(--q-verde);font-size:.86rem;letter-spacing:.06em}

/* ─── Pergunta ──────────────────────────────────────────────────────────────── */
.orc-pergunta{font-size:clamp(1.75rem,4.4vw,2.5rem);font-weight:700;line-height:1.12;
  letter-spacing:-.015em;color:var(--q-texto);text-transform:none;margin-bottom:10px}
.orc-ajuda{color:var(--q-suave);font-size:1rem;margin-bottom:30px;max-width:52ch}

/* ─── Opções ────────────────────────────────────────────────────────────────
   Botões grandes: no celular do produtor, no meio do campo, alvo pequeno
   é alvo errado. Mínimo de 64px de altura e área toda clicável.            */
.orc-opcoes{display:grid;gap:12px}
.opcao{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--q-relevo);border:1px solid var(--q-linha);border-radius:14px;
  padding:18px 20px;min-height:64px;color:var(--q-texto);
  transition:border-color .2s, background .2s, transform .12s}
.opcao:hover{background:var(--q-relevo-alto);border-color:rgba(118,196,44,.5);transform:translateX(3px)}
.opcao.marcada{border-color:var(--q-verde);background:rgba(118,196,44,.10)}
.opcao .ico{width:46px;height:46px;flex-shrink:0;border-radius:11px;
  background:rgba(118,196,44,.12);color:var(--q-verde);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.opcao .txt{flex:1;min-width:0}
.opcao .rot{font-weight:600;font-size:1.02rem;display:block}
.opcao .desc{font-size:.85rem;color:var(--q-suave);display:block;margin-top:2px}
/* A tecla de atalho: quem usa teclado responde sem tirar a mão dali */
.opcao .tecla{flex-shrink:0;font-size:.72rem;color:var(--q-suave);
  border:1px solid var(--q-linha);border-radius:6px;padding:3px 8px;font-variant-numeric:tabular-nums}
.opcao:hover .tecla{border-color:var(--q-verde);color:var(--q-verde)}

/* ─── Campos de digitação ───────────────────────────────────────────────────── */
.orc-campos{display:grid;gap:18px}
.orc-campo label{display:block;font-size:.82rem;font-weight:600;
  color:var(--q-texto);margin-bottom:7px}
.orc-campo input,.orc-campo textarea{width:100%;font:inherit;font-size:1rem;
  padding:15px 17px;border-radius:12px;color:var(--q-texto);
  background:var(--q-relevo);border:1px solid var(--q-linha);transition:border-color .2s}
.orc-campo input::placeholder,.orc-campo textarea::placeholder{color:#65775F}
.orc-campo input:focus,.orc-campo textarea:focus{outline:none;border-color:var(--q-verde);
  background:rgba(255,255,255,.06)}
.orc-campo textarea{min-height:104px;resize:vertical}
.orc-campo.erro input,.orc-campo.erro textarea{border-color:#E0703F}
.orc-erro{display:none;font-size:.8rem;color:#E0703F;margin-top:6px}
.orc-campo.erro .orc-erro{display:block}

/* ─── Resumo antes de enviar ────────────────────────────────────────────────── */
.orc-resumo{background:var(--q-relevo);border:1px solid var(--q-linha);
  border-radius:14px;padding:18px 20px;margin-bottom:22px}
.orc-resumo h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--q-suave);margin-bottom:12px;font-weight:600}
.orc-resumo dl{display:grid;gap:8px;margin:0}
.orc-resumo .item{display:flex;justify-content:space-between;gap:16px;font-size:.9rem}
.orc-resumo dt{color:var(--q-suave)}
.orc-resumo dd{margin:0;font-weight:600;text-align:right}

/* ─── Navegação ─────────────────────────────────────────────────────────────── */
.orc-nav{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.orc-voltar{background:none;border:0;color:var(--q-suave);font-size:.9rem;
  display:inline-flex;align-items:center;gap:8px;padding:12px 4px}
.orc-voltar:hover{color:var(--q-texto)}
.orc-enviar{background:var(--q-verde);color:#0E1A12;font-weight:700;font-size:1rem;
  border:0;border-radius:12px;padding:17px 34px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .15s, box-shadow .2s}
.orc-enviar:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(118,196,44,.25)}
.orc-dica-teclado{margin-left:auto;font-size:.76rem;color:var(--q-suave)}

/* ─── Tela final ────────────────────────────────────────────────────────────── */
.orc-fim{text-align:center;padding:20px 0}
.orc-fim .marca-ok{width:74px;height:74px;margin:0 auto 24px;border-radius:50%;
  background:rgba(118,196,44,.14);color:var(--q-verde);
  display:flex;align-items:center;justify-content:center;font-size:2rem}
.orc-fim h2{color:var(--q-texto);text-transform:none;margin-bottom:12px}
.orc-fim p{color:var(--q-suave);max-width:44ch;margin:0 auto 28px}

/* ─── Transição entre etapas ────────────────────────────────────────────────── */
.orc-etapa{animation:entraEtapa .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes entraEtapa{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .orc-etapa,.cerca .fio.atual{animation:none}
  .opcao:hover,.orc-enviar:hover{transform:none}
}

@media(max-width:640px){
  .orc-palco{padding:30px 0 48px}
  .cerca svg{max-width:220px}
  .opcao{padding:16px;gap:13px}
  .opcao .ico{width:42px;height:42px}
  .opcao .tecla{display:none}          /* sem teclado no celular */
  .orc-dica-teclado{display:none}
  .orc-enviar{width:100%;justify-content:center}
  .orc-nav{flex-direction:column-reverse;align-items:stretch}
  .orc-voltar{justify-content:center}
}

/* ─── Montador de peças (bitola × comprimento × quantidade) ─────────────────── */
.pecas-lista{display:grid;gap:10px;margin-bottom:18px}
.pecas-lista:empty{display:none}
.peca-item{display:flex;align-items:center;gap:12px;
  background:rgba(118,196,44,.10);border:1px solid rgba(118,196,44,.35);
  border-radius:12px;padding:14px 16px;animation:entraEtapa .28s both}
.peca-txt{flex:1;font-weight:600;font-size:.98rem;font-variant-numeric:tabular-nums}
.peca-txt i{color:var(--q-verde);margin-right:9px}
.peca-x{background:none;border:0;color:var(--q-suave);font-size:1rem;
  padding:6px 8px;border-radius:8px;transition:.2s}
.peca-x:hover{color:#E0703F;background:rgba(224,112,63,.12)}

.peca-montar{background:var(--q-relevo);border:1px solid var(--q-linha);
  border-radius:14px;padding:18px}
.peca-linha{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.peca-campo label{display:block;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--q-suave);margin-bottom:7px;font-weight:600}
.peca-campo select,.peca-campo input{width:100%;font:inherit;font-size:1rem;
  padding:13px 14px;border-radius:10px;color:var(--q-texto);
  background:rgba(0,0,0,.25);border:1px solid var(--q-linha);
  font-variant-numeric:tabular-nums;transition:border-color .2s}
/* seta própria: a nativa fica invisível em fundo escuro */
.peca-campo select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--q-suave) 50%),
  linear-gradient(135deg,var(--q-suave) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.peca-campo select option{background:#152A1B;color:var(--q-texto)}
.peca-campo select:focus,.peca-campo input:focus{outline:none;border-color:var(--q-verde)}
.peca-campo input::placeholder{color:#65775F}

.peca-add{width:100%;margin-top:14px;background:transparent;color:var(--q-verde);
  border:1px dashed rgba(118,196,44,.45);border-radius:11px;padding:14px;
  font-weight:600;font-size:.94rem;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .2s,border-color .2s}
.peca-add:hover{background:rgba(118,196,44,.10);border-color:var(--q-verde)}
.peca-erro{color:#E0703F;font-size:.83rem;margin-top:10px;min-height:1.2em}
.peca-erro:empty{margin-top:0;min-height:0}

.peca-pular{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:none;border:0;color:var(--q-suave);font-size:.88rem;
  text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.peca-pular:hover{color:var(--q-verde)}

/* No resumo final, cada peça em sua linha, alinhada à direita */
.orc-resumo dd{font-variant-numeric:tabular-nums;line-height:1.7}

@media(max-width:640px){
  .peca-linha{grid-template-columns:1fr 1fr}
  .peca-qtd{grid-column:1 / -1}      /* quantidade ocupa a linha toda */
  .peca-txt{font-size:.9rem}
}