/* ModoTurbo — opção B.
   O palco é quase preto, como na referência, mas a tinta é a da marca: o azul
   #0B1020 puxado quase até o fundo, nunca cinza neutro. O destaque é o AZUL da
   marca, e ele só aparece no CTA e em um ponto por seção. O ciano é o brilho,
   usado em fio fino. A rampa inteira (azul → ciano → teal) vive em dois lugares
   decorativos e em nenhum texto.
   Peso tipográfico é médio: a página fala baixo e grande, não em negrito. */

@font-face {
	font-family: "Satoshi";
	src: url("fonts/Satoshi-Variable.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-display: swap;
	font-style: normal;
}

:root {
	/* Superfícies, do fundo para cima. */
	--fundo: oklch(0.105 0.018 264);
	--painel: oklch(0.163 0.020 264);
	--realce: oklch(0.223 0.022 264);
	--linha: oklch(0.312 0.024 264);
	--linha-fraca: oklch(0.312 0.024 264 / 0.55);

	/* Texto. Medidos contra --fundo e --painel; nada de corpo abaixo de 4.5:1. */
	--tinta: oklch(0.975 0.005 250);
	--tinta-2: oklch(0.812 0.016 253);

	/* O destaque. O azul é a âncora da marca; o ciano é só o brilho. */
	--marca: oklch(0.555 0.212 264);
	--marca-forte: oklch(0.515 0.212 264);
	--marca-fraca: oklch(0.555 0.212 264 / 0.16);
	--marca-linha: oklch(0.555 0.212 264 / 0.42);
	--marca-clara: oklch(0.70 0.17 264);
	--brilho: oklch(0.807 0.132 202);

	/* Espaço em escala de 4pt. */
	--e1: 4px;
	--e2: 8px;
	--e3: 12px;
	--e4: 16px;
	--e5: 24px;
	--e6: 32px;
	--e7: 48px;
	--e8: 64px;
	--e9: 96px;
	--secao: clamp(56px, 5.6vw, 80px);

	--medida: 66ch;

	/* Medida da prosa longa, contada em caracteres REAIS de português — não em
	   unidades `ch`. O zero da Satoshi mede 11,62px a 17px, 1,42× a largura
	   média de um caractere de texto corrido: `66ch` renderiam ~94 caracteres
	   por linha, quase o dobro do confortável. 48ch entregam ~68. */
	--medida-doc: 48ch;
	--largura: 1180px;
	--raio: 14px;
	--raio-painel: 24px;

	--saida: cubic-bezier(0.16, 1, 0.3, 1);
	--saida-suave: cubic-bezier(0.25, 1, 0.5, 1);

	--z-fundo: 0;
	--z-conteudo: 1;
	--z-flutua: 2;
	--z-fixo: 10;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.62;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Peso 500, não 700: é o que separa esta página da atual. A hierarquia vem de
   escala e espaço. */
h1,
h2,
h3 {
	margin: 0;
	font-weight: 500;
	text-wrap: balance;
	letter-spacing: -0.025em;
}

p {
	margin: 0;
	text-wrap: pretty;
}

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

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

.pular {
	position: absolute;
	top: var(--e3);
	left: var(--e4);
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	z-index: var(--z-fixo);
	padding: var(--e3) var(--e4);
	border-radius: var(--raio);
	background: var(--realce);
	color: var(--tinta);
	text-decoration: none;
}

.pular:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}

.faixa {
	width: min(100% - 40px, var(--largura));
	margin-inline: auto;
}

/* ── rótulo-pílula ─────────────────────────────────────────────────────────
   Caixa de frase, não versalete espaçado: é um sinal de seção da marca, não o
   kicker padrão de landing. */

.rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	padding: 5px var(--e3);
	border-radius: 999px;
	background: var(--realce);
	border: 1px solid var(--linha);
	color: var(--tinta);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
}

.ponto {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

/* O único respingo de cor do rótulo: o ponto. */
.rotulo .ponto {
	background: var(--brilho);
}

.heroi .ponto {
	animation: pulsar 2.6s var(--saida-suave) infinite;
}

@keyframes pulsar {
	0%,
	100% {
		box-shadow: 0 0 0 0 oklch(0.807 0.132 202 / 0.45);
	}
	65% {
		box-shadow: 0 0 0 7px oklch(0.807 0.132 202 / 0);
	}
}

/* ── botões ────────────────────────────────────────────────────────────────── */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	padding: 13px var(--e5);
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition:
		transform 160ms var(--saida),
		background-color 180ms var(--saida-suave),
		border-color 180ms var(--saida-suave),
		box-shadow 180ms var(--saida-suave);
}

