.pieza {
  --gota-x: 50%;
  --gota-y: 28.4%;
  --cuadro: 0.52734;
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
}
.pieza__ambiente { display: none; }
.pieza__rejilla { position: relative; min-height: 100vh; min-height: 100svh; }
.pieza__obra { position: absolute; inset: 0; overflow: hidden; }

.lienzo {
  --alto: max(189.63vw, 100vh);
  --vista: 100vh;
  position: absolute; left: 50%;
  top: clamp(calc(var(--vista) - var(--alto)), calc(0.4 * var(--vista) - 0.284 * var(--alto)), 0px);
  width: max(100%, calc(100vh * var(--cuadro)));
  width: max(100%, calc(100svh * var(--cuadro)));
  aspect-ratio: 1080 / 2048;
  transform: translateX(-50%);
  background: #14284a;
}
@supports (height: 100svh) {
  .lienzo { --alto: max(189.63vw, 100svh); --vista: 100svh; }
}
.lienzo__capa {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.15s linear;
}
.lienzo__capa[data-visible] { opacity: 1; }
.lienzo__capa[data-arriba] { z-index: 1; }
.lienzo[data-lento] .lienzo__capa { transition-duration: 0.7s; }

.lienzo__pincel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.lienzo__toque {
  position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: 0;
  background: none; -webkit-tap-highlight-color: transparent; touch-action: pinch-zoom;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lienzo__toque:focus-visible { outline: 2px solid var(--hueso); outline-offset: -6px; }
.lienzo__toque[aria-disabled="true"] { cursor: default; }

.lienzo__senal { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pieza[data-estado="quieta"] .lienzo__senal { transform: translateY(-7%); }
.lienzo__anillo, .lienzo__pista { position: absolute; opacity: 0; transition: opacity 0.5s var(--curva); }
.lienzo__anillo {
  left: var(--gota-x); top: var(--gota-y); width: 17%; aspect-ratio: 1;
  border: 1.5px solid rgb(244 242 240 / 0.85); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lienzo__pista {
  left: 0; right: 0; top: calc(var(--gota-y) + 6.5%);
  margin: 0; padding-inline: 1rem; text-align: center;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; color: var(--hueso);
  text-shadow: 0 0 0.9rem rgb(22 21 21 / 0.95), 0 1px 2px rgb(22 21 21 / 0.9);
}
.lienzo__pista-pincel { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
.pieza[data-pista] .lienzo__pista { opacity: 1; }
.pieza[data-pista] .lienzo__anillo { opacity: 1; animation: latido 2.4s var(--curva) infinite; }
@keyframes latido {
  0% { transform: translate(-50%, -50%) scale(0.72); opacity: 0; }
  30% { opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

.pieza[data-pausado] .lienzo__anillo { animation-play-state: paused; }

.pieza__cartela {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 5rem var(--margen) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.pieza__inicio, .pieza__final { pointer-events: auto; }
.pieza__cartela::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(22 21 21 / 0.9) 0%, rgb(22 21 21 / 0.72) 45%, rgb(22 21 21 / 0) 100%);
  transition: opacity 0.5s var(--curva), transform 0.45s var(--curva);
}
.pieza__inicio { transition: opacity 0.35s var(--curva), transform 0.45s var(--curva); }
.pieza[data-estado="cayendo"] .pieza__cartela::before, .pieza[data-estado="cayendo"] .pieza__inicio { opacity: 0; }

.pieza__ruta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.25rem; font-size: var(--t-chico); color: var(--plata);
}
.pieza__ruta .enlace { min-height: 2.75rem; padding-block: 0.5rem; font-weight: 500; }
.pieza__controles { display: flex; gap: 1.25rem; }
.pieza__control { border: 0; background: none; color: inherit; font-size: inherit; line-height: inherit; }
.pieza__control[hidden] { display: none; }
.pieza__ruta--final { margin: 0.75rem 0 0; }

.pieza__texto { transition: opacity 0.3s var(--curva); }
.pieza__mostrar { display: inline-flex; align-items: center; gap: 0.625rem; }
.pieza__mostrar::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translateY(0.15rem) rotate(45deg);
}
.pieza[data-texto-oculto] .pieza__inicio,
.pieza[data-texto-oculto] .pieza__cartela::before { transform: translateY(var(--bajar, 0px)); }
.pieza[data-texto-oculto] .pieza__texto { opacity: 0; pointer-events: none; }
.pieza[data-texto-oculto] .pieza__volver { display: none; }

.pieza__acciones .boton--contorno { background: none; }
.pieza__titulo {
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.75rem); line-height: 1.02;
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%);
  font-variation-settings: "wdth" var(--ancho-titular); letter-spacing: -0.01em; white-space: nowrap;
}
.pieza__bajada { max-width: 34ch; margin-top: 0.625rem; color: var(--plata); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.pieza__remate {
  max-width: 18ch; font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.12;
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%);
  font-variation-settings: "wdth" var(--ancho-titular); text-wrap: balance;
}
.pieza__remate:focus { outline: none; }
.pieza__acciones { margin-top: 1.25rem; gap: 0.75rem; }
.pieza__acciones .boton { flex: 1 1 auto; }

.pieza__final { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); }
.pieza__final[data-visto] { opacity: 1; transform: none; }

