:root{
  --negro:   #000000;
  --rojo:    #b0181a;
  --rojo-os: #5c0d0e;
  --oro:     #cea23e;
  --oro-cl:  #f6e096;
  --crema:   #e8e0cb;
  --papel:   #d8d0b8;
  --tinta:   #241f18;
  --gris:    #8d8676;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{ height: 100%; }

body{
  min-height: 100%;
  margin: 0;
  background: #000;
  color: var(--crema);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.pantalla{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  padding: 24px 12px;
}

.viejo{
  margin: 10px auto 0;
  max-width: 760px;
  padding: 0 12px;
  font-size: 11px;
  color: #6a6357;
}
.viejo marquee{
  display: block;
  margin-bottom: 5px;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 13px;
  color: #8e4a44;
}
.viejo a{ color: #6d7f95; }
.cuenta{
  padding: 1px 4px;
  background: #000;
  border: 1px inset #333;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: .2em;
  color: #74924f;
}
.obras{ vertical-align: middle; margin-right: 6px; }
.bufon{ margin-top: 12px; width: 260px; max-width: 76%; }
.pie{ margin-top: 20px; padding-bottom: 14px; }

.escenario{
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1200 / 743;
  overflow: hidden;
}
.escenario img{ position: absolute; display: block; }

.marco{ left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }

.cortina{
  top: 39.8385%;
  width: 25.0417%;
  height: 41.7227%;
  z-index: 1;
  transition: none;
}
.izq{ left: 25.4167%; }
.der{ left: 50.4584%; }

.abriendo .izq{ animation: irIzq 2.4s steps(14, end) forwards; }
.abriendo .der{ animation: irDer 2.4s steps(14, end) forwards; }
@keyframes irIzq{ to{ transform: translateX(-102%); } }
@keyframes irDer{ to{ transform: translateX(102%); } }

.mano{
  left: 37.9%;
  top: 48.2%;
  width: 25%;
  height: 26.9%;
  z-index: 2;
}
.abriendo .mano{ display: none; }

.luz{
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c9 0%, #e0b452 38%, rgba(160,110,20,0) 72%);
  animation: parpadeo 3.3s steps(1, end) infinite;
}
.luz--g{ width: 24px; height: 24px; margin: -12px 0 0 -12px; }
@keyframes parpadeo{
  0%,  46% { opacity: .85; }
  48%      { opacity: .22; }
  52%      { opacity: .70; }
  55%, 88% { opacity: .90; }
  90%      { opacity: .30; }
  93%      { opacity: .80; }
}

#abrir{
  position: absolute;
  left: 25.4%; top: 39.8%;
  width: 50.1%; height: 41.8%;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#abrir:focus-visible{ outline: 2px dotted var(--oro); }
.abriendo #abrir{ display: none; }

#teatro.fundido{ animation: aNegro 1.6s linear forwards; }
@keyframes aNegro{ to{ opacity: 0; } }

.cuarto{
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1134 / 812;
  background: #000 url("assets/images/sala.jpg") center/cover no-repeat;
  overflow: hidden;
}

.escena{
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: calc(var(--s) * 2.6);
  height: calc(var(--s) * 2.2);
  transform: translateX(-50%);
  perspective: 1100px;

  --s: clamp(72px, 17vw, 176px);
  --grosor: 15px;

  --cabeza-k: 1.80;
  --giro: 0deg;
  --tapa: 0deg;
  --ext: 0;
  --wob: 0;

  --paso: calc(var(--s) * var(--ext) * 0.12);
  --dx:   calc(var(--s) * var(--wob) * 0.10);
}

.caja3d{
  position: absolute;
  left: 50%;
  top: 56%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-13deg) rotateY(-24deg);
}

.cara{
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  display: block;
  background: #7d241c;
  backface-visibility: hidden;
}
.cara img{ display: block; width: 100%; height: 100%; }

.frente{ transform: translateZ(calc(var(--s) / 2)); }
.detras{ transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.izq   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.der   { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.suelo { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #200b09; }
.dentro{ transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); background: #0d0707; }

.izq img   { filter: brightness(1.22); }
.der img   { filter: brightness(0.58); }
.detras img{ filter: brightness(0.42); }

.bisagra{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--s) / -2), calc(var(--s) / -2), 0)
             rotateZ(calc(var(--tapa) * -1));
}
.bisagra .cara{ backface-visibility: visible; }
.tapa-arriba,
.tapa-abajo{
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  display: block;
}
.tapa-arriba{ transform: rotateX(90deg) translateX(calc(var(--s) / 2)); }
.tapa-arriba img{ display: block; width: 100%; height: 100%; filter: brightness(1.28); }
.tapa-abajo{
  background: #46150f;
  transform: rotateX(90deg) translateX(calc(var(--s) / 2))
             translateZ(calc(var(--grosor) * -1));
}

.tapa-canto{ position: absolute; background: #6b1d16; display: block; }
.tapa-frente{
  left: calc(var(--s) / -2);
  top: calc(var(--grosor) / -2);
  width: var(--s);
  height: var(--grosor);
  transform: translateX(var(--s)) rotateY(90deg);
}
.tapa-izq, .tapa-der{ display: none; }

.cuerda-eje{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--s) / 2), calc(var(--s) * 0.12), 0)
             rotateY(90deg) translateZ(10px);
}
.eje{
  position: absolute;
  left: -9px; top: -9px;
  width: 18px; height: 18px;
  display: block;
  border-radius: 50%;
  background: #5b524a;
  box-shadow: 0 0 0 3px #17120f;
}
.giro{
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--giro));
}
.brazo{
  position: absolute;
  left: -5px; top: -50px;
  width: 10px; height: 52px;
  display: block;
  background: #4a423b;
  box-shadow: 0 0 0 2px #17120f;
}
.pomo{
  position: absolute;
  left: -11px; top: -66px;
  width: 22px; height: 22px;
  display: block;
  border-radius: 50%;
  background: #96221e;
  box-shadow: 0 0 0 3px #17120f;
}

