header {
  /* margin: 10px; */
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: white;
  -webkit-transition: height 0.3s ease-out, background-color 0.3s ease-out,
    border-bottom-color 0.3s ease-out;
  -o-transition: height 0.3s ease-out, background-color 0.3s ease-out,
    border-bottom-color 0.3s ease-out;
  transition: height 0.3s ease-out, background-color 0.3s ease-out,
    border-bottom-color 0.3s;
     
    overflow: hidden; /* Asegúrate de que no haya scroll */
}

/* AÑADO ESTO LUCIA */
body .woocommerce-page .product img {
    height: auto !important;
    max-width: 100% !important;
}
.transparent {
  /* background-color: rgba(255, 255, 255, 0); Fondo completamente transparente */
  background-color: rgba(255, 255, 255, 0.6); /* Fondo más transparente */
  backdrop-filter: blur(10px); 
}
/* AÑADO ESTO LUCIA */
header.collapsed {
  background-color: white;
}

#myCabecera {
  position: relative;
  height: 100%;
  overflow: visible;
  margin: 0 0.5em;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  z-index: 2;
 
    /* margin: 0 10px; Ejemplo de margen */
   

}
@media (max-width: 640px) {
  #myCabecera {
    margin: 0 0.5em 0 0;
  }
  .header-left,
  .header-right {
    display: flex;
    justify-content: flex-end;
  }
}

#hamburuesaMobil {
  width: 25px;
  height: 60px;
  padding-right: 0;
  z-index: 9999;
}
.menu-btn {
  display: block;
  margin: 1rem 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
  font-style: normal;
}
.menu-btn.open {
  position: absolute;
  top: 35%;
  right: 20px;
  margin: 0;
}
.menu-btn span {
  display: none;
  position: absolute;
  color: var(--neutro1);
  left: 100%;
  top: 5px;
}
.menu-btn:before,
.menu-btn:after {
  background-color: var(--color1);
  content: "";
  display: block;
  height: 3px;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
.menu-btn.open:before,
.menu-btn.open:after {
  background-color: var(--color5);
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
.menu-btn:before {
  box-shadow: 0 10px 0 var(--color1);
  margin-bottom: 16px;
}
.menu-btn.open:before {
  box-shadow: 0 0 0 var(--color1);
  transform: translateY(10px) rotate(45deg);
  cursor: pointer;
}
.menu-btn.open:after {
  transform: translateY(-9.2px) rotate(-45deg);
  cursor: pointer;
}
.menu-btn.open span {
  margin-left: 10px;
  display: block;
}

.header-left,
.header-right {
  display: flex;
}

.header-left,
.header-right {
  padding-right: 25px;
}

@media (max-width: 450px) {
  .header-left,
  .header-right {
    padding-right: 25px;
  }
}

.contenedor-izquierda-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: right;
  align-items: center;
  margin-left: 81px;
}

.contenedor-derecha-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.header-right {
  /* -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end; */
}

a.logo {
  z-index: 9995;
  display: block;
}
.logo_principal {
  height: 100%;
  width: 100%;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  -webkit-transition: top 0.2s ease-out, opacity 0.2s ease-out;
  -o-transition: top 0.2s ease-out, opacity 0.2s ease-out;
  /*transition: top 0.2s ease-out, opacity 0.2s ease-out;*/
}
.logo_isologo {
  position: absolute;
  top: 130px;
  transition: top 0.2s ease-out;
  height: 100%;
  width: 200px;
}

.logo_isologo_menu img {
  max-height: 35px;
  width: 100%;
}

.logo_isologo_menu,
.logo_isologo.disable,
.logo_principal.disable {
  display: none;
}
.logo_isologo_menu.active {
  display: block;
}
.logo_principal img {
  width: 100%;
  margin: 10px auto;
  max-height: 50px;
}

.logo_isologo img {
  max-height: 60%;
  filter: grayscale(100%);
  min-height: 50px;
  width: 200px;
}

header.collapsed .logo_principal {
  position: relative;
  top: -100px;
  display: none;
}

header.collapsed .logo_isologo {
  top: 12.5px;
}

header.collapsed.color .logo_isologo img {
  filter: grayscale(0%);
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}

/*nav {
  display: flex;
  justify-content: center;
}*/

nav > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  padding-left: 0;
  padding-right: 40px;
}

