/* ===== Lockers — Dropdown de menú (SERVICIOS) ===== */
/* Aplica a los nav-menu de Elementor del header. Oculta el submenú por
   defecto y lo muestra en hover, con el estilo verde oscuro del sitio.
   Independiente del JS de Elementor: funciona solo con CSS. */

/* El item padre debe ser contenedor de posicionamiento */
.elementor-nav-menu > li.menu-item-has-children{
  position: relative;
}

/* Submenú: oculto por defecto */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown{
  position: absolute !important;
  top: 100% !important;
  /* Anclado al borde izquierdo del item: el panel crece hacia la derecha,
     no sobresale hacia el logo. */
  left: 0 !important;
  right: auto !important;
  transform: translateY(8px) !important;

  min-width: 240px !important;
  margin: 0 !important;
  padding: 8px !important;

  background: rgba(8, 14, 12, 0.98) !important;
  border: 1px solid rgba(0, 255, 136, 0.20) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 255, 136, 0.04) !important;
  backdrop-filter: blur(8px);

  display: block !important;          /* anula display de Elementor */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
  z-index: 999 !important;
  list-style: none !important;
}

/* Mostrar en hover/focus del item padre */
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Puente invisible para que el hover no se corte en el gap padre→submenú */
.elementor-nav-menu > li.menu-item-has-children::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
}

/* Items del submenú */
.elementor-nav-menu .sub-menu li{
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* Links del submenú */
.elementor-nav-menu .sub-menu li > a,
.elementor-nav-menu .sub-menu li > a.elementor-sub-item{
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  margin: 2px 0 !important;

  color: #e8f0ea !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  text-align: left !important;

  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Hover de cada link */
.elementor-nav-menu .sub-menu li > a:hover,
.elementor-nav-menu .sub-menu li > a:focus{
  background: rgba(0, 255, 136, 0.10) !important;
  border-color: rgba(0, 255, 136, 0.22) !important;
  color: #ffffff !important;
}

/* Item activo (página actual): sutil, sin el cuadro gris feo de Elementor */
.elementor-nav-menu .sub-menu li.current-menu-item > a,
.elementor-nav-menu .sub-menu li > a.elementor-item-active,
.elementor-nav-menu .sub-menu li > a.elementor-sub-item.elementor-item-active{
  background: rgba(0, 255, 136, 0.14) !important;
  border-color: rgba(0, 255, 136, 0.30) !important;
  color: #ffffff !important;
}