/* Mulan Nutrition - hero slider v2.
   White wide banner. Gold #B8891E for the light headline words, deeper gold #8A6500 for the bold ones,
   brand yellow #F2C166 for the corner shape, ink #1B1B1B for the button. Radius: banner 20px, button 10px. */

.mh2 {
	--mh2-ink: #1b1b1b;
	--mh2-gold: #b8891e;
	--mh2-gold-deep: #8a6500;
	--mh2-yellow: #f2c166;
	--mh2-yellow-2: #f2da5e;
	--mh2-muted: #6b655b;
	position: relative;
	max-width: 1572px;
	margin: 0 auto;
	padding: 0 16px;
}
.mh2__track { position: relative; display: grid; }
.mh2__slide {
	grid-area: 1 / 1;
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1600 / 380;
	min-height: 300px;
	display: grid;
	grid-template-columns: 31% 37% 32%;
	align-items: center;
	background: #fff;
	border: 1px solid #f0ebe0;
	border-radius: 20px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.mh2__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* Brand tab, top left */
.mh2__brand {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 3.2cqw;
	padding: .9cqw 1.6cqw 1.2cqw;
	background: var(--mh2-yellow);
	border-radius: 0 0 2.4cqw 2.4cqw;
	box-shadow: 0 .6cqw 1.6cqw rgba(138, 101, 0, .18);
	line-height: 0;
}
.mh2__brand img { height: 3.4cqw; min-height: 26px; width: auto; display: block; }

/* Person framed by flowing lines */
.mh2__person { position: relative; align-self: stretch; }
.mh2__lines { position: absolute; left: -2%; bottom: 0; width: 118%; height: 100%; opacity: .85; }
.mh2__photo {
	position: absolute;
	left: 12%;
	bottom: 0;
	width: 70%;
	height: 92%;
	border-radius: 999px 999px 0 0;
	overflow: hidden;
	box-shadow: 0 0 0 .5cqw #fff;
}
.mh2__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Headline and button */
.mh2__copy { position: relative; z-index: 2; text-align: center; padding: 0 1.5cqw; }
.mh2 h2.mh2__title {
	margin: 0 !important;
	font-family: 'Quicksand', var(--afya-font), sans-serif !important;
	font-size: 3.9cqw !important;
	line-height: 1.08 !important;
	letter-spacing: -.01em !important;
	color: var(--mh2-gold) !important;
	font-weight: 400 !important;
	-webkit-text-stroke: 0 !important;
	text-transform: none !important;
}
.mh2__title .is-light { font-weight: 400; color: var(--mh2-gold); }
.mh2__title .is-bold { font-weight: 700; color: var(--mh2-gold-deep); }
.mh2__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15cqw;
	margin-top: 2cqw;
	padding: 1.05cqw 2.6cqw;
	border-radius: 10px;
	background: var(--mh2-ink);
	color: #fff !important;
	font-size: max(14px, 1.45cqw);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color .15s ease, transform .1s ease;
}
.mh2__btn:hover { background: #000; }
.mh2__btn:active { transform: translateY(1px); }
.mh2__btn:focus-visible { outline: 2px solid var(--mh2-gold-deep); outline-offset: 3px; }
.mh2__note { margin: 1.4cqw auto 0; max-width: 30cqw; font-size: max(11px, .85cqw); line-height: 1.4; color: var(--mh2-muted); }

/* Product side */
.mh2__product { position: relative; align-self: stretch; }
.mh2__corner {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 62%;
	height: 72%;
	background: linear-gradient(135deg, var(--mh2-yellow-2), var(--mh2-yellow));
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.mh2__tab {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 22%;
	padding: .8cqw 1.8cqw 1.1cqw;
	border-radius: 0 0 2cqw 2cqw;
	background: linear-gradient(180deg, #c99a2e, var(--mh2-gold-deep));
	color: #fff;
	font-size: max(12px, 1.25cqw);
	font-weight: 800;
	font-style: italic;
	letter-spacing: .04em;
	line-height: 1;
}
.mh2__stat {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 24%;
	width: 46%;
	text-align: right;
	color: var(--mh2-gold);
	line-height: 1.1;
}
.mh2__stat b { display: block; font-family: 'Quicksand', var(--afya-font), sans-serif; font-size: 5.4cqw; font-weight: 700; letter-spacing: -.03em; line-height: .95; color: var(--mh2-gold-deep); }
.mh2__stat span { display: block; margin-top: .4cqw; font-size: max(12px, 1.45cqw); font-weight: 700; color: var(--mh2-gold); }
.mh2__stat small { display: block; font-size: max(11px, 1.15cqw); color: var(--mh2-gold); }
.mh2__badge {
	position: absolute;
	z-index: 3;
	left: 10%;
	bottom: 9%;
	width: 7.2cqw;
	height: 7.2cqw;
	min-width: 58px;
	min-height: 58px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 35% 30%, #e3bd5c, var(--mh2-gold) 70%);
	color: #fff;
	outline: max(1.5px, .2cqw) dashed rgba(255, 255, 255, .75);
	outline-offset: calc(-1 * max(4px, .5cqw));
	box-shadow: 0 .7cqw 1.6cqw rgba(138, 101, 0, .3);
	text-align: center;
	line-height: 1;
}
.mh2__badge b { font-size: max(15px, 2.1cqw); font-weight: 800; }
.mh2__badge small { margin-top: .25cqw; font-size: max(8px, .8cqw); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; max-width: 80%; }
.mh2__cutout {
	position: absolute;
	z-index: 2;
	right: 6%;
	bottom: 4%;
	width: 46%;
	height: 86%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.mh2__cutout img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(60, 40, 0, .22)); }

/* Dots */
.mh2__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.mh2__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #e2dccf; cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.mh2__dot.is-active { width: 26px; background: var(--mh2-ink); }
.mh2__dot:focus-visible { outline: 2px solid var(--mh2-ink); outline-offset: 2px; }

/* Phones: photo and product side by side, text underneath */
@media (max-width: 767px) {
	.mh2__slide {
		aspect-ratio: auto;
		min-height: 0;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 56cqw auto;
		grid-template-areas: "person product" "copy copy";
	}
	.mh2__person { grid-area: person; }
	.mh2__product { grid-area: product; }
	.mh2__copy { grid-area: copy; padding: 5cqw 5cqw 6cqw; }
	.mh2__brand { left: 5cqw; padding: 1.6cqw 3cqw 2.2cqw; border-radius: 0 0 4cqw 4cqw; }
	.mh2__brand img { height: 6cqw; min-height: 0; }
	.mh2 h2.mh2__title { font-size: 7.6cqw !important; }
	.mh2__btn { margin-top: 4cqw; padding: 3cqw 8cqw; font-size: 4cqw; }
	.mh2__note { max-width: none; margin-top: 3cqw; font-size: 3.1cqw; }
	.mh2__stat { display: none; }
	.mh2__tab { right: 6%; font-size: 3cqw; padding: 1.6cqw 3cqw 2.2cqw; }
	.mh2__badge { width: 15cqw; height: 15cqw; min-width: 0; min-height: 0; left: 4%; bottom: 6%; }
	.mh2__badge b { font-size: 4.4cqw; }
	.mh2__badge small { font-size: 1.9cqw; }
	.mh2__cutout { width: 70%; right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
	.mh2__slide, .mh2__dot { transition: none !important; }
}

/* Preview page labels */
.mh2-preview__label { max-width: 1572px; margin: 28px auto 12px; padding: 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b655b; }

/* Warm colour washes instead of plain white: a glow behind the photo, a glow behind the product, a soft base tint */
.mh2__slide {
	--mh2-glow-a: rgba(242, 193, 102, .42);
	--mh2-glow-b: rgba(242, 218, 94, .34);
	--mh2-base-1: #fff6e6;
	--mh2-base-2: #fffdf8;
	--mh2-base-3: #fdecc4;
	background:
		radial-gradient(46% 95% at 15% 100%, var(--mh2-glow-a), transparent 72%),
		radial-gradient(40% 85% at 86% 28%, var(--mh2-glow-b), transparent 70%),
		linear-gradient(100deg, var(--mh2-base-1) 0%, var(--mh2-base-2) 46%, var(--mh2-base-3) 100%);
	border-color: #f3e3bf;
}
/* Slide 2: soft peach */
.mh2__slide:nth-child(2) {
	--mh2-glow-a: rgba(246, 178, 138, .40);
	--mh2-glow-b: rgba(250, 205, 160, .36);
	--mh2-base-1: #fff1ea;
	--mh2-base-2: #fffaf6;
	--mh2-base-3: #fde2cf;
	border-color: #f6dccb;
}
/* Slide 3: golden butter */
.mh2__slide:nth-child(3) {
	--mh2-glow-a: rgba(233, 185, 73, .40);
	--mh2-glow-b: rgba(242, 218, 94, .42);
	--mh2-base-1: #fdf0cf;
	--mh2-base-2: #fffaee;
	--mh2-base-3: #fae3a3;
	border-color: #f1dca6;
}
/* Keep the arch photo crisp against the tint */
.mh2__photo { box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .9), 0 1.4cqw 3cqw rgba(138, 101, 0, .18); }
@media (max-width: 767px) {
	.mh2__slide { background:
		radial-gradient(70% 55% at 25% 30%, var(--mh2-glow-a), transparent 72%),
		radial-gradient(60% 50% at 80% 28%, var(--mh2-glow-b), transparent 70%),
		linear-gradient(180deg, var(--mh2-base-1) 0%, var(--mh2-base-2) 55%, var(--mh2-base-3) 100%); }
}

/* Taller slider */
.mh2__slide { aspect-ratio: 1600 / 470; min-height: 340px; }
.mh2 h2.mh2__title { font-size: 4.1cqw !important; }
.mh2__btn { margin-top: 2.4cqw; }
@media (max-width: 767px) {
	.mh2__slide { aspect-ratio: auto; min-height: 0; grid-template-rows: 70cqw auto; }
}

/* ===== Responsive fixes (17 Oct 2026): true height on phones, never wider than the page on tablets ===== */
@media (max-width: 767px) {
	/* Size the top half from the photo/product boxes instead of container units on the slide itself,
	   so Elementor reserves the slider's real height and the next section no longer slides up over it. */
	.mh2__slide { container-type: normal; grid-template-rows: auto auto; }
	.mh2__person, .mh2__product { aspect-ratio: 1 / 1.05; align-self: stretch; }
	.mh2__copy { padding: 18px 18px 22px; }
	.mh2 h2.mh2__title { font-size: 26px !important; line-height: 1.12 !important; }
	.mh2__btn { margin-top: 14px; padding: 12px 30px; font-size: 14px; min-width: 0; }
	.mh2__note { margin-top: 10px; font-size: 12.5px; max-width: none; }
	.mh2__brand { left: 14px; padding: 6px 10px 8px; border-radius: 0 0 14px 14px; }
	.mh2__brand img { height: 24px; min-height: 0; }
	.mh2__tab { right: 10px; padding: 6px 11px 8px; font-size: 11px; border-radius: 0 0 12px 12px; }
	.mh2__badge { width: 56px; height: 56px; min-width: 0; min-height: 0; left: 6px; bottom: 8px; }
	.mh2__badge b { font-size: 16px; }
	.mh2__badge small { font-size: 7.5px; }
	.mh2__dots { margin-top: 10px; }
	.mh2__slide { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Never let the slider grow wider than the page (min-height + aspect-ratio was forcing 1199px on tablets) */
.mh2__track { grid-template-columns: minmax(0, 1fr); }
.mh2__slide { width: 100%; min-width: 0; }
@media (min-width: 768px) and (max-width: 1199px) {
	.mh2__slide { aspect-ratio: auto; height: clamp(330px, 40vw, 440px); min-height: 0; }
}
/* Keep the highlighted phrase on one line */
.mh2__title .is-bold { white-space: nowrap; }