/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
  --bg:      #080808; --card:    #111111; --card-2: #181818;
  --fg:      #ffffff; --muted:   #888888; --dim:    #3d3d3d;
  --border:  rgba(255,255,255,.07); --border2: rgba(255,255,255,.14);
  --nav-bg:  rgba(8,8,8,.96);
  --shadow:  0 20px 60px rgba(0,0,0,.55);
  --r: 12px; --rg: 16px;
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --font:   'Inter',-apple-system,system-ui,sans-serif;
}

/* ── BASE ─────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden }
body { background:var(--bg); color:var(--fg); font-family:var(--font); overflow-x:hidden }
img { max-width:100%; height:auto; display:block }
a   { text-decoration:none; color:inherit }
::-webkit-scrollbar       { width:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--dim); border-radius:4px }

.container { max-width:1100px; margin:0 auto; padding:0 48px }

/* ── NOISE ───────────────────────────────────────────── */
.noise {
  position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  pointer-events:none; z-index:9999; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:500;
  background:var(--nav-bg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .35s var(--ease);
}
.nav-inner {
  display:flex; align-items:center;
  flex-wrap:wrap; gap:10px;
  padding-top:13px; padding-bottom:13px;
}

/* Logo */
.nav-logo      { flex-shrink:0 }
.nav-logo-img  { height:26px; width:auto; filter:brightness(0) invert(1) }
.nav-logo-text { font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--fg) }

/* Pill dot — só no site-header */
.nav-pill-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:#fff; opacity:.9;
  box-shadow:0 0 7px rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.3);
  animation:dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity:.9; transform:scale(1) }
  50%      { opacity:.2; transform:scale(.5) }
}

/* Search — ocupa espaço restante */
.nav-search-wrap {
  flex:1; min-width:120px; position:relative; margin-left:auto;
}
.nav-search-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--muted); pointer-events:none;
}
.nav-search-input {
  width:100%; padding:9px 12px 9px 34px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); color:var(--fg); font-family:var(--font);
  font-size:13px; outline:none;
  transition:border-color .2s, background .2s;
}
.nav-search-input::placeholder { color:var(--dim) }
.nav-search-input:focus { border-color:var(--border2); background:var(--card-2) }


/* ══════════════════════════════════════════
   SITE HEADER
══════════════════════════════════════════ */
.site-header { padding:40px 0 28px; border-bottom:1px solid var(--border) }
.site-pill {
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border2);
  padding:6px 14px 6px 10px; border-radius:40px; margin-bottom:18px;
}
.site-title {
  font-size:clamp(22px,3.5vw,38px); font-weight:800;
  letter-spacing:-.03em; line-height:1.15; margin-bottom:8px;
}
.site-title em { font-style:normal; color:var(--muted) }
.site-sub { font-size:clamp(13px,1.4vw,15px); color:var(--muted); line-height:1.65 }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; border-radius:8px; font-weight:700; letter-spacing:.1em;
  border:1px solid transparent; overflow:hidden; white-space:nowrap;
  cursor:pointer; background-size:202% 100%; font-family:var(--font);
  transition:background-position .42s cubic-bezier(0.76,0,.24,1),
             color .42s cubic-bezier(0.76,0,.24,1), border-color .25s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.96) }
.btn-sm     { padding:10px 18px; font-size:10px }
.btn-md     { padding:13px 26px; font-size:11px }
.btn-lg     { padding:15px 38px; font-size:12px }

