/* =========================================================
   LONAS LITORAL - HEADER / MENÚ SOBRE SLIDER
   Joomla / Helix / SP Page Builder
========================================================= */

:root {
  --ll-red: #e30613;
  --ll-red-dark: #b9000a;
  --ll-black: #171717;
  --ll-header-height: 92px;
  --ll-header-mobile-height: 76px;
}

/* =========================================================
   HEADER BASE - TRANSPARENTE SOBRE SLIDER
========================================================= */

#sp-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--ll-header-height) !important;
  background: transparent !important;
  z-index: 9999 !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: all 0.25s ease !important;
}

/* CONTENEDOR HEADER */
#sp-header .container,
#sp-header .container-fluid {
  height: var(--ll-header-height) !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

/* =========================================================
   LOGO
========================================================= */

#sp-header .logo,
#sp-header .logo-image,
#sp-logo {
  display: flex !important;
  align-items: center !important;
}

#sp-header .logo img,
#sp-header .logo-image img,
#sp-logo img {
  max-height: 82px !important;
  width: auto !important;
  transition: all 0.25s ease !important;
}

/* =========================================================
   WRAPPER DEL MENÚ
========================================================= */

#sp-header .sp-megamenu-wrapper,
#sp-header nav.sp-megamenu-wrapper {
  margin-left: 60px !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* MENÚ PRINCIPAL */
#sp-header .sp-megamenu-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ÍTEMS DEL MENÚ */
#sp-header .sp-megamenu-parent > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: var(--ll-header-height) !important;
  padding: 0 !important;
}

/* LINKS DEL MENÚ */
#sp-header .sp-megamenu-parent > li > a {
  display: flex !important;
  align-items: center !important;
  height: var(--ll-header-height) !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.1px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
  transition: color 0.2s ease !important;
}

/* HOVER Y ACTIVO SOBRE SLIDER */
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a {
  color: var(--ll-red) !important;
}

/* LÍNEA ROJA DEL ÍTEM ACTIVO */
#sp-header .sp-megamenu-parent > li.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 42px;
  height: 3px;
  background: var(--ll-red);
  border-radius: 20px;
}

/* =========================================================
   FLECHA DEL MENÚ CON SUBMENÚ
========================================================= */

#sp-header .sp-megamenu-parent > li.sp-has-child > a,
#sp-header .sp-megamenu-parent > li.menu-deeper > a,
#sp-header .sp-megamenu-parent > li.parent > a {
  position: relative !important;
  padding-right: 0 !important;
}

/* FLECHA FONT AWESOME */
#sp-header .sp-megamenu-parent > li.sp-has-child > a::after,
#sp-header .sp-megamenu-parent > li.menu-deeper > a::after,
#sp-header .sp-megamenu-parent > li.parent > a::after {
  content: "\f107" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  margin-left: 8px !important;
  color: inherit !important;
  display: inline-block !important;
  transform: translateY(1px) !important;
  transition: transform 0.22s ease, color 0.22s ease !important;
}

/* ROTACIÓN AL PASAR EL MOUSE */
#sp-header .sp-megamenu-parent > li.sp-has-child:hover > a::after,
#sp-header .sp-megamenu-parent > li.menu-deeper:hover > a::after,
#sp-header .sp-megamenu-parent > li.parent:hover > a::after {
  transform: translateY(1px) rotate(180deg) !important;
}

/* OCULTA FLECHAS / ÍCONOS ROTOS DEL TEMPLATE */
#sp-header .sp-megamenu-parent > li > a .menu-toggler,
#sp-header .sp-megamenu-parent > li > a .fa,
#sp-header .sp-megamenu-parent > li > a .fas,
#sp-header .sp-megamenu-parent > li > a .far,
#sp-header .sp-megamenu-parent > li > a .caret {
  display: none !important;
}

/* =========================================================
   DROPDOWN / DESPLEGABLE
========================================================= */

#sp-header .sp-dropdown {
  top: 100% !important;
  min-width: 225px !important;
  margin-top: -6px !important;
  padding-top: 12px !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
}

/* MOSTRAR DROPDOWN */
#sp-header .sp-megamenu-parent > li:hover > .sp-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* CAJA DEL DESPLEGABLE */
#sp-header .sp-dropdown .sp-dropdown-inner {
  position: relative !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20) !important;
  padding: 10px !important;
  overflow: visible !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* TRIANGULITO SUPERIOR DEL DROPDOWN */
#sp-header .sp-dropdown .sp-dropdown-inner::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  z-index: -1;
}

/* LISTA DEL DROPDOWN */
#sp-header .sp-dropdown ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* ITEMS DEL DROPDOWN */
#sp-header .sp-dropdown li.sp-menu-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* LINKS DEL DROPDOWN */
#sp-header .sp-dropdown li.sp-menu-item > a {
  display: block !important;
  padding: 12px 15px !important;
  color: #171717 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 9px !important;
  background: transparent !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* HOVER DROPDOWN */
