/* Lux Zero — login em uma tela, sem sacrificar acessibilidade.
   PC: altura da viewport. Celular: banner editorial reduzido.
   Em telas baixas/teclado aberto, rolar é melhor do que cortar ações. */

@media (min-width:761px) {
  .auth-layout {
    grid-template-columns:minmax(420px,43.5%) minmax(0,1fr);
    height:100svh;min-height:0;overflow:hidden;
  }
  .login-side {
    height:100svh;min-height:0;overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(180,151,252,.28) transparent;
    padding-block:clamp(13px,2.4svh,26px);
  }
  .experience-panel {height:100svh;min-height:0}
  .auth-center {flex:0 0 auto;margin:auto 0;padding:clamp(10px,1.7svh,20px) 0}
  .auth-title {font-size:clamp(34px,2.8vw,42px);line-height:1.09;margin-top:10px}
  .auth-lead {margin-bottom:17px;line-height:1.55}
  .auth-form {gap:12px}
  .splitter {margin:16px 0 12px}
  .demo-link {margin-top:12px}
  .auth-footer {padding-top:12px}
}
@media (min-width:761px) and (max-height:790px) {
  .login-side {padding-block:13px}
  .brand-row {min-height:38px}
  .brand-lockup {min-height:36px}
  .brand-lockup img {max-height:43px}
  .auth-center {padding:8px 0}
  .intro-eyebrow {font-size:8px}
  .auth-title {font-size:clamp(32px,2.65vw,38px);margin:9px 0 8px}
  .auth-lead {font-size:12px;margin-bottom:13px}
  .auth-form {gap:10px}
  .field {gap:6px}
  .input-wrap {min-height:43px}
  .input-wrap input {height:42px}
  .icon-button {width:41px;height:41px}
  .form-meta {margin:-3px 0 0}
  .primary-btn {min-height:46px;margin-top:2px}
  .splitter {margin:13px 0 10px}
  .social-button {min-height:43px}
  .demo-link {margin-top:9px;padding:5px}
  .auth-footer {padding-top:9px}
  .visual-bottom {bottom:39px}
  .visual-bottom h2 {font-size:clamp(26px,2.8vw,39px)}
  .visual-bottom p {font-size:11px}
}
@media (min-width:761px) and (max-height:620px) {
  .auth-title {font-size:31px}
  .auth-lead {margin-bottom:9px}
  .auth-form {gap:8px}
  .splitter {margin:9px 0 8px}
  .demo-link {margin-top:5px}
  .visual-bottom p {display:none}
}
@media (max-width:760px) {
  html,body {min-height:100%;overflow-x:clip}
  .auth-layout {display:flex;flex-direction:column;min-height:100svh}
  .experience-panel {
    order:-1;flex:0 0 auto;
    min-height:0;height:clamp(112px,15svh,138px);
    background-position:center 42%;
  }
  .mascot {
    width:clamp(102px,32vw,166px);right:3%;
    bottom:-18px;max-height:135%;opacity:.97;
  }
  .visual-bottom {
    bottom:12px;left:14px;right:36%;
    max-width:none;padding:8px 10px;
  }
  .visual-bottom .eyebrow,.visual-bottom p {display:none}
  .visual-bottom h2 {
    font-size:clamp(17px,4.4vw,23px);
    line-height:1.14;letter-spacing:-.5px;margin:0;
  }
  .visual-bottom::before {inset:-3px -8px;border-radius:13px}
  .login-side {
    order:1;flex:1 0 auto;min-height:0;border:0;
    padding:clamp(13px,2.5svh,20px) 24px 12px;
    overflow:visible;
  }
  .brand-row {min-height:38px}
  .brand-lockup {min-height:35px}
  .brand-lockup img {max-height:39px}
  .version-mark {font-size:8px;padding:6px 8px}
  .auth-center {
    align-self:center;width:min(100%,380px);margin:auto 0;
    padding:clamp(10px,1.8svh,17px) 0;
  }
  .intro-eyebrow {font-size:8px;letter-spacing:1.4px}
  .auth-title {
    font-size:clamp(30px,8.2vw,37px);
    line-height:1.06;margin:9px 0 7px;letter-spacing:-1.25px;
  }
  .auth-lead {font-size:11.5px;line-height:1.5;margin:0 0 13px}
  .auth-form {gap:10px}
  .field {gap:5px}
  .field-label {font-size:11px}
  .input-wrap {min-height:44px}
  .input-wrap input {height:44px;font-size:16px}
  .icon-button {height:42px;width:42px}
  .form-meta {margin:-4px 0 0}
  .inline-link {font-size:11px;padding:3px 0}
  .primary-btn {min-height:46px;margin-top:2px}
  .splitter {margin:13px 0 11px}
  .social-button {min-height:44px}
  .demo-link {margin-top:9px;padding:5px;font-size:11px}
  .auth-footer {padding-top:8px;font-size:9px}
  .recovery-back {margin-bottom:16px}
}
@media (max-width:760px) and (max-height:720px) {
  .experience-panel {height:88px}
  .mascot {width:102px;bottom:-15px}
  .visual-bottom {bottom:9px;right:115px}
  .visual-bottom h2 {font-size:16px}
  .login-side {padding-top:10px;padding-bottom:10px}
  .auth-center {padding:8px 0}
  .intro-eyebrow {display:none}
  .auth-title {font-size:29px;margin:4px 0 9px}
  .auth-lead {display:none}
  .auth-form {gap:8px}
  .field {gap:4px}
  .input-wrap {min-height:42px}
  .input-wrap input {height:42px}
  .primary-btn {min-height:43px}
  .splitter {margin:9px 0 8px}
  .social-button {min-height:42px}
  .demo-link {margin-top:6px}
  .auth-footer {padding-top:5px}
}
@media (max-width:760px) and (max-height:600px) {
  .experience-panel {height:72px}
  .mascot {width:85px;bottom:-13px}
  .visual-bottom h2 {font-size:14px}
  .auth-center {padding:5px 0}
  .auth-title {font-size:26px}
}
@media (max-width:760px) and (orientation:landscape) and (max-height:480px) {
  .experience-panel {display:none}
  .login-side {min-height:100svh}
}