:root{--bg:#fff; --con:#EDEBEA; --ink:#121011; --mut:#6d6667; --ln:#E2DEDD; --red:#B21F26; --redd:#951920; --wa:#1f9d55;
  --wide:"Archivo","Arial Black",system-ui,sans-serif; --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.w{font-family:var(--wide); font-stretch:125%; font-weight:850; text-transform:uppercase; letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--red); outline-offset:2px}

.top{position:sticky; top:0; z-index:30; background:#121011; color:#fff; display:flex; align-items:center; gap:10px; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px))}
.logo{display:block; line-height:0}
.logo img{height:26px; width:auto}
.ib{background:transparent; border:0; padding:6px; display:grid; place-items:center; border-radius:8px; color:#fff}
#btn-buscar{margin-left:auto}
.dnav{display:none; gap:26px; margin-left:auto; font-weight:600; font-size:14px}
.dnav a{text-decoration:none; opacity:.85}.dnav a:hover{opacity:1}
@media (min-width:800px){ .top{padding:16px 40px} .mob{display:none} .dnav{display:flex} #btn-buscar{margin-left:0} .logo img{height:30px} }
.buscador{position:sticky; top:58px; z-index:25; background:#121011; padding:0 16px 12px}
.buscador input{width:100%; font:inherit; font-size:16px; padding:12px 14px; border-radius:10px; border:0}
@media (min-width:800px){ .buscador{top:62px; padding:0 40px 14px} }

.wrap{max-width:1280px; margin:0 auto}
.hero{display:grid; background:var(--con)}
.hero .fotos{display:flex; gap:3px; aspect-ratio:4/4.4; max-width:100%; overflow:hidden}
.slot{position:relative; flex:1; min-width:0; overflow:hidden; background:#d9d7d5}
.slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 12%; opacity:0; transition:opacity .9s ease}
.slot img.on{opacity:1}
.slot.x{display:none}
.hero .txt{padding:24px 18px 28px; display:grid; gap:14px; text-align:center; justify-items:center}
.hero h1{font-size:32px; line-height:1; margin:0}
.hero h1 span{display:block; color:var(--red)}
.hero p{margin:0; color:var(--mut); max-width:40ch}
@media (min-width:800px){
  .hero{grid-template-columns:1.3fr 1fr; align-items:center}
  .hero .fotos{aspect-ratio:auto; height:520px}
  .slot.x{display:block}
  .hero .txt{text-align:left; justify-items:start; padding:48px}
  .hero h1{font-size:46px}
}
.btns{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
@media (min-width:800px){ .hero .btns{justify-content:flex-start} }
.b{border:0; border-radius:10px; padding:13px 18px; font-weight:700; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; justify-content:center; text-decoration:none}
.b.red{background:var(--red); color:#fff}.b.red:hover{background:var(--redd)}
.b.out{background:transparent; border:1.5px solid var(--ink); padding:11.5px 16.5px}
.b.ghost{background:var(--con)}
.b.wa{background:var(--wa); color:#fff}

.sec{padding:30px 16px 8px}
@media (min-width:800px){ .sec{padding:44px 40px 8px} }
.sec-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px}
.sec-h h2{font-size:19px; margin:0}
.sec-h small{color:var(--mut)}
@media (min-width:800px){ .sec-h h2{font-size:24px} }
.cats{display:grid; grid-auto-flow:column; grid-auto-columns:42%; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{border-radius:12px; overflow:hidden; aspect-ratio:3/4; display:block; background:#222}
.cat img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s}
.cat:hover img{transform:scale(1.04)}
@media (min-width:800px){ .cats{grid-auto-flow:row; grid-template-columns:repeat(8,1fr)} }
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1.5px solid var(--ln); background:#fff; border-radius:999px; padding:8px 15px; font-weight:600; white-space:nowrap; font-size:13px; text-decoration:none}
.chip.on{background:#121011; border-color:#121011; color:#fff}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px}
@media (min-width:800px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 18px} }
.card{text-decoration:none; display:grid; gap:9px; align-content:start}
.card .ph{aspect-ratio:3/4.3; border-radius:12px; overflow:hidden; background:var(--con)}
.card .ph img{width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block; transition:transform .4s}
.card:hover .ph img{transform:scale(1.04)}
.ttl{display:grid; justify-items:start; gap:5px}
.ty{font-size:12px; line-height:1.1}
.tag{background:var(--red); color:#fff; border-radius:6px; padding:4px 8px 3px; font-size:11px; line-height:1.15; box-shadow:0 2px 0 rgba(0,0,0,.18)}
.pbox{background:var(--red); color:#fff; border-radius:8px; padding:4px 9px 3px; font-size:13px; font-variant-numeric:tabular-nums; justify-self:start}
.card .sub{font-size:12px; color:var(--mut)}
@media (min-width:800px){ .ty{font-size:14px} .tag{font-size:12px; padding:5px 10px 4px} .pbox{font-size:15px} }
.vacio{padding:30px 0; color:var(--mut)}

.store{margin:40px 16px 0; background:#121011; color:#fff; border-radius:16px; padding:24px; display:grid; gap:10px; text-align:center; justify-items:center}
.store h3{margin:0; font-size:19px}
.store p{margin:0; color:#cfc7c7}
.store .num{font-weight:700; font-size:17px; user-select:all; font-variant-numeric:tabular-nums}
@media (min-width:800px){ .store{margin:56px 40px 0; grid-template-columns:1fr auto; text-align:left; justify-items:start; align-items:center; padding:32px 36px} .store .btns{grid-column:2; grid-row:1 / span 3} }
.foot{padding:30px 16px 100px; color:var(--mut); font-size:13px; text-align:center; display:grid; justify-items:center; gap:10px}
.foot .lg img{height:28px; width:auto; display:block}
.redes{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.redes a{display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:999px; background:var(--con); color:var(--ink); text-decoration:none; font-weight:700; font-size:13px}
.redes a:hover{background:#121011; color:#fff}
.redes svg{width:18px; height:18px}
.fab{position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; background:var(--wa); color:#fff; border-radius:999px; padding:14px; display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.fab span{display:none}
@media (min-width:800px){ .fab{padding:14px 20px} .fab span{display:inline} }
.drawer{position:fixed; inset:0; z-index:50; background:rgba(18,16,17,.55); display:flex}
.drawer .pan{width:80%; max-width:340px; background:#121011; color:#fff; padding:calc(70px + env(safe-area-inset-top,0px)) 24px 24px; display:grid; align-content:start; gap:2px; overflow-y:auto}
.drawer .pan > a{padding:13px 0; font-weight:700; font-size:17px; border-bottom:1px solid #2a2425; text-decoration:none}
.drawer .b{margin-top:18px}
.drawer .redes{justify-content:flex-start; margin-top:18px}
.drawer .redes a{background:#2a2425; color:#fff}

/* ficha */
.back{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mut); padding:16px 16px 6px; text-decoration:none}
@media (min-width:800px){ .back{padding:22px 40px 6px} }
.pd{display:grid; gap:20px; padding:10px 16px 24px; background:linear-gradient(180deg,#E9E8E6,#DCDAD8)}
@media (min-width:800px){ .pd{grid-template-columns:1.05fr 1fr; gap:44px; padding:24px 40px 44px; align-items:start} .pd .gal{position:sticky; top:84px} }
.gal{display:grid; gap:8px}
.gal .main{aspect-ratio:3/3.7; border-radius:14px; overflow:hidden; background:#d9d7d5}
.gal .main img{width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block}
.gal .main img.cut{object-fit:contain; background:#E6E4E2}
.thumbs{display:grid; grid-auto-flow:column; grid-auto-columns:62px; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.thumbs button{padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; aspect-ratio:4/5; background:#E6E4E2}
.thumbs button.on{border-color:#121011}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block}
.thumbs img.cut{object-fit:contain}
.info{display:grid; gap:18px; align-content:start}
.ptitle{display:grid; justify-items:start; gap:8px}
.ptitle h1{font-size:28px; margin:0; line-height:1.05}
.tag.big{font-size:20px; padding:9px 16px 8px; border-radius:10px}
@media (min-width:800px){ .ptitle{justify-items:end; text-align:right} .ptitle h1{font-size:38px} .tag.big{font-size:28px} }
.ctab{width:100%; border-collapse:collapse; font-size:14px; text-align:center; background:rgba(255,255,255,.35)}
.ctab th{font-size:11px; letter-spacing:.06em; padding:7px 4px; border-bottom:1.5px solid #121011}
.ctab td{padding:9px 4px; border-bottom:1px solid #bdb8b6; font-weight:600; font-variant-numeric:tabular-nums}
.ctab th+th,.ctab td+td{border-left:1.5px solid #121011}
.ctab td:first-child{font-weight:800}
.ctab tr[data-c]{cursor:pointer}
.ctab tr.on td{background:#121011; color:#fff}
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.vgrid button{position:relative; border:2px solid transparent; border-radius:10px; padding:0; background:transparent; overflow:hidden}
.vgrid button.on{border-color:#121011; background:rgba(255,255,255,.35)}
.vgrid b{position:absolute; top:6px; left:9px; font-family:var(--wide); font-stretch:125%; font-weight:900; font-size:17px}
.vgrid img{width:100%; display:block; aspect-ratio:4/5; object-fit:contain}
.lbl{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:flex; justify-content:space-between; gap:8px}
.lbl span{font-weight:500; text-transform:none; letter-spacing:0; color:var(--mut)}
.sizes{display:flex; gap:8px; flex-wrap:wrap}
.sz{min-width:50px; padding:11px 0; border:1.5px solid #c9c4c2; background:#fff; border-radius:10px; font-weight:700; font-variant-numeric:tabular-nums}
.sz.on{background:#121011; color:#fff; border-color:#121011}
.detbar{background:var(--red); color:#fff; text-align:center; padding:10px 10px 9px; border-radius:6px; font-size:14px}
.dets{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:-10px}
.dets button{padding:0; border:2px solid var(--red); border-radius:4px; overflow:hidden; background:#fff; aspect-ratio:3/5}
.dets img{width:100%; height:100%; object-fit:cover; display:block}
.precio{display:grid; justify-items:center; gap:8px; text-align:center}
.precio > .w:first-child{font-size:19px}
.pbig{background:var(--red); color:#fff; border-radius:12px; padding:9px 20px 7px; font-size:34px; font-variant-numeric:tabular-nums; box-shadow:0 3px 0 rgba(0,0,0,.2)}
.plines{display:grid; gap:4px}
.plines button{background:none; border:0; font-weight:700; font-size:15px; padding:5px 12px; border-radius:8px; font-variant-numeric:tabular-nums}
.plines b{color:var(--red)}
.plines button.on{background:#121011; color:#fff}
.plines button.on b{color:#ff8a8f}
.msg{background:#E7F5EC; border-radius:12px; padding:12px 14px; font-size:14px; color:#16432a}
.msg b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; color:#1f7a45}
.cta{position:sticky; bottom:0; z-index:20; background:rgba(255,255,255,.97); border-top:1px solid var(--ln); padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:1fr auto auto; gap:8px}
.cta .b{padding:14px}
@media (min-width:800px){ .cta{position:static; border:0; padding:0; background:none} }
body.ficha .fab{display:none}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:60; background:#121011; color:#fff; padding:11px 18px; border-radius:10px; font-weight:600; font-size:14px; max-width:90%; text-align:center}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .slot img,.card .ph img,.cat img{transition:none} }