.botao--marca {
	background: var(--marca);
	color: oklch(0.99 0 0);
	font-weight: 600;
}

.botao--marca:hover {
	background: var(--marca-forte);
	box-shadow: 0 8px 24px oklch(0.555 0.212 264 / 0.35);
	transform: translateY(-1px);
}

.botao--vazio {
	border: 1px solid var(--linha);
	color: var(--tinta);
}

.botao--vazio:hover {
	border-color: var(--marca);
	color: var(--tinta);
	transform: translateY(-1px);
}

.botao--miudo {
	padding: 9px var(--e4);
	font-size: 14.5px;
}

.acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
}

/* ── cabeçalho ─────────────────────────────────────────────────────────────── */

.topo {
	position: sticky;
	top: 0;
	z-index: var(--z-fixo);
	background: color-mix(in oklab, var(--fundo) 86%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--linha-fraca);
}

.topo__linha {
	display: flex;
	align-items: center;
	gap: var(--e5);
	padding-block: var(--e3);
}

.marca {
	display: flex;
	flex: none;
}

.marca img {
	height: 28px;
	width: auto;
	display: block;
}

.topo__nav {
	display: flex;
	gap: var(--e5);
	margin-inline: auto;
	font-size: 15px;
	white-space: nowrap;
}

.topo__nav a {
	color: var(--tinta-2);
	text-decoration: none;
	transition: color 160ms var(--saida-suave);
}

.topo__nav a:hover {
	color: var(--tinta);
}

@media (max-width: 780px) {
	.topo__cta {
		display: none;
	}

	.topo__nav {
		gap: var(--e4);
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	/* Vale para "#caminho" na home e para "index.html#caminho" nas peças legais. */
	.topo__nav a[href$="#caminho"] {
		display: none;
	}

	.marca img {
		height: 24px;
	}
}

/* ── herói ─────────────────────────────────────────────────────────────────── */

.heroi {
	position: relative;
	/* `clip` e não `hidden`: impede o halo do aparelho de alargar a página em telas
	   estreitas sem criar um contêiner de rolagem nem prender `position: sticky`.
	   Sem isto o brilho vazava 38% para cada lado e o celular ganhava 104px de
	   rolagem horizontal. */
	overflow: clip;
	padding-block: clamp(48px, 6vw, 88px) 0;
	text-align: center;
}

/* Um único halo, no tom da marca. Bounded, sem repintar no scroll. */
.heroi::before {
	content: "";
	position: absolute;
	inset: -180px 0 auto;
	height: 720px;
	z-index: var(--z-fundo);
	background:
		radial-gradient(42% 46% at 50% 30%, oklch(0.555 0.212 264 / 0.38), transparent 70%),
		radial-gradient(30% 36% at 72% 16%, oklch(0.807 0.132 202 / 0.12), transparent 68%);
	filter: blur(64px);
	pointer-events: none;
}

.heroi__texto {
	position: relative;
	z-index: var(--z-conteudo);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e5);
}

/* Teto em 60px, como a referência. Entrelinha 1,13 e peso 500. */
.heroi h1 {
	max-width: 17ch;
	font-size: clamp(2.25rem, 5.4vw, 3.75rem);
	line-height: 1.13;
	letter-spacing: -0.028em;
}

.heroi h1 .realce {
	display: block;
	color: var(--marca-clara);
}

.heroi .sub {
	max-width: 60ch;
	color: var(--tinta-2);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

.heroi .acoes {
	justify-content: center;
	margin-top: var(--e2);
}

/* ── palco: a conversa é o objeto visual ───────────────────────────────────── */

.palco {
	position: relative;
	z-index: var(--z-conteudo);
	margin-top: clamp(40px, 4.4vw, 60px);
	padding-bottom: 0;
	text-align: left;
}

.palco__grade {
	display: grid;
	justify-items: center;
	gap: var(--e5);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.palco__grade {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--e6);
	}

	.cartao--esq {
		justify-self: end;
	}

	.cartao--dir {
		justify-self: start;
	}
}

/* O aparelho é uma foto de moldura com fundo transparente; a tela é DOM por trás
   dela. A conversa continua sendo texto de verdade — selecionável, acessível e
   animável — e a moldura só empresta o realismo. */
