:root{
  --bg:#0e1014; --card:#141923; --ink:#e9edf1; --muted:#a7b0bd;
  --chip:#232838; --radius:22px; --shadow:0 18px 50px rgba(0,0,0,.55);
  --brand1:#00c6ff; --brand2:#0072ff; --ok:#14b866; --warn:#ff9800; --err:#b91c1c;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Topbar */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:rgba(0,0,0,.55);border-bottom:1px solid #1b2230;position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.brand img{height:46px}
.brand__title{font-weight:800;font-size:18px}

.wrap{max-width:1200px;margin:0 auto;padding:28px}

/* HERO */
.hero{position:relative;margin:18px auto 8px;max-width:1200px;border-radius:20px;overflow:hidden;border:1px solid #20283a;box-shadow:0 20px 60px rgba(0,0,0,.55);background:#0b0f17 center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:rgba(10,12,18,.72)}
.hero__content{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:36px 26px}
.hero__title{font-weight:900;font-size:clamp(26px,3.4vw,40px);background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero__subtitle{color:#cfd6e4;font-size:14px;max-width:880px}

/* Tabs categorías */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.tab{padding:8px 12px;background:var(--chip);border:1px solid #2b3244;border-radius:999px;font-weight:600;font-size:13px}
.tab[aria-current="true"]{outline:2px solid var(--brand2);background:#1a2030}

/* Filtros */
header.catalog{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:6px auto 14px}
.title{font-weight:800;font-size:clamp(22px,3.6vw,34px)}
.filters{display:flex;gap:12px;flex-wrap:wrap}
.input,.select{background:var(--chip);border:1px solid #2b3244;color:var(--ink);padding:12px 14px;border-radius:12px;min-width:200px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid #2b3244;font-weight:600;transition:all .2s}
.btn--white{background:#1d1f27;color:#fff;border-color:#2b3244}
.btn--white:hover{background:#2b3244;color:#fff}
.btn--wa{background:#113a23;border-color:#1d5b33;color:#e9fbe7}
.btn--disabled{background:#3a3f4f;border-color:#3a3f4f;color:#9aa3af;cursor:not-allowed;pointer-events:none}

/* Grid & cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{position:relative;grid-column:span 12;background:linear-gradient(180deg,#161c28 0%,#101521 100%);border:1px solid #222a3c;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(0,0,0,.6);border-color:#2a3550}
.cover{width:100%;height:300px;background:#0c1018;object-fit:contain;object-position:center}
.card-body{padding:18px; display:flex; flex-direction:column; height:100%}
.name{font-weight:800;font-size:20px;margin:0 0 8px}
.desc{color:var(--muted);font-size:14px;margin:0 0 16px}
.price{font-weight:900;font-size:22px;background:linear-gradient(180deg,#10222c 0%,#0b1a23 100%);border:1px solid #1f3a46;padding:8px 12px;border-radius:12px;display:inline-block;margin-bottom:12px}
.cta{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

/* Badges */
.badge{position:absolute;left:10px;background:#333;color:#fff;font-size:12px;font-weight:900;padding:6px 9px;border-radius:6px;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.badge.top{top:10px;background:linear-gradient(180deg,#f6d365 0%, #fda085 100%);color:#2b1b00;border:1px solid rgba(0,0,0,.15)}
.badge.nuevo{top:44px;background:var(--warn);color:#1a1000}
.badge.oferta{top:78px;left:auto;right:10px;background:var(--ok);color:#04120a}
.badge.sinstock{top:10px;background:var(--err)}

@media(min-width:560px){.card{grid-column: span 6;}.cover{height:320px}}
@media(min-width:920px){.card{grid-column: span 4;}.cover{height:340px}}

/* Footer con métodos de pago */
.site-footer{
  margin:0; padding:20px;
  background:#0a0a0a;
  border-top:1px solid #1e2635;
  text-align:center;
  font-size:13px;
  color:#c9d1d9;
  position:relative;
}
.footer-top{display:flex;flex-direction:column;gap:10px;align-items:center}
.pay-methods{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.pay{
  padding:6px 12px;
  border-radius:6px;
  font-weight:600;
  font-size:13px;
  display:inline-block;
  color:#fff;
}
.pay.usdt{background:#0a4d40}
.pay.binance{background:#f0b90b;color:#1a1a1a}
.pay.bank{background:#0d47a1}
.pay.paypal{background:#003087}

/* Botón flotante WhatsApp */
.whatsapp-float{
  position:fixed;
  bottom:20px; right:20px;
  background:#25D366;
  color:#fff;
  font-weight:700;
  padding:12px 18px;
  border-radius:40px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:all .25s;
  z-index:999;
}
.whatsapp-float:hover{
  background:#1ebe5d;
  transform:translateY(-2px);
}

/* Utilidades */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}