/* ==========================================================================
   Mastersound / base
   Design de referência: Figma, frames de 1920px.
   No desktop (>= 900px) todas as medidas são escaladas a partir do frame de
   1920px com a unidade --px (1px do Figma), garantindo fidelidade em qualquer
   largura. Abaixo disso, cada seção declara seu layout mobile.
   ========================================================================== */

/* Brutal Type: usa a fonte instalada localmente ou os arquivos em
   assets/fonts/ assim que forem adicionados (ver fonts.css). */
@font-face { font-family: "Brutal Type"; font-weight: 200; font-style: normal; font-display: swap; src: local("Brutal Type Extra Light"), local("BrutalType-ExtraLight"); }
@font-face { font-family: "Brutal Type"; font-weight: 300; font-style: normal; font-display: swap; src: local("Brutal Type Light"), local("BrutalType-Light"); }
@font-face { font-family: "Brutal Type"; font-weight: 700; font-style: normal; font-display: swap; src: local("Brutal Type Bold"), local("BrutalType-Bold"); }
@font-face { font-family: "Brutal Type"; font-weight: 400; font-style: normal; font-display: swap; src: local("Brutal Type Regular"), local("Brutal Type"), local("BrutalType-Regular"); }
@font-face { font-family: "Brutal Type"; font-weight: 500; font-style: normal; font-display: swap; src: local("Brutal Type Medium"), local("BrutalType-Medium"); }

:root {
	--ms-black: #000000;
	--ms-ink: #111413;
	--ms-white: #ffffff;
	--ms-snow: #fbfbfb;
	--ms-snow-2: #fafafa;
	--ms-grey: #d9d9d9;
	--ms-teal: #17b7ab;
	--ms-teal-ring: #35c6ca;
	--ms-slate: #5c6e6f;

	--ms-font: "Brutal Type", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* 1px do Figma (frame de 1920px). */
	--px: calc(100cqw / 1920);
}