/* 340px é o menor aparelho em que a conversa inteira cabe sem rolar: a história
   começa em "gostaria de marcar uma sessao" e essa é a fala que arma tudo. */
.fone {
	position: relative;
	width: min(100%, 340px);
}

/* Halo largo: o ambiente. Sozinho lê como nuvem solta, porque a tela é opaca e
   tapa o miolo — quem abraça a silhueta é o drop-shadow da moldura. */
.fone::before {
	content: "";
	position: absolute;
	inset: -26% -38%;
	background:
		radial-gradient(50% 40% at 52% 48%, oklch(0.62 0.20 264 / 0.42), transparent 72%),
		radial-gradient(28% 22% at 80% 40%, oklch(0.807 0.132 202 / 0.40), transparent 74%);
	filter: blur(22px);
	pointer-events: none;
}

.fone__aro {
	position: relative;
	aspect-ratio: 426 / 876;
}

/* Abertura medida no PNG recortado (426x876): 19,14 com 389x849. Em porcentagem
   para que a tela nunca desalinhe da moldura, em nenhum tamanho. */
.fone__tela {
	position: absolute;
	left: 4.4601%;
	top: 1.5982%;
	width: 91.3146%;
	height: 96.9178%;
	display: flex;
	flex-direction: column;
	/* 48px de raio sobre 389x849: horizontal 12.34% da largura, vertical 5.65%
	   da altura. Assim o canto sai circular em qualquer escala. */
	border-radius: 12.34% / 5.65%;
	overflow: hidden;
	background: oklch(0.128 0.019 264);
}

.fone__moldura {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	/* Segue o alfa do PNG, então a luz contorna a silhueta em vez de formar um
	   retângulo atrás. É o que faz o aparelho parecer fotografado. */
	filter:
		drop-shadow(0 0 1px oklch(0.807 0.132 202 / 0.5))
		drop-shadow(8px 0 30px oklch(0.62 0.20 264 / 0.55))
		drop-shadow(0 18px 44px oklch(0.04 0.02 264 / 0.9));
}

/* O topo da barra desvia do Dynamic Island, que é opaco no PNG e cobriria o nome
   do negócio. CUIDADO: padding em % resolve contra a LARGURA do contêiner, nunca
   contra a altura. A ilha termina 47px abaixo do topo da tela num aparelho de
   426px, e a tela tem 389 de largura — daí os 12%, com folga para 14%. */
.fone__barra {
	display: flex;
	align-items: center;
	gap: var(--e3);
	padding: 14% var(--e4) var(--e3);
	background: var(--realce);
	border-bottom: 1px solid var(--linha-fraca);
}

.fone__avatar {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(120deg, oklch(0.62 0.20 264), oklch(0.807 0.132 202) 48%, oklch(0.792 0.146 176));
	color: oklch(0.16 0.03 264);
	font-size: 13px;
	font-weight: 700;
}

.fone__quem {
	display: grid;
	line-height: 1.3;
}

.fone__quem b {
	font-size: 14.5px;
	font-weight: 600;
}

.fone__quem i {
	font-style: normal;
	font-size: 12px;
	color: var(--tinta-2);
}

/* Um chat de verdade cresce de baixo, mas NÃO use `justify-content: flex-end`
   aqui: num contêiner rolável ele empurra o excedente para fora pelo topo e esse
   trecho fica inalcançável — nem barra de rolagem nem teclado chegam nele. A
   margem automática no primeiro filho faz o mesmo alinhamento e se anula sozinha
   quando o conteúdo passa da altura, devolvendo a rolagem normal. */
.fone__fluxo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--e2);
	padding: var(--e4);
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
}

.fone__fluxo > :first-child {
	margin-top: auto;
}


.fone__fluxo::-webkit-scrollbar {
	display: none;
}

.balao {
	max-width: 85%;
	padding: var(--e2) var(--e3);
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.45;
}

.balao--dela {
	align-self: flex-start;
	background: var(--realce);
	border-bottom-left-radius: 4px;
}

.balao--nossa {
	align-self: flex-end;
	background: oklch(0.283 0.062 264);
	border: 1px solid oklch(0.34 0.05 264);
	border-bottom-right-radius: 4px;
}

/* Flutua à direita no fim do texto, como no WhatsApp de verdade. Em bloco cada
   hora custava uma linha inteira — seis balões, quase 90px, e a conversa não
   cabia na tela do aparelho. */
.balao__hora {
	float: right;
	margin: 0.45em -0.15em -0.1em 0.7em;
	color: var(--tinta-2);
	font-size: 11.5px;
	line-height: 1;
}

