/* @group Site Nav
------------------------------------ */

.site-nav {
	position: fixed;
	z-index: var(--z-index-site-nav);
	top: 0;
	width: 100%;
	background: var(--background);
	padding-block: var(--paddingBlock);
	transition: all var(--transitionDelay);

	/* General */
	--paddingBlock: 3.1rem;
	--transitionDelay: .6s;
	/* Background */
	--background: transparent;
	/* Links Menú */
	--gapLinksMenu: 3.5rem;
	--colorLinks: var(--green);
	--colorLinksHover: var(--blue);
	--colorLinkActive: var(--blue);
	--colorIconLinksMenu: var(--green);
	--sizeIconLinksMenu: 1rem;
	/* Bttn Menú */
	--colorIconMenu: var(--gray);
	--backgroundIconMenu: transparent;
	--backdropFilterIconMenu: blur(20px);
	--sizeIconMenu: 2rem;
	/* CTA */
	--buttonText: var(--gray);
	--buttonBackground: rgba(138, 63, 34, 0.80);
	--buttonBorder: transparent; 
	--buttonTextHover: var(--gray);
	--buttonBackgroundHover: var(--rust);
	--buttonBorderHover: var(--rust); 
	--buttonHeightMobile: 3.5rem;
	/* Logo */
	--widthLogo: 16rem;
	--widthPinedLogo: 4.5rem;
}
.site-nav * {
	transition: all var(--transitionDelay);
}
.site-nav a {
	text-decoration: none;
	font: inherit;
	--transitionDelay: .25s;
}

.site-nav .logo {
	width: var(--widthLogo);
	height: auto;
}
.site-nav .logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.site-nav .logo img:is(.pined) {
	/* width: var(--widthPinedLogo); */
}

.site-nav .button-menu {
	font-size: var(--sizeIconMenu);
	color: var(--colorIconMenu);
	background: var(--backgroundIconMenu);
	backdrop-filter: var(--backdropFilterIconMenu);
	-webkit-backdrop-filter: var(--backdropFilterIconMenu);
	padding: 1.2rem 1.5rem;
	border-radius: 1rem;
	--backdropFilterIconMenu: blur(0px);
	--transitionDelay: .3s;
}
body:is(.pinedHeader):not([data-menu="openedMenu"]) .site-nav .button-menu {
	--backdropFilterIconMenu: blur(20px);
}
.site-nav .button-menu i {
	pointer-events: none;
}

.site-nav .menu-col .main-menu {
	display: flex;
	gap: var(--gapLinksMenu);
}
.site-nav .menu-col .main-menu li {
	color: var(--colorLinks);
	--transitionDelay: .25s;
}
.site-nav .menu-col .main-menu li:is(.current_page_item) {
	color: var(--colorLinkActive);
}
.site-nav .menu-col .main-menu li a .icon-arrow-dropdown {
	font-size: var(--sizeIconLinksMenu);
	color: var(--colorIconLinksMenu);
	position: relative;
	bottom: .25rem;
}

.site-nav .bp-button {
	text-transform: capitalize;
	color: var(--buttonText);
	background: none var(--buttonBackground);
	border: 1px solid var(--buttonBorder);
}
.site-nav .bp-button .bp-text {
	--fs: 1.6rem;
}

/* Sticky Version
------------------------------------ */
body:is(.pinedHeader, [data-menu="openedMenu"]) .site-nav .light,
body:not(.pinedHeader) .site-nav .pined, 
body:is([data-menu="openedMenu"]) .site-nav .pined, 
body:not([data-menu="openedMenu"]) .site-nav .dark {
	display: none;
}
body:is(.pinedHeader):not([data-menu="openedMenu"]) .site-nav .pined {
	display: inline-block;
}

body:is(.pinedHeader):not([data-menu="openedMenu"]) .site-nav {
	--colorIconMenu: var(--rust);
	--backgroundIconMenu: rgba(84, 96, 100, 0.15);
	--backdropFilterIconMenu: blur(20px);
}
body:is([data-menu="openedMenu"]) .site-nav {
	--colorIconMenu: var(--green);
	--backgroundIconMenu: transparent;
}

