/* Yafeet Master · "Canal en vivo" (estilo TikTok/Shorts).
   Tokens en :root; los temas de temporada solo sobrescriben variables (el servidor imprime :root{--bg:…}).
   Base portada del mockup aprobado (diseno/elegido-canal-en-vivo-tiktok/mockup.html). */
/* Fuentes autoalojadas (variables, OFL): Unbounded 500–800 y Manrope 400–800, subsets latin y latin-ext */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/unbounded-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/unbounded-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#0b0b10; --bg-2:#101018; --bg-3:#16161f; --bg-4:#1c1c27;
  --bg-rgb:11,11,16; --bg-0:#07070b; --sheet:#111119; --surf:#13131c; --adbg:#0f1119; --avbg:#0f1a24;
  --panel:rgba(var(--bg-rgb),.8);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --ink:#f3f4f8; --ink-rgb:243,244,248; --ink-2:#c4c7d4; --ink-3:#9a9eb2;
  --chan:#19c3ff; --chan-rgb:25,195,255; --chan-2:#8adbff; --chan-a:rgba(var(--chan-rgb),.14); --chan-ink:#03121a;
  --warm:#ffcc4d; --warm-rgb:255,204,77; --warm-2:#ffdc85; --warm-ink:#1b1403;
  --live:#ff3b5c; --live-rgb:255,59,92; --live-2:#ff8fa3;
  --ring:var(--live); --alert:rgba(var(--warm-rgb),.5); --sel:var(--chan); --sel-ink:var(--chan-ink); --focus:var(--chan); --thumb:rgba(255,255,255,.2);
  --fd:"Unbounded", "Manrope", sans-serif;
  --fb:"Manrope", system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --navH:62px; --ban:58px; --topH:calc(var(--safe-t) + 52px);
  --ts:0 1px 2px rgba(0,0,0,.65), 0 2px 14px rgba(0,0,0,.5);
  --sh:0 12px 32px -10px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
  color-scheme:dark;
}
html.cats{--topH:calc(var(--safe-t) + 104px)}
html.noban{--ban:0px}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 15px/1.5 var(--fb);-webkit-font-smoothing:antialiased;overflow:hidden;caret-color:var(--chan);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
::selection{background:var(--sel);color:var(--sel-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--chan)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:5px}
a{color:var(--chan-2);text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.f{fill:currentColor;stroke:none}
svg.dot{width:9px;height:9px;flex:none;fill:currentColor}
.live-dot{color:var(--live)}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
kbd{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:22px;height:22px;padding:0 6px;font:800 11px/1 var(--fb);color:var(--ink-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;background:rgba(255,255,255,.05)}
kbd svg.i{width:12px;height:12px;stroke-width:2.4}

/* ---------- chips & buttons ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:4px;font:800 10.5px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line-2);background:rgba(var(--bg-rgb),.66);color:var(--ink);white-space:nowrap}
.chip--chan{border-color:rgba(var(--chan-rgb),.55);color:var(--chan-2)}
.chip--warm{border-color:rgba(var(--warm-rgb),.6);color:var(--warm)}
.chip--live{border-color:rgba(var(--live-rgb),.6)}
.chip--tab{background:var(--chan);border-color:var(--chan);color:var(--chan-ink)}
.chip--nat{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:6px;font:800 15px/1.1 var(--fb);text-decoration:none;border:1px solid var(--line-2);color:var(--ink);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s,transform .25s var(--ease);text-align:center}
.btn:hover{border-color:var(--ink-3);background:rgba(255,255,255,.09)}
.btn:active{transform:translateY(1px)}
.btn--warm{background:var(--warm);border-color:var(--warm);color:var(--warm-ink)}
.btn--warm:hover{background:var(--warm-2);border-color:var(--warm-2)}
.btn--chan{background:var(--chan);border-color:var(--chan);color:var(--chan-ink)}
.btn--chan:hover{background:var(--chan-2);border-color:var(--chan-2)}
.btn--warm:focus-visible,.btn--chan:focus-visible{outline-color:#fff}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ibtn{width:44px;height:44px;display:grid;place-items:center;border-radius:6px;color:var(--ink);transition:background .2s}
.ibtn:hover{background:rgba(255,255,255,.08)}

/* ---------- OBS-style ad source ---------- */
.obs{position:relative;border:1px solid rgba(var(--chan-rgb),.5);background:var(--adbg) repeating-linear-gradient(135deg,rgba(var(--chan-rgb),.055) 0 1px,transparent 1px 11px)}
.obs > .hd{position:absolute;width:7px;height:7px;background:var(--bg);border:1px solid var(--chan);z-index:2}
.hd.a{top:-4px;left:-4px}.hd.b{top:-4px;right:-4px}.hd.c{bottom:-4px;left:-4px}.hd.d{bottom:-4px;right:-4px}
.obs-l{position:absolute;left:-1px;top:-1px;transform:translateY(-100%);display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:3px 3px 0 0;background:var(--chan);color:var(--chan-ink);font:800 10px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.obs-in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;padding:10px}
.obs-in b{font:700 15px/1.2 var(--fd);color:var(--ink)}
.obs-in span{font:700 12px/1.2 var(--fb);color:var(--ink-3)}
.obs-in .chip--nat{color:var(--bg);font:800 10px/1 var(--fb)}
.bx-300{width:300px;height:250px;flex:none}
.bx-728{width:728px;height:90px;flex:none}

/* ---------- 18+ gate: STARTING SOON ---------- */
.gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;isolation:isolate}
html.adult .gate{display:none}
.gate::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 42% at 50% 36%,rgba(var(--chan-rgb),.2),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px)}
.gate.out{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--safe-t) + 14px) 16px 0}
.g-word{font:700 13px/1 var(--fd);letter-spacing:-.01em}
.g-status .dot{color:var(--ink-3);transition:color .3s}
.gate.onair .g-status{border-color:rgba(var(--live-rgb),.7)}
.gate.onair .g-status .dot{color:var(--live)}
.g-mid{display:grid;align-content:center;justify-items:center;text-align:center;padding:12px 16px 20px;overflow:auto}
.g-logo{width:min(210px,50vw);height:auto;aspect-ratio:1;filter:drop-shadow(0 14px 34px rgba(var(--chan-rgb),.3))}
.g-h{display:grid;gap:14px;margin-top:10px}
.g-scene{font:800 clamp(34px,10.4vw,92px)/.92 var(--fd);letter-spacing:-.03em;text-transform:uppercase}
.g-scene i{font-style:normal;display:inline-block;animation:blink 1.4s steps(1) infinite}
.g-scene i:nth-child(2){animation-delay:.2s}.g-scene i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.2}}
.g-age{font:600 clamp(17px,4.6vw,22px)/1.3 var(--fd);color:var(--chan-2);text-wrap:balance}
.g-p{color:var(--ink-2);max-width:40ch;margin-top:14px;text-wrap:pretty}
.g-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;width:100%}
.g-actions .btn{flex:0 0 auto}
.g-actions #gEnter{flex:1 1 auto;max-width:300px}
.g-small{margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.g-ticker{height:calc(46px + var(--safe-b));padding-bottom:var(--safe-b);border-top:1px solid var(--line);background:rgba(255,255,255,.025);overflow:hidden;display:flex;align-items:center}
.g-track{display:flex;flex:none;gap:34px;padding-left:34px;white-space:nowrap;font:700 13px/1 var(--fb);color:var(--ink-2);animation:tick 38s linear infinite}
.g-track span{display:inline-flex;align-items:center;gap:34px}
.g-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--chan)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- shell (mobile first) ---------- */
.app{position:fixed;inset:0}
.side,.faside,.fnav{display:none}
.main{position:fixed;inset:0 0 calc(var(--navH) + var(--safe-b)) 0}
.feedarea{position:absolute;inset:0}

.topbar{position:absolute;z-index:20;top:0;left:0;right:0;padding-top:var(--safe-t);background:linear-gradient(180deg,rgba(var(--bg-rgb),.78) 0%,rgba(var(--bg-rgb),.35) 70%,rgba(var(--bg-rgb),0) 100%);pointer-events:none}
.topbar > *{pointer-events:auto}
.tabsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px;padding:0 6px 0 12px}
.tabsrow .chip{justify-self:start}
.ftabs{display:flex;align-items:center;gap:2px}
.ftabs i{width:1px;height:14px;background:rgba(255,255,255,.35)}
.ftab{position:relative;height:44px;padding:0 10px;white-space:nowrap;font:800 16px/1 var(--fb);color:rgba(var(--ink-rgb),.66);text-shadow:var(--ts);transition:color .2s}
.ftab:hover{color:#fff}
.ftab[aria-pressed="true"]{color:#fff}
.ftab[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:4px;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--chan)}
.tabsrow .ibtn{justify-self:end;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.catsrow{display:none;gap:6px;overflow-x:auto;padding:4px 16px 4px;scrollbar-width:none}
html.cats .catsrow{display:flex}
.catsrow::-webkit-scrollbar{display:none}
.scene{flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 13px;border-radius:5px;border:1px solid var(--line);background:rgba(var(--bg-rgb),.62);font:800 13px/1 var(--fb);color:var(--ink-2);white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.scene small{font:700 11px/1 var(--fb);color:var(--ink-3)}
.scene:hover{border-color:var(--line-2);color:var(--ink)}
.scene[aria-pressed="true"]{border-color:var(--chan);color:#fff;background:rgba(var(--chan-rgb),.2);box-shadow:inset 0 -2px 0 var(--chan)}
.scene[aria-pressed="true"] small{color:var(--chan-2)}
.scene--vip{border-color:rgba(var(--live-rgb),.45)}
.scene--vip b{font-weight:800;color:var(--ink);letter-spacing:.04em}
.scene--grid{border-color:rgba(var(--warm-rgb),.5);color:var(--warm)}
.scene--grid svg.i{width:18px;height:18px}
.ctxrow{display:none;align-items:center;gap:8px;height:52px;padding:0 6px 0 10px}
html.ctx-grid .tabsrow,html.ctx-grid .catsrow{display:none}
html.ctx-grid .ctxrow{display:flex}
.backpill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 8px;border-radius:20px;background:rgba(var(--bg-rgb),.72);border:1px solid var(--line-2);font:800 13.5px/1 var(--fb)}
.backpill svg.i{width:18px;height:18px}
.ctxrow .lbl{flex:1;min-width:0;font:700 13px/1.2 var(--fb);color:var(--ink-2);text-shadow:var(--ts);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- feed ---------- */
.feed{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;isolation:isolate;background:#000}
.vbox{position:absolute;inset:0;overflow:hidden;background:#000;isolation:isolate;container-type:size}
.amb{position:absolute;inset:-60px;z-index:-1;pointer-events:none}
.amb img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.3) brightness(.45)}
/* previews are always shown whole: contain, over their own blurred frame */
.vbox .poster,.vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.slide.h .vbox .poster,.slide.h .vbox video{object-position:50% 42%}
.vbox:fullscreen .poster,.vbox:fullscreen video{object-position:50% 50%}
.vbox:fullscreen .cap,.vbox:fullscreen .vtools{display:none}
.vbox video{opacity:0;transition:opacity .4s}
.vbox.has-v video{opacity:1}
.vbox.has-v .poster{opacity:0}
.hpill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;background:rgba(var(--bg-rgb),.62);border:1px solid var(--line-2);font:800 12px/1 var(--fb);color:#fff;white-space:nowrap}
.hpill svg.i{width:18px;height:18px}
.vtools{align-items:flex-end}
.vbox::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 52%,rgba(0,0,0,.72) 86%,rgba(0,0,0,.85) 100%)}
.st-hit{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border-radius:0}
.st-hit:focus-visible{outline-offset:-4px;border-radius:0}
.st-play{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--bg-rgb),.55);color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .25s,transform .35s var(--ease)}
.st-play svg.i{width:30px;height:30px;margin-left:3px}
.vbox.paused .st-play{opacity:1;transform:none}
.vbox.loading .st-play{opacity:0}
.st-buf{position:absolute;z-index:3;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--chan);opacity:0;pointer-events:none;animation:spin .9s linear infinite}
.vbox.loading .st-buf{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.st-err{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;text-align:center;background:rgba(var(--bg-rgb),.86)}
.st-err p{font:700 14px/1.35 var(--fb);max-width:30ch}
.st-err svg.i{color:var(--warm)}
.vtools{position:absolute;z-index:5;top:calc(var(--topH) + 4px);right:8px;display:flex;flex-direction:column;gap:6px}
.vtools .ibtn{background:rgba(var(--bg-rgb),.5);border-radius:50%}
.vtools .ibtn svg.i{width:20px;height:20px}
.i-vol{display:none}
[aria-pressed="true"] > .i-vol{display:block}
[aria-pressed="true"] > .i-mute{display:none}
.prog{position:absolute;z-index:4;left:0;right:0;bottom:var(--ban);height:3px;background:rgba(255,255,255,.2)}
.prog i{display:block;height:100%;width:0;background:var(--chan)}

/* caption, TikTok grammar with a stream lower-third ticker */
.cap{position:absolute;z-index:4;left:12px;right:84px;bottom:calc(var(--ban) + 16px);text-shadow:var(--ts)}
.handle{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:800 16px/1 var(--fb);color:#fff;text-decoration:none;border-radius:4px}
.handle .chip{text-shadow:none;height:20px;font-size:9.5px}
.ctitle{margin-top:4px;font:600 15px/1.35 var(--fb);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{font:800 14px/1 var(--fb);color:var(--ink-2);padding:4px 0;min-height:32px}
.tags{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:2px}
.tag{font:800 14.5px/1 var(--fb);color:var(--chan-2);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;border-radius:4px}
.tag:hover{text-decoration:underline}
.tick{display:flex;align-items:center;gap:8px;margin-top:8px;height:30px;max-width:290px;padding:0 10px 0 8px;border:1px solid var(--line-2);border-radius:4px;background:rgba(var(--bg-rgb),.62);overflow:hidden;text-shadow:none}
.tick svg.i{width:16px;height:16px;color:var(--chan)}
.tick{width:max-content}
.tick-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 12.5px/1 var(--fb);color:var(--ink)}
.tick-t b{color:var(--warm);font-weight:800}

.rail{position:absolute;z-index:5;right:4px;bottom:calc(var(--ban) + 14px);width:72px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ract{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;font:800 12px/1.1 var(--fb);color:#fff;text-decoration:none;text-shadow:var(--ts);border-radius:8px}
.ract .rb{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--bg-rgb),.45);transition:transform .35s var(--ease),background .2s,color .2s}
.ract .rb svg.i{width:26px;height:26px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ract:hover .rb{background:rgba(var(--bg-rgb),.75)}
.ract:active .rb{transform:scale(.9)}
.ract kbd{display:none;position:absolute;right:-8px;top:-6px;min-width:18px;height:18px;padding:0 4px;font-size:10px;background:var(--bg-3)}
.avatar{position:relative;display:block;width:52px;height:52px;margin-bottom:8px;border-radius:50%;padding:2px;background:var(--ring)}
.avatar img{width:100%;height:100%;border-radius:50%;background:var(--avbg);object-fit:cover;border:2px solid #000}
.avatar .plus{position:absolute;left:50%;bottom:-9px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--chan);color:var(--chan-ink);display:grid;place-items:center}
.avatar .plus svg.i{width:13px;height:13px;stroke-width:3}
.avatar .lv{position:absolute;left:50%;top:-6px;transform:translateX(-50%);padding:1px 4px;border-radius:3px;background:var(--live);color:#fff;font:800 8.5px/1.2 var(--fb);letter-spacing:.06em}
.ract--add .i-chk{display:none}
.ract--add[aria-pressed="true"] .rb{background:var(--warm);color:var(--warm-ink)}
.ract--add[aria-pressed="true"] .i-add{display:none}
.ract--add[aria-pressed="true"] .i-chk{display:block}
.ract--add[aria-pressed="true"] .rl{color:var(--warm)}
.ract--add.pop .rb{animation:pop .5s var(--ease)}
@keyframes pop{30%{transform:scale(1.18)}}
.disc{width:44px;height:44px;border-radius:50%;padding:7px;background:conic-gradient(#222 0 25%,#111 0 50%,#222 0 75%,#111 0);border:1px solid var(--line-2);animation:spin 5s linear infinite;animation-play-state:paused}
.disc img{width:100%;height:100%;border-radius:50%}
.slide.on.playing .disc{animation-play-state:running}

/* overlay enters after the cut */
html.js .slide:not(.on) .cap,html.js .slide:not(.on) .rail{opacity:0}
.slide.on .cap{animation:capIn .7s var(--ease) .22s both}
.slide.on .rail > *{animation:actIn .45s var(--ease) both}
.slide.on .rail > :nth-child(1){animation-delay:.3s}
.slide.on .rail > :nth-child(2){animation-delay:.36s}
.slide.on .rail > :nth-child(3){animation-delay:.42s}
.slide.on .rail > :nth-child(4){animation-delay:.48s}
.slide.on .rail > :nth-child(5){animation-delay:.54s}
@keyframes capIn{from{opacity:.2;clip-path:inset(-10px 100% -10px -10px)}to{opacity:1;clip-path:inset(-10px -10px -10px -10px)}}
@keyframes actIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* photo carousel */
.strip{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;z-index:0}
.strip::-webkit-scrollbar{display:none}
.ph{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.ph .ph-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(30px) saturate(1.25) brightness(.42);z-index:-1}
.ph .ph-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 42%}
.pcount{position:absolute;z-index:4;right:10px;top:calc(var(--topH) + 8px);height:26px;padding:0 9px;border-radius:13px;display:inline-flex;align-items:center;background:rgba(var(--bg-rgb),.6);font:800 12px/1 var(--fb)}
@media (min-width:1024px){.pcount{top:12px}}
.pdots{position:absolute;z-index:4;left:50%;top:calc(var(--topH) + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:12px;background:rgba(var(--bg-rgb),.5)}
.pdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .3s var(--ease)}
.pdots i.on{background:#fff;transform:scale(1.25)}
.pnav{position:absolute;z-index:4;top:36%;margin-top:-22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--bg-rgb),.55);border:1px solid var(--line-2)}
.pnav.prev{left:8px}.pnav.next{right:8px}
.pnav[disabled]{opacity:0;pointer-events:none}

/* pre-roll inside the player */
.brkov{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--topH) + 8px) 84px calc(var(--ban) + 24px) 14px;background:radial-gradient(80% 50% at 20% 20%,rgba(var(--chan-rgb),.14),transparent 70%),radial-gradient(60% 40% at 90% 90%,rgba(var(--warm-rgb),.08),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px),var(--bg)}
.brkov-top{display:flex;gap:6px;flex-wrap:wrap}
.brkov-h{margin-top:14px;font:800 clamp(26px,7.6vw,40px)/.95 var(--fd);letter-spacing:-.03em;text-transform:uppercase}
.brkov-sub{margin-top:10px;font:700 15px/1.3 var(--fb);color:var(--ink-2)}
.brkov-sub b{font:700 17px/1 var(--fd);color:var(--warm)}
.brkv{width:100%;aspect-ratio:16/9;margin-top:34px}
.brkv .obs-in b{font-size:clamp(14px,4vw,19px)}
.brk-skip{position:absolute;right:0;bottom:12px;z-index:3;min-height:46px;padding:0 12px 0 14px;border-radius:6px 0 0 6px;border-right:0;background:rgba(var(--bg-rgb),.88);font-size:14px}
.brk-skip:not([disabled]){background:var(--warm);color:var(--warm-ink);border-color:var(--warm)}
.brk-skip[disabled]{opacity:1;color:var(--ink-2)}
.brk-skip svg.i{width:18px;height:18px}
.brkov-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;color:var(--ink-2);font:600 13px/1.45 var(--fb)}
.brkov-note svg.i{width:18px;height:18px;color:var(--chan);margin-top:1px}
.brkov-bar{position:absolute;left:0;right:0;bottom:var(--ban);height:4px;background:rgba(255,255,255,.14)}
.brkov-bar i{display:block;height:100%;width:100%;background:var(--warm);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.slide.brk-on .cap,.slide.brk-on .vtools,.slide.brk-on .prog{visibility:hidden}

/* card slides (native ad, VIP, end) */
.cardin{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:var(--topH) 20px calc(var(--ban) + 24px);max-width:560px;margin:0 auto}
.card-h{font:700 clamp(26px,7.4vw,40px)/1.02 var(--fd);letter-spacing:-.025em;text-wrap:balance}
.card-c{font:700 15px/1 var(--fb);color:var(--chan-2)}
.card-p{color:var(--ink-2);max-width:42ch;text-wrap:pretty}
.card-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.cardin > img{width:92px;height:92px;filter:drop-shadow(0 8px 20px rgba(var(--chan-rgb),.3))}
.s-card .vbox{background:radial-gradient(70% 45% at 50% 40%,rgba(var(--chan-rgb),.12),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),var(--bg)}
.s-card .vbox::after{display:none}
.s-vip .vbox{background:radial-gradient(70% 50% at 50% 40%,rgba(var(--live-rgb),.14),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),var(--bg)}
.s-vip .card-h{display:flex;align-items:center;gap:12px}
.s-vip .card-h svg.i{width:30px;height:30px;color:var(--live)}
.s-nat .cardin{align-items:center;text-align:center}
.keyform{width:100%;max-width:420px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.keyform label{display:block;font:800 13px/1.2 var(--fb);color:var(--ink-2);margin-bottom:8px}
.kf-row{display:flex;gap:8px}
.kf-row input{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink);font-size:16px}
.kf-row input::placeholder{color:var(--ink-3)}
.kf-row input:focus-visible{outline:2px solid var(--chan);outline-offset:1px;border-color:transparent}
.kf-row input[aria-invalid="true"]{border-color:var(--live)}
.kf-err{margin-top:8px;font:600 13.5px/1.4 var(--fb);color:var(--live-2)}

/* ---------- stream alert ---------- */
.alerts{position:absolute;z-index:25;left:12px;right:12px;top:calc(var(--topH) + 2px);display:grid;justify-items:center;pointer-events:none}
.alert{pointer-events:auto;position:relative;display:flex;align-items:center;gap:12px;width:min(100%,400px);padding:8px 8px 8px 10px;background:var(--surf);border:1px solid var(--alert);border-radius:8px;box-shadow:0 16px 40px -12px rgba(0,0,0,.85);overflow:hidden;animation:alertIn .6s var(--ease)}
.alert.bye{opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s}
.alert > img{width:42px;height:42px;flex:none}
.al-t{min-width:0;flex:1}
.al-t b{display:flex;align-items:center;gap:6px;font:700 14px/1.2 var(--fd);color:var(--warm)}
.al-t b svg.i{width:17px;height:17px;stroke-width:2.4}
.al-t p{font:600 12.5px/1.3 var(--fb);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.alert .undo{flex:none;min-height:44px;padding:0 12px;border-radius:6px;font:800 13px/1 var(--fb);color:var(--ink);border:1px solid var(--line-2)}
.alert .undo:hover{background:rgba(255,255,255,.08)}
.alert::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--warm);transform-origin:left;animation:drain 4.2s linear forwards}
.alert.info{border-color:rgba(var(--chan-rgb),.5)}
.alert.info .al-t b{color:var(--chan-2)}
.alert.info::after{background:var(--chan)}
@keyframes alertIn{from{opacity:0;transform:translateY(-16px) scale(.96);clip-path:inset(0 50% 0 50% round 8px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 8px)}}
@keyframes drain{to{transform:scaleX(0)}}

/* ---------- bottom nav (TikTok grammar) + banner ---------- */
.bnav{position:fixed;z-index:40;left:0;right:0;bottom:0;height:calc(var(--navH) + var(--safe-b));padding-bottom:var(--safe-b);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:var(--bg);border-top:1px solid var(--line)}
.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;font:800 10.5px/1 var(--fb);color:var(--ink-3);transition:color .2s;border-radius:0}
.bnav button:hover{color:var(--ink)}
.bnav button[aria-current="page"]{color:#fff}
.bnav button[aria-current="page"] svg.i{color:var(--chan-2)}
.bnav .mid{height:auto}
.bnav .mid .pill{position:relative;display:grid;place-items:center;width:52px;height:34px;border-radius:9px;background:var(--warm);color:var(--warm-ink);box-shadow:-3px 0 0 var(--chan),3px 0 0 var(--live)}
.bnav .mid .pill svg.i{width:22px;height:22px;stroke-width:2.2}
.bnav .mid{color:var(--ink-2)}
.badge{position:absolute;top:-8px;right:-10px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--live);color:#fff;font:800 11px/19px var(--fb);text-align:center;border:2px solid var(--bg);box-sizing:content-box}
.badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{35%{transform:scale(1.35)}}
.banner{position:fixed;z-index:35;left:50%;bottom:calc(var(--navH) + var(--safe-b) + 6px);width:320px;height:50px;margin-left:-160px}
html.noban .banner{display:none}
.banner .obs{position:absolute;inset:0}
.banner .obs-in{grid-auto-flow:column;gap:10px;align-items:center;white-space:nowrap}
.banner .obs-in b{font-size:12px}
.banner .obs-in span:not(.chip){font-size:11px}
.banner .x{position:absolute;right:-15px;top:-15px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;z-index:3}
.banner .x span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-4);border:1px solid var(--line-2)}
.banner .x svg.i{width:13px;height:13px;stroke-width:2.4}

