/* ==========================================================================
   05 · MÁS ALLÁ DEL DISEÑO — exposición sobre un eje horizontal
   Las fotos (mismo tamaño) desfilan de lado ensartadas en una línea.
   ========================================================================== */
.beyond {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.beyond ::selection { background: #fff; color: var(--ink); }
.beyond .kicker { color: var(--halo); }
.beyond__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-3);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.beyond__head .kicker { grid-column: 1 / -1; }
.beyond__title { font-size: clamp(2.2rem, 1rem + 4.4vw, 5.6rem); font-weight: 800; letter-spacing: var(--track-display); line-height: 0.94; }
.beyond__text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); line-height: 1.15; color: rgb(255 255 255 / 0.78); }

.exhibit {
  --w: clamp(220px, 21vw, 330px);          /* ancho de cada foto */
  --gap: clamp(2rem, 4.5vw, 4.5rem);       /* espacio entre fotos */
  position: relative;
  margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.exhibit.is-dragging { cursor: grabbing; }
/* el eje: cruza a media altura de las fotos y se ve en los huecos */
.exhibit__axis {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--w) * 0.625);
  height: 1px;
  background: rgb(255 255 255 / 0.55);
  pointer-events: none;
}
.exhibit__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}
.exhibit__item { position: relative; flex: none; width: var(--w); }
/* nodo sobre el eje, en mitad del hueco que sigue a cada foto */
.exhibit__item::after {
  content: "";
  position: absolute;
  left: calc(100% + var(--gap) / 2);
  top: calc(var(--w) * 0.625);
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.12);
}
.exhibit__item figure { display: grid; gap: 0.9rem; }
.exhibit__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / 0.8);
}
.exhibit__item figcaption { display: grid; gap: 0.15rem; }
.exhibit__item figcaption b { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.exhibit__item figcaption span { font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }

@media (max-width: 699px) {
  .beyond__head { grid-template-columns: 1fr; }
  .exhibit { --w: 62vw; --gap: 1.75rem; }
}
.exhibit:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* menos espacio negro antes del título */
.beyond { padding-top: clamp(3rem, 6vw, 5rem); }