/* ==========================================================================
   Widget: Faixa de CTA
   ========================================================================== */

.mr-cta {
	position: relative;
	overflow: hidden;
	padding: 3.5rem 1.5rem 10rem;
	background: var(--mr-purple);
	font-family: var(--mr-font-body);
}

.mr-cta__inner {
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.mr-cta__text { position: relative; z-index: 1; }

.mr-cta .mr-cta__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	color: #fff;
}
.mr-cta .mr-cta__title em,
.mr-cta .mr-cta__title strong { font-weight: 500; font-style: italic; color: var(--mr-lavender); }

/* aspas decorativas grandes atrás do texto */
.mr-cta--quote .mr-cta__title::before {
	content: '\201C';
	position: absolute;
	top: -3rem;
	left: -2rem;
	z-index: -1;
	font-family: var(--mr-font-display);
	font-size: 9rem;
	font-style: italic;
	line-height: 1;
	color: var(--mr-lavender);
	opacity: .18;
	pointer-events: none;
}

.mr-cta .mr-cta__sub { margin: .35rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .6); }

.mr-cta__btn { flex-shrink: 0; }
.mr-cta .mr-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.mr-cta__wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; pointer-events: none; color: #fff; }
.mr-cta__wave svg { display: block; width: 100%; height: 72px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-cta__inner { flex-direction: column; text-align: center; }
	.mr-cta--quote .mr-cta__title::before { left: 50%; margin-left: -2.5rem; }
}

@media (max-width: 640px) {
	.mr-cta { padding: 3rem 1.25rem 7.5rem; }
	.mr-cta__btn { width: 100%; justify-content: center; }
}