:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #fff; color: #6c6c6c; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #fff; overscroll-behavior: none; }
a { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.exhibition {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.exhibition-extended { overflow: hidden; background: #f2f2f2; }
.exhibition-extended .frame { overflow: visible; }
/* AI room extensions sit behind the untouched original composition. */
.room-extension {
  position: absolute; z-index: -1; pointer-events: none;
  left: -100%; top: -111.615%; width: 300%; height: 300%;
  background-size: 100% 100%; background-repeat: no-repeat;
}
body[data-page="autor"] .room-extension { top: -119.326%; }
.exhibition-extended .composition {
  /* Blend only the empty outermost wall/floor, never the artwork or figure. */
  mask-image: linear-gradient(to right, transparent, #000 .65%, #000 99.35%, transparent), linear-gradient(to bottom, transparent, #000 .65%, #000 99.35%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 .65%, #000 99.35%, transparent), linear-gradient(to bottom, transparent, #000 .65%, #000 99.35%, transparent);
  -webkit-mask-composite: source-in;
}
.frame {
  position: relative; width: 100%;
  max-width: calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--view-width) / var(--view-height));
  max-width: calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--view-width) / var(--view-height));
  aspect-ratio: var(--view-width) / var(--view-height);
  overflow: hidden; isolation: isolate;
}
.stage {
  position: absolute;
  left: calc(-100% * var(--view-x) / var(--view-width));
  top: calc(-100% * var(--view-y) / var(--view-height));
  width: calc(100% * 2048 / var(--view-width));
  height: calc(100% * 1152 / var(--view-height));
}
.stage picture, .composition { display: block; width: 100%; height: 100%; }
.composition { object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hotspot {
  position: absolute; inset: 0; z-index: 1; display: block;
  background: transparent; clip-path: var(--shape); -webkit-clip-path: var(--shape); outline: none;
}
.focus-shape { width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.focus-shape polygon { fill: none; stroke: #686868; stroke-width: 2; vector-effect: non-scaling-stroke; }
.touch-shape { display: none; }
.hotspot:focus-visible .focus-shape { opacity: 1; }
.back {
  position: absolute; top: max(8px, env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px));
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 0; text-decoration: none; color: #777; outline: none;
}
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; }
.back:focus-visible { outline: 1px solid #777; outline-offset: -7px; }
.fullscreen-toggle {
  position: fixed; right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 22;
  width: 44px; height: 44px; padding: 13px; border: 0;
  background: transparent; color: #777; touch-action: manipulation;
}
.fullscreen-toggle[hidden] { display: none; }
.fullscreen-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1; }
.fullscreen-toggle:focus-visible { outline: 1px solid #777; outline-offset: -7px; }
.orientation-active .fullscreen-toggle { display: none; }
.orientation {
  position: fixed; inset: 0; z-index: 20; width: 100%; height: 100vh; height: 100dvh;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 28px; background: #fff; outline: none;
}
.rotate-icon { width: 48px; height: 48px; stroke: #929292; stroke-width: 1; }
.orientation p:not(.sr-only) { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: .2em; }
.orientation-active .orientation { display: flex; }
.orientation-active .exhibition { visibility: hidden; }
body[data-page="portada"] .orientation, body[data-page="autor"] .orientation { background: #f2f2f2; }
/* CSS fallback also handles portrait before JavaScript loads. */
@media (any-pointer: coarse) and (orientation: portrait) {
  .orientation { display: flex; }
  .exhibition { visibility: hidden; }
}
@media (any-pointer: coarse) {
  .hotspot { clip-path: var(--touch-shape); -webkit-clip-path: var(--touch-shape); }
  .mouse-shape { display: none; }
  .touch-shape { display: block; }
}
.cross-cursor {
  --cross-size: 13px; --cross-weight: 1px;
  position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 100;
  pointer-events: none; visibility: hidden; will-change: transform;
  /* A fine neutral shadow makes white lines discernible on the white wall. */
  filter: drop-shadow(0 0 .7px rgb(0 0 0 / .7));
}
.cross-cursor::before, .cross-cursor::after {
  content: ''; position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%); background: #fff;
  transition: width 100ms ease, height 100ms ease;
}
.cross-cursor::before { width: var(--cross-size); height: var(--cross-weight); }
.cross-cursor::after { width: var(--cross-weight); height: var(--cross-size); }
.cross-cursor.is-interactive { --cross-size: 16px; --cross-weight: 2px; }
@media (hover: hover) and (pointer: fine) {
  .custom-cursor, .custom-cursor * { cursor: none !important; }
  .custom-cursor .cross-cursor { visibility: visible; }
}
.page-fade { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; transition: opacity 100ms ease; }
.is-leaving .page-fade { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .cross-cursor::before, .cross-cursor::after, .page-fade { transition: none; }
}
@media (forced-colors: active) {
  .focus-shape polygon { stroke: Highlight; }
  .back, .rotate-icon { color: CanvasText; stroke: CanvasText; }
}