nav > ul > li {
  margin: 0 10px;
  padding-bottom: 0;
  border-bottom: unset;
}
/*nav > ul > li:after {
	content: '';
	position: relative;
    border-bottom: 1px solid white;
    width: 85%;
    margin: 0 auto;
}*/
nav > ul > li:before {
  display: none;
}

nav > ul > li.Marcas {
  padding-left: 10px;
  padding-right: 10px;
}

nav > ul > li > a {
  color: var(--neutro2);
  font-weight: 700;
  font-size: calc(var(--tamanio-base) * 0.825rem);
}
nav > ul > li > a:hover {
  color: var(--color1);
}

nav > ul#menu_main > li.secundario {
  display: none;
}

nav > ul#menu_main > li > a {
  text-transform: uppercase;
  font-weight: 500;
}
nav > ul#menu_main > li.secundario.Titulo > a {
  pointer-events: none;
  cursor: default;
}
nav > ul#menu_main > li.secundario.Titulo.hidden > a {
  display: none;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li {
  width: 30%;
  list-style-type: none;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  margin: 5px 0;
  padding: 1px;
  pointer-events: none;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li.sinfondo {
  background-color: transparent;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li:before {
  content: unset;
  color: unset;
  font-size: unset;
  font-weight: unset;
  display: unset;
  width: unset;
  margin-left: unset;
}
nav > ul#menu_main > li.secundario.Titulo.Combustible > ul.sub-menu > li {
  width: 45%;
}
nav > ul#menu_main > li.secundario.Titulo.Tipos > ul.sub-menu > li {
  width: 30%;
}

