/* ==== SP MegaMenu (Helix Ultimate) — Submenús a la IZQUIERDA + Offset vertical ==== */
@media (min-width: 992px) {

  /* Ajuste rápido: define aquí la separación vertical deseada */
  :root {
    --submenu-offset: 12px; /* ← modifica este valor (8–16px suele ir bien) */
  }

  /* 1) El <li> padre como ancla y sin recortes */
  .sp-megamenu-parent > li {
    position: relative !important;
    overflow: visible !important;
  }

  /* 2) Submenú principal abre a la IZQUIERDA; bajamos un poco el panel */
  .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main {
    left: auto !important;
    right: 100% !important;    /* a la izquierda del <li> */
    top: 0 !important;         /* referencia del ancla */
    margin: 0 !important;
    padding: 0 !important;

    /* Desplazamiento vertical suave (preferido: no rompe cálculos del tema) */
    transform: translateY(var(--submenu-offset)) !important;
  }

  /* 2b) Si el tema marca “sp-menu-right”, seguimos forzando izquierda y offset */
  .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.sp-menu-right {
    left: auto !important;
    right: 100% !important;
    transform: translateY(var(--submenu-offset)) !important;
  }

  /* 3) Subniveles en cascada también a la IZQUIERDA + mismo offset */
  .sp-dropdown.sp-dropdown-sub {
    left: auto !important;
    right: 100% !important;
    transform: translateY(var(--submenu-offset)) !important;
  }

  /* 4) Mantener visible el panel mientras se cruza con el ratón */
  .sp-megamenu-parent > li:hover > .sp-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 5) Hover-buffer (puente) para que no se cierre al mover el ratón */
  .sp-megamenu-parent > li > .sp-dropdown::before {
    content: "";
    position: absolute;
    top: calc(-20px - var(--submenu-offset));
    bottom: -20px;
    right: -40px;          /* puente hacia el lado del padre (derecha del panel) */
    width: 50px;
    background: transparent;
    z-index: 99999;
  }

  /* 6) Limpieza visual (sin marcos; si quieres marco, comenta estas dos) */
  .sp-dropdown.sp-dropdown-main,
  .sp-dropdown.sp-dropdown-sub,
  .sp-megamenu-parent > li > .sp-dropdown,
  .sp-megamenu-parent > li:hover > .sp-dropdown,
  .sp-dropdown::before,
  .sp-dropdown::after {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 7) Fallback: si algún JS/CSS anula transform, forzamos con top calc() */
  .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.use-top-offset,
  .sp-dropdown.sp-dropdown-sub.use-top-offset {
    /* Úsalo añadiendo la clase .use-top-offset al dropdown si hiciera falta */
    top: var(--submenu-offset) !important; /* en vez de 0 */
    transform: none !important;
  }
}

root { --submenu-offset: 12px; } /* Ajusta aquí (10–16px) */

  /* Submenú de primer nivel (el panel grande) */
  header #sp-header nav.sp-megamenu-wrapper
  .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main {
    /* prioridad alta y específica */
    top: var(--submenu-offset) !important;      /* antes era 0 */
    transform: none !important;                 /* evitamos compuestos raros */
    margin-top: 0 !important;                   /* neutraliza márgenes previos */
  }

  /* Subniveles (cascada) */
  header #sp-header nav.sp-megamenu-wrapper
  .sp-dropdown.sp-dropdown-sub {
    top: var(--submenu-offset) !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  /* Asegurar que el <li> ancla no recorta y posiciona correctamente */
  header #sp-header nav.sp-megamenu-wrapper
  .sp-megamenu-parent > li {
    position: relative !important;
    overflow: visible !important;
  }

  /* Mantener el panel visible mientras se cruza con el ratón */
  header #sp-header nav.sp-megamenu-wrapper
  .sp-megamenu-parent > li:hover > .sp-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* (Opcional) si quieres un pequeño "puente" anti-cierre al mover el ratón */
  header #sp-header nav.sp-megamenu-wrapper
  .sp-megamenu-parent > li > .sp-dropdown::before {
    content: "";
    position: absolute;
    top: calc(-20px - var(--submenu-offset));
    bottom: -20px;
    right: -40px; /* porque abre hacia la izquierda */
    width: 50px;
    background: transparent;
    z-index: 99999;
  }
}