/* ── GALERIA / NOVAS ── */
#galeria, #novas { padding: 7rem 1.5rem 3rem; }

/* Seletor de colunas */
.col-switch {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  margin-bottom: 1rem;
}
.col-btn {
  background: none; border: 1px solid rgba(255,255,255,0.15);
  color: #777; font-family: 'NexaHeavy', Georgia, serif;
  font-size: 0.72rem; letter-spacing: 0.02em;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.col-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.col-btn.active { color: #000; background: #fff; border-color: #fff; }
.col-btn:active { transform: scale(0.92); }

.grid-gallery {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 5px;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.grid-gallery.switching { opacity: 0; filter: blur(4px); }

.grid-item {
  overflow: hidden; cursor: pointer; background: #050505;
  aspect-ratio: 1; position: relative;
}
.grid-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s;
  opacity: 0; -webkit-user-select: none; user-select: none;
  pointer-events: none; -webkit-user-drag: none;
}
.grid-item img.loaded { opacity: 0.82; }
.grid-item:hover img.loaded { transform: scale(1.04); opacity: 1; }
.grid-item::after { content: ''; position: absolute; inset: 0; z-index: 2; cursor: pointer; }

/* Spinner */
.grid-spinner {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}
.grid-spinner svg { width: 24px; height: 24px; }
.grid-spinner circle { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 2; }
.grid-spinner .arc {
  fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 0 100;
  animation: fillArc 1.4s cubic-bezier(0.4,0,0.2,1) infinite;
  transform-origin: center; transform: rotate(-90deg);
}
.grid-item.loaded .grid-spinner { display: none; }

/* Mobile */
@media (max-width: 768px) {
  #galeria, #novas { padding: 5.5rem 0.5rem 2rem; }
  .grid-gallery { gap: 3px; }
  .col-switch { margin-bottom: 0.6rem; gap: 0.4rem; }
  .col-btn { width: 24px; height: 24px; font-size: 0.68rem; }
}