/* Base compartilhada: tokens, cabeçalho, seletor de idioma, rodapé e páginas de texto (privacidade). */

:root {
	color-scheme: light dark;

	--bg: #f4f2ec;
	--surface: #fffefa;
	--ink: #14161a;
	--text: #33373d;
	--muted: #5b616a;
	--line: #dfdbd0;
	--line-strong: #c9c4b6;
	--pro: #a15c07;

	--display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

	--wrap: 1120px;
	--gutter: clamp(20px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1012;
		--surface: #16191c;
		--ink: #f0eee8;
		--text: #c8c7c1;
		--muted: #9a9fa6;
		--line: #262a2f;
		--line-strong: #3a3f46;
		--pro: #e8a33d;
	}
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--ink);
	color: var(--bg);
}

/* ---------- idioma: os dois textos ficam no HTML, o CSS mostra um ---------- */

:root[data-lang="en"] [lang="pt"],
:root:not([data-lang="en"]) [lang="en"] {
	display: none !important;
}

/* ---------- cabeçalho ---------- */

.bar {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 22px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.brand-mark {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--bg);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.lang {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}

.lang button {
	font: 600 12px/1 var(--body);
	letter-spacing: 0.04em;
	color: var(--muted);
	background: none;
	border: 0;
	border-radius: 999px;
	padding: 7px 11px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.lang button:hover {
	color: var(--ink);
}

:root:not([data-lang="en"]) .lang [data-set-lang="pt"],
:root[data-lang="en"] .lang [data-set-lang="en"] {
	background: var(--ink);
	color: var(--bg);
}

/* ---------- botões ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 14px/1 var(--body);
	text-decoration: none;
	color: var(--bg);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 999px;
	padding: 12px 18px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
	opacity: 0.86;
}

.btn:active {
	transform: scale(0.98);
}

.btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.btn.ghost {
	color: var(--ink);
	background: transparent;
	border-color: var(--line-strong);
}

.btn.ghost:hover {
	opacity: 1;
	border-color: var(--ink);
}

/* ---------- rodapé ---------- */

.foot {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 28px var(--gutter) 40px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 24px;
	color: var(--muted);
	font-size: 14px;
}

.foot a {
	text-decoration: none;
}

.foot a:hover {
	color: var(--ink);
}

/* ---------- páginas de texto (políticas de privacidade) ---------- */

.doc {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(36px, 7vw, 88px) var(--gutter) 72px;
}

.doc-kicker {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

.doc h1 {
	margin: 0 0 18px;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(34px, 6vw, 52px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.doc-meta {
	margin: 0;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

.doc section {
	padding-top: 44px;
}

.doc h2 {
	margin: 0 0 14px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.doc p,
.doc li {
	color: var(--text);
	font-size: 16.5px;
	line-height: 1.7;
}

.doc p {
	margin: 0 0 14px;
}

.doc strong {
	color: var(--ink);
	font-weight: 600;
}

.doc a {
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s ease;
}

.doc a:hover {
	text-decoration-color: currentColor;
}

.doc ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.doc ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
}

.doc ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.78em;
	width: 8px;
	height: 1px;
	background: var(--line-strong);
}

.doc section > :last-child,
.doc ul li:last-child {
	margin-bottom: 0;
}

.doc code,
.tag {
	font-family: var(--mono);
	font-size: 0.8em;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 6px;
	white-space: nowrap;
}

.tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-right: 8px;
	vertical-align: 1px;
	background: var(--surface);
}

.tag.pro {
	color: var(--pro);
}

/* fluxo "como funciona": lista numerada simples */

.steps {
	list-style: none;
	counter-reset: step;
	margin: 22px 0 0;
	padding: 0;
}

.steps li {
	counter-increment: step;
	position: relative;
	padding: 0 0 16px 40px;
	color: var(--ink);
	font-size: 15.5px;
	line-height: 1.5;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: -1px;
	width: 24px;
	height: 24px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--bg);
	display: grid;
	place-items: center;
	font: 600 11px/1 var(--mono);
	color: var(--muted);
}

.steps li::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 25px;
	bottom: 1px;
	width: 1px;
	background: var(--line);
}

.steps li:last-child {
	padding-bottom: 0;
}

.steps li:last-child::after {
	display: none;
}

.doc-contact {
	margin-top: 48px;
	border-top: 1px solid var(--line);
}

.doc-contact .btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.doc-contact .btn {
	text-decoration: none;
}