/* ---------- views ---------- */
.view{position:fixed;z-index:30;inset:0 0 calc(var(--navH) + var(--safe-b)) 0;background:var(--bg);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 16px calc(var(--ban) + 40px);container-type:inline-size}
.view.enter{animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vh{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:6px;min-height:56px;margin:0 -16px;padding:calc(var(--safe-t) + 6px) 8px 6px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.vh h1{flex:1;min-width:0;font:700 18px/1.1 var(--fd);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vh h1:first-child{padding-left:8px}
.lang{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;flex:none}
.lang a,.lang span{display:grid;place-items:center;min-width:44px;height:40px;font:800 12px/1 var(--fb);color:var(--ink-3);letter-spacing:.04em;text-decoration:none}
.lang a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.lang [aria-current="true"]{background:var(--chan-a);color:var(--chan-2)}
.vb{max-width:640px;margin:0 auto;padding-top:24px}
.vb > * + *{margin-top:34px}
.vb h2{font:700 18px/1.2 var(--fd);letter-spacing:-.01em;margin-bottom:12px}
.lede{color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.note{font-size:13px;color:var(--ink-3)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);text-decoration:none;border-radius:0}
.row:hover{background:rgba(255,255,255,.035)}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font:700 15px/1.25 var(--fb)}
.row .tx span{display:block;font:600 13px/1.35 var(--fb);color:var(--ink-3);margin-top:2px}
.row .ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--bg-3);border:1px solid var(--line);color:var(--chan-2)}
.row > svg.i:last-child{color:var(--ink-3);width:18px;height:18px}
.searchbox{position:relative;display:flex;align-items:center}
.searchbox svg.i{position:absolute;left:14px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.searchbox input{width:100%;height:48px;padding:0 14px 0 42px;border-radius:24px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink);font-size:16px}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input:focus-visible{outline:2px solid var(--chan);outline-offset:1px;border-color:transparent}
.searchbox input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}

