/* Estilos de galería */

/* Masonry */
.masonry {
  column-count: 1;
  column-gap: 16px;
  column-fill: balance;
}

.masonry img {
  width: 100%;
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.3s ease;
  cursor: pointer;
  break-inside: avoid;
}

.masonry img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
}

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

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

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

/* Carousel */
.carousel {
  position: relative;
  margin-top: 16px;
  padding: 0 20px;
}

.carousel .carousel-track {
  align-items: center;
}

.carousel .carousel-track > * {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel .carousel-track > *:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.carousel-track {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
  justify-content: center;
}

.carousel-track>* {
  flex: 0 0 85%;
  padding: 0 8px;
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .carousel-track>* {
    flex: 0 0 70%;
    max-width: 450px;
  }
}

@media (min-width: 768px) {
  .carousel-track>* {
    flex: 0 0 55%;
    max-width: 500px;
  }
}

@media (min-width: 1024px) {
  .carousel-track>* {
    flex: 0 0 40%;
    max-width: 550px;
  }
}

@media (min-width: 1200px) {
  .carousel-track>* {
    flex: 0 0 35%;
    max-width: 600px;
  }
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0009;
  border: 1px solid var(--border);
  color: #fff;
  border-radius: 999px;
  width: 36px;
  height: 36px;
}

.carousel-prev {
  left: 8px;
}

.carousel-next {
  right: 8px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #555;
}

.carousel-dots button.active {
  background: var(--accent);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.lightbox.open {
  display: flex;
}

.lightbox-content {
  max-width: 96vw;
  max-height: 96vh;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #000;
  border: 1px solid var(--border);
  color: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
}

/* Volver el acento de la sección Galería a amarillo */
#gallery-root h1,
#gallery-root h2 { 
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin-bottom: 1.5rem;
  text-align: center;
}

#gallery-root .subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: var(--lh-body);
  color: var(--muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}
#gallery-root h2::after { background: var(--accent); box-shadow: 0 0 6px rgba(255,212,0,.22); }
#gallery-root .highlight { border-left-color: var(--accent); }
#gallery-root .carousel-prev,
#gallery-root .carousel-next { border-color: var(--accent); }
#gallery-root .carousel-dots button.active { background: var(--accent); }

/* Transiciones suaves entre secciones de galería */
.section.gallery,
.section.videos {
  will-change: opacity;
}

/* En móviles, 1-2 columnas según ancho */
@media (max-width: 767.98px){
  #video-carousel{
    max-width: 100vw;
  }
  #video-carousel .carousel-track{
    grid-auto-columns: minmax(300px, 95vw);
  }
}