/* =========================================================
   AL QUÈRTO
   WHATSAPP CTA
   Namespace esclusivo: .aq-wa-cta
   ========================================================= */


.aq-wa-cta {

	--aq-wa-blue: #053cff;
	--aq-wa-ink: #04070f;
	--aq-wa-paper: #fbfaf5;
	--aq-wa-muted: #5f6676;
	--aq-wa-line: rgba(4, 7, 15, .13);
	--aq-wa-soft-blue: rgba(5, 60, 255, .065);
	--aq-wa-green: #25d366;

	position: relative;

	width: 100%;

	overflow: hidden;

	background: var(--aq-wa-paper);

	color: var(--aq-wa-ink);

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;
}


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

.aq-wa-cta__inner {

	position: relative;

	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1.15fr)
		minmax(390px, .85fr);

	width: min(
		1320px,
		calc(100% - 64px)
	);

	margin: 0 auto;

	padding:
		clamp(85px, 8vw, 130px)
		0;
}


/* =========================================================
   LEFT
   ========================================================= */

.aq-wa-cta__copy {

	min-width: 0;

	padding-right:
		clamp(45px, 6vw, 90px);
}


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

.aq-wa-cta__eyebrow {

	display: flex;

	align-items: center;

	gap: 18px;

	margin: 0 0 26px;

	color: var(--aq-wa-blue);

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size: .74rem;

	font-weight: 800;

	line-height: 1;

	letter-spacing: .15em;

	text-transform: uppercase;
}


.aq-wa-cta__eyebrow-line {

	display: block;

	flex: 0 0 48px;

	width: 48px;

	height: 2px;

	background: var(--aq-wa-blue);
}


.aq-wa-cta__eyebrow-text {

	color: var(--aq-wa-blue);
}


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

