/* ==========================================================================
   As telas de entrada: login, registro, confirmação, recuperação de senha.

   Só o ARRANJO mora aqui. Cor, sombra, tipografia e componentes vêm de
   tokens.css e componentes.css — se aparecer um valor cru neste arquivo,
   é erro.
   ========================================================================== */

html, body { height: 100%; }

body {
  display: grid;
  grid-template-columns: 46% 1fr;
  min-height: 100vh;
}

/* ---- lado do formulário ---- */
.lado-forma {
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-10) var(--e-8);
}
.forma { width: 100%; max-width: 372px; }
.forma h1 { font: var(--t-h1); letter-spacing: var(--track-h1); margin: 0 0 6px; }
.forma .sub { font: var(--t-corpo-2); color: var(--tinta-2); margin: 0 0 var(--e-6); }
.forma .sub b { color: var(--tinta); font-weight: 600; }

.rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; }
.rotulo-linha .link { font: var(--t-micro); font-weight: 600; }

.pe-forma { text-align: center; font: var(--t-corpo-2); color: var(--tinta-2); margin-top: var(--e-6); }

.simbolo-grande { display: flex; justify-content: center; margin-bottom: var(--e-5); }
.centro { text-align: center; }

/* ---- lado da marca ---- */
/* A vitrine e o carrossel são componentes: estão em componentes.css. Aqui só
   a altura, que é coisa desta tela. */
.vitrine { min-height: 100vh; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .vitrine { display: none; }
  .lado-forma { padding: var(--e-8) var(--e-5); }
}