/* Inscripción (/ y /g/<slug>): onboarding por slides, CSS copiado de docs/mockup-onboarding-v7.html y encerrado en body.insc. */
@keyframes spin{0%{content:"✢"}25%{content:"✳"}50%{content:"✶"}75%{content:"✻"}}
.esq{display:none}
.insc{
.cargando{display:none}
.esq{display:block}
.top,.pie{display:none}
main.wrap{max-width:none;padding:0;margin:0;min-height:0}
p{margin:0}
.info .lead{margin:0 0 20px}
.a.err .dot{color:var(--red)}
.flow a{word-break:break-all}
.inrow input{padding:0;margin:0;border:0;box-shadow:none;border-radius:0;width:auto}
.inrow input:focus-visible{outline:none}
.otop b,.otop .prog>span{white-space:nowrap}
.otop .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.otop .sub{display:none}.otop .prog .bar{width:90px}}

&{
  --paper:#D9DCD6; --card:#ffffff; --rule:rgba(17,17,17,.14); --ink:#111; --ink2:#3a3d38; --dim:#62665f;
  --win:#1B3FA0; --win-soft:rgba(27,63,160,.12); --ok:#1f6b45; --marcador:#FF9EC4;
  --term:#0c0c0c; --wt:#1b1b1b; --term-user:#1f1f1f; --term-fg:#d6d6d6; --term-mute:#9a9a9a; --term-dim:#6e6e6e; --term-q:#2f4f6f;
  --claude:#d97757; --green:#98c379; --red:#e06c75; --yellow:#e5c07b; --blue:#61afef;
  --mono:"JetBrains Mono","Cascadia Mono","Cascadia Code",Consolas,Menlo,ui-monospace,monospace;
  --sans:"Figtree",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --kalam:"Kalam",cursive; --caveat:"Caveat",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
&{margin:0;height:100%;background:var(--paper) repeating-linear-gradient(180deg,transparent 0 35px,rgba(27,63,160,.07) 35px 36px);color:var(--ink);font:16px/1.55 var(--sans);overflow:hidden}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600}
.otop{position:fixed;inset:0 0 auto 0;height:52px;display:flex;align-items:center;gap:16px;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));background:rgba(217,220,214,.95);border-bottom:1px solid rgba(27,63,160,.18);z-index:5;font-size:14px;color:var(--ink2)}
.otop b{color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px}
.otop .lg{display:flex;align-items:center;flex:none}.otop .lg img{height:24px;width:auto;display:block}
.otop .prog{margin-left:auto;display:flex;align-items:center;gap:10px;font:12px var(--mono)}
.otop .prog .bar{width:160px;height:8px;background:rgba(17,17,17,.1);border-radius:4px;overflow:hidden}
.otop .prog .bar i{display:block;height:100%;background:var(--marcador);transition:width .4s}
.stage{position:absolute;inset:52px 0 0 0;overflow:hidden}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(360px,1fr);gap:0;opacity:0;transform:translateX(40px);transition:opacity .35s,transform .35s;pointer-events:none;overflow:auto}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.out{transform:translateX(-40px)}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.info{padding:clamp(28px,5vh,64px) clamp(24px,4vw,72px) 40px max(24px,env(safe-area-inset-left,0px));min-width:0;display:flex;flex-direction:column;justify-content:center;max-width:980px}
.kick{font:400 clamp(20px,1.5vw,24px)/1.1 var(--kalam);color:var(--win);margin-bottom:14px;transform:rotate(-1.5deg);transform-origin:left}
.info h1{font:800 clamp(32px,3.8vw,60px)/1.02 var(--display);letter-spacing:-.03em;margin-bottom:18px;max-width:20ch}
.info h1::after{content:"";display:block;width:2.4em;height:.2em;margin-top:.22em;background:var(--marcador);border-radius:.06em .2em .1em .25em;transform:skewX(-8deg) rotate(-1deg)}
.info .lead{font-size:clamp(16px,1.25vw,19px);color:var(--ink2);margin:0 0 20px;max-width:58ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;max-width:760px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:4px;box-shadow:0 8px 18px -14px rgba(0,0,0,.4);padding:14px 16px}
.card b{display:block;font-weight:600;margin-bottom:4px}
.card span{color:var(--ink2);font-size:14px}
.card .n{font:700 20px/1 var(--caveat);color:var(--win);display:block;margin-bottom:6px}
.day{display:grid;grid-template-columns:72px 1fr;gap:8px 16px;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:16px 18px;max-width:620px}
.day b{font:400 17px/1.2 var(--kalam);color:var(--win);padding-top:2px}
.day .now{color:var(--win);font-weight:600}
.vs{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--card);max-width:620px}
.vs .h{font:400 17px var(--kalam);color:var(--win);background:#f3f4f1;padding:6px 14px}
.vs div{padding:10px 14px}
.vs .bad{color:var(--ink2);text-decoration:line-through;text-decoration-color:var(--red)}
.vs .good{border-top:1px solid var(--rule)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:620px}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:16px 18px}
.plan.rec{border-color:var(--win);box-shadow:4px 5px 0 -1px var(--marcador)}
.plan b{font:700 19px var(--display)}.plan .p{font:600 13px var(--mono);color:var(--ink2);margin:2px 0 8px}
.plan span{color:var(--ink2);font-size:14px}
.leg{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;background:var(--term);color:var(--term-fg);border-radius:8px;padding:14px 16px;font:13px/1.6 var(--mono);max-width:620px}
.leg span{color:var(--term-mute);font-family:var(--sans);font-size:14px}
.leg code{background:none;padding:0;border-radius:0;font-size:inherit}
.tcard{background:var(--term);color:var(--term-fg);border-radius:8px;padding:12px 16px;font:13px/1.7 var(--mono);max-width:620px}
.tcard .u::before{content:"❯ ";color:var(--term-mute)}
.tcard .a::before{content:"⏺ ";color:var(--term-fg)}.tcard .ok::before{content:"⏺ ";color:var(--green)}
.tcard .sub{color:var(--term-mute)}.tcard .sub::before{content:"⎿  ";color:var(--term-dim)}
.lvl{display:grid;gap:8px;max-width:620px}
.lvl div{display:grid;grid-template-columns:40px 1fr;gap:12px;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:10px 14px;font-size:15px}
.lvl div b{font:700 22px/1 var(--caveat);color:var(--win);padding-top:0}
.lvl div.now{border-color:var(--win)}
.biglink{font:500 clamp(16px,1.6vw,22px) var(--mono);background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;max-width:620px;word-break:break-all}
.legal{color:var(--ink2);font-size:12px;margin-top:28px;max-width:60ch}

