/* base: fontes, escalas de cor, reset e tipografia */
/* bloco do assets.py tal como saiu; só o caminho sobe um nível, porque este ficheiro está em css/ */
@font-face {
	font-family: 'Rajdhani';
	src: url('../fonts/rajdhani-titulo.woff2') format('woff2');
	font-display: swap;
	font-weight: 700;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rajdhani Fallback';
	src: local('Arial');
	size-adjust: 91.1%;
}
@font-face {
	font-family: 'Noto Sans';
	src: url('../fonts/notosans-texto.woff2') format('woff2');
	font-display: swap;
	font-weight: 400 700;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Noto Sans Fallback';
	src: local('Arial');
	size-adjust: 104.3%;
}

:root {
	--gray-950: rgb(12, 13, 17);
	--gray-900: rgb(20, 22, 28);
	--gray-800: rgb(31, 34, 42);
	--gray-700: rgb(48, 52, 63);
	--gray-400: rgb(130, 136, 150);
	--gray-200: rgb(204, 208, 216);
	--gray-100: rgb(238, 240, 244);
	--accent-500: rgb(176, 24, 72);
	--accent-300: rgb(232, 92, 130);
	--steel-400: rgb(138, 169, 192);
	--accent-glow-200: rgb(176, 24, 72, 0.16);
	--accent-glow-400: rgb(176, 24, 72, 0.34);
	--steel-glow-200: rgb(138, 169, 192, 0.18);
	--shade-400: rgb(0, 0, 0, 0.42);
	--shade-600: rgb(0, 0, 0, 0.6);
	--space-100: 8px;
	--space-200: 16px;
	--space-300: 24px;
	--space-400: 32px;
	--space-500: 48px;
	--space-600: 64px;
	--space-700: 96px;
	--radius-100: 8px;
	--radius-200: 16px;
	--radius-300: 20px;
	--radius-400: 24px;
	--font-title: 'Rajdhani', 'Rajdhani Fallback', Arial, sans-serif;
	--font-text: 'Noto Sans', 'Noto Sans Fallback', Arial, sans-serif;
	--shadow-300: 0 18px 48px var(--shade-400);
	--shadow-500: 0 28px 80px var(--shade-600);
}

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

html {
	scroll-padding-top: 96px; /* faixa fixa do menu (72px) + folga */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	margin: 0;
	font-family: var(--font-text);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--gray-100);
	background: var(--gray-950);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--gray-100);
}

h2 {
	text-transform: uppercase;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--accent-300);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--gray-100);
}

:focus-visible {
	outline: 2px solid var(--steel-400);
	outline-offset: 3px;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure,
blockquote,
fieldset {
	margin: 0;
}

button,
input {
	font: inherit;
}

table {
	border-collapse: collapse;
}

.section-container {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--space-300);
	padding-left: var(--space-300);
}

.section-heading-block {
	margin-bottom: 40px;
}

.section-main-heading {
	max-width: 22ch;
	margin-bottom: var(--space-200);
	font-size: clamp(2rem, 3.4vw, 3rem);
	letter-spacing: 0.01em;
}

.section-intro-text {
	max-width: 60ch;
	margin: 0;
	color: var(--gray-200);
}

/* revelação suave: só quando o JS está ativo, o conteúdo fica visível sem ele */
[data-js] .fade-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-js] .fade-reveal.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-js] .fade-reveal {
		transform: none;
		transition: none;
	}
}

@media (max-width: 640px) {
	.section-container {
		padding-right: 20px;
		padding-left: 20px;
	}

	.section-heading-block {
		margin-bottom: var(--space-400);
	}
}