/* Identidad visual GLocation (ver brand/BRAND.md) */
:root{
  --primario:#8263a7; --primario-600:#684f86; --primario-700:#4e3b64; --primario-50:#f3eff6; --primario-100:#e6e0ed;
  --morado-logo:#614393; --azul:#205d7f; --info:#0ea5e9;
  --ok:#006d68; --ok-l:#66d1c9; --warn:#ffa333; --warn-d:#99621f; --warn-l:#ffc885; --bad:#dc2626; --bad-l:#fca5a5;
  --tx:#171a1b; --tx2:#444f51; --muted:#5b6a6d; --borde:#e8ebec; --fondo:#f4f6f8;
  --grad:linear-gradient(90deg,#8263a7,#0ea5e9);
  --radius:1rem;
  --fh:Montserrat,system-ui,sans-serif; --fb:Nunito,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--fb);background:var(--fondo);background-image:radial-gradient(1200px 500px at 85% -10%,#e6e0ed 0,transparent 60%),radial-gradient(900px 400px at 0% 0%,#e0f2fe 0,transparent 55%);background-attachment:fixed;color:var(--tx);font-size:13px;-webkit-font-smoothing:antialiased}
h1,h3,h4,h5,.big,.pct,.gnums b,.bt{font-family:var(--fh)}
.hidden{display:none!important}.muted{color:var(--muted)}
/* Login (dividido: izquierda blanca, derecha hero) */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(380px,1fr) 1.15fr;gap:24px;padding:16px;background:#fff}
.login-left{display:flex;flex-direction:column;padding:clamp(24px,2vw,44px) clamp(36px,4vw,96px) 24px}
.lbrand{display:flex;align-items:center;gap:14px}
.lmark{width:52px;height:52px;border-radius:14px;background:#fff;box-shadow:0 4px 14px #171a1b1f;display:flex;align-items:center;justify-content:center}
.lmark img{width:30px;height:30px}
.lword{font:800 clamp(19px,1.1vw,23px) var(--fh);letter-spacing:.01em;color:var(--tx)}
.lmain{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:clamp(420px,30vw,620px)}
.lmain h1{margin:0;font:800 clamp(40px,4.4vw,88px)/1.02 var(--fh);letter-spacing:-.02em;background:linear-gradient(90deg,#614393 0%,#8263a7 45%,#0ea5e9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.lmain .sub{margin:14px 0 0;font-size:clamp(17px,1.15vw,23px);color:var(--tx2)}
.lmain .sub2{margin:6px 0 0;font-size:clamp(12.5px,.8vw,15.5px);color:var(--muted)}
.gbtn{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:clamp(14px,1vw,19px) 20px;border:1px solid var(--borde);border-radius:14px;background:#fff;color:var(--tx);font:700 clamp(14.5px,.9vw,17px) var(--fb);cursor:pointer;box-shadow:0 1px 3px #171a1b14;transition:.25s}
.gbtn:hover{border-color:var(--primario-100);box-shadow:0 8px 24px #8263a733;transform:translateY(-1px)}
.excl{margin:26px 0 0;text-align:center;font-size:clamp(10px,.62vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lmsg{min-height:18px;margin:10px 0 0;text-align:center;color:var(--bad);font-size:12px}
.lfoot{font-size:12px;font-weight:600;color:var(--muted)}
.login-right{min-height:calc(100vh - 32px)}
.hero{position:relative;height:100%;min-height:560px;border-radius:22px;overflow:hidden;background:#060f1f;box-shadow:0 24px 60px #0b1e3359;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 44%,#081426b3 56%,#071224f2 68%,#060f1f 100%)}
.hero:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #5fd4ff26}
.hero-txt{position:absolute;left:clamp(24px,3vw,60px);right:clamp(24px,3vw,60px);bottom:clamp(20px,2.4vw,44px);z-index:2;color:#fff}
.hero-bgs{position:absolute;inset:0;z-index:0}
.hbg{position:absolute;inset:0;background:center top/cover no-repeat;opacity:0;transform:scale(1.035);transition:opacity 1.2s ease,transform 7s ease-out;will-change:opacity,transform}
.hbg.on{opacity:1;transform:scale(1)}
.hs1{background-image:url("brand/hero-s1.webp")}.hs2{background-image:url("brand/hero-s2.webp")}.hs3{background-image:url("brand/hero-s3.webp")}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease;pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 clamp(10px,.72vw,13px)/1 var(--fh);letter-spacing:.28em;text-transform:uppercase;color:#7fdcff}
.pulse{width:8px;height:8px;border-radius:50%;background:#0ea5e9;box-shadow:0 0 0 4px #0ea5e933,0 0 14px #0ea5e9}
.slide h2{margin:0;font:800 clamp(26px,2.45vw,48px)/1.07 var(--fh);letter-spacing:-.02em;text-shadow:0 2px 24px #0008}
.slide h2 .hl{background:linear-gradient(90deg,#c9b6e6 0%,#9f86c9 30%,#5fd4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:12px 0 0;max-width:680px;font-size:clamp(14px,.95vw,18px);line-height:1.55;color:#d6e3f0}
/* Modelo visual */
.model{display:flex;align-items:stretch;margin-top:clamp(14px,1.3vw,22px);gap:0}
.node{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:clamp(9px,.7vw,13px) clamp(10px,.8vw,14px);border-radius:14px;background:linear-gradient(160deg,#ffffff1f,#ffffff08);border:1px solid #9fdcff40;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff26,0 8px 24px #0006}
.node.res{background:linear-gradient(160deg,#8263a759,#205d7f40);border-color:#b49ad680;box-shadow:inset 0 1px 0 #ffffff33,0 0 28px #8263a74d}
.ni{flex:none;width:clamp(28px,2vw,38px);height:clamp(28px,2vw,38px);border-radius:10px;display:grid;place-items:center;background:#0ea5e924;border:1px solid #5fd4ff59}
.node.res .ni{background:#8263a740;border-color:#c9b6e680}
.ni svg{width:60%;height:60%;fill:none;stroke:#9fe6ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.node.res .ni svg{stroke:#e3d6f5}
.nt{display:flex;flex-direction:column;min-width:0}.nt b{font:700 clamp(11.5px,.82vw,15px)/1.2 var(--fh)}.nt small{font-size:clamp(10px,.66vw,12.5px);color:#b9cadb;margin-top:2px}
.op{flex:0 0 clamp(26px,2.2vw,44px);display:flex;align-items:center;justify-content:center;position:relative}
.op i{flex:1;height:1px;background:linear-gradient(90deg,#5fd4ff00,#5fd4ffcc,#5fd4ff00)}
.op em{font:700 clamp(12px,.9vw,16px)/1 var(--fh);font-style:normal;color:#7fdcff;padding:0 3px;text-shadow:0 0 10px #0ea5e9}
.flow .op em{font-size:clamp(11px,.8vw,14px)}
.loop{position:relative;padding-bottom:22px}
.loopback{position:absolute;left:12%;right:12%;bottom:0;height:14px;border:1px solid #5fd4ff73;border-top:0;border-radius:0 0 14px 14px;font:600 10px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:#7fdcff;text-align:center}
.loopback>span{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:#060f1f;padding:0 12px;line-height:1;white-space:nowrap}
.chipset{margin-left:auto;display:grid}.chips{grid-area:1/1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-content:flex-start;gap:8px;opacity:0;transition:opacity .9s}.chips.on{opacity:1}
.chips span{font:600 clamp(10px,.68vw,12.5px)/1 var(--fb);padding:7px 12px;border-radius:999px;border:1px solid #ffffff2e;background:#ffffff0f;color:#dbe7f2}
.chips span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5fd4ff;margin-right:8px;vertical-align:1px;box-shadow:0 0 8px #0ea5e9}
/* Puntos del carrusel */
.hdots{display:flex;align-items:center;gap:8px;margin-top:clamp(16px,1.4vw,24px);min-height:30px}
.hdots button{all:unset;cursor:pointer;width:18px;height:4px;border-radius:2px;background:#ffffff40;overflow:hidden;position:relative;transition:width .4s}
.hdots button.on{width:52px}
.hdots button i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#8263a7,#0ea5e9)}
.hdots button.on i{width:100%}
.hero.auto:not(.paused) .hdots button.on i{animation:fill var(--dur,6s) linear}
@keyframes fill{from{width:0}to{width:100%}}
.hdots button:focus-visible{outline:2px solid #5fd4ff;outline-offset:4px}
.hcount{margin-left:10px;font:600 11px/1 var(--fh);letter-spacing:.18em;color:#8fa6bd}
.kicker{margin:0 0 18px;font:700 clamp(10.5px,.65vw,13px)/1.4 var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--primario)}
.kicker:before{content:"";display:inline-block;width:22px;height:2px;background:var(--grad);vertical-align:3px;margin-right:10px;border-radius:2px}
@media (prefers-reduced-motion: reduce){.hbg,.hbg.on{transition:none;transform:none}.slide{transition:none;transform:none}.hdots button{transition:none}.hero .hdots button.on i{animation:none}}
@media(max-width:900px){.login{display:flex;flex-direction:column;min-height:0;padding:12px;gap:16px}.login-left{display:contents}.lbrand{padding:16px 14px 0}.lmain{padding:0 14px}.login-right{min-height:0}.lfoot{order:3}
 .slide h2 br{display:none}
 .hero{min-height:0;height:auto}.hbg{bottom:auto;aspect-ratio:1200/1400;background-size:100% auto;background-position:center top}
 .hero:before{background:linear-gradient(180deg,transparent 0,transparent calc((100vw - 24px)*0.42),#071224f2 calc((100vw - 24px)*0.62),#060f1f 100%)}
 .hero-txt{position:relative;left:auto;right:auto;bottom:auto;padding:calc((100vw - 24px)*0.56) 18px 22px}
 .slide h2{font-size:25px}.lead{font-size:14px}
 .model{flex-direction:column;gap:0}.op{flex:0 0 18px;width:1px;margin-left:30px}.op i{width:1px;height:6px;flex:none;background:#5fd4ffaa}.op{flex-direction:column}.op em{display:none}
 .loop{padding-bottom:0}.loopback{position:static;border:0;height:auto;text-align:left;margin-top:8px;line-height:1.3}.loopback>span{position:static;transform:none;background:none;padding:0}
 .hdots{flex-wrap:wrap}.chipset{margin-left:0;width:100%;margin-top:10px}.chips{justify-content:flex-start}
 .lmain{max-width:none;margin:34px 0 8px}.lmain .sub{font-size:16px}.gbtn{margin-top:26px}.lfoot{text-align:center;padding:6px 0 4px}}
@media(min-width:901px) and (max-width:1400px){.chipset{display:none}}
.hcount{white-space:nowrap;flex-shrink:0}