html, body { height: 100%; overflow: hidden; }
body { background: radial-gradient(90% 80% at 60% 45%, color-mix(in oklab, var(--ink) 80%, var(--glow) 20%), var(--ink) 70%); }

:root { --stage-left: min(400px, 30vw); }
three-d-stage {
  position: fixed;
  inset: 0 0 0 var(--stage-left);
  width: auto;
  z-index: 2;
  --stage-bg: transparent;
  --stage-note: var(--paper-dim);
  --stage-btn-line: var(--paper-faint);
  --stage-btn-bg: rgba(0, 0, 0, 0.18);
  --stage-btn-ink: var(--paper);
  --stage-btn-hover: var(--glow);
}
three-d-stage:not(:defined) { visibility: hidden; }

.pieza-rosette {
  position: fixed;
  z-index: 1;
  left: calc((100vw + var(--stage-left)) / 2);
  top: 50%;
  width: min(118vh, 118vw);
  height: min(118vh, 118vw);
  transform: translate(-50%, -50%);
  --draw: 0;
  animation: dibujar 2.8s cubic-bezier(0.45, 0, 0.2, 1) 0.15s forwards;
}
@property --draw { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes dibujar { to { --draw: 1; } }
.listo .pieza-rosette { opacity: 0.85; transition: opacity 1.2s; }

.pieza-top {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px clamp(16px, 4vw, 48px);
}
.volver { font-size: 14px; text-decoration: none; opacity: 0.8; font-variation-settings: 'wdth' 108; }
.volver:hover { opacity: 1; }

.pieza-info {
  position: fixed;
  z-index: 5;
  left: clamp(16px, 4vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 30vw);
  pointer-events: none;
  animation: llegar 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.pieza-info a { pointer-events: auto; }
.vt .pieza-info { animation: none; }
@keyframes llegar { from { opacity: 0; transform: translateY(calc(-50% + 24px)); } }
.pieza-info h1 { margin: 0 0 22px; font-weight: 400; }
.pieza-info .numeral {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(96px, 13vw, 210px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin-left: -0.04em;
  color: transparent;
  background: repeating-linear-gradient(180deg, var(--paper) 0 1.4px, transparent 1.4px 3px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(239, 233, 218, 0.55);
}
.pieza-info .numeral.long { font-size: clamp(48px, 6vw, 88px); }
.pieza-info .unit { display: block; margin-top: 4px; font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; color: var(--glow); }
.pieza-info .title { display: block; margin-top: 16px; font-size: 17px; font-weight: 500; font-variation-settings: 'wdth' 112; }
.pieza-info .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; padding-top: 14px; border-top: 1px solid var(--paper-faint); font-size: 14px; }
.pieza-info .facts dt { color: var(--paper-dim); }
.pieza-info .facts dd { margin: 0; }
.cita {
  margin: 0 0 20px;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  color: var(--paper);
  text-wrap: balance;
}
.cita::before { content: ''; display: block; width: 40px; height: 1px; margin-bottom: 14px; background: var(--glow); }
.variant { font-size: 14px; color: var(--glow); text-underline-offset: 4px; }

.pieza-nav {
  position: fixed;
  z-index: 10;
  bottom: 22px;
  left: clamp(16px, 4vw, 48px);
  display: flex;
  gap: 36px;
}
.pieza-nav a {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  justify-content: center;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.15;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.25s;
}

.pieza-nav a small { font-family: var(--text); font-size: 12px; color: var(--paper-dim); font-variation-settings: 'wdth' 108; }
.pieza-nav a:hover { opacity: 1; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .pieza-info { top: auto; bottom: 70px; transform: none; left: 16px; right: 16px; width: auto; animation-name: llegar-m; }
  @keyframes llegar-m { from { opacity: 0; transform: translateY(20px); } }
  .pieza-info .numeral { font-size: 84px; }
  .pieza-info .numeral.long { font-size: 44px; }
  .pieza-info .unit { font-size: 24px; }
  .pieza-info .title { margin-top: 8px; font-size: 15px; }
  .pieza-info h1 { margin-bottom: 0; }
  .pieza-info .facts, .cita { display: none; }
  .pieza-nav { top: 58px; bottom: auto; left: 16px; right: 16px; transform: none; justify-content: space-between; }
  .pieza-nav a { font-size: 16px; }
  .pieza-nav a[rel='next'] { text-align: right; }
  :root { --stage-left: 0px; }
  .pieza-rosette { width: 125vw; height: 125vw; }
}