/* MINI TALLER: capa a pantalla completa dentro de la misma página */
.gate{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--navy);border-radius:20px;padding:clamp(22px,4vw,40px);margin:0 0 26px}
.gate h3{margin:0 0 6px}.gate p{margin:0;color:#cdd9fb;max-width:52ch}
#tl{position:fixed;inset:0;z-index:100;background:#05060a;color:var(--ink);display:grid;grid-template-columns:1fr 330px;padding-top:env(safe-area-inset-top,0px)}
#tl[hidden]{display:none}
#stage{position:relative;min-height:0;display:grid;place-items:center;padding:12px}
#sc{width:100%;height:100%;max-height:100%}
#sc .hit{fill:transparent;cursor:pointer;outline:none}#sc .hit:hover,#sc .hit:focus-visible{fill:rgba(143,176,255,.1);stroke:#8fb0ff;stroke-width:3}
.bd{cursor:pointer}.bd circle{fill:#0f3fa6;stroke:#8fb0ff;stroke-width:2}.bd .pr{fill:none;opacity:0}.bd text{fill:#fff;font:700 21px Inter,sans-serif;text-anchor:middle}
.bd.done circle:nth-child(2){fill:#1b2a5f}
.bd.cur .pr{opacity:1;stroke:#fff;animation:pr 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pr{from{transform:scale(.7);opacity:1}to{transform:scale(1.5);opacity:0}}
#bf{transition:transform 1.4s cubic-bezier(.4,0,.2,1)}#bf image{animation:fl .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes fl{to{transform:scaleX(.5)}}
#on{opacity:0;transition:opacity .9s}.lit #on{opacity:1;animation:fk 1.2s steps(1) 1}
#lon{opacity:0;transition:opacity 1s}.del #lon{opacity:1}
#cov,#scr,#pro{opacity:0;transition:opacity .5s}.cham #cov,.scr #scr,.hasp #pro{opacity:1}
#gp{opacity:0;transition:opacity .6s}.print #gp{opacity:.55}
#ppp,#lp1,#lonp{stroke:#06070a;stroke-width:3;stroke-linejoin:round}
#leg{background:#0a0e1d;border-left:1px solid #1d2650;padding:56px 18px 18px;overflow:auto}
#leg h2{margin:0 0 4px;font-size:26px}#leg>p{margin:0 0 14px;color:var(--mut);font-size:15px}
#leg ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#leg li{display:flex;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;opacity:.5}
#leg li.cur{opacity:1;background:#0f3fa6}#leg li.done{opacity:.85}
#leg li span{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid #8fb0ff;display:grid;place-items:center;font-weight:700;font-size:14px}
#leg li.cur span{background:#fff;color:#0f3fa6;border-color:#fff}
#leg li b{display:block;font-size:17px}#leg li p{margin:2px 0 0;font-size:14px;color:#cdd9fb;display:none}#leg li.cur p,#leg li:hover p{display:block}
#tx,.tp .x{width:38px;height:38px;border-radius:50%;border:1px solid #3a4260;background:rgba(15,63,166,.5);color:#fff;font-size:16px;cursor:pointer}
#tx{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:5}
#ts{position:absolute;top:14px;left:50%;transform:translate(-50%,-160%);background:#0f3fa6;border-radius:99px;padding:8px 18px;font-weight:600;font-size:15px;transition:transform .3s;pointer-events:none;max-width:92%}
#ts.on{transform:translate(-50%,0)}
#pc{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#0f3fa6;border-radius:16px;padding:12px 16px;width:min(680px,94%)}
#pc[hidden]{display:none}#pc .bar{flex:1 1 120px;height:8px;background:rgba(0,0,0,.35);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#fff}
#pl{flex-basis:100%;font-size:14px;color:#dbe5ff}.sp{display:flex;gap:6px}
.tp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:90vh;overflow:auto;background:#10162b;border:1px solid #26305a;border-radius:20px;padding:22px;z-index:6;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
.tp[hidden]{display:none}.tp .x{position:absolute;top:10px;right:10px}
.tp h3{margin:0 0 6px;font-size:26px}.tp p{margin:0 0 8px;color:#c4cbe3}
.b2{background:none;color:var(--ink);border:1px solid #3a4260;border-radius:99px;padding:8px 16px;font:600 15px Inter,sans-serif;cursor:pointer}
#pc .b2{border-color:rgba(255,255,255,.5)}.b2.on{background:#fff;color:#05060a;border-color:#fff}.b2:disabled{opacity:.4;cursor:default}
.tp canvas{display:block;margin:12px auto;max-width:100%;background:#0b0e18;border-radius:12px;touch-action:none}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.sw{width:36px;height:36px;border-radius:12px;border:2px solid transparent;cursor:pointer}.sw.on{border-color:#fff}
.fi{display:grid;margin:10px 0}.fi div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.2);padding:6px 0;font-size:15px}.fi span{color:#cdd9fb}
@media(max-width:820px){#tl{grid-template-columns:1fr;grid-template-rows:1fr auto}#leg{border-left:0;border-top:1px solid #1d2650;max-height:34vh;padding-top:14px}#leg li p{display:none!important}#leg li.cur p{display:block!important}#tx{top:calc(env(safe-area-inset-top,0px) + 6px)}}
.cf{position:absolute;width:10px;height:10px;border-radius:3px;z-index:7;pointer-events:none;animation:cf 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.hn{display:block;text-align:center;color:#ffb48a;min-height:1.3em}
.tp canvas#sk{width:min(100%,360px);height:auto;cursor:crosshair}
@keyframes fk{0%{opacity:0}15%{opacity:1}25%{opacity:.2}40%{opacity:1}55%{opacity:.4}70%,100%{opacity:1}}

/* ---- estética nueva: ilustración plana, contornos gruesos, luz ámbar ---- */
#stage{background:#06070a radial-gradient(ellipse at 50% 40%,#0c1330,#06070a 70%)}
#sc{filter:drop-shadow(0 0 0 transparent)}
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#sc .hit:hover,#sc .hit:focus-visible{fill:rgba(255,200,120,.1);stroke:#ffb35a;stroke-width:4}
.bd circle{stroke:#06070a;stroke-width:4;fill:#0f3fa6}.bd circle:first-child{stroke:#ffb35a;stroke-width:3}.bd.cur circle:nth-child(2){fill:#ff7a3d}
.tb rect{fill:#06070a;stroke:#ffb35a;stroke-width:3}.tb text{fill:#ffd9a0;font:600 16px Inter,sans-serif;text-anchor:middle}.tb circle{stroke:#06070a;stroke-width:2}.tb:hover rect{fill:#0f3fa6}.tb{cursor:pointer}
#leg{background:#080b1c;border-left:3px solid #0f3fa6}
#leg li.cur{background:#0f3fa6;box-shadow:4px 4px 0 #06070a}#leg li.cur span{color:#0f3fa6}
.t2{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:2px dashed #1d2650}
.t2 .b2{display:flex;align-items:center;gap:10px;justify-content:center;border-width:2px;border-color:#ffb35a;color:#ffd9a0}.t2 .b2[aria-pressed=true]{background:#ffb35a;color:#06070a}
#fdt2{width:16px;height:16px;border-radius:50%;border:2px solid #06070a;box-shadow:0 0 0 1px #ffd9a0}
.tp{border:3px solid #0f3fa6;border-radius:16px;box-shadow:6px 6px 0 #06070a,0 0 0 100vmax rgba(0,0,0,.55);background:#0a0f26}
.tp.wide{width:min(860px,96vw)}
.rack{position:relative;margin:12px 0;border-radius:12px;overflow:hidden;border:3px solid #06070a}.rack img{display:block;width:100%;height:auto}
.sp8{position:absolute;background:transparent;border:3px solid transparent;border-radius:14px;cursor:pointer;padding:0}.sp8:hover,.sp8:focus-visible{border-color:#ffb35a;background:rgba(255,179,90,.12)}.sp8.on{border-color:#fff;background:rgba(255,255,255,.14)}
.btn{border:3px solid #06070a;box-shadow:3px 3px 0 #06070a}
.sw{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
@media(prefers-reduced-motion:reduce){#on,#lon,#cov,#scr,#pro{transition:none}.lit #on,#bf image,.bd.cur .pr{animation:none}}