/* =========================================================
   RESPONSIVE FINAL
   Growth Marketing
   ========================================================= */


/* =========================================================
   TABLET GRANDE
   901px - 1200px
   ========================================================= */

@media (max-width: 1200px) {

	:root {
		--gm-gutter: 28px;
	}

	/* Evitar desbordamientos */
	html,
	body {
		overflow-x: hidden;
	}

	.gm-container {
		width: min(
			calc(100% - (var(--gm-gutter) * 2)),
			var(--gm-container)
		);
	}


	/* =====================================================
	   HERO
	   ===================================================== */

	.gm-hero__inner {
		gap: 45px;
	}

	.gm-hero__title {
		font-size: clamp(54px, 6vw, 72px);
	}

	.gm-hero__description {
		font-size: 16px;
	}


	/* =====================================================
	   SOLUTIONS
	   ===================================================== */

	.gm-solutions__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.gm-solution-card {
		min-height: 320px;
	}


	/* =====================================================
	   EXPERIENCE
	   ===================================================== */

	.gm-experience-card--wide {
		min-height: 570px;
	}

}


/* =========================================================
   TABLET
   <= 900px
   ========================================================= */

@media (max-width: 900px) {

	/* =====================================================
	   TYPOGRAPHY
	   ===================================================== */

	.gm-solutions__heading h2,
	.gm-capabilities__title,
	.gm-method__title {
		font-size: clamp(46px, 7vw, 62px);
	}


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

	.gm-header__inner {
		min-height: 74px;
	}


	/* =====================================================
	   HERO
	   ===================================================== */

	.gm-hero__inner {
		display: flex;
		flex-direction: column;

		align-items: stretch;

		gap: 50px;

		padding-top: 65px;
		padding-bottom: 60px;
	}

	.gm-hero__content {
		max-width: none;
	}

	.gm-hero__title {
		max-width: 750px;
	}

	.gm-hero__description {
		max-width: 680px;
	}

	.gm-hero__media {
		width: 100%;
	}

	.gm-hero__image {
		height: clamp(420px, 64vw, 580px);
	}


	/* =====================================================
	   SOLUTIONS
	   ===================================================== */

	.gm-solutions {
		padding:
			80px
			0
			90px;
	}

	.gm-solutions__heading {
		display: block;
	}

	.gm-solutions__heading p {
		margin-top: 25px;
	}

	.gm-solutions__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* =====================================================
	   GROWTH 360
	   ===================================================== */

	.gm-growth360__inner {
		display: flex;
		flex-direction: column;

		align-items: flex-start;

		gap: 55px;
	}

	.gm-growth360__content {
		max-width: 680px;
	}

	.gm-growth360__visual {
		width: 100%;
	}


	/* =====================================================
	   CAPABILITIES
	   ===================================================== */

	.gm-capabilities__header {
		display: block;
	}

	.gm-capabilities__intro {
		margin-top: 25px;
	}

	.gm-capabilities__grid {
		grid-template-columns: 1fr;
	}

	.gm-capability:nth-child(odd),
	.gm-capability:nth-child(even) {
		padding:
			0
			10px;

		border-right: 0;
	}


	/* =====================================================
	   METHOD
	   ===================================================== */

	.gm-method__header {
		display: block;
	}

	.gm-method__intro {
		margin-top: 25px;
	}

	.gm-method__steps {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* =====================================================
	   EXPERIENCE
	   ===================================================== */

	.gm-experience__header {
		display: block;
	}

	.gm-experience__intro {
		margin-top: 24px;
	}

	.gm-experience-card--wide {
		min-height: 520px;
	}


	/* =====================================================
	   ABOUT
	   ===================================================== */

	.gm-about__grid {
		grid-template-columns: 1fr;
	}

	.gm-about__quote,
	.gm-about__content {
		padding:
			70px
			0;
	}


	/* =====================================================
	   DIAGNOSIS
	   ===================================================== */

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

	.gm-diagnosis-form__sidebar {
		min-height: auto;
	}

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

}


/* =========================================================
   MOBILE
   <= 700px
   ========================================================= */

@media (max-width: 700px) {

	:root {
		--gm-gutter: 20px;
	}


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

	.gm-header__inner {
		min-height: 70px;
	}

	.gm-brand .custom-logo {
		max-width: 60px;
		max-height: 54px;
	}


	/* =====================================================
	   HERO
	   ===================================================== */

	.gm-hero__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.gm-hero__eyebrow {
		gap: 10px;

		font-size: 8px;

		line-height: 1.5;
	}

	.gm-hero__eyebrow span {
		width: 18px;

		flex-basis: 18px;
	}

	.gm-hero__title {
		font-size: clamp(44px, 13vw, 60px);

		line-height: .94;
	}

	.gm-hero__description {
		margin-top: 27px;

		font-size: 15px;
		line-height: 1.65;
	}

	.gm-hero__actions {
		flex-direction: column;
		align-items: stretch;

		gap: 8px;
	}

	.gm-hero__button {
		width: 100%;
	}

	.gm-hero__link {
		justify-content: space-between;

		min-height: 48px;
	}

	.gm-hero__capabilities {
		flex-wrap: wrap;

		gap:
			10px
			13px;

		margin-top: 38px;
	}

	.gm-hero__capabilities span {
		font-size: 8px;
	}

	.gm-hero__image {
		height: 360px;
	}

	.gm-hero__media-card {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}


	/* =====================================================
	   SOLUTIONS
	   ===================================================== */

	.gm-solutions {
		padding:
			65px
			0
			70px;
	}

	.gm-solutions__header {
		margin-bottom: 38px;
	}

	.gm-solutions__heading h2 {
		font-size: clamp(40px, 12vw, 54px);

		line-height: .98;
	}

	.gm-solutions__heading p {
		font-size: 14px;
	}

	.gm-solutions__grid {
		display: block;
	}

	.gm-solution-card {
		min-height: 300px;

		padding:
			24px
			22px;
	}

	.gm-solution-card__top {
		margin-bottom: 38px;
	}

	.gm-solution-card h3 {
		max-width: none;

		font-size: 20px;
	}

	.gm-solution-card p {
		max-width: none;

		font-size: 13px;
	}


	/* =====================================================
	   GROWTH 360
	   ===================================================== */

	.gm-growth360 {
		padding:
			65px
			0
			70px;
	}

	.gm-growth360__title {
		font-size: clamp(46px, 13vw, 59px);
	}

	.gm-growth360__text {
		font-size: 15px;
	}

	.gm-growth360__button {
		width: 100%;
	}

	.gm-growth360__visual {
		overflow: hidden;
	}

	.gm-growth360__diagram {
		transform: scale(.82);
		transform-origin: center center;
	}


	/* =====================================================
	   CAPABILITIES
	   ===================================================== */

	.gm-capabilities {
		padding:
			60px
			0
			70px;
	}

	.gm-capabilities__title {
		font-size: clamp(40px, 11.5vw, 54px);
	}

	.gm-capability {
		grid-template-columns:
			30px
			1fr
			auto;

		min-height: 68px;
	}

	.gm-capability__title {
		font-size: 13px;
	}


	/* =====================================================
	   METHOD
	   ===================================================== */

	.gm-method {
		padding:
			65px
			0
			70px;
	}

	.gm-method__title {
		font-size: clamp(40px, 11.5vw, 54px);
	}

	.gm-method__steps {
		display: block;
	}

	.gm-method-step {
		min-height: 210px;

		padding:
			28px
			20px;

		border-right: 0;
		border-bottom: 1px solid #cad8da;
	}


	/* =====================================================
	   EXPERIENCE
	   ===================================================== */

	.gm-experience {
		padding:
			60px
			0
			65px;
	}

	.gm-experience__heading h2 {
		font-size: clamp(38px, 11vw, 50px);
	}

	.gm-experience__grid {
		display: block;
	}

	.gm-experience-card,
	.gm-experience-card--wide,
	.gm-experience-card--half {
		width: 100%;

		min-height: 390px;

		margin-bottom: 8px;
	}

	.gm-experience-card:last-child {
		margin-bottom: 0;
	}

	.gm-experience-card__content {
		left: 18px;
		right: 18px;
		bottom: 18px;
	}

	.gm-experience-card h3,
	.gm-experience-card--half h3 {
		font-size: 19px;
	}


	/* =====================================================
	   ABOUT
	   ===================================================== */

	.gm-about__quote,
	.gm-about__content {
		padding:
			58px
			0;
	}

	.gm-about__quote p {
		font-size: clamp(29px, 9vw, 40px);
	}

	.gm-about__content h2 {
		font-size: clamp(38px, 11vw, 50px);
	}


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

	.gm-final-cta {
		padding:
			68px
			0;
	}

	.gm-final-cta__eyebrow {
		font-size: 8px;

		line-height: 1.4;
	}

	.gm-final-cta h2 {
		font-size: clamp(40px, 11vw, 54px);
	}

	.gm-final-cta__button {
		width: 100%;
	}


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

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

	.gm-diagnosis__header {
		gap: 15px;

		margin-bottom: 35px;
	}

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

	.gm-diagnosis__selection {
		font-size: 14px;
		line-height: 1.5;
	}

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

		flex: 0 0 40px;
	}


	/* =====================================================
	   DIAGNOSIS FORM
	   ===================================================== */

	.gm-diagnosis-form {
		width: 100%;
	}

	.gm-diagnosis-form__sidebar-inner {
		min-height: 270px;

		padding:
			30px
			22px;
	}

	.gm-diagnosis-form__sidebar h3 {
		font-size: 28px;
	}

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

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

		padding:
			32px
			22px;
	}

	.gm-form-step h3 {
		margin-bottom: 30px;

		font-size: 27px;
	}

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

		gap: 22px;
	}

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

	.gm-form-actions {
		padding-top: 32px;
	}

	.gm-form-next,
	.gm-form-submit {
		min-height: 52px;
	}

}


/* =========================================================
   MOBILE PEQUEÑO
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

	/* Evita zoom extraño de inputs en móviles */
	.gm-form-field input,
	.gm-form-field select,
	.gm-form-field textarea {
		font-size: 16px;
	}


	/* HERO */

	.gm-hero__title {
		font-size: clamp(41px, 13vw, 52px);
	}


	/* GROWTH 360 */

	.gm-growth360__diagram {
		margin-left: -28px;

		transform: scale(.72);
		transform-origin: center center;
	}


	/* FORM BUTTONS */

	.gm-form-actions--between {
		flex-direction: column-reverse;
		align-items: stretch;

		gap: 18px;
	}

	.gm-form-next,
	.gm-form-submit {
		width: 100%;
	}

	.gm-form-back {
		min-height: 44px;

		text-align: left;
	}


	/* SUCCESS */

	.gm-form-success h3 {
		font-size: 35px;
	}

}