/* ============================================
   Catálogo — layout moderno organizado por família
   ============================================ */

/* ---------- Hero / breadcrumb ---------- */
.catalogo-hero{
  background:
    linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.95) 100%),
    url('../img/hero-catalogo.png') center/cover no-repeat;
  color:#fff;
  padding:80px 0 60px;
  position:relative;
  overflow:hidden;
}
.catalogo-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.2);
  pointer-events:none;
}
.catalogo-hero .container{position:relative;z-index:1}
.catalogo-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.catalogo-breadcrumb a{
  color:#AD1C22;
  text-decoration:none;
  transition:color .2s;
}
.catalogo-breadcrumb a:hover{color:#fff}
.catalogo-breadcrumb i{font-size:10px;color:rgba(255,255,255,.4)}
.catalogo-title{
  font-size:32px;
  font-weight:700;
  color:#fff;
  margin:0;
  letter-spacing:-.01em;
  line-height:1.2;
}
.catalogo-lead{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  margin:0;
  max-width:720px;
}

/* ---------- Corpo: sidebar (categorias) + main (grid) ---------- */
.catalogo-body{
  background:#f8fafc;
  padding:40px 0 80px;
  min-height:400px;
}

/* Sidebar */
.catalogo-sidebar .sidebar-inner{
  position:sticky;
  top:20px;
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:12px;
  padding:22px 20px;
}
.sidebar-title{
  font-size:14px;
  font-weight:800;
  color:#0D0D0D;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:2px solid #f0f2f5;
}
.sidebar-busca{
  position:relative;
  margin:0 0 18px;
}
.sidebar-busca > i{
  position:absolute;
  left:12px;top:50%;
  transform:translateY(-50%);
  color:#8a94a6;
  font-size:13px;
  pointer-events:none;
}
.sidebar-busca input{
  width:100%;
  padding:11px 36px 11px 36px;
  border:1px solid #e6e8ec;
  border-radius:8px;
  font-size:13px;
  font-family:inherit;
  color:#0D0D0D;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.sidebar-busca input::-webkit-search-cancel-button{display:none}
.sidebar-busca input:focus{
  outline:none;
  border-color:#AD1C22;
  box-shadow:0 0 0 3px rgba(166,28,40,.08);
}
.sidebar-busca input:focus + .sidebar-busca-clear,
.sidebar-busca-clear{
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;
  border:none;
  background:#f0f2f5;
  color:#5a6270;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  transition:background .2s, color .2s;
}
.sidebar-busca-clear:hover{background:#AD1C22;color:#fff}
.filtros-list{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.filtros-list li{margin:0;padding:0}
.filtro-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border:1px solid transparent;
  background:transparent;
  color:#4a5262;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
  text-align:left;
}
.filtro-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:22px;
  padding:0 7px;
  background:#f0f2f5;
  color:#6b7280;
  font-size:11px;
  font-weight:700;
  border-radius:11px;
  transition:background .2s, color .2s;
}
.filtro-btn:hover{
  background:#f8fafc;
  color:#AD1C22;
}
.filtro-btn.is-active{
  background:#AD1C22;
  color:#fff;
}
.filtro-btn.is-active span{
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* CTA no rodapé da sidebar — com imagem de fundo + overlay escuro */
.sidebar-cta{
  position:relative;
  margin-top:22px;
  padding:22px 18px;
  border-radius:10px;
  color:#fff;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(135deg,rgba(0,16,31,.9) 0%,rgba(13,13,13,.94) 100%),
    url('../img/cta-bg.jpg') center/cover no-repeat;
}
.sidebar-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(166,28,40,.2) 0,transparent 55%),
    radial-gradient(circle at 80% 80%,rgba(166,28,40,.1) 0,transparent 55%);
  z-index:-1;
  pointer-events:none;
}
.sidebar-cta > *{position:relative;z-index:1}
.sidebar-cta h5{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
}
.sidebar-cta p{
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.8);
  margin:0 0 16px;
}

/* Botão WhatsApp — mesmo estilo (pill sólida) mas verde */
.sidebar-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border-radius:6px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
}
.sidebar-cta-btn i{
  font-size:16px;
}
.sidebar-cta-btn:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,211,102,.4);
}

/* Botão mobile para expandir/recolher categorias */
.sidebar-mobile-toggle{
  display:none;
  width:100%;
  padding:12px 16px;
  background:#0D0D0D;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  margin-bottom:14px;
  font-family:inherit;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.sidebar-mobile-toggle i{color:#AD1C22}

/* ---------- Grid de cards ---------- */
.cat-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{
  transform:translateY(-4px);
  border-color:#AD1C22;
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}
.cat-img{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  position:relative;
}
.cat-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .35s ease;
}
.cat-card:hover .cat-img img{transform:scale(1.06)}

/* Selo da categoria sobreposto à imagem */
.cat-selo{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px 5px 8px;
  background:#AD1C22;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  line-height:1;
}
.cat-selo::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;
}

/* Cores por categoria (opcional — diferencia visualmente) */
.cat-item[data-cat="triaxial"]         .cat-selo{background:#AD1C22}
.cat-item[data-cat="triaxial-dinamico"] .cat-selo{background:#8b1620}
.cat-item[data-cat="cisalhamento"]     .cat-selo{background:#00101F}
.cat-item[data-cat="cbr"]              .cat-selo{background:#1a3d5c}
.cat-item[data-cat="adensamento"]      .cat-selo{background:#2a4a3c}
.cat-item[data-cat="concreto"]         .cat-selo{background:#4a3a2a}
.cat-item[data-cat="hoek"]             .cat-selo{background:#5c1a3d}
.cat-item[data-cat="unicos"]           .cat-selo{background:#0D0D0D}
.cat-item[data-cat="manutencao"]       .cat-selo{background:#3a2a4a}
.cat-item[data-cat="retrofit"]         .cat-selo{background:#4a2a3a}
.cat-item[data-cat="posicionamento"]   .cat-selo{background:#3d1a5c}
.cat-info{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.cat-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#AD1C22;
}
.cat-info h3{
  font-size:15px;
  font-weight:700;
  color:#0D0D0D;
  margin:0;
  line-height:1.35;
}
.cat-card:hover .cat-info h3{color:#AD1C22}

.cat-empty{
  text-align:center;
  padding:80px 20px;
  color:#6b7280;
}
.cat-empty i{
  font-size:40px;
  color:#d1d5db;
  margin-bottom:16px;
}
.cat-empty p{
  font-size:16px;
  margin:0;
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .catalogo-title{font-size:26px}
  .catalogo-hero{padding:60px 0 40px}

  .catalogo-sidebar{margin-bottom:24px}
  .catalogo-sidebar .sidebar-inner{position:static}

  /* Em mobile a sidebar vira accordion: só o botão fica visível até o clique */
  .sidebar-mobile-toggle{display:flex}
  .catalogo-sidebar .sidebar-inner{display:none;padding:16px}
  .catalogo-sidebar.is-open .sidebar-inner{display:block}
  .sidebar-title{display:none}
  .sidebar-cta{display:none}
}
@media (max-width:768px){
  .catalogo-title{font-size:22px}
  .catalogo-lead{font-size:15px}
  .cat-info h3{font-size:14px}
  .cat-tag{font-size:10px}
}