/* Fondo decorativo del login; no modifica formularios ni autenticación. */
#login{background:#092330;isolation:isolate}
#login::before{content:none!important;background-image:none!important}
#login::after{z-index:0;background:linear-gradient(90deg,rgba(4,20,30,.46),rgba(4,20,30,.17) 50%,rgba(4,20,30,.46)),linear-gradient(180deg,rgba(4,20,30,.25),transparent 30%,rgba(4,20,30,.44));pointer-events:none}
#login .lg-form{position:relative;z-index:1}
#login .hp-login-obras{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;contain:paint;background:#092330}
.hp-login-obras-grid{display:grid;grid-template-columns:repeat(var(--hp-columns,5),minmax(0,1fr));gap:14px;position:absolute;inset:-120px -36px;transform:rotate(-5deg) scale(1.12);transform-origin:center}
.hp-login-obras-col{min-width:0;height:100%;overflow:hidden}
.hp-login-obras-track{animation:hp-obras-up var(--hp-duration,150s) linear infinite;animation-delay:var(--hp-delay,-30s);will-change:transform}
.hp-login-obras-col:nth-child(even) .hp-login-obras-track{animation-name:hp-obras-down}
.hp-login-obras-group{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
.hp-login-obras-group img{display:block;width:100%;height:clamp(180px,19vw,320px);object-fit:cover;border-radius:12px;box-shadow:0 8px 20px #0004;background:#224453}
#login.hidden .hp-login-obras-track{animation-play-state:paused}
@keyframes hp-obras-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes hp-obras-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:1100px){.hp-login-obras-grid{gap:12px;inset:-100px -40px}.hp-login-obras-group{gap:12px;padding-bottom:12px}.hp-login-obras-group img{height:240px}}
@media(max-width:600px){.hp-login-obras-grid{gap:9px;inset:-80px -58px;transform:rotate(-6deg) scale(1.08)}.hp-login-obras-group{gap:9px;padding-bottom:9px}.hp-login-obras-group img{height:195px;border-radius:9px}#login::after{background:linear-gradient(180deg,#04141e55,#04141e22 45%,#04141e77)}}
@media(prefers-reduced-motion:reduce){.hp-login-obras-track{animation:none;will-change:auto}.hp-login-obras-col:nth-child(even) .hp-login-obras-track{transform:translateY(-120px)}}

/* Marca visible y formulario amplio únicamente en computadoras. */
#login .hp-login-brand{position:absolute;top:0;left:0;z-index:2;width:290px;pointer-events:none}
#login .hp-login-brand img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 9px rgba(0,0,0,.6))}
@media(min-width:1101px){
  #login .lg-form{padding:82px 0 24px}
  #login .lg-box{width:min(100%,520px);max-width:520px;padding:42px 40px 38px;border-radius:22px}
  #login .lg-box h1{font-size:34px;margin-bottom:8px}
  #login .lg-box p.sub{font-size:15px;line-height:1.5;margin-bottom:28px}
  #login .lg-box .f{margin-bottom:20px}
  #login .lg-box input{min-height:50px;font-size:16px}
  #login #lgBtn{min-height:50px;font-size:16px}
}
@media(max-width:1100px){
  #login .lg-form{flex-direction:column;justify-content:center;gap:16px;padding:16px 0}
  #login .hp-login-brand{position:relative;top:auto;left:auto;flex:none;width:min(70vw,280px)}
  #login .lg-box{margin:0 auto;flex:none}
}
@media(max-width:430px){
  #login .lg-form{gap:10px;padding:10px 0}
  #login .hp-login-brand{width:min(72vw,250px)}
}