:root{
  --accent:#8b1a2b;--accent-hi:#c22a43;--accent-soft:rgba(194,42,67,.14);--glow:rgba(194,42,67,.45);
  --bg:#070506;--bg2:#0e0a0c;--panel:rgba(20,15,17,.66);--panel-solid:#141012;
  --line:rgba(255,255,255,.07);--line-hi:rgba(255,255,255,.14);
  --text:#f1ebe8;--dim:#a39a96;--mute:#6d6563;
  --r:18px;--font:"Montserrat",system-ui,sans-serif;--display:"Bebas Neue","Montserrat",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
main{flex:1}

/* Fondo: rejilla + manchas de luz */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-fx:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);opacity:.55}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;animation:float 18s ease-in-out infinite}
.blob.a{width:620px;height:620px;background:#6d1222;top:-260px;left:-120px}
.blob.b{width:520px;height:520px;background:#3a0a14;top:120px;right:-180px;animation-delay:-6s}
.blob.c{width:420px;height:420px;background:#8b1a2b;top:900px;left:30%;opacity:.18;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Nav */
.nav{position:sticky;top:0;z-index:50;transition:.3s}
.nav.scrolled{background:rgba(7,5,6,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2em;font-size:14px}
.logo-mark{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b81,var(--accent) 55%,#2a050c);box-shadow:0 0 18px var(--glow),inset 0 0 0 1px rgba(255,255,255,.15)}
.logo b{color:var(--accent-hi);font-weight:800}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{color:var(--dim);font-size:14px;font-weight:600;padding:8px 14px;border-radius:10px;transition:.2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav-links .btn{margin-left:8px;padding:9px 18px;font-size:13px}

/* Botones */
.btn{position:relative;display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;transition:.25s;border:0;cursor:pointer;color:var(--text);font-family:inherit;white-space:nowrap}
.btn-primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:0 10px 30px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{border:1px solid var(--line-hi);background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--accent-hi);background:var(--accent-soft)}
.btn svg{width:18px;height:18px}

/* Tipografía */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:1px solid var(--line-hi);border-radius:99px;font-size:12px;color:var(--dim);font-weight:600;background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.eyebrow i{font-style:normal;background:var(--accent);color:#fff;padding:2px 8px;border-radius:99px;font-size:10px;letter-spacing:.1em}
.kicker{color:var(--accent-hi);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;display:block}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.95}
h1{font-size:clamp(52px,8.5vw,108px);margin:24px 0 20px}
h1 .grad,h2 .grad{background:linear-gradient(100deg,#ff5d76,var(--accent-hi) 40%,#6d1222);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(40px,5.5vw,64px);margin-bottom:14px}
.lead{color:var(--dim);font-size:18px;max-width:540px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.sec-head p{color:var(--dim);max-width:460px}
section{padding:90px 0;position:relative}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:60px 0 80px;min-height:calc(100vh - 72px)}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:flex;gap:36px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.hero-stats b{display:block;font-family:var(--display);font-size:40px;font-weight:400;line-height:1}
.hero-stats span{color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* Maqueta de inventario */
.mock{position:relative;perspective:1400px}
.mock-inner{transform:rotateY(-10deg) rotateX(6deg);transition:transform .6s;border-radius:22px;padding:22px;background:radial-gradient(ellipse at 50% 40%,rgba(60,12,22,.75),rgba(5,3,4,.95));border:1px solid var(--line-hi);box-shadow:0 50px 100px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03),0 0 120px -30px var(--glow)}
.mock:hover .mock-inner{transform:rotateY(-3deg) rotateX(2deg)}
.mock-bar{display:flex;gap:6px;margin-bottom:16px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-hi)}
.mock-bar i:first-child{background:var(--accent-hi)}
.mock-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inv{background:rgba(12,10,12,.72);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.inv-h{display:flex;justify-content:space-between;font-size:11px;font-weight:700;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:8px;letter-spacing:.05em}
.inv-h span:last-child{color:var(--dim);font-weight:500}
.wbar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-bottom:10px;overflow:hidden}
.wbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));box-shadow:0 0 10px var(--glow);animation:fill 2.4s ease-out both}
@keyframes fill{from{width:0}}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{aspect-ratio:1;border-radius:9px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid var(--line);position:relative;display:grid;place-items:center;font-size:clamp(14px,2vw,20px);transition:.2s}
.slot b{position:absolute;top:2px;left:5px;font-size:8px;color:var(--dim);font-weight:700}
.slot s{position:absolute;bottom:2px;right:5px;font-size:8px;color:var(--dim);text-decoration:none;font-weight:600}
.slot.hot{border-color:var(--accent-hi);box-shadow:0 0 0 1px var(--accent) inset,0 0 16px var(--glow);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1px var(--accent) inset,0 0 26px var(--glow)}}
.hotbar{display:flex;gap:6px;justify-content:center;margin-top:14px}
.hotbar .slot{width:46px}
.mock-tip{position:absolute;right:-14px;bottom:56px;background:rgba(14,10,12,.92);border:1px solid var(--line-hi);border-radius:12px;padding:10px 14px;font-size:12px;box-shadow:0 20px 40px rgba(0,0,0,.6);backdrop-filter:blur(10px);animation:bob 4s ease-in-out infinite}
.mock-tip b{display:block;font-size:13px}
.mock-tip span{color:var(--dim)}
.mock-tip em{font-style:normal;color:var(--accent-hi);font-weight:700}
@keyframes bob{50%{transform:translateY(-8px)}}

/* Marquee */
.marquee{border-block:1px solid var(--line);padding:22px 0;overflow:hidden;background:rgba(255,255,255,.01)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 32s linear infinite}
.marquee span{font-family:var(--display);font-size:28px;color:var(--mute);letter-spacing:.06em;display:flex;align-items:center;gap:56px;white-space:nowrap}
.marquee span:after{content:"✦";color:var(--accent);font-size:16px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Catálogo */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:28px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--panel);backdrop-filter:blur(12px)}
.chip{padding:9px 16px;border-radius:10px;border:0;background:none;color:var(--dim);font:600 13px var(--font);cursor:pointer;transition:.2s}
.chip:hover{color:var(--text);background:rgba(255,255,255,.04)}
.chip.on{color:#fff;background:var(--accent);box-shadow:0 6px 18px -4px var(--glow)}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.search input{flex:1;padding:10px 0;background:none;border:0;color:var(--text);font:500 14px var(--font);outline:none}
.search svg{width:16px;height:16px;color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(12px)}
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--accent-hi),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.35s}
a.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 60px -30px var(--glow)}
a.card:hover:before{opacity:1}
.thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;font-size:64px;background:radial-gradient(ellipse at 50% 60%,rgba(90,18,32,.75),rgba(6,4,5,.95));overflow:hidden}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,7,8,.9))}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
a.card:hover .thumb img{transform:scale(1.06)}
.thumb .emo{filter:drop-shadow(0 10px 30px var(--glow));transition:.4s}
a.card:hover .thumb .emo{transform:scale(1.12) rotate(-4deg)}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.06em;background:rgba(0,0,0,.55);border:1px solid var(--line-hi);backdrop-filter:blur(8px)}
.badge.free{background:var(--accent);border-color:transparent}
.badge.r{left:auto;right:14px}
.card .body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.cat{font-size:11px;color:var(--accent-hi);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.card h3{font-size:19px;margin:6px 0 8px;font-weight:700}
.card p{color:var(--dim);font-size:14px;flex:1}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.tags{display:flex;gap:6px}
.tags span{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--dim);font-size:11px;font-weight:600}
.go{color:var(--accent-hi);font-weight:700;display:flex;align-items:center;gap:6px;transition:.25s}
a.card:hover .go{gap:10px}
.card.soon{border-style:dashed;justify-content:center;align-items:center;text-align:center;padding:40px 24px;min-height:300px;background:rgba(255,255,255,.01)}
.card.soon .plus{width:56px;height:56px;border-radius:16px;border:1px dashed var(--line-hi);display:grid;place-items:center;font-size:26px;color:var(--mute);margin-bottom:16px}
.empty{color:var(--dim);text-align:center;padding:60px;border:1px dashed var(--line-hi);border-radius:var(--r);grid-column:1/-1}

