/* ==========================================================================
   Widget: Hero de página (compacta)
   ========================================================================== */

.mr-phero {
	position: relative;
	overflow: hidden;
	padding: 8.5rem 1.5rem 5.5rem;
	background: var(--mr-lavender-soft);
	font-family: var(--mr-font-body);
}
.mr-phero--regular { padding: 10rem 1.5rem 7.5rem; }
.mr-phero--dark { background: var(--mr-purple); }

/* ---------- Imagem de fundo + camada de cor ---------- */
.mr-phero .mr-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mr-phero__overlay { position: absolute; inset: 0; background: var(--mr-lavender-soft); opacity: .88; }
.mr-phero--dark .mr-phero__overlay { background: var(--mr-purple); }

/* ---------- Flor da logo e onda ---------- */
.mr-phero__deco {
	position: absolute;
	top: 5.5rem;
	right: 8%;
	width: 130px;
	color: var(--mr-purple);
	opacity: .09;
	pointer-events: none;
}
.mr-phero--dark .mr-phero__deco { color: #fff; opacity: .1; }

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

/* ---------- Conteúdo ---------- */
.mr-phero__inner { position: relative; z-index: 1; max-width: var(--mr-max-w); margin: 0 auto; }
.mr-phero--center .mr-phero__inner { text-align: center; }

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

.mr-phero--dark .mr-phero__crumbs { color: rgba(255, 255, 255, .6); }
.mr-phero--dark .mr-phero__crumbs a:hover,
.mr-phero--dark .mr-phero__crumbs a:focus { color: #fff; }
.mr-phero--dark .mr-phero__crumbs [aria-current] { color: var(--mr-lavender); }

.mr-phero__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-phero--dark .mr-phero__tag { background: rgba(255, 255, 255, .15); color: #fff; }

.mr-phero .mr-phero__title {
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	font-style: italic;
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: .95;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-phero .mr-phero__title em,
.mr-phero .mr-phero__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }
.mr-phero--dark .mr-phero__title { color: #fff; }
.mr-phero--dark .mr-phero__title em,
.mr-phero--dark .mr-phero__title strong { color: var(--mr-lavender); }

.mr-phero .mr-phero__lead { max-width: 56ch; margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--mr-text-muted); }
.mr-phero--center .mr-phero__lead { margin-left: auto; margin-right: auto; }
.mr-phero--dark .mr-phero__lead { color: rgba(255, 255, 255, .78); }

@media (max-width: 960px) {
	.mr-phero__deco { right: 4%; width: 100px; }
}

@media (max-width: 640px) {
	.mr-phero { padding: 7.5rem 1.25rem 4.5rem; }
	.mr-phero--regular { padding: 8rem 1.25rem 5.5rem; }
	.mr-phero__deco { display: none; }
	.mr-phero .mr-phero__lead { font-size: 1rem; }
}