html[data-movimiento="calmo"] .lienzo__capa,
html[data-movimiento="calmo"] .lienzo__anillo,
html[data-movimiento="calmo"] .lienzo__pista,
html[data-movimiento="calmo"] .pieza__cartela::before,
html[data-movimiento="calmo"] .pieza__inicio,
html[data-movimiento="calmo"] .pieza__texto,
html[data-movimiento="calmo"] .pieza__final { transition: none; }
html[data-movimiento="calmo"] .pieza[data-pista] .lienzo__anillo { animation: none; opacity: 0.9; }

@media (min-width: 40em) and (max-width: 63.99em) {
  .pieza__acciones .boton { flex: 0 1 auto; }
}

@media (min-width: 64em) {

  .pieza {
    --ancho: min(100vw, 113vh); --alto: calc(1.8963 * var(--ancho)); --recorte: max(0px, calc(0.31 * var(--alto) - 50vh));
    container-type: inline-size;
  }
  @supports (width: 1cqw) {
    .pieza { --ancho: min(100cqw, 113vh); }
  }

  .pieza__ambiente { display: block; position: absolute; inset: 0; z-index: -1; }
  .pieza__ambiente img {
    position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover;
    opacity: 0.5; transition: opacity 1.4s var(--curva);
  }
  .pieza__ambiente .pieza__ambiente-tinta { opacity: 0; }
  .pieza[data-estado="final"] .pieza__ambiente-noche { opacity: 0; }
  .pieza[data-estado="final"] .pieza__ambiente-tinta { opacity: 0.5; }
  .pieza__ambiente::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 35%, rgb(22 21 21 / 0.05), rgb(22 21 21 / 0.82) 78%);
  }
  html[data-movimiento="calmo"] .pieza__ambiente img { transition: none; }
  .pieza__rejilla { min-height: 0; }
  .pieza__obra { position: relative; inset: auto; height: calc(var(--alto) - var(--recorte)); }
  .lienzo {
    top: calc(-1 * var(--recorte)); left: 50%; width: var(--ancho); transform: translateX(-50%);
    box-shadow: 0 0 6rem 1rem rgb(0 0 0 / 0.42);
  }
  .lienzo__pista { font-size: 1.0625rem; }
  .lienzo__pista-pincel { font-size: 0.875rem; }

  .pieza__cartela {
    right: auto; bottom: auto; top: 0; width: min(40rem, 48%); height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0 clamp(2.5rem, 7vh, 5rem) clamp(2rem, 4.5vw, 5.5rem);
    text-shadow: 0 1px 2px rgb(22 21 21 / 0.85), 0 0 1.75rem rgb(22 21 21 / 0.9);
  }
  .pieza__cartela::before { display: none; }
  .pieza__cartela .boton { text-shadow: none; }
  .pieza__ruta { justify-content: flex-start; gap: 2rem; margin-bottom: 1rem; }
  .pieza__bajada { margin-top: 1.25rem; font-size: 1.125rem; color: var(--hueso); }
  .pieza__acciones { margin-top: 2rem; }
  .pieza__acciones .boton { flex: 0 1 auto; }
}

.pieza--salar { --sol-x: 50%; --sol-y: 41.65%; }
.pieza--salar .lienzo__anillo { left: var(--sol-x); top: var(--sol-y); width: 28%; }

.pieza--salar .lienzo__pista { top: calc(var(--sol-y) + 16%); }
.pieza--salar[data-estado="quieta"] .lienzo__senal { transform: none; }
.pieza--salar .lienzo { background: #d79a72; }

body:has(.pieza--salar) .cabecera__marca { position: relative; }
body:has(.pieza--salar) .cabecera__marca::before {
  content: ""; position: absolute; inset: -0.55rem -1.5rem; pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgb(22 21 21 / 0.96) 0%, rgb(22 21 21 / 0.96) 60%, rgb(22 21 21 / 0.5) 84%, rgb(22 21 21 / 0) 100%);
}
body:has(.pieza--salar) .cabecera__marca img { position: relative; }
html[data-desplazado] body:has(.pieza--salar) .cabecera__marca::before { display: none; }

.pieza--salar .pieza__final { pointer-events: none; -webkit-user-select: none; user-select: none; }
.pieza--salar .pieza__final a, .pieza--salar .pieza__final button { pointer-events: auto; }
@media (max-width: 63.99em) {
  .pieza--salar .lienzo { top: clamp(calc(var(--vista) - var(--alto)), calc(0.42 * var(--vista) - 0.4165 * var(--alto)), 0px); }
}

