/* MARK: VISTA DE CELULAR EN PC
   El ancho de 390 px activa los mismos ajustes móviles de cada demo.
   Cambia --ancho-vista-celular para ajustar el ancho en computadora.
   En pantallas menores de 768 px la invitación ocupa toda la ventana. */
html.vista-celular-pc {
  --ancho-vista-celular: 390px;
  overflow: auto !important;
  background: var(--fondo-before, #f5f1eb) center / cover no-repeat;
}

html.vista-celular-pc body.vista-celular-pc {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.vista-celular-pc::before,
body.vista-celular-pc::after,
body.vista-celular-pc > :not(.vista-celular-pc-marco) {
  display: none !important;
}

body.vista-celular-pc > .vista-celular-pc-marco {
  display: block !important;
  box-sizing: border-box;
  flex: none;
  width: min(var(--ancho-vista-celular), 100vw);
  height: 100dvh;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}