/* =========================================================
   HEADER
   Growth Marketing
   ========================================================= */

.gm-header {
	position: sticky;
	top: 0;
	z-index: 9998;

	width: 100%;

	background: rgba(255, 255, 255, .96);

	border-top: 1px solid #e6e9ea;
	border-bottom: 1px solid #edf0f1;

	box-shadow: 0 3px 14px rgba(0, 0, 0, .05);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   INNER
   ========================================================= */

.gm-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 50px;

	min-height: 78px;
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

.gm-brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.gm-brand__link {
	display: flex;
	align-items: center;
}

.gm-brand .custom-logo-link {
	display: flex;
	align-items: center;
}

.gm-brand .custom-logo {
	display: block;

	width: auto;
	height: auto;

	max-width: 72px;
	max-height: 65px;

	object-fit: contain;
}

.gm-brand__fallback {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	color: #083746;
}


/* =========================================================
   NAV
   ========================================================= */

.gm-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 32px;
}

.gm-nav a {
	position: relative;

	display: inline-flex;
	align-items: center;

	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	color: #0b2d39;

	white-space: nowrap;

	transition:
		color .2s ease,
		opacity .2s ease;
}

.gm-nav a:hover {
	color: #0b6073;
}

.gm-nav a::after {
	content: "";

	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;

	width: 0;
	height: 1px;

	margin: auto;

	background: #77c043;

	transition: width .22s ease;
}

.gm-nav a:hover::after {
	width: 100%;
}


/* =========================================================
   CTA
   ========================================================= */

.gm-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 18px;

	min-height: 44px;

	padding: 0 18px 0 20px;

	background: #0b5c73;
	color: #ffffff;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	white-space: nowrap;

	border-radius: 3px;

	transition:
		background .2s ease,
		transform .2s ease;
}

.gm-header__cta:hover {
	background: #084b5d;
	transform: translateY(-1px);
}

.gm-header__cta-arrow {
	font-size: 15px;
	font-weight: 700;

	color: #78c442;

	line-height: 1;
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.gm-menu-toggle {
	display: none;

	width: 44px;
	height: 44px;

	padding: 0;

	background: transparent;
	border: 0;

	cursor: pointer;
}

.gm-menu-toggle span {
	display: block;

	width: 24px;
	height: 2px;

	margin: 6px auto;

	background: #0b2d39;

	transition:
		transform .25s ease,
		opacity .25s ease;
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

.gm-mobile-nav {
	display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

	.gm-header__inner {
		gap: 25px;
	}

	.gm-nav {
		gap: 20px;
	}

	.gm-nav a {
		font-size: 12px;
	}

	.gm-header__cta {
		padding-inline: 16px;

		font-size: 11px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 860px) {

	.gm-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;

		min-height: 74px;
	}

	.gm-nav,
	.gm-header__cta {
		display: none;
	}

	.gm-menu-toggle {
		display: block;
	}

	.gm-brand .custom-logo {
		max-width: 64px;
		max-height: 58px;
	}


	/* ABIERTO */

	.gm-menu-open .gm-menu-toggle span:first-child {
		transform: translateY(4px) rotate(45deg);
	}

	.gm-menu-open .gm-menu-toggle span:last-child {
		transform: translateY(-4px) rotate(-45deg);
	}


	/* PANEL */

	.gm-mobile-nav {
		position: fixed;
		z-index: 99;

		top: 74px;
		left: 0;
		right: 0;
		bottom: 0;

		display: flex;
		flex-direction: column;

		padding:
			28px
			var(--gm-gutter)
			40px;

		background: #ffffff;

		opacity: 0;
		visibility: hidden;

		transform: translateY(-8px);

		transition:
			opacity .25s ease,
			visibility .25s ease,
			transform .25s ease;
	}

	.gm-menu-open .gm-mobile-nav {
		opacity: 1;
		visibility: visible;

		transform: translateY(0);
	}

	.gm-mobile-nav > a {
		display: block;

		padding: 17px 0;

		border-bottom: 1px solid #e8ecee;

		font-size: 22px;
		font-weight: 500;

		color: #0b2d39;
	}

	.gm-mobile-nav__cta {
		margin-top: 24px;

		padding: 16px 18px !important;

		background: #0b5c73;

		color: #ffffff !important;

		border-bottom: 0 !important;

		font-size: 14px !important;
		font-weight: 700 !important;
	}

}