/* ==========================================================================
   Sala de la ficha
   La portada de cada obra es una sala de museo en 3D (artwork-stage.js): la
   obra cuelga a su tamaño real, con cotas y una figura humana de 170 cm. El
   texto se superpone a la escena; sin WebGL queda la imagen enmarcada. Al
   acercarse, la superficie plana de la obra sustituye a la pintura iluminada.
   ========================================================================== */

.artwork-stage {
  --stage-gold: #f3cf7a;
  --stage-gold-rgb: 243 207 122;
  --stage-gutter: max(1.5rem, calc((100vw - 1520px) / 2));
  --stage-bottom: clamp(1.6rem, 5.5vh, 3.6rem);
  --stage-art: rgb(var(--art-rgb, var(--accent-rgb)));
  position: relative;
  isolation: isolate;
  height: calc(100svh - var(--header-height));
  min-height: 560px;
  max-height: 1240px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(56% 52% at 50% 40%, rgb(var(--art-rgb, var(--accent-rgb)) / .14), transparent 72%),
    #07080d;
  scroll-margin-top: var(--header-height);
}

.artwork-stage-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  transition: opacity 1.1s ease;
}
.artwork-stage.is-ready .artwork-stage-canvas { opacity: 1; }
.artwork-stage.is-dragging .artwork-stage-canvas { cursor: grabbing; }
.artwork-stage-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

/* Imagen enmarcada mientras se monta la sala (y alternativa sin WebGL). */
.artwork-stage-poster {
  position: absolute;
  z-index: 0;
  inset: 9% 12% 30%;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity .9s ease, filter 1.2s ease, transform 1.6s var(--ease-out);
}
.artwork-stage-poster img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #15110d;
  box-shadow:
    0 0 0 8px #2b1f13,
    0 0 0 10px #a98444,
    0 0 0 14px #2b1f13,
    0 50px 90px -30px rgb(0 0 0 / .9),
    0 0 140px 10px rgb(var(--art-rgb, var(--accent-rgb)) / .18);
}
.js .artwork-stage.is-loading .artwork-stage-poster { opacity: .22; filter: blur(1px) brightness(.45); transform: scale(.96); }
.artwork-stage.is-ready .artwork-stage-poster { opacity: 0; transform: scale(.9); }
.artwork-stage.is-fallback .artwork-stage-poster { opacity: 1; filter: none; transform: none; }
.artwork-stage.is-fallback .artwork-stage-canvas { display: none; }
.artwork-stage.is-fallback .artwork-stage-poster { pointer-events: auto; cursor: zoom-in; }

/* Velo de carga */
.artwork-stage-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.artwork-stage-veil span {
  display: grid;
  justify-items: center;
  gap: .9rem;
  color: rgb(var(--ink-rgb) / .72);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-style: italic;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .5s ease;
}
.artwork-stage-veil span::after {
  content: "";
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-gold), transparent);
  background-size: 200% 100%;
  animation: stage-sweep 1.6s ease-in-out infinite;
}
.artwork-stage.is-loading .artwork-stage-veil span:not(:empty) { opacity: 1; }
@keyframes stage-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Velos para que el texto se lea sobre la escena. */
.artwork-stage-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(5 6 11 / .92) 0%, rgb(5 6 11 / .62) 16%, rgb(5 6 11 / 0) 42%),
    linear-gradient(to bottom, rgb(5 6 11 / .55) 0%, rgb(5 6 11 / 0) 16%),
    radial-gradient(70% 90% at 0% 100%, rgb(5 6 11 / .55), transparent 70%);
}

