/* =====================================================
   LAYOUT GERAL
   ===================================================== */

.ativa-container{
  display:flex;
  gap:28px;
  align-items:flex-start;
}

#catalogo-grid{
  flex:1;
  min-width:0;
}

#catalogo-grid.is-loading{
  opacity:.6;
  pointer-events:none;
}

/* =====================================================
   SIDEBAR DE FILTROS - PADRÃO MOCKUP
   ===================================================== */

.sidebar-filtros{
  width:280px;
  min-width:280px;
  background:#fff;
  padding:20px;
  border-radius:18px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  border:1px solid #eceff4;
  position:sticky;
  top:20px;
}

.sidebar-filtros h3{
  margin:0 0 16px 0;
  font-size:16px;
  font-weight:700;
  color:#111827;
}

.btn-voltar-vitrine{
  display:block;
  width:100%;
  text-align:center;
  text-decoration:none;
  margin:0 0 12px 0;
  padding:10px 12px;
  border:1px solid #dbe3ee;
  background:#eef4ff;
  color:#173f8a;
  border-radius:10px;
  font-weight:700;
  transition:.2s ease;
}

.btn-voltar-vitrine:hover{
  background:#173f8a;
  color:#fff;
}

.filtro-dropbox{
  border:1px solid #dde3ec;
  background:#f8fafc;
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}

.filtro-dropbox > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  font-weight:400;
  font-size:14px;
  color:#374151;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  background:#f8fafc;
}

.filtro-dropbox > summary::-webkit-details-marker{
  display:none;
}

.filtro-dropbox > summary::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform:rotate(45deg);
  transition:transform .15s ease;
  margin-left:8px;
  flex:0 0 auto;
}

.filtro-dropbox[open] > summary::after{
  transform:rotate(225deg);
  margin-top:6px;
}

.filtro-opcoes{
  padding:8px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow:auto;
  background:#fff;
  border-top:1px solid #eef2f7;
}

.filtro-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#1f2937;
  padding:6px 8px;
  border-radius:8px;
  background:#fff;
  border:1px solid #eef2f7;
}

.filtro-item:hover{
  border-color:#dbe3ee;
}

.filtro-item input{
  margin:0;
}

.btn-limpar-filtros{
  width:100%;
  padding:12px 14px;
  border:none;
  background:#173f8a;
  color:#fff;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  transition:.2s ease;
}

.btn-limpar-filtros:hover{
  background:#0f2f68;
}

/* =====================================================
   HERO
   ===================================================== */

.ativa-home-catalogo{
  width:100%;
}

.ativa-home-hero{
  background:linear-gradient(135deg, #ffffff, #f3f6fc);
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:28px 30px;
  margin-bottom:28px;
  box-shadow:0 6px 20px rgba(0,0,0,0.04);
}

.ativa-home-hero h1{
  margin:0 0 10px 0;
  font-size:28px;
  line-height:1.2;
  color:#173f8a;
}

.ativa-home-hero p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:#4b5563;
  max-width:760px;
}

/* =====================================================
   VITRINE POR CATEGORIA
   ===================================================== */

.categoria-bloco{
  margin-bottom:30px;
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:20px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.categoria-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.categoria-header h2{
  margin:0;
  font-size:22px;
  line-height:1.2;
  color:#0f172a;
}

.btn-ver-categoria{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  height:36px;
  padding:0 14px;
  border-radius:10px;
  background:#173f8a;
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:.2s ease;
}

.btn-ver-categoria:hover{
  background:#0f2f68;
  color:#fff;
}

.categoria-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:14px;
  align-items:start;
}

.categoria-col-destaque,
.categoria-col-mini{
  align-self:start;
}

/* =====================================================
   CARDS DA VITRINE - EXCLUSIVOS
   ===================================================== */

.vitrine-card{
  display:flex;
  flex-direction:column;
  width:100%;
  overflow:hidden;
  border:1px solid #dfe5ee;
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.vitrine-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.vitrine-card-img{
  width:100%;
  overflow:hidden;
  background:#eef2f7;
  flex:0 0 auto;
}

.vitrine-card-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.vitrine-card-body{
  padding:12px 14px 14px;
}

.vitrine-card-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:#111827;
  word-break:break-word;
}

/* destaque */
.vitrine-card-destaque{
  height:360px;
}

.vitrine-card-destaque .vitrine-card-img{
  height:285px;
}

.vitrine-card-destaque .vitrine-card-body{
  min-height:75px;
}

/* minis */
.vitrine-card-mini{
  height:200px;
}

.vitrine-card-mini .vitrine-card-img{
  height:150px;
}

.vitrine-card-mini .vitrine-card-body{
  padding:10px 12px 12px;
  min-height:50px;
}

