/* ==========================================================================
   Widget: CTA final
   ========================================================================== */

.mr-cta-final {
	position: relative;
	overflow: hidden;
	padding: 7rem 1.5rem;
	background: var(--mr-purple);
	text-align: center;
	font-family: var(--mr-font-body);
}

.mr-cta-final__deco {
	position: absolute;
	top: 2rem;
	right: 3rem;
	width: 170px;
	color: #fff;
	opacity: .09;
	pointer-events: none;
}

.mr-cta-final__inner { position: relative; max-width: 660px; margin: 0 auto; }

.mr-cta-final .mr-cta-final__eyebrow { display: block; margin-bottom: .85rem; font-weight: 500; color: var(--mr-lavender); opacity: .7; }

.mr-cta-final .mr-cta-final__title {
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2rem, 4vw, 4rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}
.mr-cta-final .mr-cta-final__title em,
.mr-cta-final .mr-cta-final__title strong { font-style: italic; font-weight: 500; color: var(--mr-lavender); }

.mr-cta-final .mr-cta-final__text { margin: 0 0 2rem; font-size: 1.2rem; line-height: 1.4; color: rgba(255, 255, 255, .65); }

.mr-cta-final .mr-cta-final__btn { padding: 1rem 2.2rem; font-size: 1rem; }
.mr-cta-final .mr-btn svg { width: 21px; height: 21px; flex-shrink: 0; }

/* com foto: texto à esquerda, foto à direita */
.mr-cta-final--photo { text-align: left; }
.mr-cta-final--photo .mr-cta-final__inner {
	max-width: var(--mr-max-w);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: 3rem 5rem;
}
.mr-cta-final--photo .mr-cta-final__content { max-width: 34rem; }
.mr-cta-final__photo { justify-self: end; width: 100%; max-width: 25rem; --mr-bp-bg: var(--mr-lavender); }
.mr-cta-final__photo .mr-bphoto { margin-right: 0; }

@media (max-width: 960px) {
	.mr-cta-final--photo .mr-cta-final__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.mr-cta-final--photo { text-align: center; }
	.mr-cta-final--photo .mr-cta-final__content { margin: 0 auto; }
	.mr-cta-final__photo { justify-self: center; max-width: 20rem; }
	.mr-cta-final__photo .mr-bphoto { margin-right: auto; }
}

@media (max-width: 640px) {
	.mr-cta-final { padding: 5rem 1.25rem; }
	.mr-cta-final__deco { right: 1rem; width: 100px; }
	.mr-cta-final .mr-cta-final__text { font-size: 1.05rem; }
	.mr-cta-final .mr-cta-final__btn { width: 100%; justify-content: center; padding: 1rem 1.5rem; }
}