/* Cotas proyectadas desde la escena */
.artwork-stage-measures {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.artwork-stage.is-introduced .artwork-stage-measures { opacity: 1; }
.artwork-stage-measures svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage-measure-line, .stage-measure-tick, .stage-measure-guide { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stage-measure-line { stroke: var(--stage-gold); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgb(var(--stage-gold-rgb) / .55)); }
.stage-measure-tick { stroke: var(--stage-gold); stroke-width: 1.3; opacity: 0; }
.stage-measure-guide { stroke: rgb(var(--stage-gold-rgb) / .38); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; }
.artwork-stage.is-introduced .stage-measure-line { animation: stage-draw 1.1s var(--ease-out) var(--delay, 0s) forwards; }
.artwork-stage.is-introduced .stage-measure-tick,
.artwork-stage.is-introduced .stage-measure-guide { animation: stage-fade .6s ease var(--delay, 0s) forwards; }
.stage-measure.is-hidden, .stage-measure-label.is-hidden { visibility: hidden; }
.stage-measure-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: .32rem .62rem;
  color: #f8ecd0;
  border: 1px solid rgb(var(--stage-gold-rgb) / .55);
  border-radius: 999px;
  background: rgb(7 8 13 / .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / .9);
  font: 650 .7rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
}
.artwork-stage.is-introduced .stage-measure-label { animation: stage-fade .5s ease var(--delay, 0s) forwards; }
.stage-measure-label-figure { color: rgb(var(--ink-rgb) / .8); border-color: rgb(var(--ink-rgb) / .22); }
@keyframes stage-draw { to { stroke-dashoffset: 0; } }
@keyframes stage-fade { to { opacity: 1; } }

/* Superficie: la obra plana, sin la luz de la sala, encajada sobre el lienzo.
   Al entrar la imagen se adelanta al fondo y al salir se retira después, para
   que el cuadro no pase por un instante apagado. */
