*,*::before,*::after{box-sizing:border-box}

/* hidden tem que ganhar do display dos cards, senão o filtro da home não
   esconde nada (.card é display:flex). */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg,#0B0F14);color:var(--text,#fff);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
s{color:#7f8c9b}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,#000);backdrop-filter:blur(8px);
  border-bottom:1px solid #1b2430;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{font-size:26px}
.logo strong{display:block;font-size:17px;letter-spacing:.2px}
.logo small{display:block;color:#8b97a5;font-size:12px}

/* ---------- botoes ---------- */
.btn{
  display:inline-block;padding:11px 18px;border-radius:999px;font-weight:700;
  font-size:14px;border:1px solid #2a3342;background:#141c27;color:#fff;cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.btn-tg{background:#229ED9;border-color:#229ED9}
/* ---------- redes sociais ---------- */
.social-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.soc{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid #1b2430;
  color:#c9d3de;font-size:12.5px;font-weight:600;text-decoration:none;background:#0d1521;transition:border-color .15s,color .15s}
.soc:hover{color:#fff}
.soc-ico{font-size:14px;line-height:1}
.soc-instagram:hover{border-color:#E1306C} .soc-tiktok:hover{border-color:#69C9D0} .soc-youtube:hover{border-color:#FF0000}
.soc-facebook:hover{border-color:#1877F2} .soc-telegram:hover{border-color:#229ED9}
.siga-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 6px;color:#8b97a5;font-size:13px}
.siga{margin-bottom:18px}
.siga strong{display:block;margin-bottom:10px;color:#fff}
.siga-bot{color:#8b97a5;font-size:13px;margin:10px 0 0}
@media(max-width:700px){.topbar .soc-txt{display:none}.topbar .soc{padding:7px 9px}}
.btn-buy{background:var(--accent,#00E07A);border-color:var(--accent,#00E07A);color:#06231a;width:100%;text-align:center}
.btn-buy.big{padding:15px 22px;font-size:16px}

/* ---------- hero ---------- */
.hero{padding:34px 16px 10px;max-width:1180px;margin:0 auto}
.hero h1{font-size:clamp(26px,5vw,42px);margin:0 0 8px;line-height:1.1}
.hero p{color:#aeb9c6;margin:0 0 18px;max-width:62ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{
  flex:1 1 220px;min-width:180px;padding:11px 14px;border-radius:999px;
  border:1px solid #2a3342;background:#0f1620;color:#fff;font-size:14px;
}
.search:focus{outline:2px solid var(--accent,#00E07A);outline-offset:1px}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:6px}
.chip{
  padding:7px 13px;border-radius:999px;border:1px solid #2a3342;background:transparent;
  color:#aeb9c6;font-size:13px;cursor:pointer
}
.chip-on{background:#1d2836;color:#fff;border-color:#3a4759}

/* ---------- layout com abas de categoria ---------- */
.layout{max-width:1180px;margin:0 auto;display:grid;gap:0 18px;grid-template-columns:1fr;padding:0 16px}
.categorias{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:thin}
.categorias h2{display:none}
.cat{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 12px;border-radius:999px;
  border:1px solid #2a3342;color:#aeb9c6;font-size:13px;text-decoration:none;background:#0f1620;flex-shrink:0
}
.cat small{color:#6c7785;font-size:11px}
.cat:hover{color:#fff;border-color:#3a4759}
.cat-on{background:#1d2836;color:#fff;border-color:#3a4759}
@media(min-width:900px){
  .layout{grid-template-columns:220px 1fr;align-items:start}
  .categorias{position:sticky;top:76px;flex-direction:column;overflow:visible;gap:3px;padding:16px 0 20px}
  .categorias h2{display:block;font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:#6c7785;margin:0 0 8px 10px}
  .cat{border:0;border-radius:10px;padding:9px 10px;background:transparent;width:100%;justify-content:flex-start}
  .cat span{flex:1;white-space:normal}
  .cat-on{background:#1d2836}
}

/* ---------- grid de cards ---------- */
.grid{
  display:grid;gap:14px;padding:16px 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  background:#111823;border:1px solid #1b2430;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease
}
.card:hover{border-color:#2f3d4f;transform:translateY(-2px)}
.card-img{position:relative;background:#fff;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.noimg{color:#9aa6b2;font-size:13px}
.badge{
  position:absolute;top:10px;right:10px;background:var(--alert,#FF3B5C);color:#fff;
  font-weight:800;font-size:13px;padding:6px 10px;border-radius:999px
}
.badge.big{font-size:17px;padding:9px 14px}
.card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.store{color:#7f8c9b;font-size:11px;text-transform:uppercase;letter-spacing:.8px}
.card-title{font-size:14.5px;line-height:1.3;margin:0;font-weight:600}
.prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prices s{font-size:13px}
.prices strong{font-size:21px;color:var(--accent,#00E07A)}
.prices.big strong{font-size:34px}
.inst{color:#aeb9c6;font-size:12.5px}

/* ---------- cupom ---------- */
.cupom{
  display:flex;align-items:center;gap:7px;width:100%;cursor:pointer;
  background:transparent;border:1.5px dashed var(--alert,#FF3B5C);color:#fff;
  border-radius:11px;padding:9px 12px;font:inherit;font-size:13px;text-align:left;
  transition:background .15s;
}
.cupom:hover{background:#2a151c}
.cupom b{letter-spacing:.6px;font-size:14px}
.cupom span{color:#aeb9c6;font-size:11.5px;margin-left:auto}
.cupom.big{padding:13px 16px;font-size:15px;margin-top:12px}
.cupom.copiado{border-style:solid;border-color:var(--accent,#00E07A);color:var(--accent,#00E07A)}
.cupom-auto{
  border:1.5px dashed #5b4a2a;color:#ffd98a;border-radius:11px;
  padding:8px 12px;font-size:12.5px
}
.cupom-auto.big{padding:12px 16px;font-size:14px;margin-top:12px}
.tags{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.tags li{background:#1a2230;color:#c9d3de;font-size:11.5px;padding:4px 9px;border-radius:999px}
.card-body .btn-buy{margin-top:auto}

/* ---------- detalhe ---------- */
.detail{max-width:1000px;margin:0 auto;padding:18px 16px 8px}
.crumbs{color:#7f8c9b;font-size:13px;margin-bottom:14px}
.crumbs a{color:var(--accent,#00E07A)}
.detail-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:820px){.detail-grid{grid-template-columns:1fr 1fr;align-items:start}}
.detail-img{position:relative;background:#fff;border-radius:18px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.detail-img img{width:100%;height:100%;object-fit:contain;padding:18px}
.detail-info h1{font-size:clamp(20px,3.4vw,28px);margin:6px 0 12px;line-height:1.22}
.detail-info .btn-buy{margin-top:14px}
.mini{color:#7f8c9b;font-size:12.5px;margin:10px 0 0}
.why{margin-top:20px;background:#111823;border:1px solid #1b2430;border-radius:14px;padding:14px 16px}
.why h3{margin:0 0 8px;font-size:14px;color:#aeb9c6;text-transform:uppercase;letter-spacing:.6px}
.why ul{margin:0;padding-left:18px;color:#c9d3de;font-size:14px}
.related{max-width:1180px;margin:10px auto 0;padding:0 16px}
.related h2{font-size:18px;margin:22px 0 2px}

/* ---------- conteudo ---------- */
.prose{max-width:720px;margin:0 auto;padding:26px 16px 10px}
.prose h1{font-size:clamp(22px,4vw,32px);margin-bottom:14px}
.prose p,.prose li{color:#c9d3de}
.prose a{color:var(--accent,#00E07A)}
.prose .muted{color:#8a97a6;font-size:14px}
.code-box{background:#121a24;border:1px solid #223042;border-radius:10px;padding:14px 16px;font-family:ui-monospace,Consolas,monospace;font-size:14px;color:#e6edf3;white-space:pre-wrap;word-break:break-all;user-select:all}
.empty{max-width:720px;margin:0 auto;padding:30px 16px;text-align:center;color:#aeb9c6}
.empty code{background:#1a2230;padding:2px 7px;border-radius:6px;color:#fff}
.nores{text-align:center;color:#8b97a5;padding:10px 16px 30px}

/* ---------- footer ---------- */
.footer{border-top:1px solid #1b2430;margin-top:34px;padding:22px 16px 40px;text-align:center}
.disclosure{color:#aeb9c6;font-size:13px;max-width:70ch;margin:0 auto 12px}
.footer-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.footer-links a{color:#8b97a5;font-size:13px}
.footer-links a:hover{color:#fff}
.copy{color:#5f6b7a;font-size:12px}

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