/* Variante en acordeón del megamenú (columna "PRODUCTOS" del mega-menú existente en desktop, y panel de categorías del bottom sheet en mobile). Namespacing bajo .eco-megamenu-acc, independiente del flyout horizontal (.eco-megamenu, usado en /test-megamenu-preview/) para no interferir. Mobile (<=1024px): acordeón inline de 3 niveles, sin cambios de siempre. Desktop (>=1025px, mismo breakpoint que usa el sitio para el botón "Menú"): el nivel 1 se mantiene como lista vertical, pero su panel de nivel 2+3 deja de empujar el resto del menú hacia abajo — se muestra siempre expandido (sin doble clic) como un panel flotante que se sobrepone a todo, reubicado por JS como hijo directo de mientras está abierto (ver eco-megamenu-accordion.js) para que ningún contenedor de Elementor con overflow/transform lo recorte. */ .eco-megamenu-acc { --eco-mma-accent: #ed7e35; --eco-mma-accent-soft: rgba(237, 126, 53, 0.12); --eco-mma-dark: #0f2244; --eco-mma-text: #20272b; --eco-mma-muted: #8a94a0; --eco-mma-border: #ebedef; font-family: inherit; max-height: 60vh; overflow-y: auto; } .eco-megamenu-acc ul { margin: 0; padding: 0; list-style: none; } .eco-megamenu-acc__level1 > .eco-megamenu-acc__item--l1 { border-bottom: 1px solid var(--eco-mma-border); } .eco-megamenu-acc__level1 > .eco-megamenu-acc__item--l1:last-child { border-bottom: none; } .eco-megamenu-acc__toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-radius: 6px; cursor: pointer; font: inherit; text-align: left; padding: 9px 8px; color: var(--eco-mma-dark); font-weight: 700; font-size: 13.5px; transition: background-color .15s ease, color .15s ease; } .eco-megamenu-acc__toggle:hover, .eco-megamenu-acc__toggle:focus-visible, .eco-megamenu-acc__item--l1.is-open > .eco-megamenu-acc__toggle { background-color: var(--eco-mma-accent-soft); color: var(--eco-mma-accent); outline: none; } .eco-megamenu-acc__toggle--l2 { font-weight: 600; font-size: 13px; padding: 6px 8px; } .eco-megamenu-acc__label { flex: 1; } .eco-megamenu-acc__count { font-size: 11px; font-weight: 500; color: var(--eco-mma-muted); } .eco-megamenu-acc__chevron { width: 8px; height: 8px; border-right: 2px solid var(--eco-mma-muted); border-bottom: 2px solid var(--eco-mma-muted); transform: rotate(-45deg); transition: transform .15s ease; flex-shrink: 0; } .eco-megamenu-acc__toggle[aria-expanded="true"] > .eco-megamenu-acc__chevron { transform: rotate(45deg); } .eco-megamenu-acc__level2, .eco-megamenu-acc__level3 { display: none; padding-left: 14px; } .eco-megamenu-acc__item--l1.is-open > .eco-megamenu-acc__level2, .eco-megamenu-acc__item--l2.is-open > .eco-megamenu-acc__level3 { display: block; } .eco-megamenu-acc__item--l3 a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; color: var(--eco-mma-text); text-decoration: none; font-size: 12.5px; transition: background-color .15s ease, color .15s ease; } .eco-megamenu-acc__item--l3 a:hover, .eco-megamenu-acc__item--l3 a:focus-visible { color: var(--eco-mma-accent); background-color: var(--eco-mma-accent-soft); text-decoration: none; outline: none; } .eco-megamenu-acc__badge { font-size: 9px; font-weight: 700; color: #fff; background: var(--eco-mma-dark); border-radius: 999px; padding: 1px 6px; white-space: nowrap; } .eco-megamenu-acc::-webkit-scrollbar { width: 6px; } .eco-megamenu-acc::-webkit-scrollbar-thumb { background: var(--eco-mma-border); border-radius: 999px; } /* --------------------------------------------------------------------- Desktop: nivel 1 vertical + panel de nivel 2/3 flotante y horizontal. */ @media (min-width: 1025px) { .eco-megamenu-acc { max-height: none; overflow: visible; } .eco-megamenu-acc__level2--floating { display: none; position: fixed; z-index: 2147483647; background: #fff; border: 1px solid var(--eco-mma-border); border-radius: 10px; box-shadow: 0 14px 36px rgba(15, 34, 68, .18); padding: 20px 24px; min-width: 640px; max-width: min(920px, calc(100vw - 32px)); max-height: min(70vh, calc(100vh - 32px)); overflow-y: auto; columns: 3; column-gap: 28px; } .eco-megamenu-acc__level2--floating.is-open { display: block; } .eco-megamenu-acc__item--l2 { break-inside: avoid; margin-bottom: 16px; } /* Sin doble clic en desktop: el nivel 3 va siempre visible bajo cada encabezado de nivel 2, como en el flyout de /test-megamenu-preview/. */ .eco-megamenu-acc__toggle--l2 { cursor: default; pointer-events: none; background: none !important; color: var(--eco-mma-dark) !important; text-transform: uppercase; letter-spacing: .02em; font-size: 12.5px; } .eco-megamenu-acc__toggle--l2 .eco-megamenu-acc__chevron { display: none; } .eco-megamenu-acc__level3 { display: block !important; padding-left: 0; } }