/* ==========================================================================
   Widget: Minha abordagem (seção escura: dados dela, frase e cards numerados)
   ========================================================================== */

.mr-appr {
	position: relative;
	overflow: hidden;
	padding: 6rem 1.5rem 6.5rem;
	background: var(--mr-purple);
	font-family: var(--mr-font-body);
	color: #fff;
}

.mr-appr__deco {
	position: absolute;
	top: 2.5rem;
	right: -2rem;
	width: 210px;
	color: #fff;
	opacity: .08;
	pointer-events: none;
}

.mr-appr__inner { position: relative; z-index: 1; max-width: var(--mr-max-w); margin: 0 auto; }

.mr-appr .mr-appr__eyebrow { display: block; margin-bottom: 1.3rem; color: var(--mr-lavender); opacity: .75; }

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

/* ---------- Dados dela ---------- */
.mr-appr__author { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }

.mr-appr__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 2px solid rgba(255, 255, 255, .35);
	color: rgba(255, 255, 255, .8);
}
.mr-appr .mr-appr__avatar-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 12%; }
.mr-appr__avatar svg { width: 26px; height: 26px; }

.mr-appr__author-text { display: flex; flex-direction: column; gap: .1rem; }
.mr-appr__author-name { font-family: var(--mr-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: #fff; }
.mr-appr__author-role { font-size: .8rem; line-height: 1.3; color: rgba(236, 215, 254, .7); }

/* ---------- Frase ---------- */
.mr-appr__quote {
	position: relative;
	max-width: 62rem;
	margin: 0 0 3rem;
	padding: .3rem 0 .3rem 1.8rem;
	border-left: 2px solid rgba(255, 255, 255, .28);
}
.mr-appr__quote-mark {
	position: absolute;
	top: -1.2rem;
	left: .6rem;
	font-family: var(--mr-font-display);
	font-size: 6.5rem;
	font-style: italic;
	line-height: 1;
	color: rgba(255, 255, 255, .2);
	pointer-events: none;
	user-select: none;
}
.mr-appr .mr-appr__quote-text {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(1.5rem, 2.9vw, 2.35rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	text-wrap: pretty;
}

/* ---------- Cards ---------- */
.mr-appr .mr-appr__cards {
	--mr-appr-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--mr-appr-cols), minmax(0, 1fr));
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-appr .mr-appr__card {
	margin: 0;
	padding: 1.5rem 1.6rem 1.7rem;
	background: rgba(255, 255, 255, .08);
	border: 1.5px solid rgba(255, 255, 255, .13);
	border-radius: 1.25rem;
	transition: background .2s, border-color .2s, transform .2s;
}
.mr-appr .mr-appr__card:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .25);
	transform: translateY(-3px);
}

.mr-appr__num {
	display: block;
	margin-bottom: .6rem;
	font-family: var(--mr-font-display);
	font-size: 2.4rem;
	font-weight: 300;
	line-height: 1;
	color: rgba(236, 215, 254, .4);
}

.mr-appr .mr-appr__card-title {
	margin: 0 0 .5rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.mr-appr .mr-appr__card-text { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(236, 215, 254, .75); }

/* ---------- Onda ---------- */
.mr-appr__wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 2; color: #fff; }
.mr-appr__wave svg { display: block; width: 100%; height: 72px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-appr { padding: 4.5rem 1.25rem 5rem; }
	.mr-appr .mr-appr__cards { grid-template-columns: 1fr; }
	.mr-appr__deco { width: 150px; right: -3rem; }
}

@media (max-width: 640px) {
	.mr-appr { padding: 3.75rem 1rem 4.5rem; }
	.mr-appr__quote { padding-left: 1.2rem; margin-bottom: 2.2rem; }
	.mr-appr__quote-mark { font-size: 5rem; left: .3rem; }
}