/*
 * Institucional e legal — `/sobre/`, `/contato/`, `/termos-de-uso/` e
 * `/politica-de-privacidade/`.
 *
 * Sétima folha do V2 escrita só em PAPÉIS, em @layer componente, e a segunda
 * a nascer sem nenhuma dependência: nem `vtag.css`, nem `listagem.css`, nem
 * `conteudo.css`.
 *
 * **Por que não reaproveitar `conteudo.css`.** Ela tem a tipografia de leitura
 * de que estas quatro telas precisam (`.vt-leitura__corpo`), e reaproveitá-la
 * custaria `conteudo.css` + `listagem.css`, de que ela depende: 60 KB para uma
 * página de termos que usa uns quatro. É exatamente o que a §10.5 proíbe —
 * "uma página institucional não paga por CSS de componente que ela não usa" —
 * e é a razão de a tipografia de prosa aparecer aqui de novo, em vez de a
 * folha inteira ser puxada.
 *
 * As duas são irmãs e sabem disso: se um dia a medida de leitura, a escala de
 * títulos ou o tratamento de lista mudarem lá, mudam aqui. É a única
 * duplicação deliberada desta folha, e está escrita para não virar acidente.
 *
 * A TRILHA vem junto pelo mesmo motivo: ela mora em `listagem.css`, que estas
 * telas não carregam. São seis regras.
 */