#sp-header .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-dropdown li.sp-menu-item.active > a {
  color: var(--ll-red) !important;
  background: rgba(227, 6, 19, 0.08) !important;
  padding-left: 19px !important;
}

/* DESPLEGABLE PRINCIPAL */
#sp-header .sp-dropdown.sp-dropdown-main {
  margin-left: 0 !important;
}

/* =========================================================
   HEADER AL HACER SCROLL - BLANCO
========================================================= */

#sp-header.menu-fixed,
#sp-header.header-sticky,
#sp-header.sticky,
#sp-header.is-sticky,
.sticky-wrapper.is-sticky #sp-header,
#sp-header.affix {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* LINKS DEL MENÚ CUANDO EL HEADER ESTÁ BLANCO */
#sp-header.menu-fixed .sp-megamenu-parent > li > a,
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.sticky .sp-megamenu-parent > li > a,
#sp-header.is-sticky .sp-megamenu-parent > li > a,
.sticky-wrapper.is-sticky #sp-header .sp-megamenu-parent > li > a,
#sp-header.affix .sp-megamenu-parent > li > a {
  color: #111111 !important;
  text-shadow: none !important;
}

/* HOVER Y ACTIVO CUANDO ESTÁ BLANCO */
#sp-header.menu-fixed .sp-megamenu-parent > li:hover > a,
#sp-header.menu-fixed .sp-megamenu-parent > li.active > a,
#sp-header.header-sticky .sp-megamenu-parent > li:hover > a,
#sp-header.header-sticky .sp-megamenu-parent > li.active > a,
#sp-header.sticky .sp-megamenu-parent > li:hover > a,
#sp-header.sticky .sp-megamenu-parent > li.active > a,
#sp-header.is-sticky .sp-megamenu-parent > li:hover > a,
#sp-header.is-sticky .sp-megamenu-parent > li.active > a,
.sticky-wrapper.is-sticky #sp-header .sp-megamenu-parent > li:hover > a,
.sticky-wrapper.is-sticky #sp-header .sp-megamenu-parent > li.active > a,
#sp-header.affix .sp-megamenu-parent > li:hover > a,
#sp-header.affix .sp-megamenu-parent > li.active > a {
  color: var(--ll-red) !important;
}

/* LOGO UN POCO MÁS CHICO AL HACER SCROLL */
#sp-header.menu-fixed .logo img,
#sp-header.menu-fixed .logo-image img,
#sp-header.menu-fixed #sp-logo img,
#sp-header.header-sticky .logo img,
#sp-header.header-sticky .logo-image img,
#sp-header.header-sticky #sp-logo img,
#sp-header.sticky .logo img,
#sp-header.sticky .logo-image img,
#sp-header.sticky #sp-logo img,
#sp-header.is-sticky .logo img,
#sp-header.is-sticky .logo-image img,
#sp-header.is-sticky #sp-logo img,
.sticky-wrapper.is-sticky #sp-header .logo img,
.sticky-wrapper.is-sticky #sp-header .logo-image img,
.sticky-wrapper.is-sticky #sp-header #sp-logo img,
#sp-header.affix .logo img,
#sp-header.affix .logo-image img,
#sp-header.affix #sp-logo img {
  max-height: 66px !important;
}

/* =========================================================
   OFFCANVAS / MOBILE TOGGLER
========================================================= */

#offcanvas-toggler {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

#offcanvas-toggler:hover {
  color: var(--ll-red) !important;
}

