/* Ianora · El Setter · estilos (oscuro, violeta → azul de Ianora; docs/brand/ianora.md del repo KeyClosers-ops). */
:root{
  color-scheme:dark;
  --bg0:#06060C; --bg1:#0A0A12;
  --panel:rgba(255,255,255,.028); --panel-2:rgba(255,255,255,.05); --panel-hi:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-hi:rgba(139,92,246,.38);
  --ink:#F1F3F9; --ink-2:#C2C7D6; --muted:#8E93A6; --dim:#848A9C;
  --neon:#8B5CF6; --neon-2:#6D6BF8; --neon-soft:rgba(139,92,246,.14); --neon-glow:rgba(139,92,246,.40);
  --cyan:#3B82F6; --cyan-soft:rgba(59,130,246,.14); --amber:#FFC24B; --amber-soft:rgba(255,194,75,.12);
  --orange:#FF9A4D; --orange-soft:rgba(255,154,77,.13); --red:#FF5E5E; --red-soft:rgba(255,94,94,.13); --violet:#A58BFF;
  --wa-bg:#0B141A; --wa-in:#1F2C33; --wa-out:#005C4B; --wa-ink:#E9EDEF; --wa-meta:#8696A0;
  --display:"Inter","Segoe UI",system-ui,sans-serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:16px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
svg[aria-hidden="true"]{width:1.1em; height:1.1em; flex:none; vertical-align:-.18em}
.wsbtn>svg{width:16px; height:16px; color:var(--muted)}
html,body{min-height:100%}
body{margin:0; background:var(--bg0); color:var(--ink); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(900px 520px at 12% -8%, rgba(139,92,246,.10), transparent 60%), radial-gradient(760px 480px at 100% 0%, rgba(59,130,246,.07), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0) 60%)}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(1100px 700px at 50% 0%, #000 20%, transparent 75%); mask-image:radial-gradient(1100px 700px at 50% 0%, #000 20%, transparent 75%)}
button,select,input,textarea{font:inherit; color:inherit}
a{color:var(--neon); text-decoration:none} a:hover{text-decoration:underline}
::selection{background:rgba(139,92,246,.3)}
:focus-visible{outline:2px solid var(--neon); outline-offset:2px; border-radius:8px}
::-webkit-scrollbar{width:10px; height:10px} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08); border-radius:99px; border:2px solid transparent; background-clip:padding-box}
[hidden]{display:none!important}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.mono{font-family:var(--mono)} .muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12.5px}
.view{animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes bIn{from{opacity:0; transform:translateY(10px) scale(.94)} to{opacity:1; transform:none}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(139,92,246,.45)} 80%,100%{box-shadow:0 0 0 8px rgba(139,92,246,0)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.55)} 80%,100%{box-shadow:0 0 0 10px rgba(139,92,246,0)}}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}}

