/* ==========================================================================
   O cadastro de interessado · o que o site.css não tem
   ==========================================================================
   Folha pequena de propósito: tudo o que dá para herdar da casa pública é
   herdado (`../site.css`), e aqui só entra o que é de formulário — que a raiz
   não tem. O `1rem = 1px` continua valendo, do `tokens.css`.
   ========================================================================== */

/* `.heroi--curto` mudou para o `site.css` em 03/09 (etapa 7): a `/suporte/`
   passou a usá-lo, e ele não carrega esta folha. Modificador que serve a mais
   de uma página da casa mora na folha da casa — duas cópias seriam a C4. */

.formulario { padding: 8rem 0 40rem; }

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18rem 20rem;
}
.campo-bloco--largo { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .campos { grid-template-columns: minmax(0, 1fr); }
}

.campo-bloco { display: flex; flex-direction: column; gap: 6rem; min-width: 0; }

/* A isca de robô (D32, 04/09): existe no HTML, não existe na tela. Fora da
   página por posição, e NÃO `display: none` — robô simples pula campo com
   display none, e é justamente ele que se quer que preencha. Se esta regra
   sumir, o campo aparece para todo mundo e gente passa a ser tratada como
   robô: o `render_todas.js` confere que ela está aqui, e o navegador
   (`varrer_site.js`) é quem vê de verdade. */
.campo-bloco--isca {
  position: absolute;
  left: -10000rem;
  top: auto;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
}

.etiqueta {
  font-family: var(--font-mono);
  font-size: 10rem;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--ink-3);
}
/* O ponto âmbar marca o obrigatório. Não é o botão âmbar da tela — é um glifo,
   e a regra do «um âmbar por tela» é sobre BOTÃO de ação. Mesmo assim ele é
   discreto: dois obrigatórios num formulário de sete campos. */
.obrigatorio { color: var(--invert-bg); }

.campo-bloco input,
.campo-bloco textarea {
  width: 100%;
  padding: 11rem 12rem;
  border: 1rem solid var(--line-2);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 15rem;
  line-height: 1.4;
}
.campo-bloco textarea { resize: vertical; font-size: 15rem; }
.campo-bloco input:focus,
.campo-bloco textarea:focus {
  outline: 2rem solid var(--invert-bg);
  outline-offset: 1rem;
  border-color: var(--invert-bg);
}

.nota { font-size: 13rem; color: var(--ink-3); line-height: 1.5; }

.aviso-privacidade { margin-top: 20rem; max-width: 620rem; }

.envio {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex-wrap: wrap;
  margin-top: 20rem;
}
.envio button[disabled] { opacity: .6; cursor: progress; }

.erro { color: var(--fail); font-size: 14rem; max-width: 520rem; }

.recibo {
  display: flex;
  gap: 16rem;
  align-items: flex-start;
  padding: 22rem;
  border: 1rem solid var(--ok);
  background: rgba(48, 218, 51, .07);
}
.recibo__glifo { color: var(--ok); font-size: 26rem; line-height: 1; flex: none; }
.recibo h2 { font-size: 22rem; margin-bottom: 6rem; }