/* ==== Barra de Categorias (robusta + fallback) ==== */
.catbar{
  background: radial-gradient(1000px 300px at 50% -90px, #220014 0%, #10000b 55%, #080008 100%);
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-top: clamp(6px, 1.6vw, 12px);
  margin-bottom: clamp(10px, 2.4vw, 18px);
}
.catbar .container{ max-width:1300px; margin:0 auto; padding:0 16px; }
.catbar h3{
  margin:0 0 6px;
  font-weight:900; letter-spacing:.18em;
  font-size:12px; color:#cfc2cc; opacity:.9;
}

.catrail{ position:relative; }
.catrail-track{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 50px 10px; /* espaço para as setas */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.catrail-track::-webkit-scrollbar{ height:8px }
.catrail-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px }

/* === Chips === */
/* Classe oficial */
.catpill{
  scroll-snap-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px;
  background:#22171d; color:#fff; border:1px solid rgba(255,255,255,.14);
  font-weight:800; font-size:12px; letter-spacing:.25px;
  text-decoration:none; white-space:nowrap; opacity:.95;
  text-transform:uppercase;
  transition: filter .2s ease, transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.catpill:hover{ filter:brightness(1.1) }
.catpill:active{ transform:scale(.98) }
.catpill.is-active{
  background:#f6c24b; color:#1a0a00; border-color:#f6c24b;
  box-shadow:0 4px 12px rgba(246,194,75,.25);
}

/* Fallback: se o HTML vier apenas com <a> dentro do track */
.catbar .catrail-track a{
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px;
  background:#22171d; border:1px solid rgba(255,255,255,.14);
  font-weight:800; font-size:12px; letter-spacing:.25px;
  text-transform:uppercase; white-space:nowrap; opacity:.95;
}
.catbar .catrail-track a:hover{ filter:brightness(1.1) }

/* Setas */
.catnav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  z-index:10; pointer-events:auto;
  transition: filter .2s ease, transform .12s ease;
}
.catnav:hover{ filter:brightness(1.08) }
.catnav:active{ transform:translateY(-50%) scale(.98) }
.catnav svg{ width:14px; height:14px }
.catnav.prev{ left:6px } 
.catnav.next{ right:6px }
.catnav:disabled{ opacity:.35; cursor:default }

/* Mobile */
@media (max-width:720px){
  .catbar{ padding:8px 0 6px; }
  .catpill, .catbar .catrail-track a{ font-size:10.5px; padding:6px 10px; }
  .catnav{ width:28px; height:28px; }
  .catrail-track{ padding-left:44px; padding-right:44px; }
}