/* ============================================================
   GreyCell Parfums — Champagne Gold · Dark Luxury · Glass
   ============================================================ */
:root{
  --bg-0:#060606; --bg-1:#0a0a0b; --bg-2:#101012; --bg-3:#16161a;
  --gold:#e8c66a; --gold-soft:#f0d894; --gold-deep:#c9a23a; --gold-dark:#8a6c24;
  --gold-rgb:232,198,106;
  --ink-0:#f6f1e6; --ink-1:#cdc7ba; --ink-2:#8f897d; --ink-3:#5c574e;
  --line:rgba(232,198,106,.10); --line-soft:rgba(255,255,255,.05);
  --glass:rgba(22,20,14,.55); --glass-hi:rgba(36,31,18,.6);
  --green:#6fd19a; --red:#e87a6a;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--bg-0); color:var(--ink-0);
  overflow:hidden; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}

#mesh-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,#12100a 0%,var(--bg-0) 60%)}

/* ---------- Header ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0));
  padding-top:max(14px,env(safe-area-inset-top,0));
  background:linear-gradient(180deg,rgba(6,6,6,.85),transparent);
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-weight:700;font-size:13px;letter-spacing:.03em;color:#1a1408;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 2px 14px rgba(var(--gold-rgb),.3);position:relative;overflow:hidden;
}
.brand-mark::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 7s var(--ease) infinite}
@keyframes shine{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
.brand-name{font-weight:600;font-size:15px;letter-spacing:.01em}
.cat-btn{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(10px);color:var(--ink-1);
}
.cat-btn:active{background:var(--glass-hi)}

/* ---------- Stage ---------- */
.stage{
  height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:66px 16px 54px;
}
.hero-sub{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em;text-align:center;text-transform:uppercase}

.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  font-size:12px;font-weight:500;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-soft);color:var(--ink-2);background:rgba(255,255,255,.02);
  transition:.2s var(--ease);
}
.chip.is-on{color:#1a1408;border-color:transparent;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));font-weight:600}

/* ---------- Deck ---------- */
.deck-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.deck{
  position:relative;
  width:min(88vw,368px);
  height:min(66dvh,540px);
}
.card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  transform-origin:50% 120%;
  will-change:transform;
  touch-action:pan-y;
  --sw:0;
}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.07),transparent 40%)}
.card.behind-1{transform:translateY(11px) scale(.955);opacity:.5;pointer-events:none}
.card.behind-2{transform:translateY(21px) scale(.91);opacity:.22;pointer-events:none}
.card.leaving{transition:transform .38s var(--ease-out),opacity .38s var(--ease-out)}
.card.settling{transition:transform .34s var(--ease)}

/* direccional glow al arrastrar */
.card .edge{position:absolute;top:0;bottom:0;width:40%;pointer-events:none;opacity:calc(var(--sw)*var(--sw));transition:opacity .1s}
.card .edge.l{left:0;background:linear-gradient(90deg,rgba(var(--gold-rgb),.22),transparent);opacity:0}
.card .edge.r{right:0;background:linear-gradient(270deg,rgba(var(--gold-rgb),.22),transparent);opacity:0}
.card.sw-left  .edge.r{opacity:calc(var(--sw) * -1)}
.card.sw-right .edge.l{opacity:var(--sw)}

.card-media{
  position:relative;flex:1 1 auto;min-height:96px;
  display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 40%,rgba(var(--gold-rgb),.16),transparent 70%);
}
.card-media img{
  max-width:60%;max-height:88%;object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  -webkit-user-drag:none;user-select:none;
}
.simil{
  position:absolute;top:12px;right:12px;
  font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:6px 11px;border-radius:999px;color:#1a1408;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 4px 14px rgba(var(--gold-rgb),.35);
}
.fav{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-soft);padding:5px 9px;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.35)}

.card-body{
  position:relative;z-index:1;
  flex:0 0 auto;display:flex;flex-direction:column;gap:7px;
  padding:12px 17px calc(15px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,rgba(8,7,4,.55),rgba(6,5,3,.72));
}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);padding:4px 9px;border:1px solid var(--line-soft);border-radius:999px}
.badge.g-hombre{color:#8fb8e8;border-color:rgba(143,184,232,.25)}
.badge.g-mujer{color:#e89ac0;border-color:rgba(232,154,192,.25)}

.card-name{
  font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.05;
  background:linear-gradient(180deg,#fff,var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.card-sub{font-size:12.5px;color:var(--ink-2)}
.card-sub b{color:var(--ink-1);font-weight:600}
.notas{font-size:11.5px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.price-ours .lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.price-ours .val{font-size:30px;font-weight:700;color:var(--gold-soft);line-height:1}
.price-ours .ml{font-size:11px;color:var(--ink-2);margin-left:4px}
.price-ours .pm{font-size:10.5px;color:var(--green);display:block;margin-top:2px}
.price-ref{text-align:right;font-size:10.5px;color:var(--ink-3);line-height:1.5}
.price-ref s{color:var(--ink-3)}
.price-ref .pm{color:var(--ink-2)}

.card-cta{
  margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;color:#15100a;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 8px 22px -6px rgba(var(--gold-rgb),.5);
}
.card-cta:active{transform:translateY(1px)}
.card-cta.off{background:var(--bg-3);color:var(--ink-3);box-shadow:none}
.card-link{font-size:11px;color:var(--ink-2);text-align:center;padding:2px}
.card-link u{text-underline-offset:3px}

/* ---------- Nav ---------- */
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:999px;font-size:20px;color:var(--ink-1);
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);
}
.nav:active{background:var(--glass-hi)}
.nav.prev{left:-54px} .nav.next{right:-54px}
@media(max-width:480px){.nav{display:none}}

.deck-foot{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.counter{color:var(--gold-deep);font-weight:600}

/* ---------- Legal ---------- */
.legal{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  padding:9px 20px calc(9px + env(safe-area-inset-bottom,0));
  font-size:9.5px;line-height:1.45;color:var(--ink-3);text-align:center;
  background:linear-gradient(0deg,rgba(6,6,6,.9),transparent);
}

/* ---------- Catálogo (hoja) ---------- */
[hidden]{display:none!important}
.sheet-bg{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:82dvh;
  display:flex;flex-direction:column;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--bg-1);border:1px solid var(--line);border-bottom:0;
  animation:slideUp .32s var(--ease-out);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);font-size:15px}
.sheet-x{font-size:24px;color:var(--ink-2);width:32px;height:32px}
.sheet-grid{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px calc(20px + env(safe-area-inset-bottom,0));
}
.mini{
  display:flex;flex-direction:column;gap:6px;padding:10px;
  border-radius:var(--r-md);border:1px solid var(--line-soft);background:rgba(255,255,255,.02);
}
.mini:active{background:rgba(var(--gold-rgb),.06)}
.mini-media{height:96px;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 45%,rgba(var(--gold-rgb),.12),transparent 70%);border-radius:10px}
.mini-media img{max-height:88px;max-width:70%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.mini-name{font-size:12.5px;font-weight:600}
.mini-sub{font-size:10.5px;color:var(--ink-3)}
.mini-price{font-size:12px;font-weight:600;color:var(--gold-soft)}

/* ---------- Aviso config ---------- */
.warn{
  position:fixed;left:12px;right:12px;bottom:34px;z-index:40;
  font-size:11px;color:#1a1408;background:linear-gradient(135deg,#e8b86a,#c9a23a);
  padding:10px 14px;border-radius:12px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4)
}
.warn code{background:rgba(0,0,0,.15);padding:1px 5px;border-radius:5px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .card.leaving,.card.settling{transition:none}
}