:root{
  --bg:#03040a; --glass:rgba(10,16,32,.55); --glass2:rgba(14,22,44,.72); --edge:rgba(120,190,255,.35);
  --txt:#eef3ff; --mute:#8d9bb8; --cyan:#3fd0ff; --blue:#2f7bff; --violet:#a855f7; --pink:#ff3d9a;
  --green:#22e58b; --yellow:#ffd23f; --red:#D60A0A; --red2:#ff2d3d;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:14px/1.35 Inter,system-ui,sans-serif;overflow:hidden}
button,input,select{font:inherit;color:inherit}
.hidden{display:none!important}
#stage,#css3d{position:fixed;inset:0}
#css3d{pointer-events:none}
#css3d *{pointer-events:none}

/* ---------- HUD */
.hud-top{position:fixed;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:none}
.live-tag{font:600 12px var(--mono);letter-spacing:.12em;display:flex;align-items:center;gap:8px;color:#fff;text-shadow:0 0 12px #000}
.live-tag i{width:9px;height:9px;border-radius:50%;background:var(--red2);box-shadow:0 0 12px var(--red2);animation:blink 1.2s infinite}
.live-tag span{color:var(--mute);letter-spacing:.04em}
.hud-proj{font:600 12px var(--mono);color:var(--mute)}

.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:14px;padding:8px 10px;border-radius:16px;
  background:rgba(8,12,24,.72);border:1px solid rgba(140,170,255,.18);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 20px 50px #000a;white-space:nowrap}
.dock-brand{display:flex;align-items:center;gap:8px;padding-right:6px}
.dock-brand b{width:30px;height:30px;border-radius:8px;background:var(--red);display:grid;place-items:center;font:20px "Archivo Black";box-shadow:0 0 16px #d60a0a99}
.dock-brand strong{display:block;font-size:12px}.dock-brand small{color:var(--mute);font-size:10px}
.dock-group{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid rgba(140,170,255,.14)}
.cam,.ghost,select{background:rgba(255,255,255,.04);border:1px solid rgba(140,170,255,.16);border-radius:10px;padding:7px 11px;font-size:12px;cursor:pointer;color:#dfe7ff}
.cam:hover,.ghost:hover{background:rgba(255,255,255,.09)}
.cam.on{background:rgba(63,208,255,.16);border-color:var(--cyan);color:#fff;box-shadow:0 0 14px rgba(63,208,255,.25)}
select{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,#9fb 50%),linear-gradient(135deg,#9fb 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat}
select option{background:#0b1020}
.pill-red,.pill-go{border:0;border-radius:10px;padding:8px 14px;font-weight:800;font-size:12px;cursor:pointer;text-decoration:none;color:#fff;display:inline-block}
.pill-red{background:linear-gradient(#ff2a3a,#b10a14);box-shadow:0 0 18px #ff2d3d66}
.pill-go{background:linear-gradient(#25e38f,#0d9b5c);color:#02140b;box-shadow:0 0 18px #22e58b55}
.pill-go:disabled{filter:grayscale(1);opacity:.5}
.status{font:600 11px var(--mono);color:var(--mute);padding:0 4px}
.status.busy{color:var(--green);text-shadow:0 0 10px #22e58b}

/* ---------- panel de montaje */
.drawer{position:fixed;top:14px;left:14px;bottom:86px;width:360px;z-index:7;display:flex;flex-direction:column;gap:12px;padding:16px;overflow:auto;
  background:linear-gradient(160deg,rgba(16,24,48,.82),rgba(6,10,22,.86));border:1px solid var(--edge);border-radius:18px;backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 0 0 1px rgba(63,208,255,.08),0 30px 80px #000c,inset 0 0 40px rgba(63,208,255,.05);transform:translateX(-400px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center}
.drawer header b{font:16px "Archivo Black";letter-spacing:.02em}
.row{display:flex;gap:8px;align-items:center}
.row select{flex:1;min-width:0}
.field span,.title-in span{display:block;font-size:11px;color:var(--mute);margin-bottom:4px}
.field input,.title-in input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(140,170,255,.18);border-radius:10px;padding:9px 11px}
.title-in input{margin-bottom:6px;text-transform:uppercase}
.title-in input:first-of-type{border-left:3px solid var(--red2)}
.drop{border:1.5px dashed rgba(63,208,255,.45);border-radius:14px;padding:18px 12px;text-align:center;cursor:pointer;transition:.2s;background:radial-gradient(rgba(63,208,255,.1),transparent 70%)}
.drop:hover,.drop.over{border-color:var(--cyan);background:radial-gradient(rgba(63,208,255,.25),transparent 70%);box-shadow:0 0 30px rgba(63,208,255,.25)}
.drop-ico{font-size:24px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.drop b{display:block;margin:4px 0}.drop small{color:var(--mute);font-size:11px}
.clips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.clips li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(140,170,255,.14);border-radius:12px;padding:6px;cursor:grab}
.clips li.dragging{opacity:.4}
.clips li .n{width:22px;height:22px;border-radius:7px;background:linear-gradient(var(--blue),#1747b8);display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.clips li .th{width:30px;height:44px;border-radius:5px;background:#000 center/cover;flex:none}
.clips li .nm{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clips li .nm small{display:block;color:var(--mute)}
.clips li .x{background:none;border:0;color:var(--mute);cursor:pointer;font-size:16px}
.clips li .x:hover{color:var(--red2)}
.clips li .bar{height:3px;background:var(--cyan);border-radius:2px;margin-top:3px}
.opts{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(140,170,255,.12);padding-top:12px}
.tog{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
.tog input{display:none}
.tog i{width:34px;height:20px;border-radius:999px;background:#25304a;position:relative;flex:none;transition:.2s}
.tog i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
.tog input:checked+i{background:var(--cyan);box-shadow:0 0 12px rgba(63,208,255,.5)}
.tog input:checked+i:after{left:17px}
.music{display:flex;flex-direction:column;gap:8px}
.mini-drop{border:1px dashed rgba(168,85,247,.5);border-radius:10px;padding:10px;text-align:center;font-size:12px;color:var(--mute);cursor:pointer}
.mini-drop.has{color:#fff;border-style:solid;border-color:var(--violet);box-shadow:0 0 14px rgba(168,85,247,.3)}
.vol{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.vol input{flex:1;accent-color:var(--violet)}
.vol em{font:11px var(--mono);color:#fff;font-style:normal}
.go{background:linear-gradient(#ff2a3a,#a8070f);border:0;border-radius:14px;padding:14px;font:17px "Archivo Black";letter-spacing:.06em;cursor:pointer;box-shadow:0 6px 0 #5a0408,0 0 34px #ff2d3d66;color:#fff}
.go:active{transform:translateY(4px);box-shadow:0 2px 0 #5a0408}
.go:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.result{border:1px solid var(--green);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;background:rgba(34,229,139,.07)}
.result b{color:var(--green);font-size:15px}.result span{font-size:12px;color:var(--mute)}

.drop-veil{position:fixed;inset:0;z-index:9;display:none;place-items:center;background:rgba(2,8,20,.6);backdrop-filter:blur(6px);pointer-events:none}
.drop-veil.on{display:grid}
.drop-veil div{font:28px "Archivo Black";color:#fff;border:2px dashed var(--cyan);border-radius:24px;padding:40px 60px;box-shadow:0 0 60px rgba(63,208,255,.35)}
.toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-90px);background:rgba(10,16,32,.9);border:1px solid var(--edge);border-radius:12px;padding:10px 16px;transition:.3s;z-index:10}
.toast.on{transform:translate(-50%,0)}
.loading{position:fixed;inset:0;z-index:20;display:grid;place-content:center;text-align:center;background:var(--bg);transition:opacity .8s}
.loading.off{opacity:0;pointer-events:none}
.big-h{font:96px/1 "Archivo Black";color:var(--red2);text-shadow:0 0 40px var(--red)}
.loading p{color:var(--mute);font:12px var(--mono);letter-spacing:.2em}

/* ---------- elementos 3D en HTML (holograma y tarjetas) */
.holo{width:1280px;height:720px;border:3px solid rgba(63,208,255,.9);border-radius:6px;padding:46px 54px;display:grid;grid-template-columns:330px 1fr 300px;grid-template-rows:auto 1fr;gap:44px;
  background:linear-gradient(180deg,rgba(10,30,70,.22),rgba(6,12,30,.38));box-shadow:0 0 40px rgba(63,208,255,.55),inset 0 0 80px rgba(63,208,255,.12);color:#fff;font-family:Inter}
.holo .h-head{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:-16px}
.holo .h-ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(var(--blue),#1747b8);display:grid;place-items:center;font:26px "Archivo Black";box-shadow:0 0 20px rgba(47,123,255,.7)}
.holo .h-head b{font:900 34px Inter;letter-spacing:-.01em}
.holo .h-head small{display:block;color:#9fb6e8;font-size:17px;font-weight:500}
.holo .h-live{margin-left:auto;font:700 16px var(--mono);color:#ff9fb0;display:flex;align-items:center;gap:8px}
.holo .h-live i{width:12px;height:12px;border-radius:50%;background:var(--red2);box-shadow:0 0 14px var(--red2);animation:blink 1.2s infinite}
.holo .count b{font:900 150px/1 Inter;letter-spacing:-.04em;background:linear-gradient(#fff,#a9c4ff);-webkit-background-clip:text;color:transparent}
.holo .count small{display:block;font-size:22px;color:#a9c4ff;font-weight:700;margin-top:4px}
.holo .count .spark{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:30px}
.holo .count .spark i{flex:1;background:linear-gradient(var(--blue),#123a8a);border-radius:3px;box-shadow:0 0 10px rgba(47,123,255,.6)}
.holo .count .now{margin-top:22px;font:600 16px var(--mono);color:#cfe0ff}
.holo .q h4,.holo .side h4{margin:0 0 14px;font:800 15px var(--mono);letter-spacing:.14em;color:#7fd6ff}
.holo .q .it{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin-bottom:12px}
.holo .q .it b{font-size:19px;display:flex;align-items:center;gap:10px}
.holo .q .it b i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.holo .q .it b span{color:#9fb6e8;font-weight:500;font-size:15px}
.holo .q .it em{font-style:normal;font-weight:800;font-size:16px;color:var(--c)}
.holo .q .it em.done{color:var(--green)}
.holo .q .it em.idle{color:#5d6b8c}
.holo .q .bars{grid-column:1/-1;display:flex;gap:5px;height:9px}
.holo .q .bars span{flex:1;border-radius:3px;background:rgba(255,255,255,.08);transition:.4s}
.holo .q .bars span.on{background:var(--c);box-shadow:0 0 8px var(--c)}
.holo .side{display:flex;flex-direction:column;align-items:center}
.phone{width:250px;aspect-ratio:9/16;border-radius:26px;padding:8px;background:linear-gradient(#1a2440,#070b16);box-shadow:0 0 0 2px rgba(63,208,255,.5),0 0 50px rgba(63,208,255,.35);position:relative}
.phone .scr{position:absolute;inset:8px;border-radius:20px;overflow:hidden;background:radial-gradient(#2a0a12,#000 70%)}
.phone img,.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone .ph-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:900 70px "Archivo Black";color:var(--red2);text-shadow:0 0 30px var(--red)}
.phone .ph-empty small{display:block;font:600 14px Inter;color:#cfd8ef;margin-top:10px;text-shadow:none;padding:0 18px}
.phone .ph-bar{position:absolute;left:18px;right:18px;bottom:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
.phone .ph-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .3s}
.side .ready{margin-top:16px;font:900 32px Inter;color:var(--green);text-shadow:0 0 20px rgba(34,229,139,.6);opacity:0;transform:translateY(10px);transition:.5s;text-align:center}
.side .ready.on{opacity:1;transform:none}
.side .ready small{display:block;font-size:15px;color:#9fe8c4;font-weight:600;text-shadow:none}

.card{width:440px;padding:20px 22px;border-radius:18px;border:2px solid var(--c);color:#fff;font-family:Inter;
  background:linear-gradient(160deg,rgba(18,28,58,.8),rgba(6,10,24,.88));box-shadow:0 0 34px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 30px color-mix(in srgb,var(--c) 14%,transparent);
  transition:opacity .6s;opacity:0}
.card.on{opacity:1}
.card .c-head{display:flex;align-items:center;gap:10px;font:800 23px Inter}
.card .c-head i{width:32px;height:32px;border-radius:9px;background:var(--c);display:grid;place-items:center;font-style:normal;font-size:17px;color:#001;box-shadow:0 0 14px var(--c)}
.card .c-head small{margin-left:auto;font:700 12px var(--mono);color:var(--c);letter-spacing:.1em;text-transform:uppercase}
.card .c-msg{font:500 15px var(--mono);color:#cfd8ef;margin-top:10px;min-height:40px;max-height:62px;overflow:hidden}
.card .c-viz{margin-top:12px;height:100px;position:relative}
.card .c-viz canvas{width:100%;height:100%;display:block}
.card .c-pct{font:900 66px/1 Inter;letter-spacing:-.03em;margin-top:6px}
.card .c-pbar{height:9px;border-radius:5px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.card .c-pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),#fff);box-shadow:0 0 12px var(--c);transition:width .4s}
.card.done{border-color:var(--green);--c:#22e58b}
.card.error{border-color:var(--red2);--c:#ff2d3d}
.tag{font:800 22px Inter;color:#fff;padding:6px 14px;border-radius:10px;background:rgba(5,10,24,.8);border:1.5px solid var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 50%,transparent);white-space:nowrap}
.tag small{font:600 14px var(--mono);color:var(--c);margin-left:8px}

@keyframes blink{50%{opacity:.25}}
@media (max-width:1100px){
  .dock{left:10px;right:10px;transform:none;flex-wrap:wrap;justify-content:center;white-space:normal}
  .dock-brand{display:none}.dock-group{border:0;padding:0}
  .drawer{width:min(360px,calc(100vw - 28px));bottom:150px}
}

/* ---------- barra de progreso total */
.progress{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);width:min(980px,calc(100vw - 40px));z-index:6;padding:10px 14px 12px;border-radius:14px;
  background:rgba(8,12,24,.72);border:1px solid rgba(140,170,255,.18);backdrop-filter:blur(16px);box-shadow:0 14px 40px #000a;opacity:0;pointer-events:none;transition:.45s}
.progress.on{opacity:1;transform:translate(-50%,0)}
.p-info{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;white-space:nowrap}
.p-info b{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.p-info span{font:600 12px var(--mono);color:var(--cyan);overflow:hidden;text-overflow:ellipsis;flex:1}
.p-info em{font:600 12px var(--mono);color:var(--mute);font-style:normal}
.p-info strong{font:900 20px Inter;min-width:56px;text-align:right}
.p-track{position:relative;height:12px;border-radius:7px;background:rgba(255,255,255,.07);overflow:hidden}
.p-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:7px;background:linear-gradient(90deg,#3fd0ff,#a855f7,#ff3d9a,#ffd23f,#22e58b);background-size:980px 100%;box-shadow:0 0 18px rgba(63,208,255,.6);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.p-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);width:120px;animation:shine 1.6s infinite}
.progress.done .p-fill:after{display:none}
.progress.done strong{color:var(--green)}
.p-steps{position:absolute;inset:0;display:flex}
.p-steps i{border-right:1px solid rgba(0,0,0,.55);height:100%}
@keyframes shine{from{transform:translateX(-120px)}to{transform:translateX(1000px)}}

/* ---------- panel de montaje: extras */
.drawer header small.crumb{display:block;font:600 11px var(--mono);color:var(--cyan);margin-bottom:2px}
.ghost.wide{width:100%;text-align:left}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg button{background:rgba(255,255,255,.04);border:1px solid rgba(140,170,255,.16);border-radius:10px;padding:8px;cursor:pointer;font-size:12px;font-weight:700;text-align:left}
.seg button small{display:block;font-weight:500;color:var(--mute);font-size:10px}
.seg button.on{border-color:var(--cyan);background:rgba(63,208,255,.14);box-shadow:0 0 14px rgba(63,208,255,.2)}

/* ---------- biblioteca */
.lib-veil{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(2,5,14,.55);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:.35s}
.lib-veil.on{opacity:1;pointer-events:auto}
.lib{width:min(1180px,calc(100vw - 40px));height:min(720px,calc(100vh - 140px));display:grid;grid-template-columns:290px 1fr;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(16,24,50,.9),rgba(5,8,20,.94));border:1px solid var(--edge);box-shadow:0 0 0 1px rgba(63,208,255,.08),0 40px 120px #000d,0 0 80px rgba(63,208,255,.12);transform:scale(.97);transition:.35s}
.lib-veil.on .lib{transform:none}
.lib-side{border-right:1px solid rgba(140,170,255,.12);padding:20px 14px;display:flex;flex-direction:column;gap:14px;min-height:0}
.lib-title b{font:20px "Archivo Black"}.lib-title small{display:block;color:var(--mute);font-size:12px}
.folders{display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1}
.folder{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.15s}
.folder:hover{background:rgba(255,255,255,.05)}
.folder.on{background:color-mix(in srgb,var(--c) 14%,transparent);border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--c) 25%,transparent)}
.folder .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--c) 22%,#0a0f1e);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);flex:none}
.folder .fn{flex:1;min-width:0}
.folder .fn b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder .fn small{color:var(--mute);font-size:11px}
.folder .fmt{font:600 9px var(--mono);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);border-radius:6px;padding:2px 5px}
.new-folder{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(140,170,255,.12);padding-top:12px}
.new-folder input{background:rgba(255,255,255,.05);border:1px solid rgba(140,170,255,.18);border-radius:10px;padding:9px 11px}
.nf-row{display:flex;gap:6px}.nf-row select:first-child{width:62px}.nf-row select:nth-child(2){flex:1;min-width:0}
.lib-main{display:flex;flex-direction:column;min-height:0;padding:20px 22px}
.lib-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.lib-head small{font:600 11px var(--mono);color:var(--cyan)}
.lib-head h2{margin:0;font:900 26px Inter;letter-spacing:-.01em}
.tabs{margin-left:auto;display:flex;gap:4px;background:rgba(255,255,255,.04);padding:4px;border-radius:12px;border:1px solid rgba(140,170,255,.12)}
.tabs button{background:none;border:0;border-radius:9px;padding:7px 12px;cursor:pointer;font-weight:700;font-size:12px;color:var(--mute)}
.tabs button.on{background:rgba(63,208,255,.16);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;overflow:auto;padding:2px 4px 8px;align-content:start}
#tabRefs{display:flex;flex-direction:column;gap:14px;min-height:0;flex:1}
#tabRefs.hidden{display:none!important}
.vcard{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#0a0f1e;border:1px solid rgba(140,170,255,.14);transition:.2s;aspect-ratio:9/14}
.vcard.h{aspect-ratio:16/12}
.vcard:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 0 24px rgba(63,208,255,.3)}
.vcard .im{position:absolute;inset:0;background:radial-gradient(#1b0a12,#05070f 70%) center/cover}
.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard .shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.9))}
.vcard .num{position:absolute;top:10px;left:10px;font:900 22px Inter;text-shadow:0 2px 10px #000}
.vcard .st{position:absolute;top:10px;right:10px;font:700 10px var(--mono);padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid #fff3}
.vcard .st.listo{color:var(--green);border-color:var(--green)}.vcard .st.trabajando{color:var(--cyan);border-color:var(--cyan)}.vcard .st.error{color:var(--red2);border-color:var(--red2)}
.vcard .meta{position:absolute;left:12px;right:12px;bottom:10px}
.vcard .meta b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .meta small{color:#b9c6e6;font-size:11px}
.vcard .del{position:absolute;bottom:10px;right:10px;opacity:0;background:rgba(0,0,0,.6);border:1px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;padding:3px 7px;font-size:12px}
.vcard:hover .del{opacity:1}
.vcard.new{display:grid;place-content:center;text-align:center;border:1.5px dashed rgba(63,208,255,.5);background:radial-gradient(rgba(63,208,255,.12),transparent 70%)}
.vcard.new b{font:900 40px Inter;color:var(--cyan);text-shadow:0 0 18px var(--cyan)}
.vcard.new span{font-weight:800}
.vcard.new small{color:var(--mute);font-size:11px}
.small-drop{padding:16px}
.empty{grid-column:1/-1;color:var(--mute);text-align:center;padding:40px;font-size:13px}
.viewer{position:fixed;inset:0;z-index:11;background:rgba(0,0,0,.85);display:none;place-items:center;gap:12px}
.viewer.on{display:grid}
.viewer video{max-width:90vw;max-height:80vh;border-radius:14px;box-shadow:0 0 60px rgba(63,208,255,.3)}
.phone.h{width:300px;aspect-ratio:16/9;border-radius:16px;margin-top:120px}
.phone.h .scr{border-radius:10px}
.phone.h .ph-empty{font-size:44px}

/* ================= ZypixAI ================= */
.zx-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:20px "Archivo Black";color:#fff;
  background:linear-gradient(135deg,#3fd0ff,#7c5cff 50%,#ff3d9a);box-shadow:0 0 18px rgba(124,92,255,.6)}
.zx-logo.big{width:64px;height:64px;border-radius:18px;font-size:42px}
.dock-brand b.zx-logo{background:linear-gradient(135deg,#3fd0ff,#7c5cff 50%,#ff3d9a)}
.hud-right{display:flex;align-items:center;gap:8px;pointer-events:auto}
.mini-sel{padding:5px 22px 5px 8px;font-size:11px;border-radius:8px}
.ghost.mini{padding:5px 9px;font-size:11px}

/* acceso */
.gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;transition:opacity .7s}
.gate.off{opacity:0;pointer-events:none}
.gate-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 20% 10%,rgba(124,92,255,.35),transparent 50%),radial-gradient(ellipse at 85% 90%,rgba(255,61,154,.25),transparent 50%),
  radial-gradient(ellipse at 50% 50%,rgba(63,208,255,.12),transparent 60%),#02030a}
.gate-bg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 90px),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 90px);mask:radial-gradient(ellipse,#000 30%,transparent 75%)}
.gate-card{position:relative;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 30px;border-radius:24px;
  background:linear-gradient(160deg,rgba(18,24,48,.75),rgba(6,8,20,.85));border:1px solid rgba(140,170,255,.2);backdrop-filter:blur(20px);box-shadow:0 40px 120px #000c,0 0 80px rgba(124,92,255,.2)}
.gate-logo{display:flex;align-items:center;gap:14px}
.gate-logo span{font:40px "Archivo Black";letter-spacing:.04em}
.gate-logo em{font-style:normal;background:linear-gradient(90deg,#3fd0ff,#ff3d9a);-webkit-background-clip:text;color:transparent}
.gate-tag{margin:0;color:var(--mute);font-size:13px;text-align:center}
.gate h2{margin:6px 0 2px;font:900 22px Inter;text-align:center}
#gateWelcome,#authForm{width:100%;display:flex;flex-direction:column;gap:10px}
#gateWelcome.hidden,#authForm.hidden{display:none}
.gate input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(140,170,255,.2);border-radius:12px;padding:12px 14px;font-size:14px}
.gate input:focus{outline:0;border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.25)}
.gate .go{background:linear-gradient(135deg,#3fd0ff,#7c5cff 55%,#ff3d9a);box-shadow:0 6px 0 #2a1b66,0 0 34px rgba(124,92,255,.5)}
.gate .err{margin:0;min-height:16px;color:#ff7a88;font-size:12px;text-align:center}
.link{background:none;border:0;color:#9fb6e8;cursor:pointer;font-size:12px;text-decoration:underline}

/* intro tipo plataforma de streaming */
.intro{position:fixed;inset:0;z-index:40;background:#000;display:none;place-items:center;overflow:hidden}
.intro.on{display:grid}
.intro.out{animation:introOut .8s forwards}
.zx-intro{position:relative;display:grid;place-items:center}
.zx-mark{animation:zIn 3.3s cubic-bezier(.2,.8,.2,1) forwards}
.zx-z{display:block;font:260px/1 "Archivo Black";background:linear-gradient(135deg,#3fd0ff,#7c5cff 50%,#ff3d9a);-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(124,92,255,.8)) drop-shadow(0 0 90px rgba(255,61,154,.45))}
.zx-word{position:absolute;top:calc(50% + 150px);font:34px "Archivo Black";letter-spacing:.5em;color:#fff;opacity:0;animation:wordIn 3.3s forwards;text-shadow:0 0 30px rgba(124,92,255,.8)}
.zx-word b{background:linear-gradient(90deg,#3fd0ff,#ff3d9a);-webkit-background-clip:text;color:transparent}
.zx-rays{position:absolute;inset:-50vmax;display:grid;place-items:center;opacity:0;animation:raysIn 3.3s forwards}
.zx-rays i{position:absolute;width:4px;height:60vmax;transform-origin:50% 0;top:50%;left:calc(50% - 2px);transform:rotate(calc(var(--i)*12.86deg));
  background:linear-gradient(rgba(124,92,255,.9),transparent 70%);filter:blur(2px)}
.zx-rays i:nth-child(3n){background:linear-gradient(rgba(63,208,255,.9),transparent 70%)}
.zx-rays i:nth-child(4n){background:linear-gradient(rgba(255,61,154,.9),transparent 70%)}
@keyframes zIn{0%{transform:scale(.2);opacity:0;filter:blur(20px)}14%{transform:scale(1.12);opacity:1;filter:blur(0)}22%{transform:scale(1)}75%{transform:scale(1.05)}100%{transform:scale(7);opacity:0;filter:blur(6px)}}
@keyframes wordIn{0%,20%{opacity:0;letter-spacing:1.2em}38%,72%{opacity:1;letter-spacing:.5em}100%{opacity:0}}
@keyframes raysIn{0%,12%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:.8}100%{opacity:0;transform:scale(1.6) rotate(25deg)}}
@keyframes introOut{to{opacity:0}}

/* conversación con los agentes */
.chat{position:fixed;right:16px;top:56px;bottom:150px;width:380px;z-index:7;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(16,24,48,.85),rgba(5,8,20,.9));border:1px solid var(--edge);backdrop-filter:blur(18px);box-shadow:0 30px 80px #000c,0 0 40px rgba(124,92,255,.15);
  transform:translateX(420px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.chat.open{transform:none}
.chat header{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.chat .who{flex:1;display:flex;align-items:center;gap:10px;font-weight:800}
.chat .who i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;color:#001;background:var(--c);box-shadow:0 0 14px var(--c)}
.chat .who small{display:block;font:600 11px var(--mono);color:var(--c)}
.team{display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto}
.team button{flex:none;width:34px;height:34px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);background:rgba(0,0,0,.3);color:#fff;font-weight:800;cursor:pointer}
.team button.on{background:var(--c);color:#001;box-shadow:0 0 12px var(--c)}
.msgs{flex:1;overflow:auto;padding:6px 14px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4;animation:in .25s}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#2f7bff,#7c5cff);border-bottom-right-radius:4px}
.msg.ag{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-bottom-left-radius:4px}
.msg.ag b{display:block;font:700 10px var(--mono);color:var(--c);margin-bottom:2px}
.msg.sys{align-self:center;font:600 11px var(--mono);color:var(--mute);background:none}
.msg.act{align-self:center;font:600 11px var(--mono);color:var(--green);border:1px solid rgba(34,229,139,.4);background:rgba(34,229,139,.08)}
.say{display:flex;gap:6px;padding:10px 12px 12px;border-top:1px solid rgba(140,170,255,.12)}
.say input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(140,170,255,.2);border-radius:10px;padding:9px 11px}
.mic{width:40px;border-radius:10px;border:1px solid rgba(140,170,255,.25);background:rgba(255,255,255,.05);cursor:pointer;font-size:16px}
.mic.rec{background:var(--red2);border-color:var(--red2);box-shadow:0 0 0 0 rgba(255,45,61,.7);animation:pulseRec 1.2s infinite}
@keyframes pulseRec{70%{box-shadow:0 0 0 12px rgba(255,45,61,0)}100%{box-shadow:0 0 0 0 rgba(255,45,61,0)}}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.chat-fab{position:fixed;right:18px;bottom:96px;z-index:6;width:52px;height:52px;border-radius:16px;border:0;cursor:pointer;font-size:22px;
  background:linear-gradient(135deg,#3fd0ff,#7c5cff 55%,#ff3d9a);box-shadow:0 0 30px rgba(124,92,255,.6)}
.chat.open ~ .chat-fab{display:none}
.tag{transition:transform .2s, box-shadow .2s}
.tag.hot{transform:scale(1.18);box-shadow:0 0 30px var(--c),0 0 0 2px var(--c)}
.hover-tip{position:fixed;z-index:12;pointer-events:none;padding:7px 11px;border-radius:10px;font:700 12px Inter;color:#fff;background:rgba(6,10,22,.9);border:1px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 50%,transparent);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.hover-tip.on{opacity:1;transform:none}
.nav-hint{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:5;font:600 11px var(--mono);color:var(--mute);pointer-events:none;opacity:.8}
.progress.on ~ .nav-hint,.progress.on + .nav-hint{display:none}
.intro canvas{position:absolute;inset:0;display:block}
.zx-word2{position:absolute;left:0;right:0;top:calc(50% + min(31vw,31vh) * .62);text-align:center;font:30px "Archivo Black";letter-spacing:.55em;color:#fff;opacity:0;text-shadow:0 0 30px rgba(124,92,255,.9)}
.zx-word2 b{background:linear-gradient(90deg,#3fd0ff,#ff3d9a);-webkit-background-clip:text;color:transparent}
#css3d .tag{pointer-events:auto}