$burger-breakpoint: 767px;
$header-size-breakpoint: 767px;

.responsive #top .logo{
	height: 100% !important;
	img {
		max-height: 100% !important;
		height: 100% !important;
		max-width: 189px;
		@media(max-width: 767px) {
			max-width: 150px;
			object-fit: contain;
		}
	}
}

html{
	--headerNavTop: 50px;
	--headerNav: 108px;
	--headerSpace: 158px;
	@media only screen and (max-width: 989px){
		&.header-is-scrolled{
			--headerNavTop: 20px;
			--headerNav: 70px;
			--headerSpace: 90px;
		}
	}
	.header{
		--gapHeaderInner: 0 7.5vw;
		--menuStatus: block;
		--toggleButtonStatus: none;
		--overlayStatus: none;
		ul{
			margin: 0;
		}
		.units{
			float: none;
			display: block;
			margin-left: 0;
			min-height: unset;
		}
	}

	.hamburger-overlay{
		background: blue ;
		position: fixed;
		z-index: 2;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		transition: opacity ease-in-out 0.15s;
		pointer-events: none;
		//backdrop-filter: blur(1px);
		display: var(--overlayStatus);
	}

	.hamburger-content{
		position: fixed;
		width:70%; 
		pointer-events: none;
		right: 0;
		z-index: 11;
		top: var(--headerSpace);
		height: calc( 100vh - var(--headerNav) );
		opacity: 0;
		background: #FFFFFF;
		transform: translateX(100%);
		transition-property: opacity, width, transform, height;
		transition-timing-function: ease-in-out;
		transition-duration: 0.3s;

		@media only screen and(max-width: 560px){
			width: 100%;
		}

		.hamburger-content-inner{
			display: block;
			height: 100%;
			left: 0;
			overflow: scroll;
			position: fixed;
			right: 0;
			padding: 0 30px;
			padding-top: 30px;
		}
		// Transition Sub-Menu
		.main-menu{
			margin: 0;
			& > li{
				position: relative;
				.sub-menu-indicator{
					width: 30px;
					height: 30px;
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					&:before{
						content: "\e800";
						font-family: "fa-fontello";
					}
				}
				a {
					color: $primary-color;
					padding: 10px 0;
					display: block;
					font-weight: $semibold;
					font-size: 16px;
					transition: .3s color;
					.avia-bullet{
						display: none;
					}

					&:hover{
						color: $primary-color
					}
				}
				&::after{
					content: '';
					display: block;
					position: absolute;
					right: 0;
					top: 12px;
					height: 20px;
					font-family: 'entypo-fontello';
					width:30px;
					color: $white;
					background-image: url(/wp-content/uploads/2024/09/arrow.png);
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				&.current-menu-item{
					& a{
						color: $primary-color
					}
				}
				&.btn-shop {
					margin-top: 55px;
					a {
						background-color: #8AD1EF;
						font-size: 15.5px;
						color: #133F64;
						width: 160px;
						padding: 6px 5px;
						border-radius: 4px;
						font-weight: 700;
						text-align: center;
						position: relative;
						display: flex;
						justify-content: center;
						column-gap: 10px;
						align-items: center;
						transition: .3s background-color;
						.avia-menu-text{
							line-height: 1.1;
						}
						&::before{
							content: "";
							display: block;
							background-image: url(/wp-content/uploads/2024/09/cart.png);
							height: 19px;
							width: 17px;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center;
						}
						&:hover{
							background-color: $white;
						}
					}
					&::after{
						display: none;
					}
				}
			}
		}
	}

	.header{
		position: fixed !important;
		background: $white;
		z-index: 12;
		width: 100%;
		font-family: $heading-font-family;
		box-shadow: 0 4px 10px #0000001a;
		.header-inner{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: var(--headerSpace);
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			z-index: 12;
			position: relative;
			flex-direction: column;
			.menu-superior{
				padding: var(--gapHeaderInner);
				background: $primary-color ;
				width: 100%;
				height: var(--headerNavTop);
				transition: height 0.2s;
				@media only screen and(max-width: 1025px){
					padding: 0 25px;
				}
				.contenedor_header{
					max-width: 1120px;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					height: 100%;
					.contenedor-text {
						height: 100%;
						display: flex;
						align-items: center;
						p {
							font-family: $heading-font-family;
							color: $white;
							margin: 0px;
							font-size: 14px;
							@media(max-width:500px){
								font-size: 10px;
							}
						}

					}	
					.contenedor-phone {
						height: 100%;
						display: flex;
						align-items: center;
						a {
							font-family: $heading-font-family;
							color: $white;
							margin: 0px;
							font-size: 14px;
							@media(max-width:500px){
								font-size: 10px;
							}
						}
						&::before {
							content: "";
							display: block;
							height: 15px;
							width: 15px;
							background: url("/wp-content/uploads/2025/08/wsp-icon.svg") no-repeat center / contain;
							margin-right: 6px;
						}
					}		
					
					.social-icons-general {
						height: 100%;
						width: fit-content;
						display: flex;
						align-items: center;
					}

				}	
			}
			.menu-inferior{
				width: 100%;
				padding: var(--gapHeaderInner);
				height: var(--headerNav);
				transition: .3s background-color;
				background-color: #fff;


				@media only screen and (max-width: 1039px){
					padding: 0px 25px;
				}
				.contenedor_header{
					display: flex;
					flex-wrap: nowrap;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					max-width: 1232px;
					height: 100%;
					margin: auto;
				}
			}

			.header-logo{
				position: relative;
				z-index: 2;
				width: 189px;
				height: 73px;
				transition: width ease-in-out 0.2s, height ease-in-out 0.2s;
				a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100% !important;
					display: flex;
					align-items: center;
					opacity: 1 !important;
				}
			}
			.header-menu{
				@media only screen and(min-width: 989px){
					height: 100%;
				}
				display: var(--menuStatus);

				.menu-main-menu-container, .main-menu{
					height: 100%;
				}
				.main-menu{
					display: flex;
					flex-direction: row;
					align-items: center;
					& > li{
						position: relative;
						height: 100%;
						display: flex;
						align-items: center;
						padding: 0px 23px;
						
						& > a{
							.avia-menu-text {
								font-family: $heading-font-family;
								font-weight: $medium;
								line-height: 1 !important;
								color: $primary-color;
								font-size: $h6;
							}
							.avia-bullet{
								display: none;
							}
						}
						&.menu-item-has-children{
							& > .sub-menu,
							& > .avia_mega_div{
								position: absolute;
								width: max-content;
								top: calc( 50% + calc( var(--headerNav) / 2 ) );
								left: 50%;
								transform: translateY(12px) translateX(-50%);
								margin: 0;
								opacity: 0;
								pointer-events: none;
								background-color: $white;
								transition-property: opacity, transform;
								transition-timing-function: ease-in-out;
								transition-duration: 0.25s;
								z-index: 1;
							}
							&.sub-menu-is-active{
								& > .sub-menu,
								& > .avia_mega_div{
									opacity: 1;
									pointer-events: initial;
									transform: translateY(0) translateX(-50%);								
								}
							}
						}
						&:hover {
							.avia-menu-fx {
								visibility: visible;
								opacity: 1;
							}		
						}

						&.current-menu-item {
							.avia-menu-fx {
								background-color: $primary-color-disabled !important;
							}	
						}

						.avia-menu-fx {
							background-color: $primary-color;
							width: calc(100% - 24px);
							min-width: 20px;
							height: 4px;
							bottom: -2px;
							left: 50%;
							transform: translateX(-50%);
						}
						&:last-child {
							padding-right: 0px;
							 a {
								padding-right: 0px;
							 }
						}

						&.menu-item.av-menu-button {
							a {
								.avia-menu-text {
									background-color: $secondary-color;
									color: $white;
									font-family: $heading-font-family;
									font-weight: $semibold;
									font-size: $h6;
									line-height: 1;
									padding: 12px 16px !important;
									display: flex;
									align-items: center;
									border-radius: 30px !important;
									&::before {
										content: "";
										background: url("/wp-content/uploads/2025/08/call.svg") no-repeat center / contain;
										display: block;
										width: 20px;
										height: 20px;
										margin-right: 8px;
									}
								}
							}
						}

					}
				}
			}

			.hamburger-toggle{
				width: 30px;
				height: 22px;
				padding: 0;
				position: relative;
				background: transparent;
				border: none;
				outline: none;
				border-radius: 0;
				cursor: pointer;
				display: var(--toggleButtonStatus);
				.burger-box{
					width: 100%;
					height: 4px;
					background: $primary-color;
					transition: all ease 0.2s;
					&::before,
					&::after{
						content: '';
						height: 4px;
						width: 100%;
						background: $primary-color;
						position: absolute;
						transition: all ease 0.2s;
					}
					&::before{
						top: 0;
						left: 0;
					}
					&::after{
						bottom: 0;
						left: 0;
					}
				}
			}
		}
	}

	&.header-is-scrolled{
	
	}

	&.html_av_admin_bar_active{
		.hamburger-content{
			top: calc( var(--headerSpace) + 46px );
			@media only screen and (min-width: 783px){
				top: calc( var(--headerSpace) + 32px );
			}
		}
		&.header-is-scrolled{
			.hamburger-content{
				top: calc( var(--headerSpace) + 46px );
				@media only screen and (min-width: 783px){
					top: calc( var(--headerSpace) + 32px );
				}
			}
		}
	}

	&.burger-is-active{
		overflow: hidden;
		.header{
			.header-inner{
				.hamburger-toggle{
					.burger-box{
						background: transparent;
						&::before,
						&::after{
							top: calc( 50% - 2px );
						}
						&::before{
							transform: rotate(45deg);
						}
						&::after{
							bottom: auto;
							transform: rotate(-45deg);
						}
					}
				}
			}
			.hamburger-content{
				pointer-events: auto;
				-webkit-overflow-scrolling: touch;
				opacity: 1;
				overflow-y: auto;
				transform: translateX(0);
			}
		}
	}

}

