/* O orçamento online (orcar.php). Carrega depois de tema.css e site.css: a
   mesma tipografia e as mesmas cores do site — nenhuma cor nova aqui. Uma
   tela só, sem distração: a explicação curta à esquerda, o formulário à
   direita; no celular, um embaixo do outro. */

.pagina-orcar { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }

.orcar-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--site-margem); background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.orcar-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; min-height: 44px; }
.orcar-marca span { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .08em; }
.orcar-voltar { color: var(--texto-suave); font-size: .9375rem; min-height: 44px; display: inline-flex; align-items: center; }

.orcar {
  flex: 1; width: 100%; max-width: var(--site-largura); margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--site-margem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.orcar-intro h1 {
  font-family: var(--fonte-titulo); font-weight: 700; color: var(--titulo-secao);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; text-wrap: balance;
}
.orcar-intro .lead { margin-top: 1.25rem; font-size: 1.0625rem; color: var(--texto-suave); max-width: 32rem; }
.orcar-passos { margin-top: 2rem; display: grid; gap: 0; counter-reset: passo; border-top: 1px solid var(--borda-forte); }
.orcar-passos li { counter-increment: passo; display: grid; grid-template-columns: 2.25rem 1fr; padding: .875rem 0; border-bottom: 1px solid var(--borda); }
.orcar-passos li::before { content: counter(passo); grid-row: span 2; font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: 1.1; color: var(--texto-fraco); }
.orcar-passos b { font-family: var(--fonte-titulo); }
.orcar-passos span { color: var(--texto-suave); font-size: .9375rem; }
.orcar-nota { margin-top: 1.5rem; font-size: .875rem; color: var(--texto-fraco); max-width: 30rem; }

/* o modelo visual do projeto, no lugar da explicação depois que o PDF é lido */
.orcar-modelo h2 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--titulo-secao); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.orcar-modelo-sub { margin: .5rem 0 1.25rem; color: var(--texto-suave); }
.orcar-modelo-fora { margin-top: 1rem; font-size: .875rem; color: var(--texto-fraco); }
.orcar-modelo-fora:empty { display: none; }
.orcar-modelo .modelo-mini figcaption { font-family: var(--fonte-texto); }

.orcar-cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 2rem);
}
#orcar-form { display: flex; flex-direction: column; gap: 1.125rem; }
#orcar-form[hidden], #orcar-resultado[hidden] { display: none; }
.campo-bloco { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo-bloco label, .campo-bloco legend, .campo-bloco .rotulo { font-weight: 700; font-size: .9375rem; padding: 0; }
.campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.orcar input[type=text], .orcar input[type=email], .orcar input[type=tel] {
  width: 100%; min-height: 46px; padding: 0 12px; font: inherit; font-size: 1rem; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.orcar input:focus-visible { outline: 2px solid var(--accent-marca); outline-offset: 1px; border-color: var(--accent); }
.orcar [aria-invalid="true"] { border-color: var(--vermelho) !important; }
.campo-dica { margin-top: -10px; font-size: .8125rem; color: var(--texto-fraco); }


.orcar-solta {
  display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 16px;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--texto-fraco); cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.orcar-solta svg { flex-shrink: 0; }
.orcar-solta span { display: flex; flex-direction: column; min-width: 0; }
.orcar-solta b { color: var(--texto); overflow-wrap: anywhere; }
.orcar-solta small { font-size: .8125rem; }
.orcar-solta:hover, .orcar-solta:focus-visible, .orcar-solta.sobre { border-color: var(--accent); background: var(--accent-fundo); outline: none; }
.orcar-solta.com-arquivo { border-style: solid; border-color: var(--accent-borda); color: var(--accent-claro); }

.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--texto-suave); cursor: pointer; }
.aceite input { margin-top: 4px; accent-color: var(--accent); }
.orcar-erro { min-height: 1.4em; color: var(--vermelho); font-size: .9375rem; }
.orcar-erro:empty { min-height: 0; }
#orcar-form .btn { align-self: flex-start; }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); }
@media (hover: hover) and (pointer: fine) { .btn-secundario:hover { background: var(--superficie-alt); } }

#orcar-resultado:focus { outline: none; }
.orcar-rotulo { font-size: .875rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; }
.orcar-faixa { margin-top: .5rem; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.orcar-faixa span { font-weight: 400; color: var(--texto-fraco); font-size: .6em; }
.orcar-resumo { margin-top: .875rem; font-size: 1.0625rem; color: var(--texto-suave); }
.orcar-ressalva { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borda); font-size: .875rem; color: var(--texto-fraco); }
.orcar-obrigado { margin-top: 1.25rem; color: var(--texto); }
.orcar-acoes { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 10px; }

.orcar-rodape { padding: 18px var(--site-margem); text-align: center; font-size: .8125rem; color: var(--texto-fraco); border-top: 1px solid var(--borda); background: var(--superficie); }

@media (max-width: 860px) {
  .orcar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .campo-dupla { grid-template-columns: 1fr; }
  #orcar-form .btn, .orcar-acoes .btn { width: 100%; }
}