:root {
  --verde: #14352a;
  --verde-escuro: #0d2019;
  --ouro: #dfb15f;
  --ouro-escuro: #b0793a;
  --areia: #f6f5f2;
  --tinta: #17201c;
  --tinta-suave: #4a534e;
  --cinza: #6b7570;
  --linha: rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display autoral (ex.:
   .orc-btn-voltar { display: inline-flex } derrotava o hidden do JS). */
[hidden] { display: none !important; }

html { background: var(--verde-escuro); }
body {
  margin: 0;
  background: #ffffff;
  color: var(--tinta);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verde); text-decoration: none; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 3px; }

/* Mobile primeiro: coluna única, faixa -> formulário -> selos. */
.orc { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.orc-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  overflow: hidden;
  background: var(--verde);
}
.orc-aside-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.orc-aside-veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,32,25,0.68) 0%, rgba(13,32,25,0.86) 100%);
}
.orc-aside-topo, .orc-selos--aside { position: relative; z-index: 2; }

.orc-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.orc-voltar:hover { color: var(--ouro); }

.orc-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.8px;
  color: var(--ouro); margin: 0 0 10px;
}
.orc-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); }

.orc-titulo {
  font-size: clamp(26px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.026em;
  font-weight: 700; color: #ffffff; margin: 0; text-wrap: balance;
}
.orc-titulo em { font-style: normal; color: var(--ouro); }

.orc-sub {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  margin: 14px 0 0; max-width: 46ch;
}

.orc-selos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.orc-selos--aside { display: none; }
.orc-selos--rodape {
  background: var(--areia); padding: 28px 20px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,0,0,0.08);
}
.orc-selo { display: flex; gap: 12px; align-items: flex-start; }
.orc-selo-check {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ouro); color: var(--verde);
}
.orc-selo-titulo { margin: 0; font-size: 15px; font-weight: 700; }
.orc-selo-desc { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--tinta-suave); }
.orc-selos--aside .orc-selo-titulo { color: #ffffff; }
.orc-selos--aside .orc-selo-desc { color: rgba(255,255,255,0.7); }

.orc-main {
  flex: 1;
  padding: 32px 20px 40px;
  min-width: 0; /* impede que conteúdo largo estoure o flex item */
}
.orc-h2 {
  font-size: clamp(26px, 5.6vw, 42px); line-height: 1.12; letter-spacing: -0.022em;
  font-weight: 700; margin: 0 0 28px;
}
.orc-h2 span { color: var(--cinza); }

.orc-noscript {
  background: var(--areia); border-left: 3px solid var(--ouro);
  padding: 16px; font-size: 15px; line-height: 1.6;
}
.orc-noscript a { font-weight: 700; }

.orc-etapas { list-style: none; display: flex; gap: 0; margin: 0 0 28px; padding: 0; }
.orc-etapas li { flex: 1; min-width: 0; }
.orc-etapa-aba {
  width: 100%; min-height: 56px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 10px 8px 12px; border: 0; border-top: 2px solid var(--linha);
  background: transparent; text-align: left; cursor: pointer;
  font-family: 'Manrope', sans-serif;
}
.orc-etapa-aba[aria-current="step"] { border-top-color: var(--tinta); }
.orc-etapa-aba.orc-concluida { border-top-color: var(--ouro); }
.orc-etapa-aba:disabled { cursor: default; }
.orc-etapa-num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px;
  color: var(--cinza);
}
.orc-etapa-nome { font-size: 15px; font-weight: 500; color: var(--cinza); }
.orc-etapa-aba[aria-current="step"] .orc-etapa-nome { color: var(--tinta); font-weight: 600; }

/* Abaixo de 560px três rótulos não cabem: mostra só o da etapa ativa. */
@media (max-width: 559px) {
  .orc-etapa-nome { display: none; }
  .orc-etapa-aba[aria-current="step"] .orc-etapa-nome { display: block; }
  .orc-etapa-num { font-size: 11px; }
}

.orc-etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.orc-legend { padding: 0; margin: 0 0 20px; font-size: 13px; font-weight: 700; color: var(--cinza); }
.orc-legend:focus { outline: none; }

