/* Bolsa de trabajo · Vía Láctea Lopri */
.gx-wrap{background:radial-gradient(80% 70% at 50% 45%,#13306a 0%,#08173a 55%,#050d24 100%);border-radius:48px;margin:0 clamp(8px,2vw,24px);color:#e8f1ff;overflow:hidden}
.gx-wrap .head h2{color:#fff}.gx-wrap .head p{color:#a9c3e6}.gx-wrap .eyebrow{color:#9cc8ff}
.gx-wrap .hl{color:#7dbbff}.gx-wrap .hl::after{background:rgba(90,166,255,.25)}
.gx-stage{position:relative;width:100%;height:min(78vh,720px);min-height:520px;border-radius:32px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(40,80,170,.35),transparent 70%)}
.gx-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .8s,filter .8s}
.in-sys canvas{opacity:.45;filter:blur(3px)}
.gx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;pointer-events:none;transition:opacity .6s,transform .8s}
.gx-core img{width:clamp(70px,10vw,110px);background:#fff;border-radius:50%;padding:10px;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 80px 30px rgba(255,235,200,.55);animation:gxpulse 4s ease-in-out infinite}
.gx-core b{font-family:var(--h);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:#fff3dc;text-shadow:0 0 18px rgba(255,220,160,.9)}
@keyframes gxpulse{50%{box-shadow:0 0 0 16px rgba(255,255,255,.05),0 0 120px 40px rgba(255,235,200,.7)}}
.gx-nodes{position:absolute;inset:0;transition:opacity .5s}
.gx-node{position:absolute;left:0;top:0;background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:8px;color:#fff;font:inherit}
.gx-star{position:relative;display:grid;place-items:center;width:clamp(46px,6vw,64px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--g) 30%,var(--c) 70%);box-shadow:0 0 30px 8px var(--c),0 0 70px 20px color-mix(in srgb,var(--c) 40%,transparent);transition:transform .3s}
.gx-star i{font-style:normal;font-size:clamp(1.1rem,2vw,1.5rem)}
.gx-ring{position:absolute;top:calc(clamp(46px,6vw,64px)/2);left:50%;width:calc(clamp(46px,6vw,64px)*2.1);aspect-ratio:1;transform:translate(-50%,-50%) rotateX(68deg);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--g) 70%,transparent);animation:spin 9s linear infinite;pointer-events:none}
.gx-lbl{display:grid;justify-items:center;padding:6px 14px;border-radius:14px;background:rgba(6,18,44,.75);border:1px solid rgba(156,200,255,.3);backdrop-filter:blur(6px)}
.gx-lbl b{font-family:var(--h);font-size:clamp(.82rem,1.4vw,1rem)}
.gx-lbl small{font-size:.72rem;color:#a9c3e6}
.gx-node:hover .gx-star,.gx-node:focus-visible .gx-star{transform:scale(1.2)}
.gx-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.88rem;animation:gxbob 2.4s ease-in-out infinite}
@keyframes gxbob{50%{transform:translate(-50%,-6px)}}
.gx-hud{position:absolute;left:18px;top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:5}
.gx-hud span{font-size:.8rem;letter-spacing:.06em;color:#a9c3e6;padding:6px 12px;border-radius:999px;background:rgba(6,18,44,.6)}
.gx-hud button{border:0;cursor:pointer;font:600 .88rem var(--t);padding:8px 16px;border-radius:999px;background:#fff;color:#0d2242}
.zooming .gx-nodes,.zooming .gx-core,.in-sys .gx-nodes,.in-sys .gx-core{opacity:0;pointer-events:none}
.zooming .gx-core{transform:translate(-50%,-50%) scale(.6)}
.gx-sys{position:absolute;left:0;top:0;width:100%;height:100%;animation:gxin2 .7s cubic-bezier(.2,.8,.2,1)}
@keyframes gxin2{from{opacity:0;transform:scale(.7)}}
.gx-sun{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center;gap:6px;width:min(240px,46%);z-index:3;pointer-events:none}
.gx-sunbody{display:grid;place-items:center;width:clamp(80px,12vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--g) 25%,var(--c) 70%);box-shadow:0 0 60px 20px var(--c),0 0 140px 50px color-mix(in srgb,var(--c) 35%,transparent);animation:gxpulse2 3s ease-in-out infinite}
@keyframes gxpulse2{50%{transform:scale(1.06)}}
.gx-sunbody i{font-style:normal;font-size:clamp(1.8rem,4vw,2.6rem)}
.gx-sun b{font-family:var(--h);font-size:clamp(1.1rem,2.2vw,1.5rem);color:#fff}
.gx-ell{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gx-ell ellipse{fill:none;stroke:rgba(156,200,255,.32);stroke-width:1.2;stroke-dasharray:4 6}
#gxOrbits{position:absolute;inset:0}
.gx-planet{position:absolute;left:0;top:0;will-change:transform;background:none;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;display:grid;justify-items:center;gap:5px}
.gx-pb{width:clamp(22px,3.2vw,34px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--g) 35%,var(--c) 80%);box-shadow:0 0 18px var(--c);transition:transform .25s}
.gx-pl{font-size:clamp(.62rem,1.2vw,.8rem);font-weight:700;white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(6,18,44,.8);border:1px solid rgba(156,200,255,.3)}
.gx-planet:hover .gx-pb{transform:scale(1.35)}
.gx-planet:hover .gx-pl{background:#fff;color:#0d2242}
.gx-card{position:absolute;right:18px;bottom:18px;width:min(340px,calc(100% - 36px));padding:22px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);z-index:6;display:grid;gap:8px;animation:fadeup .35s ease}
.gx-card small{font-size:.75rem;font-weight:700;color:var(--b);letter-spacing:.08em;text-transform:uppercase}
.gx-card h3{font-size:1.4rem}
.gx-card p{color:var(--muted);font-size:.95rem}
.gx-card .btn{justify-self:start;margin-top:6px}
.gx-x{position:absolute;right:12px;top:10px;border:0;background:var(--mist);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1}
.gx-card[hidden],.gx-sys[hidden],.gx-hint[hidden]{display:none!important}
@media (max-width:640px){.gx-stage{height:620px}.gx-pl{display:none}.gx-planet:hover .gx-pl,.gx-planet:focus .gx-pl{display:block}}
.toon-wrap{aspect-ratio:auto!important}
.toon{position:relative;border-radius:36px;overflow:hidden;box-shadow:var(--sh2);background:#eef6ff}
.toon svg{display:block;width:100%;height:auto}
.toon .t-car{animation:tcar 10s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tcar{0%{transform:translateX(-200px)}25%,70%{transform:translateX(100px)}100%{transform:translateX(760px)}}
.toon .t-arm{transform-origin:391px 256px;animation:twave 1.2s ease-in-out infinite}
@keyframes twave{50%{transform:rotate(18deg)}}
.toon .t-guy{animation:tbob 2s ease-in-out infinite}
@keyframes tbob{50%{transform:translateY(-3px)}}
.toon .t-bubble{opacity:0;animation:tbub 10s ease infinite}
@keyframes tbub{20%{opacity:0;transform:translateY(8px)}28%,62%{opacity:1;transform:none}70%,100%{opacity:0}}
.toon .t-cloud.c1{animation:tcl 30s linear infinite}.toon .t-cloud.c2{animation:tcl 44s linear infinite reverse}
@keyframes tcl{50%{transform:translateX(60px)}}
.toon .t-sun{transform-origin:500px 80px;animation:tsunp 5s ease-in-out infinite}
@keyframes tsunp{50%{transform:scale(1.06)}}
.toon .t-lights circle{animation:tblink 1.6s ease-in-out infinite}
.toon .t-lights circle:nth-child(2){animation-delay:.3s}.toon .t-lights circle:nth-child(3){animation-delay:.6s}
@keyframes tblink{50%{opacity:.35}}
.toon.stop *{animation-play-state:paused!important}
.toon-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:var(--sh);font-size:.82rem;font-weight:700;color:var(--ink2)}
.toon-play{width:30px;height:30px;border-radius:50%;border:0;background:var(--b);color:#fff;font-size:.7rem;cursor:pointer}
.toon-prog{flex:1;height:5px;border-radius:5px;background:var(--mist);position:relative;overflow:hidden}
.toon-prog::after{content:"";position:absolute;inset:0;width:100%;background:#25d366;transform-origin:left;animation:tprog 10s linear infinite}
@keyframes tprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.toon.stop .toon-prog::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.toon *{animation:none!important}.toon .t-bubble{opacity:1}}
/* universo real */
.gx-wrap{background:radial-gradient(90% 80% at 50% 40%,#0a1330 0%,#040817 55%,#01030a 100%)}
.gx-stage{background:#01030a;box-shadow:inset 0 0 120px 30px rgba(0,0,0,.7)}
.in-sys canvas{opacity:.6;filter:blur(2px)}