/* profile */
.vw{max-width:1180px;margin:0 auto}
.prof{display:grid;justify-items:center;text-align:center;padding-top:22px}
.prof .avatar{width:104px;height:104px;margin:0;padding:3px}
.prof .avatar img{border-width:3px}
.prof .avatar .lv{top:auto;bottom:-6px;font-size:10px;padding:2px 6px}
.prof h2{margin-top:14px;font:800 20px/1.1 var(--fd);letter-spacing:-.02em}
.prof .nm{margin-top:4px;font:600 13.5px/1 var(--fb);color:var(--ink-3)}
.pstats{display:flex;justify-content:center;gap:0;margin-top:16px}
.pstats > *{display:grid;justify-items:center;gap:4px;padding:0 16px;font:600 12.5px/1 var(--fb);color:var(--ink-3)}
.pstats > * + *{border-left:1px solid var(--line)}
.pstats b{font:700 18px/1 var(--fd);color:var(--ink)}
.pstats button{border-radius:4px}
.pstats button:hover b{color:var(--chan-2)}
.bio{margin-top:14px;max-width:44ch;font-size:14px;color:var(--ink-2);text-wrap:pretty}
.pcta{display:flex;gap:8px;margin-top:16px;justify-content:center}
.pcta .btn{padding:0 16px;font-size:14.5px;white-space:nowrap}
.pcta .ibtn{border:1px solid var(--line-2);width:48px;height:48px}
.plinks{display:flex;gap:6px;margin-top:14px;overflow-x:auto;max-width:100%;padding:2px;scrollbar-width:none}
.plinks::-webkit-scrollbar{display:none}
.plinks button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;border:1px solid var(--line);font:700 13px/1 var(--fb);color:var(--ink-2)}
.plinks button:hover{border-color:var(--chan);color:var(--ink)}
.plinks svg.i{width:16px;height:16px;color:var(--chan-2)}
.ptabs{position:sticky;top:calc(var(--safe-t) + 56px);z-index:3;display:grid;grid-template-columns:repeat(4,1fr);margin:24px -16px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.ptab{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;font:800 13.5px/1 var(--fb);color:var(--ink-3);position:relative;border-radius:0}
.ptab svg.i{width:18px;height:18px}
.ptab small{font:700 11px/1 var(--fb);color:var(--ink-3)}
.ptab[aria-current="page"]{color:#fff}
@media (max-width:480px){.ptab small{display:none}.ptab{font-size:13px;gap:5px}}
.ptab[aria-current="page"]::after{content:"";position:absolute;left:25%;right:25%;bottom:-1px;height:2px;background:var(--chan)}
.ptab--vip svg.i{color:var(--live)}
.pfilter{display:grid;gap:10px;padding:12px 0 10px}
.pchips{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
.pchips::-webkit-scrollbar{display:none}
.pchips .scene{height:40px;background:var(--bg-2)}
.prow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sortseg{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.sortseg button{min-height:40px;padding:0 12px;font:700 12.5px/1 var(--fb);color:var(--ink-3)}
.sortseg button + button{border-left:1px solid var(--line)}
.sortseg button[aria-pressed="true"]{background:var(--chan-a);color:#fff}
.prow .searchbox{flex:1;min-width:170px}
.prow .searchbox input{height:42px;font-size:15px}
.gmeta{font:600 12.5px/1.3 var(--fb);color:var(--ink-3);padding:2px 0 10px}
.gmeta b{color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 -16px}
.tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--bg-3);border-radius:0;text-align:left}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.tile::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));pointer-events:none}
.tile:hover img{transform:scale(1.04);filter:brightness(1.08)}
.tile:focus-visible{outline-offset:-3px;border-radius:0}
.t-l,.t-p{position:absolute;z-index:1;bottom:6px;display:inline-flex;align-items:center;gap:3px;font:800 12px/1 var(--fb);color:#fff;text-shadow:var(--ts)}
.t-l{left:6px}.t-p{right:6px;color:var(--warm)}
.t-l svg.i{width:12px;height:12px}
.t-in{position:absolute;z-index:1;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--warm);color:var(--warm-ink);display:none;place-items:center}
.t-in svg.i{width:13px;height:13px;stroke-width:3}
.tile.in .t-in{display:grid}
.t-o{position:absolute;z-index:1;top:6px;left:6px;height:20px;padding:0 5px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;background:rgba(var(--bg-rgb),.72);color:#fff;font:800 9.5px/1 var(--fb);letter-spacing:.04em}
.t-o svg.i{width:13px;height:13px}
.tile--nat{display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;border:1px solid rgba(var(--chan-rgb),.45);background:var(--adbg) repeating-linear-gradient(135deg,rgba(var(--chan-rgb),.06) 0 1px,transparent 1px 9px)}
.tile--nat::after{display:none}
.tile--nat b{font:700 12px/1.2 var(--fd)}
.tile--nat span:last-child{font:700 10.5px/1.2 var(--fb);color:var(--ink-3)}
.gsent{height:1px}
.gempty{display:grid;justify-items:center;text-align:center;gap:10px;padding:36px 12px}
.gempty img{width:72px;height:72px}
.gempty b{font:700 16px/1.2 var(--fd)}
.gempty p{color:var(--ink-2);font-size:14px;max-width:34ch}
.viptiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.viptile{text-decoration:none;color:var(--ink);position:relative;aspect-ratio:3/4;border:1px solid rgba(var(--live-rgb),.45);border-radius:6px;overflow:hidden;display:grid;align-content:end;gap:4px;padding:14px;text-align:left;background:radial-gradient(70% 50% at 50% 35%,rgba(var(--live-rgb),.18),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),var(--bg-2)}
.viptile > svg.i{position:absolute;top:40%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;color:var(--live)}
.viptile b{font:700 15px/1.2 var(--fd)}
.viptile span{font:700 12.5px/1.2 var(--fb);color:var(--live-2)}
.bxwrap{display:grid;justify-items:center;padding-top:30px}
.bxwrap .bx-728{display:none}
@container (min-width:780px){.bxwrap .bx-728{display:block}.bxwrap .bx-300{display:none}}

/* home: the channel page */
.view--home{padding-top:0}
.hbanner{position:relative;height:calc(var(--safe-t) + 150px);margin:0 -16px;display:flex;overflow:hidden;background:var(--bg-0)}
.hbanner img{flex:1 0 0;min-width:0;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05)}
.hbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),.15) 0%,rgba(var(--bg-rgb),.55) 55%,var(--bg) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
.hid{position:relative;z-index:2;display:flex;align-items:flex-end;gap:20px;margin-top:-52px}
.hid .avatar{width:96px;height:96px;margin:0;padding:3px;flex:none}
.hid .avatar img{border-width:3px}
.hid .avatar .lv{top:auto;bottom:-6px;font-size:10px;padding:2px 6px;white-space:nowrap}
.avatar.off{background:var(--line-2)}
.hid-t{display:grid;gap:6px;padding-bottom:4px;min-width:0}
.hid-t b{font:800 21px/1.05 var(--fd);letter-spacing:-.02em}
.hid-t span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:700 13px/1 var(--fb);color:var(--ink-3)}
.hwel{display:grid;gap:30px;margin-top:28px}
.hwel h1{font:800 clamp(27px,7.4vw,46px)/1.04 var(--fd);letter-spacing:-.028em;text-wrap:balance}
.hwel .lede{margin-top:12px;font-size:16px}
.hwel .cta-row{margin-top:20px}
.hstats{justify-content:flex-start;margin-top:24px}
.hstats > *:first-child{padding-left:0}
.hstats > *{justify-items:start}
.tw{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-2)}
.tw-frame{position:relative;aspect-ratio:16/9;background:#000}
.tw-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tw-live{position:absolute;top:10px;left:10px;pointer-events:none;background:var(--live);border-color:var(--live);color:#fff}
.tw-live .dot{color:#fff}
.tw-bar .btn{white-space:nowrap;flex:none}
.tw-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px;font:700 13.5px/1.3 var(--fb);color:var(--ink-2)}
.tw-bar b{color:var(--ink)}
.tw-off{display:grid;justify-items:start;gap:10px;padding:24px 18px 20px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),var(--bg-2)}
.tw-off > svg.i{width:30px;height:30px;color:var(--ink-3)}
.tw-off b{font:700 18px/1.2 var(--fd)}
.tw-off p{color:var(--ink-2);font-size:14px;max-width:40ch}
.tw-foot{display:flex;justify-content:flex-end;padding:8px 10px;border-top:1px solid var(--line)}
.tw-chans{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tw-chans .btn svg.i,.tw-also svg.i,.tw-card .btn svg.i{width:18px;height:18px}
.tw-also{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;border-top:1px solid var(--line);font:700 12.5px/1.3 var(--fb);color:var(--ink-3)}
.tw-also a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--chan-2)}
.tw-card{position:relative;display:grid;justify-items:start;gap:10px;padding:24px 18px 20px;background:radial-gradient(120% 90% at 0 0,rgba(var(--live-rgb),.16),transparent 60%),var(--bg-2)}
.tw-card__ic{position:absolute;top:18px;right:18px;color:var(--live-2)}
.tw-card__ic svg.i{width:34px;height:34px}
.tw-card b{font:700 20px/1.2 var(--fd);letter-spacing:-.01em;padding-right:44px}
.tw-card p{color:var(--ink-2);font-size:14px;max-width:40ch}
.hsec{margin-top:52px}
.hsec > h2,.hsec .shead h2{font:700 19px/1.2 var(--fd);letter-spacing:-.01em}
.hsec > h2{margin-bottom:14px}
.hgo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.go{position:relative;min-height:156px;border-radius:8px;overflow:hidden;border:1px solid var(--line);text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;background:var(--bg-3);isolation:isolate}
.go img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(1.1);z-index:-1;transition:transform .6s var(--ease),filter .3s}
.go:hover img{transform:scale(1.04);filter:brightness(.62)}
.go b{font:700 17px/1.15 var(--fd);text-shadow:var(--ts)}
.go span{font:700 13px/1.3 var(--fb);color:var(--ink-2);text-shadow:var(--ts)}
.go--main{grid-column:1 / -1;min-height:230px;border-color:rgba(var(--chan-rgb),.55)}
.go--main b{font-size:26px}
.go--main b,.go--main > span:not(.chip):not(.play){padding-right:70px}
.go--main .chip{position:absolute;top:12px;left:12px}
.go--main .play{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--chan);color:var(--chan-ink)}
.go--main .play svg.i{width:24px;height:24px;margin-left:3px}
.hrows{margin-top:10px}
.svc{display:grid;gap:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.svc img{width:64px;height:64px;border-radius:6px;object-fit:cover}
.svc b{display:block;font:700 15.5px/1.2 var(--fd)}
.svc p{margin-top:4px;color:var(--ink-2);font-size:14px}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;background:var(--bg-2);transition:border-color .2s}
.soc:hover{border-color:var(--chan)}
.soc b{display:flex;align-items:center;gap:8px;font:700 14px/1 var(--fd)}
.soc p{font-size:13px;color:var(--ink-2);line-height:1.4}
.soc span{margin-top:auto;font:800 13px/1 var(--fb);color:var(--chan-2);display:flex;align-items:center;gap:4px}
.soc span svg.i{width:15px;height:15px}
@media (min-width:1024px){
  .view--home{padding:0 32px 48px}
  .hbanner{height:220px;margin:0 -28px} /* = el padding lateral de .view en escritorio (28px) */
  .hid{margin-top:-64px;gap:30px}
  .hid .avatar{width:128px;height:128px}
  .hid-t b{font-size:28px}
  .hwel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:48px;margin-top:36px}
  .hgo{grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto}
  .go{min-height:170px}
  .go--main{grid-column:1;grid-row:1 / span 2;min-height:350px}
  .hrows{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;border-top:1px solid var(--line)}
  .hrows .row:first-child{border-top:0}
  .svc{grid-template-columns:repeat(3,1fr);gap:0 28px}
  .hsplit{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
  .hsplit .hsec{margin-top:0}
}
/* ---------- seasonal themes: tokens come from YF_THEMES, this is only the ornament layer ---------- */
.hbanner .tint{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(120deg,rgba(var(--chan-rgb),.22),rgba(var(--warm-rgb),.12));mix-blend-mode:soft-light}
html:not([data-theme="normal"]) .hbanner .tint{mix-blend-mode:color;opacity:.55}
/* Banner con imagen del panel (App\Services\Banners): computadora/tablet y celular por separado (<picture>, corte a 767 px).
   Llena la franja recortando lo que sobra (cover, centrado) y abajo se funde con la página, donde van el avatar y el nombre.
   Proporciones en pantalla (las que se recomiendan en el panel): celular ≈ 2.5:1 (1.9:1 con muesca), tablet ≈ 3.8:1,
   computadora entre 3.6:1 (monitor grande: la columna tiene tope y la franja crece a lo alto) y 4.5:1 (laptop). */