/* Primary: dark → fundo branco; light → fundo escuro */
.btn-primary {
  background-image:linear-gradient(to right,#161616 50%,#fff 50%);
  background-position:100% 0; color:#000; border-color:#fff;
}
.btn-primary:hover { background-position:0 0; color:#fff; border-color:#333 }

/* Ghost */
.btn-ghost {
  background-image:linear-gradient(to right,var(--fg) 50%,transparent 50%);
  background-position:100% 0; color:var(--fg); border-color:var(--border2);
}
.btn-ghost:hover { background-position:0 0; color:var(--bg); border-color:var(--fg) }

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.s-products { padding:0 0 80px }
.filter-bar { padding:18px 0 16px; border-bottom:1px solid var(--border); margin-bottom:28px }
.filter-cats {
  display:flex; align-items:center; gap:7px;
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px;
}
.filter-cats::-webkit-scrollbar { display:none }
.filter-btn {
  flex-shrink:0; padding:7px 14px; border-radius:40px;
  font-size:11px; font-weight:600; letter-spacing:.07em;
  background:transparent; border:1px solid var(--border); color:var(--muted);
  cursor:pointer; font-family:var(--font);
  transition:background .2s, border-color .2s, color .2s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.filter-btn:hover  { border-color:var(--border2); color:var(--fg) }
.filter-btn:active { transform:scale(.95) }
.filter-btn.active { background:var(--fg); color:var(--bg); border-color:var(--fg) }

/* ══════════════════════════════════════════
   PRODUCT GRID — 2 colunas
══════════════════════════════════════════ */
.products-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px }

/* ── CARD ──────────────────────────────── */
.pc {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--rg); overflow:hidden; cursor:pointer;
  position:relative;
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s;
}
.pc:hover {
  border-color:var(--border2); transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.pc::before {
  content:''; position:absolute; top:-50%; left:-110%;
  width:60%; height:200%;
  background:linear-gradient(90deg,transparent,rgba(128,128,128,.06),transparent);
  transform:skewX(-20deg);
  transition:left .65s cubic-bezier(0.76,0,.24,1);
  pointer-events:none; z-index:1;
}
.pc:hover::before { left:120% }

.pc-img-wrap {
  position:relative; width:100%; padding-bottom:58%;
  background:var(--card-2); overflow:hidden;
}
.pc-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .55s var(--ease);
}
.pc:hover .pc-img { transform:scale(1.04) }
.pc-img-placeholder {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:var(--dim);
}
.pc-img-placeholder svg { width:38px; height:38px }
.pc-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 9px; border-radius:40px; font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  background:rgba(0,0,0,.45); color:#fff;
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22);
}

.pc-cat {
  position:absolute; bottom:10px; right:10px; z-index:2;
  padding:3px 9px; border-radius:40px; font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  background:rgba(8,8,8,.7); color:#aaa;
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15);
}

.pc-body { padding:18px 18px 16px }
.pc-price { font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted); margin-bottom:5px }
.pc-price--from { color:var(--fg); font-size:11px; font-weight:500 }
.pc-price--from strong { font-size:15px; font-weight:800; letter-spacing:-.01em }
.pc-name { font-size:15px; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin-bottom:8px }
.pc-desc { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:14px }
.pc-actions { display:flex; gap:8px }

/* ── EMPTY / LOADING ──────────────────── */
.empty-state {
  grid-column:1/-1; display:flex; flex-direction:column;
  align-items:center; padding:72px 20px; text-align:center;
}
.empty-icon {
  width:60px; height:60px; border-radius:14px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--dim); margin-bottom:14px;
}
.empty-icon svg { width:26px; height:26px }
.empty-title { font-size:15px; font-weight:700; margin-bottom:4px }
.empty-sub   { font-size:13px; color:var(--muted) }
.loading-dots { display:flex; gap:6px; justify-content:center; padding:60px 0 }
.loading-dots span {
  width:8px; height:8px; border-radius:50%;
  background:var(--dim); animation:ldot .9s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay:.15s }
.loading-dots span:nth-child(3) { animation-delay:.3s }
@keyframes ldot {
  0%,80%,100% { transform:scale(.6); opacity:.3 }
  40%          { transform:scale(1);  opacity:1 }
}

