/* ============================================================
   GALERÍA — Bento grid con sliders de 2 imágenes
   Nota: .carousel-slide-container / .carousel-slide viven en carousel.css
   ============================================================ */

.gallery-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 380px 240px;
  gap: 0.7rem;
}
.gb { overflow: hidden; position: relative; background: var(--color-surface); }
.gb-1 { grid-column: 1; grid-row: 1 / 3; }   /* Hero izquierdo tall */
.gb-2 { grid-column: 2; grid-row: 1; }
.gb-3 { grid-column: 3; grid-row: 1; }
.gb-4 { grid-column: 2 / 4; grid-row: 2; }   /* Ancho abajo derecha */

.gb .carousel-slide-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.gb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gb:hover img { transform: scale(1.06); }

/* Reveal con clip-path */
.gb img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gb.in-view img { clip-path: inset(0 0 0 0); }

/* Etiqueta hover */
.gb-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gb:hover .gb-label { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
  .gallery-bento { grid-template-rows: 300px 200px; }
}
@media (max-width: 768px) {
  .gallery-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
  }
  .gb-1 { grid-column: 1 / 3; grid-row: 1; } /* full width arriba en movil */
  .gb-2 { grid-column: 1; grid-row: 2; }
  .gb-3 { grid-column: 2; grid-row: 2; }
  .gb-4 { grid-column: 1 / 3; grid-row: 3; }
}