.vitrine-card-mini .vitrine-card-title{
  font-size:14px;
}

/* placeholder */
.vitrine-card-placeholder{
  background:#f8fafc;
  border:1px dashed #d7dee8;
  cursor:default;
  pointer-events:none;
}

.vitrine-card-placeholder .vitrine-card-img{
  background:#eef2f7;
}

/* =====================================================
   GRID TRADICIONAL
   ===================================================== */

.grid-container{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.projeto-card{
  display:block;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.projeto-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.projeto-card-img{
  width:100%;
  aspect-ratio:1 / 1;
  background:#eef2f7;
  overflow:hidden;
}

.projeto-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.projeto-title{
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  color:#111827;
  line-height:1.35;
}

/* =====================================================
   RESPONSIVO
   ===================================================== */

@media (max-width: 1100px){
  .ativa-container{
    flex-direction:column;
  }

  .sidebar-filtros{
    width:100%;
    min-width:0;
    position:static;
  }

  .categoria-grid{
    grid-template-columns:1fr;
  }

  .vitrine-card-destaque,
  .vitrine-card-mini{
    height:auto;
  }

  .vitrine-card-destaque .vitrine-card-img,
  .vitrine-card-mini .vitrine-card-img{
    height:220px;
  }

  .grid-container{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .grid-container{
    grid-template-columns:1fr;
  }

  .ativa-home-hero{
    padding:22px 20px;
  }

  .ativa-home-hero h1{
    font-size:24px;
  }

  .categoria-header h2{
    font-size:20px;
  }
}


/* =====================================================
   CORREÇÕES FINAIS - SUBLINHADO / OVERFLOW / MOBILE
   ===================================================== */

/* remover sublinhado de toda a vitrine e grid */
.ativa-home-catalogo a,
.ativa-home-catalogo a:hover,
.ativa-home-catalogo a:focus,
.categoria-bloco a,
.categoria-bloco a:hover,
.categoria-bloco a:focus,
.categoria-header a,
.categoria-header a:hover,
.categoria-header a:focus,
.vitrine-card,
.vitrine-card:hover,
.vitrine-card:focus,
.vitrine-card-title,
.vitrine-card-title:hover,
.vitrine-card-title:focus,
.projeto-card,
.projeto-card:hover,
.projeto-card:focus,
.projeto-title,
.projeto-title:hover,
.projeto-title:focus,
.btn-ver-categoria,
.btn-ver-categoria:hover,
.btn-ver-categoria:focus,
.btn-voltar-vitrine,
.btn-voltar-vitrine:hover,
.btn-voltar-vitrine:focus {
  text-decoration: none !important;
}

/* evita corte lateral / overflow horizontal */
html, body{
  overflow-x:hidden;
}

.ativa-container,
#catalogo-grid,
.ativa-home-catalogo,
.categoria-bloco,
.categoria-grid,
.categoria-col-destaque,
.categoria-col-mini,
.grid-container,
.vitrine-card,
.projeto-card{
  min-width:0;
  max-width:100%;
}

.vitrine-card-img img,
.projeto-card-img img{
  max-width:100%;
}

@media (max-width: 1024px){
  .ativa-container{
    gap:20px;
  }

  .sidebar-filtros{
    width:100%;
    min-width:0;
    position:static;
    top:auto;
  }

  .categoria-grid{
    grid-template-columns:1fr;
  }

  .categoria-col-mini{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .grid-container{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .vitrine-card-destaque,
  .vitrine-card-mini{
    height:auto;
  }

  .vitrine-card-destaque .vitrine-card-img,
  .vitrine-card-mini .vitrine-card-img{
    height:auto;
    aspect-ratio:4/3;
  }
}

@media (max-width: 640px){
  .ativa-container{
    gap:16px;
  }

  .sidebar-filtros{
    padding:16px;
    border-radius:16px;
  }

  .ativa-home-hero{
    padding:20px 16px;
    margin-bottom:20px;
  }

  .ativa-home-hero h1{
    font-size:22px;
  }

  .ativa-home-hero p{
    font-size:14px;
    line-height:1.55;
  }

  .categoria-bloco{
    padding:14px;
    margin-bottom:20px;
    border-radius:16px;
  }

  .categoria-header{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .categoria-header h2{
    font-size:18px;
  }

  .btn-ver-categoria,
  .btn-limpar-filtros{
    width:100%;
    min-width:0;
    min-height:44px;
  }

  .categoria-col-mini{
    grid-template-columns:1fr;
    gap:12px;
  }

  .grid-container{
    grid-template-columns:1fr;
    gap:12px;
  }

  .filtro-dropbox > summary{
    padding:13px 14px;
    font-size:15px;
  }

  .filtro-item{
    font-size:14px;
    padding:9px 8px;
  }
}