/* A caixa cabe na coluna de leitura, nao no container: a margem de
   procedencia ja comeu a esquerda. */
.bl-contato__caixa { max-width: 46rem; margin-top: var(--bl-e5); }
.bl-contato__nota { color: var(--bl-texto-fraco); }
/* Aviso do <noscript>: so existe com JS desligado, e ai tem que ser lido. */
.bl-contato__aviso {
  margin: var(--bl-e4) 0 0; padding: var(--bl-e3);
  border: 1px solid var(--bl-borda); border-radius: 10px;
  background: var(--bl-fundo); font-size: .9375rem;
}
/* O marcador do checkbox e desenhado pelo navegador. Sem accent-color ele sai
   #005CC8 — o azul do Chrome — sobre o creme da secao (medido em pixel).
   Ambar-700 preenchido da 4,29:1 sobre o #FBF1E0 daqui, acima do piso de 3:1
   de objeto grafico, e o navegador escolhe o tique branco (4,80:1 sobre ele).
   E o mesmo ambar-700 preenchido do marcador de #objecoes: os dois unicos
   marcadores de ESTADO da pagina passam a ser a mesma cor e o mesmo peso.
   Herda, entao vale para qualquer controle novo do formulario.
   O caret NAO entra aqui: `caret-color: auto` ja resolve para o `color` do
   campo, que e grafite-900 — medido, ja estava dentro do kit. */
.bl-contato .bl-form { margin-top: 0; accent-color: var(--bl-ambar-700); }
.bl-contato .bl-form__par { display: grid; gap: var(--bl-e3); }
@media (min-width: 640px) { .bl-contato .bl-form__par { grid-template-columns: 1fr 1fr; } }
.bl-contato .bl-form__campo { margin: 0 0 var(--bl-e3); }
.bl-contato .bl-form__campo label {
  display: block; margin-bottom: var(--bl-e1);
  font-family: var(--bl-fonte-mono); font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bl-grafite-700);   /* 9,37:1 na nevoa */
}
.bl-contato .bl-form__campo input,
.bl-contato .bl-form__campo select,
.bl-contato .bl-form__campo textarea {
  width: 100%; padding: .8em .9em; border-radius: 10px;
  border: 1px solid var(--bl-grafite-300); background: var(--bl-fundo);
  color: var(--bl-texto); font: inherit; font-size: .9375rem;
}
.bl-contato .bl-form__campo textarea { resize: vertical; }
.bl-contato .bl-form__campo [aria-invalid="true"] { border-color: #8C261A; }
/* MEDIDO, nao calculado de cabeca: 13px #6B6C74 sobre o #FBF1E0 desta
   secao da 4,66:1 — passa AA por 0,16. O fundo aqui e ambar-100, nao a
   faixa --alt; supor --alt teria dado um numero falso e folgado.
   Mesma razao ja vale para .bl-form__ajuda, que sempre esteve assim. */
.bl-contato .bl-form__opcional {
  font-weight: 400; font-size: .8125rem; color: var(--bl-texto-fraco);
}
.bl-contato .bl-form__ajuda {
  display: block; margin-top: var(--bl-e1);
  font-size: .8125rem; color: var(--bl-texto-fraco);
}
.bl-contato .bl-form__consent {
  display: flex; gap: var(--bl-e2); align-items: flex-start;
  margin: var(--bl-e3) 0 var(--bl-e4); font-size: .9375rem;
}
/* 13x13 era o padrao do navegador. O <label for> ja ampliava o clique,
   mas quem mira mira na caixa, e 24 e o piso da 2.5.8. */
.bl-contato .bl-form__consent input {
  width: 1.5rem; height: 1.5rem; margin-top: .1em; flex: none;
  accent-color: var(--bl-ambar-700);
}
/* Isca: fora da tela, fora do foco, fora do leitor de tela. Nao usa
   display:none — robo ignora campo escondido assim. */
.bl-contato .bl-form__isca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.bl-contato .bl-form__estado { margin-top: var(--bl-e3); font-size: .9375rem; min-height: 1.5em; }
/* Cartao branco embaixo do estado. A secao e --alt (#F7F7F9) e ali o
   ambar-700 da 4,49:1 a 15px — reprova AA. Sobre o cartao da 4,80:1, e o
   numero deixa de depender de a secao continuar alternada. So aparece quando
   ha estado: no carregamento o atributo nem existe, entao nada de caixa vazia.
   O [data-tipo=""] do "Enviando..." cai aqui de proposito. */
.bl-contato .bl-form__estado[data-tipo] {
  padding: var(--bl-e2) var(--bl-e3); border-radius: 10px;
  border: 1px solid var(--bl-borda); background: var(--bl-fundo);
}
.bl-contato .bl-form__estado[data-tipo="erro"] { color: #8C261A; }   /* 8,72:1 no cartao */
.bl-contato .bl-form__estado[data-tipo="ok"] { color: var(--bl-ambar-700); }   /* 4,80:1 no cartao */