/* =========================================================
   DIAGNÓSTICO
   Growth Marketing
   ========================================================= */

.gm-diagnosis {
	position: relative;

	padding:
		32px
		0
		110px;

	background: #ffffff;

	color: #103540;

	border-bottom: 1px solid #35b530;
}


/* =========================================================
   HEADER
   ========================================================= */

.gm-diagnosis__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 50px;

	margin-bottom: 48px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.gm-diagnosis__eyebrow {
	margin-bottom: 17px;

	font-size: 10px;
	font-weight: 850;

	line-height: 1;

	letter-spacing: .18em;

	color: #07536a;
}


/* =========================================================
   TITLE
   ========================================================= */

.gm-diagnosis__heading h2 {
	margin: 0;

	font-size: clamp(50px, 4vw, 74px);
	font-weight: 400;

	line-height: 1;

	letter-spacing: -.055em;

	color: #153944;
}


/* =========================================================
   SELECTED
   ========================================================= */

.gm-diagnosis__selection {
	margin:
		8px
		0
		0;

	font-size: 15px;
	font-weight: 400;

	color: #647b82;
}

.gm-diagnosis__selection strong {
	font-weight: 750;

	color: #526b73;
}


/* =========================================================
   CLOSE
   ========================================================= */

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

	width: 48px;
	height: 48px;

	flex: 0 0 48px;

	background: #edf4f3;

	font-size: 25px;
	font-weight: 400;

	line-height: 1;

	color: #07394a;

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

