/* Login artwork from balashte.com; styles stay within the entry screen. */
.login{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);background:#fffaf9}
.login .login-visual{min-height:100dvh;overflow:hidden;align-items:flex-start;padding:clamp(38px,4.4vw,72px);background:radial-gradient(ellipse at 50% 82%,#b85267 0,transparent 57%),linear-gradient(145deg,#522330,#773247 64%,#552632);isolation:isolate}
.login-visual::before{content:"";position:absolute;top:clamp(35px,4vw,58px);left:clamp(38px,4.4vw,72px);width:96px;height:96px;background:url('/assets/balashte-logo-blanco.png') center/contain no-repeat;opacity:.96}
.login-visual::after{content:"";position:absolute;left:3%;right:3%;bottom:3.5%;height:47%;background:url('/assets/balashte-login-plantas.png') center bottom/contain no-repeat;z-index:-1;filter:drop-shadow(0 24px 26px #30152228)}
.login-visual>div{margin-top:140px;max-width:480px}
.login-visual .eyebrow{color:#f6cad4;letter-spacing:2.5px;font-size:10px;font-weight:650;margin-bottom:16px}
.login .login-visual h2{font-size:clamp(36px,3.6vw,56px);font-weight:500;letter-spacing:-1.8px;line-height:1.08;max-width:480px;margin-bottom:18px}
.login .login-visual p{font-size:14px;line-height:1.7;max-width:310px;color:#f6dfe5}
.login #main.login-content{max-width:500px;margin:auto;padding:44px 48px;background:transparent}
.login-content .logo{width:132px;height:108px;margin-bottom:26px;mix-blend-mode:multiply}
.login-content h1{font-size:29px;letter-spacing:-1px;line-height:1.18;margin-bottom:12px}
.login-content>p{font-size:14px;line-height:1.7}
.login-content input{background:#fff;border-color:#e9d9df;border-radius:12px}
.login-content input:focus{border-color:var(--brand)}
.login-content .btn{border-radius:12px}
.login-pin-field{position:relative;margin-top:7px}
.login-pin-field input{padding-right:58px}
.login-pin-toggle{position:absolute;top:0;right:4px;width:44px;height:44px;color:var(--green);border-radius:8px}
.login-pin-toggle:hover{background:#fbe9ee}
@media(min-width:851px) and (max-height:760px){
 .login-visual>div{margin-top:108px}
 .login-visual::before{width:78px;height:78px;top:30px}
 .login .login-visual h2{font-size:40px}
 .login-visual::after{height:42%;bottom:2%}
 .login #main.login-content{padding-top:28px;padding-bottom:28px}
}
@media(max-width:1000px) and (min-width:851px){
 .login #main.login-content{padding:34px}
 .login .login-visual{padding:38px}
 .login-visual::before{left:38px}
 .login .login-visual h2{font-size:38px}
}
@media(max-width:850px){
 .login{display:block;min-height:100dvh}
 .login .login-visual{display:flex;min-height:172px;padding:26px 24px}
 .login-visual::before{display:none}
 .login-visual::after{left:auto;right:-16px;bottom:0;width:51%;height:94%;background-position:right bottom;filter:none}
 .login-visual>div{margin:0;max-width:52%}
 .login-visual .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:9px}
 .login .login-visual h2{font-size:25px;letter-spacing:-.7px;margin-bottom:10px}
 .login .login-visual p{font-size:11px;line-height:1.5;margin:0;max-width:190px}
 .login #main.login-content{max-width:460px;padding:26px 24px 30px}
 .login-content .logo{width:108px;height:88px;margin-bottom:18px}
 .login-content h1{font-size:27px}
 .login-content>p{margin-bottom:24px;font-size:13px}
 .login-content form{gap:17px}
}
@media(max-width:370px){
 .login .login-visual{padding:22px 18px;min-height:164px}
 .login .login-visual h2{font-size:22px}
 .login #main.login-content{padding-left:20px;padding-right:20px}
 .login-content h1{font-size:24px}
}
