:root{
  --bg:#0f1012; --bg2:#16181b; --bg3:#1d2024; --ink:#f3f4f0; --mute:#a3a8ad; --dim:#6f757b;
  --lime:#c8ff2e; --lime-ink:#0f1400; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --r:16px; --gut:20px; --max:1240px;
  --cond:"Archivo",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--cond);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--lime);color:var(--lime-ink);padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price .now{font-weight:800;color:var(--ink)}
.price s{color:var(--dim);font-size:.86em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime);color:var(--lime-ink);box-shadow:0 8px 30px -10px rgba(200,255,46,.55)}
.btn-lime:hover{background:#d6ff5e}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--lime)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 var(--gut);padding-top:env(safe-area-inset-top);background:linear-gradient(to bottom,rgba(15,16,18,.92),rgba(15,16,18,.0));}
.top.solid{background:rgba(15,16,18,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{width:150px;height:auto}
.top-nav{display:flex;gap:2px}
.top-nav a{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;font-weight:600;color:var(--mute);text-decoration:none;border-radius:8px}
.top-nav a:hover{color:var(--ink)}
@media (max-width:480px){.top-nav a:not(:last-child){display:none}.brand img{width:138px}}

/* ---------- hero ---------- */
.hero{position:relative;height:300svh;background:var(--bg)}
.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 40%,#23272b 0%,#15171a 46%,#0d0e10 100%)}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(to bottom,rgba(15,16,18,0),var(--bg));pointer-events:none}
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-poster{display:none}

.hero-intro{position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:calc(76px + env(safe-area-inset-top));transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-intro h1{margin-top:10px;font-family:var(--cond);font-variation-settings:"wdth" 68;font-weight:900;font-size:clamp(40px,11.4vw,92px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.hero-intro h1 span{display:block;color:var(--lime)}
.lede{margin-top:12px;max-width:34ch;color:var(--mute);font-size:15px;line-height:1.45;text-wrap:pretty}

.hero-product{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 18px;border-radius:20px;background:rgba(22,24,27,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hp-text{min-width:0}
.hp-name{font-weight:700;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-product .price{font-size:17px;margin-top:2px}
.hero-product .btn{flex:none;padding:0 18px}

.scroll-hint{position:absolute;z-index:2;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:opacity .4s}
.scroll-hint span{width:26px;height:2px;background:var(--line2);position:relative;overflow:hidden;border-radius:2px}
.scroll-hint span::after{content:"";position:absolute;inset:0;background:var(--lime);transform:translateX(-100%);animation:hint 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes hint{to{transform:translateX(100%)}}

.steps{position:absolute;z-index:3;top:calc(70px + env(safe-area-inset-top));left:var(--gut);right:var(--gut);display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s}
.steps button{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s}
.steps b{font-weight:800;font-size:15px;letter-spacing:.02em}
.steps i{font-style:normal;font-size:12px;color:var(--mute);display:none}
.steps button[aria-current="step"]{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.steps button[aria-current="step"] i{color:rgba(15,20,0,.7)}

.callouts{list-style:none;margin:0;padding:0}
.callout{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom));padding:18px 18px 14px;border-radius:20px;background:rgba(20,22,25,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.c-head{display:flex;align-items:baseline;gap:12px}
.c-head b{font-variation-settings:"wdth" 68;font-weight:900;font-size:52px;line-height:.85;color:var(--lime);letter-spacing:-.01em}
.c-head span{font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.c-text{margin-top:10px;color:#c9cdd1;font-size:15px;line-height:1.45;text-wrap:pretty}
.c-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-weight:800;font-size:15px;color:var(--lime);text-decoration:none}
.c-link::after{content:"";width:18px;height:10px;background:currentColor;clip-path:polygon(0 42%,72% 42%,72% 0,100% 50%,72% 100%,72% 58%,0 58%);transition:transform .25s}
.c-link:hover::after{transform:translateX(4px)}

.leader{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s}
.leader line{stroke:var(--lime);stroke-width:1.5;stroke-dasharray:3 4}
.leader .dot{fill:var(--lime)}
.leader .ring{fill:none;stroke:var(--lime);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ring 1.6s ease-out infinite}
@keyframes ring{from{transform:scale(.5);opacity:.9}to{transform:scale(1.6);opacity:0}}

/* stage states */
.stage:not([data-stage="0"]) .hero-intro{opacity:0;transform:translateY(-14px);pointer-events:none}
.stage:not([data-stage="0"]) .scroll-hint{opacity:0}
.stage[data-stage="1"] .hero-product,.stage[data-stage="2"] .hero-product,.stage[data-stage="3"] .hero-product{opacity:0;transform:translateY(18px);pointer-events:none}
.stage[data-stage="1"] .steps,.stage[data-stage="2"] .steps,.stage[data-stage="3"] .steps{opacity:1;pointer-events:auto}
.stage[data-stage="1"] .callout[data-i="1"],.stage[data-stage="2"] .callout[data-i="2"],.stage[data-stage="3"] .callout[data-i="3"]{opacity:1;transform:none;pointer-events:auto}
.stage.lead-on .leader{opacity:1}

@media (min-width:900px){
  :root{--gut:48px}
  .hero{height:320vh}
  .stage{min-height:640px}
  .top{height:72px}
  .brand img{width:178px}
  .top-nav{gap:8px}
  .top-nav a{font-size:15px}
  .hero-intro{top:auto;bottom:50%;transform:translateY(50%);right:auto;width:min(36vw,500px)}
  .stage:not([data-stage="0"]) .hero-intro{transform:translateY(calc(50% - 14px))}
  .hero-intro h1{font-size:clamp(56px,6.2vw,96px)}
  .lede{font-size:17px}
  .hero-product{left:auto;right:var(--gut);bottom:48px;width:400px}
  .scroll-hint{bottom:56px;left:var(--gut);transform:none}
  .steps{top:50%;bottom:auto;right:auto;transform:translateY(-50%);flex-direction:column;gap:10px;width:260px}
  .steps button{justify-content:flex-start;gap:14px;padding:12px 18px;min-height:64px;border-radius:16px}
  .steps b{font-size:28px;font-variation-settings:"wdth" 68;font-weight:900;min-width:44px;text-align:left}
  .steps i{display:block;font-size:14px}
  .callout{left:auto;right:var(--gut);bottom:auto;top:50%;width:360px;transform:translate(18px,-50%);padding:24px 24px 16px}
  .stage[data-stage="1"] .callout[data-i="1"],.stage[data-stage="2"] .callout[data-i="2"],.stage[data-stage="3"] .callout[data-i="3"]{transform:translate(0,-50%)}
  .c-head b{font-size:72px}
  .c-text{font-size:16px}
}

/* static (reduced motion / no 3D) */
.is-static .hero{height:auto}
.is-static .stage{position:relative;height:auto;min-height:0;padding:calc(84px + env(safe-area-inset-top)) var(--gut) 40px;display:flex;flex-direction:column;gap:20px}
.is-static .stage::after,.is-static .stage-canvas,.is-static .leader,.is-static .steps,.is-static .scroll-hint{display:none}
.lede-still{display:none}
.is-static .lede-still{display:inline}
.is-static .lede-3d{display:none}
.is-static .hero-poster{display:block;width:100%;max-width:520px;margin:0 auto;border-radius:24px}
.is-static .hero-intro,.is-static .hero-product,.is-static .callout{position:relative;inset:auto;transform:none;opacity:1;pointer-events:auto;width:auto}
.is-static .hero-intro{order:-1}
.is-static .callouts{display:grid;gap:12px}
@media (min-width:900px){
  .is-static .stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:48px;padding-top:120px}
  .is-static .callouts{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .is-static .hero-product{grid-column:2}
}

/* ---------- perks ---------- */
.perks{border-block:1px solid var(--line);background:var(--bg)}
.perks ul{list-style:none;margin:0 auto;max-width:var(--max);padding:18px var(--gut);display:grid;gap:10px}
.perks li{font-size:14px;color:var(--mute);padding-left:18px;position:relative}
.perks li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--lime)}
.perks b{color:var(--ink)}
@media (min-width:900px){.perks ul{grid-template-columns:repeat(3,1fr);gap:24px}}

/* ---------- sections ---------- */
section.shelf,section.cats,section.outlets{max-width:var(--max);margin:0 auto;padding:64px var(--gut) 24px;scroll-margin-top:12px}
.sec-head h2{margin-top:8px;font-variation-settings:"wdth" 70;font-weight:900;font-size:clamp(34px,8.6vw,64px);line-height:.95;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.sec-sub{margin-top:10px;color:var(--mute);max-width:52ch;text-wrap:pretty}

.chips{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap}
@media (max-width:420px){.chips button{padding:0 12px;font-size:13.5px}}
.chips button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);font-weight:700;font-size:14px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.chips button span{color:var(--dim);font-weight:600;margin-left:2px;font-variant-numeric:tabular-nums}
.chips button[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.chips button[aria-pressed="true"] span{color:rgba(15,20,0,.6)}
.chip-note{margin-top:12px;font-size:13px;color:var(--mute);min-height:1em}

.grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(4,1fr);gap:28px 20px}}
.p a{display:block;text-decoration:none;border-radius:var(--r)}
.p-img{position:relative;aspect-ratio:5/4;border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.p a:hover .p-img img{transform:scale(1.04)}
.badge{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:800;background:var(--lime);color:var(--lime-ink);font-variant-numeric:tabular-nums}
.badge.lelong{left:8px;right:auto;background:#111;color:#fff}
.p-meta{padding:10px 2px 0}
.p-brand{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.p-name{margin-top:3px;font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p .price{margin-top:6px;font-size:15px}
.p-stud{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--mute);padding:2px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line2)}
.more-wrap{display:flex;justify-content:center;margin-top:28px}
.more-wrap[hidden]{display:none}
.empty{grid-column:1/-1;color:var(--mute)}

.cat-grid{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;perspective:900px}
@media (min-width:900px){.cat-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.cat a{display:flex;flex-direction:column;height:100%;text-decoration:none;border-radius:20px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cat a:hover{box-shadow:inset 0 0 0 1px var(--lime)}
.cat-img{margin:8px 8px 0;border-radius:14px;background:#fff;aspect-ratio:5/4;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat-txt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 14px;min-height:56px}
.cat-txt h3{font-variation-settings:"wdth" 72;font-weight:900;font-size:19px;line-height:1.05;text-transform:uppercase}
.cat-txt span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:900}
.cat-txt span::before{content:"";width:13px;height:9px;background:currentColor;clip-path:polygon(0 40%,64% 40%,64% 0,100% 50%,64% 100%,64% 60%,0 60%)}

.outlet-grid{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.outlet-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.outlet{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.o-state{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--mute)}
.o-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
.o-state.open{color:var(--lime)}
.o-state.open::before{background:var(--lime);box-shadow:0 0 0 4px rgba(200,255,46,.15)}
.outlet h3{font-variation-settings:"wdth" 72;font-weight:900;font-size:24px;line-height:1.05;text-transform:uppercase}
.o-addr{color:var(--mute);font-size:14px;line-height:1.45;font-style:normal}
.o-hours{font-size:14px;font-variant-numeric:tabular-nums}
.o-hours b{color:var(--ink)}
.o-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.o-actions .btn{min-height:44px;padding:0 16px;font-size:14px}

.foot{max-width:var(--max);margin:56px auto 0;padding:32px var(--gut) calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:16px;color:var(--mute);font-size:13px}
.foot img{width:150px}
.foot-outlets{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.foot-outlets a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);font-weight:600}
.foot-outlets a:hover{color:var(--lime)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}