/* Ventajas */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{padding:28px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);transition:.3s}
.feat:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.feat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid rgba(194,42,67,.35);color:var(--accent-hi);margin-bottom:18px}
.feat .ic svg{width:22px;height:22px}
.feat h3{font-size:17px;margin-bottom:6px}
.feat p{color:var(--dim);font-size:14px}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--accent-hi);font-size:22px;line-height:1;transition:.3s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--dim);margin-top:12px;font-size:15px}

/* CTA */
.cta{position:relative;border-radius:28px;padding:70px 40px;text-align:center;overflow:hidden;border:1px solid var(--line-hi);background:radial-gradient(ellipse at 50% 0%,rgba(139,26,43,.55),rgba(14,8,10,.95) 70%)}
.cta:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at center,#000,transparent 70%)}
.cta>*{position:relative}
.cta p{color:var(--dim);max-width:520px;margin:0 auto 30px}

/* Producto */
.crumbs{color:var(--mute);font-size:13px;margin:20px 0 30px;display:flex;gap:8px}
.crumbs a:hover{color:var(--text)}
.detail{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:start}
.gallery .thumb{border-radius:var(--r);border:1px solid var(--line-hi);font-size:120px;aspect-ratio:16/9}
.detail h1{font-size:clamp(44px,6vw,76px);margin:14px 0}
.tabs{margin-top:40px}
.block{padding:28px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);margin-bottom:18px}
.block h3{font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.block h3:before{content:"";width:4px;height:18px;border-radius:2px;background:var(--accent-hi)}
.checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checks li{display:flex;gap:10px;color:var(--dim);font-size:14px}
.checks li:before{content:"✓";color:var(--accent-hi);font-weight:800}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:16px;padding:12px 0;color:var(--dim);font-size:14px;align-items:flex-start}
.steps li:before{content:counter(s);flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);font-weight:800;font-size:13px}
code{background:rgba(255,255,255,.06);border:1px solid var(--line);padding:2px 7px;border-radius:6px;font-size:13px;color:var(--text);word-break:break-word;font-family:ui-monospace,Consolas,monospace}
.buy{position:sticky;top:96px;padding:28px;border-radius:var(--r);border:1px solid var(--line-hi);background:linear-gradient(180deg,rgba(139,26,43,.18),var(--panel) 40%);backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.buy .big{font-family:var(--display);font-size:64px;line-height:1}
.buy .big small{font-family:var(--font);font-size:14px;color:var(--dim)}
.meta{margin:22px 0;font-size:14px}
.meta div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);color:var(--dim)}
.meta b{color:var(--text);font-weight:600}
.buy .btn{width:100%}
.buy .note{color:var(--mute);font-size:12px;text-align:center;margin-top:14px}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:60px;padding:60px 0 30px;background:linear-gradient(transparent,rgba(139,26,43,.06))}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot p{color:var(--dim);font-size:14px;margin-top:14px;max-width:320px}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.foot a{display:block;color:var(--dim);font-size:14px;padding:4px 0}
.foot a:hover{color:var(--text)}
.copy{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* Animación de entrada */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:30px}
  .mock-inner{transform:none}
  .mock-tip{right:8px}
  .feats{grid-template-columns:1fr 1fr}
  .faq,.detail{grid-template-columns:1fr}
  .buy{position:static}
}
@media(max-width:640px){
  .nav-links a:not(.btn){display:none}
  .feats,.checks,.foot{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .mock-panels{grid-template-columns:1fr}
  .mock-panels .inv:last-child{display:none}
  .cta{padding:50px 22px}
  section{padding:64px 0}
}

/* ===== Home estilo "landing de cliente": hero centrado + secciones alternas ===== */
.nav.over{position:fixed;left:0;right:0}
.lhero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 20px 80px;overflow:hidden}
.lhero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(139,26,43,.55),transparent 70%),linear-gradient(180deg,#120709 0%,var(--bg) 100%)}
.lhero-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 50% at 50% 40%,#000,transparent 80%)}
.lhero h1{font-size:clamp(64px,13vw,170px);margin:18px 0 6px;line-height:.85;text-shadow:0 10px 60px rgba(194,42,67,.35)}
.lhero .lead{margin:16px auto 0;max-width:620px;font-size:clamp(16px,2vw,20px)}
.dl-main{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.dl-main .btn{padding:18px 38px;font-size:17px;border-radius:14px}
.dl-main small{color:var(--mute);font-size:13px}
.lhero-shot{margin-top:70px;width:min(1000px,100%);position:relative}
.lhero-shot .mock-inner{transform:perspective(1600px) rotateX(14deg);transform-origin:center top}
.lhero-shot:hover .mock-inner{transform:perspective(1600px) rotateX(4deg)}
.lhero-shot .mock-panels{grid-template-columns:1fr 1fr}
.lhero-shot:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:45%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:var(--mute);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint:after{content:"";width:1px;height:36px;background:linear-gradient(var(--accent-hi),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.showcase{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:70px 0}
.showcase.flip .sc-media{order:2}
.sc-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-hi);aspect-ratio:16/10;display:grid;place-items:center;font-size:110px;background:radial-gradient(ellipse at 50% 60%,rgba(110,20,36,.8),rgba(6,4,5,.96));box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 100px -40px var(--glow)}
.sc-media img{width:100%;height:100%;object-fit:cover}
.sc-media .emo{filter:drop-shadow(0 16px 40px var(--glow))}
.sc-text h2{font-size:clamp(40px,5vw,62px)}
.sc-text p{color:var(--dim);font-size:17px;margin-bottom:24px}
.sc-list{list-style:none;margin-bottom:30px}
.sc-list li{display:flex;gap:12px;padding:8px 0;color:var(--text);font-size:15px}
.sc-list li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c22a43' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid rgba(194,42,67,.35)}
.sc-actions{display:flex;gap:12px;flex-wrap:wrap}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden}
.stats div{padding:38px 20px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--display);font-size:clamp(44px,5vw,64px);font-weight:400;line-height:1;background:linear-gradient(180deg,#fff,#c9b9b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--mute);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.center-head{text-align:center;margin-bottom:46px}
.center-head p{color:var(--dim);max-width:560px;margin:0 auto}
@media(max-width:900px){
  .showcase,.showcase.flip{grid-template-columns:1fr;gap:34px}
  .showcase.flip .sc-media{order:0}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:640px){.lhero-shot .mock-panels{grid-template-columns:1fr}.lhero-shot .mock-panels .inv:last-child{display:none}}

/* ===== Barra de navegación flotante en recuadro con desplegable ===== */
.topbar{position:fixed;top:14px;left:0;right:0;z-index:100;padding:0 16px;pointer-events:none}
.topbar-box{pointer-events:auto;max-width:1060px;margin:0 auto;height:60px;display:flex;align-items:center;gap:18px;padding:0 10px 0 18px;border-radius:14px;background:rgba(14,10,12,.82);border:1px solid var(--line-hi);backdrop-filter:blur(18px);box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.topbar .logo{font-size:13px;flex:none}
.tb-links{display:flex;align-items:stretch;height:100%;gap:2px;margin-left:14px}
.tb-links>a,.tb-drop>button{position:relative;display:flex;align-items:center;gap:7px;padding:0 13px;color:var(--dim);font:600 13px var(--font);background:none;border:0;cursor:pointer;transition:color .2s}
.tb-links>a:hover,.tb-drop>button:hover,.tb-drop.open>button{color:var(--text)}
.tb-links>a.active{color:var(--text)}
.tb-links>a.active:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent-hi);box-shadow:0 0 12px var(--glow)}
.new{font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:5px;background:rgba(194,42,67,.18);color:#ff7a8f;border:1px solid rgba(194,42,67,.4)}
.tb-drop{position:relative;display:flex}
.tb-drop>button svg{width:12px;height:12px;transition:transform .25s}
.tb-drop.open>button svg{transform:rotate(180deg)}
.tb-menu{position:absolute;top:calc(100% + 10px);left:50%;width:520px;transform:translate(-50%,-6px);opacity:0;visibility:hidden;transition:.22s;padding:10px;border-radius:16px;background:rgba(16,11,13,.97);border:1px solid var(--line-hi);box-shadow:0 30px 70px -10px rgba(0,0,0,.9);backdrop-filter:blur(18px);display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tb-drop.open .tb-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tb-menu h5{grid-column:1/-1;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:8px 10px 4px}
.tb-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:11px;transition:.15s}
.tb-item:hover{background:rgba(255,255,255,.05)}
.tb-item .ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--accent-soft);border:1px solid rgba(194,42,67,.3)}
.tb-item b{display:block;font-size:13px;color:var(--text)}
.tb-item small{display:block;font-size:11.5px;color:var(--dim);line-height:1.35}
.tb-search{flex:1;max-width:330px;margin-left:auto;display:flex;align-items:center;gap:9px;height:40px;padding:0 6px 0 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.2s}
.tb-search:focus-within{border-color:var(--accent-hi);background:rgba(255,255,255,.06)}
.tb-search svg{width:15px;height:15px;color:var(--mute);flex:none}
.tb-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:500 13px var(--font)}
.tb-search input::placeholder{color:var(--mute)}
.tb-search kbd{font:600 10.5px ui-monospace,monospace;color:var(--dim);padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--line-hi);white-space:nowrap}
.tb-cta{flex:none;height:38px;padding:0 16px;font-size:13px;border-radius:9px}
.tb-burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-hi);background:none;color:var(--text);cursor:pointer}
.tb-results{position:absolute;top:calc(100% + 8px);left:0;right:0;padding:6px;border-radius:12px;background:rgba(16,11,13,.98);border:1px solid var(--line-hi);box-shadow:0 30px 60px -10px rgba(0,0,0,.9);display:none}
.tb-results.show{display:block}
.tb-results .tb-item{padding:8px}
.tb-results .none{padding:12px;color:var(--mute);font-size:13px}
.tb-search{position:relative}
@media(max-width:900px){
  .tb-links,.tb-search,.tb-cta{display:none}
  .tb-burger{display:block}
  .topbar.mobile-open .topbar-box{height:auto;flex-wrap:wrap;padding:12px}
  .topbar.mobile-open .tb-links{display:flex;flex-direction:column;width:100%;margin:6px 0 0;order:3}
  .topbar.mobile-open .tb-links>a,.topbar.mobile-open .tb-drop>button{padding:12px 8px}
  .topbar.mobile-open .tb-search{display:flex;max-width:none;width:100%;order:4;margin:6px 0}
  .topbar.mobile-open .tb-cta{display:inline-flex;width:100%;order:5}
  .tb-drop{flex-direction:column}
  .tb-menu{position:static;transform:none;width:100%;display:none;grid-template-columns:1fr;opacity:1;visibility:visible;box-shadow:none}
  .tb-drop.open .tb-menu{display:grid;transform:none}
}
.logo-img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(194,42,67,.35))}