.hbanner--img{height:calc(var(--safe-t) + clamp(140px,40vw,300px))}
.hbanner--img picture{display:contents}
.hbanner--img img{flex:1 1 auto;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.hbanner--img::after{background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),0) 48%,rgba(var(--bg-rgb),.55) 78%,var(--bg) 100%)}
/* Perfil: la franja arriba y el avatar encimado en su orilla de abajo (como YouTube) */
.hbanner--profile{height:clamp(120px,34vw,190px)}
.hbanner--profile.hbanner--img{height:clamp(140px,40vw,300px)}
.prof.prof--ban{padding-top:0}
.prof--ban > .avatar{position:relative;z-index:3;margin-top:-56px}
@media (min-width:768px){
  .hbanner--img,.hbanner--profile.hbanner--img{height:clamp(200px,26vw,270px)}
  .hbanner--profile{height:200px}
}
@media (min-width:1024px){
  .hbanner--img,.hbanner--profile.hbanner--img{height:clamp(220px,19vw,340px)}
  .hbanner--profile{height:220px}
  .prof.prof--ban{padding-top:0}
  .prof--ban > .avatar{margin-top:-66px}
}
.orn{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 58%,transparent 90%);mask-image:linear-gradient(#000 58%,transparent 90%)}
.orn svg{display:block}
html.tab-hidden .orn *,html.tab-hidden .acc *{animation-play-state:paused!important}
.o-web{position:absolute;top:0;width:118px;height:118px;color:rgba(255,255,255,.3)}
.o-web.l{left:0}.o-web.r{right:0;transform:scaleX(-1)}
.o-batfly{position:absolute;top:30%;left:0;width:46px;height:24px;transform:translateX(-70px);animation:batfly 19s linear 2.5s infinite}
.o-bat{width:46px;height:24px;color:#130b1c;filter:drop-shadow(0 0 1px rgba(var(--warm-rgb),.9));animation:flap .22s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes batfly{0%{transform:translate(-70px,10px)}9%{transform:translate(18vw,-14px)}18%{transform:translate(38vw,6px)}27%{transform:translate(58vw,-10px)}36%{transform:translate(80vw,4px)}45%,100%{transform:translate(112vw,-8px)}}
@keyframes flap{to{transform:scaleY(.55)}}
.o-picado{position:absolute;top:0;left:-6px;right:-6px;display:flex;justify-content:space-between;padding-top:calc(var(--safe-t) + 5px)}
.o-picado::before{content:"";position:absolute;left:0;right:0;top:calc(var(--safe-t) + 5px);height:1px;background:rgba(255,255,255,.55)}
.o-flag{width:38px;height:48px;flex:none;opacity:.94;transform-origin:50% 0;animation:sway 4.6s ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.o-flag:nth-child(2n){animation-delay:-1.8s}.o-flag:nth-child(3n){animation-delay:-3.1s}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.o-petal{position:absolute;top:-12px;width:10px;height:7px;color:#ffab1a;opacity:.5;animation:petal 15s linear infinite}
@keyframes petal{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,90px) rotate(160deg)}100%{transform:translate(-6px,190px) rotate(320deg);opacity:0}}
.o-snow{position:absolute;inset:0;width:100%;height:100%}
.o-lights{position:absolute;left:-10px;right:-10px;top:calc(var(--safe-t) - 2px);height:30px;display:flex;justify-content:space-between}
.o-lights::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-bottom:1.5px solid rgba(20,40,28,.9);border-radius:0 0 50% 50% / 0 0 100% 100%}
.o-bulb{position:relative;width:11px;height:18px;margin-top:9px;flex:none;filter:drop-shadow(0 0 5px currentColor);animation:twinkle 2.6s ease-in-out infinite alternate}
.o-bulb:nth-child(3n){animation-delay:-.9s}.o-bulb:nth-child(3n+1){animation-delay:-1.7s}
@keyframes twinkle{from{opacity:1}to{opacity:.45}}
.o-heart{position:absolute;bottom:-18px;width:15px;height:14px;color:var(--chan);opacity:.32;animation:heartup 17s linear infinite}
@keyframes heartup{0%{transform:translate(0,0) scale(.8)}50%{transform:translate(10px,-90px) scale(1)}100%{transform:translate(-8px,-190px) scale(.9);opacity:0}}
.acc{position:absolute;z-index:3;pointer-events:none;display:block}
.acc svg{width:100%;height:100%;display:block}
.acc--gorro{width:52%;top:-22%;right:-16%;transform:rotate(22deg)}
.acc--calabaza{width:36%;bottom:-6%;right:-12%}
.acc--cempasuchil{width:34%;top:-4%;right:-12%}
.acc--corazon{width:30%;bottom:0;right:-10%;color:var(--chan)}
.tgreet{display:inline-flex;align-items:center;gap:9px;margin-top:16px;min-height:36px;padding:4px 14px 4px 10px;border-radius:18px;border:1px solid rgba(var(--warm-rgb),.55);background:rgba(var(--warm-rgb),.1);color:var(--ink);font:700 14px/1.25 var(--fb)}
.tgreet svg{width:20px;height:20px;flex:none}
.chip--theme{border-color:rgba(var(--warm-rgb),.6);color:var(--warm)}
@media (min-width:1024px){.o-web{width:170px;height:170px}.o-flag{width:46px;height:58px}.o-batfly{top:26%}}
@media (prefers-reduced-motion:reduce){.o-batfly{display:none}.o-flag,.o-bulb{animation:none}}
/* figuras por toda la web (decor.js: calabazas · calaveras · arboles). Solo márgenes, huecos y cabeceras; nunca sobre contenido.
   --fs = alto base; --z (escala), --r (inclinación) y --dl (desfase) los pone decor.js en cada una.
   .is-fix = el tamaño exacto lo pone el contenedor (ignora --z). */
.ofig{--fs:34px;--z:1;--r:0deg;--dl:0s;--sway:4deg;--fy:-4px;display:inline-block;flex:none;height:calc(var(--fs) * var(--z));aspect-ratio:1;pointer-events:none;user-select:none;transform:rotate(var(--r));transform-origin:50% 100%;animation:ofig-sway 5.8s var(--ease) var(--dl) infinite alternate}
.is-fix .ofig{height:var(--fs)}
.ofig svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ofig--calabaza-cara{aspect-ratio:40/38;color:#ffd35a}
.ofig--calabaza-cara svg{filter:drop-shadow(0 0 6px rgba(255,150,40,.5)) drop-shadow(0 3px 5px rgba(0,0,0,.5));animation:ofig-glow 3.4s ease-in-out var(--dl) infinite alternate}
.ofig--calavera{aspect-ratio:64/72;color:#19c3c3;animation-name:ofig-float}
.ofig--calavera svg{animation:ofig-eyes 4.2s ease-in-out var(--dl) infinite alternate}
.ofig--cempasuchil{animation-name:ofig-float}
.ofig--vela{aspect-ratio:16/24}
.ofig--vela svg{filter:drop-shadow(0 -2px 6px rgba(255,176,32,.55))}
.ofig--arbol,.ofig--arbol-nieve{aspect-ratio:40/52;color:#ffd15a;--sway:2.5deg}
.ofig--arbol svg,.ofig--arbol-nieve svg{animation:ofig-star 2.8s ease-in-out var(--dl) infinite alternate}
.ofig--cor-brillo,.ofig--cor-contorno,.ofig--cor-flecha,.ofig--cor-destello{aspect-ratio:40/38;color:#fff}
.ofig--cor-brillo svg{filter:drop-shadow(0 0 6px rgba(255,59,92,.45)) drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ofig--cor-brillo svg,.ofig--cor-destello svg{animation:ofig-spark 2.2s ease-in-out var(--dl) infinite alternate}
.ofig--cor-contorno{animation-name:ofig-float}
@keyframes ofig-spark{from{color:#fff}to{color:#ff9cc0}}
@keyframes ofig-sway{from{transform:rotate(calc(var(--r) - var(--sway)))}to{transform:rotate(calc(var(--r) + var(--sway)))}}
@keyframes ofig-float{from{transform:translateY(0) rotate(calc(var(--r) - 3deg))}to{transform:translateY(var(--fy)) rotate(calc(var(--r) + 3deg))}}
@keyframes ofig-glow{from{color:#ffe07a}to{color:#ff8a1f}}
@keyframes ofig-eyes{from{color:#19c3c3}to{color:#ff4fa3}}
@keyframes ofig-star{from{color:#ffd15a}to{color:#fff6cf}}
.ofigs{pointer-events:none}
.is-fix .ofig{position:absolute}
.ofig-host{position:relative}
/* títulos del Inicio y de Explorar (dentro del h2, en el flujo: nunca tapa nada). 28–34 px celular, 38–46 px escritorio */
.ofig--t{--fs:34px;vertical-align:-.32em;margin-block:-.6em}
.ofig--t.ofig--l{margin-right:.4em}
.ofig--t.ofig--r{margin-left:.45em}
/* celular/tableta: asomando por el borde de la pantalla en el hueco entre secciones del Inicio (hueco de 52 px).
   El contenedor ocupa el ancho de la pantalla y recorta lo que asoma: no crea desplazamiento lateral */
.ofigs--peek{position:absolute;top:-51px;left:-16px;right:-16px;height:50px;overflow:hidden}
.ofigs--peek .ofig{top:2px;--fs:48px}
.ofigs--peek.is-l .ofig:nth-child(1){left:-18px}
.ofigs--peek.is-r .ofig:nth-child(1){right:-16px}
.ofigs--peek.is-r .ofig:nth-child(2){right:38px;top:12px;--fs:38px}
/* banner del canal. Celular: asomando por el borde izquierdo, por encima del avatar y del nombre (que suben sobre el banner).
   Desde 700 px: esquina de abajo a la derecha, recortadas por el borde */
.ofigs--ban{position:absolute;z-index:2;inset:0}
.ofigs--ban .ofig:nth-child(1){left:-18px;top:calc(var(--safe-t) + 26px);--fs:68px}
.ofigs--ban .ofig:nth-child(2){left:50px;top:calc(var(--safe-t) + 42px);--fs:52px}
.ofigs--ban .ofig:nth-child(3){left:104px;top:calc(var(--safe-t) + 54px);--fs:40px}
/* perfil: esquinas de arriba de la cabecera, recortadas por su borde */
.prof{position:relative}
.ofigs--prof{position:absolute;inset:0;overflow:hidden}
.ofigs--prof .ofig:nth-child(1){left:-12px;top:-14px;--fs:66px}
.ofigs--prof .ofig:nth-child(2){right:-14px;top:-16px;--fs:78px}
.ofigs--prof .ofig:nth-child(3){right:54px;top:-8px;--fs:56px}
/* Explorar: racimo en la fila del título de cada cuadrícula y en el hueco de abajo */
.ofigs--sh{display:inline-flex;align-items:flex-end;gap:8px;margin:-14px 0 -6px auto;align-self:center}
.ofigs--sh .ofig{--fs:36px}
.ofigs--under{position:absolute;top:calc(100% + 3px);right:4px;display:flex;align-items:flex-start;gap:12px}
.ofigs--under.is-l{right:auto;left:4px}
.ofigs--under .ofig{--fs:26px}
/* pie: fila densa de pie sobre la línea del pie (32–48 px) */
.foot{position:relative}
.ofigs--foot{position:absolute;left:10px;right:10px;bottom:calc(100% - 3px);display:flex;justify-content:space-between;align-items:flex-end}
.ofigs--foot .ofig{--fs:40px}
.ofigs--foot .ofig:nth-child(n+10){display:none}
/* puerta +18: a los lados del logo (celular: hasta 22vw) */
.g-logo-w{position:relative;display:block}
.ofigs--glogo .ofig{bottom:2px;height:min(var(--fs),22vw);--fs:96px}
.ofigs--glogo .ofig:nth-child(1){right:calc(100% + 4px)}
.ofigs--glogo .ofig:nth-child(2){left:calc(100% + 4px);--fs:84px}
.ofigs--gate{display:none}
/* menú lateral: encabezados de bloque (20–24 px) y racimo abajo si cabe (decor.js lo oculta si haría scroll) */
.ofigs--dh{display:inline-flex;align-items:flex-end;gap:6px;margin:-6px 0 -4px auto}
.ofigs--dh .ofig{--fs:24px}
.ofigs--sidebot{position:relative;display:block;height:64px;margin-top:auto}
.ofigs--sidebot[hidden]{display:none}
.ofigs--sidebot .ofig{bottom:0}
.ofigs--sidebot .ofig:nth-child(1){left:14px;--fs:60px}
.ofigs--sidebot .ofig:nth-child(2){left:50%;margin-left:-20px;--fs:48px}
.ofigs--sidebot .ofig:nth-child(3){right:14px;--fs:64px}
.ofigs--sidebot:not([hidden]) + .side-foot{margin-top:0}
.ofig-gut{display:none}
@media (min-width:700px){
  .ofig--t{--fs:46px}
  .ofigs--foot .ofig:nth-child(n+10){display:inline-block}
  .ofigs--foot .ofig{--fs:48px}
  .ofigs--sh .ofig{--fs:44px}
  .ofigs--under .ofig{--fs:28px}
  .ofigs--ban .ofig:nth-child(n){top:auto;left:auto}
  .ofigs--ban .ofig:nth-child(1){right:-22px;bottom:-24px;--fs:108px}
  .ofigs--ban .ofig:nth-child(2){right:78px;bottom:-14px;--fs:78px}
  .ofigs--ban .ofig:nth-child(3){right:152px;bottom:-10px;--fs:60px}
}
@media (min-width:1024px){
  .ofigs--foot{left:0;right:0}
  /* en escritorio el avatar va a la izquierda: las figuras se juntan en la esquina derecha */
  .ofigs--prof .ofig:nth-child(1){left:auto;right:172px;top:-14px;--fs:64px}
  .ofigs--prof .ofig:nth-child(2){right:-16px;top:-18px;--fs:96px}
  .ofigs--prof .ofig:nth-child(3){right:88px;top:-10px;--fs:74px}
}
/* márgenes laterales: en escritorio ancho la columna abre un margen para racimos grandes (60–110 px), algunos medio asomados */
@media (min-width:1200px){
  html.ofig-on .view > .vw{--gut:68px;position:relative;max-width:calc(1180px + 2 * var(--gut));padding-inline:var(--gut)}
  html.ofig-on .hbanner{margin-inline:calc(-28px - var(--gut))}
  .ofigs--peek{display:none}
  .ofig-gut{display:block;position:absolute;top:0;bottom:0;left:-28px;right:-28px;overflow:hidden;pointer-events:none}
  .ofigs--gut{position:absolute;width:calc(var(--gut) + 28px);height:230px}
  .ofigs--gut.is-l{left:0}
  .ofigs--gut.is-r{right:0}
  .ofigs--gut .ofig:nth-child(1){top:0;--fs:106px}
  .ofigs--gut .ofig:nth-child(2){top:112px;--fs:72px}
  .ofigs--gut .ofig:nth-child(3){top:180px;--fs:58px}
  .ofigs--gut.is-l .ofig:nth-child(1){left:-40px}
  .ofigs--gut.is-l .ofig:nth-child(2){left:12px}
  .ofigs--gut.is-l .ofig:nth-child(3){left:-8px}
  .ofigs--gut.is-r .ofig:nth-child(1){right:-40px}
  .ofigs--gut.is-r .ofig:nth-child(2){right:12px}
  .ofigs--gut.is-r .ofig:nth-child(3){right:-8px}
}
/* puerta +18 en pantallas grandes: esquinas y laterales de la escena (90–160 px); las de los lados y arriba flotan */
@media (min-width:900px) and (min-height:640px){
  .ofigs--gate{display:block;position:absolute;inset:0;overflow:hidden}
  .ofigs--gate .ofig:nth-child(-n+4){bottom:calc(46px + var(--safe-b) + 12px)}
  .ofigs--gate .ofig:nth-child(1){left:24px;--fs:110px}
  .ofigs--gate .ofig:nth-child(2){left:140px;--fs:72px}
  .ofigs--gate .ofig:nth-child(3){right:140px;--fs:72px}
  .ofigs--gate .ofig:nth-child(4){right:24px;--fs:110px}
  .ofigs--gate .ofig:nth-child(n+5){display:none}
}
@media (min-width:1200px) and (min-height:700px){
  .ofigs--gate .ofig:nth-child(1),.ofigs--gate .ofig:nth-child(4){--fs:156px}
  .ofigs--gate .ofig:nth-child(2){left:176px;--fs:96px}
  .ofigs--gate .ofig:nth-child(3){right:176px;--fs:96px}
  .ofigs--gate .ofig:nth-child(n+5){display:block;--fy:-14px;animation-name:ofig-float;animation-duration:6.5s}
  .ofigs--gate .ofig:nth-child(5){left:-34px;top:40%;--fs:130px}
  .ofigs--gate .ofig:nth-child(6){right:-34px;top:34%;--fs:130px}
  .ofigs--gate .ofig:nth-child(7){left:56px;top:calc(var(--safe-t) + 64px);--fs:96px}
  .ofigs--gate .ofig:nth-child(8){right:56px;top:calc(var(--safe-t) + 64px);--fs:96px}
}
/* cuadrículas de videos y fotos: fila decorativa fina entre bloques de miniaturas (decor.js › gridDeco).
   Celular: 32–44 px asomando por los bordes (la fila recorta: sin desbordes). Escritorio: más figuras y, con margen, en los márgenes */
.ofig-grow{grid-column:1 / -1;position:relative;height:46px;overflow:hidden;pointer-events:none}
.ofig-grow .ofig{bottom:2px}
.ofig-grow .ofig:nth-child(1){left:-10px;--fs:44px}
.ofig-grow .ofig:nth-child(2){right:-10px;--fs:42px}
.ofig-grow .ofig:nth-child(3){left:calc(50% - 16px);--fs:32px}
.ofig-grow .ofig:nth-child(n+4){display:none}
/* feed «Para ti»: detrás del feed, a los lados del marco (solo escritorio); celular: junto a «Para ti» */
.ofig-feed{display:none}
/* tira del feed en el celular: a lo ancho, pegada arriba (cruza un poco el borde), detrás de los botones de la barra */
.topbar > .ofeed-strip{position:absolute;z-index:-1;left:0;right:0;top:calc(var(--safe-t) - 5px);height:28px;display:flex;overflow:hidden;pointer-events:none}
.ost{flex:none;display:block;overflow:visible;transform-origin:50% 2px;animation:ost-sway 3.6s var(--ease) calc(var(--i) * -.7s) infinite alternate}
@keyframes ost-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
/* Navidad: luces que se encienden alternadas, con brillo de su color */
.topbar > .ofeed-strip--st-luz{top:calc(var(--safe-t) - 2px)}
.ofeed-strip--st-luz .ost{width:40px;height:26px;color:var(--c);filter:drop-shadow(0 0 5px currentColor);animation:ost-blink 1.5s var(--ease) calc(var(--i) * -1.5s) infinite alternate}
.ofeed-strip--st-luz .ost:nth-child(4n+1){--c:#ff4d57}
.ofeed-strip--st-luz .ost:nth-child(4n+2){--c:#ffd15a}
.ofeed-strip--st-luz .ost:nth-child(4n+3){--c:#4fd38f}
.ofeed-strip--st-luz .ost:nth-child(4n+4){--c:#6fc3ff}
@keyframes ost-blink{from{color:var(--c)}to{color:color-mix(in srgb,var(--c) 42%,#0b0b10)}}
/* Halloween: calabazas negras con la cara que late en morado */
.ofeed-strip--st-calabaza .ost{width:41px;height:26px;color:#c58cff;filter:drop-shadow(0 0 3px rgba(183,124,255,.75));animation:ost-sway 4.2s var(--ease) calc(var(--i) * -.9s) infinite alternate,ost-glow 2.4s var(--ease) calc(var(--i) * -.6s) infinite alternate}
.ofeed-strip--st-calabaza .ost:nth-child(3n+2){scale:.78}
.ofeed-strip--st-calabaza .ost:nth-child(3n){scale:.9}
@keyframes ost-glow{from{color:#d6a8ff}to{color:#6a2fc0}}
/* Día de Muertos: papel picado con calaveritas recortadas, meciéndose */
.ofeed-strip--st-picado .ost{width:28px;height:24px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.ofeed-strip--st-picado .ost:nth-child(5n+1){color:#ff4fa3}
.ofeed-strip--st-picado .ost:nth-child(5n+2){color:#ffab1a}
.ofeed-strip--st-picado .ost:nth-child(5n+3){color:#8b5cf6}
.ofeed-strip--st-picado .ost:nth-child(5n+4){color:#22b573}
.ofeed-strip--st-picado .ost:nth-child(5n+5){color:#19c3c3}
/* San Valentín: corazones de varios tamaños con un latido suave */
.ofeed-strip--st-corazon .ost{width:30px;height:23px;color:var(--chan);animation:ost-beat 1.8s var(--ease) calc(var(--i) * -.45s) infinite}
.ofeed-strip--st-corazon .ost:nth-child(3n+2){color:var(--live);scale:.74}
.ofeed-strip--st-corazon .ost:nth-child(3n){color:#ffb3c6;scale:.88}
@keyframes ost-beat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.14)}35%{transform:scale(.97)}}
html.tab-hidden .ost,html:not([data-surface="feed"]) .ost{animation-play-state:paused}
html.ctx-grid .topbar > .ofeed-strip{display:none}
@media (min-width:1024px){.topbar > .ofeed-strip{display:none}}
@media (prefers-reduced-motion:reduce){.ost{animation:none!important}}
@media (min-width:1024px){
  .ofig-grow{height:58px;overflow:visible}
  .ofig-grow .ofig:nth-child(n+4){display:block}
  .ofig-grow .ofig:nth-child(1){left:1%;--fs:48px}
  .ofig-grow .ofig:nth-child(2){right:1%;--fs:46px}
  .ofig-grow .ofig:nth-child(3){left:calc(50% - 20px);--fs:40px}
  .ofig-grow .ofig:nth-child(4){left:25%;--fs:34px}
  .ofig-grow .ofig:nth-child(5){right:25%;--fs:38px}
  .ofig-grow .ofig:nth-child(n+6){display:none}
  .ofig-feed{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .ofeed-p{position:absolute;display:block;transition:opacity .35s var(--ease),transform .5s var(--ease)}
  .ofeed-p[hidden]{display:none}
  .ofeed-p.is-out{opacity:0;transform:translateY(14px) scale(.86)}
  .ofeed-p{height:var(--fs)}
  .ofeed-p .ofig{position:relative;display:block;height:100%}
  html:not([data-surface="feed"]) .ofig-feed{visibility:hidden}
  html:not([data-surface="feed"]) .ofig-feed .ofig,html:not([data-surface="feed"]) .ofig-feed .ofig svg{animation-play-state:paused}
}
@media (min-width:1200px){
  /* en el margen lateral: caben enteras entre la cuadrícula y el borde (sin desbordes) */
  html.ofig-on .ofig-grow .ofig:nth-child(n+6){display:block;bottom:-8px;--fs:66px}
  html.ofig-on .ofig-grow .ofig:nth-child(6){left:calc(-1 * var(--gut) - 2px)}
  html.ofig-on .ofig-grow .ofig:nth-child(7){right:calc(-1 * var(--gut) - 2px)}
}
@media (prefers-reduced-motion:reduce){.ofeed-p{transition:none}}
html.tab-hidden .ofig,html.tab-hidden .ofig svg{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ofig,.ofig svg{animation:none}}
/* explore */
.ctiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ctile{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--bg-3);text-align:left}
.ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.1);transition:transform .5s var(--ease),filter .3s}
.ctile:hover img{transform:scale(1.05);filter:brightness(.75)}
.ctile span{position:absolute;left:10px;right:10px;bottom:9px;display:grid;gap:3px;text-shadow:var(--ts)}
.ctile b{font:700 14px/1.15 var(--fd)}
.ctile small{font:700 12px/1 var(--fb);color:var(--ink-2)}
.ctile--vip{border-color:rgba(var(--live-rgb),.5);background:radial-gradient(70% 60% at 50% 30%,rgba(var(--live-rgb),.2),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),var(--bg-2)}
.ctile--vip > svg.i{position:absolute;top:12px;left:10px;color:var(--live)}
.ctile--vip small{color:var(--live-2)}
.hrow{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.hrow .tile{flex:0 0 118px;border-radius:5px;scroll-snap-align:start}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.shead h2{margin:0}
.shead button{min-height:40px;font:800 13px/1 var(--fb);color:var(--chan-2);border-radius:4px}

/* canal subviews */
.offers{display:grid;gap:14px}
.offer{position:relative;padding:20px 16px 16px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)}
.offer:first-child{border-color:rgba(var(--warm-rgb),.55)}
.offer .chip{position:absolute;top:-12px;left:14px}
.offer h3{font:700 19px/1.2 var(--fd);letter-spacing:-.01em}
.offer p{color:var(--ink-2);margin-top:6px}
.steps{counter-reset:s;display:grid;gap:2px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:center;min-height:60px;padding:8px 0;border-bottom:1px solid var(--line);font:700 15px/1.35 var(--fb)}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--chan);color:var(--chan-2);font:700 14px/1 var(--fd)}
.kv{display:grid;border-top:1px solid var(--line)}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--ink-3);font-weight:600}
.kv dd{font-weight:700;text-align:right}
.kv dd.price{font:700 18px/1.2 var(--fd);color:var(--warm)}
.chat{display:grid;gap:4px}
.msg{padding:10px 12px;border-radius:6px;font-size:14px;line-height:1.45;transition:background .2s}
.msg:hover{background:rgba(255,255,255,.04)}
.msg .who{display:inline-flex;align-items:center;gap:6px;font:800 13.5px/1 var(--fb);color:var(--c,var(--chan-2));vertical-align:-1px}
.msg .bdg{width:18px;height:18px;border-radius:3px;display:inline-grid;place-items:center;background:var(--chan);color:var(--chan-ink)}
.msg .bdg svg.i{width:12px;height:12px;stroke-width:2.2}
.msg .stars{display:inline-flex;gap:1px;color:var(--warm);vertical-align:-2px;margin:0 6px 0 4px}
.msg .stars svg{width:12px;height:12px}
.msg q{color:var(--ink);quotes:none}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 2px;cursor:pointer;font:700 15px/1.35 var(--fb);border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg.i{width:18px;height:18px;color:var(--ink-3);transition:transform .3s var(--ease)}
.faq details[open] summary svg.i{transform:rotate(90deg);color:var(--chan)}
.faq .ans{padding:0 2px 18px;color:var(--ink-2);max-width:65ch}
.faq .ans p + p{margin-top:8px}

/* ---------- list (sheet + dock) ---------- */
.lst{display:grid}
.li{display:grid;grid-template-columns:56px minmax(0,1fr) auto 44px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.li img{width:56px;height:40px;object-fit:cover;border-radius:4px}
.li b{font:700 13.5px/1.3 var(--fb);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.li span{display:block;font:600 12px/1.3 var(--fb);color:var(--ink-3);margin-top:2px}
.li .pr{font:700 14px/1 var(--fd);color:var(--warm);white-space:nowrap}
.li .ibtn{color:var(--ink-3)}
.li .ibtn:hover{color:var(--ink)}
.li .ibtn svg.i{width:18px;height:18px}
.promo{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px;border:1px solid rgba(var(--warm-rgb),.35);border-radius:6px;background:rgba(var(--warm-rgb),.06);font:600 13.5px/1.4 var(--fb);color:var(--ink-2)}
.promo svg.i{color:var(--warm);width:20px;height:20px}
.promo b{color:var(--ink)}
.total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.total span{font:700 14px/1 var(--fb);color:var(--ink-2)}
.total b{font:700 26px/1 var(--fd);color:var(--warm)}
.pay{margin-top:10px;font:600 12.5px/1.4 var(--fb);color:var(--ink-3);text-align:center}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:18px 8px 8px}
.empty img{width:72px;height:72px;opacity:.9}
.empty b{font:700 16px/1.2 var(--fd)}
.empty p{color:var(--ink-2);font-size:14px;max-width:32ch}

dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88dvh;padding:0;border:0;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;background:var(--sheet);color:var(--ink);flex-direction:column;overflow:hidden}
dialog.sheet[open]{display:flex;animation:sheetUp .45s var(--ease)}
dialog.sheet::backdrop{background:rgba(4,4,8,.72)}
@keyframes sheetUp{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.sh-head{position:relative;display:flex;align-items:center;gap:10px;padding:16px 8px 10px 16px;border-bottom:1px solid var(--line)}
.sh-head::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.22)}
.sh-head h2{font:700 18px/1.1 var(--fd);flex:1}
.sh-head h2 small{font:700 13px/1 var(--fb);color:var(--ink-3);margin-left:6px}
.sh-body{overflow-y:auto;padding:8px 16px 16px;overscroll-behavior:contain;min-height:0}
.sh-foot{padding:14px 16px calc(14px + var(--safe-b));border-top:1px solid var(--line);background:var(--sheet)}
.sh-foot .cta-row .btn{flex:1 1 auto;white-space:nowrap;padding:0 14px}
.sh-foot .cta-row .btn + .btn{flex:0 0 auto}
.alerts-in{position:absolute;z-index:5;left:12px;right:12px;top:10px;display:grid;justify-items:center;pointer-events:none}
.inf-media{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;margin:8px 0 18px;background:#000;isolation:isolate}
.inf-media .ph-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(24px) brightness(.45);z-index:-1}
.inf-media .ph-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.inf-h{font:600 19px/1.3 var(--fd);letter-spacing:-.01em;margin:14px 0 16px;text-wrap:balance}
.inf-sub{font:700 15px/1.2 var(--fd);margin:24px 0 10px}

/* ---------- desktop: TikTok-web shell ---------- */
.dock{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.dock-h{display:flex;align-items:center;gap:8px;flex:none;height:38px;padding:0 12px;border-bottom:1px solid var(--line);font:800 11px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dock-h .n{margin-left:auto;color:var(--ink-2)}
.dock-b{padding:8px;min-height:0;overflow-y:auto}
.snav{display:grid;gap:2px}
.snav button{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:6px;font:800 16px/1 var(--fb);color:var(--ink-2);text-align:left}
.snav button svg.i{width:24px;height:24px}
.snav button:hover{background:rgba(255,255,255,.05);color:#fff}
.snav button[aria-current="page"]{color:#fff}
.snav button[aria-current="page"] svg.i{color:var(--chan)}
.snav .badge{position:static;margin-left:auto;border:0}
.lnav{display:grid;gap:2px}
.lnav .scene{width:100%;justify-content:flex-start;height:36px;background:transparent;border-color:transparent;font-size:13px}
.lnav .scene small{margin-left:auto}
.lnav .scene:hover{background:rgba(255,255,255,.04)}
.lnav .scene[aria-pressed="true"]{background:rgba(var(--chan-rgb),.14);border-color:rgba(var(--chan-rgb),.5)}
.lnav .scene--vip{border-color:rgba(var(--live-rgb),.3)}
.lnav .scene--grid{border-color:transparent}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;padding:10px;font:600 12.5px/1.2 var(--fb);color:var(--ink-2)}
.keys li{display:flex;align-items:center;gap:5px}
.keys li.w{grid-column:1 / -1}
.keys li span{margin-left:4px}

@media (min-width:1024px){
  :root{--topH:0px;--ban:0px;--navH:0px}
  html.cats{--topH:0px}
  .bnav,.banner,.tabsrow,.catsrow{display:none!important}
  .app{display:grid;grid-template-columns:236px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:18px 14px 16px;border-right:1px solid var(--line)}
  .side > *{flex:none}
  .brand-d{display:flex;align-items:center;gap:10px;padding:0 4px 6px;color:var(--ink);text-decoration:none;border-radius:6px}
  .brand-d img{width:46px;height:46px}
  .brand-d b{display:block;font:700 15px/1.1 var(--fd);letter-spacing:-.015em}
  .brand-d .chip{margin-top:6px}
  .side-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
  .side-foot .so{display:flex;gap:4px}
  .side-foot .so a{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;color:var(--ink-2);border:1px solid var(--line)}
  .side-foot .so a:hover{color:var(--chan-2);border-color:var(--chan)}
  .main{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding:20px 24px 20px 20px;height:100dvh;min-height:0}
  .feedarea{position:relative;inset:auto;min-height:0}
  .faside{display:flex;flex-direction:column;gap:14px;min-height:0}
  .faside .dock-list{flex:0 1 auto;min-height:150px}
  .faside .dock-list .dock-b{padding:0 12px}
  .faside .li{grid-template-columns:48px minmax(0,1fr) auto 40px;gap:10px}
  .faside .li img{width:48px;height:34px}
  .faside .li .ibtn{width:40px;height:40px}
  .dock-f{padding:12px;border-top:1px solid var(--line)}
  .dock-f .total b{font-size:22px}
  .faside .promo{margin:10px 0 12px}
  .side-bx{flex:none;display:grid;justify-items:center;padding-top:22px;margin-top:auto}
  .topbar{background:none;padding:0;left:0;right:auto;top:0}
  .ctxrow{padding:0;height:auto}
  .ctxrow .lbl{display:none}
  .feed{background:transparent}
  .slide{display:flex;align-items:center;justify-content:center;gap:14px;background:transparent;padding-right:70px}
  .vbox{position:relative;inset:auto;height:calc(100% - 20px);aspect-ratio:9/16;border-radius:12px;flex:none;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
  .rail{position:static;align-self:flex-end;margin-bottom:18px;width:64px}
  .ract .rb{background:var(--bg-3)}
  .ract:hover .rb{background:var(--bg-4)}
  .ract kbd{display:inline-flex}
  .cap{left:16px;right:16px;bottom:18px}
  .vtools{top:12px;right:10px}
  .pdots{top:14px}
  .alerts{top:14px}
  .brkov{padding:24px 18px 30px}
  .cardin{padding:24px 28px}
  .fnav{display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:10px;z-index:6}
  .cn{width:52px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:26px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink)}
  .cn:hover{border-color:var(--chan);color:var(--chan-2)}
  .cn[disabled]{opacity:.35;cursor:default;border-color:var(--line);color:var(--ink)}
  .cn-c{display:grid;justify-items:center;gap:3px;padding:4px 0;font:700 14px/1 var(--fd)}
  .cn-c small{font:700 11px/1 var(--fb);color:var(--ink-3)}
  .view{position:absolute;inset:0;z-index:8;padding:0 28px 40px}
  .vh{margin:0 -28px;padding:10px 20px}
  .vb{padding-top:32px}
  .ptabs{top:56px;margin:28px 0 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px;margin:0}
  .grid .tile{border-radius:5px}
  .pchips{margin:0;padding:2px 0}
  .ctiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hrow{margin:0;padding:0 0 4px}
  .hrow .tile{flex-basis:150px}
  .prof{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:28px;padding-top:32px}
  .prof .avatar{grid-row:1 / span 6;width:132px;height:132px}
  .prof h2{margin-top:6px;font-size:26px}
  .pstats{justify-content:flex-start}
  .pstats > *:first-child{padding-left:0}
  .pstats > *{justify-items:start}
  .pcta,.plinks{justify-content:flex-start}
  dialog.sheet{inset:0;margin:auto;width:min(480px,calc(100% - 40px));max-height:84dvh;border:1px solid var(--line-2);border-radius:10px}
  .sh-head::before{display:none}
  .sh-head{padding-top:12px}
}
@media (min-width:1024px){.offers--row{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px) and (max-width:1279px){
  .main{grid-template-columns:minmax(0,1fr)}
  .faside{display:none}
}
@media (min-width:1024px) and (max-height:760px){.side-bx{display:none}}
@media (max-width:1023px) and (max-height:700px){
  .rail{gap:6px}
  .ract .rb{width:44px;height:44px}
  .avatar{width:46px;height:46px}
  .disc{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .slide:not(.on) .cap,html.js .slide:not(.on) .rail{opacity:1}
  .g-track{animation:none}
  .g-track{flex-wrap:wrap}
}

/* =====================================================================
   App real: añadidos sobre el mockup (mismo mundo visual)
   ===================================================================== */
:root{--gut:16px;--ad-slot-bg:var(--adbg)}
html{background:var(--bg)}
body{overscroll-behavior:none}
textarea{font:inherit}
select{font:inherit}

/* skip link + SSR (sin JS, buscadores y páginas de error) */
.skip{position:fixed;z-index:200;left:12px;top:-60px;padding:10px 14px;border-radius:6px;background:var(--chan);color:var(--chan-ink);font:800 14px/1 var(--fb);text-decoration:none;transition:top .2s}
.skip:focus-visible{top:calc(var(--safe-t) + 10px);outline-color:#fff}
html.js:not(.app-on) #ssr{opacity:0;animation:ssrShow .01s 4s forwards}
@keyframes ssrShow{to{opacity:1}}
html.app-on #ssr{display:none}
html:not(.app-on) body{overflow:auto;height:auto}
.ssr{max-width:760px;margin:0 auto;padding:32px var(--gut) 64px;color:var(--ink-2)}
.ssr h1,.ssr .ssr-title{font:800 clamp(26px,6vw,40px)/1.05 var(--fd);letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0 0 14px}
.ssr h2{font:700 19px/1.2 var(--fd);color:var(--ink);margin:36px 0 12px}
.ssr p{margin:0 0 12px;max-width:65ch}
.ssr ul,.ssr ol{margin:0 0 12px}
.ssr ol{list-style:decimal;padding-left:22px}
.ssr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ssr-card a{display:grid;gap:6px;color:var(--ink);text-decoration:none}
.ssr-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:var(--bg-3)}
.ssr-card-t{font:700 14px/1.3 var(--fb)}
.ssr-card-m{font:600 12.5px/1.2 var(--fb);color:var(--ink-3)}
.ssr details{border-bottom:1px solid var(--line);padding:12px 0}
.ssr summary{cursor:pointer;font:700 15px/1.35 var(--fb);color:var(--ink)}
.ssr blockquote{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)}
.ssr blockquote footer{margin-top:6px;font-size:13px;color:var(--ink-3)}
.ssr-item img,.ssr-post img{max-width:100%;border-radius:6px;margin:10px 0}
.ssr-meta{font-size:13px;color:var(--ink-3)}
.ssr-cats li{padding:6px 0;border-bottom:1px solid var(--line)}
.ssr-note{padding:16px;text-align:center;color:var(--warm)}
body.error-page{overflow:auto;height:auto;display:grid;place-content:center;min-height:100dvh}
body.error-page .ssr{text-align:center}
body.error-page .ssr a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:6px;background:var(--warm);color:var(--warm-ink);font:800 15px/1 var(--fb);text-decoration:none}

/* live chip neutral (sin directo) */
.chip--off{color:var(--ink-2)}
.chip--brand{font-size:10px}
.handle .chip--off{display:none}

/* precio con aproximado en moneda local */
.approx{font-weight:700;color:var(--ink-3);white-space:nowrap}
.tick-t .approx{color:var(--ink-2)}
.t-p .approx{display:block;margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.82);text-align:right}
.li .pr{text-align:right}
.li .pr .approx{display:block;margin-top:4px;font:700 11px/1 var(--fb)}
.total .approx{display:block;margin-top:6px;font:700 13px/1 var(--fb);text-align:right}
.total{align-items:flex-start}
.total > span:first-child{padding-top:6px}
.cnote{margin-top:8px;font:600 12px/1.35 var(--fb);color:var(--ink-3)}
.kv dd .approx{display:block;margin-top:4px;font:700 12.5px/1 var(--fb)}

/* anuncios de display: iframe aislado o anuncio propio con el look del sitio */
.nslot{position:relative;flex:none;margin-top:22px}
.nslot > iframe{display:block;border:0;background:var(--adbg)}
.nslot .obs-l{z-index:2}
.nslot--300x250{width:300px;height:250px}
.nslot--728x90{width:728px;height:90px}
.nslot--320x50{width:320px;height:50px;margin:0}
.nslot--native{width:300px;height:250px}
.nslot .obs{position:absolute;inset:0}
.hab{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:8px;padding:16px 18px;text-align:center;color:var(--ink);text-decoration:none}
.hab b{font:700 17px/1.2 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.hab span{font:600 13px/1.4 var(--fb);color:var(--ink-2);max-width:32ch;text-wrap:pretty}
.hab .btn{min-height:40px;margin-top:4px;font-size:13.5px;pointer-events:none}
.hab:hover .btn{background:var(--warm-2);border-color:var(--warm-2)}
.nslot--728x90 .hab{grid-auto-flow:column;grid-template-columns:auto 1fr auto;justify-items:start;text-align:left;gap:18px;padding:10px 18px}
.nslot--728x90 .hab .hab-t{display:grid;gap:4px}
.nslot--728x90 .hab b{font-size:16px}
.nslot--728x90 .hab .chip{align-self:center}
.nslot--320x50 .hab{grid-auto-flow:column;grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;gap:8px;padding:0 10px 0 8px;text-align:left}
.nslot--320x50 .hab b{font:700 12px/1.15 var(--fd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nslot--320x50 .hab .cta{font:800 12px/1 var(--fb);color:var(--warm);white-space:nowrap}
.nslot--320x50 .hab .chip{height:18px;padding:0 5px;font-size:9px}
.bxwrap .nslot--728x90{display:none}
@container (min-width:780px){.bxwrap .nslot--728x90{display:block}.bxwrap .nslot--300x250{display:none}}
.banner .nslot{position:absolute;inset:0}
.banner{height:50px}
.tile--nat iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tile--nat .hab{padding:10px 8px;gap:6px}
.tile--nat .hab b{font-size:12.5px}
.tile--nat .hab span{font-size:11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile--nat .hab .cta{font:800 11.5px/1 var(--fb);color:var(--warm)}
.tile--nat .chip--nat{position:absolute;top:6px;left:6px;height:18px;font-size:9px;z-index:2}

/* feed: portada del pack antes de las fotos, pre-roll VAST y anuncio propio */
.cover{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.cover .ph-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(30px) saturate(1.25) brightness(.42);z-index:-1}
.cover .ph-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 42%}
.s-item .vbox.loading .st-buf{opacity:1}
.pack-go{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:24px;background:rgba(var(--bg-rgb),.72);border:1px solid var(--line-2);font:800 14px/1 var(--fb);color:#fff}
.vbox.loading .pack-go{opacity:0}
.brkv .hab{padding:14px 16px 58px}
.brkv .hab b{font-size:clamp(17px,4.6vw,22px)}
.brkv .hab .btn{pointer-events:auto}
.brkv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.brkv .vast-hit{position:absolute;inset:0 0 58px 0;z-index:2}
.brkv .vast-snd{position:absolute;left:8px;bottom:12px;z-index:3;background:rgba(var(--bg-rgb),.72);border-radius:50%}
.brkv .vast-snd .i-vol{display:none}
.brkv .vast-snd[aria-pressed="true"] .i-vol{display:block}
.brkv .vast-snd[aria-pressed="true"] .i-mute{display:none}
.brkov .brk-left,.brkov .brk-back{font-variant-numeric:tabular-nums}
.s-nat .cardin{max-width:none}
.s-nat .nslot{margin-top:18px}
.s-nat .nslot--native .obs,.s-nat .nslot--300x250 .obs{position:absolute}
.card-acts .btn{min-width:0}

/* VIP: llave activa con temporizador discreto */
.vipt{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 10px;border-radius:18px;border:1px solid rgba(var(--live-rgb),.5);background:rgba(var(--live-rgb),.1);font:800 12.5px/1 var(--fb);color:var(--ink);white-space:nowrap}
.vipt svg.i{width:16px;height:16px;color:var(--live)}
.vipt time{font-variant-numeric:tabular-nums;color:var(--live-2)}
.vipt button{min-height:32px;padding:0 10px;border-radius:14px;font:800 11.5px/1 var(--fb);color:var(--ink-2)}
.vipt button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.side .vipt{justify-content:space-between;width:100%}
.vipbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 4px}
.vipbar p{font:600 13.5px/1.4 var(--fb);color:var(--ink-2);max-width:48ch}
.scene--vip svg.i{width:15px;height:15px;color:var(--live)}
.scene--vip span{color:var(--live-2)}
.viphelp{margin-top:6px}
.dlg-vip .sh-body{padding-top:18px}
.dlg-vip .card-h{font-size:clamp(24px,6vw,30px);display:flex;align-items:center;gap:10px}
.dlg-vip .card-h svg.i{width:26px;height:26px;color:var(--live)}
.dlg-vip .lede{margin-top:10px}
.dlg-vip .keyform{max-width:none}
.dlg-vip .cta-row{margin-top:18px}

/* hoja de reseñas y dock de escritorio */
.rev-more{margin-top:16px}
.sh-sub{font:700 14px/1.2 var(--fd);margin:16px 0 8px;color:var(--ink-2)}
.dock-rev{flex:1 1 auto;min-height:0;display:flex}
.dock-rev .dock-b{flex:1 1 auto;padding:4px 6px}
.dock-rev .msg{font-size:13px;padding:8px}
.dock-rev .dock-f{padding:8px 12px}
.dock-rev .dock-f a{font:800 13px/1 var(--fb);display:inline-flex;align-items:center;gap:4px;min-height:36px}
.dock-rev .dock-f svg.i{width:15px;height:15px}

/* estrellas con medias estrellas */
.stars{position:relative;display:inline-flex;flex:none;vertical-align:-2px;line-height:0}
.stars .s0,.stars .s1{display:inline-flex;gap:1px}
.stars .s0{color:rgba(var(--warm-rgb),.3)}
.stars .s1{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--warm);white-space:nowrap}
.stars svg{width:13px;height:13px;flex:none;fill:currentColor;stroke:none}
.msg .stars{margin:0 6px 0 4px}
.msg .stars svg{width:12px;height:12px}

/* página genérica (blog, post, personalizado, invitación) */
.view--page .vb{max-width:720px}
.vh .ibtn{flex:none}
.pg-load{display:grid;place-items:center;min-height:40vh}
.spin{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--chan);animation:spin .9s linear infinite}
.pg-err{display:grid;justify-items:center;gap:12px;text-align:center;padding:48px 12px}
.pg-err p{color:var(--ink-2);max-width:38ch}

/* blog */
.posts{display:grid;gap:14px}
.pcard{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--ink);text-decoration:none;transition:border-color .2s}
.pcard:hover{border-color:var(--chan)}
.pcard img{width:112px;aspect-ratio:4/3;object-fit:cover;border-radius:5px;background:var(--bg-3)}
.pcard b{display:block;font:700 16px/1.25 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.pcard p{margin-top:6px;font-size:14px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;font:700 12px/1.2 var(--fb);color:var(--ink-3)}
.pmeta span{display:inline-flex;align-items:center;gap:5px}
.pmeta svg.i{width:14px;height:14px}
.pcard--feat{grid-template-columns:1fr;border-color:rgba(var(--warm-rgb),.5)}
.pcard--feat img{width:100%;aspect-ratio:16/9}
.pcard--feat b{font-size:21px}
.pcard .chip{position:absolute;top:20px;left:20px}
@media (min-width:1024px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.pcard--feat{grid-column:1 / -1;grid-template-columns:1.2fr 1fr;align-items:center}}

/* post */
.post-h{font:800 clamp(26px,6.6vw,40px)/1.06 var(--fd);letter-spacing:-.025em;text-wrap:balance}
.post-cover{width:100%;max-height:70vh;object-fit:contain;border-radius:8px;background:#000;margin-top:18px}
.post-body{max-width:68ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.post-body > * + *{margin-top:1em}
.post-body h1,.post-body h2,.post-body h3,.post-body h4{font-family:var(--fd);color:var(--ink);line-height:1.2;letter-spacing:-.01em;margin-top:1.8em}
.post-body h2{font-size:22px}.post-body h3{font-size:19px}.post-body h4{font-size:17px}
.post-body b,.post-body strong{color:var(--ink)}
.post-body ul{list-style:disc;padding-left:1.3em}
.post-body ol{list-style:decimal;padding-left:1.3em}
.post-body li + li{margin-top:.35em}
.post-body img,.post-body video{max-width:100%;height:auto;border-radius:6px}
.post-body blockquote{margin:1.2em 0;padding:4px 0 4px 16px;border-left:1px solid var(--chan);color:var(--ink)}
.post-body a{color:var(--chan-2)}
.post-body p:empty{display:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gallery button{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--bg-3)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery button:hover img{transform:scale(1.04)}
.gallery button:focus-visible{outline-offset:-3px}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.ptags span{font:800 13px/1 var(--fb);color:var(--chan-2);padding:8px 10px;border:1px solid var(--line);border-radius:16px}
dialog.lb{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:rgba(4,4,8,.95);color:var(--ink)}
dialog.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:fadeIn .3s var(--ease)}
dialog.lb::backdrop{background:rgba(4,4,8,.9)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 6px) 8px 6px 16px;font:800 13px/1 var(--fb);color:var(--ink-2)}
.lb-img{position:relative;display:grid;place-items:center;min-height:0;padding:0 8px}
.lb-img img{max-width:100%;max-height:100%;object-fit:contain}
.lb-nav{display:flex;justify-content:center;gap:12px;padding:10px 0 calc(var(--safe-b) + 14px)}
.lb-nav .ibtn{border:1px solid var(--line-2);border-radius:50%;width:48px;height:48px}

/* muro de reseñas */
.rsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 26px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.rsum-big{display:grid;justify-items:start;gap:6px}
.rsum-big b{font:800 50px/.9 var(--fd);letter-spacing:-.03em}
.rsum-big .stars svg{width:16px;height:16px}
.rsum-big span{font:700 13px/1 var(--fb);color:var(--ink-3)}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;align-items:center;gap:8px;font:700 12.5px/1 var(--fb);color:var(--ink-3)}
.bar i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i b{display:block;height:100%;background:var(--warm);border-radius:3px}
.bar span:last-child{text-align:right}
.rfilters{display:grid;gap:10px;padding:16px 0}
.rlist{display:grid;gap:10px}
.rcard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.rcard > a,.rcard > span.rthumb{display:block;width:64px;height:84px;border-radius:5px;overflow:hidden;background:var(--bg-3)}
.rcard > a img{width:100%;height:100%;object-fit:cover}
.rcard .rhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.rcard .who{font:800 13.5px/1 var(--fb);color:var(--chan-2)}
.rcard time{font:600 12px/1 var(--fb);color:var(--ink-3)}
.rcard q{display:block;margin-top:8px;quotes:none;color:var(--ink);font-size:14.5px;line-height:1.5;text-wrap:pretty;overflow-wrap:anywhere}
.rcard .rit{display:inline-flex;align-items:center;gap:4px;margin-top:8px;min-height:32px;font:800 12.5px/1.2 var(--fb);color:var(--ink-2);text-decoration:none}
.rcard .rit:hover{color:var(--chan-2)}
.rcard .rit svg.i{width:14px;height:14px;flex:none}
.rmore{display:flex;justify-content:center;padding-top:18px}
@media (min-width:1024px){.rlist{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* invitación a reseñar */
.inv-prog{display:flex;align-items:center;gap:10px;font:800 12.5px/1 var(--fb);color:var(--ink-3)}
.inv-prog i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.inv-prog i b{display:block;height:100%;width:100%;background:var(--chan);transform-origin:left;transition:transform .5s var(--ease)}
.inv-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.inv-item img{width:72px;height:96px;object-fit:cover;border-radius:5px;background:var(--bg-3)}
.inv-item b{display:block;font:700 16px/1.25 var(--fd);text-wrap:balance}
.inv-item span{display:block;margin-top:4px;font:700 12.5px/1.2 var(--fb);color:var(--ink-3)}
.fld{display:grid;gap:8px}
.fld > label,.fld > legend,.fld .lbl{font:800 13.5px/1.2 var(--fb);color:var(--ink-2);padding:0}
.fld input[type="text"],.fld textarea,.fld input[type="number"]{width:100%;min-height:48px;padding:12px 14px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink);font-size:16px}
.fld textarea{min-height:130px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--chan);outline-offset:1px;border-color:transparent}
.fld [aria-invalid="true"]{border-color:var(--live)}
.fld .hint{display:flex;justify-content:space-between;gap:12px;font:600 12.5px/1.3 var(--fb);color:var(--ink-3)}
.fld .hint .over{color:var(--live-2)}
.ferr{font:600 13.5px/1.4 var(--fb);color:var(--live-2)}
.check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 14px/1.2 var(--fb);color:var(--ink-2);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--chan);margin:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rate{position:relative;display:inline-flex;gap:6px;padding:4px 0}
.rate .rs{position:relative;width:44px;height:44px;color:rgba(var(--warm-rgb),.28)}
.rate .rs svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.rate .rs .fill{position:absolute;inset:0;overflow:hidden;color:var(--warm);width:0}
.rate .rs .fill svg{width:44px;height:44px}
.rate input{position:absolute;opacity:0;margin:0;width:1px;height:1px}
.rate label{position:absolute;top:0;bottom:0;width:50%;z-index:2;cursor:pointer}
.rate label.l{left:0}.rate label.r{right:0}
.rate:focus-within{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.rate-t{min-height:22px;font:800 15px/1.2 var(--fd);color:var(--warm)}
.inv-acts{display:flex;flex-wrap:wrap;gap:10px}
.inv-acts .btn--warm{flex:1 1 220px}
.thanks{display:grid;justify-items:center;text-align:center;gap:14px;padding:40px 8px}
.thanks img{width:110px;height:110px;filter:drop-shadow(0 12px 28px rgba(var(--chan-rgb),.3))}
.thanks h2{font:800 clamp(24px,6vw,34px)/1.05 var(--fd);letter-spacing:-.02em;text-wrap:balance}
.thanks p{color:var(--ink-2);max-width:40ch}

/* contenido personalizado: pasos */
.wiz-steps{display:flex;gap:6px}
.wiz-steps i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.wiz-steps i.on{background:var(--chan)}
.wiz-steps i.done{background:rgba(var(--chan-rgb),.5)}
.wiz-h{font:700 clamp(21px,5.4vw,26px)/1.15 var(--fd);letter-spacing:-.015em;text-wrap:balance}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:flex;align-items:center;gap:10px;min-height:56px;height:100%;padding:10px 14px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);font:700 14.5px/1.25 var(--fb);color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.opt span svg.i{color:var(--chan-2)}
.opt input:checked + span{border-color:var(--chan);background:rgba(var(--chan-rgb),.14);color:#fff;box-shadow:inset 0 -2px 0 var(--chan)}
.opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.opt:hover span{border-color:var(--ink-3)}
.opts--big .opt span{min-height:92px;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;font-size:16px}
.opts--big .opt span svg.i{width:26px;height:26px}
.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mins{display:flex;align-items:center;gap:10px}
.mins .ibtn{border:1px solid var(--line-2);flex:none}
.mins input{text-align:center;font:700 20px/1 var(--fd)!important;max-width:120px}
.mins span{font:700 14px/1 var(--fb);color:var(--ink-3)}
.wiz-acts{display:flex;flex-wrap:wrap;gap:10px}
.wiz-acts .btn--warm,.wiz-acts .btn--chan{flex:1 1 200px}
.wiz-msg{white-space:pre-wrap;padding:14px;border:1px dashed var(--line-2);border-radius:6px;background:var(--bg-2);font:600 13.5px/1.5 var(--fb);color:var(--ink-2)}

/* pie de página */
.foot{margin:56px -16px 0;padding:26px 16px 10px;border-top:1px solid var(--line);display:grid;gap:18px;color:var(--ink-3);font:600 13px/1.4 var(--fb)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink-2);text-decoration:none;font-weight:700}
.foot nav a:hover{color:var(--chan-2);text-decoration:underline}
.foot-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.foot .chip{color:var(--ink-2)}
@media (min-width:1024px){.foot{margin:64px 0 0;padding:26px 0 10px}}

/* inicio: bloque del blog y del contenido personalizado */
.hblog{display:grid;gap:10px}
.hblog .pcard{grid-template-columns:96px minmax(0,1fr)}
.hblog .pcard img{width:96px}
.hblog .pcard p{-webkit-line-clamp:2}
@media (min-width:1024px){.hblog{grid-template-columns:repeat(3,minmax(0,1fr))}.hblog .pcard{grid-template-columns:1fr}.hblog .pcard img{width:100%;aspect-ratio:16/9}}
.svc li.svc-custom{grid-template-columns:64px 1fr}
.svc .svc-go{margin-top:12px}
.svc .svc-go .btn{min-height:44px}
.hhow{display:grid;gap:22px}
.hhow .kv{margin-top:4px}
.hhow .note{margin-top:4px}
@media (min-width:1024px){.hhow{grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}}
.pay-d{margin-top:10px;display:grid;gap:4px;font:700 13.5px/1.4 var(--fb);color:var(--ink-2)}
.pay-d code{font:700 13.5px/1.4 var(--fb);color:var(--ink);letter-spacing:.02em;overflow-wrap:anywhere}
.faq .ans a{color:var(--chan-2)}
.faq .ans ul{list-style:disc;padding-left:1.2em}

/* explorar: tarjeta del blog */
.ctile--blog{border-color:rgba(var(--chan-rgb),.5);background:radial-gradient(70% 60% at 50% 30%,rgba(var(--chan-rgb),.2),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),var(--bg-2)}
.ctile--blog > svg.i{position:absolute;top:12px;left:10px;color:var(--chan-2)}
.ctile--blog small{color:var(--chan-2)}
.ctile .ph0{position:absolute;inset:0;background:var(--bg-3)}
.xres + .xres{margin-top:34px}

/* cuadrícula: carga y errores */
.gload{grid-column:1 / -1;display:grid;place-items:center;padding:24px 0}
.gerr{grid-column:1 / -1;display:grid;justify-items:center;gap:10px;padding:24px 12px;text-align:center;color:var(--ink-2)}
.tile .t-l,.tile .t-p{max-width:calc(100% - 12px)}
.tile--vip{display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;border:1px solid rgba(var(--live-rgb),.45);background:radial-gradient(70% 50% at 50% 35%,rgba(var(--live-rgb),.18),transparent 70%),var(--bg-2)}

/* perfil: CTA en dos botones + icono */
.pcta{flex-wrap:wrap}
@media (max-width:420px){.pcta .btn{flex:1 1 auto;padding:0 12px;font-size:14px}}

/* escritorio: menú lateral con blog y llave VIP */
.snav a{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:6px;font:800 16px/1 var(--fb);color:var(--ink-2);text-align:left;text-decoration:none}
.snav a svg.i{width:24px;height:24px}
.snav a:hover{background:rgba(255,255,255,.05);color:#fff}
.snav a[aria-current="page"]{color:#fff}
.snav a[aria-current="page"] svg.i{color:var(--chan)}
.snav a .badge{position:static;margin-left:auto;border:0}
.bnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;font:800 10.5px/1 var(--fb);color:var(--ink-3);text-decoration:none;transition:color .2s}
.bnav a:hover{color:var(--ink)}
.bnav a[aria-current="page"]{color:#fff}
.bnav a[aria-current="page"] svg.i{color:var(--chan-2)}
.bnav a.mid{height:auto;color:var(--ink-2)}
/* menú editable (panel › Menú de la web): grupos, separadores, enlaces externos, barra de 1 a 6 huecos y hoja «Más» */
.snav a .ml{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav a svg.i.mx{width:14px;height:14px;margin-left:auto;color:var(--ink-3)}
.snav-g{padding:14px 12px 6px;font:800 11px/1.2 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.snav-g:first-child{padding-top:4px}
.snav-sep{height:0;margin:6px 12px;border:0;border-top:1px solid var(--line)}
.bnav{grid-template-columns:repeat(var(--bn,5),minmax(0,1fr))}
.bnav .bi{position:relative;display:grid;place-items:center}
.bnav .bl{max-width:100%;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav button.is-cur{color:#fff}
.bnav button.is-cur svg.i{color:var(--chan-2)}
/* barra de 7 huecos (6 pestañas + «Más»): cabe en 360 px con objetivos de ≥ 51 px */
.bnav > a,.bnav > button{min-width:0}
.bnav--dense a,.bnav--dense button{gap:3px;font-size:9.5px}
.bnav--dense .bl{padding:0 2px}
.bnav--dense svg.i{width:21px;height:21px}
.bnav--dense .mid .pill{width:44px;height:32px}
.bnav--dense .mid .pill svg.i{width:20px;height:20px}
.dlg-more .sh-body{padding-bottom:calc(16px + var(--safe-b))}
.mnav a{min-height:50px}
.ssr-nav{display:flex;flex-wrap:wrap;gap:0 18px;margin:0 0 24px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ssr-nav a{display:inline-flex;align-items:center;min-height:44px;font:800 15px/1 var(--fb);color:var(--ink);text-decoration:none}
.ssr-nav a:hover{color:var(--chan-2)}
.backpill{color:var(--ink);text-decoration:none}
.brand-d .chip--off{display:inline-flex}

/* lista abierta: el banner nunca se interpone */
html.sheet-open .banner{display:none}

/* hojas: pantallas cortas */
@media (max-height:560px){dialog.sheet{max-height:96dvh}}

@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:2.4s!important;animation-iteration-count:infinite!important}
}

/* enlaces reales donde el mockup usaba botones (URLs compartibles) */
.pstats a{display:grid;justify-items:center;gap:4px;padding:0 16px;font:600 12.5px/1 var(--fb);color:var(--ink-3);text-decoration:none;border-radius:4px}
.pstats a:hover b{color:var(--chan-2)}
.hstats a{justify-items:start}
.hstats a:first-child{padding-left:0}
.plinks a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;border:1px solid var(--line);font:700 13px/1 var(--fb);color:var(--ink-2);text-decoration:none}
.plinks a:hover{border-color:var(--chan);color:var(--ink)}
.shead-a{display:inline-flex;align-items:center;min-height:40px;font:800 13px/1 var(--fb);color:var(--chan-2);text-decoration:none;border-radius:4px}
.shead-a:hover{text-decoration:underline}
a.ptab{text-decoration:none}
a.scene{text-decoration:none}
a.go{color:var(--ink);text-decoration:none}
a.row{text-decoration:none}
a.ctile{display:block;color:var(--ink);text-decoration:none}
a.ctile--vip,button.ctile{display:block}
.viptile{font:inherit;width:100%}
.hlang{position:absolute;z-index:3;top:calc(var(--safe-t) + 10px);right:16px}
.hlang .lang{background:rgba(var(--bg-rgb),.62);backdrop-filter:blur(6px)}
.view--home > .vw{position:relative}
@media (min-width:1024px){
  .hlang{display:none}
  .hwel--solo{grid-template-columns:minmax(0,1fr)}
  .hwel--solo .lede{max-width:60ch}
}
.brand-d .chip{margin-top:6px}
.tabsrow > .chip{justify-self:start}
.hab span.btn{color:var(--warm-ink);font:800 14px/1.1 var(--fb)}
.hab span.chip--nat{color:var(--bg);font:800 9.5px/1 var(--fb)}
.hab span.cta{color:var(--warm)}
.hab .hab-t span{color:var(--ink-2)}
/* pre-roll con anuncio propio: el marco crece para que el botón Saltar no tape el CTA */
.brkv{min-height:236px}
.brkv .hab{padding:16px 16px 70px}
@media (max-height:700px){.brkv{min-height:200px;margin-top:20px}.brkov-note{display:none}}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
.dlg-vip .sh-head h2.card-h{font:700 19px/1.2 var(--fd);letter-spacing:-.01em}
.dlg-vip .sh-head h2.card-h svg.i{width:22px;height:22px}
/* escritorio: la lista manda en el panel derecho; las reseñas usan lo que sobra */
@media (min-width:1024px){
  .faside .dock-list{flex:1 1 auto;min-height:200px}
  .faside .dock-rev{flex:0 1 auto;max-height:230px;min-height:0}
  .faside .dock-rev .dock-b{min-height:0}
}
@media (min-width:1024px) and (max-height:820px){.faside .dock-rev{display:none}}
.lnav .scene--vip > span{display:none}
.lnav .scene--vip b{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.lnav .scene span{overflow:hidden;text-overflow:ellipsis}
.t-p{flex-direction:column;align-items:flex-end;gap:0}
/* el anillo del tema de temporada se ve siempre; en el tema normal, sin directo, el anillo es neutro */
html:not([data-theme="normal"]) .avatar.off{background:var(--ring)}

/* "me gusta": corazón del rail, corazón grande del doble toque y contador en la cuadrícula */
.ract--like .i-lk1{display:none}
.ract--like[aria-pressed="true"] .i-lk0{display:none}
.ract--like[aria-pressed="true"] .i-lk1{display:block;color:var(--live)}
.ract--like[aria-pressed="true"] .lk-n{color:var(--live-2)}
.ract--like.pop .rb{animation:pop .5s var(--ease)}
.lk-n{font-variant-numeric:tabular-nums}
.burst{position:absolute;z-index:6;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;color:var(--live);filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));animation:burst .85s var(--ease) forwards}
.burst svg{width:100%;height:100%;fill:currentColor}
.burst.still{animation:none;opacity:.92}
@keyframes burst{0%{opacity:0;transform:scale(.4) rotate(var(--rot,0deg))}18%{opacity:1;transform:scale(1.12) rotate(var(--rot,0deg))}35%{transform:scale(.96) rotate(var(--rot,0deg))}70%{opacity:1;transform:scale(1) rotate(var(--rot,0deg)) translateY(-8px)}100%{opacity:0;transform:scale(1.05) rotate(var(--rot,0deg)) translateY(-46px)}}
.t-lk{display:inline-flex;align-items:center;gap:3px;margin-left:6px}
.t-lk svg.i{width:11px;height:11px;color:var(--live-2)}
.ract--order .rb svg.i{width:25px;height:25px}

/* Menú de categorías agrupado: Videos / Fotos (nunca mezclados) */
.sgroup{display:grid}
.sgroup > summary{list-style:none;cursor:pointer}
.sgroup > summary::-webkit-details-marker{display:none}
.lnav .scene--sum{font-weight:800;color:var(--ink)}
.lnav .scene--sum small{margin-left:auto}
.scene--sum > svg.i:last-child{width:16px;height:16px;margin-left:6px;transition:transform .2s var(--ease)}
.sgroup[open] > .scene--sum > svg.i:last-child{transform:rotate(90deg)}
.sgroup-b{display:grid;gap:2px;padding:2px 0 8px 14px;border-left:1px solid var(--line);margin-left:18px}
.lnav .scene--all{color:var(--warm);font-weight:700}
.scene--seg{background:transparent}
.scene--seg[aria-pressed="true"]{border-color:var(--warm);color:#fff;background:rgba(var(--warm-rgb),.16);box-shadow:none}
.scene-sep{flex:none;width:1px;align-self:stretch;margin:6px 4px;background:var(--line-2)}
@media (prefers-reduced-motion:reduce){.scene--sum > svg.i:last-child{transition:none}}

/* Panel derecho (escritorio): la lista respira */
@media (min-width:1024px){
  .faside.has-list .dock-rev{display:none}
  .faside .dock-list .dock-b{padding:6px 16px 16px}
  .faside .dock-list .li{padding:12px 0}
  .faside .promo{margin:14px 0 2px;padding:12px 14px}
  .faside .dock-f{display:grid;gap:12px;padding:16px}
  .faside .dock-f .total{margin:0}
  .faside .dock-f .pay{margin:0;text-align:center;font-size:12.5px;line-height:1.45}
}
/* Fila de categorías del celular: cambio de grupo con desvanecido */
.scene-chips{display:inline-flex;gap:6px;flex:none;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.scene-chips.is-out{opacity:0;transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){.scene-chips{transition:none}}

/* VIP: cronómetro flotante en celular (en escritorio vive en el menú lateral) */
.vipfloat{position:fixed;z-index:45;left:50%;transform:translateX(-50%);top:calc(var(--topH) + 8px);pointer-events:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
html.cats .vipfloat{top:calc(var(--topH) + 62px)}
.vipfloat .vipt{background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);min-height:40px}
.vipt.is-low{border-color:var(--live);animation:vipPulse 1s ease-in-out infinite alternate}
.vipt.is-low time{color:#fff}
.vipt button.is-confirm{background:var(--live);color:#fff}
@keyframes vipPulse{to{box-shadow:0 0 0 4px rgba(var(--live-rgb),.25)}}
@media (min-width:1024px){.vipfloat{display:none}}
@media (prefers-reduced-motion:reduce){.vipt.is-low{animation:none}}

/* ── Redes sociales (panel › Redes): fila de íconos, lista del Inicio y pie ── */
.socrow{display:flex;gap:8px;max-width:100%;margin-top:14px;padding:2px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.socrow::-webkit-scrollbar{display:none}
.socb{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);overflow:hidden;scroll-snap-align:start;transition:border-color .2s,color .2s,transform .25s var(--ease)}
.socb:hover{border-color:var(--chan);color:var(--chan-2)}
.socb:active{transform:scale(.92)}
.socb svg.i{width:20px;height:20px}
.socb img,.soc-ic img,.foot-soc img,.row .ic img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* En el celular el Perfil va centrado: los márgenes automáticos centran sin cortar la fila cuando se desliza */
.socrow--prof > :first-child{margin-left:auto}
.socrow--prof > :last-child{margin-right:auto}
.socrow--home{position:relative;z-index:2;margin-top:14px}
.soc b .soc-ic{margin:0;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);color:var(--chan-2);overflow:hidden}
.soc-ic svg.i{width:16px;height:16px}
.row .ic:has(img){padding:9px;border-radius:50%}
.foot-soc{display:flex;flex-wrap:wrap;gap:6px}
.foot-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--ink-2);overflow:hidden;transition:border-color .2s,color .2s}
.foot-soc a:hover{border-color:var(--chan);color:var(--chan-2)}
.foot-soc svg.i{width:18px;height:18px}
.side-foot .so img{width:22px;height:22px;border-radius:50%;object-fit:cover}
@media (min-width:1024px){.socrow--prof > :first-child{margin-left:0}.prof > .socrow--prof,.prof > .socrow--prof ~ *{grid-column:2}}
@media (prefers-reduced-motion:reduce){.socb,.foot-soc a{transition:none}}

/* ---------- blog por bloques (HTML de App\Services\BlogRenderer) ---------- */
.bcats{margin-top:18px}
.scene[aria-current="page"]{border-color:var(--chan);color:#fff;background:rgba(var(--chan-rgb),.2);box-shadow:inset 0 -2px 0 var(--chan)}
.scene[aria-current="page"] small{color:var(--chan-2)}
.post-lead{margin-top:18px;max-width:60ch;font:500 18px/1.6 var(--fb);color:var(--ink-2);text-wrap:pretty}
.post-body--b{max-width:none}
.post-body--b > :where(p,h2,h3,ul,ol){max-width:68ch}
.post-body--b > * + *{margin-top:1.1em}
.post-body--b > :where(figure,.pgal,.pcc,.pyt,.pxp,.pq),.post-body--b > :where(figure,.pgal,.pcc,.pyt,.pxp,.pq) + *{margin-top:1.7em}
/* imagen: pequeña, mediana, ancha (sale del texto en PC) y completa (de borde a borde en el celular) */
.pf{display:grid;justify-items:center;gap:8px;margin-inline:auto}
.pf--pequena{width:50%}
.pf--mediana{width:78%}
.pf--ancha{width:100%}
.pf--completa{--w:calc(100cqi + 32px);width:var(--w);margin-left:calc((100% - var(--w)) / 2)}
.pf__open{position:relative;display:block;max-width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:none;cursor:zoom-in}
.pf__open img{display:block;width:auto;height:auto;max-width:100%;max-height:85svh;margin-inline:auto;border-radius:6px;background:var(--bg-3);transition:transform .5s var(--ease)}
.pf__open:hover img{transform:scale(1.02)}
.pf--completa .pf__open,.pf--completa .pf__open img{border-radius:0}
.pf figcaption{max-width:60ch;padding-inline:16px;font:600 13px/1.4 var(--fb);color:var(--ink-3);text-align:center;text-wrap:pretty}
@media (min-width:1024px){
  .pf--pequena{width:40%}
  .pf--mediana{width:66%}
  .pf--ancha{--w:min(100cqi,860px);width:var(--w);margin-left:calc((100% - var(--w)) / 2)}
  .pf--completa{--w:min(100cqi,1080px)}
  .pf--completa .pf__open,.pf--completa .pf__open img{border-radius:8px}
}
/* galería: mosaico (recortes cuadrados) o carrusel (fotos enteras); al tocar, el visor las muestra completas */
.post-body .pgal{margin-inline:0;padding:0;list-style:none}
.post-body .pgal li{margin:0}
.pgal--mos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pgal--mos.pgal--n3 li:first-child{grid-column:1 / -1}
.pgal--mos.pgal--n3 li:first-child .pf__open{aspect-ratio:16/9}
.pgal--mos .pf__open{width:100%;aspect-ratio:1;border-radius:5px;background:var(--bg-3)}
.pgal--mos .pf__open img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.pgal--car{position:relative}
.post-body .pgal__track{display:flex;gap:8px;margin:0 -16px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain;scrollbar-width:none;list-style:none}
.pgal__track::-webkit-scrollbar{display:none}
.pgal__track li{flex:none;scroll-snap-align:start}
.pgal__track .pf__open{height:clamp(240px,62vw,440px);border-radius:6px;background:var(--bg-3)}
.pgal__track .pf__open img{height:100%;width:auto;max-width:86vw;max-height:none;object-fit:cover;border-radius:0}
.pgal__nav{position:absolute;top:50%;z-index:1;display:none;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:rgba(var(--bg-rgb),.72);color:#fff;transform:translateY(-50%);transition:opacity .2s,border-color .2s}
.pgal__nav:hover{border-color:var(--chan)}
.pgal__nav--prev{left:8px}.pgal__nav--next{right:8px}
.pgal__nav:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.pgal__nav{display:grid}}
@media (min-width:1024px){
  .pgal--mos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgal--mos.pgal--n2,.pgal--mos.pgal--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgal--mos.pgal--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgal--mos.pgal--n3 li:first-child{grid-column:auto}
  .pgal--mos.pgal--n3 li:first-child .pf__open{aspect-ratio:1}
  .post-body .pgal__track{margin:0;padding:0;scroll-padding:0}
  .pgal__track .pf__open img{max-width:600px}
}
/* tarjeta de un video o pack propio, con «Pedir» */
.pcc{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"i b" "i go";align-items:center;gap:8px 12px;max-width:560px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);transition:border-color .2s}
.pcc:hover{border-color:var(--line-2)}
.pcc__img{grid-area:i;display:block;width:72px;aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:var(--bg-3)}
.pcc__img img{width:100%;height:100%;object-fit:cover}
.pcc__b{grid-area:b;display:grid;gap:5px;min-width:0}
.post-body .pcc__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 15px/1.25 var(--fd);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.post-body .pcc__t:hover{color:var(--chan-2)}
.pcc__m{font:700 12.5px/1.2 var(--fb);color:var(--ink-3)}
.pcc__m em{font:700 13px/1 var(--fd);font-style:normal;color:var(--warm)}
.post-body .pcc__go{grid-area:go;justify-self:start;color:var(--warm-ink);text-decoration:none}
@media (min-width:600px){.pcc{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"i b go"}.post-body .pcc__go{justify-self:end}}
/* YouTube: se carga solo al tocarlo (youtube-nocookie) */
.pyt{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px),var(--bg-2)}
.pyt.is-on{border-color:transparent;background:var(--bg-0)}
.post-body .pyt__go{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;color:var(--ink);text-align:center;text-decoration:none}
.pyt__ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:4px;border:1px solid var(--line-2);border-radius:50%;background:rgba(var(--bg-rgb),.72);transition:border-color .2s,transform .25s var(--ease)}
.pyt__go:hover .pyt__ic{border-color:var(--chan);transform:scale(1.06)}
.pyt b{font:800 15px/1.2 var(--fb)}
.pyt small{font:600 12.5px/1.2 var(--fb);color:var(--ink-3)}
.pyt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* X: tarjeta-enlace (sin el script de X) */
.post-body .pxp{display:flex;align-items:center;gap:12px;max-width:560px;min-height:64px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--ink);text-decoration:none;transition:border-color .2s}
.post-body .pxp:hover{border-color:var(--chan)}
.pxp__ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--bg-3)}
.pxp > span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.pxp b{font:800 15px/1.2 var(--fb);overflow:hidden;text-overflow:ellipsis}
.pxp small{font:700 12.5px/1.2 var(--fb);color:var(--chan-2)}
.pxp > svg.i{flex:none;width:18px;height:18px;color:var(--ink-3)}
/* cita destacada y separador */
.post-body .pq{margin-inline:0;padding:4px 0 4px 18px;border-left:2px solid var(--chan);color:var(--ink)}
.pq p{max-width:36ch;font:600 clamp(19px,4.8vw,22px)/1.45 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.pq cite{display:block;margin-top:10px;font:700 13px/1.2 var(--fb);font-style:normal;color:var(--ink-3)}
.post-body .phr{width:40%;height:1px;margin:2.2em auto;border:0;background:var(--line-2)}
.ssr-cats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.ssr .pf--completa{--w:100%}
@media (prefers-reduced-motion:reduce){.pf__open img,.pyt__ic,.pcc,.pgal__nav{transition:none}.pf__open:hover img,.pyt__go:hover .pyt__ic{transform:none}}
/* ── Opiniones: reseñas de compradores + comentarios de fans (opinions.js) ── */
.dlg-op .pg-load{min-height:180px}
.op-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);background:var(--sheet)}
.op-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:48px;font:800 14px/1 var(--fb);color:var(--ink-3);border-radius:0;transition:color .2s}
.op-tab svg.i{width:18px;height:18px}
.op-tab small{font:700 11.5px/1 var(--fb);color:var(--ink-3);font-variant-numeric:tabular-nums}
.op-tab:hover{color:var(--ink-2)}
.op-tab[aria-selected="true"]{color:#fff}
.op-tab[aria-selected="true"] svg.i{color:var(--chan-2)}
.op-tab[aria-selected="true"]::after{content:"";position:absolute;left:25%;right:25%;bottom:-1px;height:2px;background:var(--chan)}
.op-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.op-body{flex:1 1 auto}
.op-body:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.op-sum{margin:8px 0 6px}
.op-sum .stars{display:inline-flex;gap:1px;color:var(--warm);vertical-align:-2px}
.op-sum .stars svg{width:13px;height:13px}
.op-note{margin-top:14px}
.opl{display:grid;gap:2px;margin:4px 0 0;padding:0;list-style:none}
.opm{display:grid;gap:5px;padding:12px 4px;border-bottom:1px solid var(--line)}
.opm:last-child{border-bottom:0}
.opm:focus{outline:none}
.opm:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.opm-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.opm-n{font:800 14px/1.2 var(--fb);color:var(--ink);overflow-wrap:anywhere}
.opm-b{height:20px;padding:0 6px;font-size:9.5px;gap:4px}
.opm-b svg.i{width:11px;height:11px;stroke-width:2.6}
.opm-h time{margin-left:auto;font:700 12px/1 var(--fb);color:var(--ink-3);font-variant-numeric:tabular-nums}
.opm .stars{display:inline-flex;gap:1px;color:var(--warm)}
.opm .stars svg{width:12px;height:12px}
.opm-t{font-size:14.5px;line-height:1.5;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.op-more{display:flex;justify-content:center;padding:12px 0 4px}
.op-compose{padding-top:10px}
.op-compose form{display:grid;gap:8px}
.op-in{width:100%;min-height:44px;padding:10px 14px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink);font:500 16px/1.4 var(--fb)}
.op-in::placeholder{color:var(--ink-3)}
.op-in:focus-visible{outline:2px solid var(--chan);outline-offset:1px;border-color:transparent}
.op-in[aria-invalid="true"]{border-color:var(--live)}
.op-name{min-height:40px;padding-block:8px;font-size:16px}
.op-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:end}
.op-text{resize:none;height:48px;max-height:132px;overflow-y:auto}
.op-emo{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;margin:6px 0}
.op-emo-b{min-height:44px;border:0;border-radius:6px;background:transparent;font-size:22px;line-height:1;cursor:pointer;transition:transform .15s,background-color .15s}
.op-emo-b:hover{background:var(--bg-3)}
.op-emo-b:active{transform:scale(.88)}
.op-emo-b:focus-visible{outline:2px solid var(--chan);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.op-emo-b{transition:none}.op-emo-b:active{transform:none}}
.op-send{width:48px;min-height:48px;padding:0}
.op-send svg.i{margin:0}
.op-hint{display:flex;justify-content:space-between;gap:12px;font:600 12.5px/1.3 var(--fb);color:var(--ink-3)}
.op-hint .over{color:var(--live-2)}
.dlg-op .ferr:empty{display:none}
@media (prefers-reduced-motion:reduce){.op-tab{transition:none}}

/* Anuncios propios con imagen o banner (subidos desde el panel): la imagen llena el marco de su zona, dentro de la
   fuente de OBS y con el rótulo «Anuncio» visible (pestaña del marco, chip del tile o chip dentro del 320×50). */
a.hab.hab--img{display:block;padding:0;overflow:hidden;background:var(--adbg)}
a.hab.hab--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;-webkit-user-drag:none}
a.hab.hab--img:focus-visible{outline-offset:-3px}
a.hab.hab--img .chip--nat{position:absolute;top:4px;left:4px;z-index:1;height:16px;padding:0 5px;font-size:9px}
.nslot--native.nslot--img{height:auto;aspect-ratio:3/4}
.s-nat .nslot--native.nslot--img{width:min(300px,100%,calc((100dvh - 330px) * .75));min-width:168px}
.tile--natimg .chip--nat{box-shadow:0 1px 6px rgba(0,0,0,.4)}
.brkv.brkv--img{min-height:0}
.brkv.brkv--v{aspect-ratio:9/16;width:auto;max-width:100%;height:min(50dvh,540px);margin-inline:auto}
@media (max-height:700px){.brkv.brkv--v{height:44dvh}}

/* ───────── Historias (stories.js): anillo del avatar, fila del Inicio, pestaña del Perfil y visor ─────────
   El anillo usa los acentos del tema (--warm → --live → --chan), así cambia solo con las temporadas. */
:root{--st-ring:conic-gradient(from 200deg,var(--warm),var(--live),var(--chan),var(--warm))}
html.st-new .avatar,html.st-new .avatar.off{background:var(--st-ring)}
html.st-on .avatar[data-st]{cursor:pointer}
html.st-new .avatar::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(var(--warm-rgb),.35);opacity:0;animation:stPing 2.4s var(--ease) 1s 3}
@keyframes stPing{0%{opacity:.9;transform:scale(.94)}100%{opacity:0;transform:scale(1.12)}}
/* Círculos (fila del Inicio y destacadas del Perfil) */
.strow{margin:10px 0 2px}
.strow-l{display:flex;gap:12px;margin:0 -16px;padding:4px 16px 2px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.strow-l::-webkit-scrollbar{display:none}
.strow-l > li{flex:none;scroll-snap-align:start}
.stc{display:grid;justify-items:center;gap:6px;width:76px;padding:0;border:0;background:none;color:var(--ink-2);cursor:pointer;text-align:center}
.stc-r{position:relative;display:block;width:72px;height:72px;padding:2px;border-radius:50%;background:var(--line-2);transition:transform .25s var(--ease)}
.stc--new .stc-r{padding:3px;background:var(--st-ring)}
.stc-in{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid var(--bg);background:var(--bg-3)}
.stc-in img{width:100%;height:100%;object-fit:cover;display:block}
.stc-in img.st-logo{object-fit:contain;padding:8px;background:var(--avbg)}
.stc-v{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--bg-rgb),.72);color:#fff}
.stc-v svg.i{width:11px;height:11px;fill:currentColor;stroke:none}
.stc-t{max-width:76px;font:700 12px/1.2 var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stc--new .stc-t{color:var(--ink)}
.stc:hover .stc-r{transform:scale(1.04)}
.stc:active .stc-r{transform:scale(.95)}
.stc:focus-visible{outline:none}
.stc:focus-visible .stc-r{outline:2px solid var(--focus);outline-offset:2px}
/* En el celular el selector ES | EN flota arriba a la derecha del Inicio: la fila le deja su hueco y se desvanece antes. */
@media (max-width:1023px){.strow{margin:calc(var(--safe-t) + 8px) 112px 6px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}}
@media (min-width:1024px){.strow{margin-top:18px}.strow-l{margin:0;padding-inline:0}.stc{width:86px}.stc-r{width:80px;height:80px}.stc-t{max-width:86px}}
/* Pestaña «Historias» del Perfil (con 5 pestañas en el celular: icono arriba y texto abajo) */
.ptabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:480px){.ptabs:has(> :nth-child(5)) .ptab{flex-direction:column;gap:3px;font-size:11.5px;height:54px}}
html.st-off .ptab[data-ptab="historias"]{display:none}
/* pestañas del Perfil editables (panel › Menú de la web): de 1 a 8; si no caben, la fila se desplaza de lado */
.ptabs{grid-auto-columns:minmax(max-content,1fr);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.ptabs::-webkit-scrollbar{display:none}
.ptab{padding:0 14px;white-space:nowrap}
.ptab .ptl{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.ptab[aria-current="page"]::after{bottom:0}
@media (max-width:480px){.ptabs{grid-auto-columns:minmax(64px,1fr)}.ptabs:has(> :nth-child(5)) .ptab{padding:0 6px}.ptabs:has(> :nth-child(5)) .ptab .ptl{max-width:11ch}}
@media (prefers-reduced-motion:reduce){.ptabs{scroll-behavior:auto}}
.stp{padding-top:16px}
.strow-l--prof{margin-bottom:18px}
.stp-t{margin:0 0 12px;font:700 17px/1.2 var(--fd);letter-spacing:-.01em}
.stp-t small{margin-left:6px;font:700 12.5px/1 var(--fb);color:var(--ink-3);letter-spacing:0}
.stgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 -16px}
.sttile{position:relative;display:block;aspect-ratio:9/16;padding:0;border:0;overflow:hidden;background:var(--bg-3);cursor:pointer;border-radius:0}
.sttile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.sttile:hover img{transform:scale(1.04)}
.sttile-0{display:grid;place-items:center;width:100%;height:100%;background:var(--avbg)}
.sttile-0 img{width:56px;height:56px;object-fit:contain}
.sttile-d{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;font:800 11.5px/1 var(--fb);color:#fff;text-shadow:var(--ts)}
.sttile-d svg.i{width:12px;height:12px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.sttile::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.sttile-d{z-index:1}
.sttile-new{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--st-ring);box-shadow:0 0 0 2px rgba(var(--bg-rgb),.8)}
.stgrid .gempty,.stgrid .gerr,.stgrid .gsent{grid-column:1 / -1}
.stp-empty{padding-inline:16px}
@media (min-width:1024px){.stgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0}.sttile{border-radius:5px}}
/* Visor a pantalla completa */
dialog.stv{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
dialog.stv[open]{display:grid;place-items:center;animation:fadeIn .25s var(--ease)}
dialog.stv::backdrop{background:rgba(4,4,8,.95)}
.stv-in{position:relative;width:100%;height:100%;overflow:hidden;background:#000;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .25s var(--ease)}
@media (min-width:640px){
  dialog.stv{background:rgba(4,4,8,.94)}
  .stv-in{width:auto;height:min(100dvh - 32px,900px);aspect-ratio:9/16;max-width:calc(100vw - 140px);border-radius:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
}
.stv-stage,.stv-bg,.stv-grad{position:absolute;inset:0}
.stv-bg img{width:100%;height:100%;object-fit:cover;filter:blur(32px) saturate(1.25) brightness(.42);transform:scale(1.15)}
.stv-media > img,.stv-media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:fadeIn .3s var(--ease)}
.stv-grad{background:linear-gradient(rgba(0,0,0,.5),transparent 22%,transparent 62%,rgba(0,0,0,.6));pointer-events:none}
.stv-top{position:absolute;inset:0 0 auto;z-index:3;padding:calc(var(--safe-t) + 8px) 10px 0;pointer-events:none}
.stv-top > *{pointer-events:auto}
.stv-bars{display:flex;gap:4px}
.stv-bars > span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.stv-bars i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.stv-head{display:flex;align-items:center;gap:10px;margin-top:10px}
.stv-av{width:36px;height:36px;border-radius:50%;padding:2px;background:var(--st-ring);object-fit:cover}
.stv-who{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;text-shadow:var(--ts)}
.stv-who b{font:800 14.5px/1.2 var(--fb);white-space:nowrap}
.stv-who time{font:700 12.5px/1 var(--fb);color:rgba(255,255,255,.78);white-space:nowrap}
.stv-b{color:#fff;border-radius:50%;flex:none}
.stv-b svg.i{width:24px;height:24px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.stv-b .i-pl,.stv-b .i-vol{display:none}
.stv-b .i-pl{fill:currentColor;stroke:none}
.is-paused .stv-b .i-pl,.stv-b[aria-pressed="true"] .i-vol{display:block}
.is-paused .stv-b .i-pa,.stv-b[aria-pressed="true"] .i-mute{display:none}
.stv-b:hover{background:rgba(255,255,255,.12)}
.stv-z{position:absolute;top:0;bottom:0;z-index:1;padding:0;border:0;background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stv-z--prev{left:0;width:30%}
.stv-z--next{right:0;width:70%}
.stv-z > span{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(var(--bg-rgb),.55);opacity:0;transition:opacity .2s}
.stv-z--prev > span{left:8px}
.stv-z--next > span{right:8px}
.stv-z svg.i{width:22px;height:22px}
.stv-z:focus-visible{outline:none}
.stv-z:focus-visible > span,.stv-z:hover > span{opacity:1}
@media (hover:none){.stv-z:hover > span{opacity:0}}
@media (hover:hover) and (min-width:640px){.stv-z > span{opacity:.55}.stv-z:hover > span{opacity:1}}
/* Lienzo 9:16 de la historia (la foto o el video y sus capas, capas.css): en el celular, centrado en la pantalla */
.stv-in{container-type:size}
.stv-cv{position:absolute;left:50%;top:50%;width:min(100cqw,100cqh * 9 / 16);aspect-ratio:9/16;transform:translate(-50%,-50%)}
.stv-media{position:absolute;inset:0;transform-origin:center}
.stv-lay{z-index:2;pointer-events:none}
.stv-lay .sl-l{animation:fadeIn .3s var(--ease)}
.stv-msg{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:rgba(var(--bg-rgb),.86);font:700 15px/1.4 var(--fb)}
.stv-msg[hidden]{display:none}
dialog.stv.is-loading .stv-stage::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--chan);animation:spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){
  html.st-new .avatar::before{animation:none}
  .stc-r,.sttile img,.stv-in{transition:none}
  dialog.stv[open],.stv-media > img,.stv-media > video,.stv-lay .sl-l{animation:none}
}

/* ── Nuevo desde tu última visita (novedades.js) ── */
.t-nw{position:absolute;z-index:1;top:6px;left:6px;height:20px;padding:0 6px;border-radius:4px;display:inline-flex;align-items:center;background:var(--chan);color:var(--chan-ink);font:800 9.5px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase}
.t-nw + .t-o{top:30px}
.chip--nw{height:20px;font-size:9.5px;vertical-align:middle;text-shadow:none;background:rgba(var(--bg-rgb),.62)}
.promo--nudge{border-color:rgba(var(--warm-rgb),.55)}
.promo .nudge{color:var(--warm)}

/* ── Avisos al celular (avisos.js) ── */
.pushbtn .i-b1{display:none}
.pushbtn.is-on{border-color:rgba(var(--chan-rgb),.55);color:var(--chan-2)}
.pushbtn.is-on .i-b0{display:none}
.pushbtn.is-on .i-b1{display:inline-block}
.hid .pushbtn{margin-left:auto;margin-bottom:4px;flex:none}
.pushcard{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;padding:14px;border:1px solid rgba(var(--chan-rgb),.35);border-radius:8px;background:var(--bg-2)}
.pc-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--chan-rgb),.14);color:var(--chan-2)}
.pc-ic svg.i{width:22px;height:22px}
.pc-tx{display:grid;gap:4px;min-width:0}
.pc-tx b{font:800 15px/1.25 var(--fb)}
.pc-tx p{font:500 13.5px/1.4 var(--fb);color:var(--ink-2)}
.pc-go{grid-column:1 / -1;display:flex;gap:8px;align-items:center}
.pc-go .btn{flex:1 1 auto}
@media (min-width:640px){.pushcard{grid-template-columns:auto 1fr auto}.pc-go{grid-column:auto}.pc-go .btn{flex:none}}
.push-lede{margin:10px 0 14px;font-size:14.5px}
.push-opts{border:0;margin:0;padding:0;display:grid;gap:8px}
.push-opt span svg.i{width:22px;height:22px;flex:none}
.push-opt .po-t{display:grid;gap:3px;font-style:normal}
.push-opt .po-t b{font:800 14.5px/1.25 var(--fb);color:inherit}
.push-opt .po-t small{font:600 12.5px/1.35 var(--fb);color:var(--ink-3)}
.push-opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
#pushErr{margin-top:10px}
.push-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font:600 13px/1.4 var(--fb);color:var(--ink-3)}
.push-note svg.i{flex:none;width:18px;height:18px;color:var(--chan-2)}
.push-ask{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--bg-3);font:600 13.5px/1.4 var(--fb);color:var(--ink)}
.push-ask[hidden]{display:none}
.push-ask svg.i{flex:none;width:18px;height:18px;color:var(--warm)}
.push-case{display:grid;gap:10px;padding:14px 0 4px}
.push-case > svg.i{width:30px;height:30px;color:var(--chan-2)}
.push-case h3{font:700 17px/1.2 var(--fd)}
.push-case p{color:var(--ink-2);max-width:60ch}
.push-case .push-hint{font:600 13.5px/1.4 var(--fb);color:var(--ink-3)}
.push-case .steps{margin-top:4px}