/* Vistio Business v1.1.83 — ajustes móviles puntuales.
   1) Centra la vista ilustrativa de “Tu experiencia” sin alterar escritorio.
   2) Optimiza Registro / Inicio de sesión para móvil, reduciendo saturación visual.
   No toca escritorio, planes, herramientas, transparencia ni el panel administrativo. */

@media (max-width: 820px) {
  /* TU EXPERIENCIA: el ejemplo gráfico queda realmente centrado en móvil. */
  #landing #experiencia .vb122-experience-window,
  #landing #experiencia .experience-window {
    justify-self: center !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: min(100%, 720px) !important;
  }

  #landing #experiencia .vb122-desktop-frame {
    width: 100% !important;
    max-width: min(100%, 720px) !important;
    margin-inline: auto !important;
  }

  #landing #experiencia .vb122-desktop-shell {
    margin-inline: auto !important;
  }

  /* ACCESO: una sola columna, menos saturación y mejor lectura en móvil. */
  #auth-modal .modal-panel.vb148-auth-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 430px) !important;
    max-width: calc(100vw - 22px) !important;
    min-height: 0 !important;
    max-height: min(92svh, 920px) !important;
    overflow: hidden !important;
  }

  #auth-modal .modal-panel.vb148-auth-shell > * {
    min-width: 0;
  }

  #auth-modal .vb148-auth-aside {
    display: none !important;
  }

  #auth-modal .modal-close {
    top: 12px !important;
    right: 12px !important;
    z-index: 3;
  }

  #auth-modal .vb148-auth-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(20px, 5vw, 28px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #auth-modal .vb148-auth-main > * {
    max-width: 100%;
  }

  #auth-modal .auth-symbol {
    align-self: flex-start;
  }

  #auth-modal #auth-title {
    font-size: clamp(34px, 8.8vw, 46px) !important;
    line-height: 1.02 !important;
    margin-bottom: 0 !important;
  }

  #auth-modal #auth-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #auth-modal .vb148-auth-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  #auth-modal .vb148-auth-meta > span {
    max-width: 100%;
  }

  #auth-modal #auth-form {
    display: grid !important;
    gap: 12px !important;
  }

  #auth-modal #auth-register-fields {
    display: grid !important;
    gap: 12px !important;
  }

  #auth-modal #auth-form label,
  #auth-modal #auth-register-fields label,
  #auth-modal #auth-form > div,
  #auth-modal #auth-form > p {
    min-width: 0;
  }

  #auth-modal #auth-form label,
  #auth-modal #auth-register-fields label {
    display: grid !important;
    gap: 7px !important;
  }

  #auth-modal #auth-form input,
  #auth-modal #auth-register-fields input {
    min-width: 0;
    width: 100%;
    min-height: 52px;
    font-size: 16px !important;
    line-height: 1.35;
  }

  #auth-modal .auth-pass-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #auth-modal .auth-pass-row > * {
    min-width: 0;
  }

  #auth-modal .icon-toggle {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
  }

  #auth-modal .auth-divider {
    margin: 2px 0 !important;
  }

  #auth-modal #auth-submit {
    min-height: 54px !important;
  }

  #auth-modal .auth-toggle {
    text-align: center !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 480px) {
  #auth-modal .modal-panel.vb148-auth-shell {
    max-width: calc(100vw - 16px) !important;
  }

  #auth-modal .vb148-auth-main {
    padding: 18px 16px 18px !important;
  }

  #auth-modal #auth-title {
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  #auth-modal .vb148-auth-meta > span {
    font-size: 11px !important;
  }
}
