.menu-panel {
    overflow: hidden;
    opacity: 0;
    transform-origin: top right;
    transform: translateY(-8px) scaleY(.98);
    transition: opacity .32s ease, transform .32s cubic-bezier(.2, .9, .3, 1);
    pointer-events: none;
}

.expandable-menu.expanded .menu-panel {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
}

.menu-items .menu-item a {
    display: block;
    transform: translateX(-8px);
    opacity: 0;
    transition: transform .32s ease, opacity .32s ease;
}

.expandable-menu.expanded .menu-items .menu-item a {
    transform: translateX(0);
    opacity: 1;
}

/* estado inicial: fijo, centrado y abajo */
/* asegurar posicionamiento inicial: fijo, centrado y abajo */
.expandable-menu.fixed-bottom-centered {
    position: fixed;
    bottom: var(--menu-bottom, 20px);
    left: 50%;
    transform: translateX(-50%);
    /* estado inicial centrado */
    z-index: 9999;
    transition: transform .45s cubic-bezier(.2, .9, .2, 1);
    /* animamos transform */
    will-change: transform;
}

.fixed-bottom-centered {
    transition: transform .45s cubic-bezier(.2, .9, .2, 1);
}

/* cuando aplicamos la clase que lo mueve a la derecha */
.expandable-menu.fixed-bottom-centered.scrolled-right {
    left: auto;
    /* quitamos el centrado por left */
    right: var(--menu-right, 20px);
    /* distancia derecha final */
    transform: translateX(0);
    /* ya no necesitamos centrar */
    bottom: var(--menu-bottom, 20px);
    /* se mantiene en la misma altura */
    /* si quieres que además suba un poco, ajusta bottom: calc(var(--menu-bottom) + 10px); */
}

/* evita saltos cuando el menú cambia de posicionamiento (suaviza el cambio) */
.expandable-menu.fixed-bottom-centered,
.expandable-menu.fixed-bottom-centered.scrolled-right {
    will-change: transform, left, right;
}

/* si usas shadows, asegúrate de que el z-index sea suficientemente alto */