/* TOGGLER CUANDO EL HEADER ESTÁ BLANCO */
#sp-header.menu-fixed #offcanvas-toggler,
#sp-header.header-sticky #offcanvas-toggler,
#sp-header.sticky #offcanvas-toggler,
#sp-header.is-sticky #offcanvas-toggler,
.sticky-wrapper.is-sticky #sp-header #offcanvas-toggler,
#sp-header.affix #offcanvas-toggler {
  color: #111111 !important;
  text-shadow: none !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {
  #sp-header {
    height: var(--ll-header-mobile-height) !important;
    background: transparent !important;
  }

  #sp-header .container,
  #sp-header .container-fluid {
    height: var(--ll-header-mobile-height) !important;
  }

  #sp-header .logo img,
  #sp-header .logo-image img,
  #sp-logo img {
    max-height: 62px !important;
  }

  #sp-header .sp-megamenu-wrapper,
  #sp-header nav.sp-megamenu-wrapper {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }

  #sp-header .sp-megamenu-parent {
    display: none !important;
  }

  #offcanvas-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #sp-header.menu-fixed,
  #sp-header.header-sticky,
  #sp-header.sticky,
  #sp-header.is-sticky,
  .sticky-wrapper.is-sticky #sp-header,
  #sp-header.affix {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  #sp-header.menu-fixed .logo img,
  #sp-header.menu-fixed .logo-image img,
  #sp-header.menu-fixed #sp-logo img,
  #sp-header.header-sticky .logo img,
  #sp-header.header-sticky .logo-image img,
  #sp-header.header-sticky #sp-logo img,
  #sp-header.sticky .logo img,
  #sp-header.sticky .logo-image img,
  #sp-header.sticky #sp-logo img,
  #sp-header.is-sticky .logo img,
  #sp-header.is-sticky .logo-image img,
  #sp-header.is-sticky #sp-logo img,
  .sticky-wrapper.is-sticky #sp-header .logo img,
  .sticky-wrapper.is-sticky #sp-header .logo-image img,
  .sticky-wrapper.is-sticky #sp-header #sp-logo img,
  #sp-header.affix .logo img,
  #sp-header.affix .logo-image img,
  #sp-header.affix #sp-logo img {
    max-height: 56px !important;
  }

  /* OCULTA FLECHA EN MOBILE */
  #sp-header .sp-megamenu-parent > li.sp-has-child > a::after,
  #sp-header .sp-megamenu-parent > li.menu-deeper > a::after,
  #sp-header .sp-megamenu-parent > li.parent > a::after {
    display: none !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {
  #sp-header .sp-megamenu-wrapper,
  #sp-header nav.sp-megamenu-wrapper {
    margin-left: 36px !important;
    padding-right: 0 !important;
  }

  #sp-header .sp-megamenu-parent {
    gap: 22px !important;
  }

  #sp-header .sp-megamenu-parent > li > a {
    font-size: 13px !important;
  }

  #sp-header .logo img,
  #sp-header .logo-image img,
  #sp-logo img {
    max-height: 72px !important;
  }
}
/* =========================================================
   CORRECCIÓN LOGOS DESKTOP / MOBILE
========================================================= */

/* Desktop: muestra logo normal y oculta logo mobile */
@media (min-width: 992px) {
  #sp-header img.logo-image {
    display: inline-block !important;
  }

  #sp-header img.logo-image-phone {
    display: none !important;
  }
}

/* Mobile: oculta logo desktop y muestra logo mobile */
@media (max-width: 991px) {
  #sp-header img.logo-image {
    display: none !important;
  }

  #sp-header img.logo-image-phone {
    display: inline-block !important;
    width: auto !important;
    max-height: 62px !important;
  }
}

/* =========================================================
   OFFCANVAS MOBILE - CORRECCIÓN FINAL V2
   Compatible con Helix Ultimate: el ancho del panel y su
   posición cerrada deben coincidir para que no quede visible.
========================================================= */

/* El ícono hamburguesa hereda el color del header. */
#offcanvas-toggler > .fa,
#offcanvas-toggler > .fas,
#offcanvas-toggler > .far,
#offcanvas-toggler > i,
#offcanvas-toggler svg {
  color: inherit !important;
  fill: currentColor !important;
}

#offcanvas-toggler .burger-icon > span {
  background-color: currentColor !important;
}