/* O selo da ferramenta é a prova de que ela consultou em vez de inventar. */
.selo-ferramenta {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px var(--e3);
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--linha-fraca);
	color: var(--tinta-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	letter-spacing: -0.01em;
	text-align: center;
}

.selo-ferramenta svg {
	width: 12px;
	height: 12px;
	flex: none;
}

.roteiro .balao,
.roteiro .selo-ferramenta {
	opacity: 0;
	transform: translateY(8px);
}

.roteiro .balao.visivel,
.roteiro .selo-ferramenta.visivel {
	opacity: 1;
	transform: none;
	transition:
		opacity 320ms var(--saida),
		transform 320ms var(--saida);
}

.digitando {
	align-self: flex-start;
	display: none;
	gap: 4px;
	padding: var(--e3);
	border-radius: 14px;
	background: var(--realce);
}

.digitando.visivel {
	display: flex;
}

.digitando i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tinta-2);
	animation: saltar 1.2s var(--saida-suave) infinite;
}

.digitando i:nth-child(2) {
	animation-delay: 0.15s;
}

.digitando i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes saltar {
	0%,
	60%,
	100% {
		opacity: 0.4;
		transform: none;
	}
	30% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

.fone__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e3);
	margin-top: var(--e3);
}

.nota {
	color: var(--tinta-2);
	font-size: 13px;
}

.reprisar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--e3);
	border: 1px solid var(--linha);
	border-radius: 999px;
	background: transparent;
	color: var(--tinta-2);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition:
		color 160ms var(--saida-suave),
		border-color 160ms var(--saida-suave);
}

.reprisar:hover {
	color: var(--tinta);
	border-color: var(--marca);
}

/* Os dois cartões ao redor do telefone: são artefato real do produto, não
   ícone decorativo flutuando. */
.cartao {
	width: min(100%, 320px);
	margin: 0;
	padding: var(--e4) var(--e5) var(--e4) var(--e4);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--painel);
}

.cartao__topo {
	color: var(--tinta-2);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.cartao__hora {
	margin-top: var(--e2);
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
}

.cartao__linha {
	margin-top: 2px;
	color: var(--tinta-2);
	font-size: 14.5px;
	line-height: 1.5;
}

.marca-agua {
	display: flex;
	align-items: center;
	gap: var(--e2);
	margin-top: var(--e3);
	padding-top: var(--e3);
	border-top: 1px solid var(--linha-fraca);
	color: var(--tinta-2);
	font-size: 12.5px;
}

.marca-agua .ponto {
	background: var(--brilho);
}

@media (min-width: 1024px) {
	.cartao--esq {
		transform: translateY(-40px);
	}

	.cartao--dir {
		transform: translateY(52px);
	}
}

/* ── seções ────────────────────────────────────────────────────────────────── */

.secao {
	padding-block: var(--secao);
}

.cabeca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e4);
	text-align: center;
	margin-bottom: clamp(36px, 4vw, 56px);
}

/* 48px com entrelinha 1,0 e peso 500, como a referência. */
.cabeca h2 {
	max-width: 20ch;
	font-size: clamp(1.875rem, 4.2vw, 3rem);
	line-height: 1.02;
}

.corpo {
	max-width: var(--medida);
	color: var(--tinta-2);
}

/* ── o ciclo: numeral gigante + cinco passos ───────────────────────────────── */

.ciclo {
	display: grid;
	gap: var(--e7);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 920px) {
	.ciclo {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--e8);
	}
}

/* A peça gráfica da página. Peso 400 num tamanho enorme: presença sem grito. */
.numeral {
	font-size: clamp(5.5rem, 13vw, 8.75rem);
	line-height: 0.86;
	font-weight: 400;
	letter-spacing: -0.05em;
	color: var(--marca-clara);
	font-variant-numeric: tabular-nums;
}

.numeral span {
	font-size: 0.42em;
	letter-spacing: -0.02em;
	margin-left: 2px;
}

.numeral__legenda {
	margin-top: var(--e5);
	max-width: 40ch;
	color: var(--tinta-2);
	font-size: 16.5px;
}

.numeral__legenda b {
	display: block;
	color: var(--tinta);
	font-weight: 500;
}

.passos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e1);
}

.passo {
	display: grid;
	grid-template-columns: 34px 1fr;
	column-gap: var(--e4);
	padding: var(--e4);
	border-radius: var(--raio);
	border: 1px solid transparent;
	transition:
		background-color 320ms var(--saida-suave),
		border-color 320ms var(--saida-suave);
}

