/* Vistio Business v1.1.84 — refinamiento móvil de “Tu experiencia” y Acceso.
   - Centra de verdad el contenido interno del ejemplo VISTIO / WORKSPACE.
   - Añade brillo periódico tipo hover a botones en móvil.
   - Optimiza Registro / Login: sin barras visibles, sin focus azul y con resplandor dorado animado.
   No modifica escritorio. */

@media (max-width: 820px) {
  /* TU EXPERIENCIA: centrar el contenido interno del marco, no sólo el contenedor externo. */
  #landing #experiencia .vb122-desktop-shell {
    margin-inline: auto !important;
  }

  #landing #experiencia .vb122-desktop-main {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
  }

  #landing #experiencia .vb122-desktop-main > * {
    width: 100% !important;
    justify-self: stretch !important;
    margin-inline: auto !important;
  }

  #landing #experiencia .vb122-desktop-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  #landing #experiencia .vb122-desktop-head > div,
  #landing #experiencia .vb122-hero-card,
  #landing #experiencia .vb122-kpis,
  #landing #experiencia .vb122-work-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  #landing #experiencia .vb122-head-badge {
    justify-self: start !important;
    align-self: start !important;
  }

  /* BRILLO PERIÓDICO EN BOTONES EN MÓVIL */
  #landing .button,
  #auth-modal .button,
  #auth-modal #auth-switch,
  #landing .vb140-arrow,
  #landing .planbtn,
  #landing .vbtools-cta {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  #landing .button::after,
  #auth-modal .button::after,
  #auth-modal #auth-switch::after,
  #landing .vb140-arrow::after,
  #landing .planbtn::after,
  #landing .vbtools-cta::after {
    content: "";
    position: absolute;
    inset: -26% auto -26% -38%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(247, 214, 153, 0.04) 18%, rgba(255, 236, 191, 0.34) 50%, rgba(247, 214, 153, 0.08) 82%, rgba(255,255,255,0));
    filter: blur(2px);
    opacity: 0;
    transform: translate3d(170%, 0, 0) skewX(-22deg);
    animation: vb184-mobile-sheen 5.6s ease-in-out infinite;
    z-index: 1;
  }

  #auth-modal .button > *,
  #landing .button > * {
    position: relative;
    z-index: 2;
  }

  /* ACCESO: layout móvil más limpio y sin barras visibles */
  #auth-modal {
    padding: 10px !important;
  }

  #auth-modal .modal-panel.vb148-auth-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 440px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 18px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    position: relative !important;
  }

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

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

  #auth-modal .vb148-auth-main {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 16px 24px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #auth-modal .vb148-auth-main::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  #auth-modal .vb148-auth-main::before {
    content: "";
    position: absolute;
    inset: -16% -48%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(188, 139, 64, 0) 18%,
      rgba(214, 166, 88, 0.10) 38%,
      rgba(255, 224, 166, 0.22) 50%,
      rgba(214, 166, 88, 0.10) 62%,
      rgba(188, 139, 64, 0) 82%,
      rgba(0,0,0,0) 100%);
    filter: blur(14px);
    transform: translateX(82%) skewX(-20deg);
    animation: vb184-auth-glow 9s ease-in-out infinite alternate;
  }

  #auth-modal .vb148-auth-main::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 100%, rgba(205, 151, 72, 0.18), rgba(205, 151, 72, 0.08) 34%, transparent 72%);
  }

  #auth-modal .vb148-auth-main > * {
    position: relative;
    z-index: 1;
    max-width: 100%;
  }

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

  #auth-modal .eyebrow {
    margin-top: 8px !important;
  }

  #auth-modal #auth-title {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.04 !important;
    margin-bottom: 0 !important;
  }

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

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

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

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

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

  #auth-modal #auth-form input:focus,
  #auth-modal #auth-form input:focus-visible,
  #auth-modal #auth-register-fields input:focus,
  #auth-modal #auth-register-fields input:focus-visible,
  #auth-modal .icon-toggle:focus,
  #auth-modal .icon-toggle:focus-visible,
  #auth-modal #auth-submit:focus,
  #auth-modal #auth-submit:focus-visible,
  #auth-modal #auth-switch:focus,
  #auth-modal #auth-switch:focus-visible,
  #auth-modal .modal-close:focus,
  #auth-modal .modal-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  #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 .icon-toggle {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    align-self: stretch !important;
  }

  #auth-modal .password-rules {
    gap: 6px !important;
  }

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

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

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

  #auth-modal #registration-note {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  #auth-modal {
    padding: 8px !important;
  }

  #auth-modal .modal-panel.vb148-auth-shell {
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100svh - 12px) !important;
  }

  #auth-modal .vb148-auth-main {
    padding: 18px 15px 22px !important;
    gap: 11px !important;
  }

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

@media (prefers-reduced-motion: reduce) {
  #landing .button::after,
  #auth-modal .button::after,
  #auth-modal #auth-switch::after,
  #landing .vb140-arrow::after,
  #landing .planbtn::after,
  #landing .vbtools-cta::after,
  #auth-modal .vb148-auth-main::before {
    animation: none !important;
  }
}

@keyframes vb184-mobile-sheen {
  0%, 14% {
    opacity: 0;
    transform: translate3d(170%, 0, 0) skewX(-22deg);
  }
  20% {
    opacity: 1;
  }
  36% {
    opacity: 0.95;
    transform: translate3d(-260%, 0, 0) skewX(-22deg);
  }
  45%, 100% {
    opacity: 0;
    transform: translate3d(-260%, 0, 0) skewX(-22deg);
  }
}

@keyframes vb184-auth-glow {
  0% {
    transform: translateX(82%) skewX(-20deg);
  }
  100% {
    transform: translateX(-82%) skewX(-20deg);
  }
}