/* ===========================================================================
   Menú móvil · botón hamburguesa + scrim
   Pegar al final de css/site.css (bloque aditivo, no toca reglas existentes).
   El deslizamiento del sidebar ya lo maneja el @media (max-width:820px) que
   tienes: .voxy-shell.nav-open .voxy-sidebar { transform:translateX(0); }
   Aquí solo se agrega el disparador visual (botón) y el scrim.
   =========================================================================== */

/* botón hamburguesa: oculto en escritorio, se muestra en el media query */
.vt-burger {
    display: none;
    border: 0;
    background: transparent;
    color: var(--vx-ink);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    margin-left: -4px;
    cursor: pointer;
}
.vt-burger:hover { color: var(--vx-indigo); }
.vt-burger:focus { outline: none; }
.vt-burger:focus-visible { box-shadow: 0 0 0 3px rgba(91, 74, 232, .18); border-radius: 6px; }

/* scrim que oscurece el contenido con el menú abierto (debajo del topbar) */
.voxy-scrim {
    position: fixed;
    inset: 54px 0 0 0;         /* 54px = alto del topbar */
    background: rgba(26, 23, 64, .45);
    z-index: 1028;             /* topbar 1030 > sidebar 1029 > scrim 1028 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

@media (max-width:820px) {
    .vt-burger { display: inline-flex; align-items: center; }
    .voxy-shell.nav-open .voxy-scrim { opacity: 1; pointer-events: auto; }
}