:root{--bg:#0B1020;--cyan:#0A84FF;--purple:#7B2CFF;--card:#12182A;--text:#FFFFFF;--muted:#A1A7B3;}
*{box-sizing:border-box}body{margin:0;font-family:Sora,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;}
a{color:var(--cyan)} .top{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #1c2433;flex-wrap:wrap;}
.brand{display:flex;align-items:center;text-decoration:none}.brand img{height:44px;width:44px;object-fit:contain;display:block}
.top nav{display:flex;gap:1rem;font-size:.9rem}
.hero-split{display:grid;gap:1.25rem;align-items:center}
@media(min-width:840px){.hero-split{grid-template-columns:1.1fr .9fr}main{max-width:1080px}}
.hero-visual{width:min(100%,360px);height:auto;margin:0 auto;display:block;filter:drop-shadow(0 0 28px rgba(10,132,255,.28))}
.cta-top,.hero-form button,button{background:transparent;color:var(--cyan);border:1px solid var(--cyan);padding:.55rem 1rem;border-radius:8px;cursor:pointer;}
main{max-width:920px;margin:0 auto;padding:2rem 1.25rem 4rem;display:flex;flex-direction:column;gap:1.5rem;}
h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;margin:.2rem 0 1rem;}
.lead{color:var(--muted);max-width:40rem}.hero-form{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0}
input,textarea{flex:1;min-width:16rem;background:#0e1420;border:1px solid #2a3548;color:var(--text);padding:.6rem .7rem;border-radius:8px;}
.trust{color:var(--muted);font-size:.85rem}.card{background:var(--card);border:1px solid #243044;border-radius:16px;padding:1.25rem 1.4rem;}
.grid3,.grid4{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid3 article,.grid4 article{background:var(--card);border:1px solid #243044;border-radius:14px;padding:1rem}
.grid4{margin-top:1rem}.grid4 h3{margin:.2rem 0 .4rem;font-size:.98rem}.grid4 p{color:var(--muted);margin:0;font-size:.88rem}
.demo-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.demo-chips button{font-size:.8rem;padding:.35rem .7rem}
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:.8rem 0 .4rem}
.flow-node{flex:1 1 7.5rem;min-width:7.5rem;border:1px solid #2a3548;border-radius:10px;padding:.7rem .75rem;background:#12182A}
.flow-node strong{display:block;color:var(--cyan);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.25rem}
.flow-node span{display:block;font-size:.86rem;color:#d7dbe3}
.flow-edge{flex:0 0 1.6rem;position:relative;min-height:2.4rem}
.flow-edge i{position:absolute;left:50%;top:1.15rem;width:1.6rem;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple));transform:translateX(-50%)}
.flow-edge i::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:#7dffa6;box-shadow:0 0 10px #7dffa6;animation:pkt 1.6s linear infinite}
@keyframes pkt{0%{left:0;opacity:.3}40%{opacity:1}100%{left:calc(100% - 8px);opacity:.2}}
.blueprint,.opt{border:1px solid #2a3548;border-radius:10px;padding:.8rem;margin:.4rem 0;background:#0e1420}
.opt{cursor:pointer;display:block;text-align:left;width:100%}.opt.is-on{border-color:var(--cyan)}
.muted{color:var(--muted)}.sr{position:absolute;left:-9999px}
.q-nav{display:flex;gap:.5rem;margin-top:1rem}
.malla-niveles{display:flex;flex-direction:column;gap:1.1rem;margin-top:1rem}
.nivel{border:1px solid #243044;border-radius:14px;padding:1rem 1.1rem;background:#0e1420}
.nivel h3{margin:0 0 .35rem;font-size:1.05rem}
.nivel .resumen{color:var(--muted);font-size:.9rem;margin:0 0 .85rem}
.mods{display:grid;gap:.55rem}@media(min-width:700px){.mods{grid-template-columns:1fr 1fr}}
.mod{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .75rem;border-radius:10px;border:1px solid #2a3548;background:#12182A}
.mod img{width:72px;height:40px;object-fit:cover;border-radius:6px;flex:none;background:#0B1020}
.mod-code{flex:none;background:rgba(10,132,255,.16);color:var(--cyan);font-weight:700;font-size:.75rem;padding:.18rem .4rem;border-radius:6px}
.mod h4{margin:0;font-size:.92rem;font-weight:600;line-height:1.3}
.badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:999px;margin-left:.3rem;vertical-align:middle}
.badge-ok{background:rgba(125,255,166,.14);color:#7dffa6}
.badge-soon{background:rgba(161,167,179,.12);color:var(--muted)}
.steps{list-style:none;padding:0;margin:1rem 0}
.steps li{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid #243044}
.mark{width:1.3rem;height:1.3rem;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.75rem;margin-top:.1rem}
.mark-on{background:var(--cyan);color:#fff}
.mark-off{border:1px solid #3a4558;color:transparent}
.ruta-mods{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1rem}
.chip{background:#0e1420;border:1px solid #2a3548;border-radius:999px;padding:.28rem .7rem;font-size:.82rem}
.result h3{margin-top:.2rem}.preview{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid #243044}
.preview h3{margin-top:0}#l11-demo h2{font-size:1.05rem;margin:1rem 0 .4rem}
#l11-demo p,#l11-demo li{color:#d7dbe3}#l11-demo .muted{color:var(--muted)}
.invite{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;max-width:28rem}
.invite-ok{margin-top:.75rem;padding:.85rem 1rem;border:1px solid rgba(10,132,255,.45);border-radius:10px;background:rgba(10,132,255,.08)}
.invite-ok p{margin:.2rem 0 .55rem;color:#d7dbe3}
.invite-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .2rem}