/* Páginas de texto corrido (/robo, /como-funciona, /privacidade) e de formulário
   (/para-imobiliarias, /contato). Só usa as variáveis de tema.css. */

.texto {
  max-width: 44rem;
  padding-top: var(--esp-5);
}

.texto h1 {
  font-size: var(--letra-gg);
  letter-spacing: -0.01em;
}

.texto h2 {
  margin-top: var(--esp-6);
  font-size: var(--letra-g);
}

.texto p,
.texto ul,
.texto pre {
  margin-top: var(--esp-3);
}

.texto ul {
  padding-left: var(--esp-5);
  list-style: disc;
}

.texto li + li {
  margin-top: var(--esp-2);
}

.texto a {
  color: var(--cor-primaria);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.texto code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--letra-pp);
}

.texto pre {
  padding: var(--esp-3) var(--esp-4);
  overflow-x: auto;
  border-radius: var(--raio-m);
  background: var(--cor-fundo-alt);
}

.texto > .aviso {
  margin-top: var(--esp-4);
}

.texto .nota {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

/* ---------- Formulário ---------- */

.formulario {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  padding: var(--esp-4);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-g);
  scroll-margin-top: 5rem; /* abaixo da barra fixa, ao voltar com erro */
}

.formulario h2,
.formulario p,
.formulario .aviso {
  margin-top: 0;
}

.formulario label,
.formulario legend {
  display: block;
  margin-bottom: var(--esp-2);
  padding: 0;
  font-weight: 700;
}

.formulario label small {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
  font-weight: 400;
}

.formulario .opcao {
  margin-bottom: 0;
  font-weight: 400;
}

.formulario .opcao span {
  white-space: normal;
}

.formulario input[type="text"],
.formulario textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--esp-3);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
}

.formulario textarea {
  resize: vertical;
}

.formulario [aria-invalid="true"] {
  border-color: var(--cor-alerta);
}

.formulario .erro-campo {
  margin-top: var(--esp-2);
  color: var(--cor-alerta);
  font-size: var(--letra-pp);
  font-weight: 700;
}

.formulario .erro-geral {
  padding: 0;
  background: none;
  color: var(--cor-alerta);
  font-weight: 700;
}

.formulario .botao {
  justify-self: start;
}