/* Splash de arranque (evita el flash de la landing al recargar con sesión activa) */
html.booting #s-land{display:none!important;}
#boot-splash{position:fixed;inset:0;z-index:99999;background:#04091a;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;}
html.booting #boot-splash{display:flex;}
#boot-splash .bs-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#00e0b0;animation:bsSpin .8s linear infinite;}
#boot-splash .bs-word{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.32em;font-size:.8rem;color:rgba(255,255,255,.55);text-transform:uppercase;}
@keyframes bsSpin{to{transform:rotate(360deg);}}
/* ── RESET & SCREENS ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:14px;}
/* overflow-x:clip (NO hidden): recorta el desborde horizontal sin convertir
   al <body> en contenedor de scroll. Con 'hidden', el body scrolleaba y en
   iOS Safari la barra fija del landing (.lnav) se pegaba al body y "bajaba". */
body{font-family:"Inter",sans-serif;font-weight:300;overflow-x:clip;}
.screen{display:none!important;}
.screen.on{display:block!important;}
#s-dash.on{display:flex!important;height:100vh;overflow:hidden;}
#lbar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#2448f0,#00e0b0);z-index:9999;transition:width .4s;}

/* ── LANDING ── (tema claro, natural — blanco + cajitas) */
#s-land{background:#f5f6f8;color:#16203a;min-height:100vh;min-height:100dvh;}
.orb{display:none;}
.o1,.o2{display:none;}

