/**
 * GABA Static Site Fixes – CSS
 * Soluciona: popup menú móvil, ISO 9001 en mobile, y ajustes visuales.
 */

/* ──────────────────────────────────────────
 * 1. POPUP MENÚ MÓVIL (Elementor popup #555)
 * ────────────────────────────────────────── */

/* Overlay oscuro detrás del popup */
.gaba-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gaba-popup-overlay--active {
  opacity: 1;
  visibility: visible;
}

/* Popup del menú – posición fija, slide-in desde derecha */
.elementor-555 {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 85vw !important;
  max-width: 360px !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  background: #00254E !important;
  overflow-y: auto !important;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: block !important;
  visibility: hidden;
}
.elementor-555.gaba-popup--active {
  transform: translateX(0);
  visibility: visible;
}

/* Hacer clickeable el ícono hamburguesa */
.elementor-element-4d9c67d .elementor-icon-wrapper,
.elementor-element-4d9c67d .elementor-icon {
  cursor: pointer !important;
}

/* ──────────────────────────────────────────
 * 2b. SUBMENÚS EN HEADER DESKTOP (Elementor oculta ul sin JS)
 *     Sin frontend.min.js completo, el selector Weglot no abre en escritorio.
 *     Páginas canvas (home ES/EN) no usan .elementor-location-header; gaba-fixes.js
 *     agrega la clase .gaba-header-main-nav al nav principal (fuera del popup 555).
 * ────────────────────────────────────────── */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-widget-nav-menu,
  .elementor-location-header .elementor-nav-menu--main,
  nav.gaba-header-main-nav {
    overflow: visible !important;
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children,
  nav.gaba-header-main-nav .elementor-nav-menu > li.menu-item-has-children {
    position: relative;
  }
  /* Sobrescribe .elementor-nav-menu ul { display: none } del widget Pro */
  .elementor-location-header
    .elementor-nav-menu--main
    .elementor-nav-menu
    li.menu-item-has-children:hover
    > ul.sub-menu,
  .elementor-location-header
    .elementor-nav-menu--main
    .elementor-nav-menu
    li.menu-item-has-children:focus-within
    > ul.sub-menu,
  .elementor-location-header
    .elementor-nav-menu--main
    .elementor-nav-menu
    li.menu-item-has-children.gaba-desktop-submenu-open
    > ul.sub-menu,
  nav.gaba-header-main-nav
    .elementor-nav-menu
    li.menu-item-has-children:hover
    > ul.sub-menu,
  nav.gaba-header-main-nav
    .elementor-nav-menu
    li.menu-item-has-children:focus-within
    > ul.sub-menu,
  nav.gaba-header-main-nav
    .elementor-nav-menu
    li.menu-item-has-children.gaba-desktop-submenu-open
    > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12em;
    z-index: 100000;
    background: #00254e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
    margin: 0;
    list-style: none;
  }
  .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-sub-item,
  nav.gaba-header-main-nav .sub-menu .elementor-sub-item {
    color: #fff !important;
  }
  .elementor-location-header .elementor-nav-menu--main .sub-menu a:hover,
  nav.gaba-header-main-nav .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ──────────────────────────────────────────
 * 2. MENÚ DROPDOWN INLINE (elementor-menu-toggle)
 * ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-nav-menu--toggle-open .elementor-nav-menu--dropdown {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #00254E;
    z-index: 9999;
    padding: 10px 0;
  }
  .elementor-nav-menu--toggle-open .elementor-nav-menu--dropdown .elementor-item {
    color: #fff !important;
    padding: 10px 20px;
    display: block;
    tabindex: 0;
  }
  .elementor-nav-menu--toggle-open .elementor-nav-menu--dropdown .elementor-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ──────────────────────────────────────────
 * 3. ISO 9001 – LIMITAR TAMAÑO EN MOBILE
 * ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* La imagen ISO 9001 en el footer (data-id="017aca9") */
  .elementor-element-017aca9 .elementor-widget-container img,
  .elementor-element-3a43908 .elementor-widget-container img {
    max-width: 180px !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 1024px) {
  .elementor-element-017aca9 .elementor-widget-container img,
  .elementor-element-3a43908 .elementor-widget-container img {
    max-width: 220px !important;
    height: auto !important;
  }
}