/* ============================================================
   BALAGUERA GAMER TECH — Estilos
   Paleta: negro / rojo / acero (del logo)
   Display: Rajdhani (condensada, gamer)  ·  Cuerpo: Inter
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&family=Orbitron:wght@700;900&display=swap');

:root{
  --bg:#0b0c0e;
  --bg-2:#0f1114;
  --panel:#14161a;
  --panel-2:#1b1e24;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --red:#e02128;
  --red-2:#ff3b41;
  --red-deep:#8f1015;
  --steel:#c7ccd4;
  --steel-dim:#8a9099;
  --text:#eef1f5;
  --muted:#98a0aa;
  --ok:#2fbf6b;
  --warn:#e6a325;
  --bad:#e0484f;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

h1,h2,h3,.brand-type{
  font-family:'Rajdhani',sans-serif;
  letter-spacing:.5px;
  line-height:1.1;
  margin:0 0 .4em;
}
h1{font-size:2rem}
h2{font-size:1.5rem}

.container{max-width:1440px;margin:0 auto;padding:0 32px}
.section{padding:56px 0}
.muted{color:var(--muted)}
.center{text-align:center}
.eyebrow{
  font-family:'Rajdhani',sans-serif;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:.78rem;
  color:var(--red);
  font-weight:600;
}

/* ---------- Marca (texto BALAGUERA) ---------- */
.brand-type{
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
}
.brand-type .g{color:var(--red)}
.brand-sub{
  font-family:'Rajdhani';letter-spacing:6px;font-size:.6rem;
  color:var(--steel-dim);text-transform:uppercase;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Rajdhani';font-weight:600;font-size:1rem;letter-spacing:1px;
  text-transform:uppercase;
  padding:.7rem 1.4rem;border:1px solid transparent;border-radius:8px;
  cursor:pointer;transition:.15s ease;background:var(--panel-2);color:var(--text);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--red-2),var(--red));
  color:#fff;box-shadow:0 6px 18px rgba(224,33,40,.35);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--red);color:#fff}
.btn-ok{background:linear-gradient(180deg,#38d67c,var(--ok));color:#04210f}
.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-danger:hover{background:var(--bad);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:.4rem .8rem;font-size:.85rem}

/* ---------- Encabezado / navegación ---------- */
.site-header .container{max-width:100%;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(11,12,14,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:16px;padding:28px 0}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:52px;width:auto}
.brand .brand-type{font-size:1.15rem;margin:0}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.nav-right{display:flex;flex-wrap:wrap;gap:8px 14px;margin-left:auto;align-items:center}
.nav-right a{
  font-family:'Rajdhani';font-weight:700;letter-spacing:1px;text-transform:uppercase;
  font-size:.88rem;color:#fff;opacity:.65;transition:.18s;
  padding:.4rem .2rem;position:relative;
}
.nav-right a:hover{opacity:1}
.nav-right a.active{opacity:1;color:var(--red)}
.nav-right .saldo-pill{font-size:.82rem}
.nav-links a{
  font-family:'Rajdhani';font-weight:700;letter-spacing:1px;text-transform:uppercase;
  font-size:1rem;color:#fff;opacity:.65;transition:.18s;
  padding:.4rem .2rem;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--red);transition:right .2s ease;
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{right:0}
.nav-links a.active{
  opacity:1;color:var(--red);text-shadow:0 0 12px rgba(224,33,40,.5);
}
.nav-links a.active::after{right:0}
.saldo-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line-strong);
  padding:.35rem .7rem;border-radius:999px;font-size:.85rem;
}
.saldo-pill b{color:var(--red-2);font-family:'Rajdhani'}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- Hero / bienvenida ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:url('/uploads/hero-fondo-gamer.png') center center / cover no-repeat;
  border-bottom:1px solid var(--line);
  min-height:calc(100vh - 125px);
  display:flex;
  align-items:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  pointer-events:none;z-index:1;
}
.hero-inner{
  display:block;
  width:100%;
  max-width:700px;
  padding:60px 0;
  position:relative;
  z-index:3;
}
.hero-title{
  font-size:2.2rem;font-weight:900;text-transform:uppercase;margin-bottom:.2em;
  font-family:'Orbitron',sans-serif;letter-spacing:.04em;white-space:nowrap;
  color:#c0c0cc;
  text-shadow:0 0 40px rgba(192,192,210,.6),0 0 80px rgba(192,192,210,.3),0 3px 6px rgba(0,0,0,1);
  -webkit-text-stroke:1px rgba(0,0,0,.4);
}
@media(max-width:900px){
  .hero-title{font-size:1.4rem;white-space:normal}
}
.hero-title .accent{
  color:transparent;-webkit-text-stroke:1.5px var(--red);
}
.hero-sub{color:#fff;font-size:1.1rem;max-width:44ch;margin-bottom:1.6rem;
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.6);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-tags{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero-tag{
  font-family:'Rajdhani';font-weight:700;letter-spacing:1px;text-transform:uppercase;
  font-size:.85rem;color:#fff;
  border:1px solid rgba(255,255,255,.18);border-left:4px solid var(--red);
  padding:.5rem 1rem;border-radius:6px;
  background:rgba(15,12,16,.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:.18s;
}
.hero-tag:hover{
  background:rgba(224,33,40,.20);border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(224,33,40,.30);
}
.hero-art{position:relative;text-align:center}
.hero-art img{
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
  border-radius:16px;border:1px solid var(--line);
}

/* ---------- Rejilla de categorías ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.cat-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;transition:.18s;
}
.cat-card:hover{border-color:var(--red);transform:translateY(-3px)}
.cat-card .num{font-family:'Rajdhani';color:var(--steel-dim);font-size:.85rem;letter-spacing:2px}
.cat-card h3{margin:.3rem 0 .1rem;text-transform:uppercase}
.cat-card .count{color:var(--muted);font-size:.85rem}

/* ---------- Productos ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.product-card{
  background:rgba(10,8,12,.20);border:1px solid rgba(255,255,255,.10);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;transition:.18s;
}
.product-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.product-media{
  position:relative;
  aspect-ratio:3/4;background:var(--panel-2);display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-bottom:1px solid var(--line);
}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-media .ph{font-family:'Rajdhani';color:var(--steel-dim);font-size:2rem;letter-spacing:3px}
.product-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-body .cat{font-size:.72rem;color:var(--red);text-transform:uppercase;letter-spacing:2px;font-family:'Rajdhani';font-weight:600}
.product-body h3{font-size:1.15rem;margin:0}
.product-desc{color:var(--muted);font-size:.85rem;flex:1}
.price{font-family:'Rajdhani';font-weight:700;font-size:1.35rem;color:#fff}
.price-usd{color:var(--steel-dim);font-size:.85rem;font-weight:500;font-family:'Inter'}
.stock-tag{font-size:.75rem;color:var(--ok)}
.stock-tag.out{color:var(--bad)}

/* ---------- Tarjetas / paneles genéricos ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;
}
.card + .card{margin-top:16px}
.card-red{border-top:3px solid var(--red)}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;font-family:'Rajdhani';font-weight:600;font-size:.78rem;
  letter-spacing:1px;text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;
  border:1px solid var(--line-strong);
}
.badge-ok{color:var(--ok);border-color:rgba(47,191,107,.4);background:rgba(47,191,107,.08)}
.badge-warn{color:var(--warn);border-color:rgba(230,163,37,.4);background:rgba(230,163,37,.08)}
.badge-bad{color:var(--bad);border-color:rgba(224,72,79,.4);background:rgba(224,72,79,.08)}

/* ---------- Formularios ---------- */
.form label{display:block;margin-bottom:14px;font-size:.9rem;color:var(--steel)}
.form input,.form textarea,.form select,
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;margin-top:6px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:8px;
  color:var(--text);padding:.7rem .8rem;font-family:inherit;font-size:.95rem;
}
.form input:focus,.form textarea:focus,.form select:focus,
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(224,33,40,.15)}
textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.help{color:var(--muted);font-size:.8rem;margin-top:4px}

