:root{
  --bg:#0b0910;--panel:#17121f;--purple:#9b6cff;--purple-deep:#5a3d9e;--red:#e11d2a;--red-soft:#ff3b47;
  --white:#f4f3f8;--gray:#a7a3b5;--line:rgba(255,255,255,.08);--shadow:0 30px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{background:var(--bg);color:var(--white);font-family:'Archivo',system-ui,sans-serif;
  overflow-x:hidden;width:100%;max-width:100%;position:relative;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Anton','Archivo Black',sans-serif;font-weight:400;letter-spacing:.5px;line-height:.95;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}
/* bg */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx .grid{position:absolute;inset:-2px;background-image:linear-gradient(rgba(155,108,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,108,255,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 70%)}
.bg-fx .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.blob.p{width:520px;height:520px;background:var(--purple-deep);top:-160px;left:-120px}
.blob.r{width:420px;height:420px;background:#6a0f18;bottom:-160px;right:-100px}
/* loader */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .6s ease,visibility .6s ease}
#loader.hide{opacity:0;visibility:hidden}
#loader .ld-halo{position:absolute;width:min(300px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(155,108,255,.35),transparent 65%);animation:ldpulse 1.6s ease-in-out infinite}
#loader .ld-mascot{position:relative;width:min(150px,38vw);filter:drop-shadow(0 22px 42px rgba(0,0,0,.6));animation:ldfloat 1.6s ease-in-out infinite}
@keyframes ldfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes ldpulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.15);opacity:1}}
#loader .ld-word{position:relative;font-family:'Anton';font-size:24px;letter-spacing:3px;color:#fff}
#loader .ld-word b{color:var(--red)}
#loader .ld-bar{position:relative;width:180px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
#loader .ld-bar i{position:absolute;left:0;top:0;height:100%;width:45%;border-radius:4px;background:linear-gradient(90deg,var(--purple),var(--red));animation:ldbar 1.1s ease-in-out infinite}
@keyframes ldbar{0%{left:-45%}100%{left:100%}}
/* nav */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(16px,4vw,44px);
  background:rgba(11,9,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-family:'Anton';font-size:19px;letter-spacing:1px}
.brand img{height:40px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand span b{color:var(--red)}
.nav-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--gray);text-transform:uppercase;transition:.2s}
.nav-back:hover{color:#fff}
.nav-back svg{width:16px;height:16px}
/* header */
.cat-head{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:clamp(34px,6vw,64px) clamp(16px,4vw,44px) 6px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:3px;color:var(--red);text-transform:uppercase;margin-bottom:14px}
.tag::before{content:"";width:26px;height:2px;background:var(--red)}
.cat-head h1{font-size:clamp(40px,7vw,84px)}
.cat-head h1 .o{color:var(--purple)}
.cat-head p{color:var(--gray);font-size:15px;margin-top:12px;max-width:560px}
/* controls */
.controls{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:22px clamp(16px,4vw,44px) 0}
.search{position:relative;max-width:460px;margin-bottom:22px}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--gray)}
.search input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:44px;padding:14px 18px 14px 46px;color:#fff;font-family:inherit;font-size:15px;transition:.2s}
.search input::placeholder{color:var(--gray)}
.search input:focus{outline:none;border-color:rgba(155,108,255,.5);box-shadow:0 0 0 3px rgba(155,108,255,.12)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tab{background:transparent;border:1.5px solid var(--line);color:var(--gray);padding:10px 20px;border-radius:44px;font-size:14px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:.2s;text-transform:uppercase}
.tab:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.tab.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 8px 20px rgba(155,108,255,.35)}
/* botón desplegable de filtros */
.filtros-btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1.5px solid var(--line);color:var(--gray);padding:10px 18px;border-radius:44px;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:.2s;margin-bottom:16px}
.filtros-btn:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.filtros-btn.open{color:#fff;border-color:var(--purple)}
.filtros-btn svg{width:17px;height:17px}
.filtros-btn .chev{font-size:12px;transition:transform .25s}
.filtros-btn.open .chev{transform:rotate(180deg)}
.filtros-btn .fcount{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:var(--red);color:#fff;font-size:11px;font-weight:800}
.filtros-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease;margin-bottom:0}
.filtros-panel.open{max-height:420px;opacity:1;margin-bottom:10px}
.brandbar,.sizebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;min-height:20px}
.brandbar .lbl,.sizebar .lbl{font-size:11px;letter-spacing:2px;color:var(--gray);text-transform:uppercase;margin-right:4px}
.chip{background:transparent;border:1.5px solid var(--line);color:var(--gray);padding:7px 15px;border-radius:40px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.2s}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}
.count{font-size:13px;color:var(--gray);margin:14px 0 0}
/* grid + cards */
.wrap-grid{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:20px clamp(16px,4vw,44px) 90px}
.grid-pf{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:14px}
.empty{text-align:center;color:var(--gray);padding:70px 20px;font-size:16px}
.empty b{display:block;font-family:'Anton';font-size:26px;color:#fff;margin-bottom:8px;letter-spacing:1px}
@media(max-width:760px){
  .modal-box{grid-template-columns:1fr}
  .m-carousel .carousel{min-height:280px}
}
/* celular: cuadrícula de 2 columnas */
@media(max-width:640px){
  .grid-pf{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:10px}
  .pcard{border-radius:15px}
  .pcard .body{padding:9px 10px 11px;gap:4px}
  .pcard .brand-lbl{font-size:9px;letter-spacing:1.4px}
  .pcard h3{font-size:13px;line-height:1.25}
  .pcard .price{font-size:17px}
  .pcard .price small{font-size:9.5px}
  .pcard .sz{font-size:9.5px;padding:3px 6px;border-radius:6px}
  .pcard .sizes{gap:4px}
  .cond{font-size:9.5px}
  .badge-cnr,.cat-cnr{font-size:8px;padding:4px 7px;top:8px}
  .badge-cnr{left:8px}.cat-cnr{right:8px}
  .cbtn{display:none}                       /* en las tarjetas se pasa deslizando */
  .m-carousel .cbtn{display:grid;opacity:1;width:40px;height:40px;font-size:22px}
  .m-carousel .dots{bottom:14px}
  .m-carousel .dots i{width:9px;height:9px}
  .m-carousel .dots i.on{width:24px}
}
/* en táctil no hay hover: flechas siempre visibles */
@media(hover:none){
  .cbtn{opacity:1}
  .dots i{width:8px;height:8px}
  .dots i.on{width:22px}
}