/* ===== Galerías de amenities y apartamentos — "Cortina" (elegida por Noelia 2026-10-01)
   One large image at a time. The incoming slide is revealed by a clip-path wipe
   and settles with a slight zoom-out. Name of the space below, short dashes as
   the position indicator (no counter). Autoplay; click right/left half or drag
   to change. Behaviour lives in js/gallery.js. ===== */
.gallery {
  position: relative;
  margin-top: 4.5rem;
  /* Breaks out of the wrap and centres on the viewport (same width as before). */
  width: min(94vw, 1500px);
  max-width: none;
  margin-left: calc(50% - min(47vw, 750px));
  outline: none;
}
.gallery-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: calc(100vh - var(--header-h) - 5rem); /* image + caption fit below the header */
  width: 100%;
  background: rgba(0, 0, 0, .08);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
/* Arrow cursors hint which half moves forward or back. Colours are baked into the
   data URI (CSS variables can't reach inside it): white disc + Verde Mar #485956. */
.gallery-stage.go-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23ffffff' fill-opacity='.88'/%3E%3Cpath d='M12 22h19M25 16l6 6-6 6' fill='none' stroke='%23485956' stroke-width='1.3'/%3E%3C/svg%3E") 22 22, e-resize;
}
.gallery-stage.go-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23ffffff' fill-opacity='.88'/%3E%3Cpath d='M32 22H13M19 16l-6 6 6 6' fill='none' stroke='%23485956' stroke-width='1.3'/%3E%3C/svg%3E") 22 22, w-resize;
}
.gallery-stage.is-dragging { cursor: grabbing; }

.gallery-slide { position: absolute; top:0; right:0; bottom:0; left:0; margin: 0; z-index: 0; clip-path: inset(0 0 0 100%); }
.gallery[data-dir="prev"] .gallery-slide { clip-path: inset(0 100% 0 0); }
.gallery-slide.is-prev { z-index: 1; clip-path: inset(0 0 0 0); }
.gallery-slide.is-active {
  z-index: 2; clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1);
}
.gallery-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.08);
  pointer-events: none; -webkit-user-drag: none;
}
.gallery-slide.is-prev img { transform: scale(1); }
/* Images that must be seen whole (e.g. the amenities plan): no crop, no zoom */
.gallery-slide.is-contain img { object-fit: contain; transform: none !important; }
.gallery-slide.is-active img { transform: scale(1); transition: transform 2.4s cubic-bezier(.2, .6, .2, 1); }

/* Foot: caption on the left, dashes on the right. Every slide carries its own
   caption line (so i18n.js translates it); only the active one is shown. */
.gallery-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 1.5rem; margin-top: 1.1rem;
}
.gallery-captions { position: relative; flex: 1; min-width: 0; min-height: 1.2em; }
.gallery-captions p {
  margin: 0;
  position: absolute; left: 0; top: 0;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(5px);
  transition: opacity .5s ease, transform .5s ease;
}
.gallery-captions p.is-active { opacity: 1; transform: none; transition-delay: .35s; }

.gallery-dashes { display: flex; gap: 6px; flex: 0 0 auto; }
.gallery-dashes span {
  position: relative; width: 18px; height: 2px; overflow: hidden;
  background: currentColor; opacity: .3;
  transition: width .6s ease, opacity .6s ease;
}
.gallery-dashes span.is-active { width: 36px; opacity: 1; background: transparent; }
.gallery-dashes span.is-active::before {
  content: ""; position: absolute; top:0; right:0; bottom:0; left:0; background: currentColor; opacity: .3;
}
.gallery-dashes span.is-active i {
  position: absolute; top:0; right:0; bottom:0; left:0; background: currentColor;
  transform-origin: left; transform: scaleX(var(--p, 0));
}

.gallery:focus-visible .gallery-stage { outline: 2px solid var(--color-acento); outline-offset: 4px; }

/* Browsers without aspect-ratio (older Chromium, e.g. on the Samsung Flip): reserve the
   height with the padding trick, otherwise the stage collapses to 0 (all slides are absolute). */
@supports not (aspect-ratio: 1 / 1) {
  .gallery-stage { height: 0; padding-top: 66.667%; }
}
@media (max-width: 860px) {
  .gallery { margin-top: 3rem; }
  .gallery-stage { aspect-ratio: 4 / 3; }
  /* Long names wrap to two lines next to the dashes: reserve the room. */
  .gallery-foot { align-items: flex-start; }
  .gallery-captions { min-height: 2.8em; }
  .gallery-captions p { line-height: 1.4; }
  .gallery-dashes { padding-top: .45em; }
  .gallery-dashes { gap: 4px; }
  .gallery-dashes span { width: 10px; }
  .gallery-dashes span.is-active { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-slide.is-active, .gallery-slide.is-active img,
  .gallery-captions p { transition: none !important; }
  .gallery-slide img { transform: none; }
  .gallery-dashes span.is-active i { transform: scaleX(1); }
}