/* ==========================================================================
   Widget: Hero
   ========================================================================== */

.mr-hero {
	position: relative;
	overflow: hidden;
	padding: 9rem 1.5rem 7.5rem;
	background: var(--mr-lavender-soft);
	font-family: var(--mr-font-body);
}

.mr-hero__inner {
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 3.5rem;
	align-items: center;
}

/* ---------- Ilustração botânica e onda ---------- */
.mr-hero__deco {
	position: absolute;
	top: 6rem;
	right: 14%;
	width: 120px;
	color: var(--mr-purple);
	opacity: .09;
	pointer-events: none;
}

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

/* ---------- Texto ---------- */
.mr-hero__eyebrow { display: block; margin-bottom: 1.25rem; }

.mr-hero .mr-hero__title {
	margin: 0 0 1.3rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(3rem, 7vw, 5.5rem);
	font-style: italic;
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: .85;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-hero .mr-hero__title em,
.mr-hero .mr-hero__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }

.mr-hero .mr-hero__lead {
	max-width: 48ch;
	margin: 2rem 0;
	font-size: 1.07rem;
	line-height: 1.4;
	color: var(--mr-text-muted);
}

/* ---------- Cartões ---------- */
.mr-hero .mr-hero__cards-label {
	margin: 0 0 .75rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mr-text-light);
}

.mr-hero .mr-hero__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.mr-hero .mr-hero__cards li { margin: 0; padding: 0; display: flex; }

.mr-hero .mr-hero__card {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	width: 100%;
	padding: .9rem 1rem;
	background: var(--mr-white);
	border: 1.5px solid var(--mr-border);
	border-radius: .9rem;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--mr-text-muted);
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s, transform .18s;
}
.mr-hero .mr-hero__card:not(.mr-hero__card--static):hover,
.mr-hero .mr-hero__card:not(.mr-hero__card--static):focus,
.mr-hero .mr-hero__card:not(.mr-hero__card--static):active {
	background: var(--mr-purple);
	border-color: var(--mr-purple);
	color: #fff;
	transform: translateY(-2px);
}

.mr-hero__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mr-lavender);
	color: var(--mr-purple);
	font-size: 14px;
	transition: background .2s, color .2s;
}
.mr-hero__card-icon i { line-height: 1; }
.mr-hero__card-icon svg { width: 15px; height: 15px; fill: currentColor; }
.mr-hero .mr-hero__card:not(.mr-hero__card--static):hover .mr-hero__card-icon,
.mr-hero .mr-hero__card:not(.mr-hero__card--static):focus .mr-hero__card-icon,
.mr-hero .mr-hero__card:not(.mr-hero__card--static):active .mr-hero__card-icon { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- Botões ---------- */
.mr-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mr-hero .mr-btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- Foto em duas camadas ---------- */
.mr-hero__visual { position: relative; }

.mr-hero__photo { position: relative; width: 100%; max-width: 400px; }

/* o "blob" recorta o corpo; a cabeça (2ª camada) sai por cima do topo */
.mr-hero__blob {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-top: 72px;
	overflow: hidden;
	background: var(--mr-lavender);
	border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
	animation: mr-hero-morph 13s ease-in-out infinite;
}

.mr-hero .mr-hero__photo-body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}

.mr-hero .mr-hero__photo-head {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	pointer-events: none;
}

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

@keyframes mr-hero-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-hero-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.mr-hero__blob,
	.mr-hero__dot { animation: none; }
}

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

	/* a foto desce para baixo dos botões */
	.mr-hero__visual { max-width: 340px; width: 100%; margin: 0 auto; }
	.mr-hero__blob { margin-top: 56px; }
	.mr-hero--photo-hide-mobile .mr-hero__visual { display: none; }
}

@media (max-width: 640px) {
	.mr-hero { padding: 8rem 1rem 5.5rem; }
	.mr-hero .mr-hero__cards { grid-template-columns: 1fr; }
	.mr-hero__actions .mr-btn { width: 100%; justify-content: center; }
}