/* ============================================================
   Formulário de contato.

   Substitui os botões de e-mail e telefone: quem decide às onze da
   noite não abre o cliente de e-mail, preenche um formulário.

   Houve atalhos de WhatsApp, Text e Call acima do formulário.
   Removidos a pedido — o telefone e o e-mail continuam no rodapé,
   para quem prefere falar direto.
   ============================================================ */

.form {
  width: 100%;
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: left;
}

.campo { margin-bottom: 1.1rem; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.campo label {
  display: block;
  font-family: var(--body);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .45rem;
}
.campo label i { font-style: normal; color: var(--sage-deep); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--body);
  font-weight: 300;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: .7rem .85rem;
  transition: border-color .3s var(--ease);
}
.campo textarea { line-height: 1.6; resize: vertical; min-height: 6rem; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--sage-deep);
}
/* Campo recusado na validação: a borda vermelha não basta sozinha para
   quem não distingue cores, então a mensagem abaixo diz o que falta. */
.campo.ruim input,
.campo.ruim select { border-color: #a4553f; }
.campo .erro {
  display: none;
  margin-top: .35rem;
  font-size: .75rem;
  color: #a4553f;
}
.campo.ruim .erro { display: block; }

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6259' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 10px;
  padding-right: 2.2rem;
}

/* Armadilha de robô. Fora da tela em vez de display:none, porque
   preenchedor automático ignora o que está escondido de todo. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-rodape {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.form-rodape .btn { border-radius: 0; }
.form-aviso { font-size: .82rem; color: var(--taupe); margin: 0; max-width: none; }
.form-aviso.ruim { color: #a4553f; }

/* A confirmação é o que sobra na tela depois do envio, então precisa ter
   peso de mensagem e não de rodapé de formulário. */
.form-aviso.ok {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  max-width: 32ch;
  margin: 0 auto;
}

.form-alt {
  margin-top: 1.25rem;
  font-size: .82rem;
  color: var(--taupe);
  max-width: none;
}
.form-alt a { border-bottom: 1px solid var(--hairline); }
.form-alt a:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* Depois do envio o formulário some e sobra a confirmação: manter os
   campos preenchidos na tela convida a enviar duas vezes.

   `min-height` guarda parte da altura que os campos ocupavam. Sem isso a
   seção encolhe de uma vez, a página inteira sobe, e quem enviou é jogado
   para o rodapé sem entender o que aconteceu. */
.form.enviado {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Só o bastante para a seção não desabar de uma vez e jogar a página
     para o rodapé. Mais que isto abre um vão vazio sob a frase de abertura. */
  min-height: 10rem;
}
.form.enviado .campo,
.form.enviado .form-alt,
.form.enviado .campo-par,
.form.enviado .form-rodape .btn { display: none; }
.form.enviado .form-rodape {
  margin-top: 0;
  justify-content: center;
}

.oculto { display: none !important; }

@media (max-width: 620px) {
  .campo-par { grid-template-columns: 1fr; gap: 0; }
}