.muelle{
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--s) / -2 + 12px));
  opacity: 0;
}
.muelle.fuera{ opacity: 1; }
.muelle i{
  position: absolute;
  left: calc(var(--aro) / -2);
  top:  calc(var(--aro) / -2);
  width: var(--aro);
  height: var(--aro);
  display: block;

  border: 10px solid;
  border-color: #ded3b6 #8d8271 #3a342d #8d8271;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.75);
  transform: translate3d(calc(var(--dx) * var(--f)),
                         calc(var(--i) * var(--paso) * -1), 0)
             rotateX(90deg);
}

.cabeza{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 120px;
  height: auto;
  transform: translate(-50%, -90%);
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
}
.cabeza.fuera{ visibility: visible; }

.sombra{
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 0.42);
  margin-left: calc(var(--s) * -0.75);
  margin-top: calc(var(--s) * 0.3);
  display: block;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 72%);
}

.caja{
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 33%;
  aspect-ratio: 420 / 540;
  transform: translateX(-54.3%);
  background: url("assets/images/caja_cuerda.png") 0 0 / 800% 100% no-repeat;
}
.caja.girando{ animation: manivela .62s steps(8, end) infinite; }
@keyframes manivela{ to{ background-position: -800% 0; } }
.caja--gif{ height: auto; z-index: 2; }
img.caja{ background: none; }

.escena{ display: none; }
@supports (transform-style: preserve-3d){
  .escena{ display: block; }
  .caja--plana, .caja--gif{ display: none !important; }
}

