:root{
  --crema:#EFE4C4; --durazno:#FACEC3; --almendra:#E1BC9A;
  --olivo:#667667; --salvia:#C0C599; --malva:#CEB2C9;
  --papel:#FBF8F0; --tinta:#36362C; --tinta-suave:#6E6E5F; --linea:#E4D9BF;
  --serif:'Newsreader',Georgia,serif; --sans:'Raleway',system-ui,sans-serif;
}
body{margin:0;}
.login-page{box-sizing:border-box;font-family:var(--sans);color:var(--tinta);-webkit-font-smoothing:antialiased;
  display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;background:var(--papel);}
.login-page *{box-sizing:border-box;}

/* panel visual izquierdo */
.aside{position:relative;overflow:hidden;background:#33392F;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:54px 56px;color:var(--crema);}
.aside .art{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 80% 10%, rgba(192,197,153,.32), transparent 55%),
  radial-gradient(120% 100% at 0% 100%, rgba(206,178,201,.26), transparent 50%);}
.aside .seed{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:520px;height:520px;opacity:.5;}
.brand-row{position:relative;display:flex;align-items:center;gap:14px;}
.brand-row .logo{font-family:var(--serif);font-size:30px;letter-spacing:.01em;}
.brand-row .tag{font-size:10px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--salvia);
  border-left:1px solid rgba(239,228,196,.3);padding-left:14px;}
.aside .pitch{position:relative;max-width:420px;}
.aside .pitch h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.12;margin:0;}
.aside .pitch h1 em{font-style:italic;color:var(--salvia);}
.aside .pitch p{font-size:15px;color:rgba(239,228,196,.78);margin-top:18px;line-height:1.65;}
.aside .foot{position:relative;font-size:12px;color:rgba(239,228,196,.55);letter-spacing:.03em;}

/* formulario derecho */
.login-main{display:flex;align-items:center;justify-content:center;padding:40px;}
.card{width:100%;max-width:380px;}
.card .eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--olivo);}
.card h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:12px 0 6px;}
.card .sub{font-size:14.5px;color:var(--tinta-suave);margin-bottom:32px;line-height:1.6;}

.login-page .field{margin-bottom:18px;}
.login-page .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:8px;}
.inp-wrap{position:relative;}
.login-page .inp{width:100%;border:1px solid var(--linea);background:#fff;border-radius:10px;font-family:var(--sans);
  font-size:15px;color:var(--tinta);padding:13px 14px;transition:.18s;}
.login-page .inp:focus{outline:none;border-color:var(--olivo);box-shadow:0 0 0 3px rgba(102,118,103,.13);}
.peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;
  padding:8px;color:var(--tinta-suave);font-size:12px;font-weight:600;letter-spacing:.04em;border-radius:7px;transition:.15s;}
.peek:hover{color:var(--olivo);background:rgba(102,118,103,.08);}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 26px;}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--tinta-suave);}
.remember input{position:absolute;opacity:0;width:0;height:0;}
.box{width:19px;height:19px;border:1px solid var(--linea);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;transition:.15s;flex:none;}
.box::after{content:'✓';font-size:12px;color:#fff;opacity:0;transition:.15s;}
.remember input:checked + .box{background:var(--olivo);border-color:var(--olivo);}
.remember input:checked + .box::after{opacity:1;}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(102,118,103,.2);}

.btn-go{width:100%;border:none;background:var(--olivo);color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:600;
  letter-spacing:.04em;padding:15px;border-radius:100px;cursor:pointer;transition:.2s;}
.btn-go:hover{background:#54624f;transform:translateY(-1px);}
.btn-go:active{transform:none;}

.error{display:none;align-items:center;gap:9px;background:#fbeae4;border:1px solid #e7c3b6;color:#9c4a36;
  border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:18px;}
.error.show{display:flex;}
.error::before{content:'!';flex:none;width:18px;height:18px;border-radius:50%;background:#9c4a36;color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}

.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

@media(max-width:880px){
  .login-page{grid-template-columns:1fr;}
  .aside{display:none;}
  .login-main{padding:30px 24px;}
}