/* ---------- Alertas ---------- */
.alert{border-radius:8px;padding:.8rem 1rem;margin-bottom:14px;font-size:.92rem;border:1px solid}
.alert-ok{background:rgba(47,191,107,.1);border-color:rgba(47,191,107,.4);color:#9ff0c2}
.alert-warn{background:rgba(230,163,37,.1);border-color:rgba(230,163,37,.4);color:#f2d59a}
.alert-bad{background:rgba(224,72,79,.1);border-color:rgba(224,72,79,.4);color:#f4b4b7}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;min-width:560px}
.table th,.table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
.table th{font-family:'Rajdhani';text-transform:uppercase;letter-spacing:1px;color:var(--steel-dim);font-weight:600;background:var(--bg-2)}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- Cajas de pago (Nequi / Binance) ---------- */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay-box{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:10px;padding:18px}
.pay-box h3{display:flex;align-items:center;gap:8px;text-transform:uppercase;margin-bottom:10px}
.pay-box .dato{display:flex;justify-content:space-between;gap:10px;padding:.35rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.pay-box .dato b{font-family:'Rajdhani';font-size:1.05rem;color:#fff;user-select:all}
.tag-nequi{color:#c86dd7}
.tag-binance{color:#f0b90b}

/* ---------- Entrega de compra ---------- */
.entrega{
  background:linear-gradient(180deg,rgba(47,191,107,.08),transparent);
  border:1px solid rgba(47,191,107,.35);border-radius:10px;padding:16px;
}
.entrega pre{
  white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;color:#dfe4ea;margin:8px 0 0;
}

/* ---------- Auth (login/registro/instalar) ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(900px 500px at 50% -10%,rgba(224,33,40,.16),transparent 60%),var(--bg);padding:24px}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--red);border-radius:14px;padding:32px;box-shadow:var(--shadow)}
.auth-logo{text-align:center;margin-bottom:12px}
.auth-logo img{height:96px;margin:0 auto}
.auth-card h1{text-align:center;text-transform:uppercase;font-size:1.6rem}
.auth-sub{text-align:center;color:var(--muted);margin-bottom:20px;font-size:.9rem}
.link-center{display:block;text-align:center;margin-top:16px;color:var(--steel-dim);font-size:.9rem}
.link-center:hover{color:var(--red)}
code{background:var(--bg-2);padding:.1rem .4rem;border-radius:4px;font-size:.85em}

/* ---------- Stat cards (admin) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:26px}
.stat{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;padding:18px}
.stat .n{font-family:'Rajdhani';font-weight:700;font-size:2rem;color:#fff;line-height:1}
.stat .l{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-family:'Rajdhani'}

/* ---------- Layout admin ---------- */
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin-side{background:var(--bg-2);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.admin-side .brand{margin-bottom:22px}
.admin-side .brand img{height:36px}
.admin-nav{display:flex;flex-direction:column;gap:4px}
.admin-nav a{
  font-family:'Rajdhani';font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:.92rem;
  color:var(--steel-dim);padding:.6rem .8rem;border-radius:8px;display:flex;align-items:center;gap:8px;
}
.admin-nav a:hover{background:var(--panel);color:#fff}
.admin-nav a.active{background:var(--panel);color:#fff;border-left:3px solid var(--red)}
.admin-main{padding:28px}
.admin-badge{display:inline-block;font-family:'Rajdhani';font-size:.7rem;letter-spacing:2px;color:var(--red);border:1px solid var(--red-deep);border-radius:4px;padding:.1rem .4rem;text-transform:uppercase;margin-left:6px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:12px 0;color:var(--muted);font-size:.8rem}
.site-footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- Utilidades ---------- */
.flex{display:flex;gap:12px;align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.mt{margin-top:16px}.mt-lg{margin-top:28px}.mb{margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.empty{text-align:center;color:var(--muted);padding:40px 20px;border:1px dashed var(--line);border-radius:var(--radius)}

/* ---------- Responsivo ---------- */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1;max-width:360px;margin:0 auto}
  .hero-cta,.hero-tags{justify-content:center}
  .hero-title{font-size:2.4rem}
  .grid-2,.form-row,.pay-grid{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;display:flex;flex-direction:column}
  .admin-nav{flex-direction:row;flex-wrap:wrap}
  .nav-links{display:none;position:absolute;top:66px;right:0;left:0;flex-direction:column;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:14px 20px;gap:14px}
  .nav-links.open{display:flex}
  .nav-right{display:none;position:absolute;top:66px;right:0;left:0;flex-direction:column;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:14px 20px;gap:14px;margin-left:0}
  .nav-right.open{display:flex}
  .nav-toggle{display:block;margin-left:auto}
}

/* ---------- Botón volver ---------- */
.back-bar{padding:14px 0 0}
.btn-volver{border-color:var(--line)}

/* ---------- Chat de soporte ---------- */
.chat-mensajes{height:440px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-2)}
.chat-vacio{margin:auto;color:var(--muted);text-align:center;max-width:32ch}
.msg{max-width:76%;padding:.55rem .8rem;border-radius:14px;font-size:.92rem;line-height:1.4}
.msg .txt{display:block;white-space:pre-wrap;word-break:break-word}
.msg .hora{display:block;font-size:.66rem;color:var(--muted);margin-top:4px;text-align:right}
.msg.mio{align-self:flex-end;background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;border-bottom-right-radius:4px}
.msg.mio .hora{color:rgba(255,255,255,.85)}
.msg.otro{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel)}
.chat-form input{margin:0}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}

/* ---------- Soporte admin ---------- */
.soporte-admin{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.convos{display:flex;flex-direction:column;gap:4px;max-height:580px;overflow:auto}
.convo{padding:10px 12px;border-radius:8px;display:block;color:var(--text)}
.convo:hover{background:var(--panel-2)}
.convo.activa{background:var(--panel-2);border-left:3px solid var(--red)}
.chat-panel{display:flex;flex-direction:column;min-height:540px}
.chat-panel .chat-mensajes{flex:1}

@media(max-width:860px){
  .soporte-admin{grid-template-columns:1fr}
  .convos{max-height:220px}
}

/* ---------- Burbuja de chat flotante ---------- */
.bgt-chat{position:fixed;right:20px;bottom:20px;z-index:9999;font-family:'Inter',sans-serif}
.bgt-chat-btn{position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;font-size:1.6rem;
  box-shadow:0 8px 24px rgba(224,33,40,.45);transition:.15s}
.bgt-chat-btn:hover{transform:translateY(-2px) scale(1.04)}
.bgt-chat-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;
  background:#fff;color:var(--red);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--red)}
.bgt-chat-panel{position:absolute;right:0;bottom:74px;width:340px;max-width:calc(100vw - 40px);
  height:460px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.55)}
.bgt-chat-panel[hidden]{display:none}
.bgt-chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:linear-gradient(180deg,var(--red),var(--red-deep));color:#fff}
.bgt-chat-head span{opacity:.85;font-size:.85rem}
.bgt-chat-head button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer;opacity:.85}
.bgt-chat-head button:hover{opacity:1}
.bgt-chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg-2)}
.bgt-chat-intro{margin:auto;text-align:center;color:var(--muted);font-size:.9rem;max-width:26ch}
.bgt-msg{max-width:80%;padding:.5rem .7rem;border-radius:12px;font-size:.9rem;line-height:1.35}
.bgt-msg .t{display:block;white-space:pre-wrap;word-break:break-word}
.bgt-msg .h{display:block;font-size:.62rem;color:var(--muted);margin-top:3px;text-align:right}
.bgt-msg.mio{align-self:flex-end;background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;border-bottom-right-radius:4px}
.bgt-msg.mio .h{color:rgba(255,255,255,.85)}
.bgt-msg.otro{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bgt-chat-form{border-top:1px solid var(--line);background:var(--panel);padding:10px}
.bgt-guest{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.bgt-chat-form input{width:100%;margin:0;background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:8px;color:var(--text);padding:.55rem .7rem;font-size:.9rem}
.bgt-chat-form input:focus{outline:none;border-color:var(--red)}
.bgt-chat-send{display:flex;gap:6px}
.bgt-chat-send .btn{padding:.55rem .9rem;flex-shrink:0}
@media(max-width:520px){
  .bgt-chat{right:14px;bottom:14px}
  .bgt-chat-panel{width:calc(100vw - 28px)}
}

/* ---------- Categorías con icono neón (inicio) ---------- */
.cat-card-neon{position:relative}
.cat-icono{width:46px;height:46px;margin-bottom:12px}
.cat-icono svg{width:100%;height:100%;display:block}
.cat-card-neon .num{color:var(--glow);opacity:.9}
.cat-card-neon:hover{border-color:var(--glow);box-shadow:0 0 26px -8px var(--glow)}
.cat-card-neon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px 80px at 20% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%)}

/* ---------- Tarjeta de producto con botón de carrito ---------- */
.product-card-link{display:flex;flex-direction:column;color:inherit;flex:1}
.product-foot{padding:0 16px 16px;margin-top:auto}

/* ---------- Fila de conversación con papelera ---------- */
.convo-row{display:flex;align-items:stretch;gap:2px}
.convo-row .convo{flex:1}
.convo-del{display:flex;margin:0}
.convo-del button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 8px;border-radius:8px}
.convo-del button:hover{color:var(--bad);background:var(--panel-2)}

/* ---------- Fondo japonés "sakura" del hero ---------- */
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-scene svg{width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:none}
.sakura{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:none}
.petal{position:absolute;top:-10%;
  background:radial-gradient(circle at 30% 30%, #ffe9f0, #ff5c8a);
  border-radius:150% 0 150% 0;opacity:1;will-change:top,transform;
  animation-name:caer;animation-timing-function:linear;animation-iteration-count:infinite;
  box-shadow:0 0 10px rgba(255,120,160,.75)}
@keyframes caer{
  0%{top:-10%;transform:translateX(0) rotate(0deg);opacity:0}
  8%{opacity:.95}
  90%{opacity:.9}
  100%{top:112%;transform:translateX(var(--sway,60px)) rotate(540deg);opacity:.2}
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-fab{position:fixed;left:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,#25d366,#128c4b);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(18,140,75,.5);transition:transform .15s ease;animation:waPulse 2.4s ease-out infinite}
.wa-fab:hover{transform:scale(1.08)}
@keyframes waPulse{0%{box-shadow:0 10px 24px rgba(18,140,75,.5),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 10px 24px rgba(18,140,75,.5),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 10px 24px rgba(18,140,75,.5),0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wa-fab{width:50px;height:50px;left:14px;bottom:14px}}
@media (prefers-reduced-motion: reduce){.wa-fab{animation:none}}

/* ---------- Ofertas / descuentos ---------- */
.oferta-esquina{position:absolute;top:10px;left:10px;z-index:2;
  background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;
  font-family:'Rajdhani';font-weight:700;font-size:.95rem;letter-spacing:.5px;
  padding:.25rem .6rem;border-radius:8px;box-shadow:0 6px 14px rgba(224,33,40,.45)}
.precio-tachado{color:var(--muted);text-decoration:line-through;font-family:'Inter';font-weight:500}

/* ---------- Página "Cómo comprar" ---------- */
.pasos{display:flex;flex-direction:column;gap:16px}
.paso{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px}
.paso-num{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani';font-weight:700;font-size:1.4rem;color:#fff;
  background:linear-gradient(180deg,var(--red-2),var(--red));box-shadow:0 6px 16px rgba(224,33,40,.4)}
.paso h3{margin:0 0 .3rem}
.lista-pago{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.92rem;line-height:1.7}
.lista-pago li{margin-bottom:.3rem}

/* ---------- Buscador del catálogo ---------- */
.buscador{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.buscador .buscador-campo{position:relative;flex:1;min-width:220px;display:flex;align-items:center}
.buscador .buscador-campo::before{content:"";position:absolute;left:16px;width:17px;height:17px;pointer-events:none;z-index:1;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat center/contain}
.buscador input[type=search]{width:100%;margin:0;height:48px;padding:0 16px 0 44px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-strong);border-left:3px solid var(--red);border-radius:10px;
  font-size:.98rem;font-family:inherit;-webkit-appearance:none;appearance:none}
.buscador input[type=search]::placeholder{color:var(--steel-dim)}
.buscador input[type=search]:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(224,33,40,.18)}
.buscador .btn{height:48px}

/* ---------- Aura de color detrás de las tarjetas ---------- */
.cat-card-neon{box-shadow:0 10px 34px -14px var(--glow)}
.cat-card-neon::after{background:radial-gradient(150px 110px at 25% 0%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 72%);opacity:1}
.cat-card-neon:hover{box-shadow:0 0 0 1px var(--glow),0 16px 46px -12px var(--glow)}

.product-card{position:relative;--glow:#c7ccd4;box-shadow:0 12px 34px -18px var(--glow)}
.product-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
  background:radial-gradient(200px 130px at 50% -8%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 72%)}
.product-card:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--glow) 55%, transparent),0 18px 48px -14px var(--glow);border-color:transparent;transform:translateY(-3px)}

/* ---------- Pétalos de fondo en toda la página ---------- */
.sakura-global{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sakura-global .petal{position:fixed}

/* ---------- Peces koi nadando (catálogo) ---------- */
.koi-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.koi{position:fixed;left:0;top:0;will-change:transform}
.koi-svg{width:var(--w,110px);height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.koi-left .koi-svg{transform:scaleX(-1)}
.koi-tail{transform-box:fill-box;transform-origin:right center;animation:koiCola 1.1s ease-in-out infinite}
@keyframes koiCola{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.koi-right{animation:koiR var(--dur,28s) linear infinite;animation-delay:var(--delay,0s)}
.koi-left{animation:koiL var(--dur,28s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes koiR{
  0%{transform:translate(-170px,0)}
  25%{transform:translate(28vw,-16px)}
  50%{transform:translate(52vw,5px)}
  75%{transform:translate(78vw,-12px)}
  100%{transform:translate(112vw,0)}
}
@keyframes koiL{
  0%{transform:translate(112vw,0)}
  25%{transform:translate(78vw,16px)}
  50%{transform:translate(52vw,-5px)}
  75%{transform:translate(28vw,12px)}
  100%{transform:translate(-170px,0)}
}

/* ---------- Panda 3D (model-viewer) en el inicio ---------- */
.hero-art .panda-3d{width:100%;height:460px;max-width:100%;
  background:transparent;border-radius:16px;border:1px solid var(--line);
  --poster-color:transparent;outline:none}
.hero-art .panda-3d img[slot=poster]{width:100%;height:100%;object-fit:contain;border-radius:16px}
@media(max-width:860px){.hero-art .panda-3d{height:360px}}

/* ---------- Carrusel de banners (inicio) ---------- */
.carrusel-wrap{padding:0;margin:-6px 0 0;position:relative}
.carrusel{position:relative;width:100%;aspect-ratio:4/1;max-height:560px;overflow:hidden;
  border:0;background:var(--panel-2)}
/* Difuminado arriba y abajo para fundir con el fondo negro */
.carrusel-wrap::before,.carrusel-wrap::after{content:"";position:absolute;left:0;right:0;height:70px;z-index:2;pointer-events:none}
.carrusel-wrap::before{top:0;background:linear-gradient(to bottom, var(--bg) 0%, rgba(11,12,14,0) 100%)}
.carrusel-wrap::after{bottom:0;background:linear-gradient(to top, var(--bg) 0%, rgba(11,12,14,0) 100%)}
@media(max-width:700px){.carrusel-wrap::before,.carrusel-wrap::after{height:40px}}
.carrusel-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.carrusel-slide.activa{opacity:1;pointer-events:auto}
.carrusel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carrusel-slide a{display:block;width:100%;height:100%}
.carrusel-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;gap:8px;justify-content:center}
.carrusel-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:.2s}
.carrusel-dots button.activa{background:var(--red);transform:scale(1.25);box-shadow:0 0 8px var(--red)}
@media(max-width:700px){.carrusel{aspect-ratio:16/9}}

/* ---------- Caja de cupón de descuento ---------- */
.cupon-box{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.cupon-form{display:flex;gap:8px;flex:1;min-width:240px}
.cupon-form input[type=text]{flex:1;margin:0;background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-strong);border-left:3px solid var(--red);border-radius:10px;height:44px;padding:0 14px}
.cupon-form input[type=text]::placeholder{color:var(--steel-dim)}
.cupon-ok{display:inline-flex;align-items:center;gap:6px;color:var(--ok);
  background:rgba(43,209,120,.08);border:1px solid rgba(43,209,120,.35);border-radius:10px;padding:8px 14px}

/* ---------- Mi cuenta: tarjetas en una sola columna ---------- */
.cuenta-col{display:flex;flex-direction:column;gap:16px}

/* ---------- Fila de WhatsApp con selector de país ---------- */
.wa-row{display:flex;gap:8px}
.wa-row select{flex:0 0 auto;width:auto;background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-strong);border-radius:10px;height:46px;padding:0 8px}
.wa-row input[type=tel]{flex:1;margin:0}

/* ---------- Botón papelera en Mis compras ---------- */
.btn-papelera{background:transparent;border:1px solid var(--line-strong);color:var(--steel);
  border-radius:10px;height:36px;width:40px;cursor:pointer;font-size:1rem;line-height:1;
  transition:.15s}
.btn-papelera:hover{border-color:var(--red);color:var(--red);background:rgba(224,33,40,.08)}

/* ---------- Botón Borrar (bonito) ---------- */
.btn-borrar{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  color:#ff6b70;background:linear-gradient(180deg,rgba(224,33,40,.10),rgba(224,33,40,.04));
  border:1px solid rgba(224,33,40,.35);border-radius:12px;padding:9px 16px;line-height:1;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.btn-borrar .ico{font-size:1rem;filter:grayscale(.1)}
.btn-borrar:hover{color:#fff;background:linear-gradient(180deg,#e02128,#b71a20);
  border-color:#e02128;box-shadow:0 6px 16px rgba(224,33,40,.35);transform:translateY(-1px)}
.btn-borrar:active{transform:translateY(0)}

/* Fila de acciones (Borrar) al pie de cada compra */
.compra-acciones{display:flex;justify-content:flex-end;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}

/* ---------- Selector de cantidad (– / +) en el carrito ---------- */
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-strong);
  border-radius:12px;overflow:hidden;background:var(--bg-2)}
.qty-f{margin:0}
.qty-btn{width:38px;height:40px;border:0;background:transparent;color:var(--text);
  font-size:1.3rem;font-weight:800;cursor:pointer;line-height:1;transition:.15s}
.qty-btn:hover:not([disabled]){background:var(--red);color:#fff}
.qty-btn[disabled]{opacity:.35;cursor:not-allowed}
.qty-n{min-width:40px;text-align:center;font-weight:800;font-size:1.05rem;
  padding:0 6px;border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}

/* Campo de número dentro del selector -/+ (ficha de producto) */
.qty .qty-input{width:52px;text-align:center;font-weight:800;font-size:1.05rem;
  border:0;border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
  background:transparent;color:var(--text);height:40px;margin:0;border-radius:0;
  -moz-appearance:textfield}
.qty .qty-input::-webkit-outer-spin-button,
.qty .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Botón Comprar (compra directa) */
.btn-comprar{background:linear-gradient(180deg,#2bd178,#1fa860);color:#04120a;
  border:1px solid #2bd178;font-weight:800}
.btn-comprar:hover{background:linear-gradient(180deg,#33e084,#25b96b);
  box-shadow:0 6px 16px rgba(43,209,120,.35);transform:translateY(-1px)}

/* Dos botones (Añadir / Comprar) en el pie de la tarjeta */
.foot-btns{display:flex;gap:8px}
.foot-btns .btn{flex:1;padding-left:8px;padding-right:8px}

/* Reducir el ancho del buscador y la caja de cupón (mitad) */
.buscador{max-width:620px}
.cupon-box{max-width:620px}

/* ---------- Título estilo CYBERPUNK (catálogo) ---------- */
.cyber-eyebrow{
  color:#00eaff;letter-spacing:.35em;font-weight:800;
  text-shadow:0 0 6px rgba(0,234,255,.8),0 0 14px rgba(0,234,255,.4);
}
.cyber-title{
  color:#fff;font-weight:900;letter-spacing:.02em;
  text-shadow:
    -2px 0 rgba(0,234,255,.9),
    2px 0 rgba(255,45,85,.9),
    0 0 10px rgba(224,33,40,.6),
    0 0 22px rgba(0,234,255,.35);
  animation:cyberFlicker 3.5s infinite;
}
@keyframes cyberFlicker{
  0%,19%,21%,55%,57%,100%{opacity:1}
  20%,56%{opacity:.85}
}
@media (prefers-reduced-motion: reduce){
  .cyber-title{animation:none}
}

/* ---------- Banner de promoción en el catálogo ---------- */
.cat-top{display:flex;gap:16px;align-items:stretch;margin-bottom:14px}
.cat-top-left{flex:0 0 600px;max-width:100%;min-width:0}
.cat-top-left .buscador,
.cat-top-left .cupon-box{max-width:100%}
.cat-banner{flex:1 1 auto;min-width:0;position:relative;overflow:hidden;
  border-radius:16px;border:1px solid var(--line-strong);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.cat-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .cat-top{flex-direction:column}
  .cat-top-left{flex:1 1 100%}
  .cat-banner{flex:1 1 100%;height:140px}
}

/* ---------- Catálogo: optimización para teléfono ---------- */
@media (max-width:640px){
  .cat-top{gap:12px;margin-bottom:12px}
  /* Buscador: input arriba, botón abajo a lo ancho */
  .cat-top-left .buscador{flex-wrap:wrap;gap:8px}
  .cat-top-left .buscador .buscador-campo{flex:1 1 100%;width:100%}
  .cat-top-left .buscador .btn{flex:1 1 100%}
  /* Cupón: input arriba, botón abajo */
  .cat-top-left .cupon-form{flex-wrap:wrap;gap:8px}
  .cat-top-left .cupon-form input[type=text]{flex:1 1 100%;width:100%}
  .cat-top-left .cupon-form .btn{flex:1 1 100%}
  /* Banner de promo */
  .cat-banner{height:130px}
  /* Título cyberpunk un poco más chico */
  .cyber-title{font-size:1.5rem}
}

/* ---------- Categorías en móvil: una fila que se desliza ---------- */
@media (max-width:640px){
  .hero-tags-wrap{position:relative}
  .hero-tags{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;justify-content:flex-start;margin-top:16px;
    padding:2px 40px 8px 2px;scroll-snap-type:x proximity}
  .hero-tags::-webkit-scrollbar{display:none}
  .hero-tag{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  /* Degradado a la derecha = "hay más, desliza" */
  .hero-tags-wrap::after{content:"›";position:absolute;top:2px;right:0;bottom:8px;
    width:44px;display:flex;align-items:center;justify-content:flex-end;
    padding-right:8px;font-size:1.4rem;font-weight:800;color:var(--red);
    pointer-events:none;background:linear-gradient(90deg,rgba(10,10,12,0),rgba(10,10,12,.95) 60%);}
}

/* ---------- Categorías en móvil: menú desplegable ---------- */
.cat-select{display:none}
@media (max-width:820px){
  .hero-tags-wrap{display:none !important;}   /* quitar la fila que se deslizaba */
  .cat-select{display:block;width:100%;margin:16px 0 10px;height:54px;
    padding:0 46px 0 18px;color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em;
    cursor:pointer;border:1px solid #ff3b41;border-radius:14px;
    box-shadow:0 8px 22px rgba(224,33,40,.4);
    -webkit-appearance:none;appearance:none;
    background-image:
      linear-gradient(180deg,#e8262d,#b71a20),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat,no-repeat;
    background-position:center,right 16px center;
    background-size:100% 100%,18px;
    text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .cat-select option{color:#111;background:#fff;font-weight:600}
}

/* ---------- Apartado de Notas (admin) ---------- */
.notas-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.notas-cat-list{display:flex;flex-direction:column;gap:6px}
.notas-cat-item{display:flex;align-items:center;gap:6px}
.notas-cat-item>a{flex:1;display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;color:var(--text);
  text-decoration:none;transition:.15s}
.notas-cat-item>a:hover{border-color:var(--red);background:rgba(224,33,40,.06)}
.notas-cat-item.activa>a{border-color:var(--red);background:rgba(224,33,40,.12);color:#fff;font-weight:700}
.notas-count{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:20px;
  min-width:24px;text-align:center;font-size:.78rem;padding:1px 7px}
.notas-del{background:transparent;border:1px solid var(--line-strong);border-radius:8px;
  height:38px;width:40px;cursor:pointer;color:var(--steel);transition:.15s}
.notas-del:hover{border-color:var(--red);color:var(--red);background:rgba(224,33,40,.08)}
.nota-contenido{white-space:pre-wrap;word-break:break-word;background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0 0;
  font-family:inherit;font-size:.95rem;color:var(--text)}
@media (max-width:820px){ .notas-layout{grid-template-columns:1fr} }

/* Campo para renombrar categoría */
.notas-editcat{display:flex;gap:8px;margin:2px 0 4px}
.notas-editcat input[type=text]{flex:1;margin:0}


/* ---------- Botón de pago Wompi ---------- */
.btn-wompi{display:block;text-align:center;background:linear-gradient(180deg,#00c281,#009e69);color:#fff;
  border:1px solid #00c281;font-weight:800;font-size:1rem;
  padding:14px 20px;border-radius:12px;cursor:pointer;width:100%;
  text-decoration:none;box-sizing:border-box;
  transition:transform .12s,box-shadow .15s}
.btn-wompi:hover{background:linear-gradient(180deg,#00d48f,#00b578);
  box-shadow:0 8px 22px rgba(0,194,129,.4);transform:translateY(-1px);color:#fff}

/* ============================================================
   AJUSTE MÓVIL — toda la tienda, márgenes uniformes
   ============================================================ */

/* Nada se sale de la pantalla nunca */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* ---------- Tablets y celulares grandes ---------- */
@media (max-width: 820px){
  .container{ padding: 0 20px; }
  .section{ padding: 34px 0; }
  .cat-top{ gap: 12px; }
}

/* ---------- Celulares ---------- */
@media (max-width: 640px){

  /* --- Aire uniforme a los dos lados en TODA la página --- */
  .container{ padding: 0 16px; }
  .section{ padding: 24px 0; }
  .page-title{ margin-bottom: 14px; }

  /* --- Textos proporcionados --- */
  .hero-title{ font-size: 1.9rem; line-height: 1.15; }
  .hero-sub{ font-size: 1rem; max-width: 100%; }
  .page-title h2{ font-size: 1.3rem; }
  .product-body h3{ font-size: 1rem; }
  .price{ font-size: 1.1rem; }
  .price-usd{ font-size: .8rem; }

  /* --- Tarjetas --- */
  .card{ padding: 16px; border-radius: 14px; }
  .empty{ padding: 26px 14px; }

  /* --- Rejillas: 2 columnas parejas --- */
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-2, .form-row, .pay-grid{ grid-template-columns: 1fr; gap: 14px; }

  /* --- Tarjeta de producto compacta --- */
  .product-body{ padding: 12px; gap: 6px; }
  .product-body .cat{ font-size: .65rem; letter-spacing: 1px; }
  .product-foot{ padding: 0 12px 12px; }
  .foot-btns{ flex-direction: column; gap: 6px; }
  .foot-btns .btn{ width: 100%; }
  .stock-tag{ font-size: .7rem; }

  /* --- Tablas: nunca desbordan; si no caben, se deslizan --- */
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table{ min-width: 0; width: 100%; }
  .table th, .table td{ padding: 8px 6px; font-size: .85rem; word-break: break-word; }
  .table td:last-child{ text-align: right; white-space: nowrap; }

  /* --- Botones cómodos al tacto --- */
  .btn{ padding: .72rem 1rem; font-size: .9rem; }
  .btn-block{ width: 100%; padding-top: 13px; padding-bottom: 13px; }
  .btn-wompi{ font-size: .95rem; padding: 14px 12px; }
  .btn-sm{ padding: .55rem .8rem; }

  /* --- Formularios (16px evita que el iPhone haga zoom) --- */
  input, select, textarea{ font-size: 16px; max-width: 100%; }
  .form-row{ gap: 10px; }
  .wa-row select{ max-width: 120px; }

  /* --- Encabezado --- */
  .brand img{ height: 34px; }
  .brand .brand-type{ font-size: 1rem; }
  .brand-sub{ display: none; }
  .saldo-pill{ font-size: .8rem; padding: 4px 10px; }

  /* --- Carrito: cantidad y filas --- */
  .qty-btn{ width: 34px; height: 38px; }
  .qty-n, .qty .qty-input{ min-width: 34px; width: 40px; }

  /* --- Mis compras / notas --- */
  .nota-contenido{ font-size: .88rem; padding: 10px; }
  .compra-acciones{ justify-content: stretch; }
  .compra-acciones form, .compra-acciones .btn-borrar{ width: 100%; justify-content: center; }

  /* --- Chat y WhatsApp no tapan el contenido --- */
  .bgt-chat-panel{ width: calc(100vw - 24px); right: -6px; }

  /* --- Pie de página centrado --- */
  .site-footer{ padding: 12px 0; }
  .site-footer .container{ flex-direction: column; text-align: center; gap: 10px; }
}

/* ---------- Celulares pequeños ---------- */
@media (max-width: 380px){
  .container{ padding: 0 12px; }
  .card{ padding: 14px; }
  .page-title h2{ font-size: 1.15rem; }
  .hero-title{ font-size: 1.65rem; }
  .product-grid, .cat-grid, .stat-grid{ gap: 10px; }
}

/* ---------- Tarjeta de Mis compras (imagen + botón Ver) ---------- */
.compra-card{display:flex;gap:16px;align-items:flex-start}
.compra-media{flex:0 0 90px;width:90px;height:90px;border-radius:12px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line-strong)}
.compra-media img{width:100%;height:100%;object-fit:cover;display:block}
.compra-media-ph{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:2rem}
.compra-info{flex:1;min-width:0}
.compra-detalle{margin:12px 0 0;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:14px}
.compra-detalle pre{margin:0;white-space:pre-wrap;word-break:break-word;
  font-family:inherit;font-size:.9rem;line-height:1.6}
@media(max-width:640px){
  .compra-card{flex-direction:column;gap:12px}
  .compra-media{width:100%;height:160px;flex:none}
}

/* ---------- Mis compras: arreglo móvil completo ---------- */
@media (max-width: 640px){
  /* Tarjeta en columna en móvil */
  .compra-card{flex-direction:column;gap:0;padding:0;overflow:hidden}
  .compra-media{width:100%;height:180px;flex:none;border-radius:0;border:0;
    border-bottom:1px solid var(--line)}
  .compra-media img{border-radius:0}
  .compra-info{padding:14px;width:100%}

  /* Badge y botón Ver en la misma fila */
  .compra-info .flex.between{flex-wrap:nowrap;gap:6px}
  .compra-info h3{font-size:1rem}

  /* Detalle: texto que no se salga */
  .compra-detalle{margin:10px 0 0;padding:12px;border-radius:10px}
  .compra-detalle pre{font-size:.78rem;line-height:1.5;
    word-break:break-word;white-space:pre-wrap;overflow-x:hidden}

  /* Acciones (borrar) a todo el ancho */
  .compra-acciones{margin-top:12px;padding-top:10px}
  .compra-acciones form{width:100%}
  .btn-borrar{width:100%;justify-content:center}
}

/* ---------- Últimos movimientos: tabla en escritorio, tarjetas en móvil ---------- */
.movimientos-cards{display:none;flex-direction:column;gap:10px;margin-top:14px}
.mov-card{background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:12px;padding:14px}
.mov-detalle{font-weight:700;font-size:.95rem;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mov-meta{font-size:.78rem;color:var(--muted)}
.mov-monto{font-weight:800;font-size:1rem;color:#fff;margin-bottom:4px}
@media(max-width:640px){
  .movimientos-tabla{display:none}
  .movimientos-cards{display:flex}
}

/* ============================================================
   PANEL ADMIN — Optimización móvil completa
   ============================================================ */

/* Encabezado admin con hamburguesa */
.admin-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:10px}
.admin-hamburger{display:none;background:var(--red);border:0;
  color:#fff;font-size:1.3rem;border-radius:8px;width:42px;height:42px;
  cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;
  font-weight:800;line-height:1}
.nav-badge{background:var(--red);color:#fff;border-radius:20px;
  font-size:.7rem;font-weight:800;padding:1px 7px;margin-left:4px}
.admin-nav-sep{border-top:1px solid var(--line);margin:8px 0}

/* Filtros de pagos/pedidos: deslizables en móvil */
.filtros-scroll{display:flex;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.filtros-scroll::-webkit-scrollbar{display:none}
.filtros-scroll .btn{flex:0 0 auto;white-space:nowrap}

@media(max-width:860px){
  /* Panel lateral → barra superior */
  .admin-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .admin-side{position:sticky;top:0;z-index:100;height:auto;overflow:visible;
    border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .admin-hamburger{display:flex;align-items:center;justify-content:center}
  .admin-top{margin-bottom:0}

  /* Menú oculto por defecto, se abre con JS */
  .admin-nav{display:none;flex-direction:column;gap:2px;
    padding-top:12px;max-height:70vh;overflow-y:auto}
  .admin-nav.abierto{display:flex}
  .admin-nav a{padding:11px 10px;border-radius:8px;font-size:.95rem}
  .admin-nav a.active{background:rgba(224,33,40,.15);color:var(--red)}

  /* Contenido */
  .admin-main{padding:16px}

  /* Tabla de productos → tarjetas */
  .productos-tabla{display:none !important}
  .productos-cards{display:flex !important;flex-direction:column;gap:12px;margin-top:14px}
}
@media(min-width:861px){
  .admin-hamburger{display:none}
  .admin-nav{display:flex !important}
  .admin-top{margin-bottom:18px}
  .productos-cards{display:none !important}
  .productos-tabla{display:block !important}
}

/* Tarjetas de productos para móvil */
.productos-cards{display:none}
.prod-card{background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:14px;overflow:hidden}
.prod-card-top{display:flex;gap:12px;padding:14px;align-items:center}
.prod-card-img{width:64px;height:64px;border-radius:10px;overflow:hidden;
  background:var(--panel-2);flex-shrink:0}
.prod-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-card-img .ph{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:1.6rem}
.prod-card-info{flex:1;min-width:0}
.prod-card-info h4{margin:0 0 3px;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-card-info .meta{font-size:.78rem;color:var(--muted)}
.prod-card-btns{display:flex;gap:6px;padding:0 14px 14px;flex-wrap:wrap}
.prod-card-btns .btn{flex:1;min-width:0;font-size:.78rem;padding:.5rem .6rem}

/* Usuarios: ajuste de botones en móvil */
@media(max-width:640px){
  .usuarios-acciones{flex-wrap:wrap;gap:6px}
  .usuarios-acciones form{flex:1 1 45%}
  .usuarios-acciones .btn{width:100%;justify-content:center}
  .qty-row{flex-direction:column;align-items:stretch}
  .qty-row input{width:100% !important}
  .qty-row .btn{width:100%}
}

/* ---------- Carrito: tabla escritorio / tarjetas móvil ---------- */
.carrito-cards{display:none;flex-direction:column;gap:12px}
@media(max-width:640px){
  .carrito-tabla{display:none}
  .carrito-cards{display:flex}
}

/* Filtros admin: select en móvil, botones en escritorio */
.admin-filtro-select{display:none}
.filtros-desktop{display:flex}
@media(max-width:860px){
  .admin-filtro-select{display:block;margin-bottom:14px}
  .filtros-desktop{display:none}
}

/* ---------- Toggle (interruptor) ---------- */
.toggle-wrap{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--line-strong);
  border-radius:28px;cursor:pointer;transition:.25s}
.toggle-slider::before{content:'';position:absolute;left:4px;top:4px;
  width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s}
.toggle-wrap input:checked + .toggle-slider{background:var(--ok)}
.toggle-wrap input:checked + .toggle-slider::before{transform:translateX(24px)}

/* ---------- Logos de métodos de pago Wompi ---------- */
.wompi-metodos{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.wompi-metodos span{display:flex;align-items:center;justify-content:center}
.wompi-metodos svg{height:28px;width:auto;border-radius:6px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));transition:.15s}
.wompi-metodos span:hover svg{transform:translateY(-2px);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

/* ---------- Layout de pago: factura arriba, métodos abajo ---------- */
.pago-layout{display:flex;flex-direction:column;gap:20px;max-width:780px;margin:0 auto}
.pago-layout .card{width:100%}

/* ---------- Tarjeta de pago con saldo ---------- */
.saldo-pago-info{background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:12px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.saldo-pago-fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.saldo-pago-monto{font-weight:800;font-size:1.15rem;color:#fff}
.saldo-pago-total{font-weight:800;font-size:1.15rem;color:var(--red)}
.saldo-pago-ok{display:flex;justify-content:space-between;align-items:center;
  gap:10px;color:var(--ok);font-weight:700;font-size:.88rem;
  border-top:1px solid var(--ok);padding-top:10px}
.saldo-pago-bad{display:flex;justify-content:space-between;align-items:center;
  gap:10px;color:var(--bad);font-weight:700;font-size:.88rem;
  border-top:1px solid var(--bad);padding-top:10px}
.btn-saldo{background:linear-gradient(180deg,#e02128,#b71a20);color:#fff;
  border:1px solid #e02128;font-weight:800;font-size:1rem;
  padding:14px 20px;border-radius:12px;cursor:pointer;
  transition:transform .12s,box-shadow .15s}
.btn-saldo:hover{background:linear-gradient(180deg,#f02830,#c91f26);
  box-shadow:0 8px 22px rgba(224,33,40,.4);transform:translateY(-1px)}

/* ---------- Separador entre métodos de pago ---------- */
.pago-separador{display:flex;align-items:center;gap:14px;margin:4px 0}
.pago-separador::before,.pago-separador::after{content:'';flex:1;height:1px;background:var(--line-strong)}
.pago-separador span{color:var(--muted);font-size:.82rem;white-space:nowrap;letter-spacing:.04em}

/* ---------- Chips de garantías de pago ---------- */
.pago-garantias{display:flex;flex-wrap:wrap;gap:8px;margin:.6rem 0 1rem}
.pago-garantias span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--text);
  white-space:nowrap}

/* Hero solo texto (sin panda) */
.hero-solo-texto{
  display:block;
  max-width:700px;
  padding:90px 0 80px;
}


/* ============================================================
   AJUSTE HOME + BARRAS ROSADAS — PC Y CELULAR
   ============================================================ */

/* La franja inferior baja un poco más y tapa la línea negra */
.site-footer{
  background:rgba(239,62,122,.18) !important;
  border-top:1px solid rgba(255,120,165,.32) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:16px 0 30px !important;
  margin:0 0 -18px 0 !important;
  position:relative;
  z-index:20;
}

/* Barra superior rosada transparente */
.site-header{
  background:rgba(239,62,122,.18) !important;
  border-bottom:1px solid rgba(255,120,165,.32) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* Inicio en PC */
.home-hero,
.hero{
  min-height:calc(100vh - 125px);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.home-hero .hero-inner,
.hero .hero-inner{
  width:100%;
  max-width:1440px;
  padding-top:70px;
  padding-bottom:70px;
}

/* ---------- Inicio optimizado para celular ---------- */
@media (max-width:640px){

  .site-header{
    position:sticky;
    top:0;
  }

  .nav{
    min-height:58px;
    padding:8px 0;
  }

  .brand img{
    height:32px;
  }

  .brand .brand-type{
    font-size:.95rem;
    letter-spacing:1.2px;
  }

  /* Imagen del inicio ocupa bien la pantalla del teléfono */
  .home-hero,
  .hero{
    min-height:calc(100svh - 58px);
    background-size:cover !important;
    background-position:center center !important;
    display:flex;
    align-items:center;
  }

  /* Sin oscurecimiento — la imagen se ve con sus colores originales */
  .hero::before{
    background:none !important;
  }

  .home-hero .hero-inner,
  .hero .hero-inner,
  .hero-solo-texto{
    width:100%;
    max-width:none;
    padding:42px 16px 48px !important;
    text-align:center;
  }

  .hero-content{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }

  .hero-title{
    font-size:1.65rem !important;
    line-height:1.12;
    white-space:normal !important;
    text-align:center;
    margin-bottom:12px;
  }

  .hero-sub{
    font-size:.96rem;
    line-height:1.5;
    max-width:32ch;
    margin:0 auto 22px;
    color:#e5e7eb;
    text-align:center;
  }

  .hero-cta{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }

  .hero-cta .btn{
    width:100%;
    min-height:48px;
    font-size:.95rem;
  }

  /* Footer más compacto, pero cubre hasta el borde inferior */
  .site-footer{
    padding:14px 0 26px !important;
    margin-bottom:-16px !important;
  }

  .site-footer .container{
    gap:5px;
    font-size:.72rem;
    line-height:1.35;
  }
}


/* ============================================================
   AJUSTE FINAL MÓVIL — HOME BALAGUERA GAMER TECH
   ============================================================ */

@media (max-width: 640px){

  /* Que el inicio ocupe bien la pantalla sin dejar hueco negro */
  body{
    min-height:100svh;
  }

  .home-hero,
  .hero{
    min-height:calc(100svh - 58px) !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  /* Contenido un poco más compacto */
  .home-hero .hero-inner,
  .hero .hero-inner,
  .hero-solo-texto{
    padding:34px 16px 36px !important;
  }

  .hero-title{
    font-size:1.55rem !important;
    line-height:1.08 !important;
    margin-bottom:12px !important;
  }

  .hero-sub{
    font-size:.92rem !important;
    line-height:1.45 !important;
    margin-bottom:18px !important;
  }

  /* Botones lado a lado en móvil, más proporcionados */
  .hero-cta{
    flex-direction:row !important;
    gap:10px !important;
    justify-content:center !important;
  }

  .hero-cta .btn{
    width:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:46px !important;
    padding:.7rem .65rem !important;
    font-size:.82rem !important;
    white-space:nowrap;
  }

  /* Footer mucho más fino */
  .site-footer{
    padding:10px 0 12px !important;
    margin:0 !important;
    min-height:0 !important;
  }

  .site-footer .container{
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:8px !important;
    text-align:left !important;
    font-size:.67rem !important;
    line-height:1.2 !important;
    padding-left:14px !important;
    padding-right:14px !important;
    flex-wrap:nowrap !important;
  }

  .site-footer .container span:first-child{
    flex:1 1 auto;
    min-width:0;
  }

  .site-footer .container .muted{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* Evita un bloque negro visible debajo del footer */
  html, body{
    background:#0b0c0e;
  }

  .site-footer + .sakura-global,
  .site-footer ~ .sakura-global{
    margin:0 !important;
    padding:0 !important;
  }
}


/* ============================================================
   SIN SCROLL EXTRA EN EL HOME
   ============================================================ */
@media (max-width:640px){
  html{
    overflow-x:hidden !important;
  }

  body{
    overflow-x:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Evita que el hero + footer superen innecesariamente la pantalla */
  .home-hero,
  .hero{
    min-height:calc(100svh - 58px - 48px) !important;
  }

  .site-footer{
    height:auto !important;
    min-height:48px !important;
    padding:8px 0 !important;
    margin:0 !important;
  }
}

/* Oculta visualmente la barra de desplazamiento sin bloquear el scroll
   en páginas que sí tengan contenido. */
html{
  scrollbar-width:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}


/* ============================================================
   AJUSTE DEFINITIVO HOME — FOOTER AL FONDO SIN HUECO NEGRO
   ============================================================ */

/* En navegadores modernos: solo afecta la página de inicio */
body:has(.home-hero){
  min-height:100svh !important;
  display:flex !important;
  flex-direction:column !important;
}

/* El hero ocupa todo el espacio disponible entre menú y footer */
body:has(.home-hero) .home-hero{
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* El footer queda pegado al borde inferior */
body:has(.home-hero) .site-footer{
  margin-top:auto !important;
  margin-bottom:0 !important;
  padding-bottom:env(safe-area-inset-bottom, 0px) !important;
}

/* En móvil hacemos el footer compacto y sin hueco posterior */
@media (max-width:640px){
  body:has(.home-hero){
    min-height:100svh !important;
    height:auto !important;
  }

  body:has(.home-hero) .home-hero{
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  body:has(.home-hero) .site-footer{
    margin-top:auto !important;
    margin-bottom:0 !important;
    min-height:46px !important;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(.home-hero) .site-footer .container{
    min-height:30px !important;
  }
}

/* Respaldo para navegadores que no soporten :has() */
@supports not selector(body:has(.home-hero)){
  body{
    min-height:100svh;
  }
}


/* ============================================================
   TÍTULO HOME — BALAGUERA GAMER TECH / ORIENTAL CHICKEN
   Colocar Oriental Chicken.ttf en: /public_html/assets/fonts/
   ============================================================ */
@font-face{
  font-family:'Oriental Chicken';
  src:url('../fonts/Oriental%20Chicken.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.hero-title-oriental{
  font-family:'Oriental Chicken', cursive !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:1px !important;
  color:#ff2f3a !important;
  line-height:1.05 !important;
}

@media (max-width:640px){
  .hero-title-oriental{
    font-size:2.35rem !important;
    line-height:1.02 !important;
    letter-spacing:.5px !important;
  }
}


/* ============================================================
   TÍTULO HOME MÁS GRANDE Y CENTRADO
   ============================================================ */
.hero-content{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  text-align:center !important;
}

.hero-title-oriental{
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:5rem !important;
  line-height:1 !important;
}

@media (max-width:900px){
  .hero-title-oriental{
    font-size:4rem !important;
  }
}

@media (max-width:640px){
  .hero-title-oriental{
    font-size:3.15rem !important;
    line-height:1.02 !important;
    text-align:center !important;
  }
}


/* HERO FINAL — BALAGUERA GAMER TECH */
.hero-content{width:100%!important;max-width:1200px!important;margin:0 auto!important;text-align:center!important;position:relative;z-index:5}
.hero-title-oriental{width:100%!important;margin:0 auto 22px!important;text-align:center!important;font-family:'Oriental Chicken',cursive!important;font-size:5.4rem!important;font-weight:400!important;line-height:1!important;text-transform:none!important;letter-spacing:1px!important;color:#ff2638!important;text-shadow:0 3px 0 rgba(90,0,10,.75),0 0 18px rgba(255,30,55,.40)!important}
.hero-sub{max-width:900px!important;margin:0 auto 30px!important;text-align:center!important;color:#fff!important;font-size:1.55rem!important;font-weight:700!important;line-height:1.45!important;text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 10px rgba(255,45,70,.65)!important}
.hero-cta{display:flex!important;justify-content:center!important;align-items:center!important;gap:22px!important;margin-top:10px!important}
.hero-cta .btn{min-width:220px!important;min-height:54px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-weight:800!important}
.hero-cta .btn-primary{box-shadow:0 0 20px rgba(255,35,55,.35)!important}
.hero-cta .btn-ghost{border:1px solid rgba(255,255,255,.65)!important;background:rgba(15,8,12,.30)!important;backdrop-filter:blur(5px)}
@media(max-width:900px){.hero-title-oriental{font-size:4.2rem!important}.hero-sub{font-size:1.25rem!important}}
@media(max-width:640px){
.hero-content{max-width:100%!important;padding:0 4px!important}
.hero-title-oriental{font-size:3.05rem!important;line-height:1.02!important;margin-bottom:18px!important}
.hero-sub{max-width:94%!important;font-size:1.05rem!important;line-height:1.4!important;margin-bottom:24px!important}
.hero-cta{width:100%!important;gap:10px!important}
.hero-cta .btn{min-width:0!important;flex:1 1 0!important;min-height:48px!important;padding:.7rem .55rem!important;font-size:.82rem!important}
}

/* ============================================================
   FONDO FIJO — Catálogo (ahora se maneja por JS en catalogo.php,
   ver #catalogoFondoJS — esta regla vieja ya no se usa)
   ============================================================ */

/* ============================================================
   Tarjeta de producto — fondo rosado transparente en la parte de info
   ============================================================ */
.product-body{
  background:rgba(8,7,10,.25);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.06);
}
.product-foot{
  background:rgba(8,7,10,.25);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
}


/* ============================================================
   FICHA DE PRODUCTO — layout de 3 columnas
   ============================================================ */
.producto-layout{
  display:grid;
  grid-template-columns:minmax(240px,340px) 1fr minmax(280px,340px);
  gap:24px;
  align-items:start;
}
.producto-col-img{width:100%}
.producto-col-info{padding-top:4px}
.producto-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-top:4px}
.producto-tab-btn{
  background:none;border:0;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  padding:0 0 10px;border-bottom:3px solid transparent;
  transition:.15s;
}
.producto-tab-btn.active{color:var(--red);border-bottom-color:var(--red)}
.producto-tab-btn:hover{color:var(--red)}
.producto-col-compra{position:sticky;top:90px}

@media(max-width:1100px){
  .producto-layout{grid-template-columns:1fr 1fr}
  .producto-col-compra{grid-column:1 / -1;position:static}
}
@media(max-width:700px){
  .producto-layout{grid-template-columns:1fr;gap:16px}
  .producto-col-compra{grid-column:auto}
}

/* ============================================================
   PIE DE PAGINA SIEMPRE ABAJO — todas las páginas (definitivo)
   ============================================================ */
html{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body > section,
body > .container{flex:0 0 auto}
.site-footer{margin-top:auto !important;margin-bottom:0 !important}

/* ---------- Botón "Volver" resaltado ---------- */
.back-bar{margin:14px 0 6px;display:flex;justify-content:center}
.back-bar a{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(224,33,40,.12) !important;
  border:1px solid var(--red) !important;
  color:#fff !important;
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;
  padding:.5rem 1rem !important;border-radius:8px;
  transition:.15s;
}
.back-bar a:hover{
  background:var(--red) !important;
  transform:translateX(-3px);
}
@media(max-width:640px){
  .back-bar a{
    font-size:.9rem;padding:.6rem 1.2rem !important;
    box-shadow:0 4px 14px rgba(224,33,40,.35);
  }
}

/* ---------- Tabla de "Últimos movimientos": scroll cuando hay muchos ---------- */
.movimientos-tabla{
  max-height:480px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--red) var(--bg-2);
}
.movimientos-tabla::-webkit-scrollbar{width:8px}
.movimientos-tabla::-webkit-scrollbar-track{background:var(--bg-2);border-radius:8px}
.movimientos-tabla::-webkit-scrollbar-thumb{background:var(--red);border-radius:8px}
.movimientos-tabla thead th{
  position:sticky;top:0;background:var(--panel);z-index:2;
}

/* ---------- Barra compacta de respuesta automática (Soporte) ---------- */
.soporte-auto-mini{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:.85rem;
}
@media(max-width:640px){
  .soporte-auto-mini{flex-direction:column;align-items:stretch}
}


/* ---------- Botón "Obtener código" (Mis compras) ---------- */
.btn-codigo{
  background:rgba(59,130,246,.12);border:1px solid #3b82f6;color:#93c5fd;
  font-weight:700;padding:.6rem 1.2rem;border-radius:10px;cursor:pointer;
  transition:.15s;
}
.btn-codigo:hover:not(:disabled){background:rgba(59,130,246,.22)}
.btn-codigo:disabled{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:var(--muted) !important;
  cursor:not-allowed;
  opacity:1;
}
.codigo-box{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}

/* ============================================================
   ARREGLO FORZADO — pétalos siempre encima del fondo,
   siempre detrás del contenido (botones, tarjetas, texto)
   ============================================================ */
.sakura-global{
  z-index: 30 !important;
}
#catalogoFondoJS{
  z-index: -5 !important;
}
.koi-layer{
  z-index: -4 !important;
}

/* ============================================================
   SELECTOR DE MONEDA (header)
   ============================================================ */
.moneda-selector{position:relative;z-index:50}
.moneda-btn{
  display:flex;align-items:center;gap:5px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;font-size:.8rem;font-weight:700;color:#fff;
  font-family:'Rajdhani',sans-serif;letter-spacing:.5px;
}
.moneda-btn:hover{border-color:var(--red)}
.moneda-dropdown{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.6);overflow:hidden;min-width:140px;
  z-index:99;
}
.moneda-opcion{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;padding:10px 14px;cursor:pointer;
  font-size:.85rem;font-weight:600;color:#fff;
  font-family:'Rajdhani',sans-serif;letter-spacing:.5px;
  transition:.1s;
}
.moneda-opcion:hover{background:rgba(224,33,40,.12)}
.moneda-check{color:var(--ok);margin-left:auto;font-size:.8rem}
@media(max-width:700px){
  .moneda-selector{position:static}
  .moneda-dropdown{position:fixed;left:10px;right:10px;top:auto;bottom:60px;border-radius:16px}
}

/* ============================================================
   AJUSTE FINAL HERO INICIO — banner grande en PC
   Mantiene la imagen 1920x640 (3:1) visible y evita que :has()
   reduzca el hero a la altura del contenido.
   ============================================================ */
@media (min-width: 821px){
  body:has(.home-hero) .home-hero,
  .home-hero,
  .hero{
    min-height: 600px !important;
    height: 600px !important;
    flex: 0 0 600px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .home-hero .hero-inner,
  .hero .hero-inner{
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Móvil: conservar comportamiento adaptable */
@media (max-width: 820px){
  body:has(.home-hero) .home-hero,
  .home-hero,
  .hero{
    height: auto !important;
    min-height: calc(100svh - 58px) !important;
    flex: 1 1 auto !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* ============================================================
   AJUSTE FINAL — BANNER INICIO 1920x640 (3:1) + RESPONSIVE
   ============================================================ */

/* Escritorio: respeta exactamente la proporción 3:1 del banner */
.carrusel-wrap{
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}

.carrusel{
  position:relative;
  width:100%;
  aspect-ratio:3 / 1;
  height:auto;
  max-height:none;
  overflow:hidden;
  border:0;
  background:var(--panel-2);
}

.carrusel-slide,
.carrusel-slide a{
  width:100%;
  height:100%;
}

.carrusel-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

/* Tablet */
@media (max-width:900px){
  .carrusel{
    aspect-ratio:3 / 1;
  }
  .carrusel-slide img{
    object-position:center center;
  }
}

/* Celular: más altura para que el banner no quede como una tira */
@media (max-width:700px){
  .carrusel{
    aspect-ratio:auto;
    height:clamp(230px, 62vw, 360px);
  }

  .carrusel-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

  .carrusel-wrap::before,
  .carrusel-wrap::after{
    height:28px;
  }
}

/* Teléfonos angostos */
@media (max-width:420px){
  .carrusel{
    height:260px;
  }
}


/* ============================================================
   INICIO — fondo gamer sutil debajo del hero
   Archivo esperado: /uploads/fondo-productos.png
   ============================================================ */
.home-content-bg{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(to bottom,
      rgba(11,12,14,.86) 0%,
      rgba(11,12,14,.72) 22%,
      rgba(11,12,14,.76) 70%,
      rgba(11,12,14,.92) 100%),
    url('/uploads/fondo-productos.png') center top / cover no-repeat;
  background-attachment:fixed;
}

.home-content-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(224,33,40,.08), transparent 30%),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,.035), transparent 32%);
}

.home-content-bg > section,
.home-content-bg > .carrusel-wrap{
  position:relative;
  z-index:1;
}

/* El bloque de botones ya no pinta un rectángulo negro encima del fondo */
.home-actions{
  background:transparent;
}

/* Deja las tarjetas legibles sin esconder el nuevo fondo */
.home-content-bg .product-card{
  background:rgba(10,8,12,.78);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* El carrusel se integra mejor con el fondo */
.home-content-bg .carrusel-wrap::before{
  background:linear-gradient(to bottom, rgba(11,12,14,.82), rgba(11,12,14,0));
}
.home-content-bg .carrusel-wrap::after{
  background:linear-gradient(to top, rgba(11,12,14,.82), rgba(11,12,14,0));
}

@media(max-width:820px){
  .home-content-bg{
    background-attachment:scroll;
    background-position:center top;
    background-size:auto 100%;
  }
}

@media(max-width:520px){
  .home-content-bg{
    background-size:auto 100%;
  }
}

/* ---------- Buscador del header ---------- */
.nav-search{
  display:flex;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:50px;overflow:hidden;height:34px;
}
.nav-search input{
  background:none;border:0;outline:0;color:#fff;
  font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:600;
  padding:0 14px;width:160px;letter-spacing:.3px;
}
.nav-search input::placeholder{color:rgba(255,255,255,.35)}
.nav-search button{
  background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;
  padding:0 12px 0 0;font-size:.9rem;transition:.2s;
}
.nav-search button:hover{color:#fff}
@media(max-width:860px){
  .nav-search input{width:120px}
}
@media(max-width:500px){
  .nav-search{display:none}
}
\n\n/* ============================================================\n   INICIO — Fondo gamer detrás de botones, categorías y productos\n   Archivo: /uploads/fondo-productos.png\n   ============================================================ */\n.home-products-bg{\n  position:relative;\n  isolation:isolate;\n  background-color:#08090b;\n  background-image:\n    linear-gradient(180deg, rgba(8,9,11,.18) 0%, rgba(8,9,11,.34) 45%, rgba(8,9,11,.55) 100%),\n    url('/uploads/fondo-productos.png');\n  background-size:cover;\n  background-position:center top;\n  background-repeat:no-repeat;\n}\n\n.home-products-bg::before{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  z-index:-1;\n  pointer-events:none;\n  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18));\n}\n\n.home-products-bg > section,\n.home-products-bg > .carrusel-wrap{\n  position:relative;\n  z-index:1;\n}\n\n.home-featured{\n  background:transparent !important;\n}\n\n@media (max-width:820px){\n  .home-products-bg{\n    background-size:auto 100%;\n    background-position:center top;\n  }\n}\n
/* ============================================================
   CATÁLOGO — full width + responsive
   ============================================================ */
.catalogo-fondo-fijo .container{max-width:100%;padding:0 12px}
.catalogo-fondo-fijo .cyber-title{font-size:2.6rem !important}
.catalogo-fondo-fijo .cyber-eyebrow{font-size:1rem !important;letter-spacing:3px !important}
.catalogo-grid{gap:20px !important}
.catalogo-sidebar{flex-shrink:0}
.product-grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important}

@media(max-width:860px){
  .catalogo-grid{grid-template-columns:1fr !important}
  .catalogo-sidebar{
    display:none !important;position:fixed !important;top:0 !important;left:0 !important;
    right:0 !important;bottom:0 !important;z-index:50 !important;
    background:rgba(0,0,0,.95) !important;backdrop-filter:blur(8px);
    overflow-y:auto !important;padding:20px !important;border-radius:0 !important;
  }
  .catalogo-sidebar.open{display:block !important}
  #btnFiltrosToggle{display:inline-flex !important}
  #btnFiltrosCerrar{display:block !important}
  .product-grid{grid-template-columns:repeat(2, 1fr) !important}
}
@media(max-width:420px){
  .product-grid{grid-template-columns:1fr !important}
}