/****************************************************/
/* HEADER */
/****************************************************/
#head{
    position: fixed;
    z-index: 4;
    background-color: var(--white);
    padding-block: 0.8rem;
    transition: all .3s;
    width: -webkit-fill-available;
    width: 100%;
    top: 0;
}
.scrolling #head:not(.type-3){
	box-shadow: 0 2px 4px -1px #ccc;
}

#head .logo{
    color: var(--color-primary);
}
#head .hamburger{
    display: flex;
    gap: 0.7rem;
}

#head .actions{
    gap: 0.6rem;
    margin-right: 1.3rem;
}
#head .actions a{
	display: flex;
	text-decoration: none;
	gap: .34rem;
	align-items: center;
	font-weight: 500;
}
#head .actions img{
    min-width: 1.8rem;
}
#head .actions label{
	display: none;
}

.favorites-count{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}
.favorites-count svg{
	min-width: 20px;
}
.favorites-count svg path{
	fill: var(--color-alt);
}

.favorites-count span{
	font-size: 1.3rem;
	font-weight: 300;
}

#head .actions 

@media (min-width: 992px){
		
	#head .actions{
	    gap: 0.6rem;
	    margin-inline: 1.3rem 0;
	}
}


#head + #main{
	padding-top: var(--header-height);
}
#head.type-2 + #main{
	padding-top: var(--header-type-2-height);
}
#head.type-3 + #main{
	padding-top: var(--header-type-3-height);
}


#head.type-sticky{
	position: sticky;
}

#head.type-sticky + #main{
	padding-top: 0;
}


body {
	position: relative;
}

ul.main-menu{
    padding-inline: 0;
    gap: 0.2rem;
    transition: all .5s;
    margin-block: 0;
    align-items: center;
    justify-content: center;
    max-width: var(--grid-limit);
    margin-inline: auto;
}
.scrolling ul.main-menu{
}
ul.main-menu > li{
    list-style: none;
    display: block;
}
ul.main-menu > li.menu-item-has-children > a{
	padding-right: 1rem;
}
ul.main-menu > li.menu-item-has-children > a:after{
	content: '';
	position: absolute;
	width: 1rem;
	height: 10px;
	background: url(../img/svg/angle_left.svg) no-repeat center center;
	background-size: 80%;
	right: 0;
	transform: rotate(180deg);
}
ul.main-menu > li > a{
    color: var(--color-primary);
    text-decoration: none;
    padding: 1rem 0.7rem;
    display: flex;
    transition: all .4s;
    font-weight: bold;
    align-items: center;
    font-size: 0.95rem;
    position: relative;
    white-space: nowrap;
}

ul.main-menu > li:last-child > a{
	padding-right: 0;
}
ul.main-menu > li.current-menu-item > a{color: var(--color-secondary);}
ul.main-menu > li:not(.current-menu-item):hover > a{color: var(--color-alt);}




 ul.main-menu>li{
	 position: relative;
 }
 ul.main-menu>li>ul {
    position: absolute;
    padding: 1rem 1rem;
    background: #fff;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
    top: calc(100%);
    flex-wrap: wrap;
    margin: 0;
    text-align: left;
    align-content: flex-start;
    align-items: flex-start;
    align-content: space-between;
    left: -1.3rem;
    pointer-events: none;
    box-shadow: 2px 3px 5px -5px var(--color-primary);
}


ul.main-menu>li:hover>ul {
    opacity: 1;
    visibility: visible;
    transition: all .4s;
	pointer-events: all;
}

ul.main-menu>li>ul>li:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background-repeat: no-repeat!important;
    background-position: right bottom!important;
    background-size: 100%!important;
    opacity: 1;
    transition: all .5s ease;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(20px,0,0)
}

ul.main-menu>li>ul>li:hover:before {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0,0,0)
}

ul.main-menu>li>ul>li {
    list-style: none;
    opacity: 1;
}

ul.main-menu>li:hover>ul>li {
    transition: all .5s ease;
    opacity: 1
}

ul.main-menu>li>ul>li>a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-decoration: none;
    position: relative;
    transition: all .3s;
}

ul.main-menu>li>ul>li:hover>a,ul.main-menu>li>ul>li.current-menu-item>a {
	color: var(--color-alt);
}

@media (min-width: 1440px){
		
	ul.main-menu > li > a{
	    padding: 1rem 0.6rem;
	    font-size: 1rem;
	}
}
/****************************************************/
/* TYPE 2 */
/****************************************************/


#head.type-2{
	padding: 0;
}

#head.type-2 .logo{
    color: #ffffff;
    display: block;
    width: 10.3rem;
}
#head.type-2 .bg-darkgray{
	padding-block: 0.8rem;
	color: var(--white);
}
#head.type-2 .hamburger-inner,
#head.type-2 .hamburger-inner:after,
#head.type-2 .hamburger-inner:before{
	background-color: #ffffff;
}

