/* Inicio de sesión — panel verde + formulario (lienzo "Inicio de sesión"). */
.login { display: flex; flex-wrap: wrap; min-height: 100vh; }

.login-hero {
  flex: 1 1 520px; min-width: 0; padding: 64px;
  background: var(--sage); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.login-hero .brand { color: #fff; }
.brand-mark-gold { background: var(--gold-soft); color: var(--sage-dark); width: 44px; height: 44px; font-size: 24px; }
.login-hero .brand-name { font-size: 26px; }
.login-hero-copy { max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.login-hero-copy h1 { font-size: 52px; font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
.login-hero-copy p { font-size: 17px; line-height: 1.55; color: var(--sage-soft); }
.login-hero-foot { font-size: 13px; color: #DDE8DD; }

.login-panel { flex: 1 1 440px; min-width: 0; padding: 48px; display: flex; align-items: center; justify-content: center; background: var(--ivory); }
.login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.login-form h2 { font-size: 32px; }
.login-form .input { min-height: 48px; }

@media (max-width: 640px) {
  .login-hero { padding: 32px 24px; gap: 24px; }
  .login-hero-copy h1 { font-size: 34px; }
  .login-panel { padding: 32px 20px; }
}