nav.active
  > ul#menu_main
  > li.secundario.Marcas.Titulo.Tipos
  > ul.sub-menu
  > li {
  width: 11%;
  margin-left: 2px;
  margin-right: 2px;
}
nav.active
  > ul#menu_main
  > li.secundario.Marcas.Titulo.Tipos
  > ul.sub-menu
  > li.fullwidth {
  width: 100%;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li > a {
  color: black;
  display: block;
  width: 100%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li.sinfondo > a {
  color: white;
}

.contactosHeader {
  display: flex;
}

.contactosHeader a,
.contactosHeader span {
  color: var(--neutro2);
  font-weight: 700;
  font-size: calc(var(--tamanio-base) * 1.2rem);
  margin: 0 5px;
}

.telefonoCabecera {
  font-size: 25px;
/*   display: flex !important;
  align-items: center;
  gap: 7px; */
}

.contactosHeader a:hover,
.contactosHeader span:hover {
  color: var(--color1);
}

header.collapsed a,
header.collapsed nav > ul > li > a,
header.collapsed nav > ul > li > span {
  color: var(--neutro2);
}

header.collapsed a:hover,
header.collapsed nav > ul > li > a:hover,
header.collapsed nav > ul > li > span:hover {
  color: var(--color1);
}

.telefonoCabecera svg {
  fill: black;
}

.contactosHeader a.btn,
.contactosHeader span.btn {
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  border: none;
  margin: 0 5px;
  padding: calc(var(--tamanio-base) * 0.8rem);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1rem;
  -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: var(--color3);
  font-size: calc(var(--tamanio-base) * 1rem);
  color: var(--neutro1);
  border-radius: 5px;
  font-weight: 300;
}
.contactosHeader a.btn:hover,
.contactosHeader span.btn:hover {
  background-color: var(--color1);
}

header.collapsed.color a.btn,
header.collapsed.color span.btn {
  background-color: var(--color1);
  color: white;
}
header.collapsed.color a.btn:hover,
header.collapsed.color span.btn:hover {
  background-color: var(--color2);
}

.camuflaEnlace,
.camuflaEnlaceBlank,
.camuflaEnlaceBlankCompartir {
  padding: 0 5px;
  cursor: pointer;
}

/*article.page {
  /* margin-top: -16px; */
  /*padding: 0 15px;
}*/

.contactosHeader .xs-hidden {
  display: inline-block;
}

.whatsappCabecera,
.facebookCabecera,
.instagramCabecera {
  min-height: 25px !important;
  width: auto !important;
  height: 25px !important;
}

@media (max-width: 1600px) {
  nav > ul {
    padding-right: 0px;
  }
}

@media (max-width: 1400px) {
  .logo_principal img {
    min-width: unset;
    max-width: 165px;
  }
}
@media (max-width: 1270px) {
  nav > ul > li > a {
    font-size: calc(var(--tamanio-base) * 0.7rem);
  }
}
@media (min-width: 1025px) {
  nav.menu_main_nav_area.active{
    position: fixed;
    display: block;
    height: 100%;
    left: 0;
    animation-name: apertura;
  }
  nav.active {
    padding-top: 65px;
    padding-bottom: 20px;
    width: 100vw;
    box-shadow: 0 2px 6px 0 rgb(146 145 145 / 36%);
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9990;
  }
  nav.active > ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    width: 98%;
    margin: 0 auto;
    border-bottom: none;
    flex-direction: column;
    padding-right: 0;
    height: 100vw;
  }
  nav.active > ul > li {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    margin: 0;
  }
  nav.active > ul > li > a {
    color: var(--neutro1);
    font-weight: 500;
    font-size: calc(var(--tamanio-base) * 1.2rem);
  }
  .menu_main_nav_area_mobile{ 
    display: none;
  }
  header.collapsed nav.active > ul > li > a,
  header.collapsed nav.active > ul > li > span {
    color: var(--neutro1);
  }
  nav.active > ul#menu_main > li.secundario {
    display: inline-block;
  }
  nav.active > ul > li > a {
    color: var(--neutro1);
    font-weight: 700;
    font-size: calc(var(--tamanio-base) * 0.9rem);
  }
  nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {
    width: 530px;
    margin: 0 auto;
    padding-left: 0;
    transform: scaleY(1);
        transition: all .3s var(--easing-in-out-cubic);
        transition-property: transform, opacity;
  }

  nav.active > ul > li > a {
    font-size: calc(var(--tamanio-base) * 1.2rem);
  }
}
@media (min-width: 1025px) {
    #hamburuesaMobil {
    padding-top: 3px;
    display: none;
    width: 25%;
  }
}
@media (max-width: 1024px) {
  .logo_principal img {
    /* width: 100%; */
    margin: 0 auto;
    min-width: 110px;
    max-width: 150px;
  }

  .contactosHeader .xs-hidden {
    display: none;
  }
  /*esto es común a todos*/
  #hamburuesaMobil {
    padding-top: 3px;
    width: 25%;
  }

  #myCabecera {
    overflow: visible;
  }

  .logo_isologo {
    position: absolute;
    top: -130px;
  }

  menu_main_nav_area{
    display: none;
  }

  /* The animation code */
  @keyframes apertura {
    from {
      left: -100%;
    }
    to {
      left: -10%;
    }
  }
  @keyframes cierre {
    from {
      left: -10%;
    }
    to {
      left: -100%;
    }
  }

  nav:not(.rank-math-breadcrumb) {
    display: none;
    padding-top: 100px;
    padding-bottom: 65px;
    width: 100vw;
    box-shadow: unset;
    border: unset;
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: -100%;
    animation-name: cierre;
    z-index: 1;
  }

  nav.menu_main_nav_area_mobile.active {
    position: fixed;
    display: block;
    height: 100vh;
    left: 0;
    overflow-y: auto;
    animation-name: apertura;
  }

  /* Contenedor principal */
.menu_main_nav_area_mobile {
  position: relative;
}

.menu_main_nav_area_mobile .menu_main_nav {
  display: flex;
  row-gap: 10px;
  width: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0 15px;
  padding-top: 20px;
}

.menu_main_nav_area_mobile .menu_main_nav .principal {
  width: 100%;
  padding: 15px 0;
  text-align: left;
  border-bottom: 1.5px solid #595959;
}

nav.menu_main_nav_area_mobile .container-sub-menu{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: unset;
}

/* Submenú oculto por defecto */
nav.menu_main_nav_area_mobile .container-sub-menu > .sub-menu {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

nav.menu_main_nav_area_mobile > .menu_main_nav > li.Marcas .sub-menu .logo{
  display: flex;
  
}

nav.menu_main_nav_area_mobile > .menu_main_nav > li.Marcas .sub-menu .logo a{
  padding: 5px 5px 0 !important;
}

nav > ul#menu_main > li.secundario.Tipo > ul.sub-menu > li {
  width: 45%;
}


/* Submenú activo */
nav.menu_main_nav_area_mobile .container-sub-menu > .sub-menu.active {
  max-height: 500px; /* Ajusta según el contenido máximo esperado */
  opacity: 1;
}