.dar-cuerda{
  display: inline-block;
  margin: 12px auto 0;
  padding: 5px 16px 7px;
  background: #1a1513;
  border: 2px outset #4b423a;
  border-radius: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: #d3c7ad;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.dar-cuerda:active{ border-style: inset; }
.medidor{
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  letter-spacing: .06em;
  color: #b0181a;
}

#registro{

  width: 100%;
  opacity: 0;
  margin-top: 22px;
  pointer-events: none;
}
#registro[hidden]{ display: none !important; }
#registro.visible{
  animation: aparecer 4s linear forwards;
  pointer-events: auto;
}
@keyframes aparecer{ from{ opacity: 0 } to{ opacity: 1 } }

.cartel{
  display: block;
  width: 500px;
  max-width: 94%;
  height: auto;
  margin: 0 auto;
}

.marco-oro{
  position: relative;
  display: flow-root;
  width: 500px;
  max-width: calc(100% - 8px);
  margin: 10px auto 0;
}
.marco-oro::before,
.marco-oro::after{
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}

.marco-oro::before{
  inset: 0;
  z-index: 3;
  background-image:
    url("assets/images/marco_sup.png"),
    url("assets/images/marco_inf.png");
  background-position: left top, left bottom;
  background-size: 100% auto, 100% auto;
}

.marco-oro::after{
  inset: 0;
  z-index: 2;
  margin: 4.2% 0 4.1%;
  background-image:
    url("assets/images/marco_izq.png"),
    url("assets/images/marco_der.png");
  background-position: left top, right top;
  background-size: 5.769% 100%, 6.538% 100%;
}

.caja-vieja,
#forma{
  background: var(--papel);
  border: 2px solid #4a3a22;
  color: var(--tinta);
  text-align: left;
  padding: 10px 12px 12px;
}

.marco-oro #forma{
  position: relative;
  z-index: 1;

  margin: 3.8% 5.6% 3.7% 4.9%;
}
.cabecera{
  margin: -10px -12px 10px;
  padding: 4px 8px;
  background: #8c1417;
  border-bottom: 2px solid #5c0d0e;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .1em;
  color: #f0e4c6;
  text-align: center;
}

.campo{
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 5px 6px;
  background: #fbf8ef;
  border: 2px inset #b9b09a;
  border-radius: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  color: var(--tinta);
}
.campo.gris{ color: var(--gris); }

.linea{ display: block; width: 100%; height: 12px; margin: 4px 0 8px; }

.pie-legend{
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .12em;
  color: #6b6252;
}

.entradas{ display: flex; gap: 7px; }
.entrada{
  flex: 1;
  position: relative;
  padding: 9px 2px 8px;
  background: url("assets/images/papel_stub.jpg") center/cover;
  border: 0;
  border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  letter-spacing: .06em;
  color: #241a14;
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
}

.entrada::before{
  content: "";
  position: absolute;
  left: 3px; top: 4px; bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(to bottom,
    rgba(80,60,40,.55) 0 3px, transparent 3px 6px);
}
.entrada:nth-child(1){ transform: rotate(-1.6deg); }
.entrada:nth-child(2){ transform: rotate(0.9deg); }
.entrada:nth-child(3){ transform: rotate(-0.7deg); }

.entrada .g{
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 3px;
}
.entrada:hover{ box-shadow: 3px 3px 0 rgba(0,0,0,.5); }

.entrada.elegida{
  transform: rotate(0deg);
  box-shadow: inset 0 0 0 2px #7c0000, 1px 1px 0 rgba(0,0,0,.5);
  filter: brightness(1.06);
}
.entrada.elegida::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 3px solid rgba(150,18,18,.78);
  border-radius: 50%;
  transform: rotate(-13deg) scaleY(.82);
}

