/* ─────────────────────────────────────────────────────────────
   Tela de entrada: marca de um lado, formulário do outro.
   As proporções do painel azul saem do frame do Figma (3775×2597),
   convertidas em porcentagem, então a composição é a mesma em
   qualquer tamanho de tela.
   ───────────────────────────────────────────────────────────── */

/* nome próprio: a classe "portao" do estilo.css mexe em altura e ainda
   pinta campo de branco, e essa herança vinha bagunçando a centragem */
body.entradaTela {
  margin: 0;
  padding: 24px;
  background: var(--papel);
  min-height: 100vh;    /* base para quem não conhece dvh */
  min-height: 100dvh;   /* janela realmente visível, sem a barra do celular */
  display: grid;
  place-items: center;  /* centra nos dois eixos */
  align-content: center;
}

.entrada {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linha);
  border-radius: 5px;
  overflow: hidden;
  background: var(--papel-fundo);
}

/* ── lado da marca ── */
.marcaPainel {
  position: relative;
  background: var(--marca);
  min-height: 480px;
  overflow: hidden;
}
.marcaPainel__guias { position: absolute; inset: 0; }
.marcaPainel__guias i {
  position: absolute;
  background: rgba(255, 255, 253, 0.28);
}
/* verticais em 49% e 92,6%, horizontais em 75% e 92,2%: as mesmas do frame */
.marcaPainel__guias i:nth-child(1) { top: 0; bottom: 0; left: 49%; width: 1px; }
.marcaPainel__guias i:nth-child(2) { top: 0; bottom: 0; left: 92.6%; width: 1px; }
.marcaPainel__guias i:nth-child(3) { left: 0; right: 0; top: 75%; height: 1px; }
.marcaPainel__guias i:nth-child(4) { left: 0; right: 0; top: 92.2%; height: 1px; }

.marcaPainel__logo {
  position: absolute;
  left: 50%;
  top: 70.9%;
  width: 41.5%;
  color: #FFFFFD;
}
.marcaPainel__logo svg { display: block; width: 100%; height: auto; }

.marcaPainel__dizer {
  position: absolute;
  left: 8%;
  top: 9%;
  width: 74%;
  color: #FFFFFD;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-wrap: balance;
}
.marcaPainel__dizer small {
  display: block;
  margin-top: 12px;
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.78;
  letter-spacing: 0;
}

/* ── lado do formulário ── */
/* Ritmo vertical em três blocos: cabeça, campos, ação. O espaço entre
   blocos é maior que o espaço dentro deles, que é o que faz a coluna
   parecer organizada em vez de uma pilha de itens soltos. */
.forma {
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.forma__cabeca { margin-bottom: 26px; }
.forma__titulo {
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.forma__apoio { color: var(--tinta-60); font-size: 13.5px; margin: 5px 0 0; }

.forma__campos { display: grid; gap: 16px; }
.campoEntrada { display: grid; gap: 6px; }
.campoEntrada label { font-size: 12.5px; color: var(--tinta-60); }
.campoEntrada input {
  background: var(--caixa);
  border: 1px solid var(--linha);
  border-radius: 5px;
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
  width: 100%;
}
.campoEntrada input:focus { outline: 0; border-color: var(--marca); }
.campoEntrada input[aria-invalid="true"] { border-color: var(--erro, #FF6B81); }
/* sem erro, sem linha reservada: era ela que abria buraco entre os campos */
.campoEntrada__erro { font-size: 12px; color: var(--erro, #FF6B81); line-height: 1.35; }
.campoEntrada__erro:empty { display: none; }

.btEntrar {
  width: 100%;
  margin-top: 22px;
  border: 0;
  border-radius: 5px;
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
}
.btEntrar:hover { background: var(--marca-funda); }
.btEntrar:disabled { opacity: 0.6; cursor: default; }

.forma__pe {
  font-size: 12.5px; color: var(--tinta-35); line-height: 1.5;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--linha);   /* vira rodapé, não linha solta */
}

@media (max-width: 820px) {
  .entrada { grid-template-columns: 1fr; }
  .marcaPainel { min-height: 210px; }
  .marcaPainel__dizer { position: static; padding: 26px 24px 0; width: auto; }
  .marcaPainel__logo { top: auto; bottom: 8%; left: 24px; width: 42%; }
  .marcaPainel__guias i:nth-child(3) { top: 62%; }
  .marcaPainel__guias i:nth-child(4) { top: 88%; }
}

/* escritório e OAB dividem a linha: são secundários, não merecem
   uma linha cada um num formulário que precisa caber sem rolagem */
.campoEntrada--par { grid-template-columns: 1fr 1fr; gap: 12px; }
.campoEntrada--par > div { display: grid; gap: 6px; }