/* Fondo limpio: sin ruido ni rejilla, solo degradados suaves */
.noise,.bg-fx:before,.lhero-bg:after,.cta:before{display:none!important}
body{background:radial-gradient(ellipse 120% 70% at 50% -10%,#1a080d 0%,var(--bg) 60%) fixed,var(--bg)}
.lhero-bg{background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(139,26,43,.32) 0%,rgba(139,26,43,.12) 40%,transparent 75%)}
.blob{filter:blur(140px);opacity:.28}
.cta{background:radial-gradient(ellipse at 50% 0%,rgba(139,26,43,.4),rgba(14,8,10,.95) 75%)}

/* Capturas reales: se muestran completas sobre fondo oscuro, sin recortar */
.thumb img,.sc-media img{object-fit:contain;padding:14px;background:radial-gradient(ellipse at center,rgba(70,16,26,.55),rgba(6,4,5,.95))}
.thumb:has(img):after{display:none}
.shots{display:flex;gap:10px;margin-top:12px}
.shots button{width:84px;height:64px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);padding:4px;cursor:pointer;transition:.2s}
.shots button img{width:100%;height:100%;object-fit:contain}
.shots button.on,.shots button:hover{border-color:var(--accent-hi);box-shadow:0 0 14px -4px var(--glow)}

