/* Corrección de jerarquía real: el acceso no queda debajo de un hero completo en móvil. */
body.is-landing .landing {
  grid-template-areas: "brand access";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body.is-landing .landing-art { grid-area: brand; }
body.is-landing .landing-form { grid-area: access; }
.login-mobile-brand { display: none; }

@media (max-width: 900px) {
  body.is-landing .landing {
    grid-template-areas: "access" "brand";
    grid-template-columns: minmax(0, 1fr);
    min-height: 100svh;
  }
  body.is-landing .landing-form {
    padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
    align-content: start;
    place-items: start center;
    background: #fff;
  }
  body.is-landing .login-card {
    width: 100%;
    max-width: 520px;
    margin: 0;
    padding: 0;
  }
  body.is-landing .login-mobile-brand {
    display: block;
    width: min(220px, 100%);
    margin: 0 auto 12px;
  }
  body.is-landing .login-mobile-brand .academy-brands__company { width: 100%; }
  /* La identidad se presenta con el logo, sin repetir otra cabecera encima de los campos. */
  body.is-landing .login-card > .eyebrow { display: none; }
  body.is-landing .login-card h2 { font-size: 25px; line-height: 1.3; margin: 8px 0 6px; }
  body.is-landing .login-card > p { font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
  body.is-landing .login-card label { font-size: 14px; margin: 16px 0 6px; }
  body.is-landing .login-card input { height: 48px; font-size: 16px; }
  body.is-landing .login-card .pw input { padding-right: 52px; }
  body.is-landing .login-card .pw button { top: 2px; right: 4px; min-height: 44px; min-width: 44px; }
  body.is-landing .login-forgot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    font-size: 13px;
    margin-top: 0;
  }
  body.is-landing .login-submit { height: 48px; margin-top: 12px; font-size: 15px !important; }
  body.is-landing .login-error { font-size: 13px; margin-top: 8px; min-height: 20px; }
  body.is-landing .login-help { flex-wrap: wrap; font-size: 12px; margin-top: 14px; }
  body.is-landing .login-help a { padding: 6px 2px; }
  body.is-landing .login-secure { font-size: 12px; margin-top: 14px; }
  body.is-landing .landing-art {
    padding: 24px max(20px, env(safe-area-inset-right, 0px)) 30px max(20px, env(safe-area-inset-left, 0px));
  }
  body.is-landing .landing-art .academy-brands { margin-top: 0; }
  body.is-landing .landing-art .academy-brands__company { display: none; }
  body.is-landing .academy-brands__subtitle { margin: 0 0 14px; text-align: center; font-size: 14px; }
  body.is-landing .academy-brands__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.is-landing .academy-brands__item { min-height: 100px; padding: 10px; }
  body.is-landing .academy-brands__logo { height: 54px; }
  body.is-landing .academy-brands__name { font-size: 12px; overflow-wrap: anywhere; text-align: center; }
  body.is-landing .landing-copy { padding: 24px 0 0; margin: 0 auto; max-width: 520px; }
  body.is-landing .landing-copy h1 { font-size: 26px; }
  body.is-landing .landing-copy > p { font-size: 14px; line-height: 1.65; max-width: none; }
}

@media (max-width: 420px) {
  body.is-landing .landing-form,
  body.is-landing .landing-art { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body.is-landing .academy-brands__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-landing .academy-brands__item:last-child { grid-column: 1 / -1; }
  body.is-landing .academy-brands__item:last-child .academy-brands__logo { max-width: 180px; }
}

/* Con teclado o en horizontal se mantiene el principio del formulario dentro del viewport. */
@media (max-width: 900px) and (max-height: 500px) {
  body.is-landing .landing-form { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  body.is-landing .login-mobile-brand { width: min(150px, 100%); margin-bottom: 8px; }
  body.is-landing .login-card h2 { margin-top: 6px; font-size: 23px; }
}