/* gameria_megamenu - front
   Tokens alineados a la identidad de gameria.es (mismos que product-list.css):
   texto #123341 - teal #08a48f - sin sombras difusas, solo bordes planos */
.gm-nav{--gm-bg:#fff;--gm-fg:#123341;--gm-hover:#08a48f;--gm-sub-bg:#fff;--gm-border:#e3e3e3;--gm-radius:4px;--gm-cols:4;position:relative;display:block;font-family:'Montserrat',sans-serif}
.gm-nav ul{list-style:none;margin:0;padding:0}
.gm-nav a{text-decoration:none;color:inherit}

/* Fix contenedor Creative Elements: recorta los desplegables */
.elementor-widget-container:has(.gm-nav),
.elementor-widget-module .elementor-widget-container,
.elementor-widget-shortcode:has(.gm-nav) .elementor-widget-container{overflow:visible !important}
.elementor-element:has(> .elementor-widget-container > .gm-nav){z-index:120}

.gm-root{display:flex;flex-wrap:wrap;align-items:stretch}
.gm-top{position:relative}
.gm-link{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;color:var(--gm-fg);font-weight:400;line-height:1.2;white-space:nowrap;transition:color .15s}
.gm-top>.gm-link{height:100%;font-size:12px;letter-spacing:1px}
.gm-top:hover>.gm-link,.gm-node>.gm-link:hover{color:var(--gm-hover)}
.gm-icon{font-style:normal;line-height:1}
.gm-badge{background:var(--gm-hover);color:#fff;font-size:.65rem;font-weight:700;line-height:1;padding:.2em .45em;border-radius:99px;text-transform:uppercase}

/* Submenus desktop */
.gm-sub{position:absolute;top:100%;left:0;z-index:120;min-width:220px;background:var(--gm-sub-bg);border:1px solid var(--gm-border);border-top:none;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.gm-top.gm-open>.gm-sub,.gm-top:hover>.gm-sub{opacity:1;visibility:visible;transform:translateY(0)}
.gm-sub-inner{padding:.6rem}
.gm-sub .gm-link{padding:.45rem .7rem;font-weight:500;white-space:normal}
.gm-sub .gm-list .gm-list{padding-left:.8rem}
.gm-sub .gm-list .gm-link{font-weight:400;opacity:.85;font-size:.92em}

/* Megamenu: anclado al contenedor de la web, no al item */
.gm-sub-mega{--gm-mega-max:1480px;--gm-mega-pad:1.75rem;left:0;width:var(--gm-mega-w,var(--gm-mega-max))}
.gm-sub-mega .gm-sub-inner{padding:1.5rem var(--gm-mega-pad) 1.9rem}
.gm-mega-head{font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gm-fg);padding-bottom:.7rem;border-bottom:1px solid var(--gm-border);margin-bottom:1.1rem}
.gm-mega-grid{display:grid;grid-template-columns:repeat(var(--gm-cols),minmax(0,1fr));gap:.2rem 2.5rem;align-items:start}
.gm-col-title{font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;color:var(--gm-hover);padding:0 0 .5rem;margin-bottom:.2rem}
.gm-sub-mega .gm-link{padding:.3rem 0}
.gm-sub-mega .gm-list .gm-list{padding-left:.9rem}
.gm-col-wide,.gm-col-span-2{grid-column:span 2}
.gm-col-span-3{grid-column:span 3}
.gm-col-span-4{grid-column:span 4}
.gm-col-end{justify-self:end}
.gm-html img{max-width:100%;height:auto;display:block}

.gm-expand,.gm-burger{display:none;background:none;border:0;cursor:pointer}

/* Movil: la clase la pone el script, asi el breakpoint es configurable */
.gm-nav.gm-mobile .gm-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;padding:10px}
.gm-nav.gm-mobile .gm-burger span{display:block;height:2px;background:var(--gm-fg);transition:transform .2s,opacity .2s}
.gm-nav.gm-mobile.gm-mobile-open .gm-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gm-nav.gm-mobile.gm-mobile-open .gm-burger span:nth-child(2){opacity:0}
.gm-nav.gm-mobile.gm-mobile-open .gm-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.gm-nav.gm-mobile .gm-root{display:none;flex-direction:column;background:var(--gm-bg);border-top:1px solid var(--gm-border)}
.gm-nav.gm-mobile.gm-mobile-open .gm-root{display:flex}
.gm-nav.gm-mobile .gm-top,.gm-nav.gm-mobile .gm-node{border-bottom:1px solid var(--gm-border);position:relative}
.gm-nav.gm-mobile .gm-sub{position:static;width:auto !important;left:0 !important;min-width:0;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none}
.gm-nav.gm-mobile .gm-top:hover>.gm-sub{display:none}
.gm-nav.gm-mobile .gm-top.gm-open>.gm-sub,.gm-nav.gm-mobile .gm-node.gm-open>.gm-list{display:block}
.gm-nav.gm-mobile .gm-sub-mega .gm-sub-inner{padding:.4rem .8rem}
.gm-nav.gm-mobile .gm-mega-grid{grid-template-columns:1fr;gap:0}
.gm-nav.gm-mobile .gm-mega-head{display:none}
.gm-nav.gm-mobile .gm-col-span-2,.gm-nav.gm-mobile .gm-col-span-3{grid-column:auto}
.gm-nav.gm-mobile .gm-node>.gm-list{display:none;padding-left:.9rem}
.gm-nav.gm-mobile .gm-expand{display:block;position:absolute;top:0;right:0;width:46px;height:46px}
.gm-nav.gm-mobile .gm-expand::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-6px 0 0 -4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.gm-nav.gm-mobile .gm-open>.gm-expand::after{transform:rotate(-135deg);margin-top:-2px}

/* Menu vertical: barra lateral con desplegables laterales */
.gm-t-vertical .gm-root{flex-direction:column;width:var(--gm-vertical-w,100%);border:1px solid var(--gm-border);border-radius:var(--gm-radius);background:var(--gm-sub-bg)}
.gm-t-vertical .gm-top{border-bottom:1px solid var(--gm-border)}
.gm-t-vertical .gm-top:last-child{border-bottom:0}
.gm-t-vertical .gm-sub{top:0;left:100%;min-width:240px}
.gm-t-vertical .gm-sub-mega{width:var(--gm-mega-w,760px)}
.gm-t-vertical .gm-burger{display:none}

/* Menu movil dedicado: panel deslizante
   2026-09-22: tipo `mobile` del propio modulo, sin usar hasta ahora (ver
   scripts/gm_menu_movil_dedicado.php) -- de fabrica traia solo lo basico
   y hubo que completar varias reglas al probarlo de verdad por primera
   vez, en Chrome real:

   1. `.gm-burger` sin `position`/`z-index`: al abrirse, el panel fijo
      (z-index:1000) queda ENCIMA del propio boton que lo abre, que
      pierde el clic para cerrar -- comprobado con elementFromPoint en
      las coordenadas del boton, devolvia un enlace del menu, no el
      boton. Con `position:relative;z-index:1001` el boton gana.
   2. Sin el `.gm-mobile-open .gm-burger span` de aqui, el icono se
      quedaba en 3 rayas siempre -- la animacion a "X" solo estaba
      escrita para `.gm-nav.gm-mobile` (el modo contraido del menu de
      ESCRITORIO), no para este tipo dedicado.
   3. `height:100vh`/`100dvh`: sin altura explicita, el `top:0;bottom:0`
      no bastaba para que el panel quedara del alto del viewport --
      comprobado (`getComputedStyle().height` daba 1184px en un viewport
      de 844, el alto de TODO el contenido en vez del recorte esperado).
   4. `flex-wrap:nowrap`: `.gm-root` hereda `flex-wrap:wrap` de la regla
      base (pensada para el menu horizontal, que envuelve en fila). En
      columna, con una altura ya fijada por el punto 3, ese `wrap`
      partía el listado en una SEGUNDA COLUMNA en cuanto el contenido no
      cabía verticalmente (p.ej. con un desplegable abierto) -- así
      salían enlaces flotando fuera de la caja del panel, comprobado
      viendo la posición real de cada `<li>` con getBoundingClientRect.
   5. `padding-top:124px`: el panel cubre TODA la pantalla desde arriba
      (top:0), pero la hamburguesa/X vive en su posición normal de la
      cabecera (fila de iconos, ~69px desde arriba) -- sin este hueco el
      primer par de enlaces del menú quedaban debajo del propio botón de
      cerrar. 124px = borde inferior de la fila de iconos (69+44=113)
      más un margen. Si algún día cambia el alto de la cabecera (aviso
      de envío + fila de iconos), hay que volver a medir este valor. */
.gm-t-mobile .gm-burger{position:relative;z-index:1001;display:flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;padding:10px}
.gm-t-mobile .gm-burger span{display:block;height:2px;background:var(--gm-fg);transition:transform .2s,opacity .2s}
.gm-t-mobile.gm-mobile-open .gm-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gm-t-mobile.gm-mobile-open .gm-burger span:nth-child(2){opacity:0}
.gm-t-mobile.gm-mobile-open .gm-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.gm-t-mobile .gm-root{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;z-index:1000;width:min(var(--gm-mega-max,320px),86vw);flex-direction:column;flex-wrap:nowrap;background:var(--gm-bg);border-right:1px solid var(--gm-border);overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease;display:flex;padding-top:124px}
.gm-t-mobile.gm-mobile-open .gm-root{transform:translateX(0)}
.gm-t-mobile .gm-top,.gm-t-mobile .gm-node{border-bottom:1px solid var(--gm-border);position:relative}
.gm-t-mobile .gm-sub{position:static;width:auto;min-width:0;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none}
.gm-t-mobile .gm-top.gm-open>.gm-sub,.gm-t-mobile .gm-node.gm-open>.gm-list{display:block}
.gm-t-mobile .gm-node>.gm-list{display:none;padding-left:.9rem}
.gm-t-mobile .gm-sub-mega .gm-sub-inner{padding:.4rem .8rem}
.gm-t-mobile .gm-mega-grid{grid-template-columns:1fr;gap:0}
.gm-t-mobile .gm-mega-head{display:none}
.gm-t-mobile .gm-col-span-2,.gm-t-mobile .gm-col-span-3{grid-column:auto}
.gm-t-mobile .gm-expand{display:block;position:absolute;top:0;right:0;width:46px;height:46px}
.gm-t-mobile .gm-expand::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-6px 0 0 -4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}

/* Sticky */
.gm-nav[data-gm-sticky="1"].gm-stuck{position:fixed;top:0;left:0;right:0;z-index:900;background:var(--gm-bg);box-shadow:0 2px 10px rgba(0,0,0,.1)}

/* Animacion de apertura */
.gm-nav[data-gm-anim="none"] .gm-sub{transition:none}
.gm-nav[data-gm-anim="slide"] .gm-sub{transform:translateY(12px)}