/* Layout: sticky top bar + scrollable tab strip, single content column (max 1180px), bottom-sheet modals on phone */
:root{
  color-scheme:dark;
  --bg:#0f0b07; --surface:#1a140e; --surface2:#241c13; --line:#352a1d;
  --fg:#f6eddd; --muted:#a8977f; --accent:#ffb21f; --accent2:#ff6a2b; --ink:#1b1104;
  --ok:#3fd68a; --warn:#ffa940; --bad:#ff5c5c;
  --font-d:'Unbounded','Arial Black',system-ui,sans-serif;
  --font-b:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
}
body[data-skin="neon"]{--bg:#070a12;--surface:#0e1422;--surface2:#151d30;--line:#22304a;--fg:#e8f3ff;--muted:#8b9db8;--accent:#22e3ff;--accent2:#b04dff;--ink:#001219}
body[data-skin="violeta"]{--bg:#0d0914;--surface:#171023;--surface2:#211833;--line:#322548;--fg:#f2ebff;--muted:#a294bb;--accent:#bb8eff;--accent2:#ff5fa8;--ink:#14061f}
body[data-skin="esmeralda"]{--bg:#06100c;--surface:#0d1914;--surface2:#13241c;--line:#1e372b;--fg:#e6f7ef;--muted:#8aab9c;--accent:#35e0a1;--accent2:#c6f432;--ink:#02140c}
body[data-skin="rosa"]{--bg:#160b12;--surface:#21121b;--surface2:#2c1824;--line:#422636;--fg:#fff0f7;--muted:#c09aae;--accent:#ff8fc7;--accent2:#ffd36b;--ink:#2a0717}
body[data-skin="claro"]{color-scheme:light;--bg:#f6f1e8;--surface:#ffffff;--surface2:#f0e9dd;--line:#e1d6c4;--fg:#1f170e;--muted:#6e604f;--accent:#e58a00;--accent2:#e2471b;--ink:#fffaf0;--ok:#138a52;--warn:#b86a00;--bad:#c62828}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
.app{position:relative;z-index:1}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:0}
.mono{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--font-d);color:var(--ink);background:linear-gradient(135deg,var(--accent),var(--accent2));flex:none}
.brand b{font:800 15px var(--font-d);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp{flex:1}
.chip-bal{display:flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg);border-radius:999px;padding:5px 12px;font-weight:700;font-variant-numeric:tabular-nums}
.chip-bal i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--fg);color:var(--bg)}
.tabs{border-top:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:6px}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:none;border:0;background:none;padding:7px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg);background:var(--surface2)}
.tab .n{background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:0 6px;line-height:18px}

main{padding-block:20px 90px}
.vh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vh h2{font:800 clamp(20px,3.4vw,26px)/1.15 var(--font-d)}
.vh p{color:var(--muted);margin-top:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface2);color:var(--fg);border-radius:10px;padding:9px 14px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent2)));border-color:transparent;color:var(--ink);font-weight:700}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:transparent}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* hero */
.hero{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;padding:clamp(20px,4vw,40px);background:
  radial-gradient(60% 80% at 85% 20%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 70%),
  radial-gradient(50% 70% at 10% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--surface);margin-bottom:28px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);padding:4px 10px;border-radius:999px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1{font:800 clamp(38px,8vw,84px)/.95 var(--font-d);letter-spacing:-.01em;margin:14px 0 10px;background:linear-gradient(180deg,var(--fg) 20%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 40%,transparent))}