.passo[data-ativo="true"] {
	background: var(--painel);
	border-color: var(--linha);
}

.passo__n {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	line-height: 28px;
	color: var(--tinta-2);
	transition: color 320ms var(--saida-suave);
}

.passo[data-ativo="true"] .passo__n {
	color: var(--tinta);
}

.passo__t {
	font-size: 20px;
	line-height: 28px;
	font-weight: 500;
}

.passo__d {
	grid-column: 2;
	margin-top: 2px;
	color: var(--tinta-2);
	font-size: 15.5px;
}

/* ── três coisas ───────────────────────────────────────────────────────────── */

.faz {
	display: grid;
	gap: var(--e5);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.faz {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bloco--largo {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--e8);
	}

	.bloco--largo .bloco__demo {
		margin-top: 0;
	}

	.bloco--largo .nota--demo {
		grid-column: 2;
	}
}

.bloco {
	display: grid;
	padding: var(--e6);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--painel);
}

.bloco h3 {
	font-size: 20px;
	line-height: 28px;
}

.bloco__texto p {
	margin-top: var(--e3);
	max-width: 46ch;
	color: var(--tinta-2);
	font-size: 15.5px;
}

.bloco__demo {
	margin-top: var(--e6);
}

.nota--demo {
	margin-top: var(--e3);
}

/* Demo 1: dois balões, o mesmo material do herói em escala menor. */
.demo-conversa {
	display: flex;
	flex-direction: column;
	gap: var(--e2);
	padding: var(--e4);
	border-radius: var(--raio);
	background: oklch(0.128 0.019 264);
}

.balao--mini {
	max-width: 92%;
	font-size: 14px;
}

.selo-ferramenta--mini {
	font-size: 11px;
}

/* Demo 2: a semana, em traço. */
.semana {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--e2);
}

.dia {
	display: grid;
	gap: 5px;
	justify-items: stretch;
}

.dia b {
	color: var(--tinta-2);
	font-size: 11.5px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 2px;
}

.dia i {
	height: 22px;
	border-radius: 5px;
	background: oklch(0.223 0.022 264);
}

.dia i.cheio {
	background: var(--marca-fraca);
	border: 1px solid var(--marca-linha);
}

.demo-semana__pe {
	margin-top: var(--e3);
	color: var(--tinta-2);
	font-size: 12.5px;
}

/* Demo 3: o saldo do pacote. */
.demo-pacote__topo {
	font-size: 15px;
}

.demo-pacote__topo b {
	font-weight: 500;
}

.barra {
	height: 10px;
	margin-top: var(--e3);
	border-radius: 999px;
	background: var(--realce);
	overflow: hidden;
}

.barra i {
	display: block;
	height: 100%;
	width: var(--parte, 50%);
	border-radius: 999px;
	background: var(--marca);
}

.demo-pacote__pe {
	margin-top: var(--e3);
	color: var(--tinta-2);
	font-size: 13.5px;
}

/* ── convivência com o celular ─────────────────────────────────────────────── */

.painel {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--e7);
	padding: clamp(28px, 5vw, 64px);
	border: 1px solid var(--linha);
	border-radius: var(--raio-painel);
	background: var(--painel);
	grid-template-columns: 1fr;
}

@media (min-width: 940px) {
	.painel {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		gap: var(--e8);
	}
}

.painel__texto {
	display: grid;
	justify-items: start;
	gap: var(--e4);
}

.painel__texto h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.06;
	max-width: 16ch;
}

.silencio {
	display: grid;
	gap: var(--e3);
}

.silencio__marco {
	display: flex;
	align-items: baseline;
	gap: var(--e4);
	padding: var(--e4);
	border-radius: var(--raio);
	background: oklch(0.128 0.019 264);
	border: 1px solid var(--linha-fraca);
}

.silencio__hora {
	flex: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--tinta-2);
}

/* O único destaque da seção: a hora em que ela volta sozinha. */
.silencio__marco:last-of-type .silencio__hora {
	color: var(--marca-clara);
}

.silencio__que {
	font-size: 15.5px;
}

.silencio__trilho {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	margin-inline: var(--e5);
	padding: var(--e2) var(--e4);
	border-left: 1px dashed var(--linha);
	border-right: 1px dashed var(--linha);
	overflow: hidden;
	border-radius: 4px;
}

