/* PAINTINGS · usa también las clases del INDEX (.ix, .ix-escena, .ix-ui, .ix-menu). */

.pt .ix-slide {
  pointer-events: none;
}

/* Miniaturas de la tira: se pueden apretar. */
.pt .pt-mini {
  pointer-events: auto;
  cursor: pointer;
}

/* --- Mobile: lista vertical (frame PAINTINGS (MOBILE ORIGINAL), 1080 px = ancho de pantalla) --- */
.pt-lista {
  display: none;
}

.pt--mobile .pt-escena {
  display: none;
}

.pt--mobile {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pt--mobile .pt-lista {
  display: block;
  padding: calc(295px * var(--s)) calc(39px * var(--s)) calc(148px * var(--s));
}

.pt-item {
  margin: 0 0 calc(148px * var(--s));
}

.pt-item img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/* PROPUESTA DE CLAUDE, SIN CONFIRMAR: cuadros verticales a 612 px de ancho, centrados
   (en el Figma el vertical está a 199 px del borde). */
.pt-item--v img {
  width: calc(612px * var(--s));
}

.pt-pie {
  display: flex;
  justify-content: space-between;
  gap: calc(20px * var(--s));
  margin-top: calc(35px * var(--s));
  min-height: calc(24px * var(--s));
  font: 400 calc(20px * var(--s)) / 1.211 "Times New Roman", Times, serif;
  color: #2c2c2c;
}

.pt-pie-ficha {
  text-align: right;
}

/* El menú queda fijo arriba mientras se scrollea. */
.pt--mobile .pt-ui {
  position: fixed;
}

/* --- Cuadro abierto ------------------------------------------------------------------ */
.pt-abierto {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0);
  cursor: default;
}

.pt-abierto.is-on {
  background: #fff;
  transition: background-color var(--abrir, 500ms) ease-out;
}

.pt-abierto.is-cerrando {
  opacity: 0;
  transition: opacity var(--cerrar, 300ms) ease-out;
}

.pt-grande {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

/* Crece desde la miniatura hasta su lugar (el recorte de la miniatura se abre solo). */
.pt-grande.is-creciendo {
  transition: left var(--abrir, 500ms) cubic-bezier(0.2, 0.7, 0.2, 1), top var(--abrir, 500ms) cubic-bezier(0.2, 0.7, 0.2, 1),
    width var(--abrir, 500ms) cubic-bezier(0.2, 0.7, 0.2, 1), height var(--abrir, 500ms) cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Fundido cruzado al pasar de cuadro. */
.pt-grande.is-entrando {
  animation: pt-in var(--fundido, 300ms) ease-out both;
}

@keyframes pt-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* El menú queda por encima del cuadro abierto. */
.pt .pt-ui {
  z-index: 2;
}

/* PROPUESTA DE CLAUDE, SIN CONFIRMAR: con el cuadro abierto, "close" va arriba a la derecha
   en lugar de NEWSLETTER e INFO. */
.pt--abierto .ix-menu--der {
  visibility: hidden;
}

.pt-close {
  position: absolute;
  right: calc(32px * var(--s));
  top: calc(24px * var(--s));
  font-size: calc(12.4px * var(--s));
}

.ix--mobile .pt-close {
  right: calc(41px * var(--s));
  top: calc(54px * var(--s));
  font-size: calc(32px * var(--s));
}

/* Hover de los cuadros: se achican apenas, como la tarjeta del búho de la PDC.
   PROPUESTA DE CLAUDE, SIN CONFIRMAR: al 95 % en 150 ms, ease-out (mismos valores que el búho). */
.pt-mini .ix-fill,
.pt-lista img.pt-mini {
  transform-origin: 50% 50%;
  transition: scale 150ms ease-out;
}

@media (hover: hover) {
  .pt-mini:hover .ix-fill,
  .pt-lista img.pt-mini:hover {
    scale: 0.95;
  }
}

/* --- Nombres y cuadros que llevan a su diapositiva (SEPPA, 27/10) --------------------- */
.pt .pt-link {
  pointer-events: auto;
  cursor: pointer;
}

/* Las diapositivas no reciben clicks: navegan las mitades de la pantalla (como el INDEX). */
.pt--diapo .ix-slide * {
  pointer-events: none;
}

.pt--diapo .ix-slide .ix-barra,
.pt--diapo .ix-slide .ix-barra * {
  pointer-events: auto;
}

/* Mobile: dentro de una diapositiva se ve la diapositiva de desktop entera (como el INDEX). */
.pt--mobile.pt--diapo {
  overflow: hidden;
}

.pt--mobile.pt--diapo .pt-escena {
  display: block;
}

.pt--mobile.pt--diapo .pt-lista {
  display: none;
}