/* ═══════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; background: #191919; }
body {
  width: 100%;
  min-height: 100%;
  background: #191919;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════════════
   STAGE — ocupa la pantalla completa al abrir (100svh),
   así que a primera vista solo se ve la invitación. El
   footer de contacto queda debajo, fuera de la vista
   inicial, y solo aparece si el usuario hace scroll.
   Los botones y el video del crosswalk siguen coincidiendo
   porque están posicionados en % del stage.
═══════════════════════════════════════════════════ */
#stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100svh;
  flex-shrink: 0;
  margin: 0 auto;
  overflow: hidden;
  background: #191919;
  opacity: 0;
  animation: stageAparece .7s .15s ease forwards;
}
.cargando #stage { animation-play-state: paused; }
@keyframes stageAparece { to { opacity: 1; } }

.poster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Video de los personajes caminando — se superpone exacto
   sobre la franja del crosswalk dibujada en el póster. */
.walk-video {
  position: absolute;
  top: 64.9%;
  left: 0;
  width: 100%;
  height: 35.1%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
  background: #191919;
}

/* ═══════════════════════════════════════════════════
   BOLA DISCO — video generado con IA (gira + destellos
   reales) superpuesto exacto sobre la bola ya dibujada.
═══════════════════════════════════════════════════ */
.disco-video {
  position: absolute;
  top: 0%;
  left: 14%;
  width: 72%;
  height: 18.48%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  background: #191919;
}

/* ═══════════════════════════════════════════════════
   BOTÓN DE MÚSICA
═══════════════════════════════════════════════════ */
#btn-musica {
  position: absolute;
  z-index: 70;
  top: 2%;
  right: 3%;
  width: 9%;
  aspect-ratio: 1;
  max-width: 40px;
  border-radius: 50%;
  border: 2px solid #191919;
  background: linear-gradient(180deg, #ffd23f 0%, #d9a521 100%);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  animation: barraAparece .8s .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes barraAparece { to { opacity: 1; } }
.cargando #btn-musica { animation-play-state: paused; }
#btn-musica:active { transform: scale(.92); }
#btn-musica svg { width: 55%; height: 55%; fill: #191919; }
#btn-musica .ico-off { display: none; }
#btn-musica[aria-pressed="true"] .ico-on  { display: none; }
#btn-musica[aria-pressed="true"] .ico-off { display: block; }

/* ═══════════════════════════════════════════════════
   TOAST DE AUDIO
═══════════════════════════════════════════════════ */
#toast-audio {
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 2%;
  transform: translate(-50%, -14px) scale(.9);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 78%;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d9302f 0%, #a11f1f 100%);
  border: 2px solid #ffd23f;
  box-shadow: 0 4px 0 #000, 0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
#toast-audio.mostrar {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: toastLatido 1.4s .3s ease-in-out infinite;
}
@keyframes toastLatido {
  0%, 100% { box-shadow: 0 4px 0 #000, 0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 0 rgba(255,210,63,.55); }
  50%      { box-shadow: 0 4px 0 #000, 0 8px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 8px rgba(255,210,63,0); }
}
.toast-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }
#toast-audio.mostrar .toast-emoji { animation: toastCampanea 1.4s .3s ease-in-out infinite; }
@keyframes toastCampanea {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(-14deg); }
  20%      { transform: rotate(11deg); }
  30%      { transform: rotate(-8deg); }
  40%      { transform: rotate(0deg); }
}
.toast-texto {
  font-family: system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════
   BOTONES INVISIBLES — superpuestos exacto sobre el
   arte de los botones "Confirmación" / "Ubicación"
   ya dibujado en el póster (medido en % de la imagen).
═══════════════════════════════════════════════════ */
#botones-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.btn-tap {
  position: absolute;
  top: 58.6%;
  height: 6.3%;
  border-radius: 999px;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  outline: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn-tap:active {
  transform: scale(.95);
  filter: brightness(1.15);
}
#btn-confirmacion { left: 25.7%; width: 18.7%; }
#btn-ubicacion    { left: 56.0%; width: 18.7%; }

/* ═══════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease;
}
#loader.oculto { opacity: 0; pointer-events: none; }
#loader-puntos { display: flex; gap: 8px; }
.l-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9b968;
  animation: lPulso .9s ease-in-out infinite;
}
.l-punto:nth-child(2) { animation-delay: .15s; }
.l-punto:nth-child(3) { animation-delay: .3s; }
@keyframes lPulso {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
#footer-inv {
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
  padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: #0a0a0a;
}
#footer-inv p {
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #8a8a8a;
  line-height: 1.5;
  letter-spacing: .2px;
}
#footer-inv a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #d9b968;
  text-decoration: none;
  transition: opacity .2s;
}
#footer-inv a:hover { opacity: .65; }
#footer-inv a svg   { width: 10px; height: 10px; flex-shrink: 0; }