.gm-diagnosis__close:hover {
	background: #e1ecea;

	transform: rotate(3deg);
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.gm-diagnosis-form {
	display: grid;

	grid-template-columns:
		minmax(520px, .38fr)
		minmax(0, .62fr);

	min-height: 500px;

	border: 1px solid #bed0d2;

	background: #ffffff;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.gm-diagnosis-form__sidebar {
	background: #0b5a6f;

	color: #ffffff;
}

.gm-diagnosis-form__sidebar-inner {
	display: flex;
	flex-direction: column;

	height: 100%;

	padding:
		52px
		42px;
}


/* LABEL */

.gm-diagnosis-form__label {
	margin-bottom: 33px;

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

	letter-spacing: .16em;

	color: #72ee59;
}


/* TITLE */

.gm-diagnosis-form__sidebar h3 {
	margin:
		0
		0
		24px;

	font-size: 34px;
	font-weight: 400;

	line-height: 1.05;

	letter-spacing: -.04em;

	color: #ffffff;
}


/* TEXT */

.gm-diagnosis-form__sidebar p {
	max-width: 570px;

	margin: 0;

	font-size: 13px;
	font-weight: 400;

	line-height: 1.55;

	color: rgba(255,255,255,.94);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.gm-diagnosis-form__progress {
	margin-top: 52px;
}

.gm-diagnosis-form__progress-track {
	position: relative;

	width: 100%;
	height: 5px;

	background: rgba(255,255,255,.22);
}

.gm-diagnosis-form__progress-bar {
	display: block;

	width: 25%;
	height: 100%;

	background: #68e852;

	transition: width .35s ease;
}

.gm-diagnosis-form__progress-text {
	margin-top: 15px;

	font-size: 12px;

	color: rgba(255,255,255,.87);
}


/* =========================================================
   MAIN
   ========================================================= */

.gm-diagnosis-form__main {
	position: relative;

	padding:
		52px
		48px
		46px;
}


/* =========================================================
   STEP
   ========================================================= */

.gm-form-step {
	display: none;

	height: 100%;
}

.gm-form-step.is-active {
	display: flex;
	flex-direction: column;
}

.gm-form-step h3 {
	margin:
		0
		0
		38px;

	font-size: 31px;
	font-weight: 400;

	line-height: 1;

	letter-spacing: -.035em;

	color: #0c3240;
}


/* =========================================================
   GRID FIELDS
   ========================================================= */

.gm-form-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap:
		35px
		18px;
}

.gm-form-field--wide {
	grid-column: 1 / -1;
}


/* =========================================================
   FIELD
   ========================================================= */

.gm-form-field {
	display: flex;
	flex-direction: column;
}

.gm-form-field label {
	margin-bottom: 9px;

	font-size: 12px;
	font-weight: 750;

	line-height: 1;

	color: #06435a;
}

.gm-form-field input,
.gm-form-field select,
.gm-form-field textarea {
	width: 100%;

	padding:
		11px
		13px;

	background: #ffffff;

	border: 1px solid #b8cccf;

	border-radius: 0;

	outline: 0;

	font-family: inherit;
	font-size: 14px;

	color: #123a46;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}

.gm-form-field input,
.gm-form-field select {
	height: 48px;
}

.gm-form-field textarea {
	resize: vertical;

	min-height: 120px;
}

.gm-form-field input:focus,
.gm-form-field select:focus,
.gm-form-field textarea:focus {
	border-color: #2caf2e;

	box-shadow:
		0
		0
		0
		2px rgba(44,175,46,.08);
}


/* =========================================================
   CHECK
   ========================================================= */

.gm-form-check {
	display: flex !important;
	flex-direction: row !important;

	align-items: flex-start;

	gap: 11px;

	line-height: 1.5 !important;
}

.gm-form-check input {
	width: 17px;
	height: 17px;

	flex: 0 0 17px;

	margin-top: 1px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.gm-form-actions {
	display: flex;
	justify-content: flex-end;

	margin-top: auto;

	padding-top: 42px;
}

.gm-form-actions--between {
	justify-content: space-between;
	align-items: center;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.gm-form-next,
.gm-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	min-height: 55px;

	padding:
		0
		22px;

	background: #2daf27;
	color: #ffffff;

	border: 0;
	border-radius: 3px;

	font-size: 14px;
	font-weight: 750;

	cursor: pointer;

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

.gm-form-next:hover,
.gm-form-submit:hover {
	background: #259a21;

	transform: translateY(-1px);
}

.gm-form-back {
	padding: 0;

	background: transparent;

	border: 0;

	font-size: 13px;
	font-weight: 650;

	color: #56747c;

	cursor: pointer;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.gm-form-success {
	display: none;

	height: 100%;

	flex-direction: column;
	justify-content: center;

	max-width: 650px;
}

.gm-form-success.is-active {
	display: flex;
}

.gm-form-success > span {
	margin-bottom: 20px;

	font-size: 9px;
	font-weight: 850;

	letter-spacing: .16em;

	color: #2daf27;
}

.gm-form-success h3 {
	margin:
		0
		0
		20px;

	font-size: 42px;
	font-weight: 400;

	line-height: 1;

	letter-spacing: -.045em;
}

.gm-form-success p {
	max-width: 550px;

	margin: 0;

	font-size: 15px;

	line-height: 1.6;

	color: #667c83;
}


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

@media (max-width: 1000px) {

	.gm-diagnosis-form {
		grid-template-columns:
			minmax(330px, .38fr)
			minmax(0, .62fr);
	}

	.gm-diagnosis-form__sidebar-inner {
		padding:
			40px
			30px;
	}

	.gm-diagnosis-form__main {
		padding:
			40px
			30px;
	}

}


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

@media (max-width: 800px) {

	.gm-diagnosis {
		padding:
			55px
			0
			70px;
	}

	.gm-diagnosis-form {
		display: block;
	}

	.gm-diagnosis-form__sidebar {
		min-height: 300px;
	}

	.gm-diagnosis-form__progress {
		margin-top: 40px;
	}

	.gm-diagnosis-form__main {
		min-height: 500px;
	}

}


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

@media (max-width: 600px) {

	.gm-diagnosis__header {
		gap: 20px;

		margin-bottom: 35px;
	}

	.gm-diagnosis__heading h2 {
		font-size: clamp(42px, 11vw, 54px);
	}

	.gm-diagnosis__close {
		width: 42px;
		height: 42px;

		flex-basis: 42px;
	}

	.gm-form-grid {
		grid-template-columns: 1fr;

		gap: 23px;
	}

	.gm-form-field--wide {
		grid-column: auto;
	}

	.gm-diagnosis-form__sidebar-inner,
	.gm-diagnosis-form__main {
		padding:
			32px
			22px;
	}

	.gm-form-step h3 {
		font-size: 28px;
	}

}