:root {
  --gap: 16px;
  /* espaçamento entre cards */
  --cols-lg: 4;
  /* nº colunas desktop */
  --cols-md: 3;
  /* nº colunas tablet */
  --cols-sm: 2;
  /* nº colunas mobile */
  --radius: 10px;
  /* cantos arredondados */
}

.gallery {
  position: relative;
}


.gallery::after{
  content:"";
  position:absolute;
  left:0;
  top:-36px;
  width:49%;
  height:75px;
  background: white;
  pointer-events:none;
}


.gallery .wrap {
  max-width: 1200px;
  margin-bottom: 100px;
}

/* --- MASONRY --- */
.masonry {
  column-gap: var(--gap);
  column-count: var(--cols-lg);
}

@media (max-width: 1100px) {
  .masonry {
    column-count: var(--cols-md);
  }
}

@media (max-width: 700px) {
  .masonry {
    column-count: var(--cols-sm);
  }
}

.gallery .card {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  background: #fff;
  transform: translateZ(0);
  /* melhora o scrolling */
}

.gallery .card img {
  width: 100%;
  height: auto;
  /* mantém a altura natural para o efeito */
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.gallery .card:hover img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* botão de zoom (abre lightbox) – opcional */
.zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  font-size: 12px;
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: .25s;
}

.gallery .card:hover .zoom {
  opacity: 1;
  transform: translateY(0);
}

/* --- LIGHTBOX --- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .8);
  z-index: 50;
  padding: 24px;
}

.lightbox.open {
  display: grid;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
}

.lightbox .close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 999px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: white !important;
  border: solid 1px var(--accent);
}

/* Alinhar as nav-pills à esquerda */
.nav-pills {
  justify-content: flex-start !important;
}

.nav-pills .nav-link {
  border-radius: 0 !important;
  border: solid 1px gray;
  color: gray;
}

/* Fix para manter as pills visíveis */
.nav-pills {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: white !important;
  padding: 10px 0 !important;
}