/* ==========================================================================
   HOME
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (Figma: Frame 7, 1920 x 1080)
   -------------------------------------------------------------------------- */
.ms-hero {
	position: relative;
	height: calc(1080 * var(--px));
	background: var(--ms-black);
	overflow: hidden;
	isolation: isolate;
}

.ms-hero__media { position: absolute; inset: 0; z-index: 0; }

.ms-hero__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* CAS 4: versão quente, aparece à esquerda com fade (máscara Rectangle 1386). */
.ms-hero__warm {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(111.76 * var(--px)), transparent calc(962.127 * var(--px)));
	mask-image: linear-gradient(90deg, #000 calc(111.76 * var(--px)), transparent calc(962.127 * var(--px)));
}

/* Elipse escura desfocada atrás do texto. */
.ms-hero__shade {
	position: absolute;
	left: calc((-731.3 + 1424.837 / 2) * var(--px));
	top: calc((184.13 + 895.697 / 2) * var(--px));
	width: calc(1321.143 * var(--px));
	height: calc(627.315 * var(--px));
	border-radius: calc(313.658 * var(--px));
	background: rgba(17, 20, 19, 0.5);
	filter: blur(calc(100 * var(--px)));
	transform: translate(-50%, -50%) rotate(-12.37deg);
}

/* Anel turquesa (Mask group 1:9): borda nítida por fora, esmaecendo para dentro. */
.ms-hero__ring {
	position: absolute;
	left: calc(369.693 * var(--px));
	top: calc(-100.457 * var(--px));
	width: calc(1314.314 * var(--px));
	height: calc(1314.314 * var(--px));
	border-radius: 50%;
	background: radial-gradient(closest-side,
		rgba(53, 198, 202, 0) 81%,
		rgba(53, 198, 202, 0.26) 88%,
		rgba(53, 198, 202, 0.55) 94%,
		rgba(53, 198, 202, 0.72) 99.5%,
		rgba(53, 198, 202, 0) 100%);
}

/* Painel de vidro à esquerda. */
.ms-hero__glass {
	position: absolute;
	left: calc(0.09 * var(--px));
	top: 0;
	width: calc(692.368 * var(--px));
	height: 100%;
	background: rgba(30, 30, 30, 0.18);
	-webkit-backdrop-filter: blur(calc(40 * var(--px)));
	backdrop-filter: blur(calc(40 * var(--px)));
}

.ms-hero__title {
	position: absolute;
	z-index: 1;
	left: calc(93.45 * var(--px));
	top: calc(370.7 * var(--px));
	margin: 0;
	font-size: calc(80 * var(--px));
	line-height: 0.91;
	font-weight: 400;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--ms-white);
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-hero__title span { display: block; }
.ms-hero__title-light { font-weight: 200; }
.ms-hero__title-regular { font-weight: 400; }