.artwork-stage-surface {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .7s;
}
.artwork-stage-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 62% at 50% 46%, rgb(var(--art-rgb, var(--accent-rgb)) / .07), transparent 74%),
    #06070b;
  opacity: 0;
  transition: opacity .55s ease;
}
.artwork-stage-surface-viewer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease .12s;
}
.artwork-stage.is-surface .artwork-stage-surface { visibility: visible; transition: none; }
.artwork-stage.is-surface:not(.is-surface-leaving) .artwork-stage-surface { pointer-events: auto; }
.artwork-stage.is-surface .artwork-stage-surface::before { opacity: 1; transition: opacity .7s ease; }
.artwork-stage.is-surface .artwork-stage-surface-viewer { opacity: 1; transition: opacity .45s ease; }
.artwork-stage-surface-viewer .openseadragon-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.artwork-stage-surface .navigator {
  margin: 0 0 var(--stage-bottom) var(--stage-gutter) !important;
  border: 1px solid rgb(var(--tint-rgb) / .18) !important;
  border-radius: .55rem;
  background: rgb(7 8 13 / .72) !important;
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / .95);
  overflow: hidden;
}
.artwork-stage-surface .navigator .displayregion { border: 1.5px solid var(--stage-gold) !important; border-radius: 2px; }
.artwork-stage-surface-strip {
  position: absolute;
  z-index: 1;
  bottom: var(--stage-bottom);
  left: 50%;
  display: flex;
  gap: .35rem;
  max-width: calc(100% - 2 * var(--stage-gutter));
  padding: .3rem;
  overflow-x: auto;
  border: 1px solid rgb(var(--tint-rgb) / .14);
  border-radius: .7rem;
  background: rgb(7 8 13 / .58);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translateX(-50%);
}
.artwork-stage-surface-strip .image-thumb { width: 46px; height: 46px; border-radius: .45rem; }
@media (prefers-reduced-motion: reduce) {
  .artwork-stage-surface, .artwork-stage-surface::before, .artwork-stage-surface-viewer { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Barra superior */
.artwork-stage-top {
  position: absolute;
  z-index: 3;
  top: 1.15rem;
  right: var(--stage-gutter);
  left: var(--stage-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}
.artwork-stage-top > * { pointer-events: auto; }
.artwork-stage-top .back-link { margin: 0; color: rgb(var(--ink-rgb) / .74); text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
.artwork-stage-top .back-link:hover { color: var(--ink); }

.artwork-stage-hint {
  position: absolute;
  z-index: 3;
  top: 1.35rem;
  left: 50%;
  max-width: calc(100% - 16rem);
  margin: 0;
  color: rgb(var(--ink-rgb) / .62);
  font-size: .72rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .8s ease, transform .8s var(--ease-out);
  pointer-events: none;
}
.artwork-stage.is-introduced .artwork-stage-hint,
.artwork-stage.is-surface .artwork-stage-hint { opacity: 1; transform: translate(-50%, 0); }
.artwork-stage .artwork-stage-hint.is-dismissed { opacity: 0; transform: translate(-50%, -6px); }
.hint-coarse { display: none; }
@media (pointer: coarse) {
  .hint-fine { display: none; }
  .hint-coarse { display: inline; }
}
.artwork-stage:not(.is-surface) .hint-surface,
.artwork-stage.is-surface .artwork-stage-hint > :not(.hint-surface) { display: none; }

/* Cartela superpuesta */
.artwork-stage-caption {
  position: absolute;
  z-index: 3;
  bottom: var(--stage-bottom);
  left: var(--stage-gutter);
  max-width: min(46rem, 48%);
  pointer-events: none;
}
.artwork-stage-caption .eyebrow { margin-bottom: .85rem; text-shadow: 0 1px 14px rgb(0 0 0 / .8); }
.artwork-stage-caption h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.4vw, 6.2rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow: 0 4px 40px rgb(0 0 0 / .65);
}
.artwork-stage-caption .detail-subtitle { margin-top: 1rem; color: rgb(var(--ink-rgb) / .78); }
.artwork-stage-caption .detail-subtitle span:not(:first-child)::before { content: "·"; margin-right: .7rem; color: var(--faint); }
.artwork-stage-size {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  margin: 1.15rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgb(var(--stage-gold-rgb) / .4);
}
.artwork-stage-size span { color: rgb(var(--stage-gold-rgb) / .85); font-size: .62rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.artwork-stage-size strong { color: var(--ink); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* La cartela entra después de que se enciendan las luces. */
.js .artwork-stage-caption > * { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.2s var(--ease-out); }
.js .artwork-stage.is-ready .artwork-stage-caption > *,
.js .artwork-stage.is-fallback .artwork-stage-caption > * { opacity: 1; transform: none; }
.js .artwork-stage.is-ready .artwork-stage-caption > :nth-child(1) { transition-delay: 1.5s; }
.js .artwork-stage.is-ready .artwork-stage-caption > :nth-child(2) { transition-delay: 1.65s; }
.js .artwork-stage.is-ready .artwork-stage-caption > :nth-child(3) { transition-delay: 1.85s; }
.js .artwork-stage.is-ready .artwork-stage-caption > :nth-child(4) { transition-delay: 2.05s; }
/* Si el módulo no llega a arrancar, la cartela aparece igualmente. */
.js .artwork-stage:not(.is-ready, .is-fallback, .is-loading) .artwork-stage-caption > * { animation: stage-reveal .8s ease 5s forwards; }
@keyframes stage-reveal { to { opacity: 1; transform: none; } }

/* Controles */
.artwork-stage-dock {
  position: absolute;
  z-index: 3;
  right: var(--stage-gutter);
  bottom: var(--stage-bottom);
  display: flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid rgb(var(--tint-rgb) / .14);
  border-radius: 999px;
  background: rgb(7 8 13 / .58);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / .95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .9s var(--ease-out), visibility 0s linear .8s;
}
.artwork-stage.is-ready .artwork-stage-dock { opacity: 1; visibility: visible; transform: none; transition-delay: 2.3s, 2.3s, 0s; }
.artwork-stage.is-fallback .artwork-stage-dock { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.artwork-stage-dock button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem .5rem .75rem;
  color: rgb(var(--ink-rgb) / .62);
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .01em;
  transition: color .25s ease, background .25s ease;
}
.artwork-stage-dock button[hidden] { display: none; }
.artwork-stage-dock button:hover { color: var(--ink); background: rgb(var(--tint-rgb) / .08); }
.artwork-stage-dock button[aria-pressed="true"] { color: var(--ink); background: rgb(var(--stage-gold-rgb) / .14); box-shadow: inset 0 0 0 1px rgb(var(--stage-gold-rgb) / .3); }
.artwork-stage-dock button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.artwork-stage-dock svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.artwork-stage-dock button[aria-pressed="true"] svg { stroke: var(--stage-gold); }
.artwork-stage-dock [data-stage-toggle="figure"] circle { fill: currentColor; stroke: none; }
.artwork-stage-dock [data-stage-toggle="figure"][aria-pressed="true"] circle { fill: var(--stage-gold); }
.artwork-stage-dock .artwork-stage-dock-icon { padding-inline: .7rem; }
/* Ante la superficie, el dock cambia la figura y las cotas por el zoom. */
.artwork-stage-dock [data-surface-zoom] { display: none; }
.artwork-stage.is-surface .artwork-stage-dock [data-surface-zoom] { display: inline-flex; }
.artwork-stage.is-surface .artwork-stage-dock [data-stage-toggle],
.artwork-stage.is-fallback .artwork-stage-dock [data-stage-toggle] { display: none; }

/* Invitación a bajar al visor */
.artwork-stage-scroll {
  position: absolute;
  z-index: 3;
  bottom: .9rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .45rem;
  color: rgb(var(--ink-rgb) / .55);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: color .25s ease;
}
.artwork-stage-scroll:hover { color: var(--ink); }
.artwork-stage-scroll i { width: 1px; height: 26px; overflow: hidden; background: rgb(var(--ink-rgb) / .16); }
.artwork-stage-scroll i::after { content: ""; display: block; width: 1px; height: 12px; background: var(--stage-gold); animation: stage-drip 2.2s var(--ease-out) infinite; }
@keyframes stage-drip { from { transform: translateY(-12px); } to { transform: translateY(26px); } }

/* En primer plano, la cartela y las cotas se retiran para dejar la obra sola. */
.artwork-stage-caption, .artwork-stage-scrim { transition: opacity .6s ease; }
.artwork-stage-scroll { transition: opacity .6s ease, color .25s ease; }
.artwork-stage.is-close .artwork-stage-caption,
.artwork-stage.is-close .artwork-stage-scroll,
.artwork-stage.is-close .artwork-stage-measures,
.artwork-stage.is-surface .artwork-stage-caption,
.artwork-stage.is-surface .artwork-stage-scroll { opacity: 0; }
.artwork-stage.is-surface .artwork-stage-scroll { pointer-events: none; }
.artwork-stage.is-close .artwork-stage-scrim { opacity: .35; }

/* Pantalla completa */
.artwork-stage:fullscreen { height: 100vh; max-height: none; }
.artwork-stage.is-fullscreen { height: 100vh; max-height: none; }
.artwork-stage.is-fullscreen .artwork-stage-scroll,
.artwork-stage.is-fullscreen .artwork-stage-top .back-link { display: none; }

/* Ficha bajo la sala */
.detail-ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 3rem;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  scroll-margin-top: var(--header-height);
}
.detail-ficha-facts { display: flex; flex-wrap: wrap; gap: 1.2rem clamp(1.8rem, 3.4vw, 3.4rem); margin: 0; }
.detail-ficha-facts div { display: grid; gap: .45rem; }
.detail-ficha-facts dt { color: var(--faint); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.detail-ficha-facts dd { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ink); font-size: .92rem; font-variant-numeric: tabular-nums; }
.detail-ficha-download { flex: none; gap: .5rem; }
.detail-page--stage { background: none; }
.detail-page--stage .story-section { padding-top: 3.5rem; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .artwork-stage-scroll { display: none; }
  .artwork-stage-caption { max-width: min(40rem, 56%); }
}

@media (max-width: 820px) {
  .artwork-stage { --stage-gutter: .9rem; --stage-bottom: 5.2rem; height: calc(100svh - var(--header-height)); min-height: 540px; }
  .artwork-stage-poster { inset: 12% 8% 40%; }
  .artwork-stage-caption { right: var(--stage-gutter); bottom: 5.4rem; max-width: none; }
  .artwork-stage-caption h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .artwork-stage-caption .detail-subtitle { margin-top: .7rem; font-size: .88rem; }
  .artwork-stage-size { margin-top: .8rem; padding-top: .7rem; }
  .artwork-stage-dock { right: 50%; bottom: 1.1rem; transform: translate(50%, 12px); }
  .artwork-stage.is-ready .artwork-stage-dock,
  .artwork-stage.is-fallback .artwork-stage-dock { transform: translate(50%, 0); }
  .artwork-stage-dock button { padding: .55rem .8rem; }
  .artwork-stage-dock button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .artwork-stage-hint { top: 3.7rem; max-width: calc(100% - 2rem); white-space: normal; }
  .artwork-stage-scrim {
    background:
      linear-gradient(to top, rgb(5 6 11 / .95) 0%, rgb(5 6 11 / .7) 30%, rgb(5 6 11 / 0) 52%),
      linear-gradient(to bottom, rgb(5 6 11 / .6) 0%, rgb(5 6 11 / 0) 14%);
  }
  .detail-ficha { padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .detail-ficha-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 1.1rem 1.4rem; }
  .detail-ficha-download { width: 100%; justify-content: center; }
}