.hero .tg{color:var(--muted);font-size:16px;max-width:52ch}
.hero .now{margin-top:6px;font-size:14px}
.hero .now b{color:var(--accent)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px;max-width:640px}
.stats div{min-width:0}
.stats b{display:block;font:800 clamp(18px,3vw,24px) var(--font-d);font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--muted)}
.ticker{margin-top:22px;border-top:1px solid var(--line);padding-top:12px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .tr{display:flex;gap:28px;width:max-content;animation:mq 40s linear infinite}
.ticker span{font-size:13px;color:var(--muted);white-space:nowrap}
.ticker span b{color:var(--fg);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.step em{font:800 18px var(--font-d);font-style:normal;color:var(--accent);line-height:1.2}
.step b{display:block;font-size:14px}
.step span{font-size:13px;color:var(--muted)}

/* toolbar */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search{flex:1 1 240px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px}
.search input{flex:1;min-width:0;border:0;background:none;padding:10px 0;outline:none}
.search kbd{font:500 11px var(--font-m);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.chip.on{background:var(--accent);color:var(--ink);border-color:transparent}
select.in,input.in,textarea.in{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;width:100%}
select.in:focus,input.in:focus,textarea.in:focus{border-color:var(--accent)}
textarea.in{resize:vertical;min-height:90px}
.sel{width:auto}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,hsl(var(--h) 80% 55%) 60%,var(--line))}
.art{position:relative;min-height:116px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;background:
  radial-gradient(120% 90% at 100% 0%,hsl(calc(var(--h) + 35) 90% 60% / .55),transparent 60%),
  linear-gradient(135deg,hsl(var(--h) 75% 42%),hsl(calc(var(--h) + 25) 70% 24%));color:#fff;overflow:hidden}
.art::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;border:16px solid rgb(255 255 255 / .09)}
.art h3{font:800 17px/1.15 var(--font-d);text-shadow:0 2px 10px rgb(0 0 0 / .35);position:relative;z-index:1}
.tags{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.tag{font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:rgb(0 0 0 / .35);color:#fff}
.tag.hot{background:#fff;color:#1a1206}
.out .art{filter:grayscale(.85) brightness(.7)}
.cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.desc{font-size:13px;color:var(--muted);min-height:2.9em}
.meta{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.meta span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.pr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto}
.pr b{font:800 24px var(--font-d);font-variant-numeric:tabular-nums}
.st{font-size:12px;font-weight:700}
.st.ok{color:var(--ok)} .st.low{color:var(--warn)} .st.out{color:var(--bad)}
.bar{height:4px;border-radius:4px;background:var(--surface2);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:4px}
.buy{display:flex;gap:8px}
.buy .btn{flex:1}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.qty button{border:0;background:var(--surface2);width:32px;height:38px;font-size:16px}
.qty output{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.empty{text-align:center;padding:40px 16px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:4px}

/* lists / panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.panel h3{font:600 15px var(--font-b);display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.panel h3 small{font-weight:500;color:var(--muted);font-size:12px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.li:first-child{border-top:0}
.li .tx{flex:1;min-width:0}
.li .tx b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .tx span{font-size:12px;color:var(--muted)}
.amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt.pos{color:var(--ok)} .amt.neg{color:var(--fg)}
.sw{width:34px;height:34px;border-radius:10px;flex:none;background:linear-gradient(135deg,hsl(var(--h) 75% 48%),hsl(calc(var(--h) + 25) 70% 28%))}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)} .pill.mut{color:var(--muted)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.kpi span{font-size:12px;color:var(--muted)}
.kpi b{display:block;font:800 clamp(18px,2.6vw,26px) var(--font-d);font-variant-numeric:tabular-nums;margin-top:4px}
.kpi.hl{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.alerts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.alert{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600}
.alert i{width:8px;height:8px;border-radius:50%}
.chart svg{width:100%;height:auto;display:block}

.order{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.oh{display:flex;gap:12px;align-items:center}
.creds{display:flex;flex-direction:column;gap:6px}
.cred{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 12px;min-width:0}
.cred code{flex:1;min-width:0;font:500 12.5px/1.45 var(--font-m);word-break:break-all}
.cred small{display:block;font:600 10px var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}

.balance{padding:22px;border-radius:20px;background:radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--accent2) 35%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}
.balance span{font-size:13px;color:var(--muted)}
.balance b{display:block;font:800 clamp(34px,7vw,52px) var(--font-d);font-variant-numeric:tabular-nums;margin:2px 0 4px}
.amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amts .chip{text-align:center;padding:10px 0;font-size:14px}
.note{font-size:13px;color:var(--muted)}
.note b{color:var(--fg)}
.refbox{border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.refbox .big{font:800 22px var(--font-m);letter-spacing:.06em;color:var(--accent)}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

.inv{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.inv:first-child{border-top:0}
.inv .tx b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv .tx span{font-size:12px;color:var(--muted)}
.inv .num{text-align:right;font-variant-numeric:tabular-nums}
.inv .num b{display:block}
.inv .num span{font-size:12px;color:var(--muted)}

.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:13px;font-weight:600}
.form label span.h{font-weight:400;color:var(--muted);font-size:12px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sw-row:first-of-type{border-top:0}
.sw-row div b{display:block;font-size:14px}
.sw-row div span{font-size:12px;color:var(--muted)}
.toggle{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.toggle:checked{background:var(--accent)}
.toggle:checked::after{transform:translateX(18px);background:var(--ink)}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.skin{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface2);display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:13px;font-weight:600}
.skin.on{outline:2px solid var(--accent);outline-offset:1px}
.skin i{display:block;width:100%;height:34px;border-radius:8px}
pre.prev{margin:0;white-space:pre-wrap;word-break:break-word;font:13px/1.5 var(--font-b);background:color-mix(in srgb,var(--ok) 14%,var(--bg));border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));border-radius:12px;padding:12px}
.ph{display:flex;gap:6px;flex-wrap:wrap}
.ph button{font:500 12px var(--font-m);border:1px solid var(--line);background:var(--surface2);border-radius:6px;padding:2px 7px;color:var(--fg)}

/* fondos: medios y bucles ópticos */
.media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media.missing{background:repeating-linear-gradient(45deg,var(--surface2) 0 10px,var(--surface) 10px 20px)}
.shade{position:absolute;inset:0;z-index:0;pointer-events:none}
.art .shade{background:linear-gradient(180deg,rgb(0 0 0 / .05),rgb(0 0 0 / .6))}
.art.has-media{min-height:164px;background:#0b0b0b}
.art.has-media::after{display:none}
.lp i{position:absolute;inset:0;will-change:transform}
.lp.paused i{animation-play-state:paused}
.lp-seda{background:hsl(var(--h) 70% 14%)}
.lp-seda i{inset:-60%;background:repeating-linear-gradient(115deg,transparent 0 6%,hsl(var(--h) 90% 66% / .6) 10%,transparent 15% 21%);filter:blur(12px);animation:seda 9s ease-in-out infinite alternate}
.lp-seda i:nth-child(2){background:repeating-linear-gradient(68deg,transparent 0 8%,hsl(calc(var(--h) + 40) 90% 72% / .4) 12%,transparent 17% 25%);animation-duration:13s;animation-direction:alternate-reverse;mix-blend-mode:screen}
.lp-seda i:nth-child(3){inset:0;filter:none;animation:none;background:radial-gradient(80% 60% at 70% 20%,rgb(255 255 255 / .18),transparent 60%)}
@keyframes seda{from{transform:translate(-8%,5%) rotate(-5deg) skewX(8deg)}to{transform:translate(8%,-5%) rotate(5deg) skewX(-8deg)}}
.lp-aurora{background:hsl(var(--h) 60% 9%)}
.lp-aurora i{inset:-40%;filter:blur(26px);background:radial-gradient(40% 35% at 30% 40%,hsl(var(--h) 95% 60% / .85),transparent 70%);animation:aur 10s ease-in-out infinite alternate}
.lp-aurora i:nth-child(2){background:radial-gradient(35% 30% at 70% 60%,hsl(calc(var(--h) + 60) 95% 60% / .7),transparent 70%);animation-duration:13s;animation-direction:alternate-reverse}
.lp-aurora i:nth-child(3){background:radial-gradient(30% 25% at 50% 20%,hsl(calc(var(--h) - 50) 95% 65% / .6),transparent 70%);animation-duration:16s}
@keyframes aur{from{transform:translate(-10%,-6%) rotate(0deg)}to{transform:translate(10%,8%) rotate(25deg)}}
.lp-moire{background:hsl(var(--h) 55% 8%)}
.lp-moire i{inset:-50%;background:repeating-linear-gradient(90deg,hsl(var(--h) 90% 62%) 0 2px,transparent 2px 7px)}
.lp-moire i:nth-child(2){background:repeating-radial-gradient(circle,hsl(calc(var(--h) + 40) 90% 66%) 0 2px,transparent 2px 7px);animation:moire 10s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes moire{from{transform:translate(-6%,-3%) scale(1)}to{transform:translate(6%,3%) scale(1.08)}}
.lp-espiral{background:hsl(var(--h) 60% 7%)}
.lp-espiral i{inset:auto;left:50%;top:50%;width:260%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(from 0deg,hsl(var(--h) 90% 58%) 0 9deg,hsl(calc(var(--h) + 30) 80% 12%) 9deg 18deg);animation:rot 14s linear infinite}
.lp-espiral i:nth-child(2){background:repeating-radial-gradient(circle,transparent 0 9px,hsl(var(--h) 80% 6% / .75) 9px 18px);animation:none}
.lp-espiral i:nth-child(3){background:radial-gradient(circle,transparent 8%,hsl(var(--h) 60% 6%) 34%);animation:none}
@keyframes rot{to{rotate:360deg}}
.lp-rejilla{background:linear-gradient(180deg,hsl(calc(var(--h) + 260) 70% 12%),hsl(var(--h) 85% 22%) 56%,hsl(var(--h) 70% 6%) 56%)}
.lp-rejilla i:nth-child(1){inset:auto;left:50%;top:14%;width:42%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:repeating-linear-gradient(180deg,hsl(calc(var(--h) + 20) 100% 64%) 0 7px,transparent 7px 10px);-webkit-mask:linear-gradient(#000 45%,transparent 80%);mask:linear-gradient(#000 45%,transparent 80%)}
.lp-rejilla i:nth-child(2){inset:auto;left:-60%;right:-60%;top:56%;bottom:-30%;background-image:linear-gradient(hsl(var(--h) 100% 66% / .85) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--h) 100% 66% / .85) 1px,transparent 1px);background-size:26px 26px;transform:perspective(140px) rotateX(55deg);transform-origin:50% 0;animation:grid 1.1s linear infinite}
@keyframes grid{to{background-position:0 26px}}
.lp-ondas{background:hsl(var(--h) 65% 10%)}
.lp-ondas i{inset:-30%;background:repeating-linear-gradient(170deg,hsl(var(--h) 90% 60% / .6) 0 3px,transparent 3px 14px);animation:ondas 6s ease-in-out infinite alternate}
.lp-ondas i:nth-child(2){background:repeating-linear-gradient(190deg,hsl(calc(var(--h) + 50) 90% 66% / .5) 0 3px,transparent 3px 14px);animation-duration:8s;animation-direction:alternate-reverse}
@keyframes ondas{from{transform:skewY(-8deg) translateY(-4%)}to{transform:skewY(8deg) translateY(4%)}}
.hero>*{position:relative;z-index:1}
.hero>.media,.hero>.shade{position:absolute;z-index:0}
.hero.has-media .shade{background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface) 55%,transparent) 65%,color-mix(in srgb,var(--surface) 20%,transparent))}
.sabana{position:relative}
.sabana.has-media{border-radius:24px;overflow:clip;border:1px solid var(--line);margin-inline:-4px}
.sabana>.media{position:sticky;top:0;inset:auto;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh}
.sabana>.shade{background:color-mix(in srgb,var(--bg) 40%,transparent)}
.sabana .sbin{position:relative;z-index:1}
.sabana.has-media .sbin{padding:18px 14px}
.sabana.has-media .card{background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sabana.has-media .vh p{color:var(--fg)}
.bgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.bgopt{border:1px solid var(--line);background:var(--surface2);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;text-align:left;color:var(--fg)}
.bgopt.on{outline:2px solid var(--accent);outline-offset:1px}
.bgopt .mini{min-height:56px;border-radius:8px;padding:0}
.upl{margin-top:10px;align-self:flex-start;width:max-content}

/* niveles, avisos, app */
.pr b s{font:500 13px var(--font-b);color:var(--muted);margin-left:8px}
.lvb{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font-b);padding:2px 9px;border-radius:999px;color:var(--fg);background:color-mix(in srgb,var(--lc) 22%,transparent);border:1px solid color-mix(in srgb,var(--lc) 60%,transparent)}
.lvb::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lc)}
.lvl{border-color:color-mix(in srgb,var(--lc) 45%,var(--line))}
.lvrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.lvrow span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:7px 8px;min-width:0}
.lvrow span b{display:block;color:var(--fg);font-size:12px}
.lvrow span.on{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,transparent)}
.lg{display:inline-flex;align-items:center;gap:5px;margin-left:8px}
.lg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.push{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);z-index:70;width:min(420px,calc(100% - 24px));display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 14px 40px rgb(0 0 0 / .4);transition:transform .45s cubic-bezier(.2,1.2,.3,1)}
.push.in{transform:translate(-50%,0)}
.push div{flex:1;min-width:0}
.push b{display:block;font-size:14px}
.push span:not(.mono){font-size:13px;color:var(--muted)}
.push small{font-size:11px;color:var(--muted);align-self:flex-start}
.phone{margin:0 auto;width:min(250px,100%);aspect-ratio:9/17;border-radius:34px;border:8px solid #111;background:#111;box-shadow:0 20px 50px rgb(0 0 0 / .45)}
.phone .scr{height:100%;border-radius:26px;overflow:hidden;padding:14px 12px;background:radial-gradient(80% 50% at 80% 10%,color-mix(in srgb,var(--accent2) 70%,transparent),transparent),linear-gradient(160deg,color-mix(in srgb,var(--accent) 55%,#1a1030),#120c1c);display:flex;flex-direction:column;gap:16px}
.phone .ntf{display:flex;gap:8px;align-items:center;background:rgb(255 255 255 / .82);color:#111;border-radius:14px;padding:8px;animation:up .5s .6s both}
.phone .ntf .mono{width:26px;height:26px;font-size:10px}
.phone .ntf b{display:block;font-size:11px}
.phone .ntf span:not(.mono){font-size:10.5px;line-height:1.25;display:block}
.phone .apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px}
.phone .apps i{aspect-ratio:1;border-radius:12px;opacity:.85}
.phone .me{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.phone .me .mono{width:100%;height:auto;aspect-ratio:1;border-radius:12px;font-size:13px;box-shadow:0 0 0 2px #fff,0 0 18px var(--accent);animation:pop .5s 1s both}
.phone .me small{font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* sheet */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.scrim{position:absolute;inset:0;background:rgb(0 0 0 / .6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .2s}
.pn{position:relative;width:min(520px,100%);max-height:min(88vh,860px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;animation:up .25s cubic-bezier(.2,.8,.2,1)}
.pn h2{font:800 20px var(--font-d);margin-bottom:4px;padding-right:36px}
.pn .sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);font-size:18px;line-height:1}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(24px);opacity:0}}
@media (max-width:640px){
  .sheet{align-items:flex-end}
  .pn{border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 16px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
}
dl.sum{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:14px 0;font-variant-numeric:tabular-nums}
dl.sum dt{color:var(--muted)} dl.sum dd{margin:0;text-align:right;font-weight:600}
dl.sum .tot{font:800 18px var(--font-d);color:var(--fg)}
.prog{display:flex;flex-direction:column;gap:12px;padding:10px 0}
.prog div{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:600;transition:color .2s}
.prog div i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.prog div.on{color:var(--fg)}
.prog div.on i{border-color:var(--accent);border-top-color:transparent;animation:spin .7s linear infinite}
.prog div.done{color:var(--fg)}
.prog div.done i{border-color:var(--ok);background:var(--ok);animation:none}
.prog div.done i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.okmark{width:54px;height:54px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin-bottom:12px;box-shadow:0 0 0 8px color-mix(in srgb,var(--ok) 18%,transparent);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.okmark::after{content:"";width:12px;height:22px;border:solid var(--bg);border-width:0 4px 4px 0;transform:translateY(-3px) rotate(45deg)}
@keyframes pop{from{transform:scale(.4)}}
.warnbox{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:12px;padding:12px;font-size:14px;display:flex;flex-direction:column;gap:10px}
.demo{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;margin-bottom:16px}

#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toast{background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;box-shadow:0 10px 30px rgb(0 0 0 / .35);animation:up .25s}
.help{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--ink);font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--accent2) 40%,transparent)}

@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .inv{grid-template-columns:auto minmax(0,1fr) auto}
  .inv .acts{grid-column:1/-1}
}
@media (max-width:420px){
  .brand b{max-width:110px}
  .seg button{padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* versión real */
.loading{display:flex;gap:8px;justify-content:center;padding:60px 0}
.loading i{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:pulse 1s infinite}
.loading i:nth-child(2){animation-delay:.15s}.loading i:nth-child(3){animation-delay:.3s}
.top .btn.sm{white-space:nowrap}
@media (max-width:420px){.top .wrap{gap:8px}.top .btn.sm{padding:6px 9px}}

/* galería de productos */
.art[data-act="view"]{cursor:pointer}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;border-radius:16px;scrollbar-width:none;margin-top:4px}
.gal::-webkit-scrollbar{display:none}
.gal>img,.gal>video{flex:0 0 100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#000;scroll-snap-align:center}
.gdots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.gdots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);padding:0}
.galed{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.gthumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.gthumb img,.gthumb video{width:100%;height:100%;object-fit:cover;display:block}
.gthumb .vtag{position:absolute;left:6px;top:6px;font-size:11px;background:rgb(0 0 0 / .6);color:#fff;border-radius:6px;padding:1px 6px}
.gthumb .gx{position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgb(0 0 0 / .65);color:#fff;font-size:16px;line-height:1}
.gthumb .gbg{position:absolute;left:4px;right:4px;bottom:4px;border:0;border-radius:8px;background:rgb(0 0 0 / .65);color:#fff;font-size:10px;font-weight:700;padding:4px 2px}
.gadd{aspect-ratio:1;border-radius:12px;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;color:var(--muted);cursor:pointer}
.gadd span{font-size:12px;font-weight:600}
/* avisos de la plataforma */
#ann:empty{display:none}
#ann{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.annb{display:flex;gap:10px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-radius:14px;padding:12px 14px}
.annb div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.annb b{font-size:14px}
.annb span{font-size:14px}
.annb button{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:0 2px}

/* avisos en el celular */
.pushcard{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-radius:14px;padding:12px 14px}
.pushcard .bell{font-size:22px;animation:ring 2.4s ease-in-out infinite;transform-origin:50% 10%}
.pushcard div{flex:1;min-width:0;display:flex;flex-direction:column}
.pushcard b{font-size:14px}.pushcard span{font-size:13px;color:var(--muted)}
@keyframes ring{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}
.annb.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
/* entrega: revelado y confeti */
.creds.reveal .cred{animation:flipin .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(.25s + var(--i,0) * .12s);transform-origin:50% 0;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent),0 0 28px color-mix(in srgb,var(--accent) 25%,transparent)}
@keyframes flipin{from{opacity:0;transform:perspective(600px) rotateX(-85deg) translateY(-6px)}to{opacity:1;transform:none}}
.pn{overflow-x:hidden}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.95;animation:fall 2.2s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--x),520px) rotate(var(--r));opacity:0}}

/* ---------- cómo te pagan: estado, referencia, comprobantes ---------- */
.fm{font-family:var(--font-m);letter-spacing:.02em}
.statusbar{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px}
.statusbar>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.statusbar b{font-size:14px}
.statusbar span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.statusbar .dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--muted)}
.statusbar.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.statusbar.ok .dot{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);animation:pulse 2s ease-in-out infinite}
.statusbar.error{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 10%,var(--surface))}
.statusbar.error .dot{background:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.statusbar.ok .dot{animation:none}}
.kv{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rchead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rchead b{font-size:15px}
.paybox{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.payrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);min-width:0}
.payrow:first-child{border-top:0}
.payrow span{font-size:12px;color:var(--muted);width:62px;flex:none}
.payrow b{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
.pwrow{display:flex;gap:8px;align-items:center}
.boxed{border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.boxed>b{font-size:13px}
details.hint summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);list-style:none}
details.hint summary::-webkit-details-marker{display:none}
details.hint[open] summary{margin-bottom:6px}
details.hint ol{padding-left:18px;display:grid;gap:6px}
.paypanel .form h3{font-size:15px}
.savebar{position:sticky;bottom:10px;display:flex;justify-content:flex-end;margin-top:14px;z-index:5;pointer-events:none}
.savebar .btn{pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.rcli{flex-wrap:wrap}
.rcthumb{width:52px;height:52px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;background:var(--bg);flex:none}
.rcthumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcbig{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:12px;background:var(--bg);border:1px solid var(--line)}

/* ---------- opciones por producto ---------- */
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.vchips span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--fg);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.vchips span.out{opacity:.45;text-decoration:line-through}
.pr .from{font:600 12px var(--font-b);color:var(--muted);margin-right:2px}
.vpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:4px 0 14px}
.vopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);text-align:left;cursor:pointer}
.vopt b{font-size:14px}
.vopt span{font:800 15px var(--font-d);color:var(--accent)}
.vopt small{font-size:11px;color:var(--muted)}
.vopt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.vopt.out{opacity:.6}
.inv.sub{padding-left:34px;background:color-mix(in srgb,var(--accent) 3%,transparent)}
.inv.sub .sw{width:8px;height:8px;opacity:.6}
.vrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px 8px;align-items:end;padding:10px 0;border-top:1px dashed var(--line)}
.vrow:first-child{border-top:0;padding-top:4px}
.vrow .vname{grid-column:1/4}
.vrow .vf{display:grid;gap:3px;font-size:11px;font-weight:600;color:var(--muted)}
.vrow .in{padding:8px 9px;min-width:0}
.vrow .vstock{grid-column:1/-1;font-size:11.5px}
.latebox{border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.latebox .list{margin-top:6px}

/* ---------- fondo detrás de toda la tienda y tono de los fondos ---------- */
#pagebg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
body.pbg #pagebg{display:block}
#pagebg .media,.tnprev .media{position:absolute;inset:0}
.pdim{position:absolute;inset:0;pointer-events:none;background:color-mix(in srgb,var(--bg) var(--tone-dim,35%),transparent)}
.tone :is(#pagebg,.hero,.sabana,.tnprev)>.media{filter:hue-rotate(var(--tone-h,0deg)) saturate(var(--tone-s,1))}
.tcycle :is(#pagebg,.hero,.sabana,.tnprev)>.media{animation:tcycle 36s linear infinite}
@keyframes tcycle{from{filter:hue-rotate(var(--tone-h,0deg)) saturate(var(--tone-s,1))}to{filter:hue-rotate(calc(var(--tone-h,0deg) + 360deg)) saturate(var(--tone-s,1))}}
body.pbg .panel,body.pbg .order,body.pbg .refbox,body.pbg .step{background:color-mix(in srgb,var(--surface) 88%,transparent)}
body.pbg .card{background:color-mix(in srgb,var(--surface) 90%,transparent)}
body.pbg .hero:not(.has-media){background:color-mix(in srgb,var(--surface) 70%,transparent)}
body.pbg .vh p{color:var(--fg);opacity:.85}
.tonebox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tnprev{position:relative;min-height:190px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.tnprev>span{position:absolute;left:10px;bottom:10px;z-index:1;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent)}
.tonebox label output{float:right;font-family:var(--font-m);font-size:12px;color:var(--muted)}
.rng{width:100%;accent-color:var(--accent);margin-top:6px}
.rng.hue{height:10px;border-radius:999px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#f33,#fc3,#3f6,#3cf,#63f,#f3c,#f33)}
.rng.hue::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--bg);box-shadow:0 1px 6px rgb(0 0 0 / .5)}
.rng.hue::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--bg)}
@media (max-width:720px){.tonebox{grid-template-columns:1fr}.tnprev{min-height:150px}}
@media (prefers-reduced-motion:reduce){.tcycle :is(#pagebg,.hero,.sabana,.tnprev)>.media{animation:none}}

/* ---------- Telegram ---------- */
.ic{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.tgcard{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px;border-radius:var(--r);border:1px solid color-mix(in srgb,#2aa3e0 45%,var(--line));background:color-mix(in srgb,#2aa3e0 12%,var(--surface))}
.tgcard>div:nth-child(2){flex:1;min-width:180px;display:flex;flex-direction:column}
.tgcard>div:nth-child(2) span{color:var(--muted);font-size:13px}
.tgi{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2aa3e0;color:#fff;flex:none}
.tgi .ic{margin:0;width:22px;height:22px}
.tgmark{background:#2aa3e0!important;color:#fff;margin:0 auto 12px;box-shadow:0 0 0 8px color-mix(in srgb,#2aa3e0 20%,transparent)!important}
.tgmark::after{display:none}
.tgmark .ic{width:34px;height:34px;margin:0}
.pill.tgp{background:color-mix(in srgb,#2aa3e0 22%,transparent);color:#7cc8f0}
.kpis3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpis3>div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column}
.kpis3 b{font:800 18px var(--font-d)}
.kpis3 span{font-size:12px;color:var(--muted)}
.steps-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.steps-ol a{color:var(--accent)}

/* ---------- reportes de garantía ---------- */
.lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rplist{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;padding:2px}
.rpopt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);cursor:pointer}
.rpopt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.rpopt input{accent-color:var(--accent);width:18px;height:18px;flex:none;margin:0}
.rpopt.other{border-style:dashed}
.rpopt .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rpopt .tx b{font-size:14px;line-height:1.3}
.rpopt .tx span{font-size:12px;color:var(--muted)}
.rpopt .tx .fm{color:var(--fg);opacity:.85}
.rpic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,hsl(var(--h,30) 70% 45%),hsl(calc(var(--h,30) + 40) 70% 30%))}
.rpopt.other .rpic{background:var(--surface);border:1px solid var(--line);font-size:20px}
.rpic img{width:100%;height:100%;object-fit:cover}
.rprow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.drop{display:grid;place-items:center;gap:8px;min-height:110px;padding:14px;border:2px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface2)}
.drop:hover{border-color:var(--accent)}
.drop img{max-height:220px;max-width:100%;border-radius:10px}
.rpthumb{display:block;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:120px;height:120px;background:var(--bg);cursor:zoom-in;flex:none}
.rpthumb.sm{width:56px;height:56px;border-radius:10px}
.rpthumb img{width:100%;height:100%;object-fit:cover;display:block}
.rpbig{display:block;width:100%;padding:0;margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);cursor:zoom-in}
.rpbig img{display:block;width:100%;max-height:300px;object-fit:contain}
.rpvid{display:block;width:100%;max-height:320px;border-radius:12px;background:#000;margin-top:8px}
.rpc{display:flex;flex-direction:column;gap:10px}
.rpc.open{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.rpc p{margin:0}
.bubble{border:1px solid var(--line);background:var(--surface2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bubble.me{background:color-mix(in srgb,var(--accent) 8%,var(--surface2))}
.bubble .bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.bubble .bh small{color:var(--muted);margin-left:auto}
.bubble p{margin:0;white-space:pre-wrap}
.kchip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap}
.k-espera{background:color-mix(in srgb,#3b82f6 22%,transparent);color:#93c5fd}
.k-responde{background:color-mix(in srgb,#22c55e 20%,transparent);color:#86efac}
.k-repone{background:color-mix(in srgb,#f5b83b 22%,transparent);color:#fcd34d}
.k-rechaza{background:color-mix(in srgb,#ef4444 20%,transparent);color:#fca5a5}
body[data-skin="claro"] .k-espera{color:#1d4ed8}body[data-skin="claro"] .k-responde{color:#15803d}body[data-skin="claro"] .k-repone{color:#a16207}body[data-skin="claro"] .k-rechaza{color:#b91c1c}
.qrs{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto;padding:2px}
.qr{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.qr:hover,.qr.on{border-color:var(--accent)}
.qr.on{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.segr{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.segr button{min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.segr button.on{background:var(--bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.segr button:disabled{opacity:.4;cursor:not-allowed}
.repo{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px}
.rad{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.rad input{accent-color:var(--accent);width:18px;height:18px}
.attach{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 4px;color:var(--accent);font-weight:600;cursor:pointer}
.attp{display:flex;align-items:center;gap:10px}
.attp img,.attp video{max-height:120px;max-width:200px;border-radius:10px;border:1px solid var(--line)}
.rpinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.rpinfo div{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column}
.rpinfo span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rpinfo b{font-size:14px}
.quote{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface2);font-style:italic}
.qrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px;align-items:start}
@media (max-width:560px){.qrow{grid-template-columns:minmax(0,1fr) auto}.qrow textarea{grid-column:1/-1;grid-row:2}}
.lightbox{position:fixed;inset:0;z-index:90;background:rgb(0 0 0 / .88);display:grid;place-items:center;padding:16px;cursor:zoom-out;animation:fade .15s}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.lightbox .x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgb(255 255 255 / .15);color:#fff;font-size:26px;cursor:pointer}
.form label.rpopt,.form label.rad,.form label.attach{display:flex}
.form label.rpopt{font-weight:400;font-size:14px}
.form label.drop{display:grid}

/* ---------- cuenta reportada ---------- */
.acct{margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));display:flex;flex-direction:column;gap:8px}
.acct-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px}
.acct-h .fm{font-size:12px;color:var(--muted)}
.acct p{margin:0}
.acct-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.acct-kv div{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.acct-kv span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.acct-kv b{font-size:14px}
.acct-kv small{font-weight:500;color:var(--muted)}
.acct .cred code{white-space:pre-wrap;word-break:break-all}
.acctline{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--line)}
.acctline code{font-size:13px;word-break:break-all}
.acctline span{font-size:12px;color:var(--muted)}
.otherbox{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}

/* ---------- fondo que cubre toda la tienda ---------- */
/* 100lvh: no deja hueco cuando el celular esconde o muestra la barra de direcciones */
#pagebg{bottom:auto;height:100vh;height:100lvh}
#pagebg .media img,#pagebg .media video{width:100%;height:100%;object-fit:cover;object-position:center}
/* las animaciones llenan toda la pantalla, sin orillas oscuras */
#pagebg .lp-espiral i{width:max(260%,190vh)}
#pagebg .lp-espiral i:nth-child(3){display:none}
#pagebg .lp-rejilla i:nth-child(2){bottom:-60%}
/* portada, catálogo y tarjetas como vidrio: se ve el fondo detrás */
body.pcover .hero{background:color-mix(in srgb,var(--surface) 50%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.pcover .step,body.pcover .panel,body.pcover .order,body.pcover .refbox{background:color-mix(in srgb,var(--surface) 78%,transparent)}
body.pcover .card{background:color-mix(in srgb,var(--surface) 82%,transparent)}
body.pcover .search,body.pcover .toolbar select.in{background:color-mix(in srgb,var(--surface) 80%,transparent)}

/* =====================================================================
   Entrega 1 · Panel y look
   ===================================================================== */

/* ---------- paletas neón y pastel, y modo claro (se calculan del color principal) ---------- */
body.pal{color-scheme:dark;--accent:var(--pa);--accent2:var(--pb);--bg:color-mix(in srgb,var(--pa) 6%,#07070b);--surface:color-mix(in srgb,var(--pa) 7%,#121219);--surface2:color-mix(in srgb,var(--pa) 11%,#1b1b25);--line:color-mix(in srgb,var(--pa) 20%,#2b2b38);--fg:#f4f2f8;--muted:#aea9bc;--ink:#0a0a10}
body.pal.light{color-scheme:light;--bg:color-mix(in srgb,var(--pa) 10%,#fbf9f6);--surface:#ffffff;--surface2:color-mix(in srgb,var(--pa) 9%,#f5f2ee);--line:color-mix(in srgb,var(--pa) 26%,#e4dfd8);--fg:#1b1622;--muted:#5a5465;--accent:color-mix(in srgb,var(--pa) 58%,#1b1622);--accent2:color-mix(in srgb,var(--pb) 58%,#1b1622);--ink:#ffffff;--ok:#137a48;--warn:#9a5300;--bad:#c62828}
body.pal.light .art h3{color:#fff}

/* letra del título y brillo */
.hero h1,.brand b{font-family:var(--font-t,var(--font-d));font-weight:var(--tw,800)}
.hero h1{filter:drop-shadow(0 0 calc(var(--glow,.55) * 40px) color-mix(in srgb,var(--accent) 45%,transparent))}
.btn.pri{box-shadow:0 0 calc(var(--glow,.55) * 22px) color-mix(in srgb,var(--accent) 38%,transparent)}
.mono{box-shadow:0 0 calc(var(--glow,.55) * 18px) color-mix(in srgb,var(--accent) 45%,transparent)}
.blogo{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface2)}
.hlogo{display:block;width:clamp(64px,12vw,92px);height:clamp(64px,12vw,92px);border-radius:22px;object-fit:cover;margin-bottom:14px;position:relative;z-index:1;box-shadow:0 0 calc(var(--glow,.55) * 30px) color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---------- barra superior ---------- */
.ib{position:relative;flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:grid;place-items:center;font-size:17px;padding:0}
.ib .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.ib .dotn{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--surface)}
.tmode{border-radius:50%}

/* ---------- menú lateral del panel ---------- */
.drawer{position:fixed;inset:0;z-index:45;pointer-events:none}
.dscrim{position:absolute;inset:0;background:rgb(0 0 0 / .55);opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dpanel{position:absolute;top:0;bottom:0;left:0;width:min(300px,86vw);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-right:1px solid var(--line);padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:14px}
.drawer.open{pointer-events:auto}.drawer.open .dscrim{opacity:1}.drawer.open .dpanel{transform:none}
body.dopen{overflow:hidden}
.dhead{display:flex;align-items:center;gap:10px;padding:4px 4px 0}
.dhead>div{min-width:0;flex:1}
.dhead b{display:block;font:800 15px var(--font-t,var(--font-d));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead>div>span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.pdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok)}.pdot.warn{background:var(--warn)}.pdot.bad{background:var(--bad)}
.dx{font-size:22px;border-radius:50%}
.linkcard{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface2)),var(--surface2));border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.lc-t{font-size:13px;font-weight:700}
.linkcard code{font:600 12.5px var(--font-m);word-break:break-all;color:var(--accent)}
.lc-b{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lc-b .btn{padding:8px 4px}
.dsec{display:flex;flex-direction:column;gap:2px}
.dsec h4{margin:0 0 4px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dit{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--fg);font-size:14.5px;font-weight:600;text-align:left;text-decoration:none}
.dit:hover{background:var(--surface2)}
.dit.on{background:color-mix(in srgb,var(--accent) 16%,var(--surface2));box-shadow:inset 3px 0 0 var(--accent)}
.dit .ico{width:26px;text-align:center;font-size:17px;flex:none}
.dit .dl{flex:1;min-width:0}
.dit .n{background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:0 7px;line-height:20px;min-width:20px;text-align:center}
.dit .new{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--ink);background:linear-gradient(135deg,var(--accent),var(--accent2));padding:2px 6px;border-radius:6px}
.dfoot{border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
@media (min-width:1100px){
  body.adm .drawer{right:auto;width:290px;pointer-events:auto;z-index:15}
  body.adm .dscrim,body.adm .dx,body.adm .ib.menu{display:none}
  body.adm .dpanel{transform:none;width:290px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  body.adm .app,body.adm #ann{margin-left:290px}
  body.adm.dopen{overflow:auto}
}

/* ---------- inicio ---------- */
.bigadd{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:12px;padding:16px;border:0;border-radius:18px;text-align:left;color:var(--ink);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent2)));box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.bigadd .plus{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font:800 28px/1 var(--font-d);background:rgb(255 255 255 / .25);flex:none}
.bigadd .bt b{display:block;font:800 17px var(--font-d)}
.bigadd .bt small{font-size:13px;opacity:.85}
.nbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:10px;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--fg);font-size:14px;text-align:left}
.nbar.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 10%,var(--surface))}
.nbar em{font-style:normal;font-weight:700;color:var(--accent);white-space:nowrap}
.nbar.bad em{color:var(--bad)}
.li.pick{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.li.pick:hover{background:var(--surface2)}
.picklist{max-height:60vh;overflow:auto}
.mvd{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-bottom:14px}
.mvd .li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.mvd .ico{font-size:20px}
.mvd em{font-style:normal;color:var(--muted)}
.ico.big{font-size:24px;width:34px;text-align:center;flex:none}
.qrbox{width:min(280px,100%);margin:0 auto;border-radius:18px;overflow:hidden;background:#fff;padding:6px}
.qrbox svg{display:block;width:100%;height:auto}

/* ---------- ayudantes ---------- */
.helper{padding:12px 0;border-top:1px solid var(--line)}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-top:6px}
.perm{display:flex!important;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);cursor:pointer;font-weight:400!important}
.perm input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex:none}
.perm b{display:block;font-size:13.5px}
.perm small{color:var(--muted);font-size:12px}

/* ---------- suscripción ---------- */
.subcard{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:10}
.ring .rbg{stroke:var(--surface2)}
.ring .rfg{stroke:var(--c);stroke-linecap:round;filter:drop-shadow(0 0 calc(var(--glow,.55) * 10px) var(--c));transition:stroke-dashoffset .8s}
.ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring b{font:800 34px/1 var(--font-d)}
.ring span{font-size:12px;color:var(--muted)}
.stx{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.stx h3{font:800 18px var(--font-d)}
.amt small{font-size:11px;color:var(--muted);font-weight:500}
.plans{display:flex;flex-direction:column;gap:8px}
.plan{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:var(--fg);text-align:left;font:inherit}
.plan.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.plan[disabled]{opacity:.6;cursor:not-allowed}
.plan .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.plan .tx small{color:var(--muted);font-size:12.5px}
.plan .pp{font-weight:800;white-space:nowrap}
.rntotal{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--surface2)}
.rntotal b{font:800 24px var(--font-d)}
.stars{display:flex;gap:4px}
.star{width:46px;height:46px;border:0;background:none;font-size:34px;line-height:1;color:var(--line);padding:0;transition:transform .15s,color .15s}
.star.on{color:#ffc93c;text-shadow:0 0 calc(var(--glow,.55) * 14px) rgb(255 201 60 / .6)}
.star:active{transform:scale(.88)}
.rvst{color:#ffc93c;letter-spacing:1px}

/* ---------- dudas de clientes y ayuda ---------- */
.dqtabs .n{background:var(--bad);color:#fff;font-size:11px;border-radius:999px;padding:0 6px;line-height:18px;margin-left:2px}
.chip.on .n{background:var(--ink);color:var(--accent)}
.dq{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.dq.mine{background:var(--surface2);padding:12px}
.dqh{display:flex;align-items:center;gap:10px}
.dqh .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.dqh .tx span{font-size:12px;color:var(--muted)}
.dqt{white-space:pre-wrap;font-size:15px}
.frow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.facts{display:flex;gap:6px;justify-content:flex-end}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.soc{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--fg);text-decoration:none;font-size:13px;font-weight:600}
.soc i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--font-b);font-style:normal;color:#fff}
.s-wa i{background:#25d366}.s-fb i{background:#1877f2;font-size:16px}.s-ig i{background:linear-gradient(45deg,#f9a825,#e91e63 55%,#7b1fa2)}.s-tg i{background:#2aa3e0}.s-tt i{background:#111;box-shadow:inset 2px 0 0 #25f4ee,inset -2px 0 0 #fe2c55}
.faq{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:0 12px}
.faq summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:800;color:var(--accent)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 0 12px;color:var(--muted);white-space:pre-wrap}
.attrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn .lbl{margin:4px 0 8px}
button.help{border:0;cursor:pointer;font-family:inherit}
.help.dot::after{content:'';position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg)}
body.preview .help{display:none!important}

/* ---------- apariencia ---------- */
.apgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.apctl{display:flex;flex-direction:column;gap:14px;min-width:0}
.apprev{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:5;display:flex;flex-direction:column;gap:6px;align-items:center}
.phonef{width:100%;max-width:400px;height:min(42vh,420px);border-radius:26px;border:6px solid #0b0b0f;outline:1px solid var(--line);overflow:hidden;background:var(--bg);box-shadow:0 20px 50px -20px rgb(0 0 0 / .6);transition:height .3s}
.phonef iframe{display:block;width:100%;height:100%;border:0}
.apprev.mini .phonef{height:0;border-width:0}
.apprev.mini .acts{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 14px;box-shadow:0 8px 24px -10px rgb(0 0 0 / .5)}
@media (min-width:980px){
  .apgrid{grid-template-columns:minmax(0,1fr) 400px}
  .apprev{order:2;align-self:start}
  .apctl{order:1}
  .phonef{height:min(78vh,760px)}
}
.subopt{margin-top:12px}
.subopt .lbl{margin-bottom:6px}
.segw{display:inline-flex;margin-bottom:12px}
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stcard,.fxcard{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:var(--fg);font:inherit}
.stcard.on,.fxcard.on,.fchip.on{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.stcard b,.fxcard b{font-size:14px}
.stcard small,.fxcard small{font-size:12px;color:var(--muted);line-height:1.35}
.stp,.fxp{display:block;width:100%;height:54px;border-radius:10px;margin-bottom:4px;position:relative;overflow:hidden}
.stp-clasico .stp{background:radial-gradient(circle at 80% 20%,var(--accent2),transparent 60%),linear-gradient(135deg,var(--accent),var(--bg) 70%)}
.stp-muertos .stp{background:radial-gradient(circle at 50% 120%,rgb(255 140 26 / .6),transparent 60%),#2a0f38}
.stp-muertos .stp::before{content:'';position:absolute;top:0;left:0;right:0;height:22px;background:repeating-linear-gradient(90deg,#ff3d8b 0 20px,#ff8c1a 20px 40px,#8e44ff 40px 60px,#2ee58c 60px 80px,#ffd36b 80px 100px);clip-path:polygon(0 0,100% 0,100% 70%,95% 100%,90% 70%,85% 100%,80% 70%,75% 100%,70% 70%,65% 100%,60% 70%,55% 100%,50% 70%,45% 100%,40% 70%,35% 100%,30% 70%,25% 100%,20% 70%,15% 100%,10% 70%,5% 100%,0 70%)}
.stp-muertos .stp::after{content:'💀🌼🕯️';position:absolute;bottom:4px;right:6px;font-size:15px}
.stp-minimal .stp{background:#fafaf9;border:1px solid #e7e5e4}
.stp-minimal .stp::after{content:'Aa';position:absolute;left:10px;bottom:6px;font:600 22px 'Manrope',system-ui;color:#111;letter-spacing:-.04em}
.stp-glass .stp{background:radial-gradient(circle at 20% 30%,#ff7a59,transparent 55%),radial-gradient(circle at 80% 70%,#7a5cff,transparent 55%),#2a1240}
.stp-glass .stp::after{content:'';position:absolute;inset:10px 20px;border-radius:12px;background:linear-gradient(135deg,rgb(255 255 255 / .45),rgb(255 255 255 / .12));box-shadow:inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.fxs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.fxp{background:linear-gradient(180deg,var(--surface),var(--bg))}
.fxp-brasas .fxp{background:radial-gradient(circle at 20% 70%,var(--accent) 0 2px,transparent 3px),radial-gradient(circle at 60% 40%,var(--accent2) 0 2px,transparent 3px),radial-gradient(circle at 80% 80%,var(--accent) 0 1.5px,transparent 2.5px),radial-gradient(circle at 40% 20%,var(--accent2) 0 1.5px,transparent 2.5px),var(--bg)}
.fxp-brillitos .fxp::after{content:'✦  ✧   ✦\A   ✧   ✦';white-space:pre;position:absolute;inset:8px;color:#fff;font-size:13px;text-shadow:0 0 8px var(--accent)}
.fxp-meteoros .fxp::after{content:'';position:absolute;width:70px;height:2px;top:16px;right:10px;background:linear-gradient(90deg,#fff,var(--accent) 25%,transparent);transform:rotate(-35deg);box-shadow:0 22px 0 -0.5px color-mix(in srgb,var(--accent) 50%,transparent)}
.fxp-lluvia .fxp::after{content:'💖 🐱   🌸\A   ✨  🐰';white-space:pre;position:absolute;inset:6px 10px;font-size:14px}
.fxp-aurora .fxp{background:radial-gradient(60% 80% at 30% 40%,color-mix(in srgb,var(--accent) 60%,transparent),transparent 70%),radial-gradient(50% 70% at 75% 60%,color-mix(in srgb,var(--accent2) 55%,transparent),transparent 70%),var(--bg)}
.fonts{display:flex;flex-wrap:wrap;gap:6px}
.fchip{border:1px solid var(--line);background:var(--surface2);color:var(--fg);border-radius:12px;padding:8px 12px;font-size:16px;line-height:1.1}
.logorow{display:flex;align-items:center;gap:14px}
.lgprev{width:72px;height:72px;border-radius:18px;object-fit:cover;flex:none;display:grid;place-items:center;font-size:22px}
.lgprev.empty{border:1px dashed var(--line);color:var(--muted);font:700 13px var(--font-b);background:var(--surface2)}
.tdot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgb(128 128 128 / .5)}
.td-blanco{background:#fafaf9}.td-negro{background:#0c0c0c}.td-arena{background:#f4efe6}
.rng{width:100%;accent-color:var(--accent)}

/* ---------- efectos encima del contenido ---------- */
#fxt{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
#clight{position:fixed;inset:0;pointer-events:none;z-index:26;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);mix-blend-mode:screen}
#clight.on{opacity:1}
body.light #clight,body.tl #clight,body[data-skin="claro"] #clight{mix-blend-mode:multiply;background:radial-gradient(240px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
body.flicker .hero h1,body.flicker .brand b{animation:flick 4.5s infinite}
@keyframes flick{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}

/* tarjetas con inclinación y Modo 3D */
.card{position:relative}
body.tilt .card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .3s;will-change:transform}
body.tilt .card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
body.tilt .card.tilting{transition:transform .08s linear,box-shadow .2s}
body.tilt .card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255 / .22),transparent 55%);opacity:0;transition:opacity .25s;z-index:2}
body.tilt .card.tilting::after{opacity:1}
body.m3d .card.tilting{box-shadow:0 26px 50px -18px rgb(0 0 0 / .6),0 0 calc(var(--glow,.55) * 34px) color-mix(in srgb,var(--accent) 35%,transparent)}
body.m3d .hero{transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
body.m3d .hero.tilting{transition:transform .1s linear}
body.m3d{--dp:4px}body.m3d[data-depth="suave"]{--dp:2px}body.m3d[data-depth="maximo"]{--dp:7px}
body.m3d .btn{box-shadow:0 var(--dp) 0 color-mix(in srgb,var(--line) 60%,#000);transform:translateY(calc(var(--dp) * -.25));transition:transform .08s,box-shadow .08s,filter .12s}
body.m3d .btn.pri{box-shadow:0 var(--dp) 0 color-mix(in srgb,var(--accent) 50%,#000),0 0 calc(var(--glow,.55) * 22px) color-mix(in srgb,var(--accent) 38%,transparent)}
body.m3d .btn:active{transform:translateY(calc(var(--dp) * .6));box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,#000)}
body.m3d .chip{box-shadow:0 calc(var(--dp) * .6) 0 color-mix(in srgb,var(--line) 70%,#000)}
body.m3d .hero h1{text-shadow:0 calc(var(--dp) * 1.2) 0 color-mix(in srgb,var(--accent) 35%,#000)}
@media (prefers-reduced-motion:reduce){body.tilt .card,body.m3d .hero{transform:none!important}}

/* =====================================================================
   Estilos de tienda
   ===================================================================== */

/* ---------- 💀 Día de Muertos ---------- */
body.st-muertos{color-scheme:dark;--bg:#1a0b24;--surface:#2a0f38;--surface2:#3a1050;--line:#5a2a78;--fg:#fff3e0;--muted:#e3c6ef;--accent:#ff8c1a;--accent2:#ffd36b;--ink:#2a0f38;--ok:#7dffa8;--warn:#ffd36b;--bad:#ff5f7a;
  background-image:radial-gradient(circle at 50% 110%,rgb(255 140 26 / .25),transparent 60%);background-attachment:fixed}
body.st-muertos .top{border-bottom:3px solid #ff8c1a;background:color-mix(in srgb,#2a0f38 88%,transparent)}
body.st-muertos .brand b{color:#ffd36b}
body.st-muertos .mono{border:2px dashed #ffd36b;background:#ff8c1a;color:#2a0f38}
body.st-muertos .chip-bal{background:#ffd36b;color:#2a0f38;border-color:transparent}
body.st-muertos .chip-bal i{background:#2a0f38;box-shadow:none}
body.st-muertos .hero{background:linear-gradient(180deg,#3a1050,#24092f);border:2px solid #ff8c1a;box-shadow:0 0 30px rgb(255 140 26 / .25);padding-top:clamp(78px,10vw,96px)}
body.st-muertos .hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ffd36b;filter:none;text-shadow:0 0 16px rgb(255 140 26 / .6),3px 3px 0 #c2185b;letter-spacing:0;line-height:1.05}
body.st-muertos .hero .tg{color:#f0d6fa}
body.st-muertos .live{background:#ff8c1a;color:#2a0f38;border-color:transparent;font-weight:800}
body.st-muertos .live i{background:#2a0f38}
body.st-muertos .picado{position:absolute;top:0;left:-6px;right:-6px;height:56px;display:flex;justify-content:space-between;gap:4px;animation:sway 4s ease-in-out infinite;transform-origin:50% 0;z-index:1;pointer-events:none}
body.st-muertos .picado::before{content:'';position:absolute;top:2px;left:0;right:0;height:2px;background:#ffd36b;opacity:.7}
body.st-muertos .picado i{flex:1 1 0;max-width:64px;height:56px;clip-path:polygon(0 0,100% 0,100% 80%,90% 100%,80% 80%,70% 100%,60% 80%,50% 100%,40% 80%,30% 100%,20% 80%,10% 100%,0 80%);-webkit-mask-image:radial-gradient(circle at 50% 38%,transparent 6px,#000 6.5px),radial-gradient(circle,transparent 3px,#000 3.5px);-webkit-mask-size:100% 100%,13px 13px;-webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 50% 38%,transparent 6px,#000 6.5px),radial-gradient(circle,transparent 3px,#000 3.5px);mask-size:100% 100%,13px 13px;mask-composite:intersect;opacity:.92}
body.st-muertos .velas{position:absolute;top:64px;right:clamp(16px,4vw,34px);display:flex;gap:10px;font-size:26px;z-index:1;pointer-events:none}
body.st-muertos .velas i{font-style:normal;display:inline-block;animation:flame 1.2s ease-in-out infinite;transform-origin:50% 100%}
body.st-muertos .velas i:nth-child(2){animation-delay:-.6s}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes flame{0%,100%{transform:scaleY(1);opacity:.9}50%{transform:scaleY(1.15);opacity:1}}
body.st-muertos .btn.pri{background:#ff8c1a;color:#2a0f38;border:0;box-shadow:0 5px 0 #b35500;font-weight:800}
body.st-muertos .btn.pri:active{transform:translateY(3px);box-shadow:0 2px 0 #b35500}
body.st-muertos .hero .btn:not(.pri){background:transparent;border:2px solid #ff5fa2;color:#ffc2dc}
body.st-muertos .card{background:#2a0f38;border:2px solid #5a2a78;border-radius:18px}
body.st-muertos .card .art:not(.has-media){background:radial-gradient(circle at 50% 45%,rgb(255 140 26 / .35),transparent 62%),linear-gradient(135deg,hsl(var(--h) 60% 30%),#3a1050)}
body.st-muertos .card .art::after{content:'💀';border:0;width:auto;height:auto;right:10px;bottom:6px;font-size:24px;border-radius:0;display:block!important}
body.st-muertos .pr b{color:#ff8c1a}
body.st-muertos .vh h2{color:#ffd36b;font-family:'Rye',var(--font-d);font-weight:400}
body.st-muertos .vh h2::before{content:'🌼 '}
body.st-muertos .step em{color:#ff8c1a;font-family:'Rye',var(--font-d);font-weight:400}
body.st-muertos .chip.on{background:#ff8c1a;color:#2a0f38}
body.st-muertos .tab.on{background:#3a1050;color:#ffd36b}
body.st-muertos .help{background:#ff8c1a;color:#2a0f38;box-shadow:0 5px 0 #b35500}

/* ---------- Minimalista (blanco, negro o arena) ---------- */
body.st-minimal{--font-d:'Manrope',system-ui,sans-serif;--font-b:'Manrope',system-ui,sans-serif;--r:16px;--ok:#2f7d4f;--warn:#a36200;--bad:#b3261e}
body.st-minimal[data-mt="blanco"]{color-scheme:light;--bg:#fafaf9;--surface:#fafaf9;--surface2:#efeeec;--line:#e7e5e4;--fg:#111111;--muted:#66645f;--accent:#111111;--accent2:#111111;--ink:#fafaf9}
body.st-minimal[data-mt="negro"]{color-scheme:dark;--bg:#0c0c0c;--surface:#0c0c0c;--surface2:#191919;--line:#262626;--fg:#f5f5f4;--muted:#a3a29f;--accent:#f5f5f4;--accent2:#f5f5f4;--ink:#0c0c0c;--ok:#7dd3a0;--warn:#f0b35a;--bad:#f28b82}
body.st-minimal[data-mt="arena"]{color-scheme:light;--bg:#f4efe6;--surface:#f4efe6;--surface2:#e9e0cf;--line:#e0d6c5;--fg:#2b2620;--muted:#6b6257;--accent:#2b2620;--accent2:#2b2620;--ink:#f4efe6}
body.st-minimal #pagebg,body.st-minimal #fx,body.st-minimal .hero>.media,body.st-minimal .hero>.shade,body.st-minimal .sabana>.media,body.st-minimal .sabana>.shade{display:none!important}
body.st-minimal .top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
body.st-minimal .mono{background:var(--fg);color:var(--bg);box-shadow:none;font-family:var(--font-b)}
body.st-minimal .brand b{letter-spacing:-.04em;font-weight:700;font-size:18px}
body.st-minimal .hero{background:none;border:0;padding:clamp(20px,5vw,48px) 0}
body.st-minimal .hero h1{background:none;color:var(--fg);-webkit-background-clip:border-box;background-clip:border-box;filter:none;font-weight:500;letter-spacing:-.045em;line-height:1.02}
body.st-minimal .live{background:none;border:0;padding:0;color:var(--muted);letter-spacing:.16em}
body.st-minimal .live i{background:var(--fg)}
body.st-minimal .btn{border-radius:999px;box-shadow:none;background:transparent;border-color:var(--line)}
body.st-minimal .btn.pri{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
body.st-minimal .ticker,body.st-minimal .stats{border-color:var(--line)}
body.st-minimal .step{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0}
body.st-minimal .step em{color:var(--fg);font-weight:500}
body.st-minimal .sabana{background:none;border:0;padding:0}
body.st-minimal .card{background:none;border:0;border-radius:0}
body.st-minimal .card:hover{transform:none}
body.st-minimal .card .art{background:var(--surface2)!important;color:var(--fg);border-radius:18px;min-height:150px}
body.st-minimal .card .art::after{display:none}
body.st-minimal .card .art h3{text-shadow:none;font-weight:600;letter-spacing:-.03em;font-size:20px}
body.st-minimal .card .art.has-media h3{color:#fff}
body.st-minimal .card .cb{padding:12px 2px 0}
body.st-minimal .tag{background:var(--bg);color:var(--fg);border:0}
body.st-minimal .bar{display:none}
body.st-minimal .chip{background:none;border-color:var(--line)}
body.st-minimal .chip.on{background:var(--fg);color:var(--bg)}
body.st-minimal .tabs .tab.on{background:none;box-shadow:inset 0 -2px 0 var(--fg);border-radius:0}
body.st-minimal .help{background:var(--fg);color:var(--bg);box-shadow:0 8px 24px rgb(0 0 0 / .12)}
body.st-minimal .chip-bal{background:none;border-color:var(--line)}
body.st-minimal .chip-bal i{background:var(--fg);box-shadow:none}
body.st-minimal .vh h2{font-weight:600;letter-spacing:-.03em}

/* ---------- Liquid Glass ---------- */
body.st-glass{--font-d:'Plus Jakarta Sans',system-ui,sans-serif;--font-b:'Plus Jakarta Sans',system-ui,sans-serif;color-scheme:dark;--bg:#0d0b1a;--surface:rgb(40 38 60 / .45);--surface2:rgb(255 255 255 / .1);--line:rgb(255 255 255 / .22);--fg:#ffffff;--muted:rgb(255 255 255 / .78);--accent:#ffffff;--accent2:#c9b8ff;--ink:#0b0b14;
  --gl:linear-gradient(135deg,rgb(40 38 60 / .45),rgb(12 12 22 / .25));--gl2:linear-gradient(135deg,rgb(40 38 60 / .78),rgb(14 14 26 / .62));--chip:rgb(255 255 255 / .14);background:var(--bg)}
body.st-glass.tl{color-scheme:light;--bg:#f2eef8;--surface:rgb(255 255 255 / .3);--surface2:rgb(255 255 255 / .42);--line:rgb(255 255 255 / .6);--fg:#0b0b14;--muted:rgb(11 11 20 / .72);--accent:#0b0b14;--accent2:#5b3fd6;--ink:#ffffff;--ok:#0d7a43;--warn:#8a4b00;--bad:#b3261e;
  --gl:linear-gradient(135deg,rgb(255 255 255 / .36),rgb(255 255 255 / .13));--gl2:linear-gradient(135deg,rgb(255 255 255 / .72),rgb(255 255 255 / .5));--chip:rgb(255 255 255 / .45)}
#glasswall{display:none}
body.st-glass #glasswall{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body.st-glass.pbg #glasswall{display:none}
#glasswall i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.95;animation:gdrift 14s ease-in-out infinite alternate}
#glasswall .gb1{width:55vmax;height:55vmax;left:-15vmax;top:5vh}
#glasswall .gb2{width:48vmax;height:48vmax;right:-18vmax;top:32vh;animation-duration:17s;animation-delay:-5s}
#glasswall .gb3{width:50vmax;height:50vmax;left:5vw;top:62vh;animation-duration:12s;animation-delay:-8s}
#glasswall .gb4{width:36vmax;height:36vmax;right:0;top:-8vh;animation-duration:19s;animation-delay:-3s}
@keyframes gdrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vw,9vh) scale(1.2)}}
body[data-gb="atardecer"]{--bg:#2a1240}body[data-gb="atardecer"] .gb1{background:#ff7a59}body[data-gb="atardecer"] .gb2{background:#ff3d8b}body[data-gb="atardecer"] .gb3{background:#ffb13d}body[data-gb="atardecer"] .gb4{background:#7a5cff}
body[data-gb="oceano"]{--bg:#04223f}body[data-gb="oceano"] .gb1{background:#00c2ff}body[data-gb="oceano"] .gb2{background:#2bffc6}body[data-gb="oceano"] .gb3{background:#3d6bff}body[data-gb="oceano"] .gb4{background:#a0f0ff}
body[data-gb="noche"]{--bg:#0a0820}body[data-gb="noche"] .gb1{background:#7a5cff}body[data-gb="noche"] .gb2{background:#ff4fd8}body[data-gb="noche"] .gb3{background:#22e3ff}body[data-gb="noche"] .gb4{background:#3d2bff}
body.st-glass::before{background:transparent}
body.st-glass .top,body.st-glass .hero,body.st-glass .card,body.st-glass .step,body.st-glass .panel,body.st-glass .order,body.st-glass .search,body.st-glass .pn,body.st-glass .empty,body.st-glass .balance,body.st-glass .refbox{background:var(--gl);border:0;-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -1px 1px rgb(255 255 255 / .28),inset 1px 0 0 rgb(255 255 255 / .32),inset -1px 0 0 rgb(255 255 255 / .18),0 10px 30px rgb(0 0 0 / .2)}
body.st-glass .hero,body.st-glass .top{backdrop-filter:url(#lgr) blur(5px) saturate(175%) brightness(1.05)}
body.st-glass .pn{background:var(--gl2)}
body.st-glass .top{margin:10px 12px 0;border-radius:28px;top:calc(10px + env(safe-area-inset-top,0px))}
body.st-glass .tabs{border-top:0}
body.st-glass .hero{border-radius:30px}
body.st-glass .hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg);filter:none;letter-spacing:-.045em;text-shadow:0 2px 18px rgb(0 0 0 / .18)}
body.st-glass .hero .tg{color:var(--muted)}
body.st-glass .card{border-radius:26px}
body.st-glass .card .art{border-radius:20px;margin:8px 8px 0;box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 6px 16px rgb(0 0 0 / .2)}
body.st-glass .card .art::after{display:none}
body.st-glass .btn{border-radius:999px;border:0;background:var(--chip);color:var(--fg);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
body.st-glass .btn:active{transform:scale(.93);transition-duration:.12s}
body.st-glass .btn.pri{color:#0b0b14;background:linear-gradient(180deg,rgb(255 255 255 / .95),rgb(255 255 255 / .72));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgb(0 0 0 / .08),0 8px 22px rgb(0 0 0 / .2)}
body.st-glass.tl .btn.pri{color:#fff;background:linear-gradient(180deg,#2b2540,#0b0b14);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 8px 22px rgb(0 0 0 / .25)}
body.st-glass .chip,body.st-glass .tag,body.st-glass .live,body.st-glass .chip-bal{background:var(--chip);border:0;color:var(--fg)}
body.st-glass .chip.on{background:var(--fg);color:var(--bg)}
body.st-glass .tab.on{background:var(--chip)}
body.st-glass .mono{background:radial-gradient(circle at 35% 30%,#fff,rgb(255 255 255 / .55) 60%,rgb(255 255 255 / .3));color:#0b0b14;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8)}
body.st-glass .help{background:linear-gradient(180deg,rgb(255 255 255 / .95),rgb(255 255 255 / .72));color:#0b0b14;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgb(0 0 0 / .25)}
body.st-glass .sabana{background:transparent;border:0}
body.st-glass .sabana>.media,body.st-glass .sabana>.shade,body.st-glass .hero>.media.lp,body.st-glass .hero>.media.lp+.shade{display:none}
body.st-glass .vh h2{color:var(--fg);text-shadow:0 2px 14px rgb(0 0 0 / .25)}
body.st-glass .in,body.st-glass select.in{background:rgb(255 255 255 / .12)}
body.st-glass.tl .in,body.st-glass.tl select.in{background:rgb(255 255 255 / .55)}

/* =====================================================================
   Entrega 2 · Más pieles
   ===================================================================== */
.hdeco{display:none}
/* Las pieles usan su propio fondo en la portada: los bucles de color se quitan (tu foto o video se queda) */
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .hero>.media.lp,
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .hero>.media.lp+.shade,
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .sabana>.media.lp,
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .sabana>.media.lp+.shade{display:none}
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .sabana{background:none;border:0}
body:is(.st-arcade,.st-cyber,.st-kawaii,.st-comic,.st-hacker,.st-clay) .hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none}
body:is(.st-kawaii,.st-comic,.st-clay){color-scheme:light}

/* ---------- 👾 Arcade 8-bit ---------- */
body.st-arcade{color-scheme:dark;--bg:#0b0b2b;--surface:#16164a;--surface2:#22226a;--line:#4a4aa8;--fg:#ffffff;--muted:#c9c9ff;--accent:#ffd400;--accent2:#ff2d75;--ink:#0b0b2b;--ok:#6dff8a;--warn:#ffd400;--bad:#ff2d75;--r:0px}
body.st-arcade *{border-radius:0!important}
body.st-arcade .app::after{content:'';position:fixed;inset:0;z-index:35;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .2) 0 1px,transparent 1px 3px)}
body.st-arcade .top{background:#1a1a4a;border-bottom:4px solid #ff2d75}
body.st-arcade .mono{background:#ffd400;color:#0b0b2b;box-shadow:0 0 0 3px #fff;font:12px 'Press Start 2P',monospace}
body.st-arcade .brand b{font:11px/1.4 'Press Start 2P',monospace}
body.st-arcade .chip-bal{font:10px 'Press Start 2P',monospace;color:#ffd400;border:2px solid #ffd400;background:transparent}
body.st-arcade .chip-bal i{background:#ffd400;box-shadow:none}
body.st-arcade .tab{font:9px/1.6 'Press Start 2P',monospace}
body.st-arcade .tab.on{background:#ff2d75;color:#fff}
body.st-arcade .hero{background:#16164a;border:4px solid #fff;box-shadow:0 0 0 4px #0b0b2b,0 0 0 8px #3df5ff;margin:8px 8px 36px}
body.st-arcade .live{background:#3df5ff;color:#0b0b2b;border:0;font:8px/1.8 'Press Start 2P',monospace}
body.st-arcade .live i{background:#0b0b2b}
body.st-arcade .hero h1{font:clamp(22px,5.4vw,46px)/1.45 'Press Start 2P',monospace;color:#ffd400;text-shadow:3px 3px 0 #ff2d75;letter-spacing:0;margin:18px 0 12px}
body.st-arcade .hero .tg,body.st-arcade .desc{font:21px/1.15 'VT323',monospace;color:#c9c9ff}
body.st-arcade .stats b{font:clamp(13px,2.4vw,18px) 'Press Start 2P',monospace;color:#3df5ff}
body.st-arcade .stats span,body.st-arcade .ticker span{font:18px 'VT323',monospace}
body.st-arcade .btn{border:0;font:10px/1.5 'Press Start 2P',monospace;background:#3df5ff;color:#0b0b2b;box-shadow:inset -4px -4px 0 #11a6b0,inset 4px 4px 0 #b8fbff;padding:12px 14px}
body.st-arcade .btn.pri{background:#ff2d75;color:#fff;box-shadow:inset -4px -4px 0 #a3104a,inset 4px 4px 0 #ff86ae}
body.st-arcade .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
body.st-arcade .btn:active{transform:translateY(2px)}
body.st-arcade .hdeco{display:block;position:absolute;top:18px;right:16px;z-index:2;font:10px 'Press Start 2P',monospace;color:#fff;animation:blink 1s steps(1) infinite}
body.st-arcade .hdeco::before{content:'PRESS START ▶'}
body.st-arcade .hdeco i{display:none}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
body.st-arcade .step{background:#16164a;border:3px solid #fff}
body.st-arcade .step em{font:16px 'Press Start 2P',monospace;color:#ffd400}
body.st-arcade .step b{font:10px/1.6 'Press Start 2P',monospace}
body.st-arcade .step span{font:18px/1.1 'VT323',monospace}
body.st-arcade .vh h2{font:clamp(13px,2.6vw,17px)/1.5 'Press Start 2P',monospace;color:#3df5ff}
body.st-arcade .card{background:#16164a;border:4px solid #fff;box-shadow:6px 6px 0 #000}
body.st-arcade .card .art:not(.has-media){background-color:#22226a;background-image:linear-gradient(45deg,#2a2a7a 25%,transparent 25%,transparent 75%,#2a2a7a 75%),linear-gradient(45deg,#2a2a7a 25%,transparent 25%,transparent 75%,#2a2a7a 75%);background-size:16px 16px;background-position:0 0,8px 8px}
body.st-arcade .card .art::after{display:none}
body.st-arcade .card .art h3{font:12px/1.6 'Press Start 2P',monospace;text-shadow:3px 3px 0 #ff2d75}
body.st-arcade .tag{background:#ffd400;color:#000;border:0;font:8px/1.6 'Press Start 2P',monospace}
body.st-arcade .pr b{font:15px 'Press Start 2P',monospace;color:#ffd400}
body.st-arcade .st{font:20px 'VT323',monospace}
body.st-arcade .meta{font:17px 'VT323',monospace}
body.st-arcade .bar{background:#0b0b2b;border:2px solid #fff;height:10px}
body.st-arcade .bar i{background:repeating-linear-gradient(90deg,#6dff8a 0 8px,transparent 8px 10px)}
body.st-arcade .chip{font:9px/1.6 'Press Start 2P',monospace;border:2px solid #4a4aa8;background:#16164a;color:#fff}
body.st-arcade .chip.on{background:#ffd400;color:#000;border-color:#ffd400}
body.st-arcade .search,body.st-arcade .in{border:2px solid #4a4aa8;background:#16164a}
body.st-arcade .help{background:#ff2d75;color:#fff;font:9px 'Press Start 2P',monospace;box-shadow:inset -4px -4px 0 #a3104a,inset 4px 4px 0 #ff86ae,0 0 0 3px #fff}
body.st-arcade .pn{border:4px solid #fff;box-shadow:0 0 0 4px #0b0b2b,0 0 0 8px #3df5ff}
body.st-arcade .pn h2{font:15px/1.5 'Press Start 2P',monospace;color:#ffd400}

/* ---------- Cyberpunk ---------- */
body.st-cyber{color-scheme:dark;--bg:#0a0a0f;--surface:#101018;--surface2:#14141f;--line:#2a2a3a;--fg:#e8f6ff;--muted:#9fc1d4;--accent:#fcee0a;--accent2:#00f0ff;--ink:#000000;--ok:#00ff9f;--warn:#fcee0a;--bad:#ff003c;--font-d:'Orbitron',system-ui,sans-serif;--font-b:'Rajdhani',system-ui,sans-serif;
  font-weight:600;font-size:16px;background-image:linear-gradient(rgb(0 240 255 / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(0 240 255 / .06) 1px,transparent 1px);background-size:28px 28px}
body.st-cyber .app::before{content:'';position:fixed;left:-60px;right:-60px;top:62vh;height:54px;transform:rotate(-8deg);background:repeating-linear-gradient(45deg,#fcee0a 0 18px,#0a0a0f 18px 36px);opacity:.14;pointer-events:none;z-index:-1}
body.st-cyber .top{background:#0a0a0f;border-bottom:2px solid #fcee0a}
body.st-cyber .mono{background:#fcee0a;color:#000;border-radius:0;box-shadow:none;font:900 14px 'Orbitron',sans-serif;clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,25% 100%,0 75%)}
body.st-cyber .brand b{font:800 13px 'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:.08em}
body.st-cyber .chip-bal{border:1px solid #00f0ff;color:#00f0ff;background:transparent;border-radius:0;font:700 13px 'Orbitron',sans-serif;clip-path:polygon(0 0,88% 0,100% 30%,100% 100%,12% 100%,0 70%)}
body.st-cyber .chip-bal i{background:#00f0ff}
body.st-cyber .tab{font:700 12px 'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:.06em}
body.st-cyber .tab.on{background:#fcee0a;color:#000;border-radius:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
body.st-cyber .hero{background:linear-gradient(135deg,#14141f,#0a0a0f);border:1px solid #00f0ff;border-radius:0;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));box-shadow:inset 0 0 40px rgb(0 240 255 / .08)}
body.st-cyber .live{background:#fcee0a;color:#000;border:0;border-radius:0;font:700 10.5px 'Orbitron',sans-serif;clip-path:polygon(0 0,92% 0,100% 40%,100% 100%,8% 100%,0 60%)}
body.st-cyber .live i{background:#000}
body.st-cyber .hero h1{font:900 clamp(32px,7vw,72px)/1.02 'Orbitron',sans-serif;text-transform:uppercase;color:#fff;animation:glitch 3.2s infinite}
@keyframes glitch{0%,86%,100%{transform:none;text-shadow:2px 0 #ff003c,-2px 0 #00f0ff}88%{transform:translate(-3px,1px) skewX(-8deg);text-shadow:-4px 0 #ff003c,4px 0 #00f0ff}90%{transform:translate(3px,-1px);text-shadow:4px 0 #ff003c,-4px 0 #00f0ff}92%{transform:translate(-1px,2px) skewX(6deg)}}
body.st-cyber .hero .tg{color:#9fc1d4}
body.st-cyber .stats b{font-family:'Orbitron',sans-serif;color:#00f0ff}
body.st-cyber .btn{border:0;border-radius:0;font:800 12.5px 'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:.06em;background:#00f0ff;color:#001a1d;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));padding:11px 16px}
body.st-cyber .btn.pri{background:#fcee0a;color:#000}
body.st-cyber .btn.ghost{background:#1a1a26;color:#00f0ff}
body.st-cyber .step,body.st-cyber .panel,body.st-cyber .order{border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));box-shadow:inset 0 2px 0 #00f0ff}
body.st-cyber .step em{color:#fcee0a;font-family:'Orbitron',sans-serif}
body.st-cyber .vh h2{font:900 clamp(18px,3.4vw,24px) 'Orbitron',sans-serif;text-transform:uppercase;color:#fcee0a}
body.st-cyber .vh h2::before{content:'// '}
body.st-cyber .card{background:#101018;border:1px solid #2a2a3a;border-radius:0;box-shadow:inset 0 2px 0 #00f0ff;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
body.st-cyber .card .art:not(.has-media){background:repeating-linear-gradient(-45deg,#14141f 0 10px,#191926 10px 20px)}
body.st-cyber .card .art::after{display:none}
body.st-cyber .card .art h3{font:800 15px 'Orbitron',sans-serif;text-transform:uppercase;text-shadow:0 0 12px rgb(0 240 255 / .6)}
body.st-cyber .tag{background:#ff003c;color:#fff;border:0;border-radius:0;font:700 10px 'Orbitron',sans-serif;text-transform:uppercase}
body.st-cyber .pr b{font:900 22px 'Orbitron',sans-serif;color:#fcee0a}
body.st-cyber .chip{border-radius:0;font:700 11px 'Orbitron',sans-serif;text-transform:uppercase;background:#101018}
body.st-cyber .chip.on{background:#00f0ff;color:#001a1d}
body.st-cyber .search,body.st-cyber .in{border-radius:0;border-color:#2a2a3a}
body.st-cyber .help{background:#fcee0a;color:#000;border-radius:0;font:800 11px 'Orbitron',sans-serif;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));box-shadow:none}
body.st-cyber .pn{border-radius:0;border-top:2px solid #fcee0a}
body.st-cyber .pn h2{font-family:'Orbitron',sans-serif;text-transform:uppercase}

/* ---------- 🎀 Kawaii ---------- */
body.st-kawaii{--bg:#fff4fa;--surface:#ffffff;--surface2:#ffe0ef;--line:#ffc1dd;--fg:#5a3a52;--muted:#7a5a72;--accent:#e0478f;--accent2:#ffb3d6;--ink:#ffffff;--ok:#237a5b;--warn:#b4690e;--bad:#d6336c;--font-d:'Fredoka',system-ui,sans-serif;--font-b:'Fredoka',system-ui,sans-serif;--r:22px;
  font-weight:500;background-image:radial-gradient(#ffd6ea 2.5px,transparent 3px);background-size:26px 26px}
body.st-kawaii .top{background:#ffd6ea;border-bottom:3px dashed #ff9ccb}
body.st-kawaii .mono{background:#fff;border:3px solid #ff9ccb;color:#e0478f;font:700 16px 'Fredoka',sans-serif;box-shadow:none}
body.st-kawaii .brand b{font:700 19px 'Fredoka',sans-serif;color:#c23a7c}
body.st-kawaii .chip-bal{background:#fff;border:2px solid #ffc1dd;color:#a63d70}
body.st-kawaii .chip-bal i{background:#ff7fb6;box-shadow:none}
body.st-kawaii .tab{font-weight:600}
body.st-kawaii .tab.on{background:#fff;color:#c23a7c;border-radius:999px}
body.st-kawaii .hero{background:#fff;border:3px solid #ffc1dd;border-radius:30px;box-shadow:0 8px 0 #ffc1dd}
body.st-kawaii .live{background:#c9f2e3;color:#235040;border:0}
body.st-kawaii .live i{background:#2fb383}
body.st-kawaii .hero h1{font:700 clamp(40px,8vw,80px)/1.02 'Fredoka',sans-serif;color:#e0478f;text-shadow:3px 3px 0 #ffe0ef}
body.st-kawaii .hdeco{display:block;position:absolute;top:14px;right:16px;font-size:34px;animation:sway 3s ease-in-out infinite;z-index:2}
body.st-kawaii .hdeco::before{content:'🎀'}
body.st-kawaii .hdeco i{display:none}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
body.st-kawaii .btn{border:0;border-radius:999px;font:700 15px 'Fredoka',sans-serif;background:#c9f2e3;color:#234f40;box-shadow:0 5px 0 #9fdcc6;transition:transform .06s,box-shadow .06s}
body.st-kawaii .btn.pri{background:#ffb3d6;color:#5a1a3a;box-shadow:0 5px 0 #f28cbc}
body.st-kawaii .btn.ghost{background:#fff;color:#a63d70;box-shadow:0 5px 0 #ffd6ea}
body.st-kawaii .btn:active{transform:translateY(4px);box-shadow:0 1px 0 #f28cbc}
body.st-kawaii .step{background:#fff;border:3px solid #ffd6ea;border-radius:22px}
body.st-kawaii .step em{color:#e0478f}
body.st-kawaii .vh h2{color:#e0478f}
body.st-kawaii .vh h2::after{content:' ♡'}
body.st-kawaii .card{background:#fff;border:3px solid #ffd6ea;border-radius:26px;box-shadow:0 8px 0 #ffd6ea}
body.st-kawaii .card .art:not(.has-media){background:#ffe0ef;color:#5a3a52}
body.st-kawaii .card:nth-child(4n+2) .art:not(.has-media){background:#e0f0ff}
body.st-kawaii .card:nth-child(4n+3) .art:not(.has-media){background:#fff3c9}
body.st-kawaii .card:nth-child(4n+4) .art:not(.has-media){background:#dcf7ec}
body.st-kawaii .card .art:not(.has-media) h3{text-shadow:none;color:#5a3a52;font:700 20px 'Fredoka',sans-serif}
body.st-kawaii .card .art::after{border-color:rgb(255 255 255 / .55)}
body.st-kawaii .tag{background:#fff;color:#a63d70;border:2px solid #ffc1dd}
body.st-kawaii .pr b{color:#d23f85}
body.st-kawaii .bar{background:#ffe0ef}
body.st-kawaii .bar i{background:linear-gradient(90deg,#ffb3d6,#e0478f)}
body.st-kawaii .chip{border:2px solid #ffc1dd;background:#fff;color:#a63d70}
body.st-kawaii .chip.on{background:#ffb3d6;color:#5a1a3a;border-color:#ffb3d6}
body.st-kawaii .search,body.st-kawaii .in{border:2px solid #ffc1dd;background:#fff;border-radius:16px}
body.st-kawaii .help{background:#ffb3d6;color:#5a1a3a;box-shadow:0 5px 0 #f28cbc}
body.st-kawaii .pn{border:3px solid #ffc1dd}

/* ---------- 💥 Cómic ---------- */
body.st-comic{--bg:#fff9e8;--surface:#ffffff;--surface2:#fff3c4;--line:#111111;--fg:#111111;--muted:#3d3d3d;--accent:#e8262b;--accent2:#ffe600;--ink:#111111;--ok:#1d6e3a;--warn:#a35400;--bad:#e8262b;--font-d:'Bangers',system-ui,sans-serif;--font-b:'Comic Neue',system-ui,sans-serif;
  font-weight:700;background-image:radial-gradient(rgb(232 38 43 / .16) 2px,transparent 2.5px);background-size:12px 12px}
body.st-comic .top{background:#e8262b;border-bottom:4px solid #111}
body.st-comic .tabs{border-top:2px solid #111}
body.st-comic .tab{color:#fff;font:18px 'Bangers',sans-serif;letter-spacing:.05em}
body.st-comic .tab.on{background:#ffe600;color:#111;border:2px solid #111}
body.st-comic .mono{background:#ffe600;border:3px solid #111;color:#111;font:18px 'Bangers',sans-serif;box-shadow:none}
body.st-comic .brand b{font:24px 'Bangers',sans-serif;letter-spacing:.05em;color:#fff;text-shadow:2px 2px 0 #111}
body.st-comic .chip-bal{background:#fff;border:3px solid #111;color:#111;font:19px 'Bangers',sans-serif;letter-spacing:.04em}
body.st-comic .chip-bal i{background:#e8262b;box-shadow:none}
body.st-comic .top .btn{background:#fff;color:#111}
body.st-comic .hero{background-color:#2db7ff;background-image:radial-gradient(rgb(0 0 0 / .16) 2px,transparent 2.5px);background-size:10px 10px;border:4px solid #111;border-radius:4px;box-shadow:7px 7px 0 #111;margin-right:7px}
body.st-comic .live{position:relative;background:#fff;border:3px solid #111;border-radius:18px;color:#111;font:700 13px 'Comic Neue',sans-serif;letter-spacing:0}
body.st-comic .live::after{content:'';position:absolute;left:22px;bottom:-13px;border:6px solid transparent;border-top:9px solid #111}
body.st-comic .live i{background:#e8262b}
body.st-comic .hero h1{font:clamp(54px,11vw,110px)/.95 'Bangers',sans-serif;letter-spacing:.03em;color:#ffe600;-webkit-text-stroke:2px #111;text-shadow:4px 4px 0 #111}
body.st-comic .hero .tg{display:inline-block;background:#fff;border:2px solid #111;padding:6px 10px;color:#111}
body.st-comic .hero .now,body.st-comic .stats span,body.st-comic .ticker span{color:#111}
body.st-comic .hero .now b{color:#fff;-webkit-text-stroke:.5px #111;text-shadow:1px 1px 0 #111}
body.st-comic .stats b{font-family:'Bangers',sans-serif;color:#fff;text-shadow:2px 2px 0 #111;letter-spacing:.04em}
body.st-comic .ticker{border-color:#111}
body.st-comic .hdeco{display:grid;place-items:center;position:absolute;top:10px;right:10px;width:92px;height:92px;z-index:2;font:26px 'Bangers',sans-serif;color:#e8262b;background:#ffe600;clip-path:polygon(50% 0,61% 30%,95% 15%,75% 45%,100% 60%,68% 68%,78% 100%,50% 78%,22% 100%,32% 68%,0 60%,25% 45%,5% 15%,39% 30%);animation:pow 1.6s ease-in-out infinite}
body.st-comic .hdeco::before{content:'¡POW!'}
body.st-comic .hdeco i{display:none}
@keyframes pow{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(12deg) scale(1.12)}}
body.st-comic .btn{border:3px solid #111;box-shadow:4px 4px 0 #111;border-radius:6px;font:20px 'Bangers',sans-serif;letter-spacing:.05em;color:#111;background:#fff}
body.st-comic .btn.pri{background:#ffe600;color:#111}
body.st-comic .btn:active{transform:translate(4px,4px);box-shadow:none}
body.st-comic .step{background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #111;border-radius:4px}
body.st-comic .step em{color:#e8262b;font-family:'Bangers',sans-serif;font-size:26px}
body.st-comic .vh h2{font:clamp(30px,5vw,40px) 'Bangers',sans-serif;letter-spacing:.04em;color:#e8262b;-webkit-text-stroke:1.5px #111}
body.st-comic .card{background:#fff;border:4px solid #111;box-shadow:7px 7px 0 #111;border-radius:4px}
body.st-comic .card .art{border-bottom:4px solid #111}
body.st-comic .card .art:not(.has-media){background-color:#ff5fa2;background-image:radial-gradient(rgb(0 0 0 / .18) 2px,transparent 2.5px);background-size:10px 10px}
body.st-comic .card:nth-child(3n+2) .art:not(.has-media){background-color:#ffe600}
body.st-comic .card:nth-child(3n+3) .art:not(.has-media){background-color:#7ee081}
body.st-comic .card .art::after{display:none}
body.st-comic .card .art h3{font:26px 'Bangers',sans-serif;letter-spacing:.04em;color:#fff;-webkit-text-stroke:1.2px #111;text-shadow:3px 3px 0 #111}
body.st-comic .tag{background:#111;color:#ffe600;border:0;font:15px 'Bangers',sans-serif;letter-spacing:.05em}
body.st-comic .pr b{font:30px 'Bangers',sans-serif;color:#e8262b;text-shadow:2px 2px 0 #111;letter-spacing:.03em}
body.st-comic .bar{background:#fff;border:2px solid #111}
body.st-comic .bar i{background:#e8262b}
body.st-comic .chip{border:2px solid #111;background:#fff;color:#111;font:17px 'Bangers',sans-serif;letter-spacing:.04em}
body.st-comic .chip.on{background:#ffe600;color:#111}
body.st-comic .search,body.st-comic .in{border:3px solid #111;border-radius:6px;background:#fff}
body.st-comic .help{background:#ffe600;color:#111;border:3px solid #111;box-shadow:4px 4px 0 #111;font:18px 'Bangers',sans-serif;letter-spacing:.05em}
body.st-comic .pn{border:4px solid #111}
body.st-comic .pn h2{font:28px 'Bangers',sans-serif;letter-spacing:.04em;color:#e8262b}

/* ---------- Hacker ---------- */
body.st-hacker{color-scheme:dark;--bg:#020a02;--surface:#031103;--surface2:#031a06;--line:#1f8a3a;--fg:#33ff66;--muted:#8fdca6;--accent:#33ff66;--accent2:#d9ff4d;--ink:#021002;--ok:#33ff66;--warn:#d9ff4d;--bad:#ff5f5f;--font-d:'VT323',ui-monospace,monospace;--font-b:'JetBrains Mono',ui-monospace,monospace;--r:2px;font-size:14px}
body.st-hacker .app::after{content:'';position:fixed;inset:0;z-index:35;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .18) 0 1px,transparent 1px 3px)}
body.st-hacker .top{background:#031103;border-bottom:1px dashed #1f8a3a}
body.st-hacker .mono{background:#031103;border:1px solid #33ff66;color:#33ff66;font:22px 'VT323',monospace;border-radius:2px;box-shadow:0 0 10px rgb(51 255 102 / .3)}
body.st-hacker .brand b{font:24px 'VT323',monospace;text-transform:lowercase;font-weight:400}
body.st-hacker .brand b::before{content:'root@'}
body.st-hacker .chip-bal{font:22px 'VT323',monospace;border-radius:2px;background:transparent;border:1px solid #1f8a3a}
body.st-hacker .chip-bal i{display:none}
body.st-hacker .chip-bal::before{content:'['}body.st-hacker .chip-bal::after{content:']'}
body.st-hacker .tab{font:20px 'VT323',monospace;text-transform:lowercase}
body.st-hacker .tab.on{background:#33ff66;color:#021002;border-radius:0}
body.st-hacker .hero,body.st-hacker .card,body.st-hacker .step,body.st-hacker .panel,body.st-hacker .order,body.st-hacker .pn{background:rgb(2 16 2 / .9);border:1px solid #1f8a3a;border-radius:2px;box-shadow:0 0 18px rgb(51 255 102 / .15)}
body.st-hacker .live{background:none;border:0;padding:0;color:#9dffb5;font:20px 'VT323',monospace;text-transform:none;letter-spacing:0}
body.st-hacker .live i{display:none}
body.st-hacker .live::before{content:'> '}
body.st-hacker .hero h1{font:clamp(52px,10vw,100px)/1 'VT323',monospace;color:#33ff66;text-shadow:0 0 8px #33ff66;letter-spacing:0}
body.st-hacker .hero h1::after{content:'█';animation:blink 1s steps(1) infinite;margin-left:6px}
body.st-hacker .hero .tg{font:22px/1.15 'VT323',monospace;color:#8fdca6}
body.st-hacker .hero .tg::before{content:'// '}
body.st-hacker .stats b{font:28px 'VT323',monospace;color:#d9ff4d}
body.st-hacker .btn{border-radius:0;font:21px/1.1 'VT323',monospace;text-transform:lowercase;background:transparent;color:#33ff66;border:1px solid #33ff66}
body.st-hacker .btn.pri{border:0;background:#33ff66;color:#021002;box-shadow:0 0 14px rgb(51 255 102 / .45)}
body.st-hacker :is(.hero,.card) .btn::before{content:'[ '}body.st-hacker :is(.hero,.card) .btn::after{content:' ]'}
body.st-hacker .step em{font:26px 'VT323',monospace;color:#d9ff4d}
body.st-hacker .vh h2{font:30px 'VT323',monospace;text-transform:lowercase;color:#33ff66}
body.st-hacker .vh h2::before{content:'$ ls '}body.st-hacker .vh h2::after{content:'/'}
body.st-hacker .card .art:not(.has-media){background:#031a06;border-bottom:1px dashed #1f8a3a}
body.st-hacker .card .art::after{display:none}
body.st-hacker .card .art h3{font:28px 'VT323',monospace;color:#33ff66;text-shadow:0 0 8px rgb(51 255 102 / .6)}
body.st-hacker .tag{background:#33ff66;color:#021002;border:0;border-radius:0;font:16px 'VT323',monospace}
body.st-hacker .pr b{font:32px 'VT323',monospace;color:#d9ff4d}
body.st-hacker .bar{background:#031a06;border:1px solid #1f8a3a}
body.st-hacker .bar i{background:#33ff66}
body.st-hacker .chip{border-radius:0;font:19px 'VT323',monospace;background:transparent;border-color:#1f8a3a;color:#33ff66}
body.st-hacker .chip.on{background:#33ff66;color:#021002}
body.st-hacker .search,body.st-hacker .in{border-radius:0;background:#031103;border-color:#1f8a3a;color:#33ff66}
body.st-hacker .help{background:#33ff66;color:#021002;border-radius:0;font:20px 'VT323',monospace;box-shadow:0 0 14px rgb(51 255 102 / .45)}
body.st-hacker .pn h2{font:30px 'VT323',monospace;font-weight:400}

/* ---------- Plastilina ---------- */
body.st-clay{--bg:#f1e6ff;--surface:#f1e6ff;--surface2:#e9dcff;--line:transparent;--fg:#3b2a55;--muted:#5a4772;--accent:#8a5cf6;--accent2:#ff8fc8;--ink:#2a1a45;--ok:#1d7a52;--warn:#a35a00;--bad:#c2335f;--font-d:'Fredoka',system-ui,sans-serif;--font-b:'Fredoka',system-ui,sans-serif;font-weight:500;
  --clay:10px 10px 22px rgb(150 110 200 / .35),-8px -8px 18px rgb(255 255 255 / .95),inset 6px 6px 12px rgb(255 255 255 / .7),inset -6px -6px 12px rgb(150 110 200 / .22);
  --clay-s:5px 5px 12px rgb(150 110 200 / .32),-4px -4px 10px rgb(255 255 255 / .95),inset 3px 3px 6px rgb(255 255 255 / .7),inset -3px -3px 6px rgb(150 110 200 / .2)}
body.st-clay .top{background:#f1e6ff;border:0;margin:10px 12px 0;border-radius:30px;box-shadow:var(--clay);top:calc(10px + env(safe-area-inset-top,0px));-webkit-backdrop-filter:none;backdrop-filter:none}
body.st-clay .tabs{border-top:0}
body.st-clay .tab.on{background:#fff3c4;border-radius:999px;box-shadow:var(--clay-s)}
body.st-clay .mono{background:#ffc8e3;color:#3b2a55;font:700 17px 'Fredoka',sans-serif;box-shadow:var(--clay-s)}
body.st-clay .brand b{font:700 19px 'Fredoka',sans-serif}
body.st-clay .chip-bal{background:#d7f7e8;border:0;color:#1d5a40;box-shadow:var(--clay-s)}
body.st-clay .chip-bal i{background:#2fb383;box-shadow:none}
body.st-clay .hero{background:#ffd9ec;border:0;border-radius:34px;box-shadow:var(--clay);padding-top:clamp(92px,12vw,110px)}
body.st-clay .hdeco{display:block;position:absolute;top:18px;left:clamp(20px,4vw,40px);height:64px;z-index:2}
body.st-clay .hdeco i{position:absolute;top:0;width:62px;height:56px;border-radius:50% 50% 46% 46%;box-shadow:inset 4px 4px 8px rgb(255 255 255 / .7),inset -5px -5px 10px rgb(0 0 0 / .12),4px 6px 12px rgb(150 110 200 / .3);animation:hop 1.7s ease-in-out infinite}
body.st-clay .hdeco i::before,body.st-clay .hdeco i::after{content:'';position:absolute;top:20px;width:8px;height:10px;border-radius:50%;background:#3b2a55}
body.st-clay .hdeco i::before{left:18px}body.st-clay .hdeco i::after{left:36px}
body.st-clay .hdeco i:nth-child(1){left:0;background:#b9a2ff}
body.st-clay .hdeco i:nth-child(2){left:76px;background:#8fe3c1;animation-delay:-.4s}
body.st-clay .hdeco i:nth-child(3){left:152px;background:#ffd36b;animation-delay:-.8s}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-14px) scale(.95,1.06)}55%{transform:translateY(0) scale(1.1,.88)}70%{transform:scale(.97,1.03)}}
body.st-clay .live{background:#fff;border:0;color:#3b2a55;box-shadow:var(--clay-s)}
body.st-clay .live i{background:#2fb383}
body.st-clay .hero h1{font:700 clamp(38px,8vw,78px)/1.02 'Fredoka',sans-serif;color:#3b2a55;text-shadow:2px 3px 0 rgb(255 255 255 / .8)}
body.st-clay .hero .tg{color:#5a4772}
body.st-clay .btn{border:0;border-radius:999px;background:#fff3c4;color:#2a1a45;font:700 15px 'Fredoka',sans-serif;box-shadow:var(--clay-s);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
body.st-clay .btn.pri{background:#c9b2ff;color:#2a1a45;box-shadow:var(--clay-s)}
body.st-clay .btn:active{transform:scale(.9,.84);transition-duration:.1s}
body.st-clay :is(.step,.panel,.order,.empty,.refbox){background:#f1e6ff;border:0;border-radius:28px;box-shadow:var(--clay)}
body.st-clay .step em{color:#8a5cf6}
body.st-clay .card{background:#f1e6ff;border:0;border-radius:30px;box-shadow:var(--clay)}
body.st-clay .card .art{margin:10px 10px 0;border-radius:24px;box-shadow:inset 4px 4px 10px rgb(255 255 255 / .6),inset -4px -4px 10px rgb(150 110 200 / .18)}
body.st-clay .card .art:not(.has-media){background:#ffd9ec;color:#3b2a55}
body.st-clay .card:nth-child(4n+2) .art:not(.has-media){background:#d7f7e8}
body.st-clay .card:nth-child(4n+3) .art:not(.has-media){background:#fff3c4}
body.st-clay .card:nth-child(4n+4) .art:not(.has-media){background:#dbe8ff}
body.st-clay .card .art::after{display:none}
body.st-clay .card .art:not(.has-media) h3{color:#3b2a55;text-shadow:none;font:700 20px 'Fredoka',sans-serif}
body.st-clay .tag{background:rgb(255 255 255 / .75);color:#3b2a55;border:0}
body.st-clay .pr b{color:#3b2a55}
body.st-clay .bar{background:#e2d4fb;box-shadow:inset 2px 2px 4px rgb(150 110 200 / .3)}
body.st-clay .bar i{background:linear-gradient(90deg,#c9b2ff,#8a5cf6)}
body.st-clay .chip{border:0;background:#f1e6ff;color:#3b2a55;box-shadow:var(--clay-s)}
body.st-clay .chip.on{background:#c9b2ff;color:#2a1a45}
body.st-clay .search,body.st-clay .in{border:0;background:#f1e6ff;box-shadow:inset 4px 4px 8px rgb(150 110 200 / .25),inset -4px -4px 8px rgb(255 255 255 / .9);border-radius:18px}
body.st-clay .help{background:#c9b2ff;color:#2a1a45;box-shadow:var(--clay-s)}
body.st-clay .pn{background:#f1e6ff;border:0}
body.st-clay .qty{box-shadow:var(--clay-s);border:0}

/* vistas de cada piel en Apariencia */
.stp-arcade .stp{background-color:#0b0b2b;background-image:linear-gradient(45deg,#1a1a4a 25%,transparent 25%,transparent 75%,#1a1a4a 75%),linear-gradient(45deg,#1a1a4a 25%,transparent 25%,transparent 75%,#1a1a4a 75%);background-size:12px 12px;background-position:0 0,6px 6px;border:3px solid #fff}
.stp-arcade .stp::after{content:'PRESS ▶';position:absolute;left:8px;bottom:8px;font:9px 'Press Start 2P',monospace;color:#ffd400;text-shadow:2px 2px 0 #ff2d75}
.stp-cyber .stp{background:#0a0a0f;border:1px solid #00f0ff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.stp-cyber .stp::before{content:'';position:absolute;left:-10px;right:-10px;bottom:6px;height:12px;transform:rotate(-6deg);background:repeating-linear-gradient(45deg,#fcee0a 0 8px,#0a0a0f 8px 16px);opacity:.7}
.stp-cyber .stp::after{content:'CYBER';position:absolute;left:8px;top:8px;font:900 15px 'Orbitron',sans-serif;color:#fff;text-shadow:2px 0 #ff003c,-2px 0 #00f0ff}
.stp-kawaii .stp{background:#fff4fa;background-image:radial-gradient(#ffd6ea 2px,transparent 2.5px);background-size:12px 12px;border:2px solid #ffc1dd}
.stp-kawaii .stp::after{content:'🎀 💖 🌸';position:absolute;left:10px;bottom:8px;font-size:17px}
.stp-comic .stp{background-color:#2db7ff;background-image:radial-gradient(rgb(0 0 0 / .18) 1.5px,transparent 2px);background-size:7px 7px;border:3px solid #111;box-shadow:3px 3px 0 #111}
.stp-comic .stp::after{content:'¡POW!';position:absolute;right:8px;top:6px;font:22px 'Bangers',sans-serif;color:#ffe600;-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 #111}
.stp-hacker .stp{background:#020a02;border:1px solid #1f8a3a}
.stp-hacker .stp::after{content:'> root@_';position:absolute;left:8px;bottom:6px;font:20px 'VT323',monospace;color:#33ff66;text-shadow:0 0 6px #33ff66}
.stp-clay .stp{background:#f1e6ff;box-shadow:inset 4px 4px 8px rgb(255 255 255 / .8),inset -4px -4px 8px rgb(150 110 200 / .3)}
.stp-clay .stp::before,.stp-clay .stp::after{content:'';position:absolute;bottom:8px;width:34px;height:30px;border-radius:50% 50% 46% 46%;box-shadow:inset 3px 3px 5px rgb(255 255 255 / .7),inset -3px -3px 6px rgb(0 0 0 / .12)}
.stp-clay .stp::before{left:12px;background:#b9a2ff}.stp-clay .stp::after{left:54px;background:#8fe3c1}

/* ---------- entrada de rompecabezas ---------- */
.pz{position:fixed;inset:0;z-index:70;overflow:hidden;transition:opacity .45s}
.pz.out{opacity:0;pointer-events:none}
.pzback{position:absolute;inset:0;background:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--fg) 10%,transparent) 1.5px,transparent 2px);background-size:22px 22px}
.pzwrap{position:absolute;inset:0}
.pzp{position:absolute;filter:drop-shadow(0 0 .7px rgb(255 255 255 / .95)) drop-shadow(0 3px 5px rgb(0 0 0 / .45));will-change:transform,opacity}
.pz.done .pzp{filter:none}
.pzclip{position:absolute;inset:0;overflow:hidden}
.pzin{position:absolute;overflow:hidden}
.pzsnap,.pzsnap *{animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pzbar{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(420px,calc(100% - 28px));display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:16px;background:rgb(10 6 20 / .88);border:1px solid rgb(255 255 255 / .16);color:#fff;transition:opacity .3s}
.pz.done .pzbar{opacity:0}
.pzrow{display:flex;align-items:center;gap:10px}
.pzrow span{flex:1;font:600 14px var(--font-b)}
.pzrow button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:#ffd23f;color:#1b1035;font:700 13.5px var(--font-b);cursor:pointer}
.pztr{height:4px;border-radius:2px;background:rgb(255 255 255 / .15);overflow:hidden}
.pztr i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd23f,#ff5fd2);transition:width .15s linear}
/* barra superior de las pieles con letras grandes: que quepa el nombre en el celular */
body.st-comic .top .btn{font-size:17px;padding:5px 10px;box-shadow:3px 3px 0 #111}
body.st-comic .brand b{font-size:22px}
body.st-hacker .top .btn{font-size:18px;padding:4px 10px}
body.st-hacker .brand b{font-size:21px}
body.st-arcade .top .btn{font-size:8px;padding:9px 10px}
@media (max-width:420px){body:is(.st-arcade,.st-hacker,.st-comic,.st-cyber) .top .btn.sm{padding-left:8px;padding-right:8px}}

/* =====================================================================
   Entrega 3 · Formas de tienda
   ===================================================================== */
body.layfix{overflow:hidden}
body.layfix main{padding:0;min-height:0}
.lay{position:fixed;left:0;right:0;top:var(--lay-top,64px);bottom:0;z-index:2;overflow:hidden}
.lay .shade{background:linear-gradient(180deg,rgb(0 0 0 / .12),rgb(0 0 0 / .7))}
body:is(.lay-chat,.lay-stories,.lay-vending,.lay-desktop) #help{display:none!important}

/* ---------- Immersive ---------- */
.imm{background:#050505;color:#fff}
.imsc{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.imsc::-webkit-scrollbar{display:none}
.ims{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;color:#fff}
.imbg{position:absolute;inset:0}
.ims0{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:var(--fg);background:radial-gradient(70% 55% at 50% 42%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 70%),radial-gradient(60% 50% at 80% 90%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%),var(--bg)}
.ims0 .imbg{opacity:.5}
.ims0>*:not(.imbg):not(.imdown){position:relative;z-index:1}
.imword{margin:0;font:var(--tw,800) clamp(54px,16vw,170px)/.95 var(--font-t,var(--font-d));letter-spacing:-.02em;transform:translateY(calc(var(--o,0) * 140px)) scale(calc(1 - var(--o,0) * .3));text-wrap:balance}
.imsub{margin:0;font-size:clamp(16px,2.4vw,20px);color:var(--muted);max-width:40ch}
.imdown{position:absolute;bottom:26px;left:0;right:0;text-align:center;font:600 12px var(--font-b);letter-spacing:.24em;text-transform:uppercase;opacity:.75;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(8px)}}
.imbig{position:absolute;left:50%;top:44%;font:900 min(120vw,95vh)/.8 var(--font-t,var(--font-d));color:rgb(255 255 255 / .13);transform:translate(-50%,-50%) translateY(calc(var(--o,0) * -200px)) rotate(calc(var(--o,0) * -10deg));pointer-events:none;z-index:0}
.imnum{position:absolute;left:22px;top:18px;margin:0;font:600 12.5px var(--font-b);letter-spacing:.2em;opacity:.85;z-index:1}
.ims0 .imnum{position:static}
.imtx{position:absolute;left:22px;right:56px;bottom:clamp(28px,6vh,64px);display:flex;flex-direction:column;gap:10px;max-width:680px;z-index:1;transform:translateY(calc(var(--o,0) * 80px));opacity:calc(1 - var(--o,0) * var(--o,0) * 1.6)}
.imchip{align-self:flex-start;padding:6px 12px;border-radius:999px;border:1px solid rgb(255 255 255 / .55);background:rgb(0 0 0 / .18);font:600 13px var(--font-b)}
.imname{margin:0;font:var(--tw,800) clamp(38px,10.5vw,96px)/.95 var(--font-t,var(--font-d));text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 4px 30px rgb(0 0 0 / .35);text-wrap:balance}
.imdesc{margin:0;font-size:16px;opacity:.9;max-width:46ch}
.imrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.impr{font:var(--tw,800) clamp(28px,8vw,52px)/1 var(--font-t,var(--font-d))}
.imst{opacity:.85;font-weight:600}
.imbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.imm .btn.imbtn{min-height:50px;padding:0 24px;border-radius:999px;font-size:15px}
.imm .btn.imbtn.pri{background:#fff;color:#000;border:0;box-shadow:none}
.imm .btn.imbtn.ghost{background:transparent;color:#fff;border:1px solid rgb(255 255 255 / .6)}
.imsend{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:28px;color:var(--fg);background:radial-gradient(60% 50% at 20% 30%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 70%),var(--bg)}
.imend{margin:0;font:var(--tw,800) clamp(46px,13vw,120px)/.92 var(--font-t,var(--font-d));text-transform:uppercase;transform:translateX(calc(var(--o,0) * -60px))}
.imsend .btn.imbtn.pri{background:var(--fg);color:var(--bg)}
.imsend .btn.imbtn.ghost{color:var(--fg);border-color:var(--line)}
.imdots{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:3}
.imdot{width:28px;height:22px;border:0;background:none;display:grid;place-items:center;padding:0}
.imdot::after{content:'';width:6px;height:6px;border-radius:3px;background:rgb(255 255 255 / .45);box-shadow:0 0 0 1px rgb(0 0 0 / .2);transition:height .3s,background .3s}
.imdot.on::after{height:18px;background:#fff}
.improg{position:absolute;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:3}
.imlogo{margin:0 0 4px}

/* ---------- Bento ---------- */
.bento .bgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:84px;gap:10px;grid-auto-flow:dense}
@media (min-width:760px){.bento .bgrid{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:100px}}
.bt{position:relative;overflow:hidden;min-width:0;border-radius:22px;border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;text-align:left;color:#fff;font:inherit;background:var(--surface);animation:bin .5s cubic-bezier(.2,1.3,.4,1) var(--d,0ms) both;transition:transform .2s}
button.bt{cursor:pointer}
button.bt:active{transform:scale(.97)}
@keyframes bin{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}}
.bt-b{grid-column:span 2;grid-row:span 2}
.bt-s{grid-column:span 2}
.bt-w{grid-column:span 4}
.bt-hero{grid-column:1/-1;grid-row:span 3;color:var(--fg);justify-content:flex-end;gap:8px;padding:18px;background:radial-gradient(60% 80% at 85% 20%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 70%),radial-gradient(50% 70% at 10% 100%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%),var(--surface)}
@media (min-width:760px){.bt-hero{grid-column:span 4}.bhead .bt-s{grid-column:span 2;grid-row:span 3}}
.bt-hero>*:not(.media):not(.shade){position:relative;z-index:1}
.bt-hero .live{align-self:flex-start}
.bt-hero h1{font:var(--tw,800) clamp(32px,8vw,60px)/1 var(--font-t,var(--font-d));letter-spacing:-.01em}
.bt-hero .tg{color:var(--muted)}
.bt-hero .cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bt-hero .shade{background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 40%,transparent))}
.bt.info{color:var(--fg);background:var(--surface)}
.bt.info.alt{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.bt.ink{background:var(--accent);color:var(--ink);border-color:transparent}
.bk,.bv,.bs{position:relative;z-index:1}
.bk{font:700 11px var(--font-b);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.bv{font:var(--tw,800) 18px/1.08 var(--font-t,var(--font-d));overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 2px 12px rgb(0 0 0 / .25)}
.bt.info .bv{text-shadow:none}
.bt-b .bv{font-size:24px}
.bt-w .bv{font-size:22px}
.bento .bhead{grid-auto-rows:minmax(84px,auto)}
.bhead .bt-s .bv{font-size:24px}
.bs{font-size:12.5px;opacity:.92}
.bl{position:absolute;right:-6px;bottom:-24px;font:900 130px/1 var(--font-t,var(--font-d));color:rgb(255 255 255 / .18);pointer-events:none;z-index:0}
.bt-w .bl{font-size:96px;bottom:-16px}
.bt.out{filter:grayscale(.6);opacity:.7}
.bt.has-media .bk,.bt.has-media .bv,.bt.has-media .bs{text-shadow:0 1px 8px rgb(0 0 0 / .6)}

/* ---------- Historias ---------- */
.story{background:#000;color:#fff;-webkit-user-select:none;user-select:none}
.stin{position:absolute;top:0;bottom:0;left:50%;width:min(520px,100%);transform:translateX(-50%);overflow:hidden}
.stbg{position:absolute;inset:0;transition:background .45s}
.st0{background:radial-gradient(70% 50% at 50% 30%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),radial-gradient(60% 50% at 70% 90%,color-mix(in srgb,var(--accent2) 35%,transparent),transparent 70%),#0b0b10}
.stbig{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:900 min(78vw,300px)/1 var(--font-t,var(--font-d));color:rgb(255 255 255 / .14);pointer-events:none}
.stbars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:3px;z-index:3}
.stbar{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255 / .35);overflow:hidden}
.fill{display:block;height:100%;width:0;background:#fff}
.fill.done{width:100%}
.fill.run{animation:fillw 5s linear forwards}
@keyframes fillw{to{width:100%}}
.paused .fill.run{animation-play-state:paused}
.sthd{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:4}
.sthd>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.sthd b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sthd span{font-size:12.5px;opacity:.85}
.stav{width:36px!important;height:36px!important;box-shadow:0 0 0 2px #fff}
.story .btn.stall{background:rgb(0 0 0 / .35);border-color:rgb(255 255 255 / .4);color:#fff;box-shadow:none}
.stzone{position:absolute;top:70px;bottom:92px;z-index:2;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stzone.l{left:0;width:34%}.stzone.r{right:0;width:66%}
.stbody{position:absolute;left:20px;right:20px;bottom:96px;display:flex;flex-direction:column;gap:10px;z-index:3;pointer-events:none;animation:stin .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes stin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.stchip{align-self:flex-start;padding:6px 12px;border-radius:999px;background:rgb(0 0 0 / .35);font-weight:700;font-size:13px}
.stname{margin:0;font:var(--tw,800) clamp(30px,9vw,46px)/1.02 var(--font-t,var(--font-d));text-shadow:0 2px 20px rgb(0 0 0 / .3)}
.stdesc{margin:0;font-size:16px;opacity:.92}
.stprice{font:var(--tw,800) 32px var(--font-t,var(--font-d))}
.stft{position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;z-index:4}
.story .btn.stbuy{min-height:50px;padding:0 22px;border-radius:999px;background:#fff;color:#000;border:0;font-weight:800;box-shadow:none}
.story .btn.stmsg{flex:1;min-height:48px;border-radius:999px;background:transparent;border:1px solid rgb(255 255 255 / .6);color:#fff;box-shadow:none}

/* ---------- Chat ---------- */
.lay.chat{display:flex;flex-direction:column;background:var(--bg);color:var(--fg)}
.chat>*{width:min(760px,100%);margin-inline:auto}
.chd{flex:none;height:60px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.chd .cav{width:40px;height:40px}
.chd div{display:flex;flex-direction:column;line-height:1.2}
.chd span{font-size:12.5px;color:var(--ok)}
.cbody{flex:1;min-height:0;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1.5px);background-size:16px 16px}
.cm{max-width:82%;padding:9px 12px 18px;border-radius:16px;position:relative;font-size:15px;line-height:1.38;overflow-wrap:anywhere}
.cm.nw,.ccards.nw{animation:cin .3s ease both}
.cm.bot{align-self:flex-start;background:var(--surface2);border-top-left-radius:4px}
.cm.me{align-self:flex-end;background:var(--accent);color:var(--ink);border-top-right-radius:4px}
.ctime{position:absolute;right:10px;bottom:3px;font-size:10.5px;opacity:.7}
.cbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;border-radius:16px;background:var(--surface2)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:td 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes cin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.ccards{flex:none;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.ccard{flex:none;width:158px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px}
.cct{height:78px;border-radius:12px;display:grid;place-items:center;font:900 30px var(--font-t,var(--font-d));color:#fff}
.ccard b{font-size:14px;line-height:1.2}
.ccard span{font-size:12.5px;color:var(--muted)}
.cchips{flex:none;display:flex;gap:8px;align-items:center;padding:8px 12px;overflow-x:auto;min-height:56px;scrollbar-width:none}
.cchips::-webkit-scrollbar,.ccards::-webkit-scrollbar{display:none}
.cchips button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg);font:600 14px var(--font-b);animation:cin .3s ease both}
.cinput{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.cin{flex:1;min-width:0;min-height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--fg);padding:0 16px;outline:none}
.cin:focus{border-color:var(--accent)}
.csend{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--ink);display:grid;place-items:center}
.csend .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Escritorio retro ---------- */
.retro{background:#0f7f80;font:13px Tahoma,Verdana,'Segoe UI',sans-serif;color:#000}
.rdesk{position:absolute;inset:0;overflow:hidden}
.ricons{position:absolute;top:8px;left:4px;bottom:50px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;align-content:flex-start}
.ricon{width:82px;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#fff;cursor:pointer;padding:5px 2px;font:inherit}
.ricon:focus-visible .rlab,.ricon:active .rlab{background:#000080}
.rimg{font-size:32px;line-height:1;filter:drop-shadow(1px 1px 0 rgb(0 0 0 / .4))}
.rlab{font-size:12px;text-shadow:1px 1px 0 #000;padding:1px 3px;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwin{position:absolute;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #dfdfdf,4px 4px 0 rgb(0 0 0 / .25);display:flex;flex-direction:column;min-width:200px}
.rwin.new{animation:ropen .2s steps(3) both}
@keyframes ropen{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.rtitle{height:28px;flex:none;display:flex;align-items:center;gap:3px;padding:0 3px 0 6px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;touch-action:none;cursor:move;user-select:none;-webkit-user-select:none}
.rwin.off .rtitle{background:linear-gradient(90deg,#808080,#b5b5b5)}
.rtitle span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.rtb{width:26px;height:22px;border:2px solid;border-color:#fff #404040 #404040 #fff;background:#c0c0c0;font:700 12px Tahoma,sans-serif;line-height:1;padding:0;cursor:pointer;color:#000}
.rtb:active,.rbtn:active,.rtaskb.on,.rstart.on{border-color:#404040 #fff #fff #404040}
.rmenu{display:flex;gap:14px;padding:3px 8px;font-size:12.5px}
.rbody{margin:2px 4px 4px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;flex:1;overflow:auto;min-height:0}
.rhead,.rrow{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,.6fr);width:100%;text-align:left;font:12.5px Tahoma,Verdana,sans-serif}
.rhead{position:sticky;top:0}
.rhead span{background:#c0c0c0;border:1px solid;border-color:#fff #808080 #808080 #fff;padding:3px 6px}
.rrow{border:0;background:transparent;padding:6px;cursor:pointer;color:#000}
.rrow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.rrow.sel{background:#000080;color:#fff}
.rfoot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 6px;flex-wrap:wrap}
.rbs{display:flex;gap:6px}
.rbtn{min-width:78px;min-height:32px;padding:0 8px;border:2px solid;border-color:#fff #404040 #404040 #fff;background:#c0c0c0;font:12.5px Tahoma,Verdana,sans-serif;cursor:pointer;color:#000;box-shadow:inset -1px -1px 0 #808080}
.rbtn.pri{font-weight:700;outline:1px solid #000;outline-offset:-4px}
.rbtn[disabled]{color:#808080;text-shadow:1px 1px 0 #fff}
.rstat{font-size:12px;color:#222;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.rnote{margin:0;padding:8px;font:13px/1.45 'Courier New',monospace;white-space:pre-line}
.rbig{padding:18px;text-align:center;font-size:30px}
.rbig b{display:block;font:700 22px Tahoma,sans-serif;margin:6px 0}
.rtask{position:absolute;left:0;right:0;bottom:0;height:44px;background:#c0c0c0;border-top:2px solid #fff;display:flex;align-items:center;gap:4px;padding:0 4px calc(env(safe-area-inset-bottom,0px));z-index:9998;overflow-x:auto}
.rstart{flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 8px;font:700 13px Tahoma,sans-serif;border:2px solid;border-color:#fff #404040 #404040 #fff;background:#c0c0c0;cursor:pointer;color:#000}
.rstart i{width:16px;height:16px;background:conic-gradient(#ff3b3b 0 25%,#3bd16f 0 50%,#3b7bff 0 75%,#ffd23f 0)}
.rtaskb{flex:none;height:34px;max-width:96px;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:2px solid;border-color:#fff #404040 #404040 #fff;background:#c0c0c0;font:12px Tahoma,sans-serif;cursor:pointer;color:#000}
.rclock{margin-left:auto;flex:none;height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid;border-color:#808080 #fff #fff #808080;font-size:12.5px}
.rstartm{position:absolute;left:4px;bottom:46px;z-index:9999;display:flex;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:4px 4px 0 rgb(0 0 0 / .3);min-width:230px;max-height:calc(100% - 60px);animation:ropen .15s steps(2) both}
.rsside{writing-mode:vertical-rl;transform:rotate(180deg);background:linear-gradient(#000080,#1084d0);color:#fff;font:700 15px Tahoma,sans-serif;padding:10px 5px;white-space:nowrap;overflow:hidden}
.rsitems{flex:1;overflow-y:auto;padding:2px}
.rsitems button{display:flex;gap:10px;align-items:center;width:100%;min-height:38px;padding:4px 12px;border:0;background:none;font:13px Tahoma,sans-serif;text-align:left;color:#000;cursor:pointer}
.rsitems button:hover,.rsitems button:focus-visible{background:#000080;color:#fff}

/* ---------- Máquina expendedora ---------- */
.vend{background:radial-gradient(circle at 50% 20%,#3a1240,#120618 70%);display:grid;place-items:center;padding:10px}
#vmw{width:min(460px,100%);height:100%}
.vm{height:100%;border-radius:22px;background:linear-gradient(180deg,#e83a5f,#b0123c);box-shadow:inset 0 2px 0 rgb(255 255 255 / .45),inset 0 -8px 0 rgb(0 0 0 / .25),0 20px 40px rgb(0 0 0 / .5);padding:12px;display:flex;flex-direction:column;gap:10px}
.vsign{height:44px;flex:none;border-radius:12px;background:#1a0710;display:grid;place-items:center;padding:0 10px;font:800 18px var(--font-t,var(--font-d));color:#fff;text-shadow:0 0 6px #ff4fd8,0 0 16px #ff4fd8;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbody{flex:1;display:flex;gap:10px;min-height:0}
.vglass{flex:1;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(135deg,rgb(255 255 255 / .16),rgb(255 255 255 / .03) 60%),#1c0b14;border:3px solid #7a0f2a;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;padding:6px;box-shadow:inset 0 0 22px rgb(0 0 0 / .6)}
.vglass::after{content:'';position:absolute;left:-30%;top:-10%;width:40%;height:130%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .12),transparent);transform:rotate(14deg);pointer-events:none}
.vslot{position:relative;border:0;border-bottom:3px solid #4a0a1c;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:2px 0 4px;cursor:pointer;border-radius:6px;min-height:0;color:#fff}
.vslot.on{background:rgb(255 210 63 / .18);box-shadow:inset 0 0 0 2px #ffd23f}
.vslot.out .vprod{filter:grayscale(.8) brightness(.7)}
.vslot em{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);background:#ff2d55;color:#fff;font:800 9.5px var(--font-b);padding:2px 6px;border-radius:4px;font-style:normal;letter-spacing:.06em}
.vslot.empty{cursor:default}
.vprod{width:clamp(34px,11vw,52px);height:clamp(42px,13.5vw,64px);border-radius:9px;display:grid;place-items:center;font:900 clamp(16px,5vw,22px) var(--font-t,var(--font-d));color:#fff;box-shadow:inset 0 2px 0 rgb(255 255 255 / .4),0 3px 6px rgb(0 0 0 / .45);flex:none}
.vprod.drop{animation:vdrop 1.15s cubic-bezier(.5,0,.8,.4) forwards;position:relative;z-index:5}
@keyframes vdrop{0%{transform:none}14%{transform:translateX(-3px) rotate(-5deg)}28%{transform:translateX(3px) rotate(5deg)}42%{transform:translateY(8px)}100%{transform:translateY(480px) rotate(28deg);opacity:0}}
.vcoil{display:block;width:80%;max-width:52px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,#c9c9d1 0 3px,transparent 3px 7px)}
.vcode{font:700 10px var(--font-b);color:#ffd23f;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vpanel{width:clamp(98px,28vw,124px);flex:none;display:flex;flex-direction:column;gap:8px}
.vdisp{height:64px;flex:none;border-radius:10px;background:#071407;border:2px solid #3a0a18;display:flex;flex-direction:column;justify-content:center;padding:0 8px;font:20px/1.05 'VT323',ui-monospace,monospace;color:#5dff8a;text-shadow:0 0 6px #5dff8a;overflow:hidden}
.vdisp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vkeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.vk{height:36px;border-radius:8px;border:0;background:linear-gradient(180deg,#f2f2f6,#c9c9d3);box-shadow:0 3px 0 #7a7a88;font:800 14px var(--font-b);color:#222;cursor:pointer}
.vk[disabled]{opacity:.45}
.vk:active,.vbuy:active{transform:translateY(2px);box-shadow:0 1px 0 #7a7a88}
.vbuy{min-height:48px;border-radius:10px;border:0;background:linear-gradient(180deg,#ffd23f,#e0a800);box-shadow:0 4px 0 #8a6600;font:800 13px var(--font-b);letter-spacing:.06em;color:#2a1a00;cursor:pointer}
.vbuy[disabled]{filter:grayscale(1);opacity:.7}
.vcoin{height:40px;flex:none;border-radius:8px;background:#2a0a14;display:grid;place-items:center}
.vcoin i{width:8px;height:24px;border-radius:4px;background:#000;box-shadow:inset 0 0 0 1px #555}
.vhelp{border:0;background:rgb(0 0 0 / .25);color:#fff;border-radius:8px;min-height:34px;font:600 12px var(--font-b)}
.vtray{height:clamp(68px,12vh,96px);flex:none;border-radius:14px;border:0;background:#1a0710;box-shadow:inset 0 12px 18px rgb(0 0 0 / .85);display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;color:rgb(255 255 255 / .6);font:700 12px var(--font-b);letter-spacing:.2em}
.vtray .vprod.in{animation:vin .6s cubic-bezier(.3,1.6,.5,1) both}
.vtray span:last-child{letter-spacing:.04em}
@keyframes vin{from{transform:translateY(-40px) rotate(20deg);opacity:0}to{transform:rotate(-8deg);opacity:1}}

/* vistas de cada forma en Apariencia */
.lyp-clasico .stp{background:linear-gradient(var(--surface),var(--surface)) 8px 8px/calc(100% - 16px) 18px no-repeat,repeating-linear-gradient(90deg,var(--surface2) 0 30%,transparent 30% 35%) 8px 32px/calc(100% - 16px) 16px no-repeat,var(--bg)}
.lyp-immersive .stp{background:#050505}
.lyp-immersive .stp::after{content:'TU PRODUCTO';position:absolute;left:8px;bottom:6px;font:900 18px/1 var(--font-d);color:#fff;letter-spacing:-.02em}
.lyp-immersive .stp::before{content:'P';position:absolute;right:6px;top:-14px;font:900 80px/1 var(--font-d);color:rgb(255 255 255 / .14)}
.lyp-bento .stp{background:conic-gradient(from 0deg at 45% 55%,#ff5fd2 0 25%,#7a5cff 0 50%,#ffd23f 0 75%,#22e3ff 0);mask:linear-gradient(#000 0 0) 4px 4px/42% 46px no-repeat,linear-gradient(#000 0 0) 49% 4px/48% 21px no-repeat,linear-gradient(#000 0 0) 49% 29px/48% 21px no-repeat;-webkit-mask:linear-gradient(#000 0 0) 4px 4px/42% 46px no-repeat,linear-gradient(#000 0 0) 49% 4px/48% 21px no-repeat,linear-gradient(#000 0 0) 49% 29px/48% 21px no-repeat}
.lyp-stories .stp{background:linear-gradient(150deg,#ff5fd2,#7a5cff)}
.lyp-stories .stp::before{content:'';position:absolute;top:5px;left:6px;right:6px;height:3px;background:linear-gradient(90deg,#fff 0 30%,rgb(255 255 255 / .4) 30% 32%,rgb(255 255 255 / .4) 32%)}
.lyp-stories .stp::after{content:'Música\A $35';white-space:pre;position:absolute;left:8px;bottom:5px;font:800 13px/1.1 var(--font-d);color:#fff}
.lyp-chat .stp{background:var(--surface2)}
.lyp-chat .stp::before{content:'¡Hola! 👋';position:absolute;left:6px;top:6px;padding:3px 8px;border-radius:10px;background:var(--surface);font-size:11px;color:var(--fg)}
.lyp-chat .stp::after{content:'Quiero una cuenta';position:absolute;right:6px;bottom:6px;padding:3px 8px;border-radius:10px;background:var(--accent);color:var(--ink);font-size:11px}
.lyp-desktop .stp{background:#0f7f80}
.lyp-desktop .stp::before{content:'';position:absolute;left:14px;top:8px;right:22px;height:34px;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 0 9px 0 #000080}
.lyp-desktop .stp::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;background:#c0c0c0;border-top:1px solid #fff}
.lyp-vending .stp{background:linear-gradient(180deg,#e83a5f,#b0123c)}
.lyp-vending .stp::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:62%;border-radius:6px;background:repeating-linear-gradient(90deg,#1c0b14 0 30%,#4a0a1c 30% 33%);border:2px solid #7a0f2a}
.lyp-vending .stp::after{content:'A1';position:absolute;right:8px;top:8px;padding:2px 5px;border-radius:4px;background:#071407;color:#5dff8a;font:12px ui-monospace,monospace}

/* ===== Entrega 4 · Ventas ===== */
/* Tipos de stock: etiqueta en la tarjeta, nota al ver y pagar, y pastilla en Mis compras */
.tag.sty{box-shadow:inset 0 0 0 1.5px var(--tc);white-space:nowrap}
.pill.sty{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 60%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent);vertical-align:1px}
.stynote{margin:8px 0 12px;padding:9px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));background:color-mix(in srgb,var(--tc) 9%,var(--surface));font-size:13.5px;line-height:1.45;color:var(--fg)}
.stynote b{color:color-mix(in srgb,var(--tc) 75%,var(--fg));margin-right:4px}
.parts{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:-2px 0 8px;font-size:12px;font-weight:600}
.parts span{padding:2px 8px;border-radius:8px;background:var(--surface2);border:1px solid var(--line)}
.parts i{font-style:normal;color:var(--muted)}
.stym{display:inline-block;font-size:13px;line-height:1}
/* Editor: qué recibe el cliente */
.stys{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.styopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.styopt em{font-style:normal;font-size:19px;line-height:1.1}
.styopt b{font-size:14px}
.styopt span{font-size:11.5px;line-height:1.3;color:var(--muted)}
.styopt.on{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--surface));box-shadow:0 0 0 1px var(--tc)}
.styopt:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
.form label.inl{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:14px}
.form label.inl .in{width:96px;text-align:center}
.brow{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;gap:8px;align-items:center;margin-bottom:8px}
.brow .in{padding:9px 10px;min-width:0}
.vrow select.in{padding:8px 6px}
/* Stock: cuentas de perfiles */
.li.acc{align-items:center}
.li.acc .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.li.acc .tx b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.li.acc .tx span{font-size:12px;color:var(--muted)}
.li.acc .bar{max-width:220px}
.li.acc .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acctall{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:10px;border:1px dashed color-mix(in srgb,#a78bfa 60%,var(--line));background:color-mix(in srgb,#a78bfa 8%,transparent);font-size:13px}
.linkb{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Estadísticas */
.dlt{display:inline-block;margin-top:2px;font-size:12px;font-weight:700}
.dlt.up{color:var(--ok)} .dlt.dn{color:var(--bad)}
.li.rank em{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;background:var(--surface2);border:1px solid var(--line)}
.li.rank:nth-child(1) em{background:var(--accent);color:var(--ink);border-color:transparent}
.li.rank .tx{display:flex;flex-direction:column;gap:3px}
.li.rank .bar{max-width:260px}
.split{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--surface2);margin:4px 0 8px}
.split i{background:var(--accent);min-width:0}
.split i.tg{background:#2aa3e0}
/* Combos y proveedores: tarjetas */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.combo{border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(160deg,color-mix(in srgb,hsl(var(--h,30) 80% 55%) 12%,var(--surface)),var(--surface) 60%);display:flex;flex-direction:column;gap:8px;min-width:0}
.combo.sup{background:var(--surface)}
.combo .ch{display:flex;align-items:center;justify-content:space-between;gap:8px}
.combo .ch b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.combo .parts{margin:0}
.combo .acts{display:flex;gap:6px;flex-wrap:wrap}
.cpr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cpr b{font:800 22px var(--font-d)}
.cpr s{color:var(--muted);font-size:14px}
.skv{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px}
.skv div{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 9px}
.skv span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.skv b{font-size:14px}
.skv b.ok{color:var(--ok)} .skv b.warn{color:var(--warn)} .skv b.bad{color:var(--bad)}
/* Pedir un producto */
.rqcta{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 14px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.rqcta>span:first-child{font-size:22px}
.rqcta>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.rqcta small{font-size:12.5px;color:var(--muted)}
.rqcta small em{font-style:normal;color:var(--accent);font-weight:700}
.rqcta i{font-style:normal;font-weight:800;color:var(--accent)}
.rqcta.wide{margin:18px 0 4px}
/* Referidos en Saldo */
.refc{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--ok) 9%,var(--surface)),var(--surface) 70%)}
.refc .kv{padding:9px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line);margin:8px 0}
.refc .acts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.inv.pv .tx b{white-space:normal}
.chip .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:9px;font-size:11px;font-weight:800;background:var(--surface2);color:var(--fg)}
.refc .kv .fm{font-size:13px;line-height:1.4}

/* ===== Entrega 5 ===== */
/* Página de ventas de la plataforma */
.sl{display:flex;flex-direction:column;gap:clamp(40px,7vw,80px);padding-bottom:30px}
.sl h1{font:800 clamp(30px,5.4vw,54px)/1.05 var(--font-d);letter-spacing:-.02em;margin:14px 0 14px;text-wrap:balance}
.sl h2{font:800 clamp(24px,3.6vw,36px)/1.1 var(--font-d);letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
.sl-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:center;padding-top:clamp(10px,3vw,30px)}
.sl-copy p{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:56ch;line-height:1.5}
.sl-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.sl-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sl-cta .btn{padding:14px 20px;font-size:16px}
.sl-ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14px}
.sl-ticks li::before{content:'✓ ';color:var(--ok);font-weight:800}
.sl-phone{display:flex;justify-content:center}
.sl-phone .phonef{height:min(70vh,600px);max-width:320px}
.sl-mock{width:100%;max-width:300px;border-radius:30px;border:6px solid #0b0b0f;outline:1px solid var(--line);background:var(--bg);padding:16px 14px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 45%,#000)}
.mk-top{display:flex;align-items:center;gap:8px;font-weight:800}
.mk-top i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.mk-card{border-radius:16px;padding:14px;background:linear-gradient(135deg,hsl(var(--h) 75% 45%),hsl(calc(var(--h) + 40) 70% 30%));color:#fff;display:grid;grid-template-columns:1fr auto;gap:4px;align-items:end}
.mk-card span{grid-column:1/-1;justify-self:start;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgb(0 0 0 / .35)}
.mk-card b{font:800 18px var(--font-d)}
.mk-card em{font-style:normal;font-weight:800;font-size:18px}
.mk-ok{border-radius:14px;padding:10px 12px;background:color-mix(in srgb,var(--ok) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);font-weight:700;font-size:14px}
.sl-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.sl-feat{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.sl-feat em{font-style:normal;font-size:26px}
.sl-feat b{font-size:17px}
.sl-feat span{color:var(--muted);font-size:14.5px;line-height:1.45}
.sl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;counter-reset:s}
.sl-steps div{border-radius:18px;padding:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.sl-steps em{font:800 15px var(--font-d);font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink)}
.sl-steps b{font-size:17px}
.sl-steps span{color:var(--muted);font-size:14.5px}
.sl-lead{color:var(--muted);margin:-8px 0 18px}
.sl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;align-items:stretch}
.sl-plan{position:relative;border:1px solid var(--line);border-radius:20px;padding:22px 18px 18px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.sl-plan.top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 60px -30px color-mix(in srgb,var(--accent) 60%,transparent)}
.sl-plan em{font-style:normal;font-size:28px}
.sl-plan b{font:800 19px var(--font-d)}
.sl-plan p{color:var(--muted);font-size:14.5px;flex:1;margin:0}
.sl-price{font:800 34px var(--font-d);letter-spacing:-.02em}
.sl-price small{font:600 14px var(--font-b,inherit);color:var(--muted);margin-left:3px}
.sl-pop{position:absolute;top:-12px;left:18px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:800}
.sl-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.sl-rev{margin:0;border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.sl-rev blockquote{margin:0;font-size:15px;line-height:1.5}
.sl-rev figcaption{color:var(--muted);font-weight:700;font-size:13px}
.sl-faq{max-width:760px}
.sl-final{text-align:center;border-radius:26px;padding:clamp(26px,5vw,48px) 20px;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}
.sl-final .sl-cta{justify-content:center}
.sl-foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;color:var(--muted);font-size:13px;padding-top:8px}
body.sales .wrap{max-width:1120px}
@media (max-width:820px){.sl-hero{grid-template-columns:1fr}.sl-phone .phonef{height:min(62vh,520px)}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* Panel maestro: servicios */
.svced{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.svcrow{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface2);display:flex;flex-direction:column;gap:8px}
.svch{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.svch b{flex:1 1 100%;font-size:15px}
/* Inicio de un panel individual (reportes / códigos) */
.hero.portal{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero.portal .hlogo{margin:0 auto 6px}
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;width:100%;margin-top:18px;position:relative;z-index:1}
.ptile{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:16px;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--fg);font:inherit;cursor:pointer;min-height:110px}
.ptile em{font-style:normal;font-size:24px}
.ptile b{font-size:16px}
.ptile span{color:var(--muted);font-size:13.5px}
.ptile:hover,.ptile:focus-visible{border-color:var(--accent)}
.hero.portal .cta{justify-content:center;margin-top:16px}
/* Panel de códigos */
.chips.wrapc{flex-wrap:wrap;overflow:visible}
.chkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.steps2{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.codec{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.codeh{display:flex;align-items:center;gap:10px}
.codeh .cic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--surface2);flex:none}
.codeh .tx{display:flex;flex-direction:column;min-width:0}
.codeh .tx span{font-size:12.5px;color:var(--muted)}
.codebig{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line))}
.codebig code{font:800 clamp(28px,8vw,40px)/1 var(--font-m);letter-spacing:.18em;color:var(--accent)}
.codel{text-align:center;padding:12px}
/* Respuesta del asistente IA */
.bubble.aib{border-color:color-mix(in srgb,#2aa3e0 45%,var(--line));background:color-mix(in srgb,#2aa3e0 8%,var(--surface2))}
/* Botón de música */
.mus{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--accent);font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 10px 26px -10px rgb(0 0 0 / .6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
.mus i{width:3px;height:16px;border-radius:2px;background:var(--accent);animation:mbar 1s ease-in-out infinite}
.mus i:nth-child(2){animation-delay:-.3s}.mus i:nth-child(3){animation-delay:-.6s}.mus i:nth-child(4){animation-delay:-.15s}
@keyframes mbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mus i{animation:none;transform:scaleY(.7)}}
body.adm .mus,body.preview .mus{display:none}
body.lay-chat .mus{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 64px)}
.top a.brand{color:inherit;text-decoration:none}
@media (max-width:480px){body.sales .top .btn.ghost{display:none}}
.plans.compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.plans.compact .plan{padding:10px;gap:8px;cursor:pointer}
.plans.compact .plan .tx b{font-size:14px}
.plans.compact .plan .pp{font-size:13px}
.panel .kv .fm{font-size:13px;line-height:1.4}

/* ---------- Entrega 6: bot de WhatsApp ---------- */
.pill.wap{background:color-mix(in srgb,#25d366 18%,transparent);color:#1fbf5b;border-color:color-mix(in srgb,#25d366 40%,transparent)}
.split i.wa{background:#25d366}
.refbox .wakey{font-size:clamp(14px,4.4vw,20px);letter-spacing:.02em;word-break:break-all;user-select:all}

/* ---------- Entrega 7: bot de WhatsApp como servicio ---------- */
.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){.kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis.k5 .kpi:last-child{grid-column:1/-1}}
a.kpi{color:inherit;text-decoration:none;display:block}
.kpi b small{font-size:.55em;color:var(--muted);font-weight:700;margin-left:2px}
.kpi>small.note{display:block;margin-top:2px;font-size:11.5px}
.kpi.warnk{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 7%,var(--surface))}
.botl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.botc{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface2);display:flex;flex-direction:column;gap:10px;min-width:0}
.botc.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.botc.warn{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.bc-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bc-hd b{font:800 16px var(--font-d)}
.bc-hd .note{font-size:12.5px}
.botc .acct-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
.botc .acct-kv b{font-size:13.5px;overflow-wrap:anywhere}
.bc-why{margin:0;padding:8px 10px;border-radius:10px;background:var(--bg)}
.botc.bad .bc-why{color:color-mix(in srgb,var(--bad) 70%,var(--fg))}
.botsh{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.svcrow.xtra{border-style:dashed}
.li.dim{opacity:.9}
.li.dim .tx span{color:var(--muted)}
.plan.xtra{position:relative;cursor:pointer}
.plan.xtra .ck{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:var(--ink,#fff)}
.plan.xtra.on .ck{background:var(--accent);border-color:var(--accent)}
.waoffer{max-width:720px}
.wo-hd{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.wo-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:color-mix(in srgb,#25d366 18%,var(--surface2));flex:none}
.wo-hd h3{margin:0;font:800 20px var(--font-d)}
.wo-pr{font:800 22px var(--font-d)}
.wo-pr small{font-size:13px;color:var(--muted);font-weight:600}
.wo-pr em{font:500 12.5px var(--font-b,inherit);font-style:normal;color:var(--muted);margin-left:4px}
.waoffer>p{color:var(--muted);margin:0 0 10px}
.wo-list{margin:0 0 14px;padding-left:18px;display:grid;gap:6px;font-size:14px}
.wo-list .fm{font-family:var(--font-m);font-size:13px}
.sl-extra{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;border:1px dashed color-mix(in srgb,#25d366 55%,var(--line));border-radius:20px;padding:18px;background:color-mix(in srgb,#25d366 6%,var(--surface))}
.sl-extra>em{font-style:normal;font-size:34px}
.sl-extra .tx{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}
.sl-extra .tx b{font:800 19px var(--font-d)}
.sl-extra .tx p{margin:0;color:var(--muted);font-size:14.5px}
.sl-xt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1fbf5b}
.sl-xp{flex:0 1 200px;display:flex;flex-direction:column;gap:8px}
.sl-xp .sl-price{font-size:28px}
.pf-bot{padding:10px 12px;border:1px dashed color-mix(in srgb,#25d366 55%,var(--line));border-radius:12px;background:color-mix(in srgb,#25d366 6%,transparent)}
.pf-bot .note{font-size:12.5px}
#bots .chips{flex-wrap:wrap;overflow:visible}

/* ---------- Entrega 8: los dueños pagan su plan en línea ---------- */
.paynow{margin-top:12px;font-size:16px;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.paytr{margin-top:12px}
.paylist .li{align-items:center}
.paylist .tx span{overflow-wrap:anywhere}
.pay-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.pay-r .amt{font-size:15px}