.ms-hero__text {
	position: absolute;
	z-index: 1;
	left: calc(98.16 * var(--px));
	top: calc(544.38 * var(--px));
	width: calc(516.846 * var(--px));
	font-size: calc(36 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	color: var(--ms-snow);
	text-box: trim-both cap alphabetic;
}

.ms-hero__actions {
	position: absolute;
	z-index: 1;
	left: calc(97.16 * var(--px));
	top: calc(931.85 * var(--px));
	display: flex;
	gap: calc((327.36 - 97.16 - 204.95) * var(--px));
}

/* --------------------------------------------------------------------------
   Faixa de marcas (Figma: Frame 12, 1920 x 146.186)
   -------------------------------------------------------------------------- */
.ms-marcas {
	position: relative;
	height: calc(146.186 * var(--px));
	background: var(--ms-black);
}
.ms-marcas__list { position: absolute; inset: 0; }
.ms-marcas__item { position: absolute; }
.ms-marcas__item img { width: 100%; height: 100%; object-fit: cover; }

.ms-marcas__item--logitech,
.ms-marcas__item--samsung,
.ms-marcas__item--sonance,
.ms-marcas__item--yamaha {
	top: calc(46.97 * var(--px));
	width: calc(156.316 * var(--px));
	height: calc(56.057 * var(--px));
}
.ms-marcas__item--logitech { left: calc(98.22 * var(--px)); }
.ms-marcas__item--samsung  { left: calc(324.91 * var(--px)); }
.ms-marcas__item--sonance  { left: calc(551.61 * var(--px)); }
.ms-marcas__item--yamaha   { left: calc(778.3 * var(--px)); }

.ms-marcas__item--epson {
	left: calc(1005 * var(--px));
	top: calc(50.65 * var(--px));
	width: calc(120.122 * var(--px));
	height: calc(48.705 * var(--px));
}
.ms-marcas__item--epson img { object-fit: fill; object-position: bottom; }

.ms-marcas__item--scenario,
.ms-marcas__item--upsai,
.ms-marcas__item--homemanager {
	top: calc(45.47 * var(--px));
	width: calc(164.677 * var(--px));
	height: calc(59.055 * var(--px));
}
.ms-marcas__item--scenario    { left: calc(1195.5 * var(--px)); }
.ms-marcas__item--upsai       { left: calc(1430.55 * var(--px)); }
.ms-marcas__item--homemanager { left: calc(1665.61 * var(--px)); }

/* --------------------------------------------------------------------------
   Títulos de seção (cinza, 80px caixa-alta + complemento 36px)
   -------------------------------------------------------------------------- */
/* Título + complemento lado a lado: o complemento começa sempre após o
   título (distância do Figma), independente da largura da fonte. */
.ms-solucoes__head,
.ms-historia__head {
	position: absolute;
	left: calc(90.3 * var(--px));
	display: flex;
	align-items: flex-start;
}
.ms-solucoes__head { top: calc(105.01 * var(--px)); gap: calc(11.39 * var(--px)); }
.ms-historia__head { top: calc(99.48 * var(--px)); gap: calc(15.68 * var(--px)); }

.ms-solucoes__title,
.ms-historia__title {
	flex: none;
	font-size: calc(80 * var(--px));
	line-height: 0.975;
	font-weight: 400;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: #5e5e5e;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-solucoes__sub,
.ms-historia__sub {
	flex: none;
	font-size: calc(36 * var(--px));
	line-height: 1;
	letter-spacing: -0.05em;
	color: #5e5e5e;
	text-box: trim-both cap alphabetic;
}

/* Setas (Group 2185 ativo / Group 2186 inativo) */
.ms-arrows { position: absolute; display: flex; gap: calc((1777.46 - 1727.03 - 45) * var(--px)); }
.ms-arrow {
	position: relative;
	width: calc(45 * var(--px));
	height: calc(45 * var(--px));
	border-radius: 50%;
	transition: transform .2s ease;
}
.ms-arrow img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease; }
.ms-arrow--prev img { transform: rotate(180deg); }
.ms-arrow .ms-arrow__off { opacity: 0; }
.ms-arrow:disabled { cursor: default; }
.ms-arrow:disabled .ms-arrow__on { opacity: 0; }
.ms-arrow:disabled .ms-arrow__off { opacity: 1; }
.ms-arrow:not(:disabled):hover { transform: scale(1.05); }
.ms-arrow:focus-visible { outline: 2px solid var(--ms-teal); outline-offset: 3px; }

.ms-pill--teal { background: var(--ms-teal); color: var(--ms-snow); font-weight: 500; }
.ms-pill--teal:hover { background: #14a59a; }

/* --------------------------------------------------------------------------
   Soluções (Figma: Frame 13, 1920 x 800)
   -------------------------------------------------------------------------- */
.ms-solucoes {
	position: relative;
	height: calc(800 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
}
.ms-solucoes__title { margin-top: calc((110.48 - 105.01) * var(--px)); }
.ms-solucoes__sub { width: calc(477.287 * var(--px)); }
.ms-solucoes .ms-arrows { left: calc(1727.03 * var(--px)); top: calc(124.98 * var(--px)); }

.ms-solucoes__track {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(269.98 * var(--px));
	display: flex;
	gap: calc(17.51 * var(--px));
	padding: 0 calc(100 * var(--px)) 0 calc(99.96 * var(--px));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: calc(99.96 * var(--px));
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.ms-solucoes__track::-webkit-scrollbar { display: none; }

.ms-sol-card {
	position: relative;
	flex: none;
	width: calc(330 * var(--px));
	height: calc(430 * var(--px));
	border-radius: calc(30 * var(--px));
	overflow: hidden;
	scroll-snap-align: start;
	isolation: isolate;
}
.ms-sol-card__link { position: absolute; inset: 0; display: block; }
.ms-sol-card__img {
	position: absolute;
	left: calc(var(--l) * var(--px));
	top: calc(var(--t) * var(--px));
	width: calc(var(--w) * var(--px));
	height: calc(var(--h) * var(--px));
	max-width: none;
	object-fit: cover;
	transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}
.ms-sol-card__img.is-flipped { transform: rotate(179.02deg) scaleY(-1); }
.ms-sol-card__shade {
	position: absolute;
	left: calc(0.04 * var(--px));
	top: calc(0.58 * var(--px));
	width: calc(329.959 * var(--px));
	height: calc(429.421 * var(--px));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46.397%, #000 90.857%);
}
.ms-sol-card__title {
	position: absolute;
	left: calc(36.33 * var(--px));
	top: calc(358 * var(--px));
	font-size: calc(48 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.06em;
	color: var(--ms-snow);
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-sol-card__link:hover .ms-sol-card__img { scale: 1.04; }
.ms-sol-card__link:focus-visible { outline: 3px solid var(--ms-teal); outline-offset: -3px; border-radius: inherit; }

/* --------------------------------------------------------------------------
   Nossa história (Figma: Frame 14, 1920 x 796)
   -------------------------------------------------------------------------- */
.ms-historia {
	position: relative;
	z-index: 2; /* no Figma este frame fica sobre o topo do Frame 15 */
	height: calc(796 * var(--px));
	background: #eaeaeb;
	color: #5e5e5e;
}
.ms-historia__title { margin-top: calc((101.48 - 99.48) * var(--px)); }
.ms-historia__sub { width: calc(254.823 * var(--px)); }
.ms-historia__cta { position: absolute; left: calc(1616.6 * var(--px)); top: calc(99.48 * var(--px)); }

.ms-historia__video {
	position: absolute;
	left: calc(100 * var(--px));
	top: calc(266 * var(--px));
	width: calc(740 * var(--px));
	height: calc(430 * var(--px));
	border-radius: calc(30 * var(--px));
	overflow: hidden;
	isolation: isolate;
	background: #111413;
}
.ms-historia__poster {
	position: absolute;
	left: calc(-101.72 * var(--px));
	top: calc(-67.44 * var(--px));
	width: calc(891.224 * var(--px));
	height: calc(497.427 * var(--px));
	max-width: none;
	object-fit: cover;
}
.ms-historia__shade {
	position: absolute;
	left: 0;
	top: calc(0.56 * var(--px));
	width: calc(677 * var(--px));
	height: calc(429.421 * var(--px));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 53.49%, #000 99.613%);
}
.ms-historia__play {
	position: absolute;
	left: calc(40 * var(--px));
	top: calc(354.98 * var(--px));
	display: flex;
	align-items: center;
	gap: calc((199.02 - 40 - 148.596) * var(--px));
}
.ms-historia__play-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(148.596 * var(--px));
	height: calc(35 * var(--px));
	border-radius: calc(46.895 * var(--px));
	background-image: linear-gradient(49.95deg, #d9d9d9 20.443%, #fbfbfb 35.738%);
	font-size: calc(18 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	color: var(--ms-black);
	white-space: nowrap;
}
.ms-historia__play-label > span { display: block; text-box: trim-both cap alphabetic; }
.ms-historia__play-icon { width: calc(35 * var(--px)); height: calc(35 * var(--px)); transition: transform .2s ease; }
.ms-historia__play:hover .ms-historia__play-icon { transform: scale(1.08); }
.ms-historia__play:focus-visible { outline: 2px solid var(--ms-teal); outline-offset: 4px; border-radius: calc(46.895 * var(--px)); }

.ms-historia__stats { position: absolute; left: calc(863 * var(--px)); top: calc(267 * var(--px)); }
.ms-stat {
	position: absolute;
	left: 0;
	width: calc(394 * var(--px));
	height: calc(127 * var(--px));
	border-radius: calc(30 * var(--px));
	background: var(--ms-teal);
	color: var(--ms-snow);
	overflow: hidden;
}
.ms-stat--anos { top: 0; }
.ms-stat--res  { top: calc(151 * var(--px)); }
.ms-stat--corp { top: calc(302 * var(--px)); }
/* Número + bloco lateral em linha: o texto começa sempre depois do número
   (distâncias do Figma), sem sobrepor com qualquer fonte. */
.ms-stat {
	display: flex;
	align-items: flex-start;
	padding-left: calc(var(--num-x) * var(--px));
}
.ms-stat__num {
	flex: none;
	margin-top: calc(var(--num-y) * var(--px));
	font-size: calc(92 * var(--px));
	line-height: 0.975;
	letter-spacing: var(--num-track);
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-stat__side {
	position: relative;
	flex: none;
	margin-left: calc(var(--side-gap) * var(--px));
	margin-top: calc(var(--label-y) * var(--px));
}
.ms-stat__label {
	display: block;
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-stat__plus {
	position: absolute;
	left: calc(-7.5 * var(--px));
	top: calc(-40.5 * var(--px));
	font-size: calc(38 * var(--px));
	line-height: 0.82;
	letter-spacing: -0.07em;
	text-box: trim-both cap alphabetic;
}

/* 44: número em 41.25, texto em 158.26 (largura do número no Figma: 102) */
.ms-stat--anos { --num-x: 41.25; --num-y: 31.33; --num-track: 0.01em; --side-gap: 15.01; --label-y: 55.33; }
.ms-stat--anos .ms-stat__label { width: calc(127.866 * var(--px)); white-space: normal; }
/* 2500: número 185 de largura, texto em 224.75 */
.ms-stat--res  { --num-x: 38.25; --num-y: 31.32; --num-track: -0.11em; --side-gap: 8; --label-y: 55.32; }
/* 1000: número 179 de largura, texto em 224.75 */
.ms-stat--corp { --num-x: 41.25; --num-y: 32.7; --num-track: -0.05em; --side-gap: 8; --label-y: 56.7; }

.ms-historia__text {
	position: absolute;
	left: calc(1280 * var(--px));
	top: calc(267 * var(--px));
	width: calc(540 * var(--px));
	height: calc(430 * var(--px));
	padding: calc(34 * var(--px)) 0 0 calc(47.25 * var(--px));
	border-radius: calc(30 * var(--px));
	background: var(--ms-snow);
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.03em;
	color: #5e5e5e;
	overflow: hidden;
	text-box: trim-both cap alphabetic;
}
.ms-historia__text p { width: calc(445.49 * var(--px)); }
.ms-historia__text p + p { margin-top: 0.975em; }
.ms-historia__text strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Mastersound Residencial (Figma: Frame 15; área visível 1920 x 791)
   -------------------------------------------------------------------------- */
.ms-resid {
	position: relative;
	height: calc(791 * var(--px));
	background: var(--ms-slate);
	overflow: hidden;
	isolation: isolate;
	color: var(--ms-snow);
}
.ms-resid__media { position: absolute; inset: 0; z-index: -1; }
.ms-resid__img {
	position: absolute;
	left: 0;
	top: calc(-121.28 * var(--px));
	width: 100%;
	height: calc(1080.56 * var(--px));
	max-width: none;
	object-fit: cover;
}
.ms-resid__shade {
	position: absolute;
	left: 0;
	top: calc(0.24 * var(--px));
	width: 100%;
	height: calc(799.523 * var(--px));
	background: linear-gradient(235.65deg, rgba(0, 0, 0, 0) 68.295%, #000 94.673%);
}
.ms-resid__ring {
	position: absolute;
	max-width: none;
	transform: translate(-50%, -50%) rotate(150deg);
	left: calc(1473.85 * var(--px));
	top: calc(400.16 * var(--px));
}
.ms-resid__ring--lg { width: calc(1593.727 * var(--px)); height: calc(1593.727 * var(--px)); }
.ms-resid__ring--sm { width: calc(644.056 * var(--px)); height: calc(644.056 * var(--px)); }

.ms-resid__text {
	position: absolute;
	left: calc(98.08 * var(--px));
	top: calc(100 * var(--px));
	width: calc(493.429 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.04em;
	text-box: trim-both cap alphabetic;
}
.ms-resid__title { position: absolute; inset: 0; pointer-events: none; font-weight: 400; }
.ms-resid__kicker,
.ms-resid__word {
	position: absolute;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-resid__kicker {
	left: calc(95.64 * var(--px));
	top: calc(589.68 * var(--px));
	font-size: calc(36 * var(--px));
	line-height: 1;
	letter-spacing: -0.05em;
}
.ms-resid__word {
	left: calc(91.59 * var(--px));
	top: calc(635 * var(--px));
	font-size: calc(80 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--ms-teal);
}

/* --------------------------------------------------------------------------
   Cases (Figma: Frame 16, 1920 x 876)
   -------------------------------------------------------------------------- */
.ms-cases {
	position: relative;
	height: calc(876 * var(--px));
	background: #f6f7fa;
	color: #5e5e5e;
}
.ms-cases__track {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(107 * var(--px));
	display: flex;
	gap: calc(17.51 * var(--px));
	padding: 0 calc(100 * var(--px)) 0 calc(99.96 * var(--px));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: calc(99.96 * var(--px));
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.ms-cases__track::-webkit-scrollbar { display: none; }

.ms-case-card {
	position: relative;
	flex: none;
	width: calc(330 * var(--px));
	height: calc(430 * var(--px));
	border-radius: calc(30 * var(--px));
	overflow: hidden;
	scroll-snap-align: start;
	isolation: isolate;
}
.ms-case-card__link { position: absolute; inset: 0; display: block; color: var(--ms-snow); }
.ms-case-card__img {
	position: absolute;
	left: calc(var(--l) * var(--px));
	top: calc(var(--t) * var(--px));
	width: calc(var(--w) * var(--px));
	height: calc(var(--h) * var(--px));
	max-width: none;
	object-fit: cover;
	transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}
.ms-case-card__shade {
	position: absolute;
	left: calc(0.04 * var(--px));
	top: calc(0.58 * var(--px));
	width: calc(329.959 * var(--px));
	height: calc(429.421 * var(--px));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46.397%, #000 90.857%);
}
.ms-case-card__tags {
	position: absolute;
	left: calc(40.04 * var(--px));
	top: calc(40.58 * var(--px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(10.91 * var(--px));
}
.ms-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(116.653 * var(--px));
	height: calc(35 * var(--px));
	border-radius: calc(46.895 * var(--px));
	background-image: linear-gradient(56.58deg, #d9d9d9 20.443%, #fbfbfb 35.738%);
	font-size: calc(18 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	color: var(--ms-black);
	white-space: nowrap;
}
.ms-tag > span { display: block; text-box: trim-both cap alphabetic; }
.ms-case-card__title {
	position: absolute;
	left: calc(36.33 * var(--px));
	top: calc(311.16 * var(--px));
	width: calc(232.368 * var(--px));
	font-size: calc(48 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.06em;
	text-box: trim-both cap alphabetic;
}

/* Estado hover (card "Torre Prime" no Figma) */
.ms-case-card__hover {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.32);
	-webkit-backdrop-filter: blur(calc(15.7 * var(--px)));
	backdrop-filter: blur(calc(15.7 * var(--px)));
	opacity: 0;
	transition: opacity .35s ease;
}
.ms-case-card__desc {
	position: absolute;
	left: calc(34.33 * var(--px));
	top: calc(40.58 * var(--px));
	width: calc(262.027 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 1;
	letter-spacing: -0.05em;
	text-box: trim-both cap alphabetic;
}
.ms-case-card__more { position: absolute; left: calc(40.53 * var(--px)); top: calc(357.16 * var(--px)); }
.ms-case-card__link:hover .ms-case-card__img,
.ms-case-card__link:focus-visible .ms-case-card__img { scale: 1.04; }
.ms-case-card__link:hover .ms-case-card__hover,
.ms-case-card__link:focus-visible .ms-case-card__hover { opacity: 1; }
.ms-case-card__link:focus-visible { outline: 3px solid var(--ms-teal); outline-offset: -3px; border-radius: inherit; }

/* Rodapé da seção: título à esquerda, texto + botão à direita.
   A coluna do título tem no mínimo a largura do Figma (texto em x exato);
   se a fonte for mais larga, o texto é empurrado em vez de ser sobreposto. */
.ms-cases__foot {
	position: absolute;
	left: calc(93.52 * var(--px));
	top: calc(var(--foot-top) * var(--px));
	display: grid;
	grid-template-columns: minmax(calc(var(--col1) * var(--px)), max-content) auto;
	align-items: start;
	--foot-top: 642;
	--col1: 1053.06;
}
.ms-cases__title {
	padding-right: calc(40 * var(--px));
	font-size: calc(80 * var(--px));
	line-height: 0.975;
	font-weight: 500;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-cases__line { display: block; }
.ms-cases__title b { font-weight: 500; }
.ms-w-light { font-weight: 300; }
.ms-cases .ms-arrows { left: calc(1727.03 * var(--px)); top: calc(634 * var(--px)); }
.ms-cases__aside { position: relative; }
.ms-cases__text {
	width: calc(380.935 * var(--px));
	font-size: calc(24 * var(--px));
	line-height: 1;
	letter-spacing: -0.05em;
	text-box: trim-both cap alphabetic;
}
.ms-cases__cta {
	position: absolute;
	left: calc((1142.53 - 1146.58) * var(--px));
	top: calc((725.97 - 642) * var(--px));
}

/* --------------------------------------------------------------------------
   Variante corporativa: Frame 17 (destaque) e Frame 18 (cases)
   -------------------------------------------------------------------------- */
/* No Figma a imagem (1024x577) preenche 1920x800 sem manter proporção. */
.ms-resid--corp .ms-resid__img {
	top: 0;
	height: calc(800 * var(--px));
	object-fit: fill;
}
.ms-resid--corp .ms-resid__shade { background: linear-gradient(221.94deg, rgba(0, 0, 0, 0) 53.534%, #000 88.147%); }
.ms-resid--corp .ms-resid__text { width: calc(428.398 * var(--px)); }
.ms-resid--corp .ms-resid__kicker { top: calc(581.68 * var(--px)); }
.ms-resid--corp .ms-resid__word { letter-spacing: -0.06em; }

.ms-cases--corp { height: calc(864 * var(--px)); }
.ms-cases--corp .ms-cases__track { top: calc(100 * var(--px)); }
.ms-cases--corp .ms-cases__foot { --foot-top: 630; --col1: 1151.86; }
.ms-cases--corp .ms-cases__title { font-weight: 300; }
.ms-cases--corp .ms-arrows { top: calc(630 * var(--px)); }
.ms-cases--corp .ms-cases__text { width: calc(411.121 * var(--px)); }
.ms-cases--corp .ms-cases__cta { left: calc((1241.33 - 1245.38) * var(--px)); top: calc((713.97 - 630) * var(--px)); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	/* Residencial */
	.ms-resid { height: auto; min-height: 560px; padding: 56px 20px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 220px; }
	.ms-resid__img { top: 0; height: 100%; object-position: 70% center; }
	.ms-resid__shade { top: 0; height: 100%; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 40%, #000 92%); }
	.ms-resid__ring { left: 72%; top: 46%; }
	.ms-resid__ring--lg { width: 900px; height: 900px; }
	.ms-resid__ring--sm { width: 360px; height: 360px; }
	.ms-resid__text { position: relative; left: auto; top: auto; width: auto; max-width: 30ch; font-size: 18px; line-height: 1.1; }
	.ms-resid__title { position: relative; inset: auto; }
	.ms-resid__kicker, .ms-resid__word { position: relative; left: auto; top: auto; display: block; }
	.ms-resid__kicker { font-size: 24px; }
	.ms-resid__word { margin-top: 12px; font-size: clamp(40px, 12vw, 56px); }

	/* Cases */
	.ms-cases { height: auto; padding: 56px 0; display: flex; flex-direction: column; }
	.ms-cases__track { position: static; order: 1; gap: 12px; padding: 0 20px; scroll-padding-left: 20px; }
	.ms-case-card { width: 72vw; max-width: 300px; height: auto; aspect-ratio: 330 / 430; border-radius: 22px; }
	.ms-case-card__img { left: 0; top: 0; width: 100%; height: 100%; }
	.ms-case-card__shade { inset: 0; width: auto; height: auto; }
	.ms-case-card__tags { left: 20px; top: 20px; gap: 8px; }
	.ms-tag { width: auto; min-width: 96px; height: 32px; padding: 0 14px; font-size: 14px; border-radius: 40px; }
	.ms-case-card__title { left: 20px; top: auto; bottom: 24px; width: 80%; font-size: 30px; }
	.ms-case-card__desc { left: 20px; top: 20px; width: auto; right: 20px; font-size: 18px; line-height: 1.1; }
	.ms-case-card__more { left: 20px; top: auto; bottom: 24px; }
	.ms-cases .ms-arrows { position: static; order: 2; margin: 20px 20px 0; gap: 8px; }
	.ms-cases__foot { position: static; order: 3; display: block; margin: 40px 20px 0; }
	.ms-cases__title { padding-right: 0; font-size: clamp(34px, 10vw, 48px); white-space: normal; }
	.ms-cases__text { margin-top: 20px; width: auto; font-size: 18px; line-height: 1.15; }
	.ms-cases__cta { position: static; display: inline-flex; margin-top: 24px; }
	.ms-resid--corp .ms-resid__img { height: 100%; object-fit: cover; object-position: 55% bottom; }
	.ms-resid--corp .ms-resid__kicker { top: auto; }
	.ms-cases--corp .ms-cases__title br { display: none; }
	.ms-cases--corp { height: auto; }
	.ms-cases--corp .ms-cases__text { width: auto; }

	/* Títulos de seção */
	.ms-solucoes__head, .ms-historia__head { position: static; display: block; }
	.ms-solucoes__title, .ms-historia__title { margin-top: 0; }
	.ms-solucoes__sub, .ms-historia__sub { width: auto !important; }
	.ms-solucoes__title, .ms-historia__title { font-size: clamp(38px, 11vw, 52px); white-space: normal; }
	.ms-solucoes__sub, .ms-historia__sub { margin-top: 12px; font-size: 20px; max-width: 24ch; }

	.ms-solucoes { height: auto; padding: 64px 0 56px; }
	.ms-solucoes__head { padding: 0 20px; }
	.ms-solucoes .ms-arrows { position: static; margin: 24px 20px 0; gap: 8px; }
	.ms-arrow { width: 40px; height: 40px; }
	.ms-solucoes__track { position: static; margin-top: 24px; gap: 12px; padding: 0 20px; scroll-padding-left: 20px; }
	.ms-sol-card { width: 72vw; max-width: 300px; height: auto; aspect-ratio: 330 / 430; border-radius: 22px; }
	.ms-sol-card__img { left: 0; top: 0; width: 100%; height: 100%; }
	.ms-sol-card__img.is-flipped { transform: scaleX(-1); }
	.ms-sol-card__shade { inset: 0; width: auto; height: auto; }
	.ms-sol-card__title { left: 22px; top: auto; bottom: 26px; font-size: 32px; }

	.ms-historia { height: auto; padding: 64px 20px; display: flex; flex-direction: column; gap: 16px; }
	.ms-historia__head { margin-bottom: 8px; }
	.ms-historia__cta { position: static; order: 10; align-self: flex-start; margin-top: 8px; }
	.ms-historia__video { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 740 / 430; border-radius: 22px; }
	.ms-historia__poster { left: 0; top: 0; width: 100%; height: 100%; object-position: 40% 30%; }
	.ms-historia__shade { inset: 0; width: auto; height: auto; }
	.ms-historia__play { left: 16px; top: auto; bottom: 16px; gap: 8px; }
	.ms-historia__play-label { width: auto; height: 35px; padding: 0 16px; font-size: 15px; border-radius: 40px; }
	.ms-historia__play-icon { width: 35px; height: 35px; }
	.ms-historia__stats { position: static; display: grid; gap: 12px; }
	.ms-stat { position: relative; top: auto !important; width: 100%; height: 108px; border-radius: 22px; }
	.ms-stat { align-items: center; padding-left: 24px; }
	.ms-stat__num { margin-top: 0; font-size: 72px; }
	.ms-stat__side { margin: 0 0 0 14px; }
	.ms-stat__label { font-size: 20px; }
	.ms-stat__plus { left: -8px; top: -30px; font-size: 30px; }
	.ms-stat--res .ms-stat__side,
	.ms-stat--corp .ms-stat__side { margin-left: 16px; }
	.ms-stat--anos .ms-stat__label { width: auto; }
	.ms-historia__text { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 28px 24px; border-radius: 22px; font-size: 18px; line-height: 1.15; }
	.ms-historia__text p { width: auto; }
	.ms-historia__text br { display: none; }

	.ms-hero {
		height: auto;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 120px 20px 40px;
	}
	.ms-hero__layer { object-position: 72% center; }
	.ms-hero__warm { display: none; }
	.ms-hero__ring {
		left: 18%;
		top: -6%;
		width: 150vw;
		height: 150vw;
	}
	.ms-hero__shade { display: none; }
	.ms-hero__glass {
		left: 0; right: 0; top: auto; bottom: 0;
		width: 100%;
		height: 62%;
		background: linear-gradient(180deg, rgba(17, 20, 19, 0) 0%, rgba(17, 20, 19, 0.72) 40%, rgba(17, 20, 19, 0.9) 100%);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.ms-hero__title,
	.ms-hero__text,
	.ms-hero__actions { position: relative; left: auto; top: auto; }
	.ms-hero__title { font-size: clamp(40px, 11.5vw, 56px); }
	.ms-hero__text { width: auto; max-width: 32ch; margin-top: 22px; font-size: 20px; line-height: 1.1; }
	.ms-hero__actions { margin-top: 32px; flex-wrap: wrap; gap: 10px; }

	.ms-marcas { height: auto; padding: 28px 0; }
	.ms-marcas__list {
		position: static;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 18px 12px;
		padding: 0 20px;
	}
	.ms-marcas__item { position: static; width: auto !important; height: auto !important; }
	.ms-marcas__item img { width: 100%; height: auto; aspect-ratio: 280 / 100; object-fit: cover; }
}