/* Fontes (Google Fonts, hospedadas localmente — sem requisição a terceiros) */
@font-face {
	font-family: 'DM Serif Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}

:root {
	/* Tokens do Figma */
	--color-roxo-escuro: #4f0f7f;
	--color-roxo-claro: #7a42bf;
	--color-amarelo: #eb9e02;
	--color-amarelo-claro: #f0e6dc;
	--color-laranja: #d74516;
	--color-branco: #ffffff;
	--color-preto: #080808;
	--color-cinza-claro: #f0f0f0;

	--font-title: 'DM Serif Display', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;

	--container: 1320px;
	--container-pad: 28px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-branco);
	color: var(--color-roxo-escuro);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	/* O Figma fixa o eixo de tamanho óptico da DM Sans em 14. */
	font-variation-settings: "opsz" 14;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; z-index: 100; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	padding: 8px 16px;
	background: var(--color-amarelo); color: var(--color-roxo-escuro);
	border-radius: 999px;
}

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

/* Botões */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px;
	font: 700 18px/normal var(--font-body);
	text-decoration: none;
	cursor: pointer;
}
.btn--primary {
	width: 248px; gap: 8px; padding-inline: 32px;
	border: 0; border-radius: 999px;
	background: var(--color-amarelo); color: var(--color-roxo-escuro);
}
.btn--primary img { width: 18.47px; height: 18.47px; }
.btn--outline {
	width: 248px; gap: 12px; padding-inline: 24px;
	border: 1px solid var(--color-amarelo-claro); border-radius: 80px;
	background: transparent; color: var(--color-amarelo-claro);
}