/* Botón del submenú */
nav.menu_main_nav_area_mobile .submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0px;
  background-color: transparent;
  color: var(--neutro1);
  border: none;
  font-family: inherit; 
  font-weight: 500;
  font-size: calc(var(--tamanio-base)* 0.9rem);
  text-align: left;
  height: 80px;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  pointer-events: auto !important;
}


/* Estilos base del icono */
.tituloMenu{
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
}
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu .toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 12px;
  position: relative;
  cursor: pointer;
}
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu{
        width: 20%;
        flex: 1;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        flex: 0 0 20%;
        justify-content: center;
}
.menu_main_nav_area_mobile ul.sub-menu{
  padding-left: 0px !important;
}

.menu-item.menu-item-type-custom.menu-item-object-custom li a{}

/* Chevron base */
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu .toggle-icon::before,
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu .toggle-icon::after {
  content: '';
  position: absolute;
  width: 10px; /* un poco menos para dar espacio a los bordes */
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s ease;
}

/* Línea izquierda ↓ */
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu .toggle-icon::before {
  top: 7px; /* centrado vertical */
  left: 3px;
  transform: rotate(45deg);
}

/* Línea derecha ↓ */
nav.menu_main_nav_area_mobile .submenu-toggle .iconoMenu .toggle-icon::after {
  top: 7px;
  right: 3px;
  transform: rotate(-45deg);
}

/* Chevron ↑ cuando el submenú está activo */
nav.menu_main_nav_area_mobile .container-sub-menu.active .submenu-toggle .iconoMenu .toggle-icon::before {
  transform: rotate(-45deg);
}

nav.menu_main_nav_area_mobile .container-sub-menu.active .submenu-toggle .iconoMenu .toggle-icon::after {
  transform: rotate(45deg);
}


/* Submenú estilo adicional */
nav.menu_main_nav_area_mobile .sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: transparent;
  border: none;
}