.silencio__preenche {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: linear-gradient(90deg, var(--marca-fraca), oklch(0.555 0.212 264 / 0.02));
	z-index: var(--z-fundo);
}

.silencio.correndo .silencio__preenche {
	animation: encher 2.4s var(--saida-suave) both;
}

@keyframes encher {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.silencio__rotulo {
	position: relative;
	z-index: var(--z-conteudo);
	color: var(--tinta-2);
	font-size: 13.5px;
}

/* ── chamada final ─────────────────────────────────────────────────────────── */

.secao--fecho {
	padding-top: 0;
}

.fecho {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
	border-radius: var(--raio-painel);
	background: oklch(0.148 0.020 264);
}

/* O brilho num canto, como no painel de fecho da referência. */
.fecho::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -160px;
	width: 620px;
	height: 620px;
	z-index: var(--z-fundo);
	background: radial-gradient(circle, oklch(0.555 0.212 264 / 0.28), transparent 62%);
	pointer-events: none;
}

/* Fio da rampa completa no topo do painel de fecho: o segundo e último lugar
   da página onde o teal do logo aparece. */
.fecho::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	z-index: var(--z-conteudo);
	background: linear-gradient(100deg, var(--marca), oklch(0.807 0.132 202) 55%, oklch(0.792 0.146 176));
	pointer-events: none;
}

.fecho__conteudo {
	position: relative;
	z-index: var(--z-conteudo);
	display: grid;
	justify-items: start;
	gap: var(--e5);
	max-width: 44ch;
}

.fecho h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.04;
}

.legais {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	margin-top: var(--e2);
}

.legais a {
	padding: 9px var(--e4);
	border: 1px solid var(--linha);
	border-radius: 999px;
	color: var(--tinta);
	text-decoration: none;
	font-size: 14.5px;
	transition:
		border-color 160ms var(--saida-suave),
		background-color 160ms var(--saida-suave);
}

.legais a:hover {
	border-color: var(--marca);
	background: var(--marca-fraca);
}

/* ── rodapé ────────────────────────────────────────────────────────────────── */

.rodape {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	padding-block: clamp(48px, 6vw, 80px) 0;
	border-top: 1px solid var(--linha-fraca);
	background: oklch(0.128 0.019 264);
}

.rodape__grade {
	display: grid;
	gap: var(--e7);
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.rodape__grade {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
		gap: var(--e8);
	}
}

.rodape__marca img {
	height: 30px;
	width: auto;
	display: block;
}

.rodape__marca p {
	margin-top: var(--e4);
	max-width: 40ch;
	color: var(--tinta-2);
	font-size: 14.5px;
}

.rodape__contato a {
	color: var(--marca-clara);
}

.rodape__coluna {
	display: grid;
	align-content: start;
	gap: var(--e3);
}

.rodape__coluna h2 {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--tinta-2);
	margin-bottom: var(--e1);
}

.rodape__coluna a {
	color: var(--tinta);
	text-decoration: none;
	font-size: 15px;
	justify-self: start;
	transition: color 160ms var(--saida-suave);
}

.rodape__coluna a:hover {
	color: var(--marca-clara);
}

/* Os documentos que o revisor precisa achar ficam sublinhados: eles não são
   navegação secundária. */
.rodape__coluna--legal a {
	text-decoration: underline;
	text-decoration-color: var(--marca-linha);
	text-underline-offset: 4px;
}

.rodape__empresa {
	display: grid;
	gap: var(--e3);
	margin-top: var(--e8);
	padding-top: var(--e6);
	border-top: 1px solid var(--linha-fraca);
	color: var(--tinta-2);
	font-size: 13.5px;
	max-width: 84ch;
}

.rodape__empresa strong {
	color: var(--tinta);
	font-weight: 600;
}

/* A marca em tamanho de assinatura, cortada pela borda de baixo. Decorativa e
   fora da árvore de acessibilidade: o nome legível já está no topo do rodapé.

   Segue o kit da marca (brand/README.md): sempre minúscula, `modo` em Satoshi
   Medium 500 e `turbo` em Bold 700 inclinado 7°. A inclinação é `skewX` e NÃO
   `font-style: italic` — a Satoshi Variable só traz o corte normal, então o
   itálico sairia sintetizado pelo navegador, com ângulo que muda de engine para
   engine. O kit pede 7 graus exatos, e skew entrega exatamente isso. */
