/* Estilos base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #0a0a0a;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Galería tipo masonry con columnas CSS */
.masonry {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}

.masonry > * {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Variante con miniaturas pequeñas (comuniones): más columnas y menos separación */
.masonry.masonry-compact {
  column-count: 2;
  column-gap: 0.5rem;
}

@media (min-width: 640px) {
  .masonry.masonry-compact {
    column-count: 4;
  }
}

@media (min-width: 1024px) {
  .masonry.masonry-compact {
    column-count: 6;
  }
}

.masonry.masonry-compact > * {
  margin-bottom: 0.5rem;
}

/* Animación de aparición al hacer scroll, activada por IntersectionObserver en main.js */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #111111;
}

::-webkit-scrollbar-thumb {
  background: #c9a24b;
  border-radius: 999px;
}

/* Lightbox */
#lightbox {
  backdrop-filter: blur(6px);
}

#lightbox-img {
  transition: opacity 0.2s ease;
}

/* Oculta el input de tipo date nativo feo en algunos navegadores manteniendo accesibilidad */
input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}