/* ===== Réplica fiel del Red Skin (valores sacados de nz-skin.css) ===== */
.ox-scene{position:relative;margin:0 auto;max-width:760px;padding:34px 30px;border-radius:22px;border:1px solid var(--line-hi);overflow:hidden;
  background:radial-gradient(ellipse at center,rgba(20,6,9,.35) 0%,rgba(0,0,0,.82) 100%),linear-gradient(135deg,#5b5f63 0%,#3a3d40 45%,#6d7074 100%);
  box-shadow:0 50px 100px -20px rgba(0,0,0,.85),0 0 120px -40px var(--glow);font-family:Montserrat,sans-serif}
.ox-wrap{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;max-width:560px;margin:0 auto}
.ox-ctrl{display:flex;flex-direction:column;gap:8px}
.ox-btn{width:84px;height:42px;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:#ece6e2;background:rgba(12,10,12,.72);border:1px solid rgba(255,255,255,.08);border-radius:10px;transition:.15s;cursor:default}
.ox-btn:not(.ox-input):hover{background:linear-gradient(135deg,#b3263c,#8b1a2b);border-color:transparent}
.ox-logo{height:60px;display:grid;place-items:center}
.ox-logo img{width:38px;height:38px;object-fit:contain;opacity:.9}
.ox-panels{display:flex;flex-direction:column;gap:12px}
.ox-panel{background:rgba(12,10,12,.72);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.ox-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ox-head p{font-size:13px;font-weight:700;letter-spacing:.06em;color:#ece6e2}
.ox-kg{font-size:10px!important;font-weight:600!important;color:#9d9591!important;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.ox-wbar{position:relative;height:6px;border-radius:999px;margin-bottom:10px;background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(255,255,255,.18) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(255,255,255,.18) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),rgba(255,255,255,.18) 75%,transparent calc(75% + 1px)),rgba(255,255,255,.07)}
.ox-wbar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#8b1a2b,#b3263c 70%,#e0455f);box-shadow:0 0 10px rgba(179,38,60,.6);animation:fill 1.6s cubic-bezier(.22,1,.36,1) both}
.ox-wbar i:after{content:"";position:absolute;right:0;top:0;width:6px;height:100%;border-radius:999px;background:rgba(255,210,215,.85)}
.ox-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding-right:8px;position:relative}
.ox-grid:after{content:"";position:absolute;right:0;top:0;width:3px;height:70%;border-radius:999px;background:rgba(139,26,43,.8)}
.ox-slot{position:relative;aspect-ratio:1/1.02;border:1px solid rgba(255,255,255,.08);border-radius:9px;overflow:hidden;transition:.15s}
.ox-slot:hover{border-color:rgba(179,38,60,.7);background:rgba(139,26,43,.12)}
.ox-slot img{position:absolute;left:15%;top:16%;width:70%;height:62%;object-fit:contain}
.ox-num{position:absolute;left:0;top:0;z-index:2;padding:1px 6px;font-size:10px;font-weight:700;color:#fff;background:#8b1a2b;border-radius:0 0 7px 0}
.ox-info-r{position:absolute;right:5px;top:3px;z-index:2;text-align:right;line-height:1.1}
.ox-info-r b{display:block;font-size:10px;color:#fff}
.ox-info-r small{font-size:8.5px;color:#9d9591}
.ox-dur{position:absolute;left:6px;right:6px;bottom:18px;height:3px;border-radius:999px;background:rgba(0,0,0,.55);z-index:2}
.ox-dur i{display:block;height:100%;border-radius:inherit;background:#3fbf5f linear-gradient(180deg,rgba(255,255,255,.3),transparent 70%)}
.ox-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 4px 3px;text-align:center;font-size:9px;font-weight:700;color:#ece6e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(to top,rgba(0,0,0,.65),transparent)}
.ox-info{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 16px Georgia,serif;color:#fff;background:rgba(12,10,12,.85);border:1px solid rgba(255,255,255,.08)}
.lhero-shot:after{display:none}
@media(max-width:560px){.ox-scene{padding:18px 12px}.ox-btn{width:60px;height:36px;font-size:10px}.ox-label{font-size:7.5px}.ox-info-r small{display:none}.ox-info{display:none}}

/* ===== Escenario de la réplica (portada, tarjetas y galería) ===== */
.ox-scene{display:none}
.ox-stage{position:relative;overflow:hidden;perspective:1400px;font-family:Montserrat,sans-serif}
.ox-fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;width:max-content}
.ox-3d,.ox-3d *{transform-style:preserve-3d}
.ox-3d{transition:transform .12s ease-out;will-change:transform}
.ox-3d .ox-panel{backdrop-filter:none;transform:translateZ(30px)}
.ox-3d .ox-ctrl{transform:translateZ(55px)}
.ox-3d .ox-slot img{transform:translateZ(22px);filter:drop-shadow(0 8px 6px rgba(0,0,0,.5))}
.ox-3d .ox-num,.ox-3d .ox-info-r,.ox-3d .ox-label{transform:translateZ(14px)}
.ox-3d .ox-slot{overflow:visible}
.ox-3d .ox-label{border-radius:0 0 9px 9px}
.ox-stage[data-ox-3d]{cursor:grab;touch-action:none;user-select:none}
.ox-stage.grab{cursor:grabbing}
.ox-stage.grab .ox-3d{transition:none}
.ox-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--dim);padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid var(--line);pointer-events:none;white-space:nowrap}
.ox-wrap{display:grid;grid-template-columns:auto 520px;gap:14px;align-items:center;margin:0}
.ox-slot img{pointer-events:none}

/* Marco de la portada (como la versión anterior) */
.ox-frame{padding:18px 18px 0;transform:none!important}
.ox-frame .mock-bar{align-items:center}
.ox-frame .mock-bar span{margin-left:10px;font-size:11px;color:var(--mute);font-weight:600;letter-spacing:.06em}
.ox-hero{height:clamp(380px,52vw,560px);border-radius:14px;background:radial-gradient(ellipse at center,rgba(70,14,26,.55),rgba(0,0,0,.2) 70%)}

/* Tarjetas y bloque destacado: réplica estática */
.thumb.ox-stage,.ox-show{width:100%;height:100%}
.thumb.ox-stage{display:block}
.sc-media .ox-show{position:absolute;inset:0}
.ox-big{aspect-ratio:16/11!important}

/* Botones de vistas en la galería */
.views{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.views button{padding:9px 14px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);color:var(--dim);font:600 13px var(--font);cursor:pointer;transition:.2s}
.views button b{color:var(--accent-hi);font-weight:800}
.views button.on,.views button:hover{color:var(--text);border-color:var(--accent-hi);box-shadow:0 0 14px -4px var(--glow)}

/* Vista "Slots" ampliados */
.ox-zoom{display:grid;grid-template-columns:repeat(4,120px);gap:12px}
.ox-zoom .ox-slot{background:rgba(12,10,12,.72)}
/* Vista "Notificaciones" (como item-notification de nz-skin.css) */
.ox-notifs{display:flex;gap:14px}
.ox-notif{position:relative;width:118px;height:136px;border-radius:10px;background:rgba(12,10,12,.82);border:1px solid rgba(255,255,255,.10);box-shadow:0 14px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;animation:pop .6s cubic-bezier(.22,1,.36,1) both}
.ox-notif:nth-child(2){animation-delay:.12s}.ox-notif:nth-child(3){animation-delay:.24s}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.92)}}
.ox-act{margin-top:10px;padding:3px 12px;border-radius:999px;background:linear-gradient(135deg,#b3263c,#8b1a2b);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em}
.ox-notif img{width:60%;height:60px;object-fit:contain;margin:auto}
.ox-nlabel{font-size:10px;font-weight:700;color:#ece6e2;margin-bottom:10px}

/* ===== Inventario interactivo (arrastrar y soltar) ===== */
.ox-stage:not(.ox-static) .ox-slot.has{cursor:grab}
.ox-stage:not(.ox-static) [data-act]{cursor:pointer}
.ox-static .ox-fit{pointer-events:none}
.ox-stage{touch-action:none;user-select:none;-webkit-user-select:none}
.ox-static{touch-action:auto}
.ox-slot.dragging{opacity:.25}
.ox-slot.sel{border-color:#b3263c;box-shadow:0 0 0 1px #8b1a2b inset,0 0 14px rgba(179,38,60,.45)}
.ox-slot.over,.ox-btn.over{border-color:#e0455f!important;background:rgba(139,26,43,.28)!important}
.ox-ghost{position:fixed;z-index:9999;pointer-events:none;background:rgba(12,10,12,.85);border-color:#b3263c;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 20px rgba(179,38,60,.5);transform:scale(1.06);font-family:Montserrat,sans-serif}
.ox-ghost .ox-num{display:none}
.ox-toasts{position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none}
.ox-toasts .ox-notif{width:96px;height:112px;transition:opacity .4s,transform .4s}
.ox-toasts .ox-notif.out{opacity:0;transform:translateY(10px)}
.ox-toasts .ox-notif img{height:46px}
.ox-tip{position:absolute;left:0;top:0;z-index:20;min-width:170px;padding:9px 12px;border-radius:10px;background:rgba(14,11,13,.96);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px rgba(0,0,0,.6);font-size:11px;color:#9d9591;pointer-events:none;opacity:0;transition:opacity .12s;display:flex;flex-direction:column;gap:2px}
.ox-tip.show{opacity:1}
.ox-tip b{color:#ece6e2;font-size:12px;padding-bottom:5px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.08)}
.ox-tip em{font-style:normal;color:#b3263c;font-size:10px;margin-top:4px}
.ox-hero{height:clamp(420px,58vw,640px)}
.ox-hero .ox-fit{top:44%}
.ox-big .ox-fit{top:44%}
.ox-big{aspect-ratio:16/12!important}
.ox-stage:after{display:none!important}

/* ===== Pantalla con la interfaz real (iframe 1920x1080 escalado) ===== */
.monitor{position:relative;border-radius:20px;padding:10px;background:linear-gradient(180deg,#1d1619,#0d0a0b);border:1px solid var(--line-hi);box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 140px -40px var(--glow)}
.screen{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#15121a}
.screen iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform:scale(var(--k,.5));transform-origin:0 0;pointer-events:none}
.screen.live iframe,.ox-big .screen iframe{pointer-events:auto}
.monitor-bar{display:flex;align-items:center;gap:10px;padding:12px 8px 4px;font-size:13px;font-weight:600;color:var(--dim)}
.monitor-bar .btn{margin-left:auto;padding:8px 16px;font-size:13px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#e0455f;box-shadow:0 0 0 0 rgba(224,69,95,.6);animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(224,69,95,0)}100%{box-shadow:0 0 0 0 rgba(224,69,95,0)}}
.ox-big{aspect-ratio:auto!important;display:block!important;font-size:0}
.ox-big>img{width:100%;max-height:640px;object-fit:contain;padding:0;background:#15121a}
.ox-big .ox-hint{bottom:auto;top:12px}
.ox-big:after{display:none!important}
/* Recorte a la zona del inventario: x 860-1920, y 300-1080 del iframe */
.screen{aspect-ratio:1060/780}
.screen iframe{transform:scale(var(--k,.5)) translate(-860px,-300px)}
.lhero-shot .monitor{max-width:880px;margin:0 auto}
/* Recorte panorámico 16:9: x 520-1920, y 292-1080 del iframe */
.screen{aspect-ratio:1400/788}
.screen iframe{transform:scale(var(--k,.5)) translate(-520px,-292px)}
.lhero-shot .monitor{max-width:1100px}
/* Pantalla completa 1920x1080 (fondo = captura real del juego) */
.screen{aspect-ratio:16/9}
.screen iframe{transform:scale(var(--k,.5))}

/* Botón y modo de pantalla completa */
.screen iframe{left:var(--ox,0);top:var(--oy,0)}
.fs-btn{position:absolute;right:12px;top:12px;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(10,7,8,.7);backdrop-filter:blur(8px);color:var(--text);font:600 12px var(--font);cursor:pointer;opacity:.85;transition:.2s}
.fs-btn:hover{opacity:1;border-color:var(--accent-hi);background:rgba(139,26,43,.6)}
.fs-btn svg{width:15px;height:15px}
.screen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;background:#000}
@media(max-width:640px){.fs-btn span{display:none}}
.views[hidden]{display:none!important}
.ox-big .ox-hint{top:auto;bottom:12px;left:12px;transform:none;z-index:4}

/* Historial de actualizaciones */
.clog{padding:14px 0;border-bottom:1px solid var(--line)}
.clog:last-child{border-bottom:0;padding-bottom:0}
.clog-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.clog-v{font-weight:800;font-size:15px;color:var(--text)}
.clog-v.new{color:var(--accent-hi)}
.clog-tag{font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:6px;background:var(--accent);color:#fff}
.clog-date{color:var(--mute);font-size:12px}
.clog-dl{margin-left:auto;font-size:12px;color:var(--dim);text-decoration:underline}
.clog-dl:hover{color:var(--text)}
.clog ul{padding-left:18px;color:var(--dim);font-size:14px}
.clog li{margin:4px 0}

/* Pestañas de la pantalla de la portada y demos en los bloques de cada recurso */
.demo-tabs{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.demo-tabs button{padding:9px 18px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);color:var(--dim);font:700 13px var(--font);cursor:pointer;transition:.2s}
.demo-tabs button.on,.demo-tabs button:hover{color:#fff;border-color:var(--accent-hi);background:var(--accent-soft)}
.demo-tabs button.on{box-shadow:0 0 18px -6px var(--glow)}
.monitor-bar #hero-more{margin-left:auto}
.monitor-bar #try-btn{margin-left:0}
.sc-live{display:block;aspect-ratio:16/9;font-size:0}
.sc-live .screen{border-radius:0;height:100%}
.credit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;text-align:center}.credit a{color:var(--dim);text-decoration:underline}

/* ===== Orden y espaciado de la portada ===== */
.lhero{min-height:auto;padding-bottom:40px}
section{padding:80px 0}
#catalogo{padding-top:60px}
.center-head{margin-bottom:36px}
.center-head h2,.faq-head h2{margin-bottom:10px}
.faq{grid-template-columns:1fr;max-width:820px;margin:0 auto;gap:20px}
.faq-head{text-align:center}
.faq-head p{color:var(--dim)}
.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.feats{gap:14px}
.foot a.logo{display:inline-flex;align-items:center}
footer{margin-top:20px}

/* Cuenta en la barra */
.tb-account{position:relative;flex:none}
.tb-user{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 5px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.04);color:var(--text);font:600 13px var(--font);cursor:pointer}
.tb-user img,.tb-ava{width:30px;height:30px;border-radius:8px;object-fit:cover}
.tb-ava{display:grid;place-items:center;background:var(--accent);font-weight:800;text-transform:uppercase}
.tb-umenu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;padding:10px;border-radius:12px;background:rgba(16,11,13,.98);border:1px solid var(--line-hi);box-shadow:0 20px 40px rgba(0,0,0,.7);display:none}
.tb-account.open .tb-umenu{display:block}
.tb-umenu small{display:block;color:var(--mute);font-size:11px;padding:4px 6px 8px}
.tb-umenu button{width:100%;text-align:left;padding:9px 10px;border-radius:8px;border:0;background:none;color:var(--text);font:600 13px var(--font);cursor:pointer}
.tb-umenu button:hover{background:var(--accent-soft)}

/* Página de recursos */
.page-head{padding:130px 20px 10px;text-align:center}
.page-head h1{font-size:clamp(46px,7vw,86px);margin:10px 0 14px}
.page-head .lead{margin:0 auto 34px}
.page-head .toolbar{max-width:760px;margin:0 auto;text-align:left}
#list .showcase{border-bottom:1px solid var(--line)}
#list .showcase:last-child{border-bottom:0}

/* Pestañas del recurso */
.ptabs{display:flex;gap:4px;margin:34px 0 18px;padding:5px;border-radius:14px;border:1px solid var(--line);background:var(--panel);width:max-content;max-width:100%}
.ptabs button{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:0;background:none;color:var(--dim);font:700 14px var(--font);cursor:pointer;transition:.2s}
.ptabs button:hover{color:var(--text)}
.ptabs button.on{background:var(--accent);color:#fff;box-shadow:0 6px 18px -4px var(--glow)}
.ptabs .cnt{font-size:11px;padding:1px 7px;border-radius:99px;background:rgba(0,0,0,.3)}
.muted{color:var(--mute)}

/* Opiniones */
.stars{color:#4a3d40;letter-spacing:1px;font-size:14px;white-space:nowrap}
.stars i{font-style:normal}
.stars i.on{color:#ffb547}
.stars.big{font-size:20px}
.rv-summary{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.rv-avg{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:130px}
.rv-avg b{font-family:var(--display);font-size:60px;line-height:1}
.rv-avg small{color:var(--mute);font-size:12px}
.rv-bars div{display:grid;grid-template-columns:30px 1fr 26px;gap:10px;align-items:center;font-size:12px;color:var(--dim);margin:4px 0}
.rv-bars i{height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.rv-bars i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9f2e,#ffb547)}
.rv-bars em{font-style:normal;text-align:right}
.rv-login{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0;padding:18px;border-radius:14px;border:1px dashed var(--line-hi);background:rgba(255,255,255,.02)}
.rv-login p{color:var(--dim);margin:0}
.rv-form{margin:20px 0;padding:18px;border-radius:14px;border:1px solid var(--line-hi);background:rgba(255,255,255,.02)}
.rv-who{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rv-who img,.rv-who .tb-ava,.rv header img,.rv header .tb-ava{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none}
.rv-who small{display:block;color:var(--mute);font-size:12px}
.rv-pick{display:flex;align-items:center;gap:2px;margin-bottom:12px}
.rv-pick button{border:0;background:none;font-size:28px;line-height:1;color:#4a3d40;cursor:pointer;padding:0 2px;transition:transform .12s,color .12s}
.rv-pick button.on{color:#ffb547}
.rv-pick button:hover{transform:scale(1.15)}
#rv-pick-l{margin-left:10px;color:var(--dim);font-size:13px;font-weight:600}
.rv-form textarea{width:100%;resize:vertical;padding:12px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(0,0,0,.3);color:var(--text);font:14px var(--font);outline:none}
.rv-form textarea:focus{border-color:var(--accent-hi)}
.rv-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.rv-err{margin-right:auto;color:#ff7a8f;font-size:13px}
.rv-list{margin-top:8px}
.rv{padding:18px 0;border-bottom:1px solid var(--line)}
.rv:last-child{border-bottom:0}
.rv header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv header div{flex:1;min-width:0}
.rv header small{display:block;color:var(--mute);font-size:12px}
.rv p{color:var(--dim);font-size:14px;white-space:pre-line;word-break:break-word}
.rv-you{margin-left:8px;font-size:10px;font-weight:800;padding:1px 7px;border-radius:6px;background:var(--accent);color:#fff}
.rv.mine{background:linear-gradient(90deg,var(--accent-soft),transparent);margin:0 -12px;padding:18px 12px;border-radius:12px}
.rv-del{margin-top:8px;border:0;background:none;color:var(--mute);font:600 12px var(--font);cursor:pointer;text-decoration:underline}
.rv-del:hover{color:#ff7a8f}
@media(max-width:640px){.rv-summary{grid-template-columns:1fr}.ptabs button{padding:9px 12px;font-size:13px}}

/* Página de cuenta */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:110px 16px 40px}
.auth-card{width:min(440px,100%);padding:34px 30px;border-radius:22px;border:1px solid var(--line-hi);background:linear-gradient(180deg,rgba(139,26,43,.16),var(--panel) 45%);backdrop-filter:blur(14px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 100px -50px var(--glow);text-align:center}
.auth-logo{width:52px;height:52px;margin:0 auto 14px;filter:drop-shadow(0 0 14px rgba(194,42,67,.45))}
.auth-card h1{font-size:44px;margin:0 0 6px}
.auth-sub{color:var(--dim);font-size:14px;margin-bottom:22px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);margin-bottom:20px}
.auth-tabs button{padding:10px;border-radius:9px;border:0;background:none;color:var(--dim);font:700 13px var(--font);cursor:pointer}
.auth-tabs button.on{background:var(--accent);color:#fff}
.auth-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--dim)}
.auth-form input{padding:12px 14px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(0,0,0,.3);color:var(--text);font:500 14px var(--font);outline:none}
.auth-form input:focus{border-color:var(--accent-hi);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-form .btn{margin-top:6px;width:100%}
.auth-note{color:var(--mute);font-size:12px;text-align:center}
.auth-err{color:#ff7a8f;font-size:13px;min-height:18px;margin-top:14px}
.auth-form[hidden]{display:none}
/* Cabecera del recurso y pestañas encima de la demo */
.phead h1{font-size:clamp(40px,5.5vw,68px);margin:8px 0 0}
.detail .ptabs{margin:18px 0 20px}
.pdesc{max-width:none;margin:26px 0 22px}
.ptab .gallery{margin:0}

/* ===== Página de cuenta (dos columnas) ===== */
.acc{min-height:100vh;display:grid;place-items:center;padding:110px 16px 50px}
.acc-shell{width:min(1040px,100%);display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;border:1px solid var(--line-hi);background:var(--panel-solid);box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 120px -60px var(--glow)}
.acc-brand{position:relative;min-height:600px;background:linear-gradient(160deg,rgba(139,26,43,.55),rgba(10,6,8,.92) 60%),url("/img/redskin-escena.jpg") center/cover}
.acc-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,5,6,.95))}
.acc-brand-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:42px 40px}
.acc-brand .logo{font-size:13px}
.acc-brand h2{font-size:clamp(46px,5vw,66px);line-height:.92;margin:auto 0 16px}
.acc-brand p{color:#cfc6c2;max-width:360px;margin-bottom:22px}
.acc-brand ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.acc-brand li{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600}
.acc-brand li:before{content:"";width:18px;height:18px;flex:none;border-radius:6px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.acc-form{padding:46px 44px;display:flex;flex-direction:column}
.acc-form h1{font-size:52px;line-height:.95;margin:2px 0 8px}
.acc-sub{color:var(--dim);font-size:14px;margin-bottom:26px}
.g-btn{display:flex;align-items:center;justify-content:center;gap:12px;height:48px;border-radius:12px;background:#fff;color:#1f1f1f;font:700 14px var(--font);border:1px solid #fff;transition:.2s;cursor:pointer}
.g-btn:hover{background:#f1f1f1;transform:translateY(-1px)}
.g-btn svg{width:20px;height:20px}
.g-btn.off{opacity:.45;cursor:not-allowed;transform:none}
.g-off{color:var(--mute);font-size:12px;margin-top:8px;text-align:center}
.acc-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--mute);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.acc-or:before,.acc-or:after{content:"";flex:1;height:1px;background:var(--line-hi)}
.acc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-form .auth-err{text-align:center}
.acc-legal{margin-top:auto;padding-top:18px;color:var(--mute);font-size:12px;text-align:center}
@media(max-width:860px){.acc-shell{grid-template-columns:1fr}.acc-brand{min-height:260px}.acc-brand h2{margin-top:40px}.acc-brand ul{display:none}.acc-form{padding:34px 24px}.acc-row{grid-template-columns:1fr}}
.acc-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:860px){.acc-shell{grid-template-columns:minmax(0,1fr)}}

/* Instalación detallada */
.inst-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.inst-head h3{margin:0}
.inst-head .btn{padding:9px 16px;font-size:13px}
.steps-rich li{align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.steps-rich li:last-child{border-bottom:0}
.steps-rich li>div{flex:1;min-width:0}
.steps-rich b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.steps-rich p{color:var(--dim);font-size:14px}
.codebox{position:relative;margin-top:10px}
.codebox pre{margin:0;padding:14px 16px;border-radius:10px;background:#0b0809;border:1px solid var(--line-hi);overflow-x:auto;font:13px/1.6 ui-monospace,Consolas,monospace;color:#f1d7dc}
.codebox code{background:none;border:0;padding:0;font:inherit;color:inherit}
.copy-btn{position:absolute;top:8px;right:8px;padding:5px 10px;border-radius:7px;border:1px solid var(--line-hi);background:rgba(255,255,255,.05);color:var(--dim);font:600 11px var(--font);cursor:pointer}
.copy-btn:hover{color:#fff;border-color:var(--accent-hi)}
.faqs details{border-bottom:1px solid var(--line);padding:14px 0}
.faqs details:last-child{border-bottom:0}
.faqs summary{font-size:14px}
.faqs p{font-size:14px;margin-top:8px;color:var(--dim)}

/* Columna de descarga con ancho fijo: no cambia al pasar de una pestaña a otra */
.detail{grid-template-columns:minmax(0,1fr) 340px}
.detail>div{min-width:0}
.buy{width:100%}
@media(max-width:980px){.detail{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .ptabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ptabs button{justify-content:center}
  .phead h1{font-size:40px}
  .inst-head .btn{width:100%}
}
@media(max-width:640px){.ox-hint{white-space:normal;text-align:center;width:calc(100% - 24px);font-size:10px}.ox-big .ox-hint{left:12px;right:12px}}

/* ===== Barras de desplazamiento personalizadas ===== */
html{scrollbar-color:#5a1823 #0b0809;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0809}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8b1a2b,#5a1823);border-radius:99px;border:2px solid #0b0809}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c22a43,#8b1a2b)}
::-webkit-scrollbar-corner{background:transparent}

/* Bloques de código: barra fina dentro de la caja, sin fondo */
.codebox pre{scrollbar-width:thin;scrollbar-color:#8b1a2b transparent;padding-bottom:12px}
.codebox pre::-webkit-scrollbar{height:6px}
.codebox pre::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:99px;margin:0 14px}
.codebox pre::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#8b1a2b,#c22a43);border:0;border-radius:99px}
.codebox pre::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#c22a43,#e0455f)}

/* ===== Foto de perfil e insignias de rango ===== */
.ava{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none;display:grid;place-items:center}
.ava-letter{background:linear-gradient(135deg,var(--accent-hi),var(--accent));color:#fff;font-weight:800;text-transform:uppercase}
.tb-user .ava{width:30px;height:30px;border-radius:8px;font-size:13px}
.tb-umenu a{display:block;padding:9px 10px;border-radius:8px;color:var(--text);font:600 13px var(--font)}
.tb-umenu a:hover{background:var(--accent-soft)}
.role-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px 2px 7px;border-radius:6px;font:800 10px var(--font);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line-hi)}
.role-badge svg{width:11px;height:11px;fill:currentColor}
.role-ceo{background:linear-gradient(135deg,#ffd66b,#e3a51b);color:#2a1a00;border-color:#ffe39a;box-shadow:0 0 14px -2px rgba(255,190,60,.55)}
.tb-user .role-badge{margin-left:0}
.rv header .ava,.rv-who .ava{width:40px;height:40px}

/* Página de perfil */
.profile{padding:130px 20px 60px;max-width:760px}
.prof-card{display:flex;flex-direction:column;gap:20px}
.prof-top{display:flex;align-items:center;gap:26px;padding:30px;border-radius:22px;border:1px solid var(--line-hi);background:linear-gradient(135deg,rgba(139,26,43,.25),var(--panel) 60%)}
.prof-top h1{font-size:56px;margin:4px 0 8px;line-height:1}
.prof-tags .role-badge{margin:0 6px 0 0;font-size:11px;padding:4px 10px}
.prof-ava{position:relative;flex:none}
.ava.big{width:120px;height:120px;border-radius:24px;font-size:52px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.prof-edit{position:absolute;right:-6px;bottom:-6px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent);border:3px solid var(--panel-solid);color:#fff;cursor:pointer;transition:.2s}
.prof-edit:hover{background:var(--accent-hi);transform:scale(1.06)}
.prof-edit svg{width:18px;height:18px}
.prof-block p.muted{margin:-6px 0 16px;font-size:14px}
.prof-actions{display:flex;gap:10px;flex-wrap:wrap}
.prof-actions label.btn{cursor:pointer}
@media(max-width:560px){.prof-top{flex-direction:column;text-align:center}.prof-top h1{font-size:44px}}
/* La pastilla del usuario (foto + nombre + rango) cabe dentro de la barra */
.tb-search{max-width:250px;min-width:0}
.tb-user{max-width:230px}
.tb-user>span:not(.ava):not(.role-badge){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar-box{gap:14px}
@media(max-width:1180px){.tb-search kbd{display:none}}

/* ===== Perfil (estilo Orbe Studio) ===== */
.pf{padding:120px 20px 60px}
.pf-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:900px;margin:0 auto}
.pf-layout.with-side{grid-template-columns:230px minmax(0,1fr);max-width:1120px}
.pf-side{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.pf-side-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;color:var(--dim);font-weight:600;font-size:14px;transition:.15s}
.pf-side-link i{width:18px;text-align:center}
.pf-side-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.pf-side-link.on{color:#fff;background:var(--accent);box-shadow:0 6px 18px -6px var(--glow)}
.pf-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.pf-main .block{margin:0}
.pf-card h3 i{color:var(--accent-hi);margin-right:2px}
.pf-head{display:flex;gap:26px;align-items:flex-start;padding:30px;border-radius:22px;border:1px solid var(--line-hi);background:linear-gradient(135deg,rgba(139,26,43,.28),var(--panel) 60%)}
.pf-ava .ava.big{width:120px;height:120px;border-radius:24px;font-size:52px}
.pf-info{flex:1;min-width:0}
.pf-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pf-name-row h1{font-size:52px;line-height:1;margin:0 6px 0 0}
.pf-name-row .role-badge{margin:0;font-size:11px;padding:4px 10px}
.pf-edit-btn{margin-left:auto;padding:8px 14px;font-size:13px}
.pf-at{color:var(--mute);font-size:14px;margin-top:4px}
.pf-rating{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--dim);font-size:13px}
.pf-bio{color:#d6ccc8;white-space:pre-line;margin:6px 0 12px;font-size:15px}
.pf-stats{display:flex;gap:18px;flex-wrap:wrap;color:var(--mute);font-size:13px}
.pf-stats b{color:var(--text)}
.pf-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pf-social{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);color:var(--text);font-size:13px;font-weight:600;transition:.15s}
a.pf-social:hover{border-color:var(--accent-hi);background:var(--accent-soft)}
.pf-a{color:var(--text)}
.pf-a:hover{color:var(--accent-hi)}
.pf-del{border:0;background:none;color:var(--mute);cursor:pointer;padding:6px}
.pf-del:hover{color:#ff7a8f}
.pf-photo{display:flex;gap:22px;align-items:center}
.pf-photo .ava.big{width:96px;height:96px;border-radius:20px;font-size:40px}
.pf-photo .muted{margin-bottom:12px;font-size:14px}
.pf-sub{margin-top:10px}
.pf-note{font-size:13px;margin:-4px 0 2px}
.auth-form textarea{padding:12px 14px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(0,0,0,.3);color:var(--text);font:500 14px var(--font);outline:none;resize:vertical}
.auth-form textarea:focus{border-color:var(--accent-hi);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-form label span i{margin-right:6px}
.pf-card.auth-form{gap:14px}
.rv-ok{margin-right:auto;color:#5fd47f;font-size:13px;font-weight:600}
.pf-empty{padding:80px 20px}
.pf-empty i{font-size:40px;margin-bottom:12px;display:block}
@media(max-width:860px){
  .pf-layout.with-side{grid-template-columns:minmax(0,1fr)}
  .pf-side{position:static;flex-direction:row;overflow-x:auto}
  .pf-side-link{flex:1;justify-content:center;white-space:nowrap;padding:10px}
  .pf-head{flex-direction:column;align-items:center;text-align:center}
  .pf-name-row,.pf-stats,.pf-socials,.pf-rating{justify-content:center}
  .pf-edit-btn{margin:8px auto 0}
  .pf-photo{flex-direction:column;text-align:center}
}
.tb-umenu a i{width:16px;margin-right:6px;color:var(--mute)}
/* Portada del recurso encima de la demo; en las tarjetas la imagen se ve entera */
.pcover{width:100%;border-radius:var(--r);border:1px solid var(--line-hi);margin-bottom:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.thumb img[src*="portada"]{object-fit:cover;padding:0}

/* ===== Galería del recurso ===== */
.pg{margin-bottom:6px}
.pg-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-hi);background:radial-gradient(ellipse at center,#1d0d11,#070506 75%);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.pg-stage .screen{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.pg-stage.is-live .screen iframe{pointer-events:auto}
.pg-img{position:absolute;inset:0;border:0;padding:0;background:none;cursor:zoom-in}
.pg-img img{width:100%;height:100%;object-fit:contain;display:block}
.pg-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-hi);background:rgba(10,7,8,.72);backdrop-filter:blur(8px);color:#fff;font:400 28px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding-bottom:3px;opacity:0;transition:.2s}
.pg-stage:hover .pg-nav,.lb .pg-nav{opacity:1}
.pg-nav:hover{background:var(--accent);border-color:transparent}
.pg-nav.prev{left:14px}.pg-nav.next{right:14px}
.pg-count{position:absolute;left:14px;bottom:14px;z-index:5;padding:4px 10px;border-radius:99px;background:rgba(10,7,8,.72);color:var(--dim);font:700 12px var(--font)}
.pg-zoom{position:absolute;right:12px;top:12px;z-index:5;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(10,7,8,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.pg-zoom svg{width:16px;height:16px}
.pg-zoom:hover{border-color:var(--accent-hi);background:rgba(139,26,43,.6)}
.pg-stage.is-live .pg-count{left:auto;right:14px;bottom:auto;top:62px}
.pg-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.pg-thumbs[hidden]{display:none}
.pg-th{position:relative;flex:none;width:150px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;border:2px solid transparent;background:#0b0809;padding:0;cursor:pointer;opacity:.6;transition:.2s}
.pg-th img{width:100%;height:100%;object-fit:cover;display:block}
.pg-th:hover{opacity:.9}
.pg-th.on{opacity:1;border-color:var(--accent-hi);box-shadow:0 0 18px -4px var(--glow)}
.pg-live{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.75);color:#fff;font:800 9px var(--font);letter-spacing:.06em}
.pg-live i{width:6px;height:6px;border-radius:50%;background:#e0455f;box-shadow:0 0 8px #e0455f}
/* Visor a pantalla completa */
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(4,2,3,.94);backdrop-filter:blur(6px);animation:lbIn .2s ease}
@keyframes lbIn{from{opacity:0}}
.lb img{max-width:min(94vw,1600px);max-height:88vh;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.8)}
.lb-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-hi);background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer}
.lb-x:hover{background:var(--accent)}
.lb .pg-count{left:50%;transform:translateX(-50%);bottom:22px}
@media(max-width:640px){.pg-nav{opacity:1;width:36px;height:36px;font-size:22px}.pg-th{width:110px}}
.pg-stage:before{content:"";position:absolute;inset:-30px;background:var(--pg-bg,none) center/cover;filter:blur(28px) brightness(.45) saturate(1.2)}
.pg-img img{position:relative}
/* Portada en el listado de recursos */
.sc-cover{aspect-ratio:3/2;display:block;font-size:0}
.sc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sc-cover:hover img{transform:scale(1.04)}
.sc-demo{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);color:#fff;font:700 12px var(--font);opacity:0;transform:translateY(6px);transition:.25s}
.sc-demo i{width:7px;height:7px;border-radius:50%;background:#e0455f;box-shadow:0 0 8px #e0455f}
.sc-cover:hover .sc-demo{opacity:1;transform:none}
.sc-cover img{padding:0!important;background:none!important}

/* ===== Ficha: cabecera a todo el ancho y columnas alineadas ===== */
.ptop{margin-bottom:6px}
.ptop .ptabs{margin:18px 0 22px}
.detail{align-items:start}
.buy{top:100px}
/* Selector Portada / Demo en vivo encima del visor (sin miniaturas repetidas) */
.pg-switch{display:inline-flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.pg-switch[hidden]{display:none}
.pg-switch .pg-th{width:auto;aspect-ratio:auto;opacity:1;display:flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:9px;background:none;color:var(--dim);font:700 13px var(--font);box-shadow:none}
.pg-switch .pg-th:hover{color:var(--text)}
.pg-switch .pg-th.on{background:rgba(255,255,255,.07);color:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line-hi)}
.pg-dot{width:7px;height:7px;border-radius:50%;background:#e0455f;box-shadow:0 0 8px #e0455f;animation:live 1.8s infinite}
.dl-tag{color:var(--mute)!important}
.dl-tag b{color:var(--dim)}
.pg-stage .pg-count{display:none}

/* ===== Portada: tablet con efecto al hacer scroll (estilo LabyMod) ===== */
.lhero{padding-bottom:120px}
.tablet-scroll{perspective:1100px;margin-top:60px;width:min(1100px,100%)}
.tablet{transform-origin:center top;transform:rotateX(30deg) scale(.98);will-change:transform;
  padding:16px 16px 12px;border-radius:34px;background:linear-gradient(180deg,#221a1d,#0f0b0c);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.06) inset,0 60px 120px -30px rgba(0,0,0,.95),0 30px 140px -40px var(--glow)}
.tablet:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,calc(var(--shine,1) * .10)),transparent 40%)}
.tablet .screen{border-radius:20px;box-shadow:0 0 0 2px #050304}
.tablet-cam{position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2c2427;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tablet .monitor-bar{padding:12px 6px 2px}
.lhero-shot.tablet-scroll:after{display:none}
.lhero .demo-tabs{margin-bottom:22px}
@media(max-width:760px){.tablet{padding:9px 9px 8px;border-radius:22px}.tablet .screen{border-radius:14px}.tablet-scroll{perspective:800px;margin-top:40px}}

/* Respuestas al feedback */
.rv-tools{display:flex;gap:14px;margin-top:8px}
.rv-reply-btn{border:0;background:none;padding:0;color:var(--dim);font:700 12px var(--font);cursor:pointer}
.rv-reply-btn:hover{color:var(--accent-hi)}
.rv-tools .rv-del{margin-top:0}
.rv-replies{margin:14px 0 0 22px;padding-left:16px;border-left:2px solid var(--line-hi);display:flex;flex-direction:column;gap:14px}
.rv-rep{display:flex;gap:10px}
.rv-rep .ava{width:30px;height:30px;border-radius:8px;font-size:12px}
.rv-rep-body{flex:1;min-width:0}
.rv-rep-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.rv-rep-head b{font-size:13px}
.rv-rep-head .role-badge{margin-left:2px}
.rv-rep-head small{color:var(--mute);font-size:11px}
.rv-rep-body p{font-size:13.5px;margin-top:3px}
.rv-rep-del{margin-left:auto;border:0;background:none;color:var(--mute);font:600 11px var(--font);cursor:pointer;text-decoration:underline}
.rv-rep-del:hover{color:#ff7a8f}
.rv-reply-form{margin:12px 0 0 22px}
.rv-reply-form[hidden]{display:none}
.rv-reply-form textarea{width:100%;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(0,0,0,.3);color:var(--text);font:14px var(--font);outline:none}
.rv-reply-form textarea:focus{border-color:var(--accent-hi)}
.rv-reply-form .btn{padding:9px 16px;font-size:13px}
@media(max-width:560px){.rv-replies,.rv-reply-form{margin-left:6px}}