/* Login (Rodada A): marca à esquerda, formulário à direita; no celular a marca vira a
   faixa escura do topo e o formulário sobe como folha arredondada. */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-body);
}

.login-brand {
  background: linear-gradient(180deg, #081028 0%, #0d1a42 100%);
  color: #eef1fa;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
}

.login-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 19px/1 var(--font-sans);
}

.login-brand__logo svg {
  width: 34px;
  height: 34px;
  display: block;
}

.login-brand__pitch {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-brand__title {
  color: #eef1fa;
  font: 600 52px/1.05 var(--font-sans);
  letter-spacing: -.03em;
  max-width: 520px;
  margin: 0;
}

.login-brand__accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #9fb0ff;
  font-size: 1.15em;
  letter-spacing: 0;
}

.login-brand__sub {
  font: 400 16px/1.5 var(--font-sans);
  color: #a9b4d6;
  max-width: 440px;
  margin: 20px 0 0;
}

.login-brand__copy {
  font: 400 12px/1 var(--font-sans);
  color: #6f7ba3;
  margin: 0;
}

.login-card {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 448px;
  padding: 48px 24px;
}

.login-card__logo {
  margin-bottom: 24px;
}

.login-card__logo h1 {
  font: 700 30px/1.1 var(--font-sans);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.login-card__logo p {
  font: 400 15px/1.4 var(--font-sans);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.login-card .form-label { font-weight: 600; font-size: 13px; }

.login-card .form-input {
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
  background: var(--color-surface);
}

.login-card .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.login-card .btn--primary {
  height: 50px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
}

.login-card__footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.login-card__footer p {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .login-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: #0d1a42;
  }

  .login-brand { padding: 40px 24px 36px; gap: 18px; }
  .login-brand__title { font-size: 32px; line-height: 1.1; }
  .login-brand__sub,
  .login-brand__copy { display: none; }

  .login-card {
    align-self: stretch;
    max-width: none;
    background: var(--color-body);
    border-radius: 28px 28px 0 0;
    padding: 28px 22px;
  }

  .login-card .form-input { height: 52px; border-radius: 14px; }
  .login-card .btn--primary { height: 54px; border-radius: 14px; }
}