/* =========================================================================
   Fenixstore — Catálogo público (PWA)
   ========================================================================= */
:root{
  --navy-950:#0a1324;
  --navy-900:#0e1a30;
  --navy-800:#14213f;
  --gold:#c9982f;
  --gold-bright:#e2b650;
  --gold-soft:#f4e6c6;
  --terracotta:#b04a2f;
  --terracotta-soft:#f8e3da;
  --green:#3d7a52;
  --wa:#1fa855;
  --wa-hover:#178a45;
  --accent:#14213f;
  --accent-ink:#ffffff;
  --tag-new-bg:#14213f;
  --tag-new-ink:#e2b650;

  --bg:#f6f3ec;
  --surface:#ffffff;
  --surface-2:#efeadf;
  --ink:#1c2333;
  --ink-soft:#5c6270;
  --line:#e3ddce;
  --shadow:0 1px 2px rgba(14,26,48,.06), 0 8px 24px rgba(14,26,48,.06);
  --shadow-hover:0 2px 4px rgba(14,26,48,.08), 0 16px 40px rgba(14,26,48,.12);

  --radius:14px;
  --font-head:'Spectral', Georgia, serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:16px;
  --max:1200px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13161c;
    --surface:#1c2028;
    --surface-2:#252a34;
    --ink:#eceef1;
    --ink-soft:#9aa0ac;
    --line:#2e333e;
    --gold-soft:#3a331d;
    --terracotta-soft:#3d2620;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-hover:0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
    --accent:#c9982f;
    --accent-ink:#0e1a30;
    --tag-new-bg:#e2b650;
    --tag-new-ink:#0e1a30;
  }
}
:root[data-theme="dark"]{
  --bg:#13161c;
  --surface:#1c2028;
  --surface-2:#252a34;
  --ink:#eceef1;
  --ink-soft:#9aa0ac;
  --line:#2e333e;
  --gold-soft:#3a331d;
  --terracotta-soft:#3d2620;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
  --accent:#c9982f;
  --accent-ink:#0e1a30;
  --tag-new-bg:#e2b650;
  --tag-new-ink:#0e1a30;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
[hidden]{ display:none !important; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,152,47,.22) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-800));
  color:#fff;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter) 34px;
}
.hero-inner{ max-width:var(--max); margin:0 auto; }
.hero-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:28px; }
.logo{ display:flex; align-items:center; gap:10px; font:700 20px var(--font-head); letter-spacing:.02em; }
.logo img{ border-radius:10px; }
.install{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:999px; padding:8px 14px; font-weight:600; font-size:13.5px; cursor:pointer;
}
.install:hover{ background:rgba(255,255,255,.18); }
.install svg{ width:16px; height:16px; }
.hero h1{
  font:600 clamp(34px, 7vw, 54px)/1.05 var(--font-head);
  margin:0 0 8px; letter-spacing:-.01em;
}
.hero-sub{ margin:0; color:#c7d1e6; font-size:14.5px; }
.hero-sub strong{ color:var(--gold-bright); }

/* ---------- Toolbar (sticky) ---------- */
.toolbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.toolbar.stuck{ border-bottom-color:var(--line); }
.toolbar-inner{
  max-width:var(--max); margin:0 auto; padding:12px var(--gutter);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.search{
  flex:1 1 280px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:0 16px; color:var(--ink-soft); box-shadow:var(--shadow);
}
.search:focus-within{ border-color:var(--gold); }
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font:16px var(--font-body); padding:11px 0;
}
.sort{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.sort::-webkit-scrollbar{ display:none; }
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:8px 14px; font-weight:600; font-size:13px;
  white-space:nowrap; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ color:var(--ink); }
.chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ---------- Grid ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:18px var(--gutter) 40px; }
.offline{
  background:var(--gold-soft); color:#8a6a1f; border-radius:10px;
  padding:10px 14px; margin-bottom:16px; font-size:13.5px; font-weight:500;
}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.card{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.card:active{ transform:translateY(-1px); }
.card-media{ position:relative; aspect-ratio:1 / 1; background:var(--surface-2); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.noimg{
  width:100%; height:100%; display:grid; place-items:center;
  font:700 64px var(--font-head); color:var(--gold); opacity:.35;
}
.tag{
  position:absolute; left:10px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.tag-new{ top:10px; background:var(--tag-new-bg); color:var(--tag-new-ink); }
.tag-low{ bottom:10px; background:var(--terracotta); color:#fff; }
.card-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-name{
  margin:0; font:600 16.5px/1.3 var(--font-head); color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.price{ font-weight:700; font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; }
.stock{ font-size:12px; color:var(--green); font-weight:600; white-space:nowrap; }
.no-results, .empty{ text-align:center; color:var(--ink-soft); padding:50px 16px; }
.empty h2{ font:600 26px var(--font-head); color:var(--ink); margin:0 0 6px; }
.empty .btn-wa{ display:inline-flex; width:auto; margin-top:14px; }

/* ---------- Footer ---------- */
.foot{
  max-width:var(--max); margin:0 auto; padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--ink-soft); font-size:13px; border-top:1px solid var(--line);
}
.foot a{ color:var(--ink-soft); }

/* ---------- Detalle (sheet) ---------- */
.sheet-backdrop{
  position:fixed; inset:0; z-index:50; background:rgba(10,19,36,.6);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:fade .18s ease;
}
.sheet{
  position:relative; width:100%; max-width:880px; max-height:calc(100vh - 48px);
  background:var(--surface); border-radius:18px; overflow:hidden;
  display:grid; grid-template-columns:1.1fr 1fr; box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:pop .22s cubic-bezier(.2,.8,.2,1);
}
.sheet-media{ background:var(--surface-2); min-height:320px; }
.sheet-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sheet-body{ padding:30px 28px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.sheet-body h2{ margin:0; padding-right:36px; font:600 clamp(24px, 3.2vw, 30px)/1.15 var(--font-head); }
.sheet-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.price-lg{ font-size:26px; }
.avail{
  font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:#dcefe1; color:var(--green);
}
.avail.low{ background:var(--terracotta-soft); color:var(--terracotta); }
.sheet-desc{ margin:0; color:var(--ink-soft); white-space:pre-line; }
.sheet-actions{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:6px; }
.btn-wa{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--wa); color:#fff; text-decoration:none; font-weight:700; font-size:15.5px;
  padding:14px 18px; border-radius:12px; box-shadow:0 6px 18px rgba(31,168,85,.3);
  transition:background .15s ease, transform .1s ease;
}
.btn-wa:hover{ background:var(--wa-hover); }
.btn-wa:active{ transform:scale(.98); }
.btn-wa svg{ width:22px; height:22px; fill:currentColor; stroke:none; }
.btn-share{
  border:1px solid var(--line); background:transparent; border-radius:12px;
  padding:12px; font-weight:600; cursor:pointer; color:var(--ink);
}
.btn-share:hover{ background:var(--surface-2); }
.sheet-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--surface); color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}

@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
@keyframes rise{ from{ transform:translateY(100%); } }

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .hero{ padding-bottom:26px; }
  .hero-top{ margin-bottom:20px; }
  .toolbar-inner{ padding:10px var(--gutter); gap:10px; }
  .search{ flex-basis:100%; }
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .card-body{ padding:10px 11px 12px; gap:6px; }
  .card-name{ font-size:14.5px; }
  .price{ font-size:15.5px; }
  .stock{ display:none; }
  .tag{ left:8px; font-size:10.5px; padding:3px 8px; }
  .tag-new{ top:8px; }
  .tag-low{ bottom:8px; }

  .sheet-backdrop{ align-items:flex-end; padding:0; }
  .sheet{
    grid-template-columns:1fr; max-height:92vh; border-radius:20px 20px 0 0;
    overflow-y:auto; animation:rise .26s cubic-bezier(.2,.8,.2,1);
  }
  .sheet-media{ min-height:0; aspect-ratio:1 / 1; max-height:52vh; }
  .sheet-body{ padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); overflow:visible; }
  .sheet-actions{ position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom)); background:var(--surface); padding:10px 0 calc(4px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Precios configurables (USD / Bs / ambos / ocultos) ---------- */
.price-wrap{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.price-wrap .price{ white-space:nowrap; }
.price-sub{ font-size:12px; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums; }
.price-sub:empty{ display:none; }
.sheet-meta .price-sub{ font-size:13.5px; margin-top:2px; }
.ask{ font-size:13px; font-weight:700; color:var(--gold-ink, #8a6a1f); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ask{ color:var(--gold-bright); } }
:root[data-theme="dark"] .ask{ color:var(--gold-bright); }
@media (max-width:640px){
  .card-foot{ align-items:flex-end; }
  .price-wrap .price{ font-size:clamp(13px, 4vw, 15.5px); }
  .price-sub{ font-size:11px; }
}

/* ---------- Categorías ---------- */
.cats{ flex-basis:100%; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.cats::-webkit-scrollbar{ display:none; }
.cats .chip{ padding:6px 12px; font-size:12.5px; }
.cats .chip.active{ background:var(--gold-soft); border-color:var(--gold); color:var(--ink); }