/* ═══════════════════════════════════════════════════════════════
   LA PÁGINA DE UNA OBRA — /works/<slug>

   Dos columnas: la ficha QUIETA a la izquierda y las imágenes pasando
   a la derecha. Lo hace position:sticky, no JavaScript: el navegador
   lo resuelve solo y no se descuadra al cambiar el tamaño.

   Para que sticky funcione hacen falta dos cosas que se olvidan a
   menudo: que el padre NO tenga overflow oculto, y que la columna
   tenga altura suficiente que recorrer —de eso se encarga la columna
   de imágenes, que es más alta.
   ═══════════════════════════════════════════════════════════════ */

.pr {
  display: grid;
  grid-template-columns: minmax(300px, 34%) 1fr;
  gap: clamp(30px, 5vw, 90px);
  max-width: var(--ancho-max); margin: 0 auto;
  padding: calc(var(--nav-alto) + clamp(24px, 5vh, 70px)) var(--hd-pad) clamp(60px, 9vh, 120px);
  /* El blanco lo pone body.cuerpo-blanco, de filo a filo. Pintarlo
     aquí dejaba franjas grises a los lados del contenedor. */
}

/* ── La ficha ──────────────────────────────────────────────────── */
.pr-ficha-dentro {
  position: sticky;
  /* Bajo el header, que va fijo, más un respiro. */
  top: calc(var(--nav-alto) + clamp(20px, 4vh, 50px));
}

.pr-titulo {
  font-size: clamp(38px, 5vw, 82px); font-weight: 800;
  letter-spacing: -.04em; line-height: .95;
  text-transform: uppercase; color: #14161c;
  margin-bottom: clamp(20px, 3vh, 34px);
}

.pr-resumen {
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.65; color: #4a5160;
  max-width: 42ch;
  margin-bottom: clamp(30px, 5vh, 58px);
}

/* La ficha de datos va en <dl>: es una lista de pares término/valor, y
   decirlo en el marcado hace que un lector de pantalla los relacione
   en vez de leer ocho textos sueltos. */
.pr-datos { display: grid; gap: clamp(14px, 2vh, 22px); }
.pr-datos > div {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr;
  gap: 14px; align-items: baseline;
}
.pr-datos dt {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #8b909a;
}
.pr-datos dd {
  margin: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #14161c;
}
.pr-datos dd a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(20,22,28,.25); }
.pr-datos dd a:hover { border-bottom-color: currentColor; }

/* ── Las imágenes ──────────────────────────────────────────────── */
.pr-medios { display: grid; gap: clamp(14px, 2vw, 30px); }
.pr-media { margin: 0; border-radius: clamp(10px, 1vw, 18px); overflow: hidden; background: #ececed; }
.pr-media img { display: block; width: 100%; height: auto; }

/* ── Anterior y siguiente ──────────────────────────────────────────
   Flotan sobre las imágenes y no se pierden mientras dure la obra.

   Es sticky y no fixed a propósito. Con fixed seguirían pegados a la
   ventana también sobre el footer, tapándolo. Con sticky se quedan
   abajo mientras la columna de imágenes está a la vista y se van con
   ella al llegar al final, que es justo cuando ya no hacen falta.

   El margen negativo los saca del flujo hacia arriba para que floten
   SOBRE la última imagen en vez de ocupar una fila propia debajo. */
.pr-vecinas {
  position: sticky;
  bottom: clamp(18px, 3vh, 34px);
  z-index: 5;
  /* align-items: center es IMPRESCINDIBLE. Un flex sin alinear usa
     'stretch': los botones se estiraban hasta el alto de la fila del
     grid —el de la última imagen— y salían enormes, con el radio de
     99px deformado en dos óvalos. */
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-top: calc(-48px - clamp(14px, 2vw, 30px));
  /* El hueco entre los dos botones deja pasar el puntero a la imagen
     de debajo; cada botón lo recupera para sí. */
  pointer-events: none;
}

.pr-vecina {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px;                 /* fijo: es lo que impide que se estiren */
  padding: 0 22px;
  border-radius: 99px;
  background: rgba(30, 34, 42, .88);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  transition: background .3s ease,
              transform .4s cubic-bezier(.16,1,.3,1),
              padding .4s cubic-bezier(.16,1,.3,1);
}
.pr-vecina:hover {
  background: #14161c;
  transform: translateY(-3px);
}

/* La flecha nace encogida contra el texto y se abre al acercarse: el
   botón se ensancha en la dirección a la que lleva. Es el mismo gesto
   que las flechas del hero y del carrusel, para que el sitio hable con
   una sola voz. */
.pr-flecha {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.pr-vecina:hover .pr-flecha { opacity: 1; }
/* Cada una sale por su lado: la de Previous hacia la izquierda y la de
   Next hacia la derecha. Se distinguen por dónde están dentro del
   enlace, sin necesidad de una clase más. */
.pr-vecina:hover .pr-flecha:first-child { transform: translateX(-4px); }
.pr-vecina:hover .pr-flecha:last-child  { transform: translateX(4px); }
@media (max-width: 860px) {
  .pr { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 44px); }
  /* Sin dos columnas, sticky sobra: la ficha pasa a ser la cabecera. */
  .pr-ficha-dentro { position: static; }
  .pr-resumen { max-width: 60ch; margin-bottom: clamp(22px, 3vh, 34px); }
}
@media (max-width: 520px) {
  .pr-vecina { height: 44px; padding: 0 16px; font-size: 13.5px; }
}

/* Quien pidió menos movimiento no recibe ni el salto del botón ni el
   desplazamiento de la flecha. */
@media (prefers-reduced-motion: reduce) {
  .pr-vecina:hover { transform: none; }
  .pr-vecina:hover .pr-flecha { transform: none; }
}

/* ── El vídeo de la obra ───────────────────────────────────────────
   Mismo marco que una imagen —.pr-media le da el redondeo, el recorte y
   el fondo—, así que aquí solo hay que hacer que el <video> se comporte
   como el <img> de al lado: ancho completo y alto natural.

   El fondo NEGRO y no el gris de .pr-media: mientras el vídeo carga, y
   en las franjas que deja si su proporción no coincide con la del
   poster, el gris claro se ve como un error. En negro parece parte del
   reproductor. */
.pr-media.pr-video { background: #000; }

.pr-video video {
  display: block;
  width: 100%;
  height: auto;
}