@media (min-width: 992px){
		
	
	#head.type-2{
		padding-bottom: 0;
	}
		
	#head.type-2 .logo{
		width: 18rem;
	}
	#head.type-2 .bg-darkgray{
		padding-block: 1rem;;
	}

}

/****************************************************/
/* TYPE 3 */
/****************************************************/

:root:has(#head.type-3){
	--header-height: 94px;
}

body.home  #head.type-3,
body:has(.hero-section)  #head.type-3{
	padding-bottom: 0.5rem;
}
body.home #head.type-3 + #main,
body.home #head.type-3 + #main{
	padding-top: 0;
}

body:has(.hero-section) #head.type-3 + #main,
body.home #head.type-3 + #main{
	padding-top: 0;
}
body.home:not(.scrolling):not(.menu-active) #head.type-3 .action-favoritos,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .action-favoritos{
	color: #ffffff;
}
body.home:not(.scrolling):not(.menu-active) #head.type-3 .action-favoritos svg *,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .action-favoritos svg *{
	fill: transparent;
	stroke: #ffffff;
}
body.home:not(.scrolling):not(.menu-active) #head.type-3 .hamburger,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .hamburger{
	color: #ffffff;
}
body.home:not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner,
body.home:not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner:after,
body.home:not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner:before,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner:after,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .hamburger-inner:before{
	background-color: #ffffff;
}
.menu-active #head.type-3 .hamburger,
.scrolling #head.type-3 .hamburger{
	color: var(--color-primary);
}
/*
.menu-active #head.type-3 .hamburger-inner,
.menu-active #head.type-3 .hamburger-inner:after,
.menu-active #head.type-3 .hamburger-inner:before{
	background-color: var(--color-primary);
}*/

body:not(.menu-active) #head .hamburger--spring .hamburger-inner:before{
	width: 60%;
}

#head.type-3 .line-logo{
	display: flex;
	justify-content: center;
	padding-right: 0;
}

body.home:not(.scrolling):not(.menu-active) #head.type-3,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3{
	background-color: transparent;
	color: #ffffff;
}
body.home:not(.scrolling):not(.menu-active) #head.type-3 .line-logo,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .line-logo{
	color: #ffffff;
}
#head.type-3 .line-logo > span{
	position: relative;
	padding-inline: 1.5rem;
	width: 200px;
}
#head.type-3 .line-logo > span:before,
#head.type-3 .line-logo > span:after{
	content: '';
	position: absolute;
	top: 50%;
	background-color: var(--color-primary);
	width: 100vw;
	height: 2px;
	transition: all .3s;
}

body.home:not(.scrolling):not(.menu-active) #head.type-3 .line-logo > span:before,
body.home:not(.scrolling):not(.menu-active) #head.type-3 .line-logo > span:after,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .line-logo > span:before,
body:has(.hero-section):not(.scrolling):not(.menu-active) #head.type-3 .line-logo > span:after{
	background-color: #ffffff;
}

.menu-active #head.type-3 .line-logo > span:before,
.menu-active #head.type-3 .line-logo > span:after{
	background-color: var(--color-primary);
}

#head.type-3 .line-logo > span:before{
	right: 100%;
}
#head.type-3 .line-logo > span:after{
	left: 100%;
}

#head.type-3 .line-logo > span > *{
	display: block;
	max-width: 11.8rem;
	width: auto;
}

@media (min-width: 992px){

	
	#head.type-2 .actions{
		gap: 2rem;
		color: #ffffff;
	}
	#head.type-2 .actions .action-instalaciones img,
	#head.type-2 .actions .action-instalaciones svg{
		display: none;
	}
	#head.type-2 .actions .action-favoritos{
		color: var(--color-secondary);
		font-weight: 300;
	}
	#head.type-2 .actions .action-favoritos svg *{
		fill: transparent;
		stroke: var(--color-secondary);
	}
	#head.type-2 .actions label{
		display: block;
	}
	
	#head.type-2 ul.main-menu{
		gap: 1rem;
		justify-content: space-between;
		padding-inline: 2rem;
	}
	#head.type-2 ul.main-menu > li{}
		
	#head.type-3{
		padding-block: 2rem 0.7rem;
	}
	.scrolling  #head.type-3{
		padding-block: .4rem .3rem;
	}
	#head.type-3 .line-logo{
		max-width: var(--grid-limit);
		margin: auto;
		padding-right: 5rem;
		justify-content: flex-end;
	}
	#head.type-3 + #main{
		padding-top: var(--header-type-3-height);
	}
	body:has(#head.type-3) #responsive-menu ul.menu{
		padding-top: var(--header-type-3-height);
	}
}