.rodape__gigante {
	margin: clamp(24px, 4vw, 48px) 0 -0.24em;
	font-size: clamp(3.5rem, 16.5vw, 13rem);
	line-height: 0.8;
	font-weight: 500;
	letter-spacing: -0.045em;
	color: oklch(0.235 0.022 264);
	user-select: none;
	white-space: nowrap;
}

.rodape__gigante-turbo {
	display: inline-block;
	font-weight: 700;
	/* O skew inclina a caixa inteira, então a base do "t" invade a palavra
	   anterior; a margem devolve o espaço óptico. */
	margin-left: 0.06em;
	transform: skewX(-7deg);
}

/* ── documento legal ───────────────────────────────────────────────────────
   Leitura longa, não venda. Uma coluna de prosa presa em 66 caracteres, o
   trilho de seções à direita quando sobra largura, e ritmo vertical
   assimétrico: o ar antes de um h2 é ~4× o de depois, para o título pertencer
   ao texto que ele abre e não ao que ele fecha.

   Os números de seção estão no HTML, NÃO em counter(): texto legal copiado
   desta página tem de sair com "3." colado no título, como no original. O
   recuo pendente (text-indent negativo + padding igual) é só óptico. */

.doc {
	padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 104px);
}

.doc__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"cabeca"
		"sumario"
		"prosa"
		"irmas";
}

.doc__cabeca {
	grid-area: cabeca;
	max-width: var(--medida-doc);
	padding-bottom: var(--e6);
	border-bottom: 1px solid var(--linha-fraca);
}

.doc__texto {
	grid-area: prosa;
	max-width: var(--medida-doc);
}

.doc__irmas {
	grid-area: irmas;
	max-width: var(--medida-doc);
}

.sumario {
	grid-area: sumario;
}

@media (min-width: 1100px) {
	.doc__grade {
		grid-template-columns: minmax(0, var(--medida-doc)) minmax(190px, 240px);
		grid-template-areas:
			"cabeca sumario"
			"prosa  sumario"
			"irmas  sumario";
		justify-content: start;
		column-gap: clamp(56px, 6vw, 104px);
	}
}

/* A página de exclusão de dados carrega um quarto item no topo, e "Exclusão de
   dados" é largo. Em vez de encolher a fonte até o ilegível ou esconder um
   documento que o revisor procura, a navegação das peças legais ganha a
   própria linha assim que o espaço aperta. */
@media (max-width: 860px) {
	.pagina-legal .topo__linha {
		flex-wrap: wrap;
		row-gap: var(--e3);
	}

	.pagina-legal .topo__nav {
		width: 100%;
		margin-inline: 0;
	}
}

/* ── título e data ─────────────────────────────────────────────────────── */

.doc__cabeca h1 {
	font-size: clamp(2rem, 4.2vw, 2.75rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

/* Não é subtítulo: é metadado. Fica pequena, em tinta secundária, e some do
   caminho do olho que desce para o primeiro parágrafo. */
.atualizado {
	margin-top: var(--e4);
	color: var(--tinta-2);
	font-size: 13.5px;
	line-height: 1.4;
}

/* ── sumário ───────────────────────────────────────────────────────────────
   Ferramenta de busca, não abertura: quem chega aqui costuma procurar UM
   item, não ler do começo. Onde há largura sobrando, vira trilho fixo à
   direita e some do caminho do olho. Abaixo disso corre em linha, como um
   índice de rodapé de livro — quatro linhas miúdas, não um bloco que dispute
   com o título. */

.sumario {
	margin-top: var(--e6);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--e5);
	font-size: 13.5px;
	line-height: 1.45;
}

.sumario h2 {
	width: 100%;
	margin-bottom: var(--e1);
	color: var(--tinta-2);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0;
}

.sumario a {
	color: var(--tinta-2);
	text-decoration: none;
	/* Alvo de toque de ~28px sem inflar o bloco: o ar vira padding do link em
	   vez de row-gap morto entre eles. */
	padding-block: 4px;
}

.sumario a:hover {
	color: var(--tinta);
}

@media (min-width: 1100px) {
	.sumario {
		position: sticky;
		top: 92px;
		align-self: start;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: var(--e2);
		margin-top: 0;
		padding-left: var(--e5);
		border-left: 1px solid var(--linha-fraca);
	}

	.sumario h2 {
		width: auto;
	}
}

/* ── prosa ─────────────────────────────────────────────────────────────── */

.doc__texto {
	margin-top: var(--e7);
	color: var(--tinta-2);
	line-height: 1.75;
}

.doc__texto > * + * {
	margin-top: var(--e4);
}

.doc__texto h2 {
	margin-top: clamp(48px, 6.5vw, 72px);
	padding-top: var(--e6);
	padding-left: 1.6em;
	text-indent: -1.6em;
	border-top: 1px solid var(--linha-fraca);
	color: var(--tinta);
	font-size: clamp(1.22rem, 2.1vw, 1.4rem);
	line-height: 1.28;
	letter-spacing: -0.02em;
}

/* O primeiro título já tem o fio da cabeça logo acima. */
.doc__texto h2:first-of-type {
	margin-top: var(--e7);
	padding-top: 0;
	border-top: 0;
}

.doc__texto strong {
	color: var(--tinta);
	font-weight: 600;
}

.doc__texto a {
	color: var(--marca-clara);
	text-decoration: underline;
	text-decoration-color: var(--marca-linha);
	text-underline-offset: 3px;
}

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

.doc__texto ul {
	margin-block: var(--e4);
	padding-left: 1.35em;
}

.doc__texto li + li {
	margin-top: var(--e2);
}

.doc__texto li::marker {
	color: var(--marca-clara);
}

/* ── tabelas ───────────────────────────────────────────────────────────── */

.doc__texto table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 15.5px;
	line-height: 1.62;
}

