:root{
  --bg:#fff; --ink:#111214; --ink2:#3c3d40; --mute:#6b6c70; --line:#e6e7e4; --soft:#f4f5f2;
  --brand:#428E45; /* verde oficial MIOHUB: único punto de definición */
  --sage:var(--brand); --sage-d:#2f6b32; --sage-l:#e4f0e4; --sage-xl:#f0f7f0; --logo:var(--brand);
  --warn:#8a5a12; --warn-bg:#faf3e3; --err:#9b2c2c;
  --r:20px; --r-s:14px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#f1f2ef;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.4;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hide{display:none!important}
#app{min-height:100vh;display:flex;justify-content:center}
.screen{width:100%;max-width:480px;background:var(--bg);min-height:100vh;position:relative;padding-bottom:40px}
@media(min-width:560px){.screen{box-shadow:0 0 0 1px var(--line);}}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px;position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand .wordmark{font-size:26px}
.iconbtn{width:44px;height:44px;border-radius:14px;background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.iconbtn:active{background:var(--sage-l)}

/* card */
.card-wrap{padding:6px 20px 0}
.photo{width:100%;aspect-ratio:1/0.82;border-radius:26px;overflow:hidden;background:#101820}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.photo.ini{background:linear-gradient(160deg,#e7eee2,#d6e1d0);display:grid;place-items:center;aspect-ratio:1/.62}
.photo.ini span{font-size:72px;font-weight:700;color:var(--sage-d);letter-spacing:.02em}
h1.name{font-size:32px;line-height:1.1;margin:16px 0 8px;text-align:center;font-weight:800;letter-spacing:-.01em}
.prof{display:block;width:max-content;max-width:100%;margin:0 auto 12px;background:var(--sage-l);color:var(--sage-d);padding:7px 18px;border-radius:999px;font-weight:600;font-size:16px}
.bio{font-size:17px;color:var(--ink2);text-align:center;margin:0 0 18px}
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.chan a,.chan button{background:var(--soft);border-radius:var(--r-s);padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:var(--ink2);min-height:74px}
.chan a:active,.chan button:active{background:var(--sage-l)}
.chan svg.i{width:26px;height:26px;color:#000}
.chips{display:flex;gap:6px;margin-bottom:16px}
.chip{display:inline-flex;flex:1;justify-content:center;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;background:var(--sage-xl);border:1px solid var(--sage-l);font-size:15px;color:var(--ink2);white-space:nowrap;min-width:0}
.chip svg.i{width:16px;height:16px}
.chip:active{background:var(--sage-l)}
.cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--sage);color:#fff;font-weight:700;font-size:18px;padding:16px 18px;border-radius:16px;position:relative}
.cta:active{background:var(--sage-d)}
.cta svg.i{position:absolute;right:18px;width:20px;height:20px}
.cta[disabled]{opacity:.45;pointer-events:none}
.btn2{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:18px;padding:14px 18px;border-radius:16px;position:relative;margin-top:10px}
.btn2 svg.i:last-child{position:absolute;right:18px;width:20px;height:20px}
.btn2:active{background:var(--soft)}
.list{margin-top:12px;border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;text-align:left;background:#fff;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:active{background:var(--soft)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:17px;font-weight:600}
.row .t small{display:block;font-size:15px;color:var(--mute);margin-top:1px}
.row>svg.i:last-child{width:18px;height:18px;color:#8a8b8f}
.rowic{width:40px;height:40px;border-radius:12px;background:var(--sage-l);display:grid;place-items:center;flex:none;color:#000}
.cardrow{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:18px;margin-bottom:12px}
.cardrow:active{background:var(--soft)}
.cardrow .t{flex:1;min-width:0}.cardrow .t b{display:block;font-size:17px;font-weight:600}.cardrow .t small{display:block;font-size:15px;color:var(--mute)}
.cardrow>svg.i:last-child{width:18px;height:18px;color:#8a8b8f}
.panel{background:var(--sage-xl);border-radius:var(--r);padding:16px 18px;margin-top:22px;font-size:16px;color:var(--ink2)}
.panel b{display:block;color:var(--ink);margin-bottom:2px;font-size:17px}
.fbbtn{width:100%;margin-top:12px;padding:15px;border-radius:16px;background:var(--soft);border:1px solid var(--line);font-weight:600;font-size:17px;color:var(--sage-d)}
.legal{font-size:14px;color:var(--mute);margin:20px 20px 0;line-height:1.45}
.invite{margin:22px 20px 0;border-top:1px solid var(--line);padding-top:18px}
.invite h4{margin:0 0 4px;font-size:16px}
.invite p{margin:0 0 10px;font-size:15px;color:var(--mute)}
.invite .acts{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;font-weight:600;background:#fff}
.pill:active{background:var(--soft)}
.pill svg.i{width:18px;height:18px}
.resume{margin:0 0 12px;background:var(--warn-bg);border-radius:16px;padding:12px 14px;font-size:15px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.resume button{font-weight:700;color:var(--warn)}

/* overlays */
.ov{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-end}
.ov .scrim{position:absolute;inset:0;background:rgba(17,18,20,.32);animation:fade .2s}
.sheet{position:relative;width:100%;max-width:480px;max-height:94vh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 20px 28px;animation:up .28s cubic-bezier(.2,.8,.2,1)}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:#d9dad7;margin:0 auto 12px}
.full{position:relative;width:100%;max-width:480px;height:100vh;overflow:auto;background:#fff;animation:slide .25s ease;padding-bottom:40px}
.fhdr{display:flex;align-items:center;gap:12px;padding:14px 20px 4px;position:sticky;top:0;background:#fff;z-index:5}
.back{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.back svg.i{width:20px;height:20px}
.fhdr h2{font-size:24px;margin:0;font-weight:800;letter-spacing:-.01em}
.fbody{padding:6px 20px 0}
.sub{color:var(--ink2);font-size:16px;margin:4px 0 14px}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(24px);opacity:.3}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* welcome panel */
.welcome{background:var(--sage-l);border-radius:24px;padding:20px 20px 18px;position:relative}
.welcome h3{margin:0 0 8px;font-size:26px;line-height:1.15;font-weight:800;padding-right:44px}
.welcome p{margin:0;font-size:16px;color:var(--ink2)}
.welcome .x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center}
.caps{display:flex;gap:10px;overflow-x:auto;margin:14px -20px 0;padding:0 20px 4px;scrollbar-width:none}
.caps::-webkit-scrollbar{display:none}
.cap{flex:none;width:84px;background:var(--soft);border-radius:var(--r-s);padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13.5px;line-height:1.15;text-align:center;color:var(--ink2);min-height:84px}
.cap svg.i{width:26px;height:26px;color:#000}
h3.q{font-size:25px;margin:20px 0 12px;font-weight:800}

/* forms */
label.f{display:block;font-weight:600;font-size:15.5px;margin:16px 0 6px}
.inp,select.inp,textarea.inp{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff;font-size:17px;outline:none}
.inp:focus{border-color:var(--sage)}
textarea.inp{min-height:96px;resize:vertical}
.cnt{text-align:right;font-size:13px;color:var(--mute);margin-top:3px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;text-align:left;font-size:17px;background:#fff;width:100%}
.opt .dot{width:22px;height:22px;border-radius:50%;border:1.7px solid #b9bbb6;flex:none;display:grid;place-items:center}
.opt.m .dot{border-radius:7px}
.opt.on{border-color:var(--sage);background:var(--sage-xl)}
.opt.on .dot{background:var(--sage);border-color:var(--sage);color:#fff}
.opt .dot svg.i{width:14px;height:14px;stroke-width:3;opacity:0}
.opt.on .dot svg.i{opacity:1}
.qhead{font-size:20px;font-weight:700;margin:20px 0 10px;line-height:1.25}
.qhint{font-size:14.5px;color:var(--mute);margin:-6px 0 10px}
.prog{display:flex;gap:6px;margin:2px 0 6px}
.prog i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.prog i.on{background:var(--sage)}
.banner{display:flex;gap:0;background:var(--soft);border-radius:var(--r);overflow:hidden;margin:6px 0 4px}
.banner img{width:44%;object-fit:cover;object-position:40% 20%;display:block}
.banner div{padding:14px 14px;font-size:14.5px;color:var(--ink2)}
.banner b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px;line-height:1.2}
.file{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.file .fi{width:38px;height:38px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none}
.file .t{flex:1;min-width:0}.file b{display:block;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file small{font-size:14px;color:var(--mute)}
.okdot{width:26px;height:26px;border-radius:50%;background:var(--sage-d);color:#fff;display:grid;place-items:center;flex:none}
.okdot svg.i{width:15px;height:15px;stroke-width:3}
.add{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:8px;justify-content:center;font-weight:600;font-size:16px;margin-bottom:12px}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--sage-l);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink2);margin:12px 0}
.note svg.i{width:20px;height:20px;margin-top:1px}
.note.w{background:var(--warn-bg);color:#5c3d0b}
.eta{display:flex;gap:12px;align-items:flex-start;margin:14px 0;font-size:14.5px;color:var(--mute)}
.eta b{display:block;color:var(--ink);font-size:16px}
.eta svg.i{margin-top:2px}
.demo-tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);padding:3px 8px;border-radius:6px}
.result{border:1.5px solid var(--line);border-radius:var(--r);padding:16px;margin:10px 0}
.result h4{margin:0 0 8px;font-size:18px}
.result ul,.result ol{margin:6px 0 0;padding-left:22px;color:var(--ink2);font-size:16px}
.result li{margin:5px 0}
.prio{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.prio:first-of-type{border-top:0}
.prio .n{width:30px;height:30px;border-radius:50%;background:var(--sage-l);color:var(--sage-d);font-weight:800;display:grid;place-items:center;flex:none}
.prio b{display:block;font-size:17px}.prio small{font-size:15px;color:var(--ink2)}
.success{text-align:center;padding:20px 0 6px}
.success .big{width:64px;height:64px;border-radius:50%;background:var(--sage-l);display:grid;place-items:center;margin:0 auto 12px;color:var(--sage-d)}
.success .big svg.i{width:32px;height:32px;stroke-width:2.2}
.code{font-size:30px;font-weight:800;letter-spacing:.08em;background:var(--soft);border-radius:14px;padding:10px 16px;display:inline-block;margin:8px 0}
.tl{margin:10px 0 0;padding:0;list-style:none}
.tl li{position:relative;padding:0 0 14px 24px;font-size:15.5px;color:var(--ink2)}
.tl li:before{content:"";position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--sage)}
.tl li:after{content:"";position:absolute;left:9px;top:16px;bottom:-4px;width:1.5px;background:var(--line)}
.tl li:last-child:after{display:none}
.tl small{display:block;color:var(--mute);font-size:13.5px}
.status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13.5px;font-weight:700;background:var(--soft);color:var(--ink2)}
.status.s-nueva{background:#e3ecf7;color:#23466f}.status.s-info{background:var(--warn-bg);color:var(--warn)}
.status.s-revisar{background:#efe6f6;color:#58336f}.status.s-aprobada{background:var(--sage-l);color:var(--sage-d)}
.status.s-entregada,.status.s-cerrada{background:#e8e9e6;color:#3c3d40}.status.s-rechazada{background:#f6e5e5;color:var(--err)}
.pay{background:#fff;border:1.5px dashed #c9b48a;border-radius:var(--r);padding:16px;margin:10px 0}
.qrbox{display:grid;place-items:center;padding:14px;background:#fff;border:1.5px solid var(--line);border-radius:18px;margin:12px auto;width:max-content}
.qrbox svg{width:188px;height:188px;display:block}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#111214;color:#fff;padding:12px 18px;border-radius:14px;font-size:15.5px;z-index:99;max-width:90vw;animation:up .2s}
.menu{position:absolute;right:20px;top:60px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:250px;z-index:40;overflow:hidden}
.menu button{display:flex;gap:12px;align-items:center;width:100%;padding:14px 16px;text-align:left;font-size:17px;border-bottom:1px solid var(--line)}
.menu button:last-child{border:0}
.menu button:active{background:var(--soft)}
.stars-row{display:flex;gap:8px;flex-wrap:wrap}
.about p{color:var(--ink2);font-size:16.5px}
.vid{display:flex;gap:12px;align-items:center}

/* private */
.priv{max-width:760px}
.ptabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:760px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.ptabs button{flex:1;padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--mute);position:relative}
.ptabs button.on{color:#000}
.ptabs button.on:before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:2px;background:var(--sage)}
.ptabs .badge{position:absolute;top:5px;left:calc(50% + 8px);background:var(--sage-d);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;letter-spacing:0}
.pbody{padding:6px 20px 96px}
.pbody h2{font-size:28px;margin:12px 0 4px;font-weight:800}
.pbody h3{font-size:19px;margin:24px 0 8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.kpi{background:var(--soft);border-radius:16px;padding:12px 14px;text-align:left}
.kpi b{display:block;font-size:26px;font-weight:800}
.kpi span{font-size:14px;color:var(--mute)}
.kpi.hot{background:var(--sage-l)}
.fchips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fc{flex:none;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;font-weight:600;background:#fff}
.fc.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.req{display:block;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;background:#fff}
.req:active{background:var(--soft)}
.req .top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:4px}
.req b{font-size:17px}.req small{color:var(--mute);font-size:14.5px;display:block}
.lbl{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:15.5px}
.kv dt{color:var(--mute)}.kv dd{margin:0}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{padding:12px 16px;border-radius:14px;font-weight:700;font-size:16px;border:1.5px solid var(--line);background:#fff}
.btn.p{background:var(--sage);border-color:var(--sage);color:#fff}
.btn.d{color:var(--err)}
.btn[disabled]{opacity:.4;pointer-events:none}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sw .t b{display:block;font-size:16.5px}.sw .t small{color:var(--mute);font-size:14.5px}
.tg{width:52px;height:30px;border-radius:15px;background:#d3d5d0;position:relative;flex:none;transition:.15s}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
.tg.on{background:var(--sage)}.tg.on:after{left:25px}
.tg[disabled]{opacity:.45;pointer-events:none}
.acc{border:1.5px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.acc>button{display:flex;width:100%;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:17px;text-align:left}
.acc>div{padding:0 16px 16px}
.draft{width:100%;min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;line-height:1.5}
.login{max-width:420px;margin:0 auto;padding:60px 24px}
.warnbox{background:var(--warn-bg);color:#5c3d0b;border-radius:14px;padding:14px 16px;font-size:15px;margin:18px 0}
.sess{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}
.sess select{border:1px solid var(--line);border-radius:10px;padding:4px 8px;font-size:14px;background:#fff}
@media(max-width:380px){.cta,.btn2{font-size:17px}h1.name{font-size:29px}}

.banner{max-height:150px}.banner img{height:150px}

.labbar{background:#faf3e3;color:#5c3d0b;font-size:12.5px;font-weight:700;text-align:center;padding:6px 10px;letter-spacing:.02em}

.chips{gap:5px}.chip{flex:1 1 auto;font-size:14px;gap:4px;padding:10px 3px;overflow:hidden}.chip svg.i{width:15px;height:15px}.cap{width:78px}

@media(max-width:430px){.chip svg.i{display:none}.chip{padding:10px 4px}}

/* V1.2 acordeón */
.photowrap{position:relative}
.playpill{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border-radius:999px;padding:9px 14px;font-weight:700;font-size:15px}
.playpill svg.i{width:18px;height:18px}
.accs{margin-top:16px}
.accx{border:1.5px solid var(--line);border-radius:20px;margin-bottom:10px;background:#fff;overflow:hidden}
.accx.open{border-color:var(--sage)}
.acch{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;text-align:left}
.acch .t{flex:1;min-width:0}.acch .t b{display:block;font-size:18px;font-weight:700}.acch .t small{display:block;font-size:15px;color:var(--mute)}
.acch svg.chv{width:18px;height:18px;color:#8a8b8f;transition:transform .2s}
.accx.open .acch svg.chv{transform:rotate(90deg)}
.accb{padding:0 16px 16px;animation:fade .2s}
.about-lead{margin:0 0 10px;font-size:16.5px;color:var(--ink2)}
.blk{display:flex;gap:12px;background:var(--soft);border-radius:16px;overflow:hidden;margin-bottom:10px}
.blk img{width:38%;object-fit:cover;object-position:40% 20%;max-height:150px}
.blk div{padding:12px 12px;font-size:15.5px;color:var(--ink2)}.blk b{display:block;font-size:17px;color:var(--ink);margin-bottom:3px}
.cred{margin:0;padding-left:20px;font-size:16px;color:var(--ink2)}
.accb .cardrow{margin-bottom:8px}
.duo{display:flex;gap:10px;margin-top:6px}.duo .pill{flex:1;justify-content:center;padding:12px}
.pres-opt{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#fff}
.pres-opt.on{border-color:var(--sage);background:var(--sage-xl)}
.pres-opt[disabled]{opacity:.65;cursor:not-allowed}
.pres-opt b{display:block;font-size:16.5px}.pres-opt small{color:var(--mute);font-size:14px}

.photo{aspect-ratio:1/0.68}.photo.ini{aspect-ratio:1/0.5}.accx{scroll-margin-top:76px}

.sess select{max-width:112px}.sess{gap:6px}

/* V1.2.2 */
.rec{margin:26px 20px 0;text-align:center}
.rec p{margin:0 0 4px;font-size:14px;color:var(--mute);line-height:1.35}
.recbtn{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;color:var(--sage-d);padding:8px 10px}
.recbtn svg.i{width:14px;height:14px;transition:transform .2s}.recbtn.open svg.i{transform:rotate(90deg)}
.recacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;animation:fade .2s}
.recacts .pill{font-size:14px;padding:8px 12px}

/* V1.3 campana de novedades (DEMO) */
.bellbox{display:flex;justify-content:flex-end;margin:-4px 0 -34px;position:relative;z-index:2}
.bellbtn{position:relative;width:42px;height:42px;border-radius:50%;background:#f4f4f2;display:flex;align-items:center;justify-content:center}
.bellbtn svg{width:22px;height:22px}
.bcount{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:10px;background:#000;color:#fff;font:700 12px/19px system-ui;font-style:normal;text-align:center;padding:0 5px}
.bellpanel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;margin:10px 0 14px}
.bellbox+.bellpanel{margin-top:-30px;padding-top:50px}

/* V1.3.1 presentación animada: reemplaza la foto, 9:16, sin controles de volumen */
.vidbox{position:relative;width:min(100%,calc(78vh*9/16));width:min(100%,calc(78dvh*9/16));aspect-ratio:9/16;margin:0 auto;border-radius:26px;overflow:hidden;background:#0c1626}
.pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#0c1626}
.vtap{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:transparent}
.vplay{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.25);opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s;pointer-events:none}
.vplay svg.i{width:30px;height:30px;margin-left:3px;fill:#111;stroke:#111}
.vidbox.paused .vplay{opacity:1;transform:none}
.vidbox.paused.ended .vtap:after{content:"Ver de nuevo";position:absolute;bottom:4%;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.94);color:#111;font-weight:700;font-size:15px;padding:7px 14px;border-radius:999px}
.vcap{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.vplay{transition:none}}
.wordmark{font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.brand-mio{color:var(--brand)}.brand-hub{color:#111}


/* V1.3.3 portada premium */
.home2{width:100%;max-width:1040px;margin:0 auto;background:var(--bg);min-height:100vh;padding:0 22px 36px}
.hm-hdr{padding:18px 0 6px}
.hm-hdr .brand .wordmark{font-size:28px}
.hero{padding:22px 0 6px;max-width:640px}
.hero h1{margin:0;font-weight:800;color:#111;letter-spacing:-.025em;text-wrap:balance}
.hero .h1a{display:block;font-size:34px;line-height:1.1}
.hero .h1b{display:block;font-size:24px;line-height:1.2;font-weight:700;color:var(--brand);letter-spacing:-.015em;margin-top:10px}
.hero .lead{font-size:16.5px;line-height:1.5;color:var(--ink2);margin:16px 0 0;max-width:520px;text-wrap:pretty}
.bene3{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bene3 li{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:14px 8px 13px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.bene3 .bic{width:42px;height:42px;border-radius:13px;background:var(--sage-xl);display:grid;place-items:center;color:#111}
.bene3 .bic svg{width:22px;height:22px}
.bene3 b{font-size:11.5px;line-height:1.25;letter-spacing:.045em;text-transform:uppercase;color:#111;font-weight:800}
.assist{margin-top:26px;background:var(--sage-xl);border-radius:22px;padding:20px 20px 18px}
.assist h2{margin:0 0 10px;font-size:20px;letter-spacing:-.01em;font-weight:800;color:#111}
.assist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.assist li{display:flex;align-items:center;gap:11px;font-size:16px;color:var(--ink2)}
.assist li svg{width:20px;height:20px;color:var(--brand);flex:none}
.demos2{margin-top:30px}
.demos2 h2{margin:0 0 14px;font-size:24px;letter-spacing:-.015em;font-weight:800;color:#111}
.dgrid{display:grid;grid-template-columns:1fr;gap:12px}
.dcard{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.dcard:active{background:var(--soft);transform:scale(.995)}
.dcard:hover{border-color:var(--brand);box-shadow:0 4px 16px rgba(0,0,0,.07)}
.dph{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;background:#0c1626}
.dcard .t{flex:1;min-width:0}
.dcard .t b{display:block;font-size:19px;font-weight:700;color:#111;letter-spacing:-.01em}
.dcard .t small{display:block;font-size:15.5px;color:var(--mute);margin-top:2px}
.dgo{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.dgo svg{width:18px;height:18px}
.hm-foot{margin-top:34px;text-align:center;font-size:13.5px;color:var(--mute);letter-spacing:.01em}
@media (max-width:379px){ .bene3{grid-template-columns:1fr} .bene3 li{flex-direction:row;text-align:left;padding:11px 14px;gap:14px} .hero .h1a{font-size:30px} .hero .h1b{font-size:22px} }
@media (min-width:900px){
  .home2{padding:0 32px 56px}
  .hm-hdr{padding:28px 0 10px}
  .hero{padding:48px 0 8px;max-width:720px}
  .hero .h1a{font-size:56px;line-height:1.05}
  .hero .h1b{font-size:34px;margin-top:14px}
  .hero .lead{font-size:20px;max-width:600px;margin-top:22px}
  .bene3{gap:18px;margin-top:44px}
  .bene3 li{flex-direction:row;text-align:left;padding:22px 24px;gap:16px;border-radius:22px}
  .bene3 b{font-size:13.5px}
  .assist{display:flex;align-items:center;gap:36px;margin-top:44px;padding:28px 32px}
  .assist h2{margin:0;font-size:24px;flex:none}
  .assist ul{flex-direction:row;gap:28px;flex-wrap:wrap}
  .demos2{margin-top:56px}
  .demos2 h2{font-size:30px;margin-bottom:20px}
  .dgrid{grid-template-columns:1fr 1fr;gap:18px}
  .dcard{padding:20px 22px;gap:20px}
  .dph{width:84px;height:84px}
  .dcard .t b{font-size:22px}
  .hm-foot{margin-top:56px}
}
@media (max-width:379px){ .dcard .t b{font-size:17px} .dcard{gap:12px;padding:12px} .dph{width:56px;height:56px} }

@media (max-width:400px){ .bene3 b{font-size:10.5px;letter-spacing:.03em} .bene3 li{padding:14px 6px 13px} }
@media (max-width:379px){ .hero{padding-top:12px} .bene3{margin-top:18px;gap:8px} .bene3 li{padding:9px 12px;gap:12px} .bene3 .bic{width:34px;height:34px;border-radius:11px} .bene3 .bic svg{width:19px;height:19px} .bene3 b{font-size:11px;letter-spacing:.04em} .demos2{margin-top:24px} }
@media (min-width:700px){ .dgrid{grid-template-columns:1fr 1fr;gap:16px} }

.dic{width:68px;height:68px;border-radius:50%;background:var(--sage-xl);display:grid;place-items:center;flex:none;color:var(--brand)}.dic svg{width:32px;height:32px}
@media (min-width:900px){.dic{width:84px;height:84px}.dic svg{width:38px;height:38px}}
@media (max-width:379px){.dic{width:56px;height:56px}}

/* Enlace del logotipo a la portada (sin alterar el logotipo) */
.brandlink{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:10px}
.brandlink:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* Preguntale a mi MIOHUB */
.askbox{display:flex;align-items:center;gap:14px;width:100%;padding:17px 16px;text-align:left;background:#eef7ee;border:1.5px solid #d6ead6;border-radius:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(66,142,69,.08)}
.askbox:active{background:#e4f0e4}
.askbox:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.askbox .t{flex:1;min-width:0}.askbox .t b{display:block;font-size:18px;font-weight:650;color:#111}.askbox .t small{display:block;font-size:15px;color:#6b6e69;margin-top:2px}
.askic{width:44px;height:44px;border-radius:14px;background:#fff;color:#428E45;display:grid;place-items:center;flex:none}
.askic svg.i{width:24px;height:24px}
.soon{position:relative;text-align:center;padding:6px 4px 2px}
.soon .askic.big{width:60px;height:60px;border-radius:20px;background:#eef7ee;margin:6px auto 14px}
.soon .askic.big svg.i{width:30px;height:30px}
.soon h3{margin:0 0 10px;font-size:23px;color:#111}
.soon p{margin:0 0 12px;font-size:17px;line-height:1.45;color:var(--ink2)}
.soon .soonnote{font-size:15px;color:#6b6e69;margin-bottom:18px}
.soonx{position:absolute;right:0;top:-4px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--ink);background:var(--soft)}

/* Portada: promesa futura bajo el bloque «No sólo muestra quién sos» */
.promise{margin:22px 4px 0;padding:0 2px;background:#fff;text-align:center}
.promise-tag{display:inline-block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.promise p{margin:0 0 4px;font-size:16px;line-height:1.5;color:var(--ink2)}
.promise p b{font-weight:700;color:#111;letter-spacing:-.005em}
.promise .h247{color:#428E45;font-weight:700}
@media (min-width:700px){.promise{margin-top:28px}.promise p{font-size:17px}}

/* MIOHUB BOX (negro mate, compacto) */
.boxcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin:14px 0 18px;padding:14px 16px 13px;text-align:left;background:#171717;color:#fff;border-radius:20px;-webkit-tap-highlight-color:transparent}
.boxcard:active{background:#242424}
.boxcard:focus-visible{outline:3px solid #111;outline-offset:3px}
.boxrow{display:flex;align-items:center;gap:9px;width:100%}
.boxic{width:24px;height:24px;display:grid;place-items:center;color:#fff;flex:none}.boxic svg.i{width:24px;height:24px;stroke-width:1.7}
.boxtt{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.1}
.boxtag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b9bbb6;white-space:nowrap}
.boxsub{font-size:16px;font-weight:600;color:#fff;margin-top:3px}
.boxdesc{font-size:14.5px;line-height:1.35;color:#c9cbc7}
.boxgo{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:15px;font-weight:700;color:#fff}.boxgo svg.i{width:18px;height:18px;stroke-width:2.4;color:#fff}
.boxinfo .boxben{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px;text-align:left}
.boxinfo .bb{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.boxinfo .bbic{width:32px;height:32px;border-radius:10px;background:#eef7ee;color:#428E45;display:grid;place-items:center;flex:none}.boxinfo .bbic svg.i{width:18px;height:18px}
.boxinfo .bbt{font-size:15px;line-height:1.38;color:var(--ink2)}.boxinfo .bbt small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#3A7D3D;margin-bottom:2px}
.boxinfo .boxkey{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:#eef7ee;color:#111;font-weight:700;font-size:16px;line-height:1.38}
.boxinfo .askic.big{width:48px;height:48px;border-radius:16px;margin:2px auto 10px}.boxinfo .askic.big svg.i{width:26px;height:26px}
.boxinfo h3{font-size:21px;margin-bottom:8px}.boxinfo p{font-size:16px;line-height:1.4;margin-bottom:10px}.boxinfo .soonnote{font-size:14px;margin-bottom:12px}
@media (min-width:700px){.boxcard{padding:18px 22px 16px}.boxtt{font-size:24px}}
/* ===== V5: portada MIOHUB BOX, demo interactiva, feedback con cierre ===== */
.boxhome{margin-top:30px}
.boxhome h2{margin:0 0 6px;font-size:22px;letter-spacing:-.015em;font-weight:800;color:#111;text-wrap:balance}
.boxhsub{margin:0 0 14px;font-size:16px;line-height:1.45;color:var(--ink2);max-width:560px}
.boxblk{background:#171717;color:#fff;border-radius:20px;padding:16px 16px 14px}
.boxblk .boxrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.boxblk .boxtag{margin-left:auto}
.boxmain{margin:10px 0 6px;font-size:17px;font-weight:700;line-height:1.35;color:#fff;text-wrap:balance}
.boxblk .boxdesc{margin:0;font-size:14.5px;line-height:1.4;color:#c9cbc7}
.boxsteps{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #333;display:grid;grid-template-columns:1fr;gap:9px}
.boxsteps li{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600;color:#fff}
.bxn{width:22px;height:22px;border-radius:50%;border:1.5px solid #8d8f8a;display:grid;place-items:center;font-size:12px;font-weight:700;color:#d8dad6;flex:none}
.bxi{width:22px;height:22px;display:grid;place-items:center;color:#fff;flex:none}.bxi svg.i{width:21px;height:21px}
@media (min-width:700px){.boxhome{margin-top:44px}.boxhome h2{font-size:26px}.boxblk{padding:22px 26px 20px}.boxmain{font-size:19px;max-width:640px}.boxblk .boxdesc{font-size:15.5px;max-width:640px}.boxsteps{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;padding-top:16px}}
/* demostración dentro de la ventana */
.bxdemo{text-align:left;border:1.5px solid var(--line);border-radius:18px;padding:12px 12px 10px;margin:2px 0 12px;background:#fff}
.bxex{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#6b6e69;background:#f2f2f0;border-radius:8px;padding:3px 8px}
.boxinfo .bxdemo h4{margin:8px 0 2px;font-size:18px;color:#111}
.boxinfo .bxdemo .bxq{margin:0 0 8px;font-size:15.5px;color:var(--ink2)}
.bxopts{display:grid;grid-template-columns:1fr;gap:7px}
.bxopt{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:16px;font-weight:600;color:#111;text-align:left;width:100%}
.bxopt:hover{background:#f6f6f4}
.bxopt .bxoi{width:22px;height:22px;display:grid;place-items:center;flex:none}.bxopt .bxoi svg.i{width:20px;height:20px}
.bxopt.on,.bxopt.on:hover{background:#171717;border-color:#171717;color:#fff}
.bxopt:focus-visible{outline:3px solid #111;outline-offset:2px}
.bxres{margin-top:9px;padding:11px 13px;border-radius:14px;background:#f6f6f4;border:1px dashed #b9bbb6;display:flex;flex-direction:column;gap:3px}
.bxres[hidden]{display:none}
.bxres .bxrt{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#6b6e69}
.bxres b{font-size:16px;color:#111;line-height:1.35}.bxres small{font-size:14px;color:var(--ink2)}
.boxinfo .bxdemo .bxnosearch{margin:9px 0 2px;font-size:15px;font-weight:700;color:#111}
.boxinfo .bxdemo .bxfict{margin:0;font-size:13px;color:#6b6e69}
@media (min-width:700px){.bxopts{grid-template-columns:repeat(3,1fr)}.bxopt{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:12px 8px;font-size:15px}}
/* feedback: cabecera con X y "Ahora no" */
.fbhd{position:sticky;top:-14px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:8px 0 6px;margin:-8px 0 2px}
.fbhd h3{margin:0;font-size:24px}
.fbx{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--ink);background:var(--soft);flex:none}
.later{display:block;width:100%;margin-top:10px;padding:13px;border-radius:14px;background:transparent;color:var(--ink2);font-size:16px;font-weight:600;border:1.5px solid var(--line)}
/* ===== V6: landing comercial (sólo portada "/") ===== */
body.is-home{background:#fff}
.hmroot{width:100%;min-width:0}
.hm-bar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #eceeea}
.hm-bar-in{max-width:1200px;margin:0 auto;padding:11px 22px;display:flex;align-items:center}
.hm-bar .brand .wordmark{font-size:26px}
.home2{max-width:1200px;padding:0 22px 40px}
.herogrid{max-width:none;padding:22px 0 0;display:block}
.herogrid .herotxt{max-width:680px}
.herogrid .bene3{margin-top:22px}
.boxhome{margin-top:30px}
.boxblk .cmp{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.cmpc{border-radius:16px;padding:12px 14px}
.cmp-old{background:#262626;border:1px dashed #4a4a4a;color:#cfd1cd}
.cmp-new{background:#fff;color:#111}
.cmph{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.cmp-old .cmph{color:#a9aba7}.cmp-new .cmph{color:#5b5e59}
.cmpc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.cmp-new ul{flex-direction:column;gap:6px}
.cmpc li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.cmp-old li{opacity:.9}
.cmpi{width:20px;height:20px;display:grid;place-items:center;flex:none}.cmpi svg.i{width:18px;height:18px}
.cmpq{margin:10px 0 0;font-size:16px;font-weight:800}
.cmp-old .cmpq{color:#fff}.cmp-new .cmpq{color:#111}
.cmpclose{margin:12px 0 0;font-size:15.5px;line-height:1.4;font-weight:600;color:#fff;text-wrap:balance}
.boxblk .boxsteps{margin-top:12px}
.cmpnote{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:#a9aba7}
.demos2{margin-top:32px}
.own{margin:30px auto 0;text-align:center;padding:0 4px}
.own h2{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.015em;color:#111}
.own p{margin:0;font-size:16px;color:var(--ink2)}
.promise p+p{margin-top:2px}
@media (min-width:900px){
  .hm-bar-in{padding:14px 40px}.hm-bar .brand .wordmark{font-size:28px}
  .home2{padding:0 40px 64px}
  .herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:44px 0 0}
  .herogrid .bene3{display:flex;flex-direction:column;gap:12px;margin-top:0}
  .herogrid .bene3 li{padding:16px 20px}
  .hero .h1a{font-size:52px}.hero .h1b{font-size:32px}.hero .lead{font-size:19px;max-width:560px}
  .boxhome{margin-top:56px}.boxhome h2{font-size:30px}.boxhsub{font-size:18px}
  .boxblk{padding:28px 32px 24px;border-radius:24px}
  .boxblk .boxmain{font-size:22px;max-width:760px}.boxblk .boxdesc{font-size:16px;max-width:760px}
  .boxblk .cmp{grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
  .cmpc{padding:18px 20px}.cmpc li{font-size:15.5px}.cmpq{font-size:18px}
  .cmpclose{font-size:17px;margin-top:18px}
  .boxblk .boxsteps{margin-top:16px;padding-top:16px}
  .demos2{margin-top:56px}
  .assist{margin-top:44px}
  .promise{max-width:760px;margin:44px auto 0}.promise p{font-size:17px}
  .own{margin-top:44px}.own h2{font-size:28px}.own p{font-size:18px}
}

/* demo individual: una sola tarjeta */
.dgrid{grid-template-columns:1fr !important}
@media (min-width:700px){.dgrid{max-width:520px}}