.centro{ margin: 12px 0 0; text-align: center; }
.boton{
  padding: 4px 26px;
  background: #cfc5ad;
  border: 2px outset #e2dac4;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .22em;
  color: #57503f;
  opacity: .4;
  cursor: default;
  transition: opacity .8s linear;
}
.boton.listo{ opacity: 1; color: #000; cursor: pointer; }
.boton.listo:active{ border-style: inset; }

.letrachica{
  margin: 9px 0 0;
  font-size: 9px;
  line-height: 1.5;
  color: #7c7362;
  text-align: center;
}
.oculto{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

#fallo{
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}
#fCapas{ position: absolute; inset: 0; }
#fCapas .c{ position: absolute; inset: 0; overflow: hidden; }
#fCapas .c img{ position: absolute; width: 100%; height: auto; }
#fTexto{
  position: absolute; inset: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  color: #b9b2a0;
}
#fTexto span{ position: absolute; white-space: pre; text-shadow: 1px 0 #3a0b0b; }
#fBarras{ position: absolute; inset: 0; }
#fBarras i{ position: absolute; left: 0; right: 0; display: block; }

#negro{
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #000;
}
#linea{
  position: absolute;
  left: 50%; top: 50%;
  width: min(88vw, 700px);
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 4.2vw, 36px);
  line-height: 1.35;
  color: #efeade;
}
#linea i{ font-style: normal; display: inline-block; }

#linea span{ white-space: nowrap; }

#billete{
  position: fixed;
  inset: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: #000;
}
.ticket{
  position: relative;
  width: min(620px, 100%);
  transform: rotate(-1.2deg);
}
.ticket-fondo{ display: block; width: 100%; height: auto; }
.ticket-datos{
  position: absolute;
  left: 5.5%; top: 34%;
  width: 46%;
  font-family: Arial, Helvetica, sans-serif;
  color: #2a2018;
  text-align: left;
}
.ticket-datos p{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 clamp(3px, 1.1vw, 7px);
}
.ticket-datos i{
  flex: 0 0 auto;
  width: 34%;
  font-style: normal;
  font-size: clamp(7px, 1.35vw, 10px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7a6448;
}
.ticket-datos b{
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(10px, 2.1vw, 15px);
  color: #1d1610;
}
.logo-final{ width: 300px; max-width: 74%; }
.validar{
  margin: 0;
  text-align: center;
}
.validar a{
  display: inline-block;
  padding: 7px 20px;
  background: #7c0000;
  border: 2px outset #a63a34;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .18em;
  color: #f2e6c8;
  text-decoration: none;
}
.validar a:hover{ background: #94100f; letter-spacing: .22em; }
.validar a:active{ border-style: inset; }
.validar span{
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #6a6357;
}

.otra{ margin: 0; font-size: 11px; }
.otra a{ color: #6a6357; }

#sonido{
  position: fixed;
  right: 9px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 70;
  padding: 2px 5px;
  background: rgba(0,0,0,.7);
  border: 1px solid #2a2721;
  border-radius: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  color: #6a6357;
  cursor: pointer;
}
#sonido:hover{ color: #b3a98e; }

#sonido.llama{ animation: llamada 1.5s steps(1, end) infinite; }
@keyframes llamada{
  0%,   55% { color: #6a6357; border-color: #2a2721; }
  56%, 100% { color: #d8c48a; border-color: #7a6a3e; }
}
@media (prefers-reduced-motion: reduce){
  #sonido.llama{ animation: none; color: #b3a98e; }
}

@media (max-width: 700px){
  .cartel{ width: 100%; }

  .marco-oro #forma{ margin: 3.5% 5.3% 3.4% 4.6%; }
  .escena{ --cabeza-k: 1.15; }
  .caja{ width: 42%; }
  .dar-cuerda{ font-size: 16px; padding: 8px 16px 10px; }
  .campo{ font-size: 16px; padding: 7px 6px; }
  .entrada{ padding: 10px 2px 11px; font-size: 11px; }
  .boton{ padding: 9px 30px; }
  .viejo{ font-size: 10px; }
}

@supports (min-height: 100dvh){
  .pantalla{ min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce){
  .luz{ animation: none; opacity: .8; }
  .abriendo .izq, .abriendo .der{ animation-duration: 1.2s; }
}