/* ─── controles ─── */
.btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; font-weight:600; font-size:13px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); transition:transform .15s var(--ease), background .2s, border-color .2s, box-shadow .25s, opacity .2s; white-space:nowrap}
.btn svg{width:16px; height:16px; flex:none}
.btn:hover{background:var(--panel-hi); border-color:rgba(255,255,255,.2); text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.38; cursor:not-allowed; transform:none}
.btn:focus-visible,.nav button:focus-visible,.tabs button:focus-visible,.mode:focus-visible,.fstep:focus-visible,.menu button:focus-visible,.send:focus-visible,.wsbtn:focus-visible,.dropzone:focus-visible{outline:2px solid var(--neon); outline-offset:2px}
.btn.primary{color:#FFFFFF; background:linear-gradient(135deg, #8B5CF6, #3B82F6); border-color:transparent; box-shadow:0 0 0 1px rgba(139,92,246,.5) inset, 0 8px 26px -10px var(--neon-glow)}
.btn.primary:hover{box-shadow:0 0 0 1px rgba(139,92,246,.6) inset, 0 10px 34px -8px rgba(139,92,246,.55)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2)} .btn.ghost:hover{background:var(--panel-2); color:var(--ink)}
.btn.danger{color:#FFB3B3; border-color:rgba(255,94,94,.3); background:rgba(255,94,94,.08)}
.btn.sm{height:30px; padding:0 10px; font-size:12px; border-radius:9px}
.btn.lg{height:44px; padding:0 18px; font-size:14px; border-radius:12px}
.btn.icon{width:36px; padding:0} .btn.sm.icon{width:30px}
.btn.block{width:100%}
.input,.select,.textarea{width:100%; min-width:0; background:rgba(0,0,0,.25); border:1px solid var(--line-2); border-radius:10px; color:var(--ink); font-size:13.5px; transition:border-color .2s, box-shadow .2s}
.input,.select{height:40px; padding:0 12px}
.textarea{padding:10px 12px; resize:vertical; min-height:90px; line-height:1.5}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--line-hi); box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.select{appearance:none; -webkit-appearance:none; padding-right:34px; background:rgba(0,0,0,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23B5C4BA' stroke-width='2'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 12px center; cursor:pointer}
.select option{background:#12121F}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label,.label{font-size:12px; font-weight:600; color:var(--ink-2)}
.field .help{font-size:12px; color:var(--dim)}
.check{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--ink-2)}
.check input{width:16px; height:16px; accent-color:#8B5CF6}
.switch{position:relative; width:40px; height:22px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,.12); transition:.25s; cursor:pointer}
.switch span::after{content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.3s var(--spring)}
.switch input:checked+span{background:var(--neon-2)} .switch input:checked+span::after{transform:translateX(18px)}
.tag{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap; border:1px solid transparent}
.tag i{width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor}
.t-good{color:var(--neon); background:var(--neon-soft); border-color:rgba(139,92,246,.2)} .t-info{color:var(--ink-2); background:var(--panel-2); border-color:var(--line)}
.t-cyan{color:var(--cyan); background:var(--cyan-soft); border-color:rgba(59,130,246,.2)} .t-warn{color:var(--amber); background:var(--amber-soft); border-color:rgba(255,194,75,.2)}
.t-ser{color:var(--orange); background:var(--orange-soft); border-color:rgba(255,154,77,.22)} .t-crit{color:var(--red); background:var(--red-soft); border-color:rgba(255,94,94,.22)}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grow{flex:1; min-width:0}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
@media (max-width:980px){.grid2,.grid3,.editor,.sim{grid-template-columns:minmax(0,1fr)!important}}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.empty{color:var(--dim); font-size:13px; padding:12px 2px}
.spin{width:16px; height:16px; border-radius:50%; border:2px solid rgba(139,92,246,.25); border-top-color:var(--neon); animation:rot .8s linear infinite; flex:none}
.skel{height:14px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size:200% 100%; animation:sh 1.3s infinite}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); opacity:0; z-index:200; padding:10px 16px; border-radius:12px; background:rgba(20,34,26,.96); border:1px solid var(--line-hi); box-shadow:0 20px 50px -20px #000; font-size:13px; transition:all .35s var(--spring); pointer-events:none; max-width:min(560px, 92vw)}
.toast.on{opacity:1; transform:translate(-50%, 0)} .toast.bad{border-color:rgba(255,94,94,.45)}

/* ─── paneles ─── */
.panel{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; min-width:0}
.panel::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%)}
.panel>*{position:relative}
.ph{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.ph h2{margin:0; font:600 12px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.ph h2 svg{width:15px; height:15px; color:var(--neon)}
.hint{font-size:12px; color:var(--dim)}
.kpi{padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line); min-width:0}
.kpi span{display:block; font:500 10.5px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.kpi b{display:block; margin-top:6px; font:600 22px/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kpi small{display:block; margin-top:4px; font-size:11.5px; color:var(--muted)}
.tele{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
@media (max-width:760px){.tele{grid-template-columns:repeat(2, minmax(0,1fr))}}
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px}
.stat{padding:16px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden}
.stat::after{content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:var(--c, var(--neon)); opacity:.1; filter:blur(12px)}
.stat span{display:block; font:500 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.stat b{display:block; margin-top:10px; font:700 32px/1 var(--display); letter-spacing:-.03em; color:var(--c, var(--ink)); font-variant-numeric:tabular-nums}
.stat small{display:block; margin-top:6px; font-size:12px; color:var(--muted)}
table{width:100%; border-collapse:collapse; font-size:13px}
th{font:500 10.5px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0} tbody tr:hover{background:rgba(255,255,255,.02)}
.tw{overflow-x:auto}
.hb{display:grid; grid-template-columns:minmax(90px,190px) minmax(0,1fr) 80px; gap:10px; align-items:center; font-size:12.5px; padding:5px 0}
.hb .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.hb .t{height:8px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden}
.hb .t span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--cyan), var(--neon)); width:0; transition:width .9s var(--ease)}
.hb .v{font:500 12px var(--mono); text-align:right}
.code{white-space:pre-wrap; margin:0; font:12.5px/1.6 var(--mono); color:var(--ink-2); background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:12px; padding:14px; max-height:560px; overflow:auto}
.note{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:12px; font-size:12.5px; border:1px solid var(--line); background:var(--panel)}
.note svg{width:16px; height:16px; flex:none; margin-top:2px}
.note.warn{border-color:rgba(255,194,75,.22); background:linear-gradient(90deg, rgba(255,194,75,.09), rgba(255,194,75,.02)); color:#F4D48E} .note.warn svg{color:var(--amber)}
.note.good{border-color:rgba(139,92,246,.22); background:linear-gradient(90deg, rgba(139,92,246,.08), rgba(139,92,246,.01)); color:#DCD2FB} .note.good svg{color:var(--neon)}
.note.crit{border-color:rgba(255,94,94,.25); background:rgba(255,94,94,.07); color:#FFC4C4} .note.crit svg{color:var(--red)}

/* ─── autenticación ─── */
.auth{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)}
@media (max-width:980px){.auth{grid-template-columns:minmax(0,1fr)} .auth-art{display:none}}
.auth-art{position:relative; overflow:hidden; padding:48px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); background:radial-gradient(700px 500px at 20% 20%, rgba(139,92,246,.14), transparent 60%), radial-gradient(600px 500px at 80% 90%, rgba(59,130,246,.1), transparent 60%)}
.auth-art .orb{position:absolute; width:520px; height:520px; border-radius:50%; right:-160px; top:18%; background:conic-gradient(from 0deg, rgba(139,92,246,.0), rgba(139,92,246,.35), rgba(59,130,246,.25), rgba(139,92,246,0)); filter:blur(40px); animation:rot 18s linear infinite; opacity:.6}
.auth-art h1{position:relative; margin:0; font:800 clamp(34px, 4vw, 54px)/1.02 var(--display); letter-spacing:-.035em; max-width:14ch}
.auth-art h1 em{font-style:normal; background:linear-gradient(90deg, #8B5CF6, #3B82F6); -webkit-background-clip:text; background-clip:text; color:transparent}
.auth-art p.lead{position:relative; color:var(--ink-2); font-size:16px; max-width:46ch; margin:18px 0 0}
.auth-feats{position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:34px; max-width:560px}
.auth-feat{padding:14px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.2); backdrop-filter:blur(6px)}
.auth-feat b{display:block; font-size:13.5px} .auth-feat span{font-size:12.5px; color:var(--muted)}
.auth-form{display:grid; place-items:center; padding:32px 20px}
.auth-card{width:min(420px, 100%); display:flex; flex-direction:column; gap:16px; animation:viewIn .5s var(--ease)}
.auth-card h2{margin:0; font:700 26px/1.1 var(--display); letter-spacing:-.02em}
.auth-card p{margin:0; color:var(--muted)}
.brand{display:flex; align-items:center; gap:11px}
.mark{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%, #A78BFA, #6D6BF8 45%, #4C1D95); box-shadow:0 0 0 1px rgba(139,92,246,.4), 0 8px 30px -8px var(--neon-glow); flex:none}
.mark svg{width:20px; height:20px; color:#FFFFFF}
.brand b{display:block; font:800 17px/1 var(--display); letter-spacing:-.02em}
.brand small{display:block; margin-top:4px; font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--neon)}
.divider{display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12px} .divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.pwd{position:relative} .pwd .btn{position:absolute; right:4px; top:4px; height:32px}
.strength{height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden} .strength span{display:block; height:100%; width:0; transition:width .4s var(--ease), background .4s}

/* ─── app ─── */
.app{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; padding:18px 14px; display:flex; flex-direction:column; gap:18px; border-right:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); overflow-y:auto}
.wsbox{position:relative}
.wsbtn{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.wsbtn:hover{border-color:var(--line-2)}
.wsav{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font:700 12px var(--display); background:linear-gradient(135deg, #1b3a24, #0e2215); color:var(--neon); border:1px solid rgba(139,92,246,.25); flex:none}
.wsbtn b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .wsbtn small{display:block; font-size:11px; color:var(--dim)}
.menu{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; padding:6px; border-radius:12px; border:1px solid var(--line-2); background:#12121F; box-shadow:0 20px 50px -20px #000; animation:viewIn .2s var(--ease)}
.menu button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--ink-2)}
.menu button:hover{background:var(--panel-2); color:var(--ink)}
.nav{display:flex; flex-direction:column; gap:2px}
.nav .sec{margin:12px 12px 4px; font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.nav button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; color:var(--ink-2); font-weight:500; font-size:13.5px; position:relative; transition:background .25s var(--ease), color .25s var(--ease)}
.nav button svg{width:18px; height:18px; flex:none; opacity:.85}
.nav button:hover{background:var(--panel-2); color:var(--ink)}
.nav button[aria-current="page"]{background:linear-gradient(90deg, rgba(139,92,246,.14), rgba(139,92,246,.02)); color:var(--ink)}
.nav button[aria-current="page"]::before{content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--neon); box-shadow:0 0 14px var(--neon)}
.nav button[aria-current="page"] svg{color:var(--neon); opacity:1}
.nav .count{margin-left:auto; font:600 11px/1 var(--mono); color:#FFFFFF; background:var(--neon); padding:3px 7px; border-radius:99px}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.userbox{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.uav{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 12px var(--display); color:#FFFFFF; background:radial-gradient(circle at 30% 25%, #A78BFA, #6D6BF8 55%, #4C1D95); flex:none}
.userbox b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .userbox small{display:block; font-size:11px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.envpill{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:8px 12px; border:1px solid var(--line); border-radius:12px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--neon); animation:ping 2.4s infinite; flex:none} .dot.off{background:var(--dim); animation:none} .dot.warn{background:var(--amber); animation:none}
.main{min-width:0; padding:22px 28px 60px}
.mhead{display:none}
@media (max-width:900px){.mhead{display:flex; align-items:center; gap:6px; position:sticky; top:env(safe-area-inset-top,0px); z-index:45; padding:8px 16px; background:rgba(5,11,7,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}}
.topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.topbar h1{margin:0; font:700 28px/1.1 var(--display); letter-spacing:-.025em}
.topbar p{margin:6px 0 0; color:var(--muted); font-size:13.5px; max-width:78ch}
.tabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; padding:4px; border-radius:12px; background:var(--panel); border:1px solid var(--line); width:fit-content; max-width:100%; overflow-x:auto}
.tabs button{all:unset; box-sizing:border-box; cursor:pointer; padding:7px 12px; border-radius:9px; font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.tabs button:hover{color:var(--ink)} .tabs button[aria-selected="true"]{background:var(--panel-hi); color:var(--ink); box-shadow:0 0 0 1px var(--line-2) inset}
.modal-bg{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; animation:viewIn .2s var(--ease)}
.modal{width:min(760px, 100%); max-height:88vh; overflow:auto; border-radius:18px; border:1px solid var(--line-2); background:#0A150E; padding:20px; box-shadow:0 40px 80px -30px #000}
.modal h3{margin:0 0 4px; font:700 20px/1.2 var(--display)}
@media (max-width:900px){
  .input,.select,.textarea,.screen .compose input{font-size:16px} /* evita el zoom automático de iOS al enfocar */
  .btn.sm{height:36px; padding:0 12px} .btn.sm.icon{width:36px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .stat{padding:12px} .stat b{font-size:24px; margin-top:6px}
  .nav .nav-extra{display:none}
  .nav .nav-more{display:flex!important}
  .nav{width:100%; justify-content:space-between}
  .nav button{flex:1 1 0; min-width:0; padding:6px 2px; font-size:10px; text-align:center}
  .nav button span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
  .nav .count{position:absolute; top:2px; right:18%; padding:2px 5px; font-size:9px}
  #personas{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; margin-inline:-16px; padding-inline:16px}
  #personas .btn{flex:0 0 auto; max-width:240px; scroll-snap-align:start}
  .topbar{margin-bottom:12px} .topbar p{font-size:13px}
  .screen{height:min(70dvh, 640px); min-height:460px}
  .modal{padding:16px; max-height:92dvh} .modal-bg{padding:10px; align-items:end}
  .aside-sticky{position:static}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
  .hide-m{display:none!important}
}
.auth,.app{min-height:100vh; min-height:100dvh}
.savebar{position:sticky; bottom:12px; z-index:30; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:14px; border:1px solid var(--line-hi); background:rgba(10,24,15,.96); backdrop-filter:blur(8px); box-shadow:0 20px 50px -20px #000; animation:viewIn .3s var(--ease)}
@media (max-width:900px){.savebar{bottom:calc(76px + env(safe-area-inset-bottom, 0px))}}
.secnav{position:sticky; top:0; z-index:20; display:flex; gap:4px; overflow-x:auto; padding:6px; margin-bottom:12px; border-radius:12px; border:1px solid var(--line); background:rgba(5,11,7,.92); backdrop-filter:blur(8px)}
.secnav a{flex:none; padding:6px 10px; border-radius:8px; font-size:12.5px; color:var(--ink-2); text-decoration:none!important}
.secnav a:hover{background:var(--panel-2); color:var(--ink)}
@media (max-width:900px){.secnav{top:52px}}
.onboard{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px}
.onboard a{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--ink); text-decoration:none!important; font-size:13px}
.onboard a.ok{border-color:rgba(139,92,246,.25); color:var(--muted)} .onboard a.ok .n{background:var(--neon); color:#FFFFFF}
.onboard .n{width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; font:600 12px var(--mono); background:var(--panel-hi)}
/* menú: botón «Más» solo en móvil, candados de la demo */
.nav .nav-more{all:unset; display:none; box-sizing:border-box; cursor:pointer; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; font-size:10px; color:var(--ink-2); flex:1 1 0; min-width:0; text-align:center; position:relative}
.nav .nav-more svg{width:18px; height:18px}
.nav .nav-more[aria-current="page"]{color:var(--neon)}
.nav .nav-lock{margin-left:auto; display:inline-flex; color:var(--amber); opacity:.8} .nav .nav-lock svg{width:14px; height:14px}
.nav button.is-locked span:not(.nav-lock){opacity:.75}
.main .view{max-width:1400px; margin:0 auto}
.stack{gap:20px}
.panel{padding:20px}

/* demo */
.demo-cta{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; border:1px dashed rgba(59,130,246,.35); background:rgba(59,130,246,.05)}
.demo-cta b{display:block; font-size:14px} .demo-cta span{font-size:12.5px; color:var(--muted)}
.demo-side{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; border:1px solid rgba(255,194,75,.25); background:rgba(255,194,75,.06)}
.demo-side b{font-size:13px} .demo-side span{font-size:12px; color:var(--muted)}
.demo-banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:16px; border-radius:14px; border:1px solid rgba(59,130,246,.3); background:linear-gradient(90deg, rgba(59,130,246,.1), rgba(139,92,246,.05)); font-size:13px}
.demo-banner>svg{width:18px; height:18px; color:var(--cyan)} .demo-banner>span{flex:1; min-width:220px}
.locked-wrap{position:relative; min-height:560px; border-radius:var(--r); overflow:hidden}
.locked-bg{filter:blur(9px) saturate(.6); opacity:.55; pointer-events:none; user-select:none; display:flex; flex-direction:column; gap:16px}
.lk-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.lk-card{display:flex; flex-direction:column; gap:10px}
.lk-h{height:14px; width:40%; border-radius:6px; background:rgba(139,92,246,.35); margin-bottom:8px}
.lk-l{height:10px; border-radius:6px; background:rgba(255,255,255,.14); margin:8px 0}
.lk-l.w80{width:80%} .lk-l.w60{width:60%}
.lk-box{height:90px; border-radius:12px; border:1.5px dashed rgba(255,255,255,.2); margin-top:8px} .lk-box.tall{height:150px}
.locked-card{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(520px, calc(100% - 32px)); text-align:center; background:rgba(8,18,12,.92); border-color:rgba(255,194,75,.3); box-shadow:0 30px 80px -30px #000; backdrop-filter:blur(6px)}
.locked-card h3{margin:8px 0 10px; font:700 22px/1.2 var(--display)}
.locked-card ul{text-align:left; margin:0 auto; max-width:44ch}
.locked-ico{width:48px; height:48px; margin:0 auto 6px; border-radius:14px; display:grid; place-items:center; background:rgba(255,194,75,.12); color:var(--amber)} .locked-ico svg{width:22px; height:22px}
@media (max-width:900px){.lk-grid{grid-template-columns:minmax(0,1fr)} .locked-wrap{min-height:620px}}

/* guía */
.guide-hero{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.guide-hero h3{margin:8px 0 6px; font:700 24px/1.2 var(--display)} .guide-hero p{margin:0}
.progress{height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:14px; max-width:520px}
.progress span{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, var(--cyan), var(--neon)); transition:width 1s var(--ease)}
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--dim)}
.flow span{padding:4px 10px; border-radius:99px; border:1px solid var(--line)} .flow span.ok{color:var(--neon); border-color:rgba(139,92,246,.3)} .flow i{font-style:normal}
.step-card{padding:0}
.step-card summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 18px}
.step-card summary::-webkit-details-marker{display:none}
.step-card summary b{display:block; font-size:15px} .step-card summary small{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.step-n{width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; font:700 14px var(--display); background:var(--panel-hi); border:1px solid var(--line-2)}
.step-n svg{width:16px; height:16px}
.step-card.is-done .step-n{background:var(--neon); color:#FFFFFF; border-color:transparent}
.step-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.step-body{padding:0 18px 18px 66px} .step-body ol{margin:0 0 14px; padding-left:18px; color:var(--ink-2); font-size:13.5px; line-height:1.7}
@media (max-width:900px){.step-body{padding:0 16px 16px} .step-meta .tag{font-size:10.5px}}
.glossary{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.glossary div{padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
.glossary b{display:block; font-size:13px} .glossary span{font-size:12.5px; color:var(--muted)}
.guide-link{text-decoration:none!important; color:var(--ink-2); align-items:center}
.guide-link:hover{border-color:var(--line-hi)}
.mdot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--dim)} .mdot.on{background:var(--neon); animation:ping 2.4s infinite} .mdot.warn{background:var(--amber)}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; inset:auto 0 0 0; height:auto; z-index:50; flex-direction:row; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--line); background:rgba(5,11,7,.95); overflow-x:auto; gap:4px}
  .side .wsbox,.side-foot,.nav .sec,.side>.brand{display:none}
  .nav{flex-direction:row}
  .nav button{flex-direction:column; gap:3px; padding:6px 10px; font-size:10.5px}
  .nav button[aria-current="page"]::before{display:none}
  .main{padding:16px 16px 100px}
  .topbar h1{font-size:23px}
}

/* ─── KPIs ─── */
.funnel{display:flex; flex-direction:column; gap:10px}
.fstep{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr) 104px; gap:14px; align-items:center; padding:6px 8px; border-radius:10px; transition:background .2s}
.fstep:hover{background:var(--panel-2)}
.fstep .lbl b{display:block; font-size:13.5px} .fstep .lbl span{font-size:11.5px; color:var(--dim)}
.fstep .trk{height:30px; border-radius:9px; background:rgba(255,255,255,.04); overflow:hidden; position:relative}
.fstep .trk span{position:absolute; inset:0 auto 0 0; width:0; border-radius:9px; background:linear-gradient(90deg, rgba(59,130,246,.55), rgba(139,92,246,.85)); box-shadow:0 0 20px -4px var(--neon-glow); transition:width 1s var(--ease)}
.fstep .trk em{position:absolute; left:10px; top:0; bottom:0; display:flex; align-items:center; font:600 13px var(--mono); font-style:normal; color:#041408; mix-blend-mode:normal}
.fstep.leak .trk span{background:linear-gradient(90deg, rgba(255,154,77,.6), rgba(255,94,94,.85)); box-shadow:0 0 20px -4px rgba(255,94,94,.5)}
.fstep .rt{text-align:right} .fstep .rt b{font:600 15px var(--mono)} .fstep .rt span{display:block; font-size:11.5px; color:var(--dim)}
@media (max-width:760px){.fstep{grid-template-columns:minmax(0,1fr) 90px} .fstep .trk{grid-column:1 / -1; grid-row:2}}
.gauge{position:relative; width:150px; height:150px; flex:none}
.gauge svg{width:100%; height:100%; transform:rotate(-90deg)}
.gauge .trk{stroke:rgba(255,255,255,.07)} .gauge .val{stroke:url(#gNeon); stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease); filter:drop-shadow(0 0 8px rgba(139,92,246,.5))}
.gauge .lbl{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.gauge .lbl b{font:700 40px/1 var(--display); letter-spacing:-.03em} .gauge .lbl span{font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.diag{position:relative; overflow:hidden; border-color:rgba(255,154,77,.3)}
.diag::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:var(--orange); opacity:.1; filter:blur(40px); pointer-events:none}
.diag h3{margin:6px 0 4px; font:700 24px/1.15 var(--display); letter-spacing:-.02em}
.list-dots{margin:6px 0 0; padding-left:18px; color:var(--ink-2); font-size:13px} .list-dots li{margin:3px 0}
.chart svg{width:100%; height:auto; display:block}

/* ─── simulador (heredado de v2) ─── */
.lab-mode{display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(140px,.7fr) minmax(0,1.3fr); gap:14px; align-items:end; padding:14px 18px}
.lab-mode-desc{margin:0; align-self:center}
@media (max-width:980px){.lab-mode{grid-template-columns:minmax(0,1fr)}}
.screen.ig{--wa-bg:#000; --wa-in:#262626; --wa-out:#3797F0; --wa-ink:#F5F5F5; --wa-meta:#A8A8A8}
.screen.ig .wa-head{background:#0c0c0c; border-bottom:1px solid #262626}
.screen.ig .av{background:conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); color:#fff}
.screen.ig .av::after{background:#3897F0; border-color:#0c0c0c}
.screen.ig .chat{background-image:none}
.screen.ig .b{border-radius:18px} .screen.ig .b.in{border-top-left-radius:18px} .screen.ig .b.out{border-top-right-radius:18px}
.screen.ig .b .meta svg{display:none}
.screen.ig .compose{background:#0c0c0c} .screen.ig .compose input{background:#262626; border-radius:22px} .screen.ig .send{background:#3797F0}
.screen.ig .typingb{background:#262626} .screen.ig .typingb.out{background:#3797F0}
#personas .btn{white-space:normal; height:auto; min-height:36px; padding:7px 12px; max-width:100%; justify-content:flex-start; text-align:left}
.sim{display:grid; grid-template-columns:minmax(360px,430px) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:1180px){.sim{grid-template-columns:minmax(0,1fr)}}
.phone{position:sticky; top:20px; border-radius:30px; padding:10px; background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border:1px solid var(--line-2); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 80px -30px rgba(139,92,246,.25)}
@media (max-width:1180px){.phone{position:relative; top:0}}
.screen{border-radius:22px; overflow:hidden; background:var(--wa-bg); display:flex; flex-direction:column; height:min(76vh, 740px); min-height:520px}
.wa-head{display:flex; align-items:center; gap:10px; padding:12px 14px; background:#1F2C33}
.av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:700 14px var(--display); color:#FFFFFF; background:radial-gradient(circle at 30% 25%, #A78BFA, #6D6BF8 55%, #4C1D95); flex:none; position:relative}
.av::after{content:""; position:absolute; right:0; bottom:1px; width:10px; height:10px; border-radius:50%; background:#25D366; border:2px solid #1F2C33}
.wa-head b{display:block; font-size:14.5px; font-weight:600; color:var(--wa-ink)}
.wa-head .grow{min-width:0} .wa-head .grow b, .wa-head .grow span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-head .btn{flex:none}
@media (max-width: 480px){ .wa-head{gap:6px; padding:10px} .wa-head .btn.sm{padding-inline:9px} .wa-head #manualBtn svg, .wa-head #runBtn svg{display:none} }
.wa-status{display:block; font-size:12px; color:var(--wa-meta); height:17px; overflow:hidden} .wa-status.typing{color:#25D366}
.chat{flex:1; overflow-y:auto; padding:14px 12px 10px; display:flex; flex-direction:column; gap:3px; overscroll-behavior:contain; background-color:var(--wa-bg); background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px); background-size:18px 18px}
.day{align-self:center; margin:4px 0 10px; font-size:11.5px; color:var(--wa-meta); background:#182229; padding:4px 10px; border-radius:8px}
.b{position:relative; max-width:82%; padding:6px 9px 7px; font-size:14px; line-height:1.38; color:var(--wa-ink); border-radius:9px; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 1px .5px rgba(0,0,0,.25); margin-top:2px}
.b.in{align-self:flex-start; background:var(--wa-in); border-top-left-radius:2px} .b.out{align-self:flex-end; background:var(--wa-out); border-top-right-radius:2px}
.b.first{margin-top:8px}
.b .meta{float:right; margin:8px 0 -5px 10px; font-size:10.5px; color:rgba(233,237,239,.6); display:inline-flex; gap:3px; align-items:center; line-height:1}
.b .meta svg{width:15px; height:10px; color:#53BDEB}
.anim{animation:bIn .42s var(--spring) both}
.vcard{display:block; width:260px; max-width:100%; color:inherit; border-radius:7px; overflow:hidden; background:rgba(0,0,0,.18); margin:-1px -3px 2px; text-decoration:none!important}
.thumb{position:relative; aspect-ratio:16/9; background:#000 center/cover no-repeat}
.thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55))}
.play{position:absolute; inset:0; display:grid; place-items:center; z-index:1}
.play span{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); transition:transform .3s var(--spring)}
.play svg{width:18px; height:18px; margin-left:3px; color:#fff}
.vtxt{padding:7px 9px 6px} .vtxt b{display:block; font-size:13px; line-height:1.3} .vtxt span{font-size:11.5px; color:rgba(233,237,239,.6)}
.sys{align-self:center; margin:8px 0; max-width:92%; text-align:center; font-size:11.5px; line-height:1.35; padding:5px 10px; border-radius:8px; background:#182229; color:#AAB8C0}
.sys.good{color:#9DF58A; background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.22)} .sys.warn{color:#FFD58A; background:rgba(255,194,75,.08); border:1px solid rgba(255,194,75,.2)} .sys.crit{color:#FFB0B0; background:rgba(255,94,94,.09); border:1px solid rgba(255,94,94,.22)}
.typingb{align-self:flex-start; background:var(--wa-in); border-radius:9px; border-top-left-radius:2px; padding:11px 13px; display:flex; gap:4px; margin-top:6px; animation:bIn .3s var(--ease) both}
.typingb.out{align-self:flex-end; background:var(--wa-out); border-top-left-radius:9px; border-top-right-radius:2px}
.typingb span{width:7px; height:7px; border-radius:50%; background:rgba(233,237,239,.55); animation:dotb 1.2s infinite}
.typingb span:nth-child(2){animation-delay:.16s} .typingb span:nth-child(3){animation-delay:.32s}
@keyframes dotb{0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-4px); opacity:1}}
.compose{display:flex; gap:8px; padding:8px 10px 10px; background:#1F2C33}
.compose input{flex:1; min-width:0; height:40px; border-radius:20px; border:0; background:#2A3942; padding:0 16px; color:var(--wa-ink); font-size:14px}
.compose input:focus{outline:1px solid rgba(37,211,102,.5)} .compose input:disabled{opacity:.5}
.send{all:unset; cursor:pointer; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#00A884; color:#fff; flex:none; transition:transform .2s var(--spring), opacity .2s}
.send:hover{transform:scale(1.06)} .send:disabled{opacity:.35; cursor:not-allowed; transform:none} .send svg{width:18px; height:18px}
.hero{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; overflow:hidden}
.hero .glow{position:absolute; top:-45%; right:-8%; width:360px; height:360px; border-radius:50%; filter:blur(60px); opacity:.16; background:var(--hero, var(--muted)); transition:background .6s var(--ease), opacity .6s; pointer-events:none}
.hero.pasa .glow{opacity:.34; animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.16; transform:scale(.9)}}
.kicker{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.hero h3{margin:10px 0 6px; font:700 30px/1.05 var(--display); letter-spacing:-.025em; color:var(--hero, var(--ink))}
.hero p{margin:0; color:var(--ink-2); font-size:14px; max-width:48ch}
.ring{position:relative; width:108px; height:108px} .ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .trk{stroke:rgba(255,255,255,.07)} .ring .val{stroke:url(#gNeon); stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease); filter:drop-shadow(0 0 6px rgba(139,92,246,.55))}
.ring .lbl{position:absolute; inset:0; display:grid; place-content:center; text-align:center} .ring .lbl b{font:700 26px/1 var(--display)} .ring .lbl span{font:500 10px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.steps{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px}
.step{position:relative; padding-top:22px; min-width:0}
.step::before{content:""; position:absolute; top:7px; left:0; right:-8px; height:2px; background:rgba(255,255,255,.08)} .step:last-child::before{right:0}
.step::after{content:""; position:absolute; top:7px; left:0; height:2px; width:0; background:linear-gradient(90deg, var(--neon-2), var(--neon)); box-shadow:0 0 12px var(--neon-glow); transition:width .7s var(--ease)}
.step.done::after{width:calc(100% + 8px)} .step:last-child.done::after{width:100%}
.step i{position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%; background:#12121F; border:2px solid rgba(255,255,255,.18); transition:all .4s var(--spring)}
.step.done i,.step.on i{border-color:var(--neon); background:var(--neon); box-shadow:0 0 14px var(--neon-glow)} .step.on i{animation:pulse 1.8s infinite}
.step b{display:block; font-size:12.5px; font-weight:600; color:var(--muted)} .step.on b,.step.done b{color:var(--ink)} .step span{display:block; font-size:11px; color:var(--dim); margin-top:2px}
.ci{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid var(--line); transition:border-color .4s, background .4s}
.ci .ico{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--dim); transition:all .4s var(--spring)} .ci .ico svg{width:15px; height:15px}
.ci.ok{border-color:rgba(139,92,246,.25); background:rgba(139,92,246,.045)} .ci.ok .ico{background:var(--neon); color:#FFFFFF; box-shadow:0 0 16px rgba(139,92,246,.45)}
.ci.no{border-color:rgba(255,94,94,.28); background:rgba(255,94,94,.05)} .ci.no .ico{background:var(--red); color:#2A0707}
.ci b{font-size:13.5px; font-weight:600} .ci b em{font-style:normal; font:500 10px/1 var(--mono); color:var(--dim); letter-spacing:.08em; text-transform:uppercase}
.ci q{display:block; margin-top:3px; font-size:12.5px; color:var(--muted); quotes:"«" "»"}
.dr{display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px} .dr:last-child{border-bottom:0} .dr span{color:var(--muted); font-size:12px}
.ticket{position:relative; border-radius:var(--r); padding:1px; background:conic-gradient(from var(--ang), rgba(139,92,246,.9), rgba(59,130,246,.6), transparent 30%, transparent 70%, rgba(139,92,246,.9)); animation:spin 4s linear infinite}
@property --ang{syntax:"<angle>"; initial-value:0deg; inherits:false}
@keyframes spin{to{--ang:360deg}}
.ticket>.in{border-radius:15px; background:linear-gradient(180deg, #0D1F14, #081109); padding:18px}
.ticket pre{margin:0; white-space:pre-wrap; font:13px/1.6 var(--mono); color:var(--ink-2)}

/* ─── entrenamiento ─── */
.editor{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start}
@media (max-width:1180px){.editor{grid-template-columns:minmax(0,1fr)}}
.aside-sticky{position:sticky; top:20px; display:flex; flex-direction:column; gap:14px}
.repeat{display:flex; flex-direction:column; gap:10px}
.repeat-item{position:relative; padding:14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); display:grid; gap:10px}
.repeat-item .rm{position:absolute; top:10px; right:10px}
.dropzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; min-height:128px; margin-top:auto; border:1.5px dashed var(--line-2); border-radius:14px; padding:20px 16px; text-align:center; color:var(--muted); background:rgba(0,0,0,.18); transition:border-color .2s, background .2s; cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--line-hi); background:rgba(139,92,246,.05); color:var(--ink)}
.dropzone b{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; font-weight:600}
.dropzone b svg{width:18px; height:18px; color:var(--neon)}
.dropzone .small{max-width:32ch; line-height:1.4}
.src-card{display:flex; flex-direction:column; gap:12px; min-height:100%}
.src-card>p{margin:0}
.src-card .grow-end{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.kstat{display:inline-flex; align-items:center; gap:6px}
.source{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
.source .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--panel-2)} .source .ic svg{width:17px; height:17px; color:var(--neon)}
.mode{all:unset; box-sizing:border-box; cursor:pointer; padding:16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.02); display:grid; gap:6px; transition:all .25s var(--ease)}
.mode:hover{border-color:var(--line-2)} .mode[aria-pressed="true"]{border-color:var(--line-hi); background:rgba(139,92,246,.06); box-shadow:0 0 0 1px rgba(139,92,246,.15) inset}
.mode b{font:700 16px var(--display)} .mode span{font-size:12.5px; color:var(--muted)}
.integ{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start}
.integ .logo{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font:800 13px var(--display); color:#FFFFFF}
.diff{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px} @media (max-width:760px){.diff{grid-template-columns:minmax(0,1fr)}}
.diff pre{margin:0; white-space:pre-wrap; font:12px/1.5 var(--mono); background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:10px; padding:10px; max-height:240px; overflow:auto}
.auth-form{position:relative} .auth-theme{position:absolute; top:16px; right:16px}

.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:22px 0 4px; position:relative}
.hero-cta span{font-size:13px; color:var(--muted)}

/* ─── formulario de la demo (tipo Typeform) ─── */
.wiz{position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; background:var(--bg0); overflow-y:auto; padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px)}
.wiz::before{content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(700px 480px at 15% 10%, rgba(139,92,246,.12), transparent 60%), radial-gradient(640px 480px at 90% 90%, rgba(59,130,246,.10), transparent 60%)}
.wiz>*{position:relative}
.wiz-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px clamp(16px,4vw,40px)}
.wiz-progress{height:3px; margin:0 clamp(16px,4vw,40px); border-radius:99px; background:var(--panel-2); overflow:hidden}
.wiz-progress span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--cyan), var(--neon)); box-shadow:0 0 14px var(--neon-glow); transition:width .5s var(--ease)}
.wiz-q{flex:1; width:min(680px, 100%); margin:0 auto; padding:clamp(28px,8vh,90px) clamp(16px,4vw,24px) 40px; display:flex; flex-direction:column; gap:14px}
.wiz-q.in-next{animation:wizNext .45s var(--ease)} .wiz-q.in-prev{animation:wizPrev .45s var(--ease)}
@keyframes wizNext{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes wizPrev{from{opacity:0; transform:translateY(-26px)} to{opacity:1; transform:none}}
.wiz-step{font:600 13px var(--mono); color:var(--neon); letter-spacing:.06em} .wiz-step i{font-style:normal; color:var(--dim)}
.wiz-q h2{margin:0; font:700 clamp(26px,4.2vw,40px)/1.1 var(--display); letter-spacing:-.025em}
.wiz-q>p{margin:0; color:var(--muted); font-size:16px}
.wiz-input{width:100%; margin-top:10px; padding:10px 2px; font:500 clamp(22px,3.4vw,30px) var(--sans); color:var(--ink); background:transparent; border:0; border-bottom:2px solid var(--line-2); outline:none; transition:border-color .2s}
.wiz-input:focus{border-color:var(--neon)} .wiz-input::placeholder{color:var(--dim)}
.wiz-input.sm{font-size:18px; margin-top:4px}
.wiz .shake{animation:shake .35s} @keyframes shake{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.wiz-opts{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.wiz-opt{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:14px; border:1px solid var(--line-2); background:var(--panel); transition:border-color .2s, background .2s, transform .15s var(--ease)}
.wiz-opt:hover{border-color:var(--line-hi); transform:translateX(3px)}
.wiz-opt:focus-visible{outline:2px solid var(--neon); outline-offset:2px}
.wiz-opt[aria-pressed="true"]{border-color:var(--neon); background:var(--neon-soft); box-shadow:0 0 0 1px var(--neon) inset}
.wiz-opt kbd{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px; font:600 12px var(--mono); color:var(--ink-2); border:1px solid var(--line-2); background:var(--panel-2)}
.wiz-opt[aria-pressed="true"] kbd{background:var(--neon); color:#FFFFFF; border-color:transparent}
.wiz-opt span{flex:1; min-width:0} .wiz-opt b{display:block; font-size:16px; font-weight:600} .wiz-opt small{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.wiz-opt>svg{width:18px; height:18px; color:var(--neon)}
.wiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px}
.wiz-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.wiz-note{display:flex; align-items:center; gap:8px; margin:6px 0 0; font-size:13px; color:var(--muted)}
.wiz-note svg{width:15px; height:15px; flex:none; color:var(--neon)}
.wiz-note.bad, .wiz-note.bad svg{color:var(--amber)}
.wiz-nav kbd.enter{font:500 11px var(--mono); opacity:.7; margin-left:6px}
@media (hover: none){.wiz-nav kbd.enter,.wiz-opt kbd{display:none}}
.wiz-done{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center}
.wiz-done h2{margin:0; font:700 clamp(24px,3.6vw,34px)/1.15 var(--display)}
.wiz-done ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left}
.wiz-done li{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); opacity:0; animation:viewIn .5s var(--ease) forwards}
.wiz-done li svg{width:18px; height:18px; color:var(--neon)}
.wiz-orb{width:84px; height:84px; border-radius:50%; background:conic-gradient(from 0deg, var(--neon), var(--cyan), transparent 70%, var(--neon)); animation:rot 1.2s linear infinite; -webkit-mask:radial-gradient(circle, transparent 54%, #000 56%); mask:radial-gradient(circle, transparent 54%, #000 56%); filter:drop-shadow(0 0 16px var(--neon-glow))}

:root[data-theme="light"] .wiz-opt[aria-pressed="true"] kbd{color:#fff}

/* ─── tema claro ─── */
:root[data-theme="light"]{
  color-scheme:light;
  --bg0:#F6F5FA; --bg1:#FFFFFF;
  --panel:#FFFFFF; --panel-2:rgba(14,40,22,.05); --panel-hi:rgba(14,40,22,.08);
  --line:rgba(14,40,22,.10); --line-2:rgba(14,40,22,.17); --line-hi:rgba(109,40,217,.42);
  --ink:#12121C; --ink-2:#383E4E; --muted:#585E70; --dim:#666C7E;
  --neon:#6D28D9; --neon-2:#5B21B6; --neon-soft:rgba(109,40,217,.10); --neon-glow:rgba(109,40,217,.25);
  --cyan:#2563EB; --cyan-soft:rgba(37,99,235,.10); --amber:#A96A06; --amber-soft:rgba(169,106,6,.10);
  --orange:#B8560F; --orange-soft:rgba(184,86,15,.10); --red:#C93636; --red-soft:rgba(201,54,54,.09); --violet:#6B4FD8;
  --wa-bg:#EFEAE2; --wa-in:#FFFFFF; --wa-out:#D9FDD3; --wa-ink:#111B21; --wa-meta:#667781;
}
:root[data-theme="light"] body::before{background:radial-gradient(900px 520px at 12% -8%, rgba(139,92,246,.10), transparent 60%), radial-gradient(760px 480px at 100% 0%, rgba(59,130,246,.07), transparent 60%), linear-gradient(180deg, #FFFFFF, #F6F5FA 60%)}
:root[data-theme="light"] body::after{background-image:linear-gradient(rgba(14,40,22,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,40,22,.035) 1px, transparent 1px)}
:root[data-theme="light"] .panel{box-shadow:0 1px 2px rgba(14,40,22,.04), 0 8px 24px -16px rgba(14,40,22,.18)}
:root[data-theme="light"] .panel::before{background:none}
:root[data-theme="light"] .input,:root[data-theme="light"] .select,:root[data-theme="light"] .textarea{background-color:#FFFFFF}
:root[data-theme="light"] .select option{background:#FFFFFF}
:root[data-theme="light"] .btn.primary{color:#fff; background:linear-gradient(135deg, #6D28D9, #2563EB); box-shadow:0 0 0 1px rgba(109,40,217,.4) inset, 0 8px 22px -12px rgba(109,40,217,.6)}
:root[data-theme="light"] .nav .count{color:#fff}
:root[data-theme="light"] .menu,:root[data-theme="light"] .modal{background:#FFFFFF}
:root[data-theme="light"] .modal-bg{background:rgba(14,26,18,.35)}
:root[data-theme="light"] .toast{background:#FFFFFF; box-shadow:0 20px 50px -20px rgba(14,40,22,.4)}
:root[data-theme="light"] .side{background:linear-gradient(180deg, #FFFFFF, #F7FAF6)}
:root[data-theme="light"] .kpi,:root[data-theme="light"] .auth-feat,:root[data-theme="light"] .ci,:root[data-theme="light"] .repeat-item,:root[data-theme="light"] .source,:root[data-theme="light"] .glossary div,:root[data-theme="light"] .mode{background:#FBFCFA}
:root[data-theme="light"] .skel{background:linear-gradient(90deg, rgba(14,40,22,.05), rgba(14,40,22,.11), rgba(14,40,22,.05)); background-size:200% 100%}
:root[data-theme="light"] .code,:root[data-theme="light"] .diff pre{background:#F3F6F2}
:root[data-theme="light"] .ticket>.in{background:linear-gradient(180deg, #F2FBF3, #FFFFFF)}
:root[data-theme="light"] .hb .t,:root[data-theme="light"] .progress,:root[data-theme="light"] .strength,:root[data-theme="light"] .fstep .trk{background:rgba(14,40,22,.07)}
:root[data-theme="light"] .gauge .trk,:root[data-theme="light"] .ring .trk{stroke:rgba(14,40,22,.08)}
:root[data-theme="light"] .step i{background:#FFFFFF; border-color:rgba(14,40,22,.2)}
:root[data-theme="light"] .step::before{background:rgba(14,40,22,.1)}
:root[data-theme="light"] .ci .ico,:root[data-theme="light"] .step-n{background:rgba(14,40,22,.06)}
:root[data-theme="light"] .ci.ok .ico,:root[data-theme="light"] .step-card.is-done .step-n{background:var(--neon); color:#fff}
:root[data-theme="light"] .secnav,:root[data-theme="light"] .savebar{background:rgba(255,255,255,.96)}
:root[data-theme="light"] .locked-card{background:rgba(255,255,255,.95); box-shadow:0 30px 80px -30px rgba(14,40,22,.45)}
:root[data-theme="light"] .lk-l{background:rgba(14,40,22,.14)} :root[data-theme="light"] .lk-box{border-color:rgba(14,40,22,.2)}
:root[data-theme="light"] .phone{background:linear-gradient(160deg, #FFFFFF, #E9EEE8); box-shadow:0 30px 60px -30px rgba(14,40,22,.35)}
:root[data-theme="light"] .wa-head,:root[data-theme="light"] .compose{background:#F0F2F5}
:root[data-theme="light"] .compose input{background:#FFFFFF}
:root[data-theme="light"] .chat{background-image:radial-gradient(rgba(17,27,33,.06) 1px, transparent 1.2px)}
:root[data-theme="light"] .day,:root[data-theme="light"] .sys{background:#FFFFFF; color:#54656F; box-shadow:0 1px .5px rgba(11,20,26,.13)}
:root[data-theme="light"] .b .meta{color:rgba(17,27,33,.5)}
:root[data-theme="light"] .typingb span{background:rgba(17,27,33,.45)}
:root[data-theme="light"] .vcard{background:rgba(17,27,33,.05)}
:root[data-theme="light"] .screen.ig{--wa-bg:#FFFFFF; --wa-in:#EFEFEF; --wa-out:#3797F0; --wa-ink:#111111; --wa-meta:#8E8E8E}
:root[data-theme="light"] .screen.ig .wa-head,:root[data-theme="light"] .screen.ig .compose{background:#FFFFFF; border-color:#DBDBDB}
:root[data-theme="light"] .screen.ig .compose input{background:#EFEFEF}
:root[data-theme="light"] .screen.ig .b.out,:root[data-theme="light"] .screen.ig .b.out .meta{color:#fff}
:root[data-theme="light"] .auth-art{background:radial-gradient(700px 500px at 20% 20%, rgba(139,92,246,.12), transparent 60%), radial-gradient(600px 500px at 80% 90%, rgba(37,99,235,.08), transparent 60%)}
:root[data-theme="light"] .auth-art .orb{opacity:.35}
:root[data-theme="light"] .demo-side{background:rgba(169,106,6,.07)}
@media (max-width:900px){
  :root[data-theme="light"] .side{background:rgba(255,255,255,.97)}
  :root[data-theme="light"] .mhead{background:rgba(255,255,255,.94)}
}

/* Lockup de marca: ianora × <vertical>. Ianora va siempre delante y con más peso; el resto, ligero. */
.brand .lock{font-family:var(--display); font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.brand .lock i{font-style:normal; font-weight:300; opacity:.45; margin:0 1px}
.brand .lock u{text-decoration:none; font-weight:300; color:var(--ink-2)}