/* ==========================================================================
   Widget: Hero de especialidade (texto à esquerda, balão com ícone à direita)
   ========================================================================== */

.mr-shero {
	position: relative;
	overflow: hidden;
	padding: 8.5rem 1.5rem 7rem;
	background: var(--mr-lavender-soft);
	font-family: var(--mr-font-body);
}

.mr-shero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 4rem;
	align-items: center;
}

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

/* ---------- Breadcrumb ---------- */
.mr-shero__crumbs { margin-bottom: 1.4rem; font-size: .78rem; color: var(--mr-text-light); }
.mr-shero__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mr-shero__crumbs li { display: flex; align-items: center; gap: .45rem; margin: 0; padding: 0; }
.mr-shero__crumbs li + li::before { content: '\203A'; opacity: .6; }
.mr-shero .mr-shero__crumbs a { color: inherit; text-decoration: none; transition: color .2s; }
.mr-shero .mr-shero__crumbs a:hover,
.mr-shero .mr-shero__crumbs a:focus { color: var(--mr-purple); }
.mr-shero__crumbs [aria-current] { color: var(--mr-purple); font-weight: 600; }

/* ---------- Texto ---------- */
.mr-shero__tag {
	display: inline-block;
	margin-bottom: 1.1rem;
	padding: .3rem 1rem;
	border-radius: 100px;
	background: var(--mr-lavender);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mr-purple);
}

.mr-shero .mr-shero__title {
	margin: 0 0 1.2rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2.8rem, 6vw, 5rem);
	font-style: italic;
	font-weight: 300;
	font-variant-numeric: lining-nums;
	letter-spacing: -.02em;
	line-height: .95;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-shero .mr-shero__title em,
.mr-shero .mr-shero__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }

.mr-shero .mr-shero__lead {
	max-width: 52ch;
	margin: 0 0 1.8rem;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--mr-text-muted);
}

/* ---------- Botões ---------- */
.mr-shero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.8rem; }
.mr-shero .mr-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- Dados legais ---------- */
.mr-shero .mr-shero__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	margin: 0;
	font-size: .82rem;
	line-height: 1.4;
	color: var(--mr-text-light);
}
.mr-shero__legal-name { font-weight: 800; color: var(--mr-purple); }
.mr-shero__legal-who { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.mr-shero__legal-item { position: relative; padding-left: .85rem; font-weight: 700; color: var(--mr-text-muted); }
.mr-shero__legal-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--mr-purple-mid);
}

/* ---------- Balão com ícone ---------- */
.mr-shero__visual { position: relative; }

.mr-shero__blob {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	background: radial-gradient(circle at 32% 28%, #f6ebff 0%, var(--mr-lavender) 62%, #dfbff8 100%);
	border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
	animation: mr-shero-morph 13s ease-in-out infinite;
}

/* anéis suaves ao redor do ícone */
.mr-shero__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1.5px solid rgba(83, 32, 107, .12); transform: translate(-50%, -50%); }
.mr-shero__ring--1 { width: 62%; height: 62%; }
.mr-shero__ring--2 { width: 84%; height: 84%; border-color: rgba(83, 32, 107, .07); }

.mr-shero__badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 44px rgba(83, 32, 107, .18);
}

.mr-shero__icon { display: flex; align-items: center; justify-content: center; font-size: 72px; line-height: 1; color: var(--mr-purple); }
.mr-shero__icon i { line-height: 1; }
.mr-shero__icon svg { width: 72px; height: 72px; fill: currentColor; }

.mr-shero__dot {
	position: absolute;
	border-radius: 50%;
	background: var(--mr-purple);
	opacity: .07;
	animation: mr-shero-float 5s ease-in-out infinite;
}
.mr-shero__dot:nth-child(1) { width: 48px; height: 48px; top: 6%; right: 2%; animation-delay: -1s; }
.mr-shero__dot:nth-child(2) { width: 28px; height: 28px; bottom: 10%; left: 2%; animation-delay: -3.5s; }

@keyframes mr-shero-morph {
	0%, 100% { border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; }
	25%      { border-radius: 42% 58% 44% 56% / 58% 42% 58% 42%; }
	50%      { border-radius: 65% 35% 55% 45% / 42% 60% 40% 58%; }
	75%      { border-radius: 38% 62% 48% 52% / 60% 40% 60% 40%; }
}
@keyframes mr-shero-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.mr-shero__blob,
	.mr-shero__dot { animation: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-shero__inner { grid-template-columns: 1fr; gap: 2.5rem; }

	/* o balão desce para baixo dos botões */
	.mr-shero__visual { max-width: 280px; width: 100%; margin: 0 auto; }
	.mr-shero--visual-hide-mobile .mr-shero__visual { display: none; }
}

@media (max-width: 640px) {
	.mr-shero { padding: 7.5rem 1rem 5.5rem; }
	.mr-shero__actions .mr-btn { width: 100%; justify-content: center; }
	.mr-shero__legal-who { flex-basis: 100%; }
	.mr-shero__legal-who + .mr-shero__legal-item { padding-left: 0; }
	.mr-shero__legal-who + .mr-shero__legal-item::before { display: none; }
}