.pieza--puerta { background: #050506; }
.pieza--puerta .pieza__rejilla { min-height: 100vh; min-height: 100svh; }
.pieza--puerta .pieza__obra { position: absolute; inset: 0; height: auto; }
.puerta__lienzo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}

.puerta__lienzo:focus { outline: none; }
.puerta__lienzo:focus-visible { outline: 2px solid var(--hueso); outline-offset: -6px; }

.puerta__pista {
  max-width: 30ch; margin: 0 0 0.75rem; pointer-events: none;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; color: var(--hueso);
  opacity: 0; transition: opacity 0.5s var(--curva);
}
.pieza--puerta[data-estado="inicio"] .puerta__pista,
.pieza--puerta[data-estado="cortada"] .puerta__pista { opacity: 1; }
.pieza--puerta[data-estado="sin-3d"] .puerta__pista { display: none; }

.pieza--puerta .pieza__cartela { padding-top: 3rem; }
.pieza--puerta .pieza__cartela::before {
  background: linear-gradient(to top, rgb(5 5 6 / 0.92) 0%, rgb(5 5 6 / 0.6) 55%, rgb(5 5 6 / 0) 100%);
}
.pieza--puerta .pieza__titulo { font-size: clamp(2.25rem, 1.8rem + 2.4vw, 4.25rem); }
html[data-movimiento="calmo"] .puerta__pista { transition: none; }

.puerta__luz, .puerta__velo { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.puerta__luz { background: radial-gradient(ellipse at 50% 50%, #FFF4E2 0%, #F3D9B1 42%, #C99A62 100%); }
.puerta__velo {
  background: radial-gradient(ellipse 60% 50% at 50% 42%, rgb(244 242 240 / 0.06) 0%, rgb(244 242 240 / 0) 100%), #161515;
}

.puerta__final {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4.5rem var(--margen) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  text-align: center; pointer-events: auto;
}
.puerta__final[hidden] { display: none; }
.puerta__final .pieza__remate { max-width: 20ch; margin-top: 1.5rem; }
.puerta__final .pieza__bajada { margin-top: 0.625rem; margin-inline: auto; color: var(--plata); }
.puerta__final .pieza__acciones { justify-content: center; margin-top: 1.5rem; width: 100%; max-width: 32rem; }

.puerta__cara { --cara: min(46vw, 15rem); position: relative; flex: none; width: var(--cara); height: var(--cara); }
.rostro {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; overflow: clip; background: #161515;
  box-shadow: 0 0 0 calc(var(--cara) * 0.0205) #AB707A;
}
.rostro__base { position: absolute; inset: 0; width: 100%; height: 100%; fill: #252223; }
.rostro__capas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rostro__nariz { position: absolute; left: 47.068%; top: 59.885%; width: 10.279%; height: 6.975%; max-width: none; }
.rostro__ojos { position: absolute; left: 36.348%; top: 47.77%; width: 30.655%; height: 5.287%; max-width: none; overflow: visible; }

html[data-gestos] .pieza--puerta .puerta__final :is(.ojo__parpado, .ojo__luz) { animation: none; }

.pieza--puerta[data-estado="final"] .puerta__pista,
.pieza--puerta[data-estado="final"] .pieza__inicio { visibility: hidden; }
.pieza--puerta[data-estado="final"] .pieza__cartela::before { opacity: 0; }
.pieza--puerta[data-estado="final"] .puerta__lienzo { pointer-events: none; }

@media (max-height: 44em) {
  .puerta__cara { --cara: min(46vw, 15rem, 26svh); }
  .puerta__final { padding-top: 4rem; }
  .puerta__final .pieza__remate { margin-top: 1rem; }
  .puerta__final .pieza__acciones { margin-top: 1.125rem; }
  .puerta__final .boton--grande { min-height: 3rem; }
}

@media (min-width: 64em) {
  .pieza--puerta .pieza__obra { position: absolute; inset: 0; height: auto; }
  .pieza--puerta .pieza__cartela { width: min(34rem, 40%); }
  .puerta__pista { font-size: 1.0625rem; margin-bottom: 1.25rem; }

  .puerta__cara { --cara: 16rem; }
  .puerta__final .pieza__remate { max-width: 24ch; margin-top: 2rem; }
  .puerta__final .pieza__bajada { margin-top: 0.875rem; }
  .puerta__final .pieza__acciones { margin-top: 2rem; max-width: none; width: auto; }
  @media (max-height: 46em) {
    .puerta__cara { --cara: min(16rem, 30svh); }
    .puerta__final .pieza__remate { margin-top: 1.25rem; font-size: 1.75rem; }
    .puerta__final .pieza__acciones { margin-top: 1.25rem; }
  }
}