/* Enlaces dentro del submenú */
nav.menu_main_nav_area_mobile .sub-menu li a {
  display: block;
  color: var(--neutro1); /* Color del texto */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover en los enlaces del submenú */
nav.menu_main_nav_area_mobile .sub-menu li a:hover {
  background-color: #343434; /* Fondo al hacer hover */
  color: #fff; /* Texto al hacer hover */
}


  nav > ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    width: 98%;
    margin: 0 auto;
    border-bottom: none;
    flex-direction: column;
    padding-right: 0;
  }
  nav > ul > li {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    margin: 0;
  }

  nav > ul > li.secundario {
    pointer-events: none;
  }

  nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {
    justify-content: space-between;
    padding-top: 0;
  }

  nav > ul#menu_main > li.secundario.Titulo.Tipos > ul.sub-menu > li {
    width: 45%;
  }

  nav.active > ul > li > a {
    color: var(--neutro1);
    font-weight: 500;
    font-size: calc(var(--tamanio-base) * 0.9rem);
  }
  nav.active > ul#menu_main > li.secundario {
    display: inline-block;
  }

  header.collapsed a,
  header.collapsed nav.active > ul > li > a,
  header.collapsed nav.active > ul > li > span {
    color: var(--neutro1);
  }

  .contactosHeader a.btn,
  .contactosHeader span.btn {
    margin: 0;
    padding: calc(var(--tamanio-base) * 0.1rem);
    font-size: calc(var(--tamanio-base) * 0.45rem);
    max-width: 75%;
  }

  .header-left,
  .header-right {
    /* height: 100%;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-flex-basis: unset;
	    -ms-flex-preferred-size: unset;
	    flex-basis: unset;
	    -webkit-box-flex: 1;
	    -webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	    flex-grow: 1;
		width:25%; */
    display: flex;
  }
  a.logo {
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  nav.active
    > ul#menu_main
    > li.secundario.Marcas.Titulo.Tipos
    > ul.sub-menu
    > li {
    width: 16%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cabecera.video {
    min-height: 50vh;
  }
}
@media (max-height: 680px) {
  nav.active {
    height: calc(100vh - 39px);
  }
  nav > ul {
    display: flex;
   /*  overflow-y: scroll; */
    height: auto;
  }
}

@media (max-width: 680px) {
  .logo_isologo {
    width: 140px;
  }

  .logo_isologo img {
    width: 140px;
  }
}

.menu_main_nav {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.menu_main_nav li a {
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.menu_main_nav li.Marcas a,
.menu_main_nav li.principal  a {
  padding: 6px 7px 0;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

/* Fondo “persiguiendo” */
.menu_main_nav .hover-bg {
  position: absolute;
  border-radius: 5px;
  z-index: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  opacity: 0; /* Para que se oculte */
}

/* 1. Baja la imagen hero para que no tape el submenú */
.hero,
.hero img,
section.elementor-section.elementor-top-section {
  position: relative !important;
  z-index: 40 !important;
}

/* 2. Sube el header y el menú */
header,
.header,
.menu_main_nav_area,
.menu_main_nav,
.menu_main_nav > li {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* 3. Submenú visible por encima del hero */
.menu_main_nav .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important;
  display: none;
  background: #fff;
  min-width: 220px;
}

/* 4. Mostrar submenú al hacer hover */
.menu_main_nav li:hover > .sub-menu {
  display: block !important;
}
/* Que el submenú sea tan alto como necesite */
.menu_main_nav .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important;
  display: none;
  background: #fff;
  min-width: 220px;
  max-height: none !important;
  overflow: visible !important; /* <- esto es clave */
}

/* Mostrar submenú al hacer hover */
.menu_main_nav li:hover > .sub-menu {
  display: block !important;
}

/* Asegurar que ningún padre lo corte */
header,
.header,
.elementor-location-header,
.menu_main_nav_area,
.menu_main_nav,
.menu_main_nav > li {
  position: relative !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

/* La imagen de fondo debe estar detrás */
.hero,
.hero img,
.elementor-section-wrap {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}
/* Evita que el submenú tenga scroll o recorte */
.menu_main_nav .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000000 !important;
  background: white;
  min-width: 100%;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  height: auto !important;
  border-radius: 5px;
}

/* Forzar que se muestre todo al hacer hover */
.menu_main_nav li:hover > .sub-menu {
  display: block !important;
}

/* Evitar que el LI padre lo recorte */
.menu_main_nav li {
  position: relative !important;
  overflow: visible !important;
  height: auto !important;
}

/* SUBIR todo el menú por encima de la imagen */
.menu_main_nav,
.menu_main_nav_area,
header,
.site-header {
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* BAJAR la imagen para que no tape */
.hero,
.hero img,
.elementor-section-wrap {
  position: relative !important;
  z-index: 1 !important;
}
ul.sub-menu li:hover {
  width: 100%;
  border-radius: 5px;
  transition: all 0.3s ease;
}
#menu_main li.menu-item:hover:not(:has(.sub-menu:hover)) {
  border-radius: 5px;
}
ul.sub-menu li {
  text-align: center;
}

ul.sub-menu li {
    border-bottom: 1px solid var(--color4);
}

ul.sub-menu li:last-child {
    border-bottom: none;
}
ul.sub-menu li:hover {
  color: var(--color1);
  background-color: var(--color4);
}
@media (max-width: 768px) {
  .contenedor-izquierda-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: right;
    align-items: center;
    margin-left: 50px;
}
}

@media (max-width: 425px) {
  .contenedor-izquierda-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: right;
    align-items: center;
    margin-left: 25px;
}
}
@media (max-width: 375px) {
  .contenedor-izquierda-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: right;
    align-items: center;
    margin-left: 17px;
}
}



.menu_main_nav .sub-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease, border-color 0.25s ease;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.menu_main_nav .sub-menu li:last-child {
  border-bottom: none;
}

.menu_main_nav .sub-menu li a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  transition: all 0.25s ease;
  border-radius: 0;
  margin: 0;
  font-size: 14px;
  overflow: hidden;
  background-color: transparent;
}

.menu_main_nav .sub-menu li:hover {
  background-color: #f8f9fa;
  border-bottom-color: #d1d5db;
  transition: all 0.25s ease;
}

.menu_main_nav .sub-menu li:hover a {
  color: var(--color1);
  transform: translateX(3px);
  background-color: transparent;
  transition: all 0.25s ease;
}

.menu_main_nav li:hover > .sub-menu li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.menu_main_nav .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-15px) scale(0.95) !important;
  z-index: 1001 !important;
  display: block;
  background: #fff;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  border: 1px solid var(--color4);
  padding: 0;
}