/* NAV */
.lnav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 60px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,32,58,.07);transition:background .3s;transform:translateZ(0);}
.nlogo{display:flex;align-items:center;gap:9px;cursor:pointer;}
.nring{width:28px;height:28px;background:var(--aura-mark) center/contain no-repeat;position:relative;flex-shrink:0;}
@keyframes spin{to{filter:drop-shadow(0 0 8px rgba(47,134,255,.55));}}
.nring::after{display:none;}
.nbrand{font-family:"Allura",cursive;font-size:1.15rem;font-weight:800;color:#16203a;letter-spacing:-.02em;}
.nbtns{display:flex;gap:8px;}
.btn-o{padding:7px 17px;border-radius:9px;border:1px solid rgba(23,32,58,.16);background:#fff;color:#41506b;font-family:"Inter",sans-serif;font-size:.78rem;cursor:pointer;transition:all .2s;}
.btn-o:hover{border-color:rgba(23,32,58,.32);color:#16203a;}
.btn-m{padding:7px 19px;border-radius:9px;border:none;background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;font-family:"Inter",sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-m:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,184,156,.28);}

/* HERO */
.hero{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:120px 60px 70px;position:relative;z-index:1;max-width:1280px;margin:0 auto;}

/* LADO IZQUIERDO — demo animado */
.hdemo{display:flex;flex-direction:column;align-items:center;gap:14px;}
.hd-intro{display:inline-flex;align-items:center;gap:9px;background:#eafaf5;border:1px solid rgba(10,184,156,.3);border-radius:100px;padding:9px 18px;cursor:pointer;font-family:"Inter",sans-serif;transition:all .2s;box-shadow:0 2px 10px rgba(10,184,156,.1);}
.hd-intro:hover{background:#dff6ef;border-color:rgba(10,184,156,.5);transform:translateY(-1px);}
.hd-intro-t{font-weight:800;font-size:.92rem;color:#08856f;letter-spacing:-.01em;}
.hd-arrow{font-size:.8rem;color:#0ab89c;transition:transform .25s;line-height:1;}
.hd-intro.open .hd-arrow{transform:rotate(180deg);}
.hd-chips{display:none;gap:8px;flex-wrap:wrap;justify-content:center;animation:chipsIn .3s ease;}
.hd-chips.show{display:flex;}
@keyframes chipsIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.hd-chip{font-family:"JetBrains Mono",monospace;font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;padding:6px 13px;border-radius:100px;border:1px solid rgba(18,36,74,.9);color:rgba(255,255,255,.72);transition:all .3s;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;background:#12244a;box-shadow:0 2px 8px rgba(9,18,40,.16);}
.hd-chip:hover{border-color:#0e1c3b;color:#fff;background:#16294f;}
.hd-chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;transition:all .3s;}
.hd-chip.on{border-color:rgba(0,196,154,.6);color:#4fe0c0;background:#0e1c3b;}
.hd-chip.on .dot{opacity:1;box-shadow:0 0 8px currentColor;}
/* ── Lista de asistentes (home tipo WhatsApp) ── */
.wa-list{display:none;height:490px;overflow-y:auto;background:#0b141a;flex-direction:column;scrollbar-width:none;-ms-overflow-style:none;}
.wa-list::-webkit-scrollbar{display:none;}
.screen-wrap.mode-list .wa-list{display:flex;}
.screen-wrap.mode-list #waBody,.screen-wrap.mode-list #waQR,.screen-wrap.mode-list .wa-input{display:none;}
.screen-wrap.mode-list #waBack{display:none;}
.wl-head{padding:11px 14px 9px;color:#8696a0;font-size:.58rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.05);}
.wl-row{display:flex;align-items:center;gap:11px;padding:10px 13px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:background .15s;}
.wl-row:hover{background:#182229;}
.wl-row:active{background:#1f2c34;}
.wl-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#2a3942;color:#e9edef;}
.wl-mid{flex:1;min-width:0;}
.wl-name{font-size:.85rem;font-weight:600;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.wl-prev{font-size:.68rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;display:flex;align-items:center;gap:4px;}
.wl-prev .tk{color:#53bdeb;flex-shrink:0;}
.wl-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;padding-top:2px;}
.wl-time{font-size:.55rem;color:#8696a0;}
.wl-badge{background:#00a884;color:#04241d;font-size:.58rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;}

/* ── Teléfono / marco ── */
.phone{width:330px;max-width:100%;border-radius:40px;background:#000;padding:9px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.06);position:relative;}
.screen-wrap{border-radius:32px;overflow:hidden;position:relative;background:#0b141a;}
/* barra de estado del teléfono */
.ph-status{background:#1f2c34;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;font-size:.6rem;color:#e9edef;font-weight:500;position:relative;z-index:6;}
.ph-status .rgt{display:flex;align-items:center;gap:5px;}
.ph-status .rgt svg{display:block;}
.ph-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:78px;height:19px;background:#000;border-bottom-left-radius:11px;border-bottom-right-radius:11px;z-index:7;}

/* WhatsApp header */
.wa-top{background:#1f2c34;padding:8px 10px;display:flex;align-items:center;gap:7px;position:relative;z-index:5;}
.wa-back{color:#e9edef;font-size:1.2rem;line-height:1;opacity:.9;}
.wa-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;background:#6a7d89;color:#0b141a;overflow:hidden;}
.wa-meta{flex:1;min-width:0;}
.wa-name{font-size:.84rem;font-weight:600;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;}
.wa-sub{font-size:.62rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.wa-sub.typing{color:#00a884;}
.wa-acts{display:flex;align-items:center;gap:16px;color:#e9edef;opacity:.92;padding-right:4px;}
.wa-acts svg{display:block;}

/* chat body — wallpaper WhatsApp */
.wa-body{height:410px;padding:12px 8px 8px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative;background-color:#0b141a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9d6de' stroke-width='1.4' stroke-linecap='round' opacity='0.05'%3E%3Cpath d='M16 20c4-5 10-5 12 0'/%3E%3Ccircle cx='34' cy='16' r='4'/%3E%3Cpath d='M78 22h14M85 15v14'/%3E%3Cpath d='M100 40c3 0 5 2 5 5s-2 5-5 5'/%3E%3Cpath d='M20 60c0-5 4-8 9-8s9 3 9 8-9 12-9 12-9-7-9-12z'/%3E%3Crect x='62' y='54' width='16' height='12' rx='2'/%3E%3Cpath d='M62 58l8 5 8-5'/%3E%3Cpath d='M12 96c2-4 8-4 10 0M8 100h18'/%3E%3Ccircle cx='96' cy='92' r='7'/%3E%3Cpath d='M96 88v4l3 2'/%3E%3Cpath d='M44 92h20M44 98h14'/%3E%3C/g%3E%3C/svg%3E");}
.wa-enc{align-self:center;background:#182229;color:#ffd279;font-size:.56rem;line-height:1.4;padding:5px 12px;border-radius:8px;margin-bottom:8px;max-width:90%;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.15);}
.wa-day{align-self:center;background:#182229;color:#8696a0;font-size:.56rem;padding:4px 11px;border-radius:8px;margin-bottom:8px;box-shadow:0 1px 1px rgba(0,0,0,.15);}

.msg{max-width:82%;padding:6px 8px 5px;border-radius:8px;font-size:.76rem;line-height:1.32;position:relative;animation:pop .3s cubic-bezier(.2,.9,.3,1.2);word-wrap:break-word;margin-top:20px;box-shadow:0 1px .5px rgba(0,0,0,.18);}
.msg .txt{white-space:pre-line;color:#e9edef;}
.msg .meta{float:right;margin:6px 0 -2px 8px;font-size:.52rem;color:#8696a0;display:inline-flex;align-items:center;gap:3px;line-height:1;position:relative;top:3px;}
@keyframes pop{from{opacity:0;transform:translateY(7px) scale(.97);}to{opacity:1;transform:none;}}
.msg.in{align-self:flex-start;background:#1f2c34;border-top-left-radius:0;}
.msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:0;}
.msg.out .meta{color:#8fb9b0;}
.msg.out .tick svg{display:block;}
/* colita */
.msg.in::before{content:"";position:absolute;top:0;left:-7px;width:0;height:0;border:7px solid transparent;border-top-color:#1f2c34;border-right:0;}
.msg.out::before{content:"";position:absolute;top:0;right:-7px;width:0;height:0;border:7px solid transparent;border-top-color:#005c4b;border-left:0;}

/* typing bubble */
.typing{align-self:flex-start;background:#1f2c34;padding:9px 12px;border-radius:8px;border-top-left-radius:0;display:flex;gap:4px;margin-top:20px;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.18);}
.typing::before{content:"";position:absolute;top:0;left:-7px;width:0;height:0;border:7px solid transparent;border-top-color:#1f2c34;border-right:0;}
.typing span{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:td 1.3s infinite;}
.typing span:nth-child(2){animation-delay:.18s;}
.typing span:nth-child(3){animation-delay:.36s;}
@keyframes td{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* sugerencias rápidas (quick replies) del demo */
.wa-qr{display:flex;gap:6px;overflow-x:auto;padding:7px 8px 3px;background:#0b141a;position:relative;z-index:5;scrollbar-width:none;-ms-overflow-style:none;}
.wa-qr::-webkit-scrollbar{display:none;}
.wa-qr:empty{display:none;}
.wa-qr button{white-space:nowrap;flex-shrink:0;background:rgba(0,168,132,.14);border:1px solid rgba(0,168,132,.4);color:#7fe0cd;font-size:.64rem;padding:5px 11px;border-radius:100px;cursor:pointer;font-family:inherit;transition:all .18s;}
.wa-qr button:hover{background:rgba(0,168,132,.26);border-color:rgba(0,168,132,.6);}
.wa-qr button:active{transform:scale(.95);}

/* barra de input WhatsApp */
.wa-input{background:#0b141a;padding:6px 8px;display:flex;align-items:center;gap:7px;position:relative;z-index:5;}
.wa-field{flex:1;background:#1f2c34;border-radius:20px;height:34px;display:flex;align-items:center;padding:0 12px;gap:9px;color:#8696a0;font-size:.72rem;}
.wa-field .ph{flex:1;}
.wa-field .wa-in{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#e9edef;font-size:.72rem;font-family:inherit;padding:0;}
.wa-field .wa-in::placeholder{color:#8696a0;}
.wa-field svg,.wa-input>svg{color:#8696a0;display:block;flex-shrink:0;}
.wa-mic{width:34px;height:34px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0b141a;border:0;cursor:pointer;padding:0;}
.wa-mic:active{transform:scale(.92);}

/* LADO DERECHO — copy */
.hcopy{max-width:520px;border-left:1px solid rgba(23,32,58,.09);padding-left:52px;}
.htag{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:100px;background:#eafaf5;border:1px solid rgba(10,184,156,.28);font-family:"Inter",sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.02em;text-transform:none;color:#08957e;margin-bottom:24px;}
.hd{width:5px;height:5px;border-radius:50%;background:#0ab89c;animation:pu 2s infinite;}
@keyframes pu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.htitle{font-family:"Inter",sans-serif;font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#16203a;margin-bottom:20px;}
.gr{color:#0f3a8c;}
@keyframes gs{0%,100%{background-position:0%}50%{background-position:100%}}
.hsub{font-size:.98rem;color:#55607a;line-height:1.7;max-width:460px;margin:0 0 32px;}
.hbtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;}
.hm-wrap{position:relative;display:inline-flex;}
.hm-arrow{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);width:92px;height:80px;pointer-events:none;animation:hmArrowN 1.4s ease-in-out infinite;}
.hm-arrow svg{width:100%;height:100%;}
@keyframes hmArrowN{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-50%) translateX(8px);}}
@media(max-width:480px){.hm-arrow{display:none;}}
.btn-hm{padding:13px 28px;border-radius:12px;border:none;background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;font-family:"Inter",sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .22s;box-shadow:0 6px 18px rgba(10,184,156,.22);}
.btn-hm:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,184,156,.28);}
.btn-hs{padding:13px 28px;border-radius:12px;border:1px solid rgba(23,32,58,.14);background:#fff;color:#16203a;font-family:"Inter",sans-serif;font-size:.88rem;cursor:pointer;transition:all .22s;box-shadow:0 1px 2px rgba(23,32,58,.04);}
.btn-hs:hover{border-color:rgba(23,32,58,.28);box-shadow:0 4px 12px rgba(23,32,58,.07);}
.hstats{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.hst-v{font-family:"Inter",sans-serif;font-size:1.3rem;font-weight:800;color:#16203a;white-space:nowrap;}
.hst-v span{color:#0f3a8c;}
.hst-l{font-family:"Inter",sans-serif;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#8b93a6;margin-top:4px;}
.hsep{width:1px;background:rgba(23,32,58,.1);align-self:stretch;}

@media(max-width:900px){
  .lnav{padding:14px 20px;}
  .hero{grid-template-columns:1fr;padding:100px 22px 60px;gap:36px;text-align:center;}
  .hcopy{order:1;max-width:100%;margin:0 auto;border-left:none;padding-left:0;}
  .hdemo{order:2;}
  .hsub{margin-left:auto;margin-right:auto;}
  .hbtns,.hstats{justify-content:center;}
}

/* BOTS SECTION */
.lsec{padding:80px 60px;position:relative;z-index:1;max-width:1100px;margin:0 auto;}
.stag{font-family:"Inter",sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#0a9d86;margin-bottom:11px;}
.sh{font-family:"Inter",sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#16203a;letter-spacing:-.02em;line-height:1.15;margin-bottom:11px;}
.sh .dim{color:#9aa2b3;}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;}
.bc{background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:20px;overflow:hidden;transition:all .25s;box-shadow:0 1px 2px rgba(23,32,58,.04),0 10px 26px rgba(23,32,58,.05);}
.bc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(23,32,58,.12);border-color:rgba(23,32,58,.14);}
.bctop{padding:24px 20px 18px;position:relative;overflow:hidden;}
.bctop::before{content:"";position:absolute;inset:0;opacity:.06;}
.bt1::before{background:radial-gradient(ellipse at 30% 30%,#5a7fff,transparent);}
.bt2::before{background:radial-gradient(ellipse at 30% 30%,#00c49a,transparent);}
.bt3::before{background:radial-gradient(ellipse at 30% 30%,#9b6fff,transparent);}
.bnum{font-family:"Inter",sans-serif;font-size:4rem;font-weight:800;color:rgba(23,32,58,.05);position:absolute;top:8px;right:14px;line-height:1;}
.bico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:13px;}
.bi1{background:linear-gradient(135deg,rgba(21,53,212,.4),rgba(90,127,255,.3));border:1px solid rgba(90,127,255,.3);}
.bi2{background:linear-gradient(135deg,rgba(0,196,154,.3),rgba(0,224,176,.2));border:1px solid rgba(0,196,154,.3);}
.bi3{background:linear-gradient(135deg,rgba(130,80,255,.3),rgba(170,130,255,.2));border:1px solid rgba(130,80,255,.3);}
.btg{font-family:"JetBrains Mono",monospace;font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;display:inline-flex;padding:2px 8px;border-radius:100px;}
.btg1{background:rgba(90,127,255,.15);color:#5a7fff;border:1px solid rgba(90,127,255,.25);}
.btg2{background:rgba(0,196,154,.12);color:#00c49a;border:1px solid rgba(0,196,154,.22);}
.btg3{background:rgba(130,80,255,.12);color:#a882ff;border:1px solid rgba(130,80,255,.22);}
.bname{font-family:"Inter",sans-serif;font-size:1.05rem;font-weight:800;color:#16203a;margin-bottom:5px;}
.bdesc{font-size:.76rem;color:#606b81;line-height:1.6;}
.bcbody{padding:15px 20px;border-top:1px solid rgba(23,32,58,.07);}
.bcfeats{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.bcfeats li{font-size:.74rem;color:#525d73;display:flex;align-items:center;gap:7px;}
.bcfeats li::before{content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.f1::before{background:#5a7fff;}.f2::before{background:#00c49a;}.f3::before{background:#a882ff;}
.bpv{font-family:"Inter",sans-serif;font-size:1.45rem;font-weight:800;color:#16203a;line-height:1;}
.bpp{font-family:"Inter",sans-serif;font-size:.58rem;color:#8b93a6;margin-top:2px;margin-bottom:12px;}
.bbtn{width:100%;padding:9px;border-radius:10px;border:none;font-family:"Inter",sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;}
.bb1{background:linear-gradient(135deg,#1535d4,#2448f0);color:#fff;}
.bb1:hover{box-shadow:0 7px 20px rgba(21,53,212,.4);}
.bb2{background:linear-gradient(135deg,#00c49a,#00e0b0);color:#04091a;}
.bb2:hover{box-shadow:0 7px 20px rgba(0,196,154,.4);}
.bb3{background:linear-gradient(135deg,#7b4fff,#a882ff);color:#fff;}
.bb3:hover{box-shadow:0 7px 20px rgba(123,79,255,.4);}
.pop-r{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#00c49a,#5a7fff);color:#04091a;font-family:"JetBrains Mono",monospace;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:100px;font-weight:600;z-index:2;}
.bundle-box{background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:20px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;position:relative;overflow:hidden;margin-top:18px;box-shadow:0 1px 2px rgba(23,32,58,.04),0 10px 26px rgba(23,32,58,.05);}
.bundle-box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 50%,rgba(10,184,156,.08) 0%,transparent 62%);pointer-events:none;}
.bundle-info{position:relative;}
.bundle-lbl{font-family:"Inter",sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#0a9d86;margin-bottom:5px;}
.bundle-title{font-family:"Inter",sans-serif;font-size:1.15rem;font-weight:800;color:#16203a;margin-bottom:2px;}
.bundle-sub{font-size:.76rem;color:#606b81;}
.bundle-right{position:relative;display:flex;align-items:center;gap:18px;}
.bundle-price{font-family:"Inter",sans-serif;font-size:1.8rem;font-weight:800;color:#16203a;text-align:center;}
.bundle-per{font-family:"Inter",sans-serif;font-size:.56rem;color:#8b93a6;}
.bundle-btn{padding:10px 22px;border-radius:11px;border:none;background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;font-family:"Inter",sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 5px 14px rgba(10,184,156,.24);}
.bundle-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,184,156,.32);}
/* ── LANDING · SECCIONES NUEVAS ── */
/* fix overscroll: base oscura mientras el landing está activo (el body es claro para el panel) */
html:has(#s-land.on){background:#f5f6f8;}
.nlinks{display:flex;gap:26px;align-items:center;}
.nlink{color:#55607a;font-family:"Inter",sans-serif;font-size:.82rem;text-decoration:none;cursor:pointer;transition:color .2s;background:none;border:none;padding:0;}
.nlink:hover{color:#16203a;}
.sh-wrap{text-align:center;max-width:660px;margin:0 auto;}
.ssub{font-size:.95rem;color:#55607a;line-height:1.7;margin-top:8px;}

/* Cómo funciona — pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;}
.step{background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:20px;padding:28px 24px;transition:all .25s;box-shadow:0 1px 2px rgba(23,32,58,.04),0 10px 26px rgba(23,32,58,.05);}
.step:hover{transform:translateY(-4px);border-color:rgba(10,184,156,.32);box-shadow:0 18px 40px rgba(23,32,58,.12);}
.step-n{font-family:"Inter",sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;color:#0a9d86;margin-bottom:16px;}
.step-ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px;background:linear-gradient(135deg,#eafaf5,#eef2ff);border:1px solid rgba(23,32,58,.07);}
.step-t{font-family:"Inter",sans-serif;font-size:1.05rem;font-weight:800;color:#16203a;margin-bottom:7px;}
.step-d{font-size:.82rem;color:#606b81;line-height:1.6;}

/* Departamentos / features */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
.fcell{position:relative;background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:16px;padding:22px 20px;transition:all .22s;box-shadow:0 1px 2px rgba(23,32,58,.04),0 8px 22px rgba(23,32,58,.05);}
.fcell-tag{position:absolute;top:14px;right:14px;font-family:"Inter",sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:#7a8398;background:#f1f3f7;border:1px solid rgba(23,32,58,.08);}
.fcell-tag--on{color:#08957e;background:#e7f8f1;border-color:rgba(10,184,156,.32);}
.fcell:hover{transform:translateY(-3px);border-color:rgba(23,32,58,.14);box-shadow:0 14px 32px rgba(23,32,58,.1);}
.fcell-ic{font-size:1.5rem;margin-bottom:12px;display:block;}
.fcell-t{font-family:"Inter",sans-serif;font-size:.95rem;font-weight:700;color:#16203a;margin-bottom:5px;}
.fcell-d{font-size:.77rem;color:#606b81;line-height:1.55;}

/* Precios */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:20px;justify-content:center;margin-top:56px;}
.pcard{background:#fff;border:1px solid rgba(23,32,58,.1);border-radius:22px;padding:30px 28px;position:relative;transition:all .25s;text-align:left;box-shadow:0 1px 2px rgba(23,32,58,.04),0 10px 26px rgba(23,32,58,.05);}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(23,32,58,.13);}
.pcard.feat{border-color:rgba(10,184,156,.42);background:linear-gradient(160deg,#f0fbf7,#ffffff);box-shadow:0 2px 4px rgba(10,184,156,.08),0 16px 38px rgba(10,184,156,.12);}
.pcard-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;font-family:"Inter",sans-serif;font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:5px 14px;border-radius:100px;white-space:nowrap;box-shadow:0 4px 12px rgba(10,184,156,.3);}
.pname{font-family:"Inter",sans-serif;font-size:1rem;font-weight:700;color:#16203a;margin-bottom:4px;}
.pdesc{font-size:.76rem;color:#606b81;margin-bottom:18px;line-height:1.5;}
.pprice{font-family:"Inter",sans-serif;font-size:2.7rem;font-weight:800;color:#16203a;line-height:1;letter-spacing:-.02em;}
.pprice sup{font-size:1.1rem;font-weight:700;vertical-align:top;margin-right:2px;opacity:.7;}
.pper{font-family:"Inter",sans-serif;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:#8b93a6;margin-top:8px;margin-bottom:6px;}
.psave{display:inline-block;font-size:.74rem;font-weight:700;color:#0a9d86;margin-bottom:6px;}
.pfeats{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0 22px;padding:0;}
.pfeats li{font-size:.8rem;color:#4b566d;display:flex;align-items:flex-start;gap:9px;line-height:1.4;}
.pfeats li::before{content:"✓";color:#0ab89c;font-size:.7rem;flex-shrink:0;margin-top:1px;font-weight:700;}
.pbtn{width:100%;padding:13px;border-radius:12px;border:1px solid rgba(23,32,58,.16);background:#fff;color:#16203a;font-family:"Inter",sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;transition:all .2s;}
.pbtn:hover{border-color:rgba(23,32,58,.3);box-shadow:0 4px 12px rgba(23,32,58,.08);}
.pcard.feat .pbtn{border:none;background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;box-shadow:0 6px 16px rgba(10,184,156,.24);}
.pcard.feat .pbtn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,184,156,.32);}
.ptrial{text-align:center;margin-top:28px;font-size:.84rem;color:#606b81;}
.ptrial b{color:#08957e;}
.panchor{text-align:center;max-width:520px;margin:14px auto 0;font-size:.84rem;color:#606b81;line-height:1.6;}
.panchor b{color:#16203a;}

/* Hero — garantía / risk reversal */
.hguarantee{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#4b566d;margin:-30px 0 40px;padding:8px 15px;border-radius:100px;background:#eafaf5;border:1px solid rgba(10,184,156,.24);}
.hguarantee b{color:#08957e;font-weight:700;}

/* Barra de confianza */
.trustbar{max-width:1100px;margin:0 auto;padding:0 60px;position:relative;z-index:1;}
.trustbar-in{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;padding:22px 26px;border-radius:18px;background:#fff;border:1px solid rgba(23,32,58,.08);box-shadow:0 1px 2px rgba(23,32,58,.04),0 8px 22px rgba(23,32,58,.05);}
.trust-i{display:flex;align-items:center;gap:9px;font-size:.84rem;color:#41506b;font-weight:500;}
.trust-i .ci{width:20px;height:20px;border-radius:50%;background:#e7f8f1;color:#08957e;display:flex;align-items:center;justify-content:center;font-size:.66rem;flex-shrink:0;font-weight:700;}

/* Testimonios */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;}
.tcard{background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:20px;padding:26px 24px;text-align:left;transition:all .25s;box-shadow:0 1px 2px rgba(23,32,58,.04),0 10px 26px rgba(23,32,58,.05);}
.tcard:hover{transform:translateY(-4px);border-color:rgba(10,184,156,.3);box-shadow:0 18px 40px rgba(23,32,58,.12);}
.tstars{color:#f5b100;font-size:.9rem;letter-spacing:2px;margin-bottom:12px;}
.tquote{font-size:.88rem;color:#3a4557;line-height:1.65;margin-bottom:18px;}
.twho{display:flex;align-items:center;gap:11px;}
.tav{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:linear-gradient(135deg,#d9f5ec,#e4ebff);border:1px solid rgba(23,32,58,.08);}
.tname{font-family:"Inter",sans-serif;font-size:.85rem;font-weight:700;color:#16203a;line-height:1.2;}
.trole{font-size:.74rem;color:#8b93a6;margin-top:2px;}

/* Antes vs Después */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px auto 0;max-width:900px;}
.cmp-col{border-radius:20px;padding:28px 26px;border:1px solid rgba(23,32,58,.09);box-shadow:0 1px 2px rgba(23,32,58,.04),0 8px 22px rgba(23,32,58,.05);}
.cmp-bad{background:#fdf3f3;border-color:rgba(224,90,90,.2);}
.cmp-good{background:linear-gradient(160deg,#f0fbf7,#ffffff);border-color:rgba(10,184,156,.34);}
.cmp-h{font-family:"Inter",sans-serif;font-size:1.02rem;font-weight:800;color:#16203a;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.cmp-tag{font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:100px;}
.cmp-bad .cmp-tag{background:#fbe3e3;color:#d15656;}
.cmp-good .cmp-tag{background:#d9f4ec;color:#08957e;}
.cmp-li{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;line-height:1.5;padding:7px 0;color:#4b566d;}
.cmp-li .ic{flex-shrink:0;margin-top:1px;font-size:.9rem;}
.cmp-bad .cmp-li .ic{color:#e06a6a;}
.cmp-good .cmp-li .ic{color:#0ab89c;}

/* Urgencia / lanzamiento */
.urgbar{max-width:1100px;margin:36px auto 0;padding:0 60px;position:relative;z-index:1;}
.urgbar-in{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:11px 22px 13px;border-radius:14px;background:linear-gradient(90deg,#fff4ea,#fdeee9);border:1px solid rgba(230,140,70,.28);font-size:.84rem;color:#6a5748;}
.urgbar-in b{color:#c9741f;}
.urg-seg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.urg-msg{color:#6a5748;}
.urg-dot{color:rgba(120,90,60,.35);}
.urg-k{font-family:"Inter",sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.03em;color:#9a7a5c;text-transform:uppercase;}
.urg-time{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:.84rem;color:#6a5748;letter-spacing:.01em;}
.urg-time b{color:#3a2f26;font-weight:800;}
.urg-cnum{font-family:"Inter",sans-serif;font-weight:800;color:#3a2f26;font-variant-numeric:tabular-nums;font-size:.95rem;}
.lc-left{font-size:.64rem;font-weight:600;color:#c9741f;}
.lc-ended{font-family:"Inter",sans-serif;font-size:.8rem;font-weight:700;color:#c9741f;}
.urg-fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#ff8c3c,#ff5a5a);transition:width .8s ease;}
@media(max-width:640px){ .urg-dot{display:none;} .urgbar-in{gap:8px 14px;} }
/* Contadores de lanzamiento (compactos: se ven, pero no ocupan todo) */

/* Qué hace — showcase en carrusel horizontal (solo flecha, sin swipe) */
.qhshow{position:relative;margin-top:56px;padding:0 52px;}
.qh-viewport{overflow:hidden;}
.qh-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;}
.qhrow{flex:0 0 100%;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:4px;}
.qhtext{max-width:440px;}
/* Flechas de navegación */
.qh-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(23,32,58,.12);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:#16203a;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,opacity .2s,transform .15s;box-shadow:0 8px 22px rgba(23,32,58,.14);}
.qh-nav:hover{background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;border-color:transparent;}
.qh-nav:active{transform:translateY(-50%) scale(.92);}
.qh-nav[disabled]{opacity:.28;pointer-events:none;}
.qh-prev{left:0;}.qh-next{right:0;}
/* Puntos */
.qh-dots{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.qh-dot{width:8px;height:8px;border-radius:50%;background:rgba(23,32,58,.18);border:none;padding:0;cursor:pointer;transition:width .25s,background .2s;}
.qh-dot.on{background:#0ab89c;width:22px;border-radius:4px;}
.qh-k{font-family:"Inter",sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#0a9d86;margin-bottom:13px;display:flex;align-items:center;gap:8px;}
.qh-k .qh-ic{font-size:1.05rem;}
.qh-t{font-family:"Inter",sans-serif;font-size:1.55rem;font-weight:800;color:#16203a;line-height:1.18;letter-spacing:-.01em;margin-bottom:12px;}
.qh-d{font-size:.92rem;color:#55607a;line-height:1.65;}
.qh-li{display:flex;align-items:center;gap:9px;font-size:.84rem;color:#4b566d;margin-top:10px;}
.qh-li::before{content:"✓";color:#0ab89c;font-weight:700;font-size:.72rem;}
.qhframe{border-radius:16px;overflow:hidden;border:1px solid rgba(23,32,58,.1);background:#fff;box-shadow:0 20px 50px rgba(23,32,58,.13);}
.qhbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f3f7;border-bottom:1px solid rgba(23,32,58,.07);}
.qhbar i{width:10px;height:10px;border-radius:50%;display:block;}
.qhbar i:nth-child(1){background:#ff5f57;}.qhbar i:nth-child(2){background:#febc2e;}.qhbar i:nth-child(3){background:#28c840;}
.qhbar .qhurl{margin-left:12px;font-family:"JetBrains Mono",monospace;font-size:.56rem;color:#9aa2b3;}
.qhshot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:linear-gradient(160deg,#12244a,#0e1c3b);}
.qhshot.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.5);font-size:.82rem;text-align:center;padding:24px;}
.qhshot-wrap{background:linear-gradient(160deg,#12244a,#0e1c3b);}
.qhshot.ph .qhph-ic{font-size:1.8rem;opacity:.7;}
/* Capturas reales de teléfono: marco de móvil en todos los tamaños */
.qh-desktop{display:none;}
.qh-phone{display:block;}
.qhphone{max-width:290px;margin:0 auto;border-radius:36px;border:1px solid rgba(23,32,58,.14);background:#1c2333;padding:9px;box-shadow:0 24px 56px rgba(23,32,58,.2);position:relative;}
.qhphone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);z-index:2;}
.qhphone .qhshot{border-radius:28px;aspect-ratio:3/4;object-fit:cover;object-position:top center;}
.qhphone .qhshot.ph{aspect-ratio:3/4;}
/* Contenedor imagen: el placeholder queda detrás como respaldo si la captura no carga */
.qhshot-wrap{position:relative;display:block;width:100%;overflow:hidden;}
.qhframe .qhshot-wrap{aspect-ratio:16/10;}
.qhphone .qhshot-wrap{aspect-ratio:3/4;border-radius:28px;}
.qhshot-wrap .ph{position:absolute;inset:0;z-index:0;margin:0;}
.qhshot-wrap img.qhshot{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
/* Divisor "y adentro, el equipo" */
.qhteam-h{text-align:center;margin:64px 0 0;font-family:"Inter",sans-serif;font-size:1.1rem;font-weight:700;color:#16203a;}
.qhteam-h span{color:#8b93a6;font-weight:500;}

/* FAQ */
.faq-wrap{max-width:760px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px;}
.faq{background:#fff;border:1px solid rgba(23,32,58,.09);border-radius:14px;overflow:hidden;transition:border-color .2s;box-shadow:0 1px 2px rgba(23,32,58,.04),0 6px 16px rgba(23,32,58,.04);}
.faq[open]{border-color:rgba(10,184,156,.3);}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:"Inter",sans-serif;font-size:.92rem;font-weight:600;color:#16203a;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:#0ab89c;flex-shrink:0;transition:transform .2s;line-height:1;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq-a{padding:0 22px 20px;font-size:.87rem;color:#55607a;line-height:1.65;}

/* CTA fijo móvil */
.mcta{display:none;}
@media(max-width:760px){
  /* En móvil las barras fijas van OPACAS: en Safari el blur es débil y el
     contenido se transparentaba por detrás, dejando un amontonamiento feo. */
  .lnav{background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9500;padding:11px 16px calc(11px + env(safe-area-inset-bottom));gap:10px;align-items:center;background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid rgba(23,32,58,.1);box-shadow:0 -6px 20px rgba(23,32,58,.08);transform:translateZ(0);}
  /* Rellena la franja bajo la barra (donde Safari deja ver el contenido detrás de su barra flotante). */
  .mcta::after{content:'';position:absolute;left:0;right:0;top:100%;height:160px;background:#ffffff;pointer-events:none;}
  .mcta .mc-btn{flex:1;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#2f86ff,#00d4a6);color:#04241d;font-family:"Inter",sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;}
  #s-land{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
  #nilo-corner-logo{display:none!important;}
  .trustbar{padding:0 22px;}
  .tgrid{grid-template-columns:1fr;}
  .hguarantee{margin:-18px auto 34px;}
}

/* CTA final */
.lcta{max-width:1100px;margin:0 auto;padding:20px 60px 20px;}
.lcta-box{background:linear-gradient(160deg,#f0fbf7,#ffffff);border:1px solid rgba(10,184,156,.22);border-radius:26px;padding:52px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 2px 6px rgba(10,184,156,.06),0 18px 44px rgba(23,32,58,.08);}
.lcta-box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(10,184,156,.1),transparent 62%);pointer-events:none;}
.lcta-t{font-family:"Inter",sans-serif;font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);color:#16203a;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px;position:relative;}
.lcta-s{font-size:.94rem;color:#55607a;margin:0 auto 26px;position:relative;max-width:480px;line-height:1.6;}

@media(max-width:900px){
  .lsec{padding:60px 22px;}
  .steps,.fgrid,.cmp{grid-template-columns:1fr;}
  .qhrow{grid-template-columns:1fr;gap:22px;}
  .qhrow .qhmedia{order:-1!important;}
  .qhtext{max-width:none;}
  .qhshow{padding:0 6px;}
  .qh-nav{top:38%;width:38px;height:38px;font-size:1.25rem;}
  .qh-prev{left:-2px;}.qh-next{right:-2px;}
  .qh-desktop{display:none;}
  .qh-phone{display:block;}
  .urgbar{padding:0 22px;}
  .pgrid{grid-template-columns:1fr;}
  .lcta{padding:0 22px;}
  .lcta-box{padding:40px 24px;}
  .nlinks{display:none;}
}

/* ── Carruseles horizontales SOLO en móvil (departamentos, antes/después, precios, testimonios) ── */
@media(max-width:760px){
  .fgrid,.cmp,.pgrid,.tgrid{
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    /* En iOS/Safari el legacy -webkit-overflow-scrolling:touch hace que dos
       scroll-containers visibles a la vez se "fantasmeen"/superpongan.
       Se omite (el momentum ya es nativo) y se aísla cada carrusel. */
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:22px;
    margin-left:-22px;
    margin-right:-22px;
    padding:4px 22px 14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    position:relative;
    z-index:0;
    isolation:isolate;
  }
  .fgrid::-webkit-scrollbar,.cmp::-webkit-scrollbar,.pgrid::-webkit-scrollbar,.tgrid::-webkit-scrollbar{display:none;}
  .fgrid>*,.cmp>*,.pgrid>*,.tgrid>*{
    flex:0 0 85%;
    max-width:85%;
    scroll-snap-align:start;
  }
}

.lfoot{padding:32px 60px;border-top:1px solid rgba(23,32,58,.08);position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.fcopy{font-family:"JetBrains Mono",monospace;font-size:.52rem;color:#a7aebd;letter-spacing:.08em;}
.flinks{display:flex;gap:20px;flex-wrap:wrap;}
.flink{background:none;border:none;padding:0;cursor:pointer;font-family:"Inter",sans-serif;font-size:.76rem;color:#697388;transition:color .2s;text-decoration:none;}
.flink:hover{color:#16203a;}
@media(max-width:760px){.lfoot{flex-direction:column;text-align:center;padding:28px 22px calc(90px + env(safe-area-inset-bottom));}.flinks{justify-content:center;}}

/* ── LANDING · CAJAS AZUL MARINO (página blanca, cajitas navy) ── */
.bc,.step,.fcell,.tcard,.faq,.cmp-col,.pcard,.trustbar-in,.bundle-box{
  background:linear-gradient(160deg,#12244a,#0e1c3b);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(9,18,40,.25),0 14px 34px rgba(9,18,40,.22);
}
.bc:hover,.step:hover,.fcell:hover,.tcard:hover{border-color:rgba(255,255,255,.2);box-shadow:0 20px 44px rgba(9,18,40,.4);}
/* bots */
.bname,.bpv{color:#fff;}
.bdesc{color:rgba(255,255,255,.5);}
.bcbody{border-top-color:rgba(255,255,255,.08);}
.bcfeats li{color:rgba(255,255,255,.62);}
.bpp{color:rgba(255,255,255,.35);}
.bnum{color:rgba(255,255,255,.05);}
/* pasos */
.step-t{color:#fff;}
.step-d{color:rgba(255,255,255,.5);}
.step-ic{background:linear-gradient(135deg,rgba(10,184,156,.22),rgba(90,127,255,.18));border-color:rgba(255,255,255,.12);}
/* departamentos */
.fcell-t{color:#fff;}
.fcell-d{color:rgba(255,255,255,.5);}
.fcell-tag{color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
.fcell-tag--on{color:#7ee2b0;background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.42);}
/* testimonios */
.tquote{color:rgba(255,255,255,.8);}
.tname{color:#fff;}
.trole{color:rgba(255,255,255,.42);}
.tav{background:linear-gradient(135deg,rgba(10,184,156,.4),rgba(90,127,255,.34));border-color:rgba(255,255,255,.12);}
/* FAQ */
.faq[open]{border-color:rgba(10,184,156,.4);}
.faq summary{color:#fff;}
.faq summary::after{color:#00e0b0;}
.faq-a{color:rgba(255,255,255,.55);}
/* antes vs después */
.cmp-bad{background:linear-gradient(160deg,#12244a,#0e1c3b);border-color:rgba(224,90,90,.4);}
.cmp-good{background:linear-gradient(160deg,#12244a,#0e1c3b);border-color:rgba(10,184,156,.5);}
.cmp-h{color:#fff;}
.cmp-li{color:rgba(255,255,255,.62);}
.cmp-bad .cmp-tag{background:rgba(224,90,90,.2);color:#ff9a9a;}
.cmp-good .cmp-tag{background:rgba(10,184,156,.22);color:#00e0b0;}
.cmp-bad .cmp-li .ic{color:#ff8585;}
.cmp-good .cmp-li .ic{color:#00e0b0;}
/* precios */
.pname{color:#fff;}
.pdesc{color:rgba(255,255,255,.42);}
.pprice{color:#fff;}
.pper{color:rgba(255,255,255,.35);}
.psave{color:#4fe0c0;}
.pfeats li{color:rgba(255,255,255,.6);}
.pfeats li::before{color:#00e0b0;}
.pbtn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;}
.pbtn:hover{border-color:rgba(255,255,255,.4);box-shadow:none;}
.pcard.feat{background:linear-gradient(160deg,#12244a,#0e1c3b);border-color:rgba(10,184,156,.55);box-shadow:0 2px 6px rgba(10,184,156,.14),0 18px 40px rgba(9,18,40,.35);}
.pcard.feat .pbtn{border:none;background:linear-gradient(135deg,#0ab89c,#00d4a6);color:#04241d;}
/* barra de confianza */
.trust-i{color:rgba(255,255,255,.72);}
.trust-i .ci{background:rgba(10,184,156,.2);color:#00e0b0;}
/* bundle */
.bundle-box{background:linear-gradient(135deg,#12244a,#0e1c3b);}
.bundle-title{color:#fff;}
.bundle-sub{color:rgba(255,255,255,.5);}
.bundle-price{color:#fff;}
.bundle-per{color:rgba(255,255,255,.35);}
.bundle-lbl{color:#4fe0c0;}
/* CTA final en navy */
.lcta-box{background:linear-gradient(135deg,#12244a,#0e1c3b);border-color:rgba(255,255,255,.08);box-shadow:0 2px 6px rgba(9,18,40,.2),0 20px 46px rgba(9,18,40,.3);}
.lcta-box::before{background:radial-gradient(ellipse at 50% 0%,rgba(10,184,156,.16),transparent 62%);}
.lcta-t{color:#fff;}
.lcta-s{color:rgba(255,255,255,.55);}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(4,9,26,.88);backdrop-filter:blur(16px);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;}
/* El fondo entra con un fundido limpio (antes aparecía de golpe) — sensación tipo Apple. */
.modal-bg.open{display:flex!important;animation:mbgIn .32s cubic-bezier(.32,.72,0,1);}
@keyframes mbgIn{from{opacity:0;}to{opacity:1;}}
.mbox{background:#07112a;border:1px solid rgba(255,255,255,.1);border-radius:24px;width:100%;max-width:400px;position:relative;max-height:92vh;overflow-x:hidden;overflow-y:auto;animation:mIn .42s cubic-bezier(.32,.72,0,1);}
.mbox::-webkit-scrollbar{width:8px;}.mbox::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}
.mbox::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#2448f0,#00e0b0,#5a7fff);}
.mtop{padding:28px 28px 20px;text-align:center;}
.mlogo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;}
.mring2{width:28px;height:28px;background:var(--aura-mark) center/contain no-repeat;position:relative;}
.mbrand{font-family:"Allura",cursive;font-size:1.1rem;font-weight:800;color:#fff;}
.mtitle{font-family:"Inter",sans-serif;font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:4px;}
.msubt{font-size:.74rem;color:rgba(255,255,255,.38);line-height:1.5;}
.mtabs{display:flex;background:rgba(255,255,255,.05);border-radius:100px;padding:3px;margin:0 28px 18px;}
.mtab{flex:1;padding:7px;border-radius:100px;border:none;background:transparent;font-family:"Inter",sans-serif;font-size:.75rem;font-weight:500;color:rgba(255,255,255,.38);cursor:pointer;transition:all .18s;}
.mtab.on{background:rgba(255,255,255,.1);color:#fff;}
.mbody{padding:0 28px 28px;}
.mform{display:flex;flex-direction:column;gap:10px;}
.mfg{display:flex;flex-direction:column;gap:4px;}
.mfg label{font-family:"JetBrains Mono",monospace;font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);}
.mi{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:"Inter",sans-serif;font-size:.82rem;color:#fff;outline:none;transition:all .18s;width:100%;}
.mi:focus{border-color:#00e0b0;background:rgba(0,196,154,.06);box-shadow:0 0 0 3px rgba(0,196,154,.1);}
.mi::placeholder{color:rgba(255,255,255,.2);}
.mrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mbtn{width:100%;padding:11px;border-radius:10px;border:none;background:linear-gradient(135deg,#00c49a,#00e0b0);color:#04091a;font-family:"Inter",sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;transition:all .18s;margin-top:2px;}
.mbtn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(0,196,154,.3);}
.mdiv{display:flex;align-items:center;gap:10px;margin:2px 0;}
.mdiv span{font-size:.66rem;color:rgba(255,255,255,.18);white-space:nowrap;}
.mdiv::before,.mdiv::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.07);}
.mgoog{width:100%;padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font-family:"Inter",sans-serif;font-size:.78rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .18s;}
.mgoog:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.09);}
.mfl{text-align:center;font-size:.68rem;color:rgba(255,255,255,.22);margin-top:12px;}
.mfl a{color:#00c49a;text-decoration:none;cursor:pointer;}
.mcx{position:absolute;top:11px;right:11px;width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.07);border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:.82rem;display:flex;align-items:center;justify-content:center;}
.mcx:hover{background:rgba(255,255,255,.13);color:#fff;}
/* success state */
.m-ok{text-align:center;padding:10px 0;}
.mok-icon{font-size:2.6rem;margin-bottom:10px;}
.mok-title{font-family:"Inter",sans-serif;font-size:.98rem;font-weight:700;color:#fff;margin-bottom:5px;}
.mok-sub{font-size:.74rem;color:rgba(255,255,255,.38);line-height:1.6;margin-bottom:16px;}
.mok-btn{padding:9px 22px;border-radius:9px;border:none;background:linear-gradient(135deg,#00c49a,#00e0b0);color:#04091a;font-family:"Inter",sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;}

/* ── CHECKOUT MODAL ── */
.co-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px;}
.co-step{display:flex;align-items:center;gap:5px;font-family:"JetBrains Mono",monospace;font-size:.54rem;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.1em;}
.co-step.act{color:#00c49a;}
.co-dot{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;}
.co-step.act .co-dot{background:#00c49a;color:#04091a;}
.co-step.done .co-dot{background:#2448f0;color:#fff;}
.co-sep{width:24px;height:1px;background:rgba(255,255,255,.12);}
.plan-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pp{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);cursor:pointer;transition:all .18s;}
.pp:hover{border-color:rgba(255,255,255,.2);}
.pp.sel{border-color:#00c49a;background:rgba(0,196,154,.08);}
.pp-icon{font-size:1.3rem;flex-shrink:0;}
.pp-name{font-family:"Inter",sans-serif;font-size:.84rem;font-weight:700;color:#fff;}
.pp-desc{font-size:.66rem;color:rgba(255,255,255,.38);}
.pp-price{margin-left:auto;font-family:"Inter",sans-serif;font-size:.92rem;font-weight:800;color:#00c49a;}
.co-summary{background:rgba(255,255,255,.04);border-radius:10px;padding:12px;margin-bottom:14px;}
.co-sum-row{display:flex;justify-content:space-between;font-size:.74rem;color:rgba(255,255,255,.5);margin-bottom:6px;}
.co-sum-row.total{color:#fff;font-weight:600;font-size:.82rem;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);margin-top:2px;}
.co-sum-row span:last-child{font-family:"Inter",sans-serif;font-weight:700;}
.co-success{text-align:center;padding:10px 0;}

/* ── TOAST ── */
.toast{position:fixed;bottom:22px;right:22px;z-index:9999;background:linear-gradient(135deg,#0b1528,#162240);border:1px solid rgba(0,196,154,.22);border-radius:13px;padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 42px rgba(0,0,0,.45);animation:toastIn .4s cubic-bezier(.34,1.56,.64,1);max-width:280px;}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.95);}to{opacity:1;transform:none;}}

/* ── DASHBOARD CSS ── */

:root{
  --bg:#f6f8fc;--bg2:#edf0f8;--bg3:#dce2f0;--white:#fff;
  --ink:#07101f;--ink2:#1a2640;--ink3:#5a6a8a;
  --blue:#1432c8;--blue2:#2246e5;--blue3:#4f6fff;--blue4:#c0ccff;
  --mint:#00b88a;--mint2:#00d4a0;--mint3:#00f0b8;--mint4:#b8f0e0;
  --dark:#060c1c;--dark2:#0b1528;--dark3:#101e38;
  --red:#e85555;--gold:#e8a030;--purple:#6c3ff0;
  --gb:rgba(20,50,200,.13);--gm:rgba(0,184,138,.13);
  --r:11px;--r2:18px;--r3:24px;
}
/* ══════════ MODO OSCURO del panel (toggle en el menú de cuenta) ══════════
   El dashboard se construyó sobre variables CSS, así que el tema oscuro VOLTEA
   la paleta base (cubre body, .card vía --white, bordes vía --bg3 y texto vía
   --ink*) de forma coherente. Luego ajustamos los pocos componentes del panel
   que fijan colores claros a mano. NO tocamos la vista previa de la tienda ni
   los QR (deben quedar claros), por eso evitamos overrides de inline a ciegas. */
body.aura-dark{
  --bg:#0b1120;        /* lienzo del panel  */
  --bg2:#141c30;       /* paneles tenues    */
  --bg3:#2b3652;       /* bordes / tracks   */
  --white:#161f35;     /* tarjetas (.card)  */
  --ink:#eaf0fb;       /* texto principal   */
  --ink2:#c3cde4;      /* texto secundario  */
  --ink3:#8a98b8;      /* texto tenue       */
  --gb:rgba(79,111,255,.18);
  --gm:rgba(0,212,160,.16);
  color-scheme:dark;
}
/* fondo del panel: degradado suave en vez de gris plano */
body.aura-dark{background:
  radial-gradient(1200px 600px at 100% -10%, rgba(79,111,255,.08), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(0,212,160,.06), transparent 60%),
  var(--bg)!important;}
/* ── Topbar ── */
body.aura-dark .topbar{background:rgba(12,18,34,.88)!important;border-bottom-color:rgba(255,255,255,.08)!important;}
body.aura-dark .tb-title{color:#fff;}
body.aura-dark .tb-sub{color:rgba(255,255,255,.52);}
/* ── Tarjetas y superficies de datos del dashboard que fijan blanco a mano ── */
body.aura-dark .cob-kpi,
body.aura-dark .cob-chip,
body.aura-dark .amx-fbcard{background:var(--white);color:var(--ink2);border-color:rgba(255,255,255,.1);}
body.aura-dark .fbperm{background:rgba(255,255,255,.05);}
body.aura-dark .fbperm li{color:var(--ink2);}
body.aura-dark .hamb{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
/* ── Campos de formulario ── */
body.aura-dark input,
body.aura-dark textarea,
body.aura-dark select,
body.aura-dark .cob-form input,
body.aura-dark .cob-form select{background:rgba(255,255,255,.05);color:var(--ink);border-color:rgba(255,255,255,.14);}
body.aura-dark input[type=range]{background:var(--bg3);}
body.aura-dark input::placeholder,body.aura-dark textarea::placeholder{color:rgba(255,255,255,.34);}
/* ── Tablas ── */
body.aura-dark .tw th,body.aura-dark .tw td{border-color:rgba(255,255,255,.08);}
body.aura-dark .tw thead th{background:rgba(255,255,255,.03);color:var(--ink3);}
/* ── Botón claro (btn-g) / chips sobre fondo claro ── */
body.aura-dark .btn-g{background:rgba(255,255,255,.07);color:var(--ink);border-color:rgba(255,255,255,.14);}
/* ── Islas blancas (modales/popups del panel con blanco fijo): oscurecer ──
   Esto captura modales como Términos, Contraseña, Cliente, Venta, etc. */
body.aura-dark [style*="background:#fff"],
body.aura-dark [style*="background: #fff"],
body.aura-dark [style*="background:#ffffff"],
body.aura-dark [style*="background:#f6f8fc"],
body.aura-dark [style*="background:#f5f6f8"],
body.aura-dark [style*="background:#f1f4f9"]{background:var(--white)!important;}
body.aura-dark [style*="color:#07101f"],
body.aura-dark [style*="color:#16203a"],
body.aura-dark [style*="color:#1a2640"],
body.aura-dark [style*="color:#16151a"],
body.aura-dark [style*="color:#1f2734"],
body.aura-dark [style*="color:#0b1528"],
body.aura-dark [style*="color:#04122c"],
body.aura-dark [style*="color:#111"],
body.aura-dark [style*="color:#000"]{color:var(--ink)!important;}
body.aura-dark [style*="border:1px solid #e"],
body.aura-dark [style*="border:1px solid #d"],
body.aura-dark [style*="border-color:#e"],
body.aura-dark [style*="border-color:#d"]{border-color:rgba(255,255,255,.1)!important;}
body.aura-dark #aura-legal-box{background:var(--white);color:var(--ink);}
body.aura-dark #aura-legal-x{background:rgba(255,255,255,.08);color:var(--ink2);}
/* ── La tienda (vista previa + sus modales de producto/carrito) y los QR
   SIEMPRE claros: restauramos a blanco por encima del oscurecido anterior. ── */
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co,.iv-qr-card,#store-qr),
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="background:#fff"],
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="background:#ffffff"]{background:#fff!important;}
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="color:#07101f"],
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="color:#16151a"],
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="color:#16203a"],
body.aura-dark :is(#store-preview,#modal-pd,#modal-pdet,#pd-box,#cart-drawer,#cart-panel,#modal-co) [style*="color:#1a2640"]{color:#16151a!important;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:13.5px;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;min-height:100vh;overflow-x:clip;}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;}

.awc-note{margin-bottom:12px;}
.awc-note summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.7rem;color:rgba(255,255,255,.5);user-select:none;}
.awc-note summary::-webkit-details-marker{display:none;}
.awc-note-arrow{display:inline-block;transition:transform .18s;}
.awc-note[open] .awc-note-arrow{transform:rotate(90deg);}
.shell{display:flex;height:100vh;overflow:hidden;flex:1;width:100%;min-width:0;}

/* ══ SIDEBAR ══ */
.sidebar{
  width:230px;flex-shrink:0;background:var(--dark);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:margin-left .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::before{content:'';position:absolute;top:-80px;left:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(20,50,200,.2) 0%,transparent 65%);pointer-events:none;}
.sidebar::after{content:'';position:absolute;bottom:-60px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,138,.1) 0%,transparent 65%);pointer-events:none;}

/* LOGO */
.s-logo{padding:20px 16px 16px;border-bottom:1px solid #1d3a8f;box-shadow:0 1px 10px rgba(29,58,143,.45);display:flex;align-items:center;gap:10px;position:relative;z-index:1;flex-shrink:0;background:#000;}
.logo-ring{width:40px;height:40px;background:var(--aura-mark) center/155% no-repeat;position:relative;flex-shrink:0;}
@keyframes rg{0%,100%{filter:drop-shadow(0 0 4px rgba(0,200,160,.4));}50%{filter:drop-shadow(0 0 9px rgba(36,70,229,.5));}}
.logo-ring::after{display:none;}
.logo-name{font-family:'Allura',cursive;font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:-.02em;}
.logo-ver{font-family:'JetBrains Mono',monospace;font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-top:2px;}

/* NAV SCROLL */
.s-nav{flex:1;overflow-y:auto;padding:10px 10px 0;position:relative;z-index:1;display:flex;flex-direction:column;}
.s-nav::-webkit-scrollbar{width:2px;}
.s-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}

/* SECTION HEADERS */
.s-sec-head{
  font-family:'JetBrains Mono',monospace;font-size:.48rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.22);padding:0 8px;
  margin:12px 0 4px;
}

/* NAV ITEMS */
.s-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;margin-bottom:1px;border-radius:8px;
  cursor:pointer;transition:all .15s;
  color:rgba(255,255,255,.38);font-size:.76rem;font-weight:400;
  border:none;background:none;width:100%;text-align:left;
}
.s-item svg{width:13px;height:13px;flex-shrink:0;opacity:.7;}
.s-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);}
.s-item.active{background:linear-gradient(90deg,rgba(20,50,200,.38),rgba(0,184,138,.14));color:#fff;font-weight:500;border-left:2px solid var(--mint2);padding-left:6px;}
.s-item.active svg{opacity:1;}
.s-item .nb{margin-left:auto;background:var(--mint);color:var(--dark);font-family:'JetBrains Mono',monospace;font-size:.46rem;padding:1px 5px;border-radius:100px;font-weight:600;}
.s-item .nb.red{background:var(--red);color:#fff;}
.s-item .nb.off{background:rgba(255,255,255,.15);color:rgba(255,255,255,.5);}

/* SUB ITEMS */
.s-sub{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 22px;border-radius:8px;
  cursor:pointer;transition:all .15s;
  color:rgba(255,255,255,.28);font-size:.72rem;
  border:none;background:none;width:100%;text-align:left;
}
.s-sub:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);}
.s-sub.active{color:var(--mint2);font-weight:500;}
.s-sub::before{content:'›';font-size:.8rem;opacity:.4;}
.s-sub.active::before{opacity:1;color:var(--mint2);}

/* ── MIS ASISTENTES SECTION ── */
.assist-section{padding:10px 10px 6px;position:relative;z-index:1;flex-shrink:0;}
.assist-section-title{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:8px;padding:0 2px;}

.assist-bar{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:10px;
  cursor:default;transition:all .18s;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  margin-bottom:6px;position:relative;overflow:hidden;
}
.assist-bar.active-bot{border-color:var(--mint);background:rgba(0,184,138,.08);}

.abar-img{
  width:34px;height:34px;border-radius:9px;
  object-fit:cover;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);
}
.abar-img-placeholder{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--dark3),rgba(20,50,200,.3));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;border:1px solid rgba(255,255,255,.1);
}
.abar-info{flex:1;min-width:0;}
.abar-name{font-size:.76rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.abar-status{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:rgba(255,255,255,.35);margin-top:2px;display:flex;align-items:center;gap:4px;}
.abar-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.abar-num{
  min-width:20px;height:20px;border-radius:100px;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;color:rgba(255,255,255,.5);
  flex-shrink:0;padding:0 5px;
}
.abar-num.has{background:var(--mint);color:var(--dark);font-weight:600;}

/* NO TIENE — lock icon */
.abar-lock{
  width:20px;height:20px;border-radius:100px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;flex-shrink:0;
}

/* ── TIENDA SECTION ── */
.store-section{padding:8px 10px 12px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.store-title{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:8px;padding:0 2px;}

.store-mini-card{
  background:var(--dark3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:11px 12px;
  margin-bottom:6px;
  cursor:pointer;
  transition:all .2s;
  position:relative;overflow:hidden;
}
.store-mini-card:hover{border-color:rgba(0,184,138,.3);background:rgba(0,184,138,.06);}
.store-mini-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--blue2),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.store-mini-card:hover::before{transform:scaleX(1);}

.smc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.smc-icon{width:28px;height:28px;border-radius:7px;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.08);}
.smc-icon-ph{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,rgba(20,50,200,.4),rgba(0,184,138,.3));display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.smc-name{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;color:#fff;}
.smc-tag{font-family:'JetBrains Mono',monospace;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint2);}
.smc-desc{font-size:.66rem;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:8px;}
.smc-price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;}
.smc-p-main{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:#fff;}
.smc-p-alt{font-family:'JetBrains Mono',monospace;font-size:.56rem;color:rgba(255,255,255,.35);}
.smc-btn{
  width:100%;padding:7px;border-radius:8px;
  background:linear-gradient(135deg,var(--mint),var(--mint2));
  color:var(--dark);font-family:'Inter',sans-serif;
  font-size:.72rem;font-weight:700;border:none;cursor:pointer;
  transition:all .18s;
}
.smc-btn:hover{box-shadow:0 4px 14px var(--gm);transform:translateY(-1px);}

/* FOOTER */
.s-foot{padding:10px 10px;border-top:1px solid rgba(255,255,255,.06);position:relative;z-index:1;flex-shrink:0;}
.s-user{display:flex;align-items:center;gap:8px;border-radius:10px;padding:5px 6px;transition:background .15s;}
.s-user:hover{background:rgba(255,255,255,.05);}
.acc-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 9px;border:none;background:transparent;border-radius:9px;color:rgba(255,255,255,.78);font-family:'Inter',sans-serif;font-size:.72rem;text-align:left;cursor:pointer;transition:background .12s,color .12s;}
.acc-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8;}
.acc-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.acc-item.acc-danger{color:rgba(232,85,85,.8);}
.acc-item.acc-danger:hover{background:rgba(232,85,85,.12);color:#e85555;}
.acc-item.acc-soon{color:rgba(255,255,255,.4);cursor:default;}
.acc-item.acc-soon:hover{background:transparent;color:rgba(255,255,255,.4);}
.acc-badge{margin-left:auto;font-size:.5rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gold);background:rgba(232,160,48,.14);border:1px solid rgba(232,160,48,.3);border-radius:100px;padding:2px 7px;}
.acc-chev{width:13px!important;height:13px!important;margin-left:auto;opacity:.35;}
.acc-subhead{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;color:#fff;}
.acc-back{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:rgba(255,255,255,.06);border-radius:8px;color:rgba(255,255,255,.7);cursor:pointer;flex-shrink:0;transition:background .12s;}
.acc-back:hover{background:rgba(255,255,255,.12);color:#fff;}
.acc-back svg{width:15px;height:15px;}
.acc-lbl{display:block;font-family:'Inter',sans-serif;font-size:.6rem;color:rgba(255,255,255,.45);margin:0 0 5px 2px;text-transform:uppercase;letter-spacing:.06em;}
.acc-input{width:100%;box-sizing:border-box;padding:9px 11px;margin-bottom:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:9px;color:#fff;font-family:'Inter',sans-serif;font-size:.76rem;outline:none;transition:border .12s;}
.acc-input:focus{border-color:var(--mint2);}
.acc-save{width:100%;padding:10px;border:none;border-radius:9px;background:var(--mint);color:#04221a;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;cursor:pointer;transition:filter .12s;}
.acc-save:hover{filter:brightness(1.08);}
.acc-srow{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(255,255,255,.55);}
.acc-srow b{color:#fff;font-weight:700;}
.s-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--mint));display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:.72rem;color:#fff;flex-shrink:0;}
.s-un{font-size:.74rem;font-weight:500;color:#fff;}
.s-up{font-family:'JetBrains Mono',monospace;font-size:.46rem;color:var(--mint2);text-transform:uppercase;}

/* ══ MAIN ══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

.topbar{background:rgba(246,248,252,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--bg3);padding:10px 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:20;}
.tb-title{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);}
.tb-sub{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-top:1px;}
.tb-r{display:flex;gap:7px;align-items:center;}
.pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;background:rgba(0,184,138,.1);border:1px solid rgba(0,184,138,.2);font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--mint);letter-spacing:.04em;}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--mint);animation:pu 1.8s infinite;}
@keyframes pu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.btn{padding:6px 13px;border-radius:8px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;transition:all .16s;}
.btn-g{background:transparent;color:var(--ink2);border:1px solid var(--bg3);}
.btn-g:hover{background:var(--bg2);}
.btn-b{background:var(--blue);color:#fff;}
.btn-b:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:0 4px 14px var(--gb);}
.btn-m{background:var(--mint);color:var(--dark);font-weight:600;}
.btn-m:hover{background:var(--mint2);transform:translateY(-1px);box-shadow:0 4px 14px var(--gm);}
.btn-sm{padding:4px 10px;font-size:.68rem;}
.btn-xs{padding:3px 8px;font-size:.62rem;}
.btn-red{background:rgba(232,85,85,.1);color:var(--red);border:1px solid rgba(232,85,85,.2);}
.btn-red:hover{background:var(--red);color:#fff;}
/* ── Toque limpio en el panel: micro-hundido al presionar cualquier control ── */
@media (prefers-reduced-motion:no-preference){
  .btn,.cfgtab,.s-item,.s-sub,.tgl,.mtab,.prodf-btn,.secscope-btn,.hday,.st-devbtn{transition:all .16s cubic-bezier(.34,1.4,.5,1);}
  .btn:active,.cfgtab:active,.s-item:active,.s-sub:active,.mtab:active,.prodf-btn:active,.secscope-btn:active,.hday:active,.st-devbtn:active{transform:scale(.96);}
  .tgl:active{transform:scale(.92);}
  /* Cambio de pestaña/sección: el contenido entra con un fundido limpio en vez de saltar */
  .pane-in{animation:paneIn .26s cubic-bezier(.2,.7,.2,1);}
  /* Deslizamiento direccional: si la pestaña está a la derecha entra desde la derecha, y viceversa */
  .pane-in-r{animation:paneInR .32s cubic-bezier(.32,.72,0,1);}
  .pane-in-l{animation:paneInL .32s cubic-bezier(.32,.72,0,1);}
  /* Abrir un chat = pasar la página de un libro (gira sobre el lomo izquierdo) */
  .conv-book{transform-origin:left center;backface-visibility:hidden;animation:convBook .52s cubic-bezier(.22,.68,.2,1);}
}
@keyframes paneIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes paneInR{from{opacity:0;transform:translateX(34px);}to{opacity:1;transform:none;}}
@keyframes paneInL{from{opacity:0;transform:translateX(-34px);}to{opacity:1;transform:none;}}
@keyframes convBook{from{opacity:.25;transform:perspective(1600px) rotateY(-88deg);}60%{opacity:1;}to{opacity:1;transform:perspective(1600px) rotateY(0);}}
@media (prefers-reduced-motion:reduce){
  .pane-in-r,.pane-in-l,.conv-book{animation:none!important;}
}
/* Overlays hechos a mano (no .modal-bg): fondo con fundido + tarjeta que entra, igual que los modales */
.aura-ovfx{animation:mbgIn .3s cubic-bezier(.32,.72,0,1);}
.aura-ovfx>*{animation:mIn .42s cubic-bezier(.32,.72,0,1);}
@media (prefers-reduced-motion:reduce){
  .aura-ovfx,.aura-ovfx>*,.modal-bg.open,.mbox{animation:none!important;}
}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:18px 22px;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px;}

/* PAGES */
.page{display:none;}
.page.active{display:block;animation:fadeUp .3s cubic-bezier(.4,0,.2,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* GRIDS */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.g21{display:grid;grid-template-columns:1fr 340px;gap:13px;}
#crm-chips::-webkit-scrollbar,#crm-ch-chips::-webkit-scrollbar{display:none;}
.gcol{display:flex;flex-direction:column;gap:13px;}

/* STAT */
.stat{background:var(--white);border:1px solid var(--bg3);border-radius:var(--r2);padding:15px 17px;position:relative;overflow:hidden;transition:all .2s;}
.stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07);border-color:var(--blue4);}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue2),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.stat:hover::before{transform:scaleX(1);}
.si{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.82rem;margin-bottom:9px;}
.si-b{background:rgba(20,50,200,.08);}
.si-m{background:rgba(0,184,138,.08);}
.si-p{background:rgba(108,63,240,.08);}
.si-o{background:rgba(232,160,48,.08);}
.si-r{background:rgba(232,85,85,.08);}
.sl{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;}
.sv{font-family:'Inter',sans-serif;font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1;}
.ss{font-size:.65rem;color:var(--mint);margin-top:3px;}
.ss.neg{color:var(--red);}

/* CARD */
.card{background:var(--white);border:1px solid var(--bg3);border-radius:var(--r2);padding:17px;transition:border-color .2s;}
.card:hover{border-color:var(--blue4);}
.ct{font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.ct-s{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;font-weight:400;}

/* BADGE */
.bd{display:inline-flex;align-items:center;padding:2px 7px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
.bd-b{background:rgba(20,50,200,.1);color:var(--blue2);}
.bd-m{background:rgba(0,184,138,.1);color:#007a5a;}
.bd-p{background:rgba(108,63,240,.1);color:var(--purple);}
.bd-r{background:rgba(232,85,85,.1);color:var(--red);}
.bd-g{background:var(--bg2);color:var(--ink3);}
.bd-o{background:rgba(232,160,48,.1);color:#906010;}

/* TABLE */
.tw{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);padding:8px 12px;text-align:left;border-bottom:1px solid var(--bg3);white-space:nowrap;}
tbody td{padding:10px 12px;font-size:.76rem;color:var(--ink2);border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle;}
tbody tr:hover td{background:var(--bg2);}
tbody tr:last-child td{border-bottom:none;}

/* PROGRESS */
.prog{height:3px;background:var(--bg3);border-radius:100px;overflow:hidden;}
.pf{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue2),var(--mint));transition:width .6s cubic-bezier(.4,0,.2,1);}

/* CHART */
.cbars{display:flex;align-items:flex-end;gap:4px;height:85px;padding:3px 0;}
.cw{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;}
.ch{width:100%;border-radius:4px 4px 0 0;min-height:3px;background:linear-gradient(180deg,var(--blue2),var(--mint));cursor:pointer;transition:height .5s cubic-bezier(.4,0,.2,1);}
.ch:hover{filter:brightness(1.15);}
.cl{font-family:'JetBrains Mono',monospace;font-size:.48rem;color:var(--ink3);text-transform:uppercase;}

/* TOGGLE */
.tgl{width:36px;height:19px;background:var(--bg3);border-radius:100px;position:relative;cursor:pointer;transition:background .18s;border:none;flex-shrink:0;padding:0;}
.tgl.on{background:var(--mint);}
.tgl::after{content:'';position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.tgl.on::after{transform:translateX(17px);}
.hday{padding:5px 11px;border-radius:100px;border:1px solid var(--bg3);background:var(--bg2);color:var(--ink3);font-family:inherit;font-size:.68rem;font-weight:600;cursor:pointer;transition:all .15s;}
.hday.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* FORM */
.fg{margin-bottom:12px;}
.fg label{display:block;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;}
.fi{width:100%;padding:8px 12px;background:var(--bg2);border:1px solid var(--bg3);border-radius:8px;font-family:'Inter',sans-serif;font-size:.78rem;color:var(--ink);outline:none;transition:all .16s;}
.fi:focus{border-color:var(--blue3);background:var(--white);box-shadow:0 0 0 3px var(--gb);}
.fi::placeholder{color:var(--ink3);}
textarea.fi{resize:vertical;min-height:68px;line-height:1.5;}
select.fi{appearance:none;cursor:pointer;}

/* ACTIVITY */
.ai{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.04);}
.ai:last-child{border-bottom:none;}
.ad{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0;}
.at{font-size:.74rem;color:var(--ink2);line-height:1.5;}
.at strong{color:var(--ink);font-weight:500;}
.ati{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--ink3);margin-top:1px;}

/* ══ CHAT ══ */
.chat-panel{background:var(--white);border:1px solid var(--bg3);border-radius:var(--r2);display:flex;flex-direction:column;height:100%;overflow:hidden;}
.ch-head{background:linear-gradient(135deg,var(--dark2),var(--dark3));padding:11px 13px;display:flex;align-items:center;gap:9px;flex-shrink:0;position:relative;overflow:hidden;}
.ch-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(0,184,138,.1) 0%,transparent 60%);}
.ch-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--mint));display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;position:relative;}
.ch-av img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.od{position:absolute;bottom:0;right:0;width:7px;height:7px;border-radius:50%;background:#4ade80;border:2px solid var(--dark2);}
.ch-name{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;color:#fff;position:relative;}
.ch-stat{font-size:.62rem;color:rgba(255,255,255,.45);position:relative;display:flex;align-items:center;gap:4px;}
.ch-tabs{padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--bg3);display:flex;gap:4px;flex-shrink:0;}
.cht{padding:3px 9px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.07em;text-transform:uppercase;border:none;cursor:pointer;transition:all .14s;background:transparent;color:var(--ink3);}
.cht.on{background:var(--blue);color:#fff;}
.msgs{flex:1;overflow-y:auto;padding:11px 10px;display:flex;flex-direction:column;gap:7px;}
.mb{display:flex;gap:6px;align-items:flex-end;}
.mu{display:flex;gap:6px;align-items:flex-end;flex-direction:row-reverse;}
.mav{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--mint));display:flex;align-items:center;justify-content:center;font-size:.56rem;color:#fff;flex-shrink:0;}
.mav img{width:20px;height:20px;border-radius:50%;object-fit:cover;}
.bub{max-width:82%;padding:8px 11px;border-radius:11px;font-size:.75rem;line-height:1.55;}
.bub-b{background:var(--bg2);border:1px solid var(--bg3);border-bottom-left-radius:3px;color:var(--ink2);}
.bub-u{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-bottom-right-radius:3px;}
.bt{font-family:'JetBrains Mono',monospace;font-size:.46rem;color:var(--ink3);margin-top:2px;text-align:right;}
.bub-u .bt{color:rgba(255,255,255,.4);}
.typing{display:flex;gap:3px;align-items:center;padding:7px 10px;background:var(--bg2);border:1px solid var(--bg3);border-radius:11px;border-bottom-left-radius:3px;width:fit-content;}
.td{width:4px;height:4px;border-radius:50%;background:var(--ink3);animation:ta 1.4s infinite;}
.td:nth-child(2){animation-delay:.2s}.td:nth-child(3){animation-delay:.4s}
@keyframes ta{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.qa{padding:7px 10px;border-top:1px solid var(--bg3);display:flex;gap:4px;flex-wrap:wrap;background:var(--bg2);flex-shrink:0;}
.qb{display:flex;align-items:center;gap:3px;padding:4px 8px;border-radius:100px;border:1px solid var(--bg3);background:var(--white);cursor:pointer;font-size:.66rem;color:var(--ink2);font-family:'Inter',sans-serif;transition:all .13s;}
.qb:hover{border-color:var(--blue3);color:var(--blue);}
.ci{padding:8px 10px;border-top:1px solid var(--bg3);display:flex;gap:6px;align-items:center;flex-shrink:0;}
.cin{flex:1;padding:7px 12px;background:var(--bg2);border:1px solid var(--bg3);border-radius:100px;font-family:'Inter',sans-serif;font-size:.75rem;color:var(--ink);outline:none;transition:all .16s;}
.cin:focus{border-color:var(--blue3);background:var(--white);box-shadow:0 0 0 3px var(--gb);}
.cin::placeholder{color:var(--ink3);}
.snd{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--mint));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.snd:hover{transform:scale(1.08);box-shadow:0 3px 10px var(--gb);}

/* BOT CONFIG */
.bot-cfg-grid{display:grid;grid-template-columns:1fr 1fr 310px;gap:13px;min-height:calc(100vh - 130px);}
/* Embudo de ventas (arriba de las cajitas) */
.funnel{background:var(--white);border:1px solid var(--bg3);border-radius:14px;padding:14px 16px;margin-bottom:14px;}
.funnel-head{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.funnel-title{font-weight:700;font-size:.9rem;color:var(--ink);}
.funnel-sub{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.funnel-row{display:flex;align-items:stretch;gap:6px;}
.fstep{flex:1;background:var(--bg2);border:1px solid var(--bg3);border-radius:10px;padding:9px 6px 8px;text-align:center;position:relative;overflow:hidden;}
.fstep::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--blue2));}
.fstep-n{display:block;font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.1;font-family:'Inter',sans-serif;}
.fstep-l{font-size:.6rem;color:var(--ink2);margin-top:3px;font-weight:600;}
.fstep-pct{font-family:'JetBrains Mono',monospace;font-size:.46rem;color:var(--ink3);margin-top:2px;}
.farrow{display:flex;align-items:center;color:var(--ink3);font-size:.9rem;opacity:.45;flex-shrink:0;}
@media(max-width:760px){.funnel-row{flex-wrap:wrap;}.fstep{min-width:28%;}.farrow{display:none;}}
/* Embudo mini "al grano" (Configurar Bot) */
.funnel-mini{padding:11px 16px;}
.funnel-mini .funnel-head{margin-bottom:9px;}
.fn-link{margin-left:auto;font-size:.66rem;font-weight:600;color:var(--blue2);cursor:pointer;white-space:nowrap;}
.fn-link:hover{text-decoration:underline;}
.fmini-row{display:flex;gap:8px;}
.fmini{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--bg2);border:1px solid var(--bg3);border-radius:10px;padding:7px 6px;border-left:3px solid var(--c,var(--blue2));}
.fmini-n{font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.1;font-family:'Inter',sans-serif;}
.fmini-l{font-size:.62rem;color:var(--ink2);font-weight:600;}
@media(max-width:760px){.fmini-row{flex-wrap:wrap;}.fmini{min-width:30%;}}
/* Pestañas internas del panel Configurar Bot */
.cfgtabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--bg3);flex-wrap:wrap;}
.cfgtab{padding:9px 16px;border:none;background:transparent;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;display:flex;align-items:center;gap:6px;border-radius:8px 8px 0 0;}
.cfgtab:hover{color:var(--ink);background:var(--bg2);}
.cfgtab.on{color:var(--blue);border-bottom-color:var(--blue);}
.st-mtoggle{display:none;}  /* solo aparece en móvil (ver media query) */

/* ── Marco de teléfono para la vista previa de la tienda (solo en modo móvil) ── */
#store-preview:has(.st-phone){display:flex;align-items:flex-start;justify-content:center;background:var(--bg2)!important;padding:16px 12px;}
.st-devbtn{border:none;background:transparent;cursor:pointer;border-radius:7px;padding:3px 9px;font-size:.9rem;line-height:1.4;opacity:.5;transition:.15s;-webkit-tap-highlight-color:transparent;}
.st-devbtn.on{background:var(--white,#fff);opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.st-phone{width:100%;max-width:380px;height:100%;background:#0b0b0f;border-radius:44px;padding:11px;
  position:relative;display:flex;flex-direction:column;flex-shrink:0;
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 0 0 2px rgba(255,255,255,.05);}
.st-phone-notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:104px;height:23px;
  background:#0b0b0f;border-radius:14px;z-index:30;pointer-events:none;}
.st-phone-screen{flex:1;min-height:0;width:100%;background:#fff;border-radius:34px;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;}
/* Dentro del marco la tienda es siempre versión móvil (aunque edites en computadora) */
.st-phone-screen img{max-width:100%;height:auto;}
.st-phone-screen .st-head{padding:0 5%!important;height:54px!important;gap:.6rem!important;}
.st-phone-screen .st-head > div:first-child{font-size:1.15rem!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-phone-screen .st-head button{margin-left:6px!important;padding:.4rem .7rem!important;font-size:.72rem!important;}
/* Controles tipo chip (sin jerga) */
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px;}
.segbtn{padding:7px 12px;border:1px solid var(--bg3);background:var(--bg2);border-radius:100px;font-size:.72rem;color:var(--ink2);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;}
.segbtn:hover{border-color:var(--blue);color:var(--ink);}
.segbtn.on{background:linear-gradient(135deg,var(--blue2),var(--mint));color:#04122c;border-color:transparent;font-weight:600;}
/* Chips de opciones desplegables (¿de qué se encarga? / qué no debe hacer) */
.opt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.opt-chips:empty{display:none;}
.opt-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(20,50,200,.08);color:var(--blue2);border:1px solid rgba(20,50,200,.18);border-radius:100px;padding:4px 5px 4px 11px;font-size:.72rem;font-weight:500;}
.opt-chip.no{background:rgba(232,85,85,.08);color:var(--red);border-color:rgba(232,85,85,.2);}
.opt-chip button{background:rgba(20,50,200,.14);border:none;color:inherit;width:16px;height:16px;border-radius:50%;cursor:pointer;font-size:.72rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.opt-chip.no button{background:rgba(232,85,85,.16);}
.opt-chip button:hover{background:var(--red);color:#fff;}
.opt-pick{cursor:pointer;}
.adv-toggle{margin-top:4px;}
.adv-toggle summary{cursor:pointer;font-size:.72rem;color:var(--ink3);list-style:none;padding:8px 0;user-select:none;}
.adv-toggle summary::-webkit-details-marker{display:none;}
.adv-toggle summary:hover{color:var(--ink2);}
.adv-toggle[open] summary{color:var(--ink2);margin-bottom:6px;}
.bot-cfg-grid > .gcol{height:100%;}
.bot-cfg-grid .gcol > .card:first-child{flex:1;display:flex;flex-direction:column;}
.bot-cfg-grid .gcol > .card:first-child .prompt-box{flex:1;display:flex;flex-direction:column;}
.bot-cfg-grid .gcol > .card:first-child .pb-ta{flex:1;}
.prompt-box{background:var(--dark);border-radius:var(--r2);padding:16px;position:relative;}
.pb-lbl{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px;}
.pb-ta{width:100%;background:transparent;border:none;outline:none;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#c0d4e0;line-height:1.7;resize:none;min-height:110px;}
.pb-ta::placeholder{color:rgba(255,255,255,.18);}
.pb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);}
.pb-tok{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:rgba(255,255,255,.28);}
.knob-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.knob-lbl{font-size:.76rem;color:var(--ink2);flex:1;}
.knob-val{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--blue2);width:30px;text-align:right;}
input[type=range]{flex:1;height:5px;border-radius:100px;background:var(--bg3);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .08s linear;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--mint));cursor:grab;box-shadow:0 2px 6px var(--gb);transition:transform .12s ease, box-shadow .12s ease;}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--blue2),var(--mint));cursor:grab;box-shadow:0 2px 6px var(--gb);transition:transform .12s ease;}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12);}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.28);cursor:grabbing;box-shadow:0 3px 11px var(--gb);}
input[type=range]:active::-moz-range-thumb{transform:scale(1.28);cursor:grabbing;}
input[type=range]::-moz-range-track{height:5px;border-radius:100px;background:transparent;}

/* AI RESULT BOX */
.air{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--r2);padding:12px;margin-top:9px;display:none;}
.air-lbl{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.air-t{font-size:.76rem;color:var(--ink2);line-height:1.6;}
.air-dots{display:flex;gap:3px;align-items:center;}
.air-d{width:4px;height:4px;border-radius:50%;background:var(--mint);animation:ta 1.4s infinite;}
.air-d:nth-child(2){animation-delay:.2s}.air-d:nth-child(3){animation-delay:.4s}

/* INVENTARIO */
.inv-row{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;border:1px solid var(--bg3);background:var(--white);margin-bottom:6px;transition:all .15s;cursor:pointer;}
.inv-row:hover{border-color:var(--blue4);box-shadow:0 3px 10px rgba(0,0,0,.06);}
.inv-img{width:38px;height:38px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.inv-stk{font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;text-align:center;min-width:44px;}
.inv-stk.ok{color:var(--mint);}
.inv-stk.low{color:var(--red);}

/* CRM KANBAN */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;}
.kcol{background:var(--white);border:1px solid var(--bg3);border-radius:var(--r2);padding:12px;}
.kcol-t{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;}
.kcard{border:1px solid var(--bg3);border-radius:var(--r);padding:10px;margin-bottom:6px;cursor:grab;transition:all .15s;background:var(--bg2);}
.kcard:hover{border-color:var(--blue4);transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.07);}
.kc-name{font-size:.78rem;font-weight:500;color:var(--ink);}
.kc-prod{font-size:.68rem;color:var(--ink3);margin-top:2px;}
.kc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px;}
.kc-val{font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;color:var(--blue2);}
.kc-date{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--ink3);}

/* PLANES */
.plan-card{background:var(--white);border:1px solid var(--bg3);border-radius:var(--r2);padding:20px;transition:all .22s;position:relative;overflow:hidden;}
.plan-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08);border-color:var(--blue4);}
.plan-card.feat{background:linear-gradient(135deg,var(--dark2),var(--dark3));border:none;}
.plan-pop{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,var(--mint),var(--blue3));color:var(--dark);font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:100px;}
.plan-name{font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:3px;}
.plan-price{font-family:'Inter',sans-serif;font-size:2rem;font-weight:800;line-height:1;margin:9px 0 2px;}
.plan-price sup{font-size:.9rem;vertical-align:top;margin-top:5px;}
.plan-per{font-size:.66rem;opacity:.5;margin-bottom:14px;}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:16px;}
.plan-feats li{font-size:.74rem;display:flex;align-items:center;gap:6px;}
.plan-feats li::before{content:'✓';font-size:.58rem;color:var(--mint);flex-shrink:0;}
.plan-btn{width:100%;padding:9px;border-radius:9px;border:2px solid var(--blue);background:transparent;color:var(--blue);font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .18s;}
.plan-btn:hover{background:var(--blue);color:#fff;}
.plan-card.feat .plan-btn{border-color:rgba(255,255,255,.25);color:#fff;}
.plan-card.feat .plan-btn:hover{background:rgba(255,255,255,.12);}

/* REPORT BOX */
.rbox{background:var(--dark);border-radius:var(--r2);padding:18px;position:relative;overflow:hidden;}
.rbox::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 10%,rgba(0,184,138,.1) 0%,transparent 60%);}
.rbox-h{font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;color:#fff;margin-bottom:3px;position:relative;}
.rbox-s{font-size:.68rem;color:rgba(255,255,255,.35);margin-bottom:13px;position:relative;}
.rbox-b{font-size:.76rem;color:rgba(255,255,255,.65);line-height:1.75;position:relative;}
.rbox-b strong{color:#fff;}

/* STORE PAGE CARDS */
.store-bot-card{
  background:var(--white);border:1px solid var(--bg3);
  border-radius:var(--r3);overflow:hidden;
  transition:all .28s;cursor:pointer;position:relative;
}
.store-bot-card:hover{transform:translateY(-5px);box-shadow:0 18px 48px rgba(0,0,0,.1);border-color:var(--blue4);}
.sbc-head{padding:26px 22px 20px;position:relative;overflow:hidden;}
.sbc-bg1{background:linear-gradient(135deg,#e8eeff 0%,#f0f5ff 100%);}
.sbc-bg2{background:linear-gradient(135deg,#e0faf2 0%,#f0fff8 100%);}
.sbc-bg3{background:linear-gradient(135deg,#ede8ff 0%,#f5f0ff 100%);}
.sbc-robot{width:70px;height:70px;border-radius:18px;object-fit:cover;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.sbc-tag{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:100px;display:inline-flex;margin-bottom:10px;}
.sbc-name{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.sbc-desc{font-size:.75rem;color:var(--ink3);line-height:1.6;}
.sbc-body{padding:16px 22px;}
.sbc-feats{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.sbc-feats li{font-size:.76rem;color:var(--ink2);display:flex;align-items:center;gap:7px;}
.sbc-fi{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.6rem;flex-shrink:0;}
.sbc-price-row{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.sbc-price-main{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:800;color:var(--ink);}
.sbc-price-alt{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--ink3);}
.sbc-period{font-size:.68rem;color:var(--ink3);margin-bottom:14px;}
.sbc-buy{
  width:100%;padding:10px;border-radius:11px;border:none;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.sbc-buy-1{background:linear-gradient(135deg,var(--mint),var(--mint2));color:var(--dark);}
.sbc-buy-1:hover{box-shadow:0 6px 18px var(--gm);transform:translateY(-1px);}
.sbc-buy-2{background:linear-gradient(135deg,var(--mint),var(--mint2));color:var(--dark);}
.sbc-buy-2:hover{box-shadow:0 6px 18px var(--gm);transform:translateY(-1px);}
.sbc-buy-3{background:linear-gradient(135deg,var(--mint),var(--mint2));color:var(--dark);}
.sbc-buy-3:hover{box-shadow:0 6px 18px var(--gm);transform:translateY(-1px);}
.sbc-buy-4{background:linear-gradient(135deg,var(--mint),var(--mint2));color:var(--dark);}
.sbc-buy-4:hover{box-shadow:0 6px 18px var(--gm);transform:translateY(-1px);}

.pop-ribbon{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--mint),var(--blue3));color:var(--dark);font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px;font-weight:600;}

/* dashboard screen fix */
#s-dash{background-color:#f6f8fc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='auragrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23auragrain)' opacity='0.50'/%3E%3C/svg%3E");background-size:120px 120px;background-repeat:repeat;color:#07101f;}
.content{background:transparent;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:#dce2f0;border-radius:2px;}
@keyframes toastAnim{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}

/* ═══════════════════════════════════════════════════════════
   HAMBURGUESA + BACKDROP (ocultos en escritorio)
   ═══════════════════════════════════════════════════════════ */
.hamb{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:7px;border:1px solid var(--bg3);border-radius:9px;background:#fff;cursor:pointer;flex-shrink:0;}
.hamb span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:.25s;}
.side-backdrop{display:none;position:fixed;inset:0;background:rgba(4,9,26,.5);backdrop-filter:blur(2px);z-index:290;}
.side-backdrop.show{display:block;animation:fadeUp .2s ease;}

/* ═══════════════════════════════════════════════════════════
   📱 VERSIÓN MÓVIL  (celulares · ancho ≤ 760px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ---- Landing ---- */
  /* El nav debe cubrir la franja del notch/barra de estado (viewport-fit=cover),
     si no el contenido se ve por encima de la barra al hacer scroll. */
  .lnav{padding:calc(12px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 12px calc(18px + env(safe-area-inset-left));}
  .nbtns{gap:6px;}
  .btn-o,.lnav .btn-m{padding:6px 12px;font-size:.72rem;}
  .nbrand{font-size:1rem;}
  .hero{padding:calc(70px + env(safe-area-inset-top)) 20px 56px;}
  .bgrid{grid-template-columns:1fr;gap:14px;margin-top:30px;}
  .mrow2{grid-template-columns:1fr;}

  /* ── Landing como APP-SHELL ESTRUCTURAL (copiado TAL CUAL del panel #s-dash) ──
     Por qué el panel NO tiembla: #s-dash es un flex-column de alto fijo con
     overflow:hidden; la topbar y la barra de abajo son ESTRUCTURALES (ni fixed
     ni sticky) y SOLO el .content del medio scrollea; además el body va
     overflow:hidden (el documento no scrollea → iOS no colapsa su barra → nada
     salta) y la altura se ancla a --app-vh (medida por JS; dvh/vh mienten en
     Chrome iOS). Replicamos EXACTO en el landing: .lnav arriba, .land-scroll en
     medio (único que scrollea), .mcta abajo. Las barras blancas cubren el notch
     (safe-area-top) y el home-indicator (safe-area-bottom) y NO se mueven. */
  #s-land.on{
    display:flex!important;            /* gana a .screen.on{display:block!important} */
    flex-direction:column;
    height:var(--app-vh,100dvh);
    overflow:hidden;
    padding-bottom:0;                  /* anula el colchón de 96px de la barra fija vieja */
  }
  #s-land > .lnav{
    position:static; flex:0 0 auto;    /* estructural: no se mueve ni tiembla */
    transform:none; will-change:auto;
    padding-top:calc(12px + env(safe-area-inset-top));
    background:#ffffff;
  }
  #s-land > .land-scroll{
    flex:1 1 auto; min-height:0;        /* el ÚNICO que scrollea */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:none;
  }
  #s-land > .land-scroll > .hero{ padding-top:22px; }   /* el nav ya va arriba por estructura */
  #s-land > .mcta{
    position:static; flex:0 0 auto;    /* estructural, pegada al fondo */
    transform:none;
    padding-bottom:calc(11px + env(safe-area-inset-bottom));
    background:#ffffff;
  }
  #s-land > .mcta::after{ display:none; }
  /* Mientras se ve el landing, el DOCUMENTO no scrollea (scrollea .land-scroll);
     así las barras no se despegan ni las tapa la barra del navegador. Igual que
     el panel con #s-dash. */
  html:has(#s-land.on), html:has(#s-land.on) body{
    height:var(--app-vh,100dvh); min-height:0;
    overflow:hidden; overscroll-behavior:none;
  }

  /* ---- Panel: sidebar se vuelve cajón deslizable ---- */
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:82vw;max-width:300px;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:300;box-shadow:0 0 50px rgba(0,0,0,.45);
    overflow-y:auto;-webkit-overflow-scrolling:touch;  /* cajón desplazable: así se alcanza el perfil del pie */
  }
  .sidebar.open{transform:translateX(0);}
  .hamb{display:flex;}

  /* topbar más compacta */
  .topbar{padding:calc(9px + env(safe-area-inset-top)) 14px 9px;}
  .tb-title{font-size:.92rem;}
  .tb-r{gap:5px;}
  .tb-r .pill{display:none;}            /* ocultamos chips que no caben */
  .tb-r .btn{padding:5px 9px;font-size:.66rem;}
  /* overflow-x:hidden explícito: con solo overflow-y:auto el navegador calcula
     overflow-x como 'auto' → cualquier hijo ancho (Reportes, Diseño de tienda,
     lista de chats) hacía que TODO el panel se deslizara a la derecha sin tope.
     Las tablas (.tw) y las pestañas deslizables tienen su propio scroll, no se ven
     afectadas. Con un chat abierto (body.conv-open) esto se libera más abajo. */
  .content{padding:14px 14px;overflow-x:hidden;max-width:100%;}

  /* ---- Grids se apilan ---- */
  .g4{grid-template-columns:1fr 1fr;gap:9px;}
  .g3{grid-template-columns:1fr;}
  .g2{grid-template-columns:1fr;}
  .g21{grid-template-columns:1fr;}
  .bot-cfg-grid{grid-template-columns:1fr!important;min-height:0;}
  .kanban{grid-template-columns:1fr!important;}
  /* Grids con columna fija (sidebar de tienda/reportes/etc.) se apilan en móvil */
  [style*="1fr 360px"],[style*="1fr 340px"],[style*="1fr 320px"],[style*="1fr 310px"],[style*="360px 1fr"],[style*="340px 1fr"],[style*="320px 1fr"]{grid-template-columns:1fr!important;}
  /* Los hijos de grid/flex tienen min-width:auto por defecto → NO se encogen y una
     tarjeta con tabla/contenido ancho crecía por encima del ancho del teléfono y
     quedaba cortada (Reportes/CRM, Diseño de tienda). min-width:0 los deja encoger;
     el contenido ancho de verdad (tablas) scrollea dentro de su .tw. */
  .g4>*,.g3>*,.g2>*,.g21>*,.gcol>*,.bot-cfg-grid>*{min-width:0;}
  .card{min-width:0;max-width:100%;}

  /* barra de pestañas del bot: que baje de línea el selector de modelo */
  #pg-cfg-bot>div[style*="flex"]{flex-wrap:wrap;}

  /* tablas: scroll horizontal y un poco más chicas */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{font-size:.78rem;min-width:540px;}

  /* tarjetas y modales con menos padding */
  .card{padding:13px;}
  .modal-bg{padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .modal-bg>.mbox{margin-top:auto;margin-bottom:auto;}

  /* Web Chat: hero más compacto y sin desbordes en pantallas chicas */
  #pg-webchat{padding-bottom:env(safe-area-inset-bottom);}
  #pg-webchat .card>div[style*="gap:12px"]{flex-wrap:wrap;row-gap:8px;}
  #pg-webchat #webchat-status-pill{margin-left:auto;}
  #pg-webchat #webchat-mock div{padding:9px 11px!important;}
  #pg-webchat #webchat-wizard-picks .btn{flex:1 1 auto;text-align:center;}
}

/* Pantallas medianas (tablets · 761–1024px) */
@media (min-width:761px) and (max-width:1024px){
  .g4{grid-template-columns:1fr 1fr;}
  .bgrid{grid-template-columns:1fr;}
  .bot-cfg-grid{grid-template-columns:1fr 1fr;}
}

/* ══ MODO "CORTADA": sidebar colapsable en escritorio/tablet (>760px) ══ */
.sb-collapse{display:none;}
.sb-reopen{display:none;}
@media (min-width:761px){
  /* Flechita para colapsar (dentro del sidebar, junto al logo) */
  .sb-collapse{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:20px;right:9px;z-index:3;
    width:24px;height:24px;border-radius:7px;cursor:pointer;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.7);font-size:.95rem;line-height:1;transition:.18s;
  }
  .sb-collapse:hover{background:rgba(255,255,255,.18);color:#fff;}
  /* Flecha flotante para reabrir — solo visible en modo cortada */
  .sb-reopen{
    position:fixed;top:16px;left:0;z-index:260;
    align-items:center;justify-content:center;
    width:26px;height:48px;border-radius:0 13px 13px 0;cursor:pointer;
    background:var(--dark);color:#fff;border:none;font-size:1.05rem;
    box-shadow:2px 2px 16px rgba(0,0,0,.3);transition:width .18s,background .18s;
  }
  .sb-reopen:hover{width:33px;background:#0a1020;}
  /* Estado colapsado: el sidebar se desliza fuera con margin negativo
     (no tocamos width → el estado abierto nunca se rompe) */
  #s-dash.sb-off .sidebar{margin-left:-230px;}
  #s-dash.sb-off .sb-reopen{display:flex;}
}

/* ═══════════════════════════════════════════════════════════
   📱 BARRA INFERIOR MÓVIL  (estilo app · solo ≤ 760px)
   Accesos grandes: Chats · Ventas · Tienda · Bots · Más
   ═══════════════════════════════════════════════════════════ */
.mbottom{display:none;}
/* En la vista previa de la tienda (#s-tienda-pub) la barra inferior del panel NO debe
   verse: se superponía a la tienda en móvil. La tienda ya tiene su "← Volver al panel". */
body.on-storepub .mbottom{display:none!important;}
/* "Ver tienda" con plantilla escritorio ("mac"): la pantalla queda FIJA (fondo + dock)
   y solo la ventana scrollea, igual que en la tienda pública en vivo. Sin esto, la
   barra "Volver al panel" (48px) + el escritorio (100vh) desbordan y el documento entero
   scrolleaba (el fondo se movía). Solo aplica cuando el shell mac está presente. */
body.on-storepub #s-tienda-pub:has(.st-mac-shell){position:fixed!important;inset:0;height:100vh;height:100dvh;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
body.on-storepub #s-tienda-pub:has(.st-mac-shell) #tpub-body{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
body.on-storepub #s-tienda-pub:has(.st-mac-shell) #tpub-body > div:last-child{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
/* El escritorio llena con FLEX (no height:%), así no depende de la cadena de padres. */
body.on-storepub #s-tienda-pub:has(.st-mac-shell) #tpub-body > div:last-child > .st-mac-shell{flex:1 1 auto!important;height:auto!important;min-height:0!important;}
/* Móvil: mismo espejo que la pública — sin rebote del navegador en la vista previa. */
html:has(body.on-storepub #s-tienda-pub .st-mac-shell),
body.on-storepub:has(#s-tienda-pub .st-mac-shell){height:100%;overflow:hidden;overscroll-behavior:none;}
@media (max-width:760px){
  body.on-storepub .mbottom{display:none!important;}
  .mbottom{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:280;
    background:rgba(10,20,30,.94);backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mb-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;padding:6px 2px;
    color:rgba(255,255,255,.5);font-size:.6rem;font-weight:600;
    letter-spacing:.01em;transition:color .18s;-webkit-tap-highlight-color:transparent;
  }
  .mb-item svg{width:23px;height:23px;stroke-width:1.8;}
  .mb-item.on{color:var(--mint2,#1fbf8f);}
  .mb-item.on svg{filter:drop-shadow(0 0 6px rgba(31,191,143,.5));}
  /* con barra inferior + botón "Más", el menú hamburguesa sobra */
  .hamb{display:none!important;}

  /* ── App shell móvil sin saltos en iOS ──
     El panel usa la altura VISIBLE real (dvh, no vh, que incluye la barra de
     Safari y provoca saltos). La barra inferior es parte del shell (order:9,
     no position:fixed): topbar arriba, contenido con scroll propio en medio,
     barra abajo. Así nada "salta" al mostrarse/ocultarse la barra del navegador. */
  #s-dash.on{height:100vh;height:100dvh!important;}
  .content{-webkit-overflow-scrolling:touch;}

  /* ── Chrome/Firefox/Edge en iPhone: dvh/vh no descuentan su barra inferior y
       safe-area-inset-bottom vale 0, así que la barra de navegación y el borde
       inferior quedaban DETRÁS de la barra del navegador. Anclamos todo a la
       altura visible real (--app-vh, medida con JS). Safari/Android intactos. ── */
  html.is-crios #s-dash.on{height:var(--app-vh,100dvh)!important;}
  html.is-crios .shell{height:100%!important;min-height:0!important;}
  html.is-crios body.conv-open #conv-thread{height:var(--app-vh,100dvh)!important;top:0!important;bottom:auto!important;}
  html.is-crios .mprofile{height:var(--app-vh,100dvh)!important;}
  /* colchón extra bajo el contenido para que el último elemento no lo tape la barra de Chrome */
  html.is-crios .content{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;}
  /* dentro del dashboard, el documento NO scrollea (scrollea .content); así la barra
     fija abajo no se despega ni rebota. Solo con el panel abierto: el landing/tienda scrollea normal. */
  html.is-crios:has(#s-dash.on),
  html.is-crios:has(#s-dash.on) body{height:var(--app-vh,100dvh)!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none;}

  /* ── Chats estilo WhatsApp: tocar un chat lo abre a pantalla completa ── */
  .conv-back{display:inline-flex!important;}                 /* botón "atrás" solo en móvil */
  /* Con un chat abierto: el documento NO scrollea en NINGÚN navegador móvil (Safari incluido),
     así el hilo fijo se ancla al viewport real y no queda "sobrepuesto" ni se ve la barra de abajo. */
  html:has(body.conv-open), body.conv-open{overflow:hidden!important;overscroll-behavior:none;height:100dvh;}
  body:not(.conv-open) #conv-thread{display:none!important;} /* sin chat abierto: nada de cuadro vacío */
  body.conv-open #conv-list,
  body.conv-open #inbox-filter-row,
  body.conv-open #pending-sales,
  body.conv-open #bandeja-tabbar,
  body.conv-open #wa-status-banner{display:none!important;}  /* al abrir un chat, ocultar la lista y lo demás */
  body.conv-open #conv-thread{
    display:flex!important;flex-direction:column;
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
    width:100%!important;height:100dvh!important;max-height:100dvh!important;z-index:400!important;
    margin:0!important;border:none!important;border-radius:0!important;
    background:var(--bg);padding:calc(12px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
    overflow:hidden;min-height:0;
  }
  /* Distribución a pantalla completa: header arriba, mensajes ocupan todo el medio, compositor abajo */
  body.conv-open #conv-thread > div:first-child{flex:0 0 auto;}   /* header del chat */
  body.conv-open #conv-msgs{flex:1 1 auto!important;max-height:none!important;min-height:0;-webkit-overflow-scrolling:touch;}
  body.conv-open #conv-thread > div:last-child{flex:0 0 auto;}    /* compositor anclado abajo */
  /* ── iOS FIX: en Safari iOS un position:fixed queda ATRAPADO dentro de un ancestro con
     overflow/scroll (.content tiene -webkit-overflow-scrolling:touch; el shell tiene overflow:hidden).
     Android lo ignora y el fixed escapa al viewport → por eso allá SÍ se veía bien.
     Con un chat abierto liberamos el overflow de toda la cadena para que el hilo fijo cubra la pantalla. */
  body.conv-open #s-dash,
  body.conv-open .shell,
  body.conv-open .main,
  body.conv-open .content{overflow:visible!important;-webkit-overflow-scrolling:auto!important;}

  /* ── Ventas: acción principal grande y cifra héroe ── */
  .ventas-top{flex-direction:column;align-items:stretch;gap:10px;}
  .ventas-top .btn{order:-1;width:100%;justify-content:center;font-size:.95rem;padding:13px;}
  .ventas-intro{order:2;font-size:.72rem;max-width:none;}
  .g4 .stat-hero{grid-column:1 / -1;}
  .g4 .stat-hero .sv{font-size:1.7rem;}

  /* ── Tienda: catálogo en 2 columnas + controles a lo ancho ── */
  #prod-grid.g3{grid-template-columns:1fr 1fr!important;gap:9px;}
  .prod-actions{flex-direction:column;align-items:stretch!important;gap:9px;}
  .prod-search-row{flex-direction:column;gap:8px;width:100%;}
  #prod-search{width:100%!important;font-size:.85rem!important;padding:10px 12px!important;}
  .prod-add-btn{order:-1;width:100%;justify-content:center;font-size:.9rem!important;padding:12px!important;}

  /* ── Pestañas internas: se acomodan en varias filas para que NINGUNA se corte.
     (Antes iban en una sola fila deslizable y en móvil se veían "cortadas": no
      se notaba que había más pestañas, p.ej. Pagos/Contacto/Compartir.) ── */
  .cfgtabs{flex-wrap:wrap!important;overflow-x:visible;row-gap:9px;column-gap:10px;}
  .cfgtab{flex-shrink:0;white-space:nowrap;}

  /* ── Pestañas en UNA sola fila deslizable horizontalmente en móvil (pedido explícito) ──
     Cubre: pestañas de la Bandeja (#bandeja-tabbar), buzones Personales/Asistentes
     (#inbox-areas), categorías de Reportes/CRM (#crm-chips), pestañas de Reportes/CRM
     (.reportes-tabs), diseño de página (#storetabs + sub-pestañas #dsubtabs) y
     pestañas del asistente (#cfgtabs). */
  #storetabs.cfgtabs, #cfgtabs.cfgtabs, .reportes-tabs.cfgtabs, #dsubtabs.cfgtabs,
  #crm-chips, #inbox-areas, #bandeja-tabbar > div{
    flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;row-gap:0!important;max-width:100%;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);}
  #storetabs.cfgtabs::-webkit-scrollbar, #cfgtabs.cfgtabs::-webkit-scrollbar,
  .reportes-tabs.cfgtabs::-webkit-scrollbar, #dsubtabs.cfgtabs::-webkit-scrollbar,
  #crm-chips::-webkit-scrollbar, #inbox-areas::-webkit-scrollbar,
  #bandeja-tabbar > div::-webkit-scrollbar{display:none;}
  /* los que eran inline-flex → flex a ancho completo para que el scroll horizontal funcione */
  #crm-chips, #inbox-areas, #bandeja-tabbar > div{display:flex!important;width:100%;}
  /* los items nunca se encogen ni se parten */
  #storetabs .cfgtab, #cfgtabs .cfgtab, .reportes-tabs .cfgtab, #dsubtabs .cfgtab,
  #crm-chips .crm-chip, #inbox-areas .prodf-btn, #bandeja-tabbar > div > button{
    flex:0 0 auto!important;white-space:nowrap;}

  /* ── Toggle Configurar / Vista previa: alterna las dos columnas sin scrollear al fondo ── */
  .st-mtoggle{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--bg3);
    border-radius:12px;padding:4px;margin-bottom:14px;}
  .st-mtab{flex:1;border:none;background:transparent;cursor:pointer;border-radius:9px;
    padding:10px 8px;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
    color:var(--ink3);transition:.15s;-webkit-tap-highlight-color:transparent;}
  .st-mtab.on{background:var(--white,#fff);color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.08);}
  /* En "Configurar" se oculta la vista previa; en "Vista previa" se oculta el editor. */
  #store-main-grid:not(.show-preview) > #store-preview-col{display:none;}
  #store-main-grid.show-preview > .gcol{display:none;}
  /* Vista previa = copia exacta de la tienda pública: a ancho completo, sin marco ni cabecera de panel */
  #store-main-grid.show-preview{gap:0;margin:0 -14px;}
  #store-preview-col .card{margin:0;border:none;border-radius:0;box-shadow:none;}
  #store-preview-col .card > div:first-child{padding:8px 12px!important;}  /* cabecera slim (contiene el toggle 💻/📱) */
  #store-preview{height:calc(100dvh - 190px)!important;}

  /* ── Tienda en teléfono (preview + pública en vivo): nada se desborda a lo ancho ── */
  #store-preview,#aura-pub-root,#tpub-body{overflow-x:hidden;max-width:100vw;}
  #store-preview img,#aura-pub-root img,#tpub-body img{max-width:100%;height:auto;}
  /* cabecera del storefront: que quepa (tipografía más chica, sin márgenes gigantes) */
  .st-head{padding:0 5%!important;height:54px!important;gap:.6rem!important;}
  .st-head > div:first-child{font-size:1.15rem!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .st-head button{margin-left:6px!important;padding:.4rem .7rem!important;font-size:.72rem!important;}

  /* ── CRM: tabla de clientes con solo lo esencial (Cliente · Pedidos · Total) ── */
  #crm-cli .ct{align-items:stretch;}
  #crm-cli .ct > div{width:100%;}
  #crm-cli #crm-search{flex:1;width:auto!important;}
  #crm-cli table{min-width:0!important;}
  #crm-cli thead th:nth-child(2),#crm-cli tbody td:nth-child(2),   /* Canal */
  #crm-cli thead th:nth-child(5),#crm-cli tbody td:nth-child(5){display:none;}  /* Segmento */
  /* Al picar un cliente, su ficha se ABRE como pantalla (no aparece al final) */
  body.crm-detail-open #crm-detail{
    position:fixed;inset:0;z-index:6000;margin:0;border-radius:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--bg,#fff);
    padding:calc(50px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }
  #crm-detail-back{display:none;}
  body.crm-detail-open #crm-detail-back{
    display:flex;align-items:center;gap:8px;
    position:fixed;top:0;left:0;right:0;z-index:6001;
    height:calc(50px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;
    background:var(--card,#fff);border-bottom:1px solid rgba(0,0,0,.08);
    font-weight:700;font-size:.9rem;cursor:pointer;
  }
  /* ── iOS FIX (igual que en los chats): un position:fixed queda ATRAPADO dentro de un
       ancestro con overflow/scroll (.shell overflow:hidden, .content -webkit-overflow-scrolling).
       Sin liberar la cadena, la ficha caía al FONDO del scroll ("se abre hasta abajo") y el
       botón "Volver" quedaba mal anclado/cortado. Con la ficha abierta liberamos el overflow. ── */
  html:has(body.crm-detail-open), body.crm-detail-open{overflow:hidden!important;overscroll-behavior:none;height:100dvh;}
  body.crm-detail-open #s-dash,
  body.crm-detail-open .shell,
  body.crm-detail-open .main,
  body.crm-detail-open .content{overflow:visible!important;-webkit-overflow-scrolling:auto!important;}

  /* ── Chat de Seguimiento en móvil: que se lea como un chat de WhatsApp ──
     El header no carga la leyenda de prioridad (redundante en pantalla chica),
     las secuencias van en UNA fila deslizable (no 9 chips apilados), y
     "Ejecutar seguimiento" es un botón a lo ancho, fácil de tocar. */
  .segui-prio-legend{display:none!important;}              /* leyenda de prioridad: fuera del header en móvil */
  .segui-seq-hint{display:none;}                            /* la explicación larga sobra: los chips ya se explican solos */
  #conv-segui-chips .segui-seq-chips{
    flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);}
  #conv-segui-chips .segui-seq-chips::-webkit-scrollbar{display:none;}
  #conv-segui-chips .segui-seq-chips > button{flex:0 0 auto;}
  .segui-run-row{display:flex;flex-direction:column;gap:4px;}
  .segui-run-btn{width:100%;text-align:center;padding:11px 13px!important;font-size:.82rem!important;}
  .segui-run-hint{margin-left:0!important;text-align:center;}

  /* ── Header del chat abierto (TODOS los buzones) en móvil ──
     Los botones propios de cada buzón (💰 Registrar venta, ✅ Marcar pagado,
     🙋 A Personales, Trasladar a asistente, Asignar…) ya no se apilan y rompen
     el header: bajan a su propia fila a lo ancho y se deslizan en horizontal. */
  .conv-head-actions{
    width:100%;order:3;margin-top:2px;
    flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px;
    -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent);}
  .conv-head-actions::-webkit-scrollbar{display:none;}
  .conv-head-actions > *{flex:0 0 auto;}
  .conv-head-actions #conv-actions{flex-wrap:nowrap!important;}
  /* "Asignar" (equipo) queda al final de la fila deslizable: primero las acciones del buzón */
  .conv-assign-lbl{margin-left:2px;}
  /* Switch Agente/Humano: a lo ancho, cada botón mitad y mitad (fácil de tocar) */
  .conv-mode-row{gap:7px;}
  .conv-mode-row #conv-mode-switch{display:flex;width:100%;}
  .conv-mode-row #conv-mode-switch > button{flex:1;text-align:center;}
  .conv-mode-row #conv-mode-hint{flex:0 0 100%;}
}
/* el botón "atrás" del chat solo existe en móvil */
.conv-back{display:none;}

/* ═══════════════════════════════════════════════════════════
   👤 PANEL DE PERFIL MÓVIL  (abre desde "Más" · solo ≤ 760px)
   ═══════════════════════════════════════════════════════════ */
.mprofile,.mp-backdrop{display:none;}
@media (max-width:760px){
  .mp-backdrop{
    display:block;position:fixed;inset:0;z-index:299;
    background:rgba(4,10,20,.55);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .mp-backdrop.show{opacity:1;pointer-events:auto;}
  .mprofile{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;height:100vh;height:100dvh;width:86vw;max-width:340px;
    background:var(--dark);z-index:300;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 50px rgba(0,0,0,.5);overflow:hidden;
  }
  .mprofile.open{transform:translateX(0);}

  /* Cabecera con degradado de marca */
  .mp-head{
    position:relative;flex-shrink:0;padding:calc(18px + env(safe-area-inset-top)) 16px 16px;
    background:linear-gradient(135deg,rgba(20,50,200,.32),rgba(0,184,138,.14));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mp-close{
    position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;
    width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;
  }
  .mp-close svg{width:17px;height:17px;}
  .mp-hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:2px;}
  .mp-av-wrap{position:relative;border:none;background:none;padding:0;cursor:pointer;line-height:0;}
  .mp-av{width:58px;height:58px;font-size:1.5rem;flex-shrink:0;}
  .mp-cam{
    position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;
    background:var(--mint2);color:#04121f;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--dark);box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .mp-cam svg{width:12px;height:12px;}
  .s-av.has-photo{background-size:cover;background-position:center;color:transparent;font-size:0;}
  #mp-photo-remove{background:none;border:none;color:rgba(255,255,255,.42);font-size:.6rem;cursor:pointer;text-decoration:underline;padding:0;}
  .mp-plan{
    display:inline-block;font-size:.55rem;font-weight:700;letter-spacing:.04em;
    color:var(--mint2);background:rgba(0,184,138,.16);border:1px solid rgba(0,184,138,.35);
    border-radius:100px;padding:3px 10px;
  }

  /* Anillo de objetivo (panel de usuario) */
  .mp-goal{display:flex;flex-direction:column;align-items:center;padding:14px 12px 6px;}
  .mp-goal-ring{position:relative;width:130px;height:130px;}
  .mp-goal-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}

  .mp-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 8px calc(20px + env(safe-area-inset-bottom));}
  .mp-sec-title{
    font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.28);padding:0 8px;margin:16px 0 5px;
  }
  .mprofile .acc-item{font-size:.82rem;padding:11px 10px;}
  .mprofile .acc-item svg:first-child{width:17px;height:17px;}
  .mp-chev{transition:transform .2s ease;}
  .mp-chev.open{transform:rotate(90deg);}
  .mp-panel{padding:4px 8px 8px;animation:mpFade .2s ease;}
  @keyframes mpFade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
  .mp-brand{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.18);margin:20px 0 4px;}
}