/* ═════════════════════════════════════════════════════════════════════
   Telas de entrada (login, trocar senha, redefinir senha).
   Painel preto à esquerda com a promessa do produto, formulário à direita.
   ═════════════════════════════════════════════════════════════════════ */
.entrada {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Painel preto: o mesmo preto da sidebar da área logada. */
.entrada-lado {
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.entrada-lado .marca { color: #fff; }
.entrada-lado h1 { font-size: clamp(32px, 3.6vw, 52px); }
.entrada-lado h1 em { font-style: normal; color: var(--color-primary); }
.entrada-lado p { max-width: 36ch; font-size: 18px; color: rgba(255, 255, 255, 0.82); }
.entrada-lado .miudo { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.entrada-forma {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.entrada-caixa { width: min(400px, 100%); margin-inline: auto; }
.entrada-caixa h2 { font-size: 34px; margin-bottom: var(--space-6); }
.entrada-caixa .field { margin-bottom: var(--space-5); }
.entrada-rodape { margin-top: var(--space-6); font-size: 14px; color: var(--color-text-2); }

@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-lado { padding: var(--space-6); }
  .entrada-lado p { display: none; }
  .entrada-lado .miudo { display: none; }
}