html,body{height:100%;}
.page{display:grid;grid-template-columns:1fr 460px;min-height:100vh;}
.left{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px;background:var(--white);}
.form-wrap{width:100%;max-width:380px;}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:40px;}
.logo-mark{width:36px;height:36px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.logo-name{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.5px;}
.logo-name span{color:var(--accent);}
.form-h{font-size:26px;font-weight:800;letter-spacing:-.7px;color:var(--text);margin-bottom:5px;}
.form-sub{font-size:13px;color:var(--text3);margin-bottom:32px;}
.field{margin-bottom:18px;}
.field-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.fl{font-size:12px;font-weight:600;color:var(--text2);}
.link-s{font-size:12px;color:var(--accent);text-decoration:none;font-weight:500;}
.fi{width:100%;border:1.5px solid var(--border2);border-radius:var(--r);padding:11px 14px;font-size:14px;font-family:var(--font);color:var(--text);background:var(--white);outline:none;transition:border-color .15s,box-shadow .15s;}
.fi::placeholder{color:var(--text4);}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,79,255,.09);}
.btn-login{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:white;border:none;border-radius:var(--r);padding:13px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .15s;}
.btn-login:hover{background:var(--accent-h);}
.divider{display:flex;align-items:center;gap:14px;margin:24px 0;}
.divider hr{flex:1;border:none;border-top:1px solid var(--border);}
.divider span{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.btn-sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--white);color:var(--text2);border:1.5px solid var(--border2);border-radius:var(--r);padding:11px;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;}
.btn-sso:hover{background:var(--bg);}
.foot-note{font-size:12px;color:var(--text3);text-align:center;margin-top:28px;}
.foot-note a{color:var(--accent);text-decoration:none;font-weight:600;}
.dev-credit{font-size:11px;color:var(--text4);text-align:center;margin-top:auto;padding-top:32px;}
.dev-credit a{color:var(--text3);text-decoration:none;border-bottom:1px solid var(--border2);padding-bottom:1px;}
.right{background:linear-gradient(150deg,#0a1f6e 0%,#1b4fff 60%,#3b6bff 100%);display:flex;flex-direction:column;justify-content:center;padding:56px 48px;position:relative;overflow:hidden;}
.right::before{content:"";position:absolute;top:-100px;right:-100px;width:360px;height:360px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none;}
.right::after{content:"";position:absolute;bottom:-80px;left:-80px;width:280px;height:280px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none;}
.r-logo{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:48px;}
.r-h{font-size:32px;font-weight:800;color:white;letter-spacing:-1px;line-height:1.2;margin-bottom:12px;}
.r-sub{font-size:14px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:44px;}
.feats{display:flex;flex-direction:column;gap:14px;}
.feat{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);border-radius:var(--rl);padding:15px 17px;}
.feat-icon{width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.feat-title{font-size:13px;font-weight:700;color:white;margin-bottom:2px;}
.feat-desc{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;}
.r-foot{margin-top:44px;font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.3px;}
/* ── Responsive móvil ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; }
  .right { display: none; }
  .left { padding: 40px 24px; justify-content: flex-start; padding-top: 60px; }
  .form-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  .left { padding: 48px 20px 32px; }
  .form-h { font-size: 22px; }
  .logo-row { margin-bottom: 28px; }
  .fi { font-size: 16px; /* evita zoom automático en iOS */ }
}