.orc-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08);
}
.orc-contador {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.2px;
  color: var(--cinza); order: 3; width: 100%;
}
.orc-btn-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 4px; border: 0; background: transparent;
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: var(--verde);
  cursor: pointer;
}
.orc-btn-proximo {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin-left: auto; padding: 14px 28px;
  border: 0; border-radius: 50px; background: var(--ouro); color: var(--verde);
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: opacity 200ms ease;
}
.orc-btn-proximo:hover { opacity: 0.92; }
.orc-btn-proximo:active { transform: scale(0.98); }

@media (min-width: 560px) {
  .orc-contador { order: 0; width: auto; }
  .orc-btn-proximo { margin-left: auto; }
}

.orc-grade { display: grid; grid-template-columns: 1fr; gap: 22px 24px; }
@media (min-width: 620px) { .orc-grade { grid-template-columns: 1fr 1fr; } }

.orc-campo { min-width: 0; display: flex; flex-direction: column; }
.orc-rotulo {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px;
  color: var(--cinza); margin-bottom: 8px;
}
.orc-input {
  width: 100%; min-height: 48px;
  padding: 10px 2px; border: 0; border-bottom: 1px solid var(--linha);
  border-radius: 0; background: transparent; color: var(--tinta);
  font-family: 'Manrope', sans-serif;
  /* 16px é obrigatório: abaixo disso o Safari do iOS dá zoom ao focar. */
  font-size: 16px;
  appearance: none; -webkit-appearance: none;
}
.orc-input::placeholder { color: #a8b0ac; }
.orc-input:focus { outline: none; border-bottom-color: var(--verde); border-bottom-width: 2px; }
.orc-input[aria-invalid="true"] { border-bottom-color: #c0392b; }
select.orc-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  padding-right: 26px;
}
.orc-erro { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #c0392b; }

.orc-ambientes { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
@media (min-width: 620px) { .orc-ambientes { grid-template-columns: 1fr 1fr; } }

/* O <label> inteiro é o alvo de toque — a caixinha nativa sozinha tem ~13px. */
.orc-ambiente {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--linha); border-radius: 10px;
  cursor: pointer; transition: border-color 200ms ease, background 200ms ease;
}
.orc-ambiente:hover { border-color: var(--verde); }
.orc-ambiente input { position: absolute; opacity: 0; width: 0; height: 0; }
.orc-ambiente-caixa {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border: 1.5px solid var(--linha); border-radius: 5px;
  color: transparent; transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.orc-ambiente-nome {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px;
  color: var(--tinta-suave);
}
.orc-ambiente:has(input:checked) { border-color: var(--verde); background: var(--areia); }
.orc-ambiente:has(input:checked) .orc-ambiente-caixa {
  background: var(--verde); border-color: var(--verde); color: var(--ouro);
}
.orc-ambiente:has(input:checked) .orc-ambiente-nome { color: var(--tinta); font-weight: 600; }
.orc-ambiente:has(input:focus-visible) { outline: 2px dashed var(--verde); outline-offset: 3px; }

.orc-detalhes { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 0; }
.orc-detalhes:empty { margin: 0; }
.orc-campo--largo { margin-top: 26px; }
.orc-textarea { min-height: 110px; resize: vertical; line-height: 1.55; padding-top: 12px; }
.orc-nota { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cinza); }

.orc-revisao { margin: 0; }
.orc-revisao-linha {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (min-width: 620px) {
  .orc-revisao-linha { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
}
.orc-revisao dt {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px;
  color: var(--cinza);
}
.orc-revisao dd { margin: 0; font-size: 16px; line-height: 1.55; word-break: break-word; }
.orc-revisao dd.orc-vazio { color: var(--cinza); font-style: italic; }
.orc-revisao dd ul { margin: 0; padding-left: 18px; }

/* Desktop: duas colunas, painel grudado. */
@media (min-width: 900px) {
  .orc { flex-direction: row; }
  .orc-aside {
    position: sticky; top: 0;
    width: 50%; flex-shrink: 0;
    height: 100vh; height: 100dvh;
    justify-content: space-between;
    padding: 48px;
  }
  .orc-selos--aside { display: flex; }
  .orc-selos--rodape { display: none; }
  .orc-main { padding: 64px 56px 80px; }
}
@media (min-width: 1280px) {
  .orc-main { padding: 72px 80px 96px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}