/* ===========================================================================
   ui.css — chrome del sitio: gate de apertura (§6.2), barra de progreso
   (§6.3), boton mute (§6.4), boton fantasma "Verlo otra vez" (§7 slide 22).
   =========================================================================== */

/* ---- Gate de apertura (§6.2) ----------------------------------------- */
#gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(var(--s6), env(safe-area-inset-top)) var(--s6)
           max(var(--s6), env(safe-area-inset-bottom));
  background: var(--arena);
  transition: opacity 250ms ease-out;
}
#gate.is-going { opacity: 0; pointer-events: none; }


#gate-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  text-align: center;
}

#gate-kicker {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-media);
}

#gate-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 16vw, 4.5rem);
  line-height: 1;
  color: var(--lila-hondo);
}

#gate-btn {
  margin-top: var(--s3);
  min-height: 48px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--lila-hondo);
  color: var(--blanco-calido);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: var(--sombra);
}
#gate-btn:active { transform: translateY(1px); }

#gate-hint {
  margin-top: -4px;                 /* neto ~12px bajo el boton */
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--tinta-media);
}

/* ---- Barra de progreso (§6.3) -------------------------------------- */
#progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
}
.progress__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(52, 49, 58, 0.14);
  transition: background 200ms ease-out, height 200ms ease-out;
}
.progress__seg.is-done    { background: rgba(52, 49, 58, 0.38); }
.progress__seg.is-current { background: rgba(52, 49, 58, 0.72); height: 4px; }

/* ---- Boton mute (§6.4) ------------------------------------------------ */
#mute {
  position: absolute;
  z-index: 6;
  top: max(8px, env(safe-area-inset-top));
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tinta-media);
}
#mute svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mute .mute-body  { fill: currentColor; stroke: none; }
#mute .mute-slash { opacity: 0; transition: opacity 150ms ease-out; }
#mute .mute-waves { opacity: 1; transition: opacity 150ms ease-out; }
#mute.is-muted .mute-waves { opacity: 0; }
#mute.is-muted .mute-slash { opacity: 1; }

/* ---- Boton fantasma "Verlo otra vez" (§7 slide 22) ----------------- */
.btn-ghost {
  margin-top: var(--s6);
  padding: 12px 24px;
  border: 1px solid var(--tinta-media);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-media);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
}