body[data-menu="openLightbox"] { overflow: hidden; }
@media only screen 
and (min-width: 961px) {
	.site-nav {
		--gapLinksMenu: 2.4rem;
		--colorLinks: var(--white);
		--colorLinksHover: var(--secondary-alt-rust);
		--colorLinkActive: var(--secondary-alt-rust);
		--colorIconLinksMenu: var(--secondary-alt-rust);
		--sizeIconLinksMenu: .8rem;
		pointer-events: none;
	}
	.site-nav :is(.logo img, .main-menu, .bp-button) {
		pointer-events: all;
	}
	.site-nav .menu-col {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.site-nav .menu-col .main-menu {
		border-radius: 1rem;
		position: relative;
	}
	.site-nav .menu-col .main-menu li:hover {
		color: var(--colorLinksHover);
	}
	.site-nav .menu-col .main-menu li a {
		padding: 1.5rem;
		display: inline-flex;
		align-items: baseline;
		gap: 1rem;
	}
	.site-nav .menu-col .main-menu li.current-page-item a:hover {
		color: var(--colorLinksHover);
	}
	.site-nav .menu-col .main-menu li .sub-menu {
		border-radius: 0 0 1rem 1rem;
		/* width: 100%; */
		width: max-content;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		right: 0;
		opacity: 0;
		pointer-events: none;
	}
	.site-nav .menu-col .main-menu li .sub-menu::before {
		content: "";
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 0 0 1rem 1rem;
		border-top: 1px solid var(--gray);
        background: rgba(84, 96, 100, 0.15);
        backdrop-filter: var(--backdropFilterIconMenu);
        -webkit-backdrop-filter: var(--backdropFilterIconMenu);
	}
	.site-nav .menu-col .main-menu li .sub-menu a {
		white-space: nowrap;
	}
	.site-nav .menu-col .main-menu li:not(.has-extended-submenu) {
		position: relative;
	}
	.site-nav .menu-col .main-menu li:is(.has-extended-submenu) {
		position: static;
	}

	.site-nav .bttn-col .bp-button {
		backdrop-filter: var(--backdropFilterIconMenu);
		-webkit-backdrop-filter: var(--backdropFilterIconMenu);
	}
	.site-nav .bttn-col .bp-button:hover {
		color: var(--buttonTextHover);
		background: none var(--buttonBackgroundHover);
		border-color: var(--buttonBorderHover);
	}
	.site-nav .logo-col .dark {
		display: none;
	}

	.site-nav .menu-col .main-menu:has(.menu-item-has-children:hover) {
		border-radius: 1rem 1rem 0 0;
	}
	.site-nav .menu-col .main-menu li:hover a .icon-arrow-dropdown {
		transform: rotate(-180deg);
		bottom: .5rem;
	}
	.site-nav .menu-col .main-menu li:hover .sub-menu {
		opacity: 1;
		pointer-events: all;
	}

	/* Sticky Version
	------------------------------------ */
	body:is(.pinedHeader) .site-nav {
		--colorLinks: var(--blue);
		--colorLinksHover: var(--green);
		--colorLinkActive: var(--green);
		--colorIconLinksMenu: var(--blue);
	}
	body:is(.pinedHeader) .site-nav .menu-col :is(.main-menu, .main-menu .sub-menu) {
		background: rgba(232, 227, 220, 0.9);
		backdrop-filter: var(--backdropFilterIconMenu);
		-webkit-backdrop-filter: var(--backdropFilterIconMenu);
	}
	body:is(.pinedHeader) .site-nav .menu-col .main-menu .sub-menu {
		border-top: 1px solid var(--green);
	}
	body:not(.pinedHeader) .site-nav .menu-col .main-menu .sub-menu {
		border-top: 1px solid var(--gray);
		background: rgba(84, 96, 100, 0.15);
		backdrop-filter: var(--backdropFilterIconMenu);
		-webkit-backdrop-filter: var(--backdropFilterIconMenu);
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 960px) {
	.site-nav {
		--sizeIconLinksMenu: 1.2rem;
	}
	.site-nav .logo-col {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
    .site-nav::before {
        content: '';
        position: absolute;
        inset: 0;
		background: rgba(232, 227, 220, 0.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: none;
		height: 100vh;
		opacity: 0;
		transition: opacity var(--transitionDelay);
    }
	body[data-menu="openedMenu"] .site-nav::before {
		opacity: 1;
	}
	.site-nav .menu-col {
		position: absolute;
        top: calc(var(--heightNav) - 0.25px);
		left: 0;
		right: 0;
        height: calc(100vh - var(--heightNav));
        height: calc(100svh - var(--heightNav));
		padding-inline: var(--row-mobile-padding)!important;
		padding-block: 5vh 10vh;
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
	}
	body[data-menu="openedMenu"] .site-nav .menu-col {
		opacity: 1;
        visibility: visible;
        pointer-events: all;
	}
	body[data-menu="openedMenu"] .site-nav .button-menu i::before {
		content: "\e906";
	}
	.site-nav .menu-col :is(.main-menu, .sub-menu) {
		flex-direction: column;
		align-items: flex-start;
	}
	.site-nav .menu-col .main-menu > li > a:has(span, i) {
		pointer-events: none;
	}
	.site-nav .menu-col .main-menu > li > a > :is(span, i) {
		pointer-events: all;
	}
	.site-nav .menu-col .main-menu li {
		--fs: 2.5rem;
	}
	.site-nav .menu-col .main-menu li .icon-arrow-dropdown {
		display: inline-block;
		margin-left: 1.2rem;
	}
	.site-nav .menu-col .main-menu li .sub-menu {
		display: flex;
		padding-left: 6.5rem;
		opacity: 0;
		pointer-events: none;
		max-height: 0;
	}
	.site-nav .menu-col .main-menu li .sub-menu.opened {
		opacity: 1;
		pointer-events: all;
		max-height: 9999vh;
	}
	.site-nav .menu-col .main-menu li:has(.sub-menu.opened) .icon-arrow-dropdown {
		rotate: 180deg;
	}
	.site-nav .menu-col .main-menu li .sub-menu li {
		--fs: 2rem;
		--fw: 400;
		margin: 2rem 0 0;
	}
	.site-nav .bp-button {
		margin-top: 9.2rem;
	}

	body[data-menu="openedMenu"] {
		overflow: hidden;
	}
	body:not([data-menu="openedMenu"]) .site-nav {
		pointer-events: none;
	}
	body:not([data-menu="openedMenu"]) .site-nav :is(.logo img, .button-menu) {
		pointer-events: all;
	}
}

/* @end */