/* ══════════════════════════════════════════
   MODAL — sempre no centro
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}

.modal-overlay.active { opacity:1; pointer-events:all }
.modal-box {
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--rg); width:100%; max-width:660px; max-height:92vh;
  overflow-y:auto; position:relative;
  transform:translateY(24px) scale(.97);
  transition:transform .35s var(--spring);
}
.modal-overlay.active .modal-box { transform:translateY(0) scale(1) }
.modal-close {
  position:sticky; top:12px; left:100%; float:right;
  margin:12px 12px 0 0; z-index:10;
  width:32px; height:32px; border-radius:8px;
  background:var(--card-2); border:1px solid var(--border2);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, transform .15s;
}
.modal-close:hover  { background:var(--dim); color:var(--fg) }
.modal-close:active { transform:scale(.9) }
.modal-close svg { width:14px; height:14px }

.modal-img-wrap  { width:100%; max-height:280px; overflow:hidden }
.modal-img       { width:100%; height:100%; object-fit:cover }
.modal-body      { padding:22px 24px 28px }
.modal-meta      { display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap }
.modal-cat-tag,
.modal-dest-tag  {
  padding:3px 9px; border-radius:40px;
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--border2); color:var(--muted);
}
.modal-dest-tag  {
  background:rgba(128,128,128,.1); color:var(--fg);
  border-color:var(--border2);
}
.modal-name         { font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-bottom:12px }
.modal-desc         { font-size:14px; color:var(--muted); line-height:1.78; margin-bottom:22px; white-space:pre-wrap; word-break:break-word }
.modal-price-single { font-size:32px; font-weight:900; letter-spacing:-.03em; margin-bottom:18px }
.modal-price-from   { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px }
.modal-tiers        { display:flex; flex-direction:column; gap:10px; margin-bottom:22px }
.modal-tier {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; background:var(--card-2);
  border:1px solid var(--border2); border-radius:var(--r);
  transition:border-color .2s;
}
.modal-tier:hover  { border-color:rgba(128,128,128,.35) }
.modal-tier-label  { font-size:12px; font-weight:700; margin-bottom:2px; color:var(--muted) }
.modal-tier-price  { font-size:20px; font-weight:900; letter-spacing:-.02em }
.modal-links       { display:flex; gap:10px; flex-wrap:wrap }

/* ── FOOTER ──────────────────────────── */
.footer      { border-top:1px solid var(--border); padding:22px 0 }
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.footer-logo      { height:20px; filter:brightness(0) invert(1); opacity:.4 }
.footer-logo-text { font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--dim) }
.footer-copy      { font-size:11px; color:var(--dim) }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* ── Tablet largo ── */
@media(max-width:768px) {
  .container { padding:0 20px }
  .nav-search-input { font-size:13px }
  .site-header { padding:28px 0 22px }
  .site-pill   { font-size:9px; padding:5px 12px 5px 9px }
  .products-grid { gap:16px }
  .modal-body  { padding:20px 22px 24px }
  .modal-name  { font-size:18px }
  .modal-price-single { font-size:26px }
  .modal-tier  { flex-direction:column; align-items:flex-start; gap:10px }
  .modal-tier .btn { width:100%; justify-content:center }
  .footer-inner { flex-direction:column; align-items:center; text-align:center; gap:8px }
}

/* ── Mobile ── */
@media(max-width:480px) {
  .container { padding:0 14px }

  /* NAV mobile: logo linha 1 / busca linha 2 */
  .nav-inner        { gap:8px; padding-top:10px; padding-bottom:10px }
  .nav-logo         { flex:1 }
  .nav-logo-img     { height:22px }
  .nav-search-wrap  { flex:none; width:100%; margin-left:0; min-width:0; order:10 }
  .nav-search-input { padding:10px 10px 10px 34px; font-size:14px; border-radius:10px }

  /* HEADER */
  .site-header  { padding:20px 0 16px }
  .site-pill    { font-size:9px; letter-spacing:.1em; padding:5px 11px 5px 8px; margin-bottom:12px }
  .site-title   { font-size:clamp(18px,5.5vw,22px); letter-spacing:-.025em }
  .site-sub     { font-size:12px }

  /* FILTER */
  .filter-bar   { padding:12px 0 10px; margin-bottom:18px }
  .filter-btn   { padding:6px 12px; font-size:10px }

  /* GRID: coluna única */
  .products-grid { grid-template-columns:1fr; gap:12px }
  .pc-img-wrap   { padding-bottom:52% }
  .pc-body       { padding:14px 14px 12px }
  .pc-name       { font-size:14px }
  .pc-desc       { margin-bottom:10px; font-size:12px }
  .pc-actions    { width:100% }
  .pc-actions .btn { flex:1; justify-content:center }

  /* MODAL — centro sempre */
  .modal-overlay { padding:10px }
  .modal-box     { border-radius:14px; max-height:90vh }
  .modal-close   { top:10px; margin:10px 10px 0 0; width:30px; height:30px }
  .modal-img-wrap { max-height:180px }
  .modal-body    { padding:14px 16px 20px }
  .modal-name    { font-size:16px; margin-bottom:10px }
  .modal-desc    { font-size:13px; margin-bottom:16px }
  .modal-price-single { font-size:22px; margin-bottom:12px }
  .modal-tier    { padding:12px; gap:8px }
  .modal-tier-price { font-size:17px }
  .modal-links   { flex-direction:column; gap:8px }
  .modal-links .btn { width:100%; justify-content:center; font-size:10px; padding:10px }

  /* FOOTER */
  .footer { padding:16px 0 }

  /* EMPTY */
  .empty-state { padding:48px 12px }
}