/* =========================================================
   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;
  }
}