.aq-wa-cta .aq-wa-cta__title {

	display: block;

	max-width: 760px;

	margin: 0;

	padding: 0;

	color: var(--aq-wa-ink);

	font-family:
		"Anton",
		Sans-serif;

	font-size:
		clamp(
			4rem,
			6.3vw,
			7.2rem
		);

	font-weight: 400;

	font-style: normal;

	line-height: .89;

	letter-spacing: -.025em;

	text-transform: uppercase;

	opacity: 1;

	text-shadow: none;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.aq-wa-cta__description {

	max-width: 690px;

	margin-top: 32px;

	color: #252c3d;

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size:
		clamp(
			1rem,
			1.25vw,
			1.15rem
		);

	font-weight: 400;

	line-height: 1.58;
}


.aq-wa-cta__description p {

	margin: 0;

	padding: 0;

	color: inherit;

	font: inherit;

	line-height: inherit;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.aq-wa-cta__benefits {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	margin-top: 38px;
}


.aq-wa-cta__benefit {

	position: relative;

	display: flex;

	align-items: center;

	gap: 12px;

	min-height: 48px;

	margin-right: 26px;

	padding-right: 26px;

	color: #252c3d;

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size: .92rem;

	font-weight: 500;

	line-height: 1.3;
}


.aq-wa-cta__benefit:last-child {

	margin-right: 0;

	padding-right: 0;
}


.aq-wa-cta__benefit:not(:last-child)::after {

	content: "";

	position: absolute;

	top: 8px;

	right: 0;

	bottom: 8px;

	width: 1px;

	background: var(--aq-wa-line);
}


.aq-wa-cta__benefit-icon {

	display: grid;

	place-items: center;

	flex:
		0 0
		46px;

	width: 46px;

	height: 46px;

	border-radius: 50%;

	background: var(--aq-wa-soft-blue);

	color: var(--aq-wa-blue);

	font-size: 1.05rem;
}


.aq-wa-cta__benefit-icon i {

	color: inherit;
}


.aq-wa-cta__benefit-icon svg {

	width: 1em;

	height: 1em;

	fill: currentColor;
}


.aq-wa-cta__benefit-label {

	color: #252c3d;

	white-space: nowrap;
}


/* =========================================================
   RIGHT
   ========================================================= */

.aq-wa-cta__action {

	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: center;

	min-width: 0;

	padding-left:
		clamp(45px, 6vw, 90px);

	border-left:
		1px solid
		var(--aq-wa-line);
}


/* =========================================================
   NOTE
   ========================================================= */

.aq-wa-cta__note {

	align-self: flex-end;

	margin:
		0
		18px
		28px
		0;

	color: var(--aq-wa-blue);

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size:
		clamp(
			1.05rem,
			1.45vw,
			1.35rem
		);

	font-style: italic;

	font-weight: 500;

	line-height: 1.2;

	text-align: right;
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.aq-wa-cta .aq-wa-cta__button {

	position: relative;

	display: grid;

	grid-template-columns:
		auto
		1fr
		auto;

	align-items: center;

	gap: 22px;

	width: 100%;

	min-height: 92px;

	margin: 0;

	padding:
		18px
		30px;

	border: 0;

	border-radius: 999px;

	background: var(--aq-wa-green);

	color: #fff;

	box-shadow:
		0 22px 55px
		rgba(37, 211, 102, .18);

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	text-decoration: none;

	opacity: 1;

	transform: none;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease;
}


.aq-wa-cta .aq-wa-cta__button:hover {

	background: #20c961;

	color: #fff;

	text-decoration: none;

	transform:
		translateY(-4px);

	box-shadow:
		0 28px 65px
		rgba(37, 211, 102, .27);
}


.aq-wa-cta .aq-wa-cta__button:focus-visible {

	outline:
		3px solid
		rgba(5, 60, 255, .35);

	outline-offset: 5px;
}


/* =========================================================
   WHATSAPP ICON
   ========================================================= */

.aq-wa-cta__wa-icon {

	display: grid;

	place-items: center;

	flex-shrink: 0;

	width: 56px;

	height: 56px;

	color: #fff;
}


.aq-wa-cta__wa-icon svg {

	display: block;

	width: 100%;

	height: 100%;

	fill: currentColor;
}


/* =========================================================
   BUTTON LABEL
   ========================================================= */

.aq-wa-cta__button-label {

	color: #fff;

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size:
		clamp(
			1.15rem,
			1.55vw,
			1.45rem
		);

	font-weight: 700;

	line-height: 1.2;

	text-align: left;
}


/* =========================================================
   ARROW
   ========================================================= */

.aq-wa-cta__arrow {

	color: #fff;

	font-family:
		Inter,
		Sans-serif;

	font-size: 2rem;

	font-weight: 300;

	line-height: 1;

	transition:
		transform .25s ease;
}


.aq-wa-cta__button:hover
.aq-wa-cta__arrow {

	transform:
		translateX(5px);
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.aq-wa-cta__subtitle {

	margin:
		15px
		0
		0;

	padding: 0;

	color: var(--aq-wa-muted);

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size: .9rem;

	font-weight: 400;

	line-height: 1.45;

	text-align: center;
}


/* =========================================================
   MESSAGE PREVIEW
   ========================================================= */

.aq-wa-cta__preview {

	position: relative;

	margin-top: 28px;

	padding:
		27px
		30px;

	border:
		1px solid
		rgba(4, 7, 15, .035);

	border-radius: 26px;

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

	box-shadow:
		0 18px 45px
		rgba(6, 18, 55, .055);
}


/* fumetto */

.aq-wa-cta__preview::before {

	content: "";

	position: absolute;

	top: 31px;

	left: -12px;

	width: 25px;

	height: 25px;

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

	transform:
		rotate(45deg);
}


/* =========================================================
   PREVIEW LABEL
   ========================================================= */

.aq-wa-cta__preview-label {

	position: relative;

	z-index: 2;

	display: block;

	margin:
		0
		0
		12px;

	color: #747b8c;

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size: .67rem;

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: .16em;

	text-transform: uppercase;
}


/* =========================================================
   PREVIEW CONTENT
   ========================================================= */

.aq-wa-cta__preview-row {

	position: relative;

	z-index: 2;

	display: grid;

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

	align-items: center;

	gap: 22px;
}


.aq-wa-cta__preview-message {

	margin: 0;

	padding: 0;

	color: #232a3a;

	font-family:
		Inter,
		var(--e-global-typography-text-font-family),
		Sans-serif;

	font-size: 1rem;

	font-weight: 400;

	line-height: 1.5;
}


/* =========================================================
   COPY ICON
   ========================================================= */

.aq-wa-cta__copy-icon {

	display: block;

	flex-shrink: 0;

	width: 23px;

	height: 23px;

	color: var(--aq-wa-blue);
}


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

@media (max-width: 1100px) {


	.aq-wa-cta__inner {

		grid-template-columns: 1fr;

		width:
			min(
				900px,
				calc(100% - 48px)
			);
	}


	.aq-wa-cta__copy {

		padding-right: 0;
	}


	.aq-wa-cta__action {

		margin-top: 58px;

		padding:
			52px
			0
			0;

		border-left: 0;

		border-top:
			1px solid
			var(--aq-wa-line);
	}


	.aq-wa-cta__note {

		align-self: flex-start;

		margin-right: 0;

		text-align: left;
	}


	.aq-wa-cta__button,
	.aq-wa-cta__preview {

		max-width: 640px;
	}


}


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

@media (max-width: 767px) {


	.aq-wa-cta__inner {

		width:
			calc(100% - 32px);

		padding:
			64px
			0
			70px;
	}


	/* eyebrow */

	.aq-wa-cta__eyebrow {

		gap: 12px;

		margin-bottom: 22px;

		font-size: .66rem;
	}


	.aq-wa-cta__eyebrow-line {

		flex-basis: 32px;

		width: 32px;
	}


	/* title */

	.aq-wa-cta .aq-wa-cta__title {

		max-width: 100%;

		font-size:
			clamp(
				3.1rem,
				16vw,
				5rem
			);

		line-height: .91;
	}


	/* description */

	.aq-wa-cta__description {

		margin-top: 24px;

		font-size: 1rem;

		line-height: 1.55;
	}


	/* benefits */

	.aq-wa-cta__benefits {

		display: grid;

		grid-template-columns: 1fr;

		gap: 12px;

		margin-top: 30px;
	}


	.aq-wa-cta__benefit {

		min-height: 44px;

		margin: 0;

		padding: 0;
	}


	.aq-wa-cta__benefit:not(:last-child)::after {

		display: none;
	}


	.aq-wa-cta__benefit-icon {

		flex-basis: 42px;

		width: 42px;

		height: 42px;
	}


	/* action */

	.aq-wa-cta__action {

		margin-top: 42px;

		padding-top: 40px;
	}


	.aq-wa-cta__note {

		margin:
			0
			0
			20px;

		font-size: 1rem;
	}


	/* button */

	.aq-wa-cta .aq-wa-cta__button {

		gap: 14px;

		min-height: 76px;

		padding:
			14px
			20px;
	}


	.aq-wa-cta__wa-icon {

		width: 43px;

		height: 43px;
	}


	.aq-wa-cta__button-label {

		font-size: 1.08rem;
	}


	.aq-wa-cta__arrow {

		font-size: 1.7rem;
	}


	/* preview */

	.aq-wa-cta__preview {

		margin-top: 23px;

		padding:
			23px
			21px;

		border-radius: 22px;
	}


	.aq-wa-cta__preview-message {

		font-size: .94rem;
	}


}


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

@media (max-width: 420px) {


	.aq-wa-cta .aq-wa-cta__title {

		font-size:
			clamp(
				2.8rem,
				15vw,
				4.1rem
			);
	}


	.aq-wa-cta__button-label {

		font-size: 1rem;
	}


	.aq-wa-cta__wa-icon {

		width: 38px;

		height: 38px;
	}


	.aq-wa-cta__preview-row {

		gap: 14px;
	}


}