/* MARK: RESPONSIVE-XVCABALLERO - adaptado del esqueleto responsive de Alicia */
:root {
  --preview-width: 100vw;
  --preview-height: 100svh;
  --preview-scale: 1;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

body {
  justify-items: center;
}

.phone-preview-stage {
  transform-origin: top center;
}

body.desktop-phone-preview {
  padding: 18px 0 28px;
}

body.desktop-phone-preview .phone-preview-shell {
  width: var(--preview-width);
  max-width: var(--preview-width);
  min-height: var(--preview-height);
  border-radius: 34px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .36),
    0 8px 20px rgba(0, 0, 0, .18);
}

body.desktop-phone-preview.model-xvcaballero:not(.is-open) .phone-preview-shell {
  height: var(--preview-height) !important;
  min-height: var(--preview-height);
}

body.desktop-phone-preview.model-xvcaballero .phone-preview-stage {
  position: relative;
  left: auto;
  width: var(--preview-width);
  max-width: var(--preview-width);
  transform: none;
}

body.desktop-phone-preview.model-xvcaballero:not(.is-open) .phone-preview-stage {
  height: var(--preview-height);
  overflow: hidden;
}

body.desktop-phone-preview.model-xvcaballero .invite-viewport {
  min-height: var(--preview-height);
}

/* MARK: FONDO-YOSANNY-PREVIEW - el fondo vive dentro del marco del telefono */
body.desktop-phone-preview.theme-xv-rosa-pastel .phone-preview-shell {
  background:
    linear-gradient(180deg, rgba(92, 42, 64, .48), rgba(55, 24, 39, .82)),
    var(--asset-fondo) center top / cover no-repeat,
    var(--color-bg);
}

body.desktop-phone-preview.model-xvcaballero .envelope-screen,
body.desktop-phone-preview.model-xvcaballero .ambient-overlay,
body.desktop-phone-preview.model-xvcaballero .grain-layer {
  position: absolute;
  width: 100%;
  min-height: var(--preview-height);
}

/* MARK: ORNAMENTOS-MARCO - el inferior queda en el flujo final del demo */
body.desktop-phone-preview.model-xvcaballero .decor-layer {
  overflow: visible;
}

body.desktop-phone-preview.model-xvcaballero .decor-layer .deco-top,
body.desktop-phone-preview.model-xvcaballero .deco-flow-bottom {
  width: min(var(--preview-width), 430px);
}

html.is-iphone,
body.is-iphone,
body.is-android {
  min-height: var(--app-height);
}

html.is-iphone,
body.is-iphone {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body.is-iphone .phone-preview-shell,
body.is-iphone .phone-preview-stage,
body.is-iphone .invite-viewport,
body.is-android .invite-viewport {
  min-height: var(--app-height);
}

body.is-iphone .invite-viewport {
  padding-top: var(--safe-top);
}

/* MARK: FONDO-YOSANNY-MOBILE - evita recorte feo de background fixed en telefono */
body.is-iphone.theme-xv-rosa-pastel,
body.is-android.theme-xv-rosa-pastel {
  background:
    linear-gradient(180deg, rgba(92, 42, 64, .48), rgba(55, 24, 39, .82)),
    var(--asset-fondo) center top / 100% auto repeat-y scroll,
    var(--color-bg);
  background-attachment: scroll, scroll, scroll;
}

body.is-iphone .envelope-screen,
body.is-android .envelope-screen {
  min-height: var(--app-height);
  height: var(--app-height);
}

body.is-iphone .music-button,
body.is-android .music-button {
  right: calc(1rem + var(--safe-right)) !important;
  bottom: calc(1rem + var(--safe-bottom)) !important;
}

@media (max-width: 520px) {
  :root {
    --content-width: min(calc(100vw - 28px), 430px);
  }

  .model-xvcaballero .invite-shell {
    width: var(--content-width);
    max-width: var(--content-width);
    padding-inline: 0;
  }

  .model-xvcaballero .envelope-screen {
    padding:
      calc(16px + var(--safe-top))
      calc(16px + var(--safe-right))
      calc(16px + var(--safe-bottom))
      calc(16px + var(--safe-left));
  }
}

@media (min-width: 700px) {
  .model-xvcaballero .invite-shell {
    padding-inline: 1.2rem;
  }
}