:root{--blue:#1769e0;--blue-dark:#07358c;--ink:#14263d;--muted:#63758e;--bg:#f4f7fb;--border:#dce6f2;--soft:#eaf2ff}
*{box-sizing:border-box}html{min-height:100%;}body{margin:0;min-height:100vh;background:radial-gradient(circle at 90% 15%,#d9ebff 0,transparent 33%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}
.shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:82px;padding:0 clamp(20px,4.6vw,76px);display:flex;align-items:center;justify-content:space-between;background:#ffffffeb;border-bottom:1px solid #e1eaf5}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#08265f;font-size:clamp(19px,2vw,28px);font-weight:850;letter-spacing:-1px}.brand .accent{color:var(--blue)}.brand-mark{width:43px;height:43px;display:grid;place-items:center;color:#fff;border-radius:13px;background:linear-gradient(140deg,#00a5ff,#1769e0 60%,#07358c);box-shadow:0 7px 18px #1769e02b}.brand-mark svg{width:27px}.topmeta{display:flex;align-items:center;gap:16px}.topmeta .caption{font-size:13px;color:#4a6388;font-weight:600}.divider{height:22px;width:1px;background:#cddcec}.security-badge{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:10px 15px;background:#e4f1ff;color:#104da4;font-size:12px;font-weight:750}.security-badge svg{width:16px;height:16px}
.main{width:100%;max-width:1450px;margin:auto;display:grid;grid-template-columns:minmax(0,1.17fr) minmax(390px,.83fr);gap:30px;padding:35px clamp(20px,4vw,54px) 28px;align-items:stretch}.showcase{position:relative;min-height:610px;border-radius:28px;overflow:hidden;padding:clamp(32px,4vw,59px);color:#fff;background:linear-gradient(143deg,#071c53 5%,#09449c 46%,#0877e6 100%);box-shadow:0 20px 40px #0a4d9f18;isolation:isolate}.showcase::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;border:1px solid #ffffff14;right:-230px;top:100px;box-shadow:0 0 0 74px #ffffff06,0 0 0 150px #ffffff05;z-index:-1}.showcase::after{content:"";position:absolute;inset:auto -4px -4px; height:47%;background:linear-gradient(0deg,#041947db,transparent);pointer-events:none}.showcase-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}.eyebrow{display:inline-flex;align-self:flex-start;gap:7px;align-items:center;color:#d1eaff;font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase}.eyebrow .spark{width:7px;height:7px;border-radius:50%;background:#6df1ff;box-shadow:0 0 14px #6df1ff}.showcase h1{font-size:clamp(37px,3.8vw,61px);max-width:620px;letter-spacing:-2.4px;line-height:1.09;margin:32px 0 20px;font-weight:850}.showcase h1 em{font-style:normal;color:#75e5ff}.intro{font-size:clamp(16px,1.3vw,19px);color:#d5e8ff;line-height:1.6;max-width:530px;margin:0}.network-art{flex:1;min-height:170px;position:relative;margin:20px -30px -15px}.network-art svg{width:100%;height:100%;min-height:160px;display:block;position:absolute;inset:0;overflow:visible}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:auto}.feature{padding:17px 15px;border-radius:19px;border:1px solid #ffffff44;background:#ffffff19;backdrop-filter:blur(9px)}.feature svg{height:24px;width:24px;color:#81e9ff;display:block;margin-bottom:9px}.feature strong{display:block;font-size:16px;margin-bottom:3px}.feature small{display:block;color:#d5e5ff;font-size:12px;line-height:1.45}
.login-area{display:flex;align-items:center;justify-content:center;padding:10px 0}.login-card{width:100%;max-width:530px;border-radius:28px;background:#fff;border:1px solid #e0e8f2;box-shadow:0 20px 55px #294c8317;padding:clamp(28px,3vw,45px)}.login-identity{text-align:center}.login-icon{margin:0 auto 20px;display:grid;place-items:center;width:72px;height:72px;border-radius:23px;background:linear-gradient(150deg,#eef9ff,#d9ebff);color:var(--blue);box-shadow:0 10px 24px #1c72d923}.login-icon svg{width:40px;height:40px}.login-card h2{font-size:clamp(25px,2.4vw,33px);letter-spacing:-1.2px;line-height:1.2;margin:0 0 8px;color:#091f47}.subtitle{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 34px}.field{margin-bottom:18px}.field label{font-size:13px;font-weight:750;display:block;margin-bottom:8px;color:#304563}.control{position:relative}.control>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:#8398b5;pointer-events:none}.control input{width:100%;height:56px;border:1px solid #cfdbeb;border-radius:13px;background:#fbfdff;padding:0 49px 0 47px;outline:none;font:inherit;font-size:15px;color:var(--ink);transition:.2s}.control input:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 4px #1769e01b}.control input::placeholder{color:#99a9bc}.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#7a8fae}.eye:hover{background:#edf4ff;color:var(--blue)}.eye svg{width:20px;height:20px}.submit{width:100%;margin-top:10px;height:58px;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;background:linear-gradient(95deg,#1774f6,#0644bf);border:0;border-radius:13px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 23px #1769e02e;transition:transform .2s,filter .2s}.submit:hover{transform:translateY(-1px);filter:brightness(1.05)}.submit:disabled{opacity:.7;cursor:wait}.submit svg{width:19px;height:19px}.session-note{margin-top:26px;background:#edf5ff;border-radius:13px;color:#385477;padding:15px;display:flex;gap:12px;align-items:center;font-size:12px;line-height:1.5}.session-note svg{width:23px;height:23px;flex-shrink:0;stroke:#386cb5}.help-note{text-align:center;font-size:12px;color:#7e91a8;margin:23px 0 0}.error{padding:12px 14px;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;border-radius:11px;font-size:13px;line-height:1.5;margin-bottom:20px}.footer{text-align:center;padding:0 20px 19px;color:#8c9bb0;font-size:12px}
@media(max-width:1050px){.topmeta .caption,.topmeta .divider{display:none}.main{grid-template-columns:minmax(0,1fr) minmax(340px,1fr);gap:18px;padding:24px}.showcase{padding:32px}.showcase h1{font-size:39px}.network-art{min-height:150px}.features{gap:7px}.feature{padding:11px}.feature strong{font-size:13px}.feature small{font-size:11px}.login-card{padding:30px}}
@media(max-width:760px){.topbar{height:70px;padding:0 18px}.brand{font-size:21px}.brand-mark{width:39px;height:39px}.security-badge{padding:9px 11px;font-size:0;gap:0}.security-badge svg{width:20px;height:20px}.main{display:flex;flex-direction:column;gap:0;padding:0 0 20px;max-width:540px}.showcase{min-height:0;border-radius:0 0 28px 28px;padding:27px 24px 31px;box-shadow:none}.showcase h1{font-size:30px;line-height:1.12;letter-spacing:-1.2px;margin:14px 0 7px}.showcase .intro{font-size:13px;line-height:1.5}.showcase .eyebrow{font-size:10px}.network-art,.features{display:none}.login-area{padding:0 16px;margin-top:-12px;z-index:3}.login-card{box-shadow:0 14px 35px #294c831a;padding:26px 22px 25px;border-radius:22px}.login-icon{width:56px;height:56px;border-radius:17px;margin-bottom:14px}.login-icon svg{width:32px;height:32px}.login-card h2{font-size:25px}.subtitle{margin-bottom:24px;font-size:13px}.control input{height:54px}.submit{height:56px}.session-note{margin-top:21px}.help-note{margin-top:16px}.footer{padding:4px 12px 16px}}
@media(max-width:375px){.brand{font-size:18px}.showcase{padding:23px 19px 28px}.showcase h1{font-size:27px}.login-card{padding:22px 17px}.login-area{padding:0 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* REPRODUCCION DE LA REFERENCIA APROBADA — Desktop */
:root{--blue:#1769e0;--ink:#10274e;--bg:#edf5ff}
body{background:radial-gradient(ellipse at 10% 90%,#cbe5ff 0,transparent 35%),radial-gradient(ellipse at 90% 18%,#d6eafa 0,transparent 35%),#edf5ff}
.topbar{height:105px;padding:0 clamp(22px,4.4vw,74px)}
.brand{font-size:clamp(21px,2.4vw,31px)}
.brand-mark{background:transparent;box-shadow:none;color:#1769e0;width:58px;height:58px}
.brand-mark svg{width:58px;height:58px;stroke-width:3.5}
.main{max-width:1500px;grid-template-columns:minmax(0,1.36fr) minmax(390px,1fr);gap:30px;padding:44px 30px 26px}
.showcase{padding:0;min-height:0;aspect-ratio:753 / 858;border-radius:32px;background:transparent;box-shadow:0 10px 36px #1c5e9e1c}
.showcase::before,.showcase::after{display:none}
.desktop-reference{position:absolute;inset:0;background:var(--login-panel-image) center center / 100% 100% no-repeat}
.showcase-inner{display:none}
.mobile-banner{display:none}
.login-card{max-width:580px;border:1px solid #d5e4f3;border-radius:30px;padding:45px 34px 36px;box-shadow:0 14px 42px #2b65a820}
.login-icon{background:linear-gradient(145deg,#d7ebff,#f2f8ff);color:#0860d8;width:84px;height:84px;border-radius:26px}
.login-icon svg{width:52px;height:52px}
.login-card h2{font-size:34px}
.subtitle{font-size:16px;margin-bottom:35px}
.control input{height:65px;border-radius:15px;font-size:16px}
.field{margin-bottom:22px}
.field label{font-size:14px}
.submit{height:70px;font-size:18px;background:linear-gradient(95deg,#0768ef,#0d36b0)}
.session-note{font-size:14px;background:#e7f1ff;padding:17px}
.help-note{color:#0d57c7;font-size:14px}
.only-mobile{display:none}
@media(max-width:1050px) and (min-width:761px){.main{grid-template-columns:minmax(0,1.2fr) minmax(345px,1fr);gap:18px;padding:24px 16px}.login-card{padding:28px 20px}.login-card h2{font-size:28px}}
/* REPRODUCCION DE LA REFERENCIA APROBADA — Movil */
@media(max-width:760px){
 .shell{background:radial-gradient(ellipse at 94% 25%,#dceeff 0 35%,transparent 35.5%),radial-gradient(ellipse at 10% 80%,#e5f0ff 0 32%,transparent 32.5%),#f0f6ff}
 .topbar{height:82px;padding:0 19px;background:#fff}
 .brand{font-size:clamp(19px,5vw,27px);gap:7px}
 .brand-mark{width:42px;height:42px;border-radius:0}
 .brand-mark svg{width:40px;height:40px}
 .security-badge{padding:11px;background:#e8f2ff;border-radius:26px}
 .main{display:flex;flex-direction:column;gap:21px;padding:29px 17px 12px;width:100%;max-width:540px}
 .showcase{display:block;width:100%;min-height:0;aspect-ratio:auto;border-radius:23px;box-shadow:none;background:linear-gradient(115deg,#092d68,#1769e0);overflow:hidden}
 .desktop-reference{display:none}
 .mobile-banner{display:block;position:relative;padding:23px 21px 30px;min-height:150px;color:white;overflow:hidden}
 .mobile-banner::after{content:"";position:absolute;right:-36px;top:-80px;width:180px;height:180px;border:1px solid #80cfff66;border-radius:50%;box-shadow:0 0 0 40px #ffffff06}
 .mobile-kicker{color:#93dcff;font-size:clamp(10px,2.5vw,14px);letter-spacing:2px;font-weight:800;position:relative;z-index:1}
 .mobile-banner h1{font-size:clamp(25px,6vw,36px);letter-spacing:-.6px;line-height:1.18;margin:16px 0 0;font-weight:850;position:relative;z-index:1}
 .mobile-banner svg{position:absolute;right:18px;bottom:12px;width:95px;height:95px;opacity:.88}
 .login-area{padding:0;margin:0;display:block;width:100%}
 .login-card{width:100%;max-width:none;border:0;border-radius:25px;padding:26px 22px 25px;box-shadow:none}
 .login-icon{height:73px;width:73px;margin-bottom:20px;border-radius:22px;background:#e9f2ff;box-shadow:none}
 .login-icon svg{width:46px;height:46px}
 .login-card h2{font-size:clamp(23px,6vw,31px);white-space:nowrap;margin-bottom:7px}
 .subtitle{font-size:0;margin:0 0 29px}.subtitle .mobile-subtitle{display:none}.only-mobile{display:block;font-size:14px;color:#72849d}
 .field{margin-bottom:21px}.field label{font-size:14px;margin-bottom:8px;color:#283e5a}
 .control input{height:59px;font-size:15px;background:#fafcff;border:1.4px solid #d0dff1}
 .submit{height:62px;font-size:16px;margin-top:24px;border-radius:13px}
 .submit svg{display:none}.submit::after{content:' →';font-size:22px}
 .session-note{margin-top:17px;padding:11px 13px;font-size:12px;line-height:1.4}
 .help-note{display:none}
 .footer{font-size:12px;padding:9px 10px 28px}
}
@media(max-width:390px){.main{padding-left:12px;padding-right:12px}.mobile-banner{padding:20px 16px 25px}.mobile-banner svg{right:7px;width:79px;opacity:.7}.login-card{padding:24px 16px}.login-card h2{font-size:23px}}