/* Tela de acesso e troca de senha (layout em duas colunas da v1.20, versão clara). */
.login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; background: #f6f7f8; }

.story {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 64px; overflow: hidden;
  background: #f4f5f6; color: #263d56; border-right: 1px solid #e5e8eb;
}
.story::after {
  content: ""; position: absolute; right: -225px; bottom: -235px;
  width: 460px; height: 460px; border: 1px solid #e3e7eb; border-radius: 50%; pointer-events: none;
}
.story .brand { position: relative; z-index: 1; flex-direction: row; align-items: center; gap: 15px; padding: 0; border: 0; }
.story .brand-logo { display: block; max-width: 154px; padding: 9px; background: var(--surface); border: 1px solid #eef0f2; border-radius: var(--radius); }
.brand-rule { width: 2px; height: 28px; background: #d6b54d; }
.brand-area { color: #7c8997; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 2.1px; line-height: 1.6; text-transform: uppercase; }

.story-copy { position: relative; z-index: 1; max-width: 400px; margin: 72px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #9c8648; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 23px; height: 2px; background: #d8bb62; }
.story h1 { margin: 22px 0; color: #243d57; font-size: 45px; font-weight: 600; letter-spacing: -1.6px; line-height: 1.12; }
.story h1 span { color: #617b94; }
.story p { max-width: 355px; margin: 0; color: #788593; font-size: var(--fs-base); line-height: 1.85; }
.story-footer { position: relative; z-index: 1; color: #9ba3ac; font-size: 11px; }

.form-side { display: flex; align-items: center; justify-content: center; padding: 50px 40px; background: var(--surface); }
.login-card { width: 100%; max-width: 430px; padding: 34px; background: var(--surface); border: 1px solid #e8ebee; border-radius: var(--radius-lg); box-shadow: 0 8px 32px #223b5210; }
.login-logo { display: block; width: auto; max-width: 120px; height: auto; margin-bottom: 22px; }
.login-card h2 { margin-bottom: 9px; color: #2f465e; font-size: 25px; font-weight: 700; letter-spacing: -.6px; }
.intro { margin: 0 0 26px; color: #65788b; font-size: var(--fs-md); line-height: 1.7; }

.enter {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; min-height: 47px; margin-top: 4px;
  background: #f5e2a2; color: #594d28; border: 0; border-radius: 9px; font-size: var(--fs-md); font-weight: 750;
}
.enter:hover { background: #efda8c; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 78px; }
.pw-toggle { position: absolute; top: 7px; right: 7px; height: 34px; padding: 0 9px; background: #f5f7fa; color: #5c6f84; border: 0; border-radius: 6px; font-size: 11px; }
.privacy { margin-top: 23px; padding-top: 20px; border-top: 1px solid #edf1f6; color: #718195; font-size: 11px; line-height: 1.7; }

.onboarding { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 30px 20px; background: #f5f6f8; }
.onboarding .login-card { max-width: 470px; }

@media (max-width: 1000px) {
  .story { padding: 40px; }
  .story h1 { font-size: 38px; }
  .form-side { padding: 32px; }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .story { min-width: 0; padding: 20px 24px; border-right: 0; border-bottom: 1px solid #e6e9ec; }
  .story .brand-logo { max-width: 96px; padding: 6px; border-radius: var(--radius-sm); }
  .brand-area { font-size: 8px; }
  .story-copy { margin: 14px 0 0; max-width: none; }
  .story h1 { max-width: 350px; margin: 12px 0 0; font-size: 24px; line-height: 1.2; }
  .story h1 br { display: none; }
  .story p, .story-footer { display: none; }
  .form-side { min-width: 0; padding: 22px 18px 30px; align-items: flex-start; background: #fafbfc; }
  .login-card { max-width: 440px; padding: 25px; }
  .login-logo { display: none; }
}
@media print {
  .login-shell { display: none; }
}