/* Space Top */
.html_header_top.html_header_sticky #main {
	padding-top: var(--headerSpace) !important;
}

#top:not(.page-template-template-blank) #main>.container_wrap_first:first-child .container,
#top:not(.page-template-template-blank) .avia-builder-el-0>.container,
#top:not(.page-template-template-blank) .avia-builder-el-0>.av-section-color-overlay-wrap>.container,
#top:not(.page-template-template-blank) .avia-builder-el-0 .slideshow_caption {
	padding-top: var(--headerSpace);
}

[id]:target,
[name]:target {
	&:before {
		content: '';
		display: block;
		height: calc(var(--headerNav) + 80px);
		margin-top: calc((var(--headerNav) + 80px) * -1);
		visibility: hidden;
	}
}

@media only screen and (min-width: 768px) {
	html {
		.header {
			--gapHeaderInner: 0 50px;
		}
	}
}

@media only screen and (min-width: #{$header-size-breakpoint+1}) {
	html {
		--headerNavTop: 50px;
		--headerNav: 108px;
		--headerSpace: 158px;

		&.header-is-scrolled {
			--headerNavTop: 0px;
			--headerNav: 90px;
			--headerSpace: 90px;
		}
	}
}

@media only screen and (min-width: 768px) and (max-width: #{$header-size-breakpoint}) {
	html {
		.header {
			--overlayStatus: block;
		}

		&.burger-is-active {
			.hamburger-overlay {
				opacity: 1;
				pointer-events: initial;
			}
		}
	}
}