.menu_main_nav > li::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 15px; 
  background: transparent;
  z-index: 999;
}

.menu_main_nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px) scale(1) !important;
  pointer-events: auto;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.menu_main_nav .sub-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu_main_nav > li {
  position: relative;
  transition: all 0.3s ease;
}

.menu_main_nav > li:hover {
  transform: translateY(-2px);
}

.menu_main_nav li:hover > .sub-menu li:nth-child(1) { 
  transition-delay: 0.1s; 
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(2) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(3) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(4) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(5) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(6) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}
.menu_main_nav li:hover > .sub-menu li:nth-child(7) { 
  transition-delay: 0.1s;  
  animation: slideInUp 0.4s ease forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu_main_nav > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color1);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 1px;
}

.menu_main_nav > li:hover > a::after {
  width: 70%;
}

.menu_main_nav .sub-menu,
.menu_main_nav .sub-menu li,
.menu_main_nav .sub-menu li a {
  outline: none !important;
}

.menu_main_nav .sub-menu {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}


@media (max-width: 1024px) {
  .menu_main_nav .sub-menu {
    position: relative !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-15px) scale(0.95) !important;
    z-index: 1001 !important;
    display: block;
    background: #fff;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    border: 1px solid var(--color4);
    padding: 0;
}
}

.menu_main_nav_area_mobile .menu_main_nav .menu-item{
  text-align: left;
}
@media (max-width: 1024px) {
  nav.menu_main_nav_area_mobile .container-sub-menu > .sub-menu {
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .menu_main_nav_area_mobile .sub-menu li,
  .menu_main_nav_area_mobile .sub-menu li a {
    transition: none !important;
    transform: none !important;
  }
}

.menu_main_nav_area_mobile .menu_main_nav .menu-item .sub-menu li{
  background-color: transparent;
}
.menu_main_nav_area_mobile .menu_main_nav .menu-item .sub-menu li a{
  background-color: transparent;
  border: none;
}


@media (max-width: 1024px) {
  /* Evita mostrar submenús con hover en móvil */
  .menu_main_nav li:hover > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .menu_main_nav li > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  /* Desactiva animaciones y transformaciones */
  .menu_main_nav > li:hover {
    transform: none !important;
  }

  .menu_main_nav > li > a::after {
    width: 0 !important;
  }

  .menu_main_nav li:hover > .sub-menu li {
    opacity: 1 !important;
    transform: none !important;
  }

  .menu_main_nav li:hover > .sub-menu li a {
    color: inherit !important;
    background-color: transparent !important;
    transform: none !important;
  }
}
.menu_main_nav_area_mobile ul.sub-menu {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Muestra el submenú cuando el li tiene la clase active */
.menu_main_nav_area_mobile li.menu-item-has-children.active > ul.sub-menu {
    display: block;
    max-height: 1000px; /* lo suficiente para mostrar el contenido */
    opacity: 1;
    overflow: visible;
}
@media (max-width: 1024px) {
  .menu_main_nav_area_mobile li.menu-item-has-children.active > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .menu_main_nav_area_mobile li.menu-item-has-children.active > .sub-menu li{
    color: var(--neutro1);
  }
}
@media (max-width: 1024px) {
  .menu_main_nav_area_mobile ul.sub-menu {
    position: relative !important; /* Evita que se salga del flujo */
    left: 0 !important;
    top: auto !important;
    margin-left: 0 !important;
    padding-left: 1rem; /* Un poco de sangría opcional */
    width: 100% !important;
    box-sizing: border-box;
  }

  .menu_main_nav_area_mobile li.menu-item-has-children {
    width: 100%;
  }

  .menu_main_nav_area_mobile li.menu-item-has-children > .submenu-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
  }
  li.menu-item.menu-item-type-custom.menu-item-object-custom:not(.menu-item-has-children){
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.activoNaranja>a {
    color: var(--color1);
}

.sticky-header {
    position: sticky !important;
    z-index: 150;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    -webkit-transition: height 0.3s ease-out, background-color 0.3s ease-out, border-bottom-color 0.3s ease-out;
    -o-transition: height 0.3s ease-out,background-color 0.3s ease-out,border-bottom-color 0.3s ease-out;
    transition: height 0.3s ease-out, background-color 0.3s ease-out, border-bottom-color 0.3s;
    border-bottom: 1px solid #dddd;
  }