/* consola del slide */
.cons{background:var(--term);color:var(--term-fg);font:13px/1.6 var(--mono);display:flex;flex-direction:column;min-width:0;border-left:1px solid #222}
.tabs{display:flex;align-items:center;gap:4px;background:var(--wt);padding:6px 10px 0;height:38px;color:var(--term-mute);font-size:12px;flex:none}
.tabs .tab{background:var(--term);padding:0 12px;height:32px;display:flex;align-items:center;gap:8px;border-radius:6px 6px 0 0;color:var(--term-fg)}
.tabs .tab::before{content:"✻";color:var(--claude)}
.tabs .r{margin-left:auto;color:var(--term-dim);padding-right:6px}
.flow{flex:1;overflow-y:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;min-width:0;scrollbar-width:thin;scrollbar-color:#333 transparent}
.u{background:var(--term-user);padding:3px 10px 3px 24px;position:relative;border-radius:2px;white-space:pre-wrap;word-break:break-word}
.u::before{content:"❯";position:absolute;left:8px;color:var(--term-mute)}
.a{display:grid;grid-template-columns:16px 1fr;gap:0 8px;padding:2px 0;min-width:0}
.a .dot{color:#e8e4dc}.a.ok .dot{color:var(--green)}.a.run .dot{color:var(--yellow)}
.a .sub{color:var(--term-mute);display:block;word-break:break-word}.a .sub::before{content:"⎿  ";color:var(--term-dim)}
.a .tag{color:var(--term-dim)}
.tool b{font-weight:500}.tool .arg{color:var(--term-mute)}
.diff div{padding:0 8px;font-size:12px;white-space:pre}
.diff .add{background:rgba(152,195,121,.14);color:var(--green)}.diff .del{background:rgba(224,108,117,.14);color:var(--red)}
.spin::before{content:"✻";color:var(--claude);animation:spin 1.2s steps(1) infinite;margin-right:6px}
@media (prefers-reduced-motion:reduce){.spin::before{animation:none}}
.q{margin-top:auto;padding:12px;border:1px solid #2a2a2a;border-radius:4px;background:#101010}
.q .hd{display:inline-block;background:var(--term-q);color:#cfe6ff;padding:0 6px;margin-bottom:8px}
.q .hd::before{content:"☐ "}
.q .txt{font-weight:700;margin-bottom:8px;font-size:14px}
.q .help{color:var(--term-mute);font-size:12px;margin-bottom:10px}
.q .o{display:grid;grid-template-columns:22px 1fr;gap:0 4px;color:var(--term-fg);padding:3px 0;cursor:pointer;border-radius:2px}
.q .o:hover{background:var(--term-user)}
.q .o .n{text-align:right;position:relative}
.q .o .dsc{color:var(--term-mute);display:block;font-size:12px}
.q .o.sel{color:#fff}
.q .o.sel .n::before{content:"❯";color:var(--claude);position:absolute;left:-12px}
.q .o .ck{color:var(--term-mute);margin-right:6px}.q .o .ck.on{color:var(--green)}
.inrow{display:flex;gap:8px;align-items:center;border:1px solid #3a3a3a;border-radius:4px;padding:8px 10px;background:var(--term)}
.inrow:focus-within{border-color:var(--claude)}
.inrow .gt{color:var(--claude)}
.inrow input{flex:1;min-width:0;background:transparent;border:0;color:var(--term-fg);font:14px var(--mono);outline:none;caret-color:var(--term-fg)}
.inrow input::placeholder{color:var(--term-dim)}
.q .ft{color:var(--term-dim);font-size:12px;margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 14px}
.q .ft button{background:none;border:0;color:var(--term-mute);font:12px var(--mono);padding:0;cursor:pointer;text-decoration:underline}
.btn{background:var(--claude);color:#1b0f0a;border:0;border-radius:4px;padding:7px 12px;font:600 12px var(--mono);cursor:pointer}
.btn:focus-visible,.q .o:focus-visible,.inrow input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.status{display:flex;flex-wrap:wrap;gap:4px 14px;padding:7px 16px 9px;color:var(--term-dim);font-size:11px;border-top:1px solid #1e1e1e;flex:none}
.status b{color:var(--term-mute);font-weight:500}
.g{color:var(--green)}.c{color:var(--claude)}.mu{color:var(--term-mute)}

@media (max-width:980px){
  &{overflow:auto;height:auto}
  .stage{position:static;inset:auto}
  .slide{position:static;grid-template-columns:1fr;display:none}
  .slide.on{display:grid}
  .info{padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));justify-content:flex-start}
  .cons{border-left:0;border-top:1px solid #222;min-height:60vh}
  .otop{position:sticky}
}
}