@layer componente {

	/* ── a composição: coluna de leitura + trilho ─────────────────────── */

	/*
	 * DUAS MEDIDAS, e confundi-las é o defeito que o cliente já viu duas vezes.
	 *
	 * A primeira: `max-width: 52rem` com `margin-inline: auto` dentro de um
	 * `.vt-main` já centralizado — a página parecia ter escorregado para o
	 * meio. A caixa voltou a ser a coluna do site, e a medida passou a valer
	 * por bloco.
	 *
	 * A segunda, corrigida aqui: a medida por bloco valia para TODO filho
	 * direto (`.vt-institucional > * { max-width: 52rem }`), e o efeito num
	 * monitor de 1600 px era uma faixa de 832 px encostada à esquerda com 336
	 * px de vão morto à direita — *"fica com um espaço em branco à direita"*.
	 * Reservar a coluna do site inteira e não usá-la é o mesmo defeito de
	 * composição, só que ao contrário.
	 *
	 * **A saída não é esticar o texto.** Uma linha de 1160 px dá ~130
	 * caracteres, quase o dobro do teto de conforto (75): resolveria o vão e
	 * quebraria a leitura. O que preenche a largura é DISTRIBUIR — a coluna de
	 * leitura à esquerda e um trilho de navegação à direita, que é onde o
	 * sumário, os canais e os atalhos passam a viver. A página usa a largura
	 * toda; a linha de texto continua com a medida em que se lê.
	 */
	/*
	 * A medida do texto continua 68ch, e não cresceu para "aproveitar" a
	 * coluna. Medido na tela: 68ch dá ~750 px em corpo 17, que já rende linhas
	 * de mais de 90 caracteres nos parágrafos com palavras curtas — o teto de
	 * conforto é 75. Esticar a medida seria trocar um defeito de composição
	 * por um de leitura. Quem preenche a coluna são os BLOCOS: tabela,
	 * acordeão e cartões vão de borda a borda, e é o que apoia o lado direito.
	 */
	.vt-institucional {
		--vt-coluna-institucional: 52rem;
		--vt-medida-institucional: 68ch;

		display: grid;
		gap: var(--vt-space-12);
	}

	.vt-institucional > * {
		width: 100%;
	}

	/*
	 * A abertura e o fecho atravessam as duas colunas: título de página e
	 * convite não são conteúdo de coluna, são faixas da tela.
	 *
	 * A medida fica na CAIXA do topo, e não em cada filho: o lede tem
	 * `max-width` própria em `ch`, e `ch` no corpo `xl` dá 940 px — mais do
	 * que a coluna inteira. Duas regras de mesma especificidade disputando, e
	 * ganha a que estiver por último na folha, que é acidente de ordem. A
	 * caixa resolve as duas: cada bloco continua com a medida dele, dentro de
	 * um teto que é o mesmo do resto da página.
	 */
	.vt-institucional__topo {
		max-width: var(--vt-coluna-institucional);
	}

	.vt-institucional__corpo {
		display: grid;
		gap: var(--vt-space-8);
	}

	.vt-institucional__coluna {
		display: grid;
		align-content: start;
		gap: var(--vt-space-12);
		min-width: 0;
	}

	/*
	 * A folga da âncora vale para a SEÇÃO, e não só para o `h2`. Na `/sobre/`
	 * o `id` está na seção — duas delas não têm um título só —, e sem esta
	 * linha o destino da âncora encostaria na borda de cima da janela.
	 */
	.vt-institucional__coluna > [id] {
		scroll-margin-top: var(--vt-space-8);
	}

	/*
	 * O trilho entra ANTES da coluna no documento, e a razão é o celular: numa
	 * tela estreita ele vira o sumário no topo do documento legal — que é onde
	 * ele já estava e onde ele serve. No desktop a grade o coloca à direita
	 * por posição explícita, sem depender da ordem do HTML.
	 *
	 * 1024 px é o ponto em que a coluna de leitura ainda fica com ~700 px
	 * depois de descontar o trilho. Abaixo disso as duas colunas empilham.
	 *
	 * **À DIREITA, e não à esquerda como em `.vt-leitura`** (o sumário do
	 * artigo). Lá o trilho abre a linha porque a leitura começa depois de uma
	 * capa; aqui o título da página e o primeiro parágrafo precisam nascer na
	 * MESMA margem esquerda — é ela que o olho segue documento abaixo, e é o
	 * lado direito que estava vazio. Empurrar o texto para dentro deixaria o
	 * `h1` sozinho na margem e não resolveria o vão que o cliente apontou.
	 */
	@media (min-width: 1024px) {
		.vt-institucional__corpo {
			grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
			column-gap: var(--vt-space-16);
			align-items: start;
		}

		.vt-institucional__coluna {
			grid-column: 1;
			grid-row: 1;
		}

		/*
		 * `sticky` funciona aqui porque o trilho é item de grade com
		 * `align-items: start`: a linha tem a altura da COLUNA, e é essa
		 * diferença que dá curso ao trilho. Sem o `start` ele esticaria até o
		 * fim da linha e não teria para onde andar.
		 */
		.vt-institucional__rail {
			position: sticky;
			top: var(--vt-space-6);
			grid-column: 2;
			grid-row: 1;
			max-height: calc(100vh - var(--vt-space-12));
			overflow-y: auto;
			overscroll-behavior: contain;
		}
	}

	/* ── trilha (vive em `listagem.css`, que esta tela não carrega) ───── */

	.vt-trilha {
		margin-bottom: var(--vt-space-4);
		font-size: var(--vt-fs-sm);
	}

	.vt-trilha,
	.vt-trilha a,
	.vt-trilha li {
		color: var(--vt-texto-medio);
	}

	.vt-trilha a:hover {
		color: var(--vt-interacao);
	}

	.vt-trilha__lista {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-trilha__item + .vt-trilha__item::before {
		content: "\203a";
		margin-right: var(--vt-space-2);
		color: var(--vt-texto-fraco);
	}

	.vt-trilha__item [aria-current="page"] {
		font-weight: var(--vt-peso-medio);
		color: var(--vt-texto-forte);
	}

	/* ── a abertura ──────────────────────────────────────────────────── */

	.vt-institucional__topo {
		display: grid;
		gap: var(--vt-space-4);
	}

	.vt-institucional__eyebrow {
		margin: 0;
		color: var(--vt-confianca-texto);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-institucional__titulo {
		margin: 0;
		font-size: var(--vt-fs-3xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-display);
		line-height: var(--vt-lh-tight);
		color: var(--vt-texto-forte);
	}

	/*
	 * O lede é a frase que define a plataforma, e é a que as ferramentas de
	 * busca e os modelos de linguagem citam quando alguém pergunta "o que é o
	 * VitaTags". Entra grande, logo abaixo do título, sem nada entre os dois.
	 */
	.vt-institucional__lede {
		max-width: var(--vt-medida-institucional);
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xl);
		line-height: var(--vt-lh-compacta);
	}

	.vt-institucional__data {
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

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

	/*
	 * Irmã de `.vt-leitura__corpo`, em `conteudo.css`. O alvo é o ELEMENTO
	 * porque o conteúdo é texto corrido — parágrafo, título, lista, tabela —
	 * e não componente nomeado.
	 */
	.vt-prosa {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		line-height: var(--vt-lh-base);
	}

	/*
	 * A MEDIDA DE LEITURA ESTÁ NOS ELEMENTOS DE TEXTO, e não na caixa.
	 *
	 * Estava na caixa, e o preço aparecia na tabela de cookies: ela herdava os
	 * 68ch do parágrafo e ficava espremida numa coluna de texto, com rolagem
	 * horizontal própria e vão à direita. Quem tem medida de leitura é a
	 * LINHA; tabela, sumário e acordeão são blocos, e bloco preenche a coluna.
	 * É o que apoia a borda direita da página e faz a distribuição ler como
	 * composição, em vez de texto encolhido.
	 */
	.vt-prosa p,
	.vt-prosa ul,
	.vt-prosa ol,
	.vt-prosa h3,
	.vt-prosa blockquote {
		max-width: var(--vt-medida-institucional);
	}

	.vt-prosa h2 {
		max-width: var(--vt-coluna-institucional);
	}

	.vt-prosa > :first-child {
		margin-top: 0;
	}

	.vt-prosa > :last-child {
		margin-bottom: 0;
	}

	.vt-prosa p {
		margin: 0 0 var(--vt-space-5);
	}

	.vt-prosa h2 {
		margin: var(--vt-space-12) 0 var(--vt-space-4);
		font-size: var(--vt-fs-2xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-titulo);
		line-height: var(--vt-lh-titulo);
		color: var(--vt-texto-forte);
		scroll-margin-top: var(--vt-space-8);
	}

	.vt-prosa h3 {
		margin: var(--vt-space-8) 0 var(--vt-space-3);
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		line-height: var(--vt-lh-titulo);
		color: var(--vt-texto-forte);
		scroll-margin-top: var(--vt-space-8);
	}

	.vt-prosa a {
		color: var(--vt-interacao);
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}

	.vt-prosa ul,
	.vt-prosa ol {
		margin: 0 0 var(--vt-space-5);
		padding-inline-start: var(--vt-space-6);
	}

	.vt-prosa li {
		margin-bottom: var(--vt-space-2);
	}

	.vt-prosa li::marker {
		color: var(--vt-texto-fraco);
	}

	.vt-prosa strong {
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * A citação da lei. Não é ornamento retórico: é texto de terceiro dentro
	 * de um documento nosso, e a moldura serve para dizer onde a nossa voz
	 * termina.
	 */
	.vt-prosa blockquote {
		margin: var(--vt-space-6) 0;
		padding: var(--vt-space-4) var(--vt-space-5);
		border-inline-start: 3px solid var(--vt-confianca);
		background: var(--vt-superficie-2);
		border-radius: 0 var(--vt-radius-md) var(--vt-radius-md) 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-prosa blockquote p:last-child {
		margin-bottom: 0;
	}

	/* ── a tabela dos cookies ────────────────────────────────────────── */

	/*
	 * Tabela larga em coluna estreita rola dentro de si, e não empurra a
	 * página: o corpo do site nunca rola na horizontal.
	 */
	.vt-tabela {
		overflow-x: auto;
		margin: 0 0 var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
	}

	.vt-tabela table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--vt-fs-sm);
	}

	.vt-tabela th,
	.vt-tabela td {
		padding: var(--vt-space-3) var(--vt-space-4);
		text-align: start;
		vertical-align: top;
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-tabela thead th {
		background: var(--vt-superficie-2);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.vt-tabela tbody tr:last-child th,
	.vt-tabela tbody tr:last-child td {
		border-bottom: 0;
	}

	.vt-tabela code {
		font-size: var(--vt-fs-xs);
	}

	/* ── o caminho de volta do consentimento ─────────────────────────── */

	/*
	 * O bloco que substitui o balão fixo de cookies na `/politica-de-
	 * privacidade/`. Ele existe porque o balão do plugin, no celular, caía
	 * sobre a barra de ações do vTag — sobre o "Agendar".
	 *
	 * É um BLOCO, e não um link solto no meio do parágrafo, porque a lei
	 * promete que retirar o consentimento é tão fácil quanto dá-lo: o aceite
	 * foi dado num botão, e o de voltar atrás não pode ser uma palavra
	 * sublinhada escondida na terceira linha. Vai de borda a borda, como a
	 * tabela logo acima, e por isso apoia o lado direito da coluna em vez de
	 * deixar vão — ver a nota de composição no topo desta folha.
	 *
	 * O `pictore-cookies` no botão é gancho de comportamento, do plugin; a
	 * aparência é toda daqui. Se o plugin sair, o PHP não imprime o bloco.
	 */
	.vt-consentimento {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-4);
		margin: 0 0 var(--vt-space-6);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	/*
	 * `min-width: 0` porque o pai é flex: sem ele o texto usa `auto` como
	 * largura mínima, não encolhe, e empurra o botão para fora da caixa antes
	 * de a linha quebrar. A medida é medida no PRÓPRIO elemento, e é curta de
	 * propósito — é nota, não prosa.
	 */
	.vt-consentimento__texto {
		flex: 1 1 22rem;
		min-width: 0;
		max-width: 34ch;
	}

	.vt-consentimento__titulo {
		margin: 0 0 var(--vt-space-1);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	.vt-consentimento__nota {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
		line-height: var(--vt-lh-compacta);
	}

	/*
	 * O alvo é o mínimo da casa mesmo sendo botão de texto: esta é a ação de
	 * um direito, e ela não pode ser mais difícil de acertar do que as outras.
	 */
	.vt-consentimento__botao {
		flex: 0 0 auto;
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-2) var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
		font: inherit;
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		transition: color var(--vt-dur-rapida) var(--vt-ease-transf), border-color var(--vt-dur-rapida) var(--vt-ease-transf);
	}

	.vt-consentimento__botao:hover {
		color: var(--vt-interacao);
		border-color: var(--vt-interacao);
	}

	/*
	 * Numa tela estreita o texto e o botão viram duas linhas, e o botão passa
	 * a ocupar a largura: no toque, um alvo de borda a borda é mais fácil de
	 * acertar do que um retângulo encostado à direita.
	 */
	@media (max-width: 40rem) {
		.vt-consentimento__botao {
			flex-basis: 100%;
			width: 100%;
		}
	}

	/* ── os dois públicos, na `/sobre/` ──────────────────────────────── */

	/*
	 * Dois blocos lado a lado, e é a estrutura que carrega o argumento: o
	 * VitaTags atende duas pessoas com interesses diferentes, e dizer isso em
	 * dois blocos iguais é mais honesto do que uma seção só que tenta agradar
	 * às duas. Empilham no celular, na ordem do documento — o profissional
	 * primeiro, porque é quem chega aqui procurando decidir.
	 */
	.vt-publicos {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		gap: var(--vt-space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-publico {
		display: grid;
		gap: var(--vt-space-3);
		align-content: start;
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

	.vt-publico__titulo {
		margin: 0;
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		line-height: var(--vt-lh-titulo);
		color: var(--vt-texto-forte);
	}

	.vt-publico__tese {
		margin: 0;
		color: var(--vt-texto-medio);
	}

	.vt-publico__lista {
		display: grid;
		gap: var(--vt-space-3);
		margin: var(--vt-space-2) 0 0;
		padding: 0;
		list-style: none;
	}

	.vt-publico__lista li {
		padding-inline-start: var(--vt-space-6);
		position: relative;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	/*
	 * O marcador é desenhado, e não um `list-style`: precisa da cor de
	 * confiança e do alinhamento com a primeira linha do item, que muda de
	 * altura conforme o texto quebra.
	 */
	.vt-publico__lista li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: 0.55em;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--vt-confianca);
	}

	.vt-publico__lista b {
		display: block;
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	/* ── o que o VitaTags não é ──────────────────────────────────────── */

	/*
	 * Um bloco de NEGAÇÕES, e ele é a parte mais útil da página para quem
	 * chega sem saber o que é isto aqui. Um catálogo de saúde é confundido com
	 * agendador, com rede social e com lista de indicação paga — dizer o que
	 * não somos economiza a decepção de quem procurava outra coisa, e é o que
	 * um modelo de linguagem cita quando lhe perguntam a diferença.
	 */
	.vt-negacoes {
		display: grid;
		gap: var(--vt-space-4);
		margin: 0;
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-negacoes div {
		display: grid;
		gap: var(--vt-space-1);
	}

	.vt-negacoes dt {
		font-weight: var(--vt-peso-medio);
		color: var(--vt-texto-forte);
	}

	.vt-negacoes dd {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	/* ── perguntas frequentes ────────────────────────────────────────── */

	/*
	 * `<details>` de verdade, e não acordeão de JavaScript: abre sem script,
	 * é pesquisável pelo Ctrl+F do navegador em quase todos eles, e o
	 * conteúdo continua no HTML — que é o que importa para quem lê a página
	 * por robô.
	 */
	.vt-faq {
		display: grid;
		gap: var(--vt-space-2);
	}

	.vt-faq__item {
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

	.vt-faq__item[open] {
		background: var(--vt-superficie-2);
	}

	.vt-faq__pergunta {
		padding: var(--vt-space-4) var(--vt-space-5);
		cursor: pointer;
		font-weight: var(--vt-peso-medio);
		color: var(--vt-texto-forte);
		list-style: none;
		display: flex;
		gap: var(--vt-space-4);
		align-items: center;
		justify-content: space-between;
	}

	/* O triângulo padrão do WebKit não obedece `list-style`. */
	.vt-faq__pergunta::-webkit-details-marker {
		display: none;
	}

	/*
	 * O SINAL É DESENHADO, e não um caractere.
	 *
	 * Era `content: "+"` trocando para `"\2212"` no `[open]` — e `content` não
	 * anima: o sinal piscava de um glifo para o outro no meio de uma abertura
	 * que agora é suave, o que faz a transição parecer travada justamente no
	 * ponto para onde o olho foi. Duas barras cruzadas resolvem: abrir gira a
	 * vertical sobre a horizontal, e o "+" vira "−" no mesmo tempo do painel.
	 *
	 * `aria-hidden` no HTML porque o estado quem anuncia é o `<details>`; o
	 * sinal é a versão visível do que o leitor de tela já ouve.
	 */
	.vt-faq__marca {
		position: relative;
		flex: none;
		width: 0.875rem;
		height: 0.875rem;
		color: var(--vt-texto-fraco);
	}

	.vt-faq__marca::before,
	.vt-faq__marca::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 50%;
		height: 2px;
		margin-top: -1px;
		border-radius: 1px;
		background: currentcolor;
	}

	.vt-faq__marca::after {
		transform: rotate(90deg);
	}

	.vt-faq__item[open] .vt-faq__marca::after {
		transform: rotate(0deg);
	}

	@media (prefers-reduced-motion: no-preference) {
		.vt-faq__marca::after {
			transition: transform var(--vt-dur-media) var(--vt-ease-transf);
		}

		.vt-faq__item {
			transition: background-color var(--vt-dur-media) var(--vt-ease-transf);
		}
	}

	/*
	 * A altura do painel é animada pelo script (`institucional.js`), que
	 * escreve `height` e `overflow` no estilo do elemento e os apaga ao
	 * terminar. Aqui fica só o que vale sem script: quem chega sem JavaScript
	 * abre e fecha pelo comportamento nativo do `<details>`, instantâneo, e
	 * nada nesta folha depende disso.
	 */
	.vt-faq__resposta {
		padding: 0 var(--vt-space-5) var(--vt-space-5);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-base);
	}

	.vt-faq__resposta p {
		margin: 0 0 var(--vt-space-3);
	}

	.vt-faq__resposta p:last-child {
		margin-bottom: 0;
	}

	.vt-faq__resposta a {
		color: var(--vt-interacao);
	}

	/* ── canais de contato, medida de página ─────────────────────────── */

	/*
	 * A variante em BLOCO da peça que o rodapé usa em linha. Aqui o canal é o
	 * conteúdo da tela, então ganha cartão, rótulo em cima e valor grande.
	 */
	.vt-canais--bloco {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: var(--vt-space-4);
		margin: 0;
	}

	.vt-canais--bloco .vt-canal {
		display: grid;
		gap: var(--vt-space-1);
		align-content: start;
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

	.vt-canais--bloco .vt-canal__rotulo {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-canais--bloco .vt-canal__valor {
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-medio);
		color: var(--vt-texto-forte);
		overflow-wrap: anywhere;
	}

	/* ── o convite do fim ────────────────────────────────────────────── */

	/*
	 * A LINHA não é enfeite, e a razão está escrita no `.vt-convite` da Home:
	 * no escuro a superfície-3 é o poço (#020f21) contra o chão (#04162b) —
	 * quase o mesmo tom. Sem ela o painel não tem forma, some no fundo em vez
	 * de fechar a página. No claro ela desaparece sob o navy e não custa nada.
	 * Medido na tela em 09/09/2026, e é o mesmo defeito que a Home já tinha
	 * corrigido — copiar o bloco sem copiar a correção é como ele voltou.
	 */
	.vt-convite-final {
		display: grid;
		gap: var(--vt-space-4);
		padding: var(--vt-space-8);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
	}

	.vt-convite-final__titulo {
		margin: 0;
		font-size: var(--vt-fs-2xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-titulo);
		line-height: var(--vt-lh-titulo);
		color: var(--vt-texto-sobre-3);
	}

	.vt-convite-final p {
		margin: 0;
		max-width: var(--vt-medida-institucional);
		color: var(--vt-texto-sobre-3);
		opacity: 0.85;
	}

	.vt-convite-final__acoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		margin-top: var(--vt-space-2);
	}

	/*
	 * Os botões são declarados aqui porque esta folha não carrega
	 * `listagem.css`, que é onde `.vt-acao` mora. São dois, e vivem sobre a
	 * superfície escura — o que os torna um caso próprio de qualquer jeito:
	 * o primário sobre navy precisa ser o mint, e não o navy de novo.
	 */
	.vt-convite-final__botao {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--vt-alvo-toque);
		padding: 0 var(--vt-space-5);
		border-radius: var(--vt-radius-md);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		border: 1px solid transparent;
	}

	.vt-convite-final__botao--primario {
		background: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	.vt-convite-final__botao--secundario {
		border-color: currentcolor;
		color: var(--vt-texto-sobre-3);
	}

	.vt-convite-final__botao:hover {
		opacity: 0.9;
	}

	/* ── o índice do trilho ──────────────────────────────────────────── */

	/*
	 * Era `.vt-sumario-legal`, e vivia empilhado entre o título e o texto: uma
	 * caixa de 14 linhas que o leitor rolava para PASSAR, e que sumia da tela
	 * no parágrafo seguinte — justamente quando ele começa a servir. No trilho
	 * ele fica visível o documento inteiro, marca onde a leitura está e passou
	 * a atender também a `/sobre/`, que não é documento legal. Daí o nome
	 * novo: `vt-sumario-legal` mentiria em metade dos usos.
	 *
	 * Continua sendo uma lista de âncoras — sem estado que só o script
	 * conheça. O destaque do item atual é ENFEITE FUNCIONAL: sem JavaScript o
	 * índice não deixa de existir, só não sabe dizer onde você está.
	 */
	.vt-indice {
		padding: var(--vt-space-5) var(--vt-space-5) var(--vt-space-5) var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-indice__titulo {
		margin: 0 0 var(--vt-space-3);
		padding-inline-start: var(--vt-space-4);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-indice__lista {
		display: grid;
		gap: var(--vt-space-1);
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: vt-secao;
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O item carrega a régua, e não a lista: é ele que troca de cor quando
	 * vira o atual, e uma régua na lista não teria como marcar um item só.
	 */
	.vt-indice__item {
		counter-increment: vt-secao;
		border-inline-start: 2px solid var(--vt-linha);
	}

	.vt-indice__lista--numerada .vt-indice__link::before {
		content: counter(vt-secao) ". ";
		color: var(--vt-texto-fraco);
		font-variant-numeric: tabular-nums;
	}

	.vt-indice__link {
		display: block;
		padding: var(--vt-space-2) var(--vt-space-3);
		color: var(--vt-texto-medio);
		text-decoration: none;
		line-height: var(--vt-lh-compacta);
	}

	.vt-indice__link:hover,
	.vt-indice__link:focus-visible {
		color: var(--vt-interacao);
	}

	/*
	 * Azul, e não mint: pelo vocabulário da §6.1 o mint é confiança
	 * verificada — a moeda — e o azul é interação, item selecionado. Um
	 * sumário que marcasse a seção atual em mint estaria gastando a moeda para
	 * dizer "você está aqui".
	 */
	.vt-indice__item.is-atual {
		border-inline-start-color: var(--vt-interacao);
	}

	.vt-indice__item.is-atual .vt-indice__link {
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	/* ── atalhos do trilho ───────────────────────────────────────────── */

	/*
	 * A peça do trilho que NÃO é índice: na `/contato/` ela leva aos dois
	 * caminhos que a pessoa resolve sozinha e às duas páginas legais. Mesmo
	 * desenho do índice, sem numeração e sem estado — não há seção para
	 * marcar, são destinos de outra tela.
	 */
	.vt-atalhos {
		display: grid;
		gap: var(--vt-space-3);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-atalhos__titulo {
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-atalhos__lista {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--vt-fs-sm);
	}

	.vt-atalhos__lista a {
		color: var(--vt-texto-medio);
		text-decoration: none;
	}

	.vt-atalhos__lista a:hover,
	.vt-atalhos__lista a:focus-visible {
		color: var(--vt-interacao);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.vt-atalhos__nota {
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		line-height: var(--vt-lh-compacta);
	}

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

	/*
	 * ROLAGEM SUAVE, e só nestas telas. `scroll-behavior` no `html` vale para
	 * o documento inteiro e para todo `scrollIntoView()` de script — a área da
	 * conta tem os seus, calculados com `--vt-topo`, e mudar a rolagem debaixo
	 * deles seria alterar uma tela que ninguém pediu para alterar. O `:has()`
	 * prende a regra à existência de um `.vt-institucional` na página.
	 *
	 * `prefers-reduced-motion` é condição de entrada, não remendo: quem pediu
	 * menos movimento ao sistema recebe o salto instantâneo, que é o
	 * comportamento nativo da âncora.
	 */
	@media (prefers-reduced-motion: no-preference) {
		html:has(.vt-institucional) {
			scroll-behavior: smooth;
		}
	}
}