@media (max-width: 991px) {
  /* ---------------------------------------------------------
     POSICIÓN DEL PANEL
     Helix oculta el menú usando left negativo. Como el ancho
     fue personalizado, también se corrige la posición cerrada.
  --------------------------------------------------------- */
  body.ltr.offcanvs-position-left .offcanvas-menu.left-1,
  body.ltr.offcanvs-position-left .offcanvas-menu {
    left: -360px !important;
    right: auto !important;
    top: 0 !important;
  }

  body.ltr.offcanvs-position-left.offcanvas-active .offcanvas-menu.left-1,
  body.ltr.offcanvs-position-left.offcanvas-active .offcanvas-menu {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
  }

  /* Panel completo */
  .offcanvas-menu,
  .offcanvas-menu.left-1,
  .offcanvas-menu.right-1 {
    width: 320px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, var(--ll-red) 0%, var(--ll-red-dark) 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.30) !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Neutraliza anchos, fondos y márgenes propios de Helix. */
  .offcanvas-menu > div,
  .offcanvas-menu .offcanvas-inner,
  .offcanvas-menu .offcanvas-inner .sp-module,
  .offcanvas-menu .offcanvas-inner .sp-module-content,
  .offcanvas-menu .offcanvas-inner nav,
  .offcanvas-menu .offcanvas-inner ul,
  .offcanvas-menu .offcanvas-inner li {
    box-sizing: border-box !important;
    background-color: transparent !important;
  }

  .offcanvas-menu .offcanvas-inner,
  .offcanvas-menu .offcanvas-inner .sp-module,
  .offcanvas-menu .offcanvas-inner .sp-module-content,
  .offcanvas-menu .offcanvas-inner nav,
  .offcanvas-menu .offcanvas-inner ul.menu {
    width: 100% !important;
    max-width: none !important;
  }

  .offcanvas-menu .offcanvas-inner .sp-module,
  .offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
    margin: 0 0 20px !important;
    padding: 0 !important;
  }

  .offcanvas-menu .offcanvas-inner {
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 70px 20px 32px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Botón cerrar: no depende de Font Awesome. */
  .offcanvas-menu .close-offcanvas {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    z-index: 30 !important;
  }

  .offcanvas-menu .close-offcanvas > * {
    display: none !important;
  }

  .offcanvas-menu .close-offcanvas::before {
    content: "×" !important;
    display: block !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
  }

  .offcanvas-menu .close-offcanvas:hover,
  .offcanvas-menu .close-offcanvas:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.23) !important;
    border-color: #ffffff !important;
  }

  /* Menú principal */
  .offcanvas-menu .offcanvas-inner ul.menu {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20) !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li > a,
  .offcanvas-menu .offcanvas-inner ul.menu > li > span,
  .offcanvas-menu .offcanvas-inner ul.menu > li > .menu-separator,
  .offcanvas-menu .offcanvas-inner ul.menu > li > .nav-header {
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    padding: 13px 10px !important;
    color: #ffffff !important;
    background: transparent !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    border-radius: 8px !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
  .offcanvas-menu .offcanvas-inner ul.menu > li > a:focus,
  .offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
  .offcanvas-menu .offcanvas-inner ul.menu > li.current > a,
  .offcanvas-menu .offcanvas-inner ul.menu > li.alias-parent-active > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
  }

  /* Reserva espacio para el botón del submenú dentro del ancho real. */
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a,
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator,
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header {
    padding-right: 54px !important;
  }

  /* Botón + / − del submenú. En Helix está dentro del enlace. */
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
  .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.33) !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
  }

  .offcanvas-menu .offcanvas-inner .menu-toggler > i,
  .offcanvas-menu .offcanvas-inner .menu-toggler > span {
    display: none !important;
  }

  .offcanvas-menu .offcanvas-inner .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner .menu-toggler::before {
    content: "+" !important;
    display: block !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  .offcanvas-menu .offcanvas-inner .menu-toggler::before {
    display: none !important;
  }

  .offcanvas-menu .offcanvas-inner li.menu-parent.menu-parent-open > a > .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner li.menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner li.menu-parent.menu-parent-open > .nav-header > .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner li.menu-parent[aria-expanded="true"] > a > .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner li.menu-parent[aria-expanded="true"] > .menu-separator > .menu-toggler::after,
  .offcanvas-menu .offcanvas-inner li.menu-parent[aria-expanded="true"] > .nav-header > .menu-toggler::after {
    content: "−" !important;
  }

  /* Submenús: ocupan todo el ancho disponible y no se recortan. */
  .offcanvas-menu .offcanvas-inner ul.menu-child,
  .offcanvas-menu .offcanvas-inner ul.menu > li > ul {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    padding: 5px 4px 7px 16px !important;
    border-left: 2px solid rgba(255, 255, 255, 0.38) !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu li li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu li li a,
  .offcanvas-menu .offcanvas-inner ul.menu li li span {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 10px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border-radius: 7px !important;
    opacity: 1 !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu li li a:hover,
  .offcanvas-menu .offcanvas-inner ul.menu li li a:focus,
  .offcanvas-menu .offcanvas-inner ul.menu li li.active > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
  }

  /* Textos, datos de contacto e íconos de módulos. */
  .offcanvas-menu .offcanvas-inner,
  .offcanvas-menu .offcanvas-inner a,
  .offcanvas-menu .offcanvas-inner p,
  .offcanvas-menu .offcanvas-inner li,
  .offcanvas-menu .offcanvas-inner span,
  .offcanvas-menu .offcanvas-inner strong,
  .offcanvas-menu .offcanvas-inner h1,
  .offcanvas-menu .offcanvas-inner h2,
  .offcanvas-menu .offcanvas-inner h3,
  .offcanvas-menu .offcanvas-inner h4,
  .offcanvas-menu .offcanvas-inner h5,
  .offcanvas-menu .offcanvas-inner h6,
  .offcanvas-menu .offcanvas-inner i,
  .offcanvas-menu .offcanvas-inner .fa,
  .offcanvas-menu .offcanvas-inner .fas,
  .offcanvas-menu .offcanvas-inner .far {
    color: #ffffff !important;
  }

  .offcanvas-menu .offcanvas-inner p {
    margin: 10px 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .offcanvas-menu .offcanvas-inner svg {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Overlay solamente cuando Helix abre el menú. */
  .offcanvas-overlay,
  .offcanvas-overlay::before {
    background: rgba(0, 0, 0, 0.58) !important;
  }
}