*, *::before, *::after { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:where(body) {
	margin: 0;
	background: var(--ms-black);
	color: var(--ms-snow);
	font-family: var(--ms-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(img, svg, video) { display: block; max-width: 100%; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.ms-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* Contêiner de referência para --px (100cqw = largura útil da página). */
.ms-page {
	container-type: inline-size;
	position: relative;
	overflow-x: clip;
}

/* Corta o texto na altura da versal e da linha de base, como no Figma. */
.ms-trim { text-box: trim-both cap alphabetic; }

/* --------------------------------------------------------------------------
   Header (Figma: logo + Group 1719)
   -------------------------------------------------------------------------- */
.ms-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	height: 0;
}

.ms-brand {
	position: absolute;
	left: calc(100.33 * var(--px));
	top: calc(96.83 * var(--px));
	width: calc(311 * var(--px));
	height: calc(59 * var(--px));
	display: block;
}
.ms-brand__symbol {
	position: absolute; left: 0; top: 0;
	width: calc(44.687 * var(--px));
	height: calc(58.791 * var(--px));
}
.ms-brand__wordmark {
	position: absolute;
	left: calc((163.58 - 100.33) * var(--px));
	top: calc((97.85 - 96.83) * var(--px));
	width: calc(247.163 * var(--px));
	height: calc(30.489 * var(--px));
}
.ms-brand__tagline {
	position: absolute;
	left: calc((162.26 - 100.33) * var(--px));
	top: calc((139.62 - 96.83) * var(--px));
	width: calc(204.274 * var(--px));
	font-size: calc(20.861 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	color: var(--ms-snow);
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.ms-nav {
	position: absolute;
	left: calc(1182.89 * var(--px));
	top: calc(98.89 * var(--px));
	width: calc(639.711 * var(--px));
	height: calc(54.857 * var(--px));
	border-radius: calc(60.343 * var(--px));
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(calc(75 * var(--px)));
	backdrop-filter: blur(calc(75 * var(--px)));
}
/* Itens em linha com o espaçamento do Figma (31px entre itens). */
.ms-nav__list {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	gap: calc(31 * var(--px));
	padding: calc((117.61 - 98.89) * var(--px)) 0 0 calc((1218.24 - 1182.89) * var(--px));
}
.ms-nav__item {
	flex: none;
	font-size: calc(21.073 * var(--px));
	line-height: calc(26.341 * var(--px));
	color: var(--ms-snow-2);
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-nav__item a { transition: color .2s ease; }
.ms-nav__item a:hover,
.ms-nav__item a:focus-visible { color: var(--ms-teal-ring); }

.ms-menu-toggle { display: none; }

/* Botões em pílula (Figma: 204.95 x 50.03, raio 46.895) */
.ms-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(204.95 * var(--px));
	height: calc(50.03 * var(--px));
	border-radius: calc(46.895 * var(--px));
	font-size: calc(18 * var(--px));
	line-height: 0.975;
	letter-spacing: -0.05em;
	white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ms-pill > span { display: block; text-box: trim-both cap alphabetic; }
.ms-pill--solid {
	background-image: linear-gradient(76.28deg, #d9d9d9 0.618%, #fbfbfb 57.797%);
	color: var(--ms-black);
	font-weight: 500;
}
.ms-pill--ghost {
	border: 1px solid var(--ms-grey);
	color: var(--ms-snow);
}
.ms-pill:hover { transform: translateY(-1px); }
.ms-pill--ghost:hover { background-color: rgba(255, 255, 255, 0.08); }
.ms-pill:focus-visible { outline: 2px solid var(--ms-teal-ring); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Rodapé (Figma: Frame 21, 1920 x 410)
   -------------------------------------------------------------------------- */
.ms-footer {
	position: relative;
	height: calc(410 * var(--px));
	background: #f6f7fa;
	color: var(--ms-black);
	font-size: calc(25 * var(--px));
	line-height: 1.04;
	letter-spacing: -0.04em;
}
.ms-footer > * { position: absolute; }
.ms-footer a { transition: color .2s ease; }
.ms-footer a:hover,
.ms-footer a:focus-visible { color: var(--ms-teal); }
.ms-footer__logo {
	left: calc(100.03 * var(--px));
	top: calc(69.37 * var(--px));
	width: calc(407.458 * var(--px));
	height: calc(76.505 * var(--px));
}
.ms-footer__logo img { width: 100%; height: 100%; }
.ms-footer__contact {
	left: calc(99.99 * var(--px));
	top: calc(184.17 * var(--px));
	color: #a8abb2;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-footer__heading,
.ms-footer__col ul { position: absolute; left: 0; white-space: nowrap; text-box: trim-both cap alphabetic; }
.ms-footer__col { top: 0; }
.ms-footer__col--menu { left: calc(729.74 * var(--px)); }
.ms-footer__col--servicos { left: calc(876.28 * var(--px)); }
.ms-footer__heading { top: calc(69.37 * var(--px)); }
.ms-footer__col ul { top: calc(184.17 * var(--px)); line-height: calc(35 * var(--px)); }
.ms-footer__address {
	left: calc(1194.57 * var(--px));
	top: calc(69.05 * var(--px));
	font-style: normal;
	line-height: calc(31.2 * var(--px));
	color: #a8abb2;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}
.ms-footer__social {
	left: calc(1702.85 * var(--px));
	top: calc(74.58 * var(--px));
	width: calc(116.063 * var(--px));
	height: calc(20.013 * var(--px));
}
.ms-footer__social img { width: 100%; height: 100%; }
.ms-footer__social-link {
	position: absolute;
	top: calc(-6 * var(--px));
	bottom: calc(-6 * var(--px));
	left: calc((var(--i) * 29.016 - 4) * var(--px));
	width: calc(29.016 * var(--px));
	border-radius: 50%;
}
.ms-footer__social-link:focus-visible { outline: 2px solid var(--ms-teal); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	:root { --px: 1px; }

	.ms-header { height: 0; }
	.ms-brand {
		left: 20px; top: 24px;
		width: 190px; height: 40px;
	}
	.ms-brand__symbol { width: 30px; height: 39.5px; }
	.ms-brand__wordmark { left: 42px; top: 1px; width: 148px; height: 18.3px; }
	.ms-brand__tagline { left: 41px; top: 27px; width: auto; font-size: 12.5px; }

	.ms-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		position: absolute;
		right: 20px; top: 24px;
		width: 44px; height: 44px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		padding: 0 13px;
		z-index: 2;
	}
	.ms-menu-toggle__bar { display: block; height: 1.5px; background: var(--ms-snow); transition: transform .25s ease; }
	.ms-nav-open .ms-menu-toggle__bar:first-of-type { transform: translateY(4.25px) rotate(45deg); }
	.ms-nav-open .ms-menu-toggle__bar:last-of-type { transform: translateY(-4.25px) rotate(-45deg); }

	.ms-nav {
		position: fixed;
		inset: 0;
		width: auto; height: auto;
		border-radius: 0;
		background: rgba(17, 20, 19, 0.92);
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
	}
	.ms-nav-open .ms-nav { opacity: 1; visibility: visible; }
	.ms-nav__list {
		position: static;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 28px;
		height: 100%;
		padding: 0 32px;
	}
	.ms-nav__item { position: static; font-size: 32px; line-height: 1; letter-spacing: -0.04em; }

	.ms-pill { width: auto; height: 46px; padding: 0 22px; font-size: 15px; }

	/* Rodapé */
	.ms-footer {
		height: auto;
		padding: 48px 20px 40px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		font-size: 17px;
	}
	.ms-footer > *, .ms-footer__heading, .ms-footer__col ul { position: static; left: auto; top: auto; }
	.ms-footer__logo { grid-column: 1 / -1; width: 220px; height: 41px; }
	.ms-footer__contact, .ms-footer__address { grid-column: 1 / -1; line-height: 1.5; white-space: normal; }
	.ms-footer__col ul { margin-top: 14px; line-height: 1.7; }
	.ms-footer__social { position: relative; width: 116px; height: 20px; grid-column: 1 / -1; }
	.ms-footer__social-link { top: -10px; bottom: -10px; left: calc(var(--i) * 29px - 4px); width: 29px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}