.pieza__ambiente .pieza__ambiente-ocaso { opacity: 0; }
.pieza--salar[data-estado="final"] .pieza__ambiente-atardecer { opacity: 0; }
.pieza--salar[data-estado="final"] .pieza__ambiente-ocaso { opacity: 0.5; }

.pieza--salar[data-estado="final"] .pieza__cartela::before { opacity: 0; }
.pieza--salar .pieza__final {
  color: var(--carbon);
  text-shadow: 0 0 0.45rem rgb(255 246 232 / 0.85), 0 0 1.1rem rgb(255 246 232 / 0.6);
}
.pieza--salar .pieza__final .pieza__bajada, .pieza--salar .pieza__final .pieza__control { color: var(--carbon); }
.pieza--salar .pieza__final .boton { text-shadow: none; }
.pieza--salar .pieza__final .boton--contorno { color: var(--carbon); border-color: var(--carbon); }

.pieza--salar[data-estado="poniendose"] .pieza__cartela::before,
.pieza--salar[data-estado="poniendose"] .pieza__inicio { opacity: 0; }

html[data-movimiento="calmo"] .pieza--salar[data-estado="inicio"] [data-capa="intro"] { opacity: 0; }
html[data-movimiento="calmo"] .pieza--salar[data-estado="inicio"] [data-capa="espera"] { opacity: 1; }
@media (min-width: 64em) {
  .pieza--salar { --ancho: min(100vw, 113vh); --alto: calc(1.8963 * var(--ancho)); --recorte: max(0px, calc(0.529 * var(--alto) - 50vh)); }
  @supports (width: 1cqw) {
    .pieza--salar { --ancho: min(100cqw, 113vh); }
  }

  .pieza--salar .pieza__ambiente img { opacity: 0.85; }

  .pieza--salar .pieza__cartela {
    padding-left: calc((100vw - var(--ancho)) / 2 + 2.5rem);
    text-shadow: 0 1px 2px rgb(22 21 21 / 0.9), 0 0 1.25rem rgb(22 21 21 / 0.8), 0 0 2.5rem rgb(22 21 21 / 0.55);
  }
  @supports (width: 1cqw) {
    .pieza--salar .pieza__cartela { padding-left: calc((100cqw - var(--ancho)) / 2 + 2.5rem); }
  }
  .pieza--salar .pieza__cartela { width: min(46rem, 60%); }
  .pieza--salar .pieza__remate { max-width: 26ch; }
  @media (max-height: 46em) {
    .pieza--salar .pieza__remate { font-size: 1.75rem; }
    .pieza--salar .pieza__bajada { margin-top: 0.5rem; font-size: 1rem; }
    .pieza--salar .pieza__acciones { margin-top: 1rem; }
    .pieza--salar .pieza__ruta--final { margin-top: 0.25rem; }
  }

  .pieza--salar .pieza__ambiente .pieza__ambiente-ocaso { opacity: 0; }
  .pieza--salar[data-estado="final"] .pieza__ambiente-ocaso { opacity: 0.85; }
  .pieza--salar .pieza__ambiente::after {
    background: radial-gradient(ellipse 60% 70% at 50% 45%, rgb(22 21 21 / 0), rgb(22 21 21 / 0.4) 80%);
  }
}

.laboratorio__entrada .apoyo { margin-top: 1rem; }
.laboratorio__piezas {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); display: grid;
  gap: clamp(2.75rem, 2rem + 3vw, 4rem) clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}
.ficha-pieza__enlace { display: grid; gap: 1.25rem; color: inherit; text-decoration: none; }
.ficha-pieza__enlace:focus-visible { outline-offset: 6px; }
.ficha-pieza__imagen { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: #1d1b1b; }
.ficha-pieza__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); }
.ficha-pieza__enlace:hover .ficha-pieza__imagen img { transform: scale(1.03); }
.ficha-pieza__titulo {
  display: block; font-size: var(--t-ficha); line-height: 1.15;
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%); font-variation-settings: "wdth" var(--ancho-titular);
}
.ficha-pieza__bajada { display: block; max-width: 34ch; margin-top: 0.5rem; color: var(--texto-2); }

.ficha-pieza__ir { display: inline-block; margin-top: 0.75rem; padding-block: 0.625rem; font-weight: 600; transition: color var(--d-hover) linear; }
.ficha-pieza__enlace:hover .ficha-pieza__ir { color: var(--borgona); }
html[data-movimiento="calmo"] .ficha-pieza__imagen img, html[data-movimiento="calmo"] .ficha-pieza__ir { transition: none; }

@media (min-width: 40em) {
  .laboratorio__piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .laboratorio > .contenedor {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--separacion); align-items: start;
  }

  .laboratorio__entrada { grid-column: 1 / span 4; }
  .laboratorio__piezas { grid-column: 5 / span 8; margin-top: 0; max-width: 54rem; justify-self: end; width: 100%; }
}