/* Tela de login: arte em verde-floresta à esquerda, formulário em creme à direita. */
.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.login-arte {
  position: relative; overflow: hidden; color: #F3E6C8;
  background: radial-gradient(120% 90% at 0% 0%, #2C5E47 0%, #1F4D3A 40%, #14382A 75%, #0F2C21 100%);
  display: flex; align-items: center; padding: 56px;
}
.login-arte::before, .login-arte::after {
  content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(201,168,106,.22);
}
.login-arte::before { width: 520px; height: 520px; right: -200px; top: -160px; box-shadow: 0 0 0 46px rgba(201,168,106,.04), 0 0 0 92px rgba(201,168,106,.025); }
.login-arte::after  { width: 300px; height: 300px; left: -120px; bottom: -120px; }
.arte-conteudo { position: relative; z-index: 1; max-width: 460px; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 64px; }
.logo-marca { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.logo-nome { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.logo-sub { font-size: 10px; color: #A7B8A9; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
blockquote p { font-family: var(--serif); font-size: 38px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
blockquote em { color: #E7CF9E; font-style: italic; }
.destaques { list-style: none; margin-top: 40px; display: grid; gap: 14px; color: #C8D4C2; }
.destaques li { display: flex; gap: 12px; align-items: center; }
.destaques svg.i { color: #C9A86A; }

.login-form { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.cartao-login { width: 100%; max-width: 380px; }
.cartao-login h1 { margin-bottom: 8px; }
.intro { margin-bottom: 26px; }
.entrar { width: 100%; height: 46px; font-size: 14px; margin-top: 6px; }
.rodape-login { font-size: 12px; text-align: center; margin-top: 22px; }
.marca-mobile { display: none; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-arte { display: none; }
  .login-form { align-items: start; padding-top: max(56px, env(safe-area-inset-top)); }
  .marca-mobile { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
  .marca-mobile .logo-nome { color: var(--txt); }
  .marca-mobile .logo-marca {
    padding: 6px; border-radius: 12px; filter: none; box-shadow: 0 6px 16px rgba(20,56,42,.22);
    background: linear-gradient(145deg, #2C5E47, #1F4D3A 55%, #14382A);
  }
}

.codigo-mfa { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; text-align: center; height: 54px; }