.doc__texto th {
	padding: 0 var(--e4) var(--e2) 0;
	border-bottom: 1px solid var(--linha);
	color: var(--tinta);
	font-size: 13px;
	font-weight: 500;
}

.doc__texto td {
	padding: var(--e3) var(--e4) var(--e3) 0;
	border-bottom: 1px solid var(--linha-fraca);
	vertical-align: top;
}

/* Hifenização só onde a coluna fica realmente estreita: numa célula de 340px
   ela quebra palavra à toa. */
@media (max-width: 640px) {
	.doc__texto td {
		hyphens: auto;
	}
}

.doc__texto td:first-child {
	width: 38%;
	color: var(--tinta);
}

.doc__texto th:last-child,
.doc__texto td:last-child {
	padding-right: 0;
}

.doc__texto tr:last-child td {
	border-bottom: 0;
}

/* ── as três irmãs ─────────────────────────────────────────────────────────
   Quem chega numa peça legal quase sempre queria outra. O salto entre elas
   não pode depender do rodapé. */

.doc__irmas {
	margin-top: clamp(56px, 7vw, 88px);
	padding-top: var(--e5);
	border-top: 1px solid var(--linha);
}

.doc__irmas h2 {
	color: var(--tinta-2);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
}

.doc__irmas ul {
	margin: var(--e4) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3) var(--e6);
}

.doc__irmas a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--e2);
	color: var(--tinta);
	text-decoration: none;
	font-size: 15.5px;
	transition: color 160ms var(--saida-suave);
}

.doc__irmas a::after {
	content: "→";
	display: inline-block;
	color: var(--marca-clara);
	transition: transform 200ms var(--saida-suave);
}

.doc__irmas a:hover {
	color: var(--marca-clara);
}

.doc__irmas a:hover::after {
	transform: translateX(3px);
}

/* A página em que o visitante está se identifica sem virar botão. */
.topo__nav a[aria-current="page"] {
	color: var(--tinta);
	text-decoration: underline;
	text-decoration-color: var(--marca-linha);
	text-underline-offset: 6px;
}

/* ── revelação ─────────────────────────────────────────────────────────────── */

.aparece {
	opacity: 1;
}

.js .aparece {
	opacity: 0;
	transform: translateY(16px);
}

.js .aparece.dentro {
	opacity: 1;
	transform: none;
	transition:
		opacity 640ms var(--saida) calc(var(--i, 0) * 90ms),
		transform 640ms var(--saida) calc(var(--i, 0) * 90ms);
}

/* Os cartões do herói entram na posição deslocada que o layout já previu. */
@media (min-width: 1024px) {
	.js .cartao--esq.dentro {
		transform: translateY(-40px);
	}

	.js .cartao--dir.dentro {
		transform: translateY(52px);
	}
}

/* ── movimento reduzido ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js .aparece,
	.js .aparece.dentro {
		opacity: 1;
	}

	.js .aparece {
		transform: none;
	}

	.roteiro .balao,
	.roteiro .selo-ferramenta {
		opacity: 1;
		transform: none;
	}

	.heroi::before {
		display: none;
	}

	/* Sem animação, os cinco passos ficam todos com a borda de leitura. */
	.passo {
		background: var(--painel);
		border-color: var(--linha);
	}
}