/* Galería deslizante — template-parts/components/gallery.php + modules/gallery.js
   Variantes: .gallery--card (tarjeta de espacio, 4:3) · .gallery--centro (llena .centro__media) · .gallery--hero (ficha, 16:9) */

.gallery { position: relative; height: 100%; }

.gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

.gallery__slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery__btn {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .9);
  color: var(--c-text);
  cursor: pointer;
  opacity: 0;
  translate: 0 -50%;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.gallery__btn svg { width: 1.1rem; height: 1.1rem; }
.gallery__btn--prev { left: var(--sp-2); }
.gallery__btn--next { right: var(--sp-2); }
.gallery:hover .gallery__btn,
.gallery__btn:focus-visible { opacity: 1; }
.gallery__btn:hover { background: var(--c-bg); }
@media (hover: none) { .gallery__btn { opacity: 1; } }

.gallery__count {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: .2em .6em;
  border-radius: var(--radius-pill);
  background: rgb(15 18 64 / .6);
  color: var(--c-text-inv);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.gallery--hero { height: min(52vw, 72vh); border-radius: var(--radius-md); overflow: clip; }
.gallery--hero .gallery__btn { width: 3rem; }
@media (max-width: 40rem) { .gallery--hero { height: 75vw; } }