/* * Overlay del menú (.menu-open), abierto con .burger. * El estado y las transiciones viven aquí; el layout se controla en Bricks. */ /* En el builder no se muestra (el body del builder no lleva .bricks-is-frontend). Para verlo y estilizarlo, usa el botón del ojo ("Ver menú") en la barra superior del builder; pone la clase lmg-show-menu en el del lienzo. */ body:not(.bricks-is-frontend) .menu-open { display: none; } /* Estado "visible en el builder", activado por el botón. */ html.lmg-show-menu body:not(.bricks-is-frontend) .menu-open { display: block; } /* ---------- Estado cerrado ---------- */ .bricks-is-frontend .menu-open { visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.55s cubic-bezier(0.83, 0, 0.17, 1), visibility 0s linear 0.55s; } /* ---------- Estado abierto ---------- */ .bricks-is-frontend .menu-open.is-open { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1); } /* ---------- Contenido: entrada escalonada ---------- */ .bricks-is-frontend .menu-open .bricks-nav-menu > li, .bricks-is-frontend .menu-open .menu-open-lang { opacity: 0; transform: translateY(32px); transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li, .bricks-is-frontend .menu-open.is-open .menu-open-lang { opacity: 1; transform: translateY(0); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(1) { transition-delay: 0.3s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(2) { transition-delay: 0.36s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(3) { transition-delay: 0.42s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(4) { transition-delay: 0.48s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(5) { transition-delay: 0.54s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(6) { transition-delay: 0.6s; } .bricks-is-frontend .menu-open.is-open .bricks-nav-menu > li:nth-child(n+7) { transition-delay: 0.66s; } .bricks-is-frontend .menu-open.is-open .menu-open-lang { transition-delay: 0.72s; } /* ---------- Botón de cierre ---------- */ .bricks-is-frontend .menu-open-close { cursor: pointer; opacity: 0; transform: rotate(-90deg); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .bricks-is-frontend .menu-open.is-open .menu-open-close { opacity: 1; transform: rotate(0deg); transition-delay: 0.45s; } .bricks-is-frontend .menu-open-close:hover, .bricks-is-frontend .menu-open-close:focus-visible { transform: rotate(90deg); transition-delay: 0s; } /* ---------- Bloqueo del scroll con el menú abierto ---------- */ html.lmg-menu-lock, html.lmg-menu-lock body { overflow: hidden; } /* ---------- Accesibilidad: sin animaciones si el usuario las desactiva ---------- */ @media (prefers-reduced-motion: reduce) { .bricks-is-frontend .menu-open, .bricks-is-frontend .menu-open .bricks-nav-menu > li, .bricks-is-frontend .menu-open .menu-open-lang, .bricks-is-frontend .menu-open-close { transition: none; } .bricks-is-frontend .menu-open .bricks-nav-menu > li, .bricks-is-frontend .menu-open .menu-open-lang, .bricks-is-frontend .menu-open-close { transform: none; } }