@media only screen and (max-width: #{$burger-breakpoint}) {
	html {
		.header {
			--menuStatus: none;
			--toggleButtonStatus: block;
		}

		.hamburger-content {
			.main-menu {
				&>li {

					&>.avia_mega_div,
					&>.sub-menu {
						max-height: 0;
						margin: 0;
						opacity: 0;
						pointer-events: none;
						overflow: hidden;
						transition: max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s, height cubic-bezier(0.4, 0, 0.2, 1) 0.3s, overflow ease 0.25s, opacity ease 0.25s;
					}

					&.sub-menu-is-active {

						&>.avia_mega_div,
						&>.sub-menu {
							max-height: 2000px;
							pointer-events: initial;
							overflow: visible;
							opacity: 1;
							transition-duration: 0.4s;
						}
					}
				}
			}
		}
	}
}

@media only screen and (max-width: #{$burger-breakpoint}) and (max-height: 920px) {
	html {
		.hamburger-content {
			.hamburger-content-inner {
				padding-bottom: 70px;
			}
		}
	}
}

#top .avia-section .container {
	padding-top: 0px !important;
}



/*Solucionar el error del archivo layout.css padding : 0px !important al #main en mobile*/
@media only screen and (max-width: 767px) {
    .responsive #top #main {
        padding-top: var(--headerSpace) !important;
    }
}