/* ==========================================================================
   Widget: Hero Quem sou eu (foto à esquerda, texto à direita)
   ========================================================================== */

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

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

/* ---------- Flor da logo e onda ---------- */
.mr-ahero__deco {
	position: absolute;
	top: 6rem;
	right: 6%;
	width: 130px;
	color: var(--mr-purple);
	opacity: .09;
	pointer-events: none;
}

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

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

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

.mr-ahero .mr-ahero__lead {
	max-width: 52ch;
	margin: 1.6rem 0 1.8rem;
	font-size: 1.07rem;
	line-height: 1.45;
	color: var(--mr-text-muted);
}

/* ---------- Dados ---------- */
.mr-ahero .mr-ahero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin: 0 0 2rem;
	padding: 0;
}

.mr-ahero .mr-ahero__fact {
	margin: 0;
	padding: .8rem 1.1rem;
	background: var(--mr-white);
	border: 1.5px solid var(--mr-border);
	border-radius: .9rem;
}

.mr-ahero .mr-ahero__fact-value {
	margin: 0;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	font-variant-numeric: lining-nums;
	line-height: 1.15;
	color: var(--mr-purple);
}

.mr-ahero .mr-ahero__fact-label {
	margin: .2rem 0 0;
	padding: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mr-text-light);
}

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

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

.mr-ahero__photo { position: relative; width: 100%; max-width: 420px; }

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

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

.mr-ahero .mr-ahero__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-ahero__dot {
	position: absolute;
	border-radius: 50%;
	background: var(--mr-purple);
	opacity: .07;
	animation: mr-ahero-float 5s ease-in-out infinite;
}
.mr-ahero__dot:nth-child(1) { width: 48px; height: 48px; top: 10%; left: -5%; animation-delay: -1s; }
.mr-ahero__dot:nth-child(2) { width: 28px; height: 28px; bottom: 15%; right: -3%; animation-delay: -3.5s; }

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

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1080px) {
	.mr-ahero__inner { grid-template-columns: 360px 1fr; gap: 3rem; }
}

@media (max-width: 960px) {
	.mr-ahero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.mr-ahero__deco { display: none; }

	/* a foto desce para baixo dos botões */
	.mr-ahero__content { order: 1; }
	.mr-ahero__visual { order: 2; max-width: 340px; width: 100%; margin: 0 auto; }
	.mr-ahero__blob { margin-top: 56px; }
	.mr-ahero--photo-hide-mobile .mr-ahero__visual { display: none; }
}

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