/*
 * A Home — o portão (§07 do blueprint).
 *
 * Terceira folha do V2 escrita só em PAPÉIS, o que traz o tema escuro para a
 * Home junto. Em @layer componente, portanto vence `vtag.css`, que ainda é
 * `legado`.
 *
 * Nasce pequena de propósito. Quase nada desta tela é só desta tela: o card,
 * o botão, as especialidades e o seletor de cidade vivem em `listagem.css`, e
 * `.vt-secao` e `.vt-chip` continuam no legado porque aparecem em 18 templates,
 * a área da conta inclusive. O que é exclusivamente da Home são quatro blocos:
 * o portão, o contexto de cidade, a faixa de conteúdo e o convite.
 *
 * `.vt-hero*` e `.vt-chamada*` saíram do legado no mesmo commit que criou esta
 * folha: não foram migrados, foram SUBSTITUÍDOS. O herói de promessa virou o
 * portão de evidência e a chamada de voucher virou o convite ao profissional —
 * migrar o desenho antigo seria migrar duas vezes.
 *
 * Depende de `listagem.css`: o botão e o card moram lá, e esta folha só
 * especializa o que o contexto da Home exige.
 */

@layer componente {
	/* ── 0. o compasso ──────────────────────────────────────────────── */

	/*
	 * ESPAÇAMENTO SEPARA CONCEITOS, NÃO COMPONENTES. Antes desta etapa toda
	 * seção da Home valia 48 px de vão, e o mesmo respiro separava a fileira
	 * de chips de Cidades (78 px de altura) da faixa editorial (754 px). O
	 * defeito não era o número: era não haver escala nenhuma.
	 *
	 * Três degraus, e o que decide qual usar é o PAPEL da fronteira — nunca a
	 * altura do bloco. Uma seção alta não merece mais margem por ser alta.
	 *
	 *   proximo  (32)  pertencem à mesma unidade de leitura
	 *   secao    (48)  separação normal entre seções da mesma camada
	 *   capitulo (64)  muda a camada: outro contexto, outra natureza
	 *
	 * O vão é declarado na FRONTEIRA — `margin-top` de quem começa o grupo —
	 * porque quem tem significado é a fronteira, não a seção. Por isso as
	 * margens verticais dos filhos são zeradas aqui: sem isso o
	 * `margin: 3rem 0` que `listagem.css` dá a `.vt-secao` colapsaria com o
	 * degrau, e um vão de 32 nunca aconteceria.
	 *
	 * Nenhum token novo em `tokens.css`: os três valores já existem na escala
	 * de espaço, e os apelidos ficam aqui, no escopo da Home, para não pesar
	 * no CSS crítico de toda tela.
	 */
	.vt-home {
		--vt-ritmo-proximo: var(--vt-space-8);
		--vt-ritmo-secao: var(--vt-space-12);
		--vt-ritmo-capitulo: var(--vt-space-16);
	}

	.vt-home > * {
		margin-block: 0;
	}

	.vt-home > * + * {
		margin-top: var(--vt-ritmo-secao);
	}

	.vt-home > .vt-ritmo--proximo {
		margin-top: var(--vt-ritmo-proximo);
	}

	.vt-home > .vt-ritmo--capitulo {
		margin-top: var(--vt-ritmo-capitulo);
	}

	/*
	 * O TÍTULO DE CAPÍTULO, e só na Home.
	 *
	 * `.vt-secao__titulo` é micro em caixa alta — o mesmo desenho, pixel a
	 * pixel, de `.vt-publicacao__tipo`, a etiqueta DENTRO do card: 12 px,
	 * peso 700, tracking 1,32 px, mesma cor. O capítulo que abria a seção e o
	 * rótulo de um item dentro dela liam igual, e o título do card (18 px)
	 * era maior que os dois.
	 *
	 * A correção é por MODIFICADOR e não na classe compartilhada. Medido: as
	 * listagens e o Explorar não usam esta classe (têm `.vt-listagem__titulo`,
	 * `.vt-uf__titulo` e `.vt-grupo__titulo`); quem a usa fora da Home é o
	 * vTag e a área da conta — o legado que ainda não migrou. Sem o
	 * modificador, os dois seguem exatamente como estão.
	 *
	 * 22 px e não 28: em 28 empataria com `.vt-convite__titulo`, que é peça de
	 * fechamento e não capítulo. A escala fica contínua — 12 etiqueta,
	 * 18 item, 22 capítulo, 28 fechamento, 64 abertura.
	 */
	.vt-secao--capitulo > .vt-secao__titulo {
		margin-bottom: var(--vt-space-6);
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-titulo);
		line-height: var(--vt-lh-titulo);
		letter-spacing: var(--vt-track-titulo);
		text-transform: none;
		color: var(--vt-texto-forte);
	}

	/* ── 1. o portão ────────────────────────────────────────────────── */

	/*
	 * Duas colunas no desktop: o que se diz à esquerda, quem já está aqui à
	 * direita. No celular a fala vem primeiro — a evidência sem a frase é uma
	 * grade de rostos sem explicação.
	 */
	.vt-portao {
		display: grid;
		gap: var(--vt-space-8);
		align-items: center;
		padding-block: var(--vt-space-12) var(--vt-space-16);
		border-bottom: 1px solid var(--vt-linha);
	}

	/*
	 * A proporção virou 6/5 — a fala ganhou a coluna maior, e não a evidência.
	 *
	 * Era 5/6, e a conta não fechava: com 5/11 de 1200px o título de display
	 * quebrava em cinco linhas e empurrava a busca para o terço de baixo da
	 * primeira dobra. Com a busca sendo a ação principal da Home (§09), o que
	 * chega primeiro ao olho precisa ser o que se quer que seja usado.
	 *
	 * O corpo do título não mudou: ele é o `--vt-fs-display` do sistema, e
	 * mexer nele seria mexer na identidade para resolver um problema de
	 * composição. Quem cedeu foi a coluna.
	 */
	@media (min-width: 1024px) {
		.vt-portao {
			grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
			gap: var(--vt-space-12);
		}
	}

	.vt-portao__dizer {
		min-width: 0;
	}

	/*
	 * A medida abriu de 18ch para 24ch nesta etapa, e é uma decisão de
	 * COMPOSIÇÃO, não de tipografia: em 18ch o título ocupava cinco linhas e
	 * empurrava a busca para baixo da metade da primeira dobra. A busca é a
	 * ação principal da Home; o título é o que a explica. Quem chega primeiro
	 * ao olho tem de ser quem se quer que seja usado.
	 */
	.vt-portao__titulo {
		margin: 0;
		max-width: 24ch;
		font-size: var(--vt-fs-display);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-display);
		line-height: var(--vt-lh-tight);
		color: var(--vt-texto-forte);
		text-wrap: balance;
	}

	/*
	 * A escala em números, estáticos. O blueprint proíbe contador animado, que
	 * é o disfarce de quando não há o que contar: aqui há, e o número parado
	 * diz mais do que o número subindo.
	 */
	/* ── a busca do portão ──────────────────────────────────────────── */

	/*
	 * O mesmo componente do cabeçalho, em escala de display. O que muda não é
	 * o desenho — é o PORTE e a companhia: aqui ele tem a linha inteira, o
	 * corpo de leitura, o canto de controle do sistema de formulários em vez
	 * do formato de pílula do cabeçalho, e a escala do catálogo logo abaixo.
	 *
	 * O canto é a decisão que mais separa os dois: na barra navy o campo é uma
	 * pílula porque flutua sobre uma superfície cheia; aqui ele é um controle
	 * apoiado na página, e controle no VitaTags tem `--vt-radius-sm`, como todo
	 * campo e todo botão desde o sistema de formulários.
	 */
	.vt-busca-rapida--portao {
		max-width: 34rem;
		margin-top: var(--vt-space-8);
	}

	.vt-busca-rapida--portao .vt-busca-rapida__campo {
		border-radius: var(--vt-radius-sm);
		border: 1px solid var(--vt-linha-forte);
		background: var(--vt-superficie-1);
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-busca-rapida--portao .vt-busca-rapida__campo:focus-within {
		border-color: var(--vt-interacao);
		box-shadow: none;
	}

	.vt-busca-rapida--portao .vt-busca-rapida__campo input {
		padding: var(--vt-space-4) var(--vt-space-5);
		font-size: var(--vt-fs-lg);
	}

	.vt-busca-rapida--portao .vt-busca-rapida__enviar {
		padding-inline: var(--vt-space-5);
	}

	.vt-busca-rapida--portao .vt-busca-rapida__enviar svg {
		width: 20px;
		height: 20px;
	}

	/* A lista de sugestões acompanha o canto do campo: um painel arredondado
	   pendurado num controle reto é a costura aparecendo. */
	.vt-busca-rapida--portao .vt-busca-rapida__sugestoes {
		border-radius: var(--vt-radius-sm);
	}

	.vt-busca-rapida--portao .vt-busca-rapida__sugestao a {
		padding: var(--vt-space-3) var(--vt-space-4);
		font-size: var(--vt-fs-base);
	}

	/* ── a escala, que também é a porta ─────────────────────────────── */

	/*
	 * A mesma gramática da ficha do card: valor, rótulo, ponto separador,
	 * algarismos tabulares. É de propósito — o card e o portão falam da mesma
	 * coisa, um catálogo, e devem falar do mesmo jeito.
	 */
	.vt-portao__escala {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vt-space-2) var(--vt-space-3);
		margin: var(--vt-space-6) 0 0;
		padding: 0;
		list-style: none;
	}

	.vt-portao__eixo:not(:last-child)::after {
		content: "·";
		margin-inline-start: var(--vt-space-3);
		color: var(--vt-linha-forte);
	}

	.vt-portao__link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--vt-space-2);
		color: var(--vt-texto-medio);
		text-decoration: none;
		border-bottom: 1px solid transparent;
	}

	/*
	 * O sublinhado aparece no hover, e só sob o rótulo: sublinhar o número
	 * junto tiraria dele a leitura de dado. É a mesma ideia do card — o
	 * algarismo é valor, não texto de link.
	 */
	.vt-portao__link:hover .vt-portao__rotulo,
	.vt-portao__link:focus-visible .vt-portao__rotulo {
		color: var(--vt-interacao);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/*
	 * "mais de" é qualificador, não valor: entra menor, em peso de texto e na
	 * cor média, para que o algarismo continue sendo a coisa que se lê. Sem
	 * isso ele competiria com o número em tamanho de display e a escala
	 * passaria a se ler como uma frase.
	 */
	.vt-portao__prefixo {
		font-size: var(--vt-fs-sm);
		color: var(--vt-texto-medio);
		margin-inline-end: calc(var(--vt-space-2) * -0.5);
	}

	.vt-portao__numero {
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-sub);
		color: var(--vt-texto-forte);
		font-variant-numeric: tabular-nums;
	}

	.vt-portao__rotulo {
		font-size: var(--vt-fs-sm);
	}

	/* ── a composição de gente ───────────────────────────────────────── */

	/*
	 * Grade de rostos, não carrossel: o carrossel esconde a maior parte do que
	 * deveria provar escala, e é uma das três coisas que o blueprint barra.
	 * Duas colunas no celular, quatro a partir do tablet — oito pessoas leem
	 * como "muita gente" sem virar parede.
	 */
	/*
	 * No celular os rostos são uma FAIXA que rola, não uma grade.
	 *
	 * Em duas colunas eles ocupavam três filas — cerca de 450 px — entre a
	 * busca e o primeiro conteúdo real, empurrando os destaques para depois da
	 * terceira dobra. Eles são evidência de que há gente no catálogo, e
	 * evidência não precisa de meia tela: precisa ser vista.
	 *
	 * A faixa é o mesmo mecanismo dos eixos do cabeçalho, e isso é de propósito
	 * — no celular, "há mais coisa para o lado" passou a ser um gesto só no
	 * produto inteiro.
	 */
	.vt-portao__gente {
		display: flex;
		gap: var(--vt-space-5);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	}

	.vt-portao__gente::-webkit-scrollbar {
		display: none;
	}

	.vt-rosto {
		flex: none;
		width: 6.5rem;
	}

	/*
	 * TRÊS colunas, e não quatro. São seis rostos: em quatro colunas eles caem
	 * em 4+2, e uma fila órfã na primeira dobra é a primeira coisa que a página
	 * diz sobre o cuidado com que foi montada. Em três, duas filas cheias.
	 */
	/*
	 * A partir do tablet a faixa volta a ser grade: ali há largura para as duas
	 * filas cheias, e a grade lê melhor que uma fila longa. TRÊS colunas, e não
	 * quatro — são seis rostos, e em quatro eles caem em 4+2. Fila órfã na
	 * primeira dobra é a primeira coisa que a página diz sobre o cuidado com
	 * que foi montada.
	 */
	@media (min-width: 600px) {
		.vt-portao__gente {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--vt-space-6) var(--vt-space-4);
			overflow: visible;
			mask-image: none;
		}

		.vt-rosto {
			width: auto;
		}
	}

	/*
	 * Os rostos NÃO são cards, e deixaram de ser desenhados como tal.
	 *
	 * Cada um estava dentro de uma caixa com borda, fundo e raio — o mesmo
	 * desenho do card de profissional. O efeito era que, antes de a primeira
	 * dobra terminar, o visitante já tinha visto seis cartões; quando chegava
	 * em "Em destaque", onde o card significa alguma coisa, o cartão já tinha
	 * perdido o significado.
	 *
	 * Aqui eles são EVIDÊNCIA: gente que já está no catálogo. Uma faixa de
	 * retratos prova isso melhor que uma grade de caixas, e devolve ao card o
	 * papel dele. O que sinaliza que são links é o retrato acender no hover —
	 * o mesmo gesto do card, sem a moldura.
	 */
	.vt-rosto__link {
		display: grid;
		justify-items: center;
		gap: var(--vt-space-2);
		height: 100%;
		padding: var(--vt-space-2) var(--vt-space-1);
		border: 0;
		background: none;
		color: var(--vt-texto-forte);
		text-align: center;
		text-decoration: none;
	}

	.vt-rosto__retrato {
		transition: box-shadow var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-rosto__link:hover .vt-rosto__retrato,
	.vt-rosto__link:focus-visible .vt-rosto__retrato {
		box-shadow: 0 0 0 2px var(--vt-interacao);
	}

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

	.vt-rosto__retrato {
		display: grid;
		place-items: center;
		width: 4.5rem;
		height: 4.5rem;
		border-radius: var(--vt-radius-full);
		overflow: hidden;
		background: var(--vt-superficie-2);
	}

	.vt-rosto__foto {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* §6.8: a foto ausente vira monograma, que declara a ausência em vez de
	   disfarçá-la com ilustração genérica. */
	.vt-rosto__monograma {
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-sub);
		color: var(--vt-texto-fraco);
	}

	.vt-rosto__nome {
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		line-height: var(--vt-lh-titulo);
		text-wrap: balance;
	}

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

	/* ── 2. o contexto de cidade ─────────────────────────────────────── */

	/*
	 * Primeira posição depois do portão, porque é a premissa de tudo o que vem
	 * abaixo: a cidade decide quais perfis a Home mostra, e até aqui ela era
	 * invisível. Fechado por padrão para não competir com o portão; abre no
	 * clique, sem script.
	 */
	/*
	 * Sem margem própria: quem separa é o compasso lá em cima. A faixa recebe
	 * `--proximo` porque é a premissa do portão, não uma seção à parte — e uma
	 * margem declarada aqui venceria o degrau por vir depois na folha.
	 */

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

	.vt-contexto__resumo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-3);
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-3) var(--vt-space-4);
		cursor: pointer;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-contexto__resumo::-webkit-details-marker {
		display: none;
	}

	.vt-contexto__resumo::marker {
		content: "";
	}

	.vt-contexto__cidade {
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-titulo);
	}

	/* "trocar" é interação, e interação é azul — a única cor que pode dizer
	   "clique aqui" neste sistema (§6.1). */
	.vt-contexto__trocar {
		margin-left: auto;
		color: var(--vt-interacao);
		text-decoration: underline;
	}

	.vt-contexto__caixa[open] .vt-contexto__resumo {
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-contexto__caixa .vt-filtro-cidade {
		padding: var(--vt-space-4);
	}

	/* ── 5. a faixa de conteúdo ──────────────────────────────────────── */

	/*
	 * A camada de conteúdo não ganha cor própria — o céu do logo não entra na
	 * interface (§6.1). Ela se distingue por TRATAMENTO: superfície própria,
	 * régua no topo e mais respiro. É o que o briefing chama de refinamento
	 * editorial; pintar a seção de azul-claro seria o contrário disso.
	 */
	.vt-conteudo {
		padding-block: var(--vt-space-8);
		border-top: 1px solid var(--vt-linha);
	}

	/* O CARD da publicação mora em `listagem.css`: a Home e o Explorar usam
	   os dois, e duas cópias do mesmo desenho é como o `.vt-acao` chegou a
	   três. Aqui fica só a seção que o envolve. */

	/* ── 7. o convite ────────────────────────────────────────────────── */

	/*
	 * O único bloco preenchido da tela, e no fim: "uma vez, sem urgência". Usa
	 * a superfície-3, que é navy no claro e o poço no escuro — o mesmo papel
	 * do cabeçalho, e portanto legível nos dois temas sem regra extra.
	 */
	/* ── 6.5. o resumo institucional ─────────────────────────────────── */

	/*
	 * Quieto de propósito. Ele vem imediatamente antes do convite, que é um
	 * painel escuro centralizado — dois blocos de destaque seguidos anulam um
	 * ao outro, e o que a página precisa aqui é de explicação, não de mais um
	 * chamado. Texto na medida de leitura, alinhado à esquerda como o resto da
	 * página, e um link que se lê como link.
	 */
	/*
	 * A grade do resumo. Fora do desktop é uma coluna só, e a ficha vem
	 * depois do texto — que é a ordem do documento e a ordem em que se lê:
	 * primeiro o que a plataforma é, depois o que ela não é.
	 *
	 * 1.7fr / 1fr põe a linha de texto em ~690 px, que em corpo `lg` dá 74
	 * caracteres — o teto da faixa confortável, e não além dele. A medida
	 * saiu do parágrafo e passou a ser a COLUNA: com a ficha ao lado, quem
	 * segura a linha é a grade, e um `max-width` a mais ali só devolveria o
	 * vão que este bloco existe para fechar.
	 */
	.vt-resumo__grade {
		display: grid;
		gap: var(--vt-space-8);
	}

	@media (min-width: 900px) {
		.vt-resumo__grade {
			grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
			column-gap: var(--vt-space-12);
			align-items: start;
		}
	}

	.vt-resumo__texto {
		margin: 0 0 var(--vt-space-4);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-lg);
		line-height: var(--vt-lh-base);
	}

	.vt-resumo__mais {
		color: var(--vt-interacao);
		font-weight: var(--vt-peso-medio);
		text-underline-offset: 3px;
	}

	/*
	 * A ficha é RECUADA, não elevada: superfície-2 e régua, como todo bloco
	 * recuado do sistema. Ela não disputa com o convite escuro que vem logo
	 * abaixo — dois blocos de destaque seguidos anulam um ao outro, que é a
	 * regra que este trecho da Home já seguia antes de ganhar a segunda
	 * coluna.
	 */
	.vt-resumo__ficha {
		display: grid;
		gap: var(--vt-space-4);
		justify-items: start;
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-logo--ficha {
		height: 1.5rem;
		color: var(--vt-texto-forte);
	}

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

	/*
	 * O marcador é um TRAÇO, e não o ponto da lista de qualidades da
	 * `/sobre/`: ali cada item soma, aqui cada item subtrai. É a diferença
	 * dita pelo desenho, sem precisar de um ícone novo — o vocabulário do
	 * catálogo é fechado em seis, e nenhum deles significa "não".
	 */
	.vt-resumo__negacoes li {
		position: relative;
		padding-inline-start: var(--vt-space-6);
		color: var(--vt-texto-medio);
		font-weight: var(--vt-peso-medio);
		line-height: var(--vt-lh-compacta);
	}

	.vt-resumo__negacoes li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: 0.62em;
		width: 0.75rem;
		height: 2px;
		border-radius: 1px;
		background: var(--vt-linha-forte);
	}

	.vt-resumo__afirmacao {
		margin: 0;
		padding-top: var(--vt-space-4);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	.vt-convite {
		display: grid;
		justify-items: center;
		gap: var(--vt-space-4);
		padding: var(--vt-space-12) var(--vt-space-8);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		/* No escuro a superfície-3 é o poço (#020f21) contra o chão (#04162b):
		   quase o mesmo tom. Sem a linha, o painel não tem forma — some no
		   fundo em vez de fechar a página. No claro a linha desaparece sob o
		   navy, e não custa nada. */
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		text-align: center;
	}

	.vt-convite__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-confianca);
		text-transform: none;
		text-wrap: balance;
	}

	.vt-convite__texto {
		margin: 0;
		max-width: 52ch;
		color: var(--vt-texto-sobre-3);
		line-height: var(--vt-lh-base);
	}

	.vt-convite__acoes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--vt-space-3);
		margin: var(--vt-space-2) 0 0;
	}

	/*
	 * Dentro do bloco preenchido o botão primário navy sumiria no claro — é
	 * navy sobre navy. Ele vira mint aqui, nos dois temas, e a ação secundária
	 * fica de contorno claro. É a mesma correção que `.vt-chamada .vt-acao`
	 * fazia no legado; muda só o nome do bloco.
	 */
	.vt-convite__acoes .vt-acao {
		display: inline-flex;
		padding-inline: var(--vt-space-8);
		border-color: var(--vt-texto-sobre-3);
		background: none;
		color: var(--vt-texto-sobre-3);
	}

	/*
	 * Os três seletores não são exagero — são o preço de uma disputa que só
	 * aparece no navegador, e apareceu.
	 *
	 * `listagem.css` faz o primário depender do tema com
	 * `:root[data-vt-tema="auto"] .vt-acao--primaria` (0,3,0), e dentro de
	 * `@media (prefers-color-scheme: light)` isso o pinta de `--vt-superficie-3`,
	 * que é navy. As duas folhas estão na MESMA camada, então quem decide é a
	 * especificidade — e `.vt-convite__acoes .vt-acao--primaria` (0,2,0) perde.
	 * Resultado no claro: botão navy sobre o painel navy do convite, invisível.
	 * No escuro passava, porque lá os dois queriam mint e o erro não aparecia.
	 *
	 * O painel é navy nos DOIS temas, então o botão dentro dele é mint nos dois,
	 * sem condicional — e precisa dizer isso com especificidade suficiente para
	 * vencer a versão condicional que vem de baixo.
	 *
	 * (A raiz é `listagem.css` usar `:root[...]` num componente de base. Trocar
	 * aquilo é refatoração de outra etapa; está anotado no doc.)
	 */
	:root[data-vt-tema="auto"] .vt-convite__acoes .vt-acao--primaria,
	:root[data-vt-tema="escuro"] .vt-convite__acoes .vt-acao--primaria,
	.vt-convite__acoes .vt-acao--primaria {
		background: var(--vt-confianca);
		border-color: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	.vt-convite__acoes .vt-acao:hover,
	.vt-convite__acoes .vt-acao:focus-visible {
		background: var(--vt-superficie-1);
		border-color: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
	}
}