/*
 * A tela do vTag de profissional.
 *
 * Primeira folha do V2 escrita inteiramente em PAPÉIS (`--vt-superficie-*`,
 * `--vt-texto-*`, `--vt-confianca`, `--vt-interacao`) e não em primitivos — é
 * por isso que esta é a primeira tela que suporta tema escuro. Nenhuma cor
 * literal aqui: se aparecer uma, o escuro quebra nela.
 *
 * Tudo em @layer componente, para não brigar com `vtag.css`, que ainda é sem
 * camada e continua vencendo onde as duas se encontram.
 */

@layer componente {
	/* A trilha ainda vem da camada `legado`, que a pinta com primitivos. */
	.vt-trilha,
	.vt-trilha a,
	.vt-trilha li {
		color: var(--vt-texto-medio);
	}

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

	/* ── chassi ─────────────────────────────────────────────────────── */

	.vt-main--perfil {
		max-width: 64rem;
		margin-inline: auto;
		padding-inline: var(--vt-space-4);
		padding-bottom: var(--vt-space-16);
	}

	.vt-perfil {
		container-type: inline-size;
	}

	/*
	 * Precisa ser declarado aqui: `vtag.css` tem um `.vt-perfil__topo` da
	 * Fase 3 que dispunha foto e nome lado a lado, e sem esta regra a camada
	 * `legado` mandaria nele — os blocos sairiam em linha em vez de empilhados.
	 */
	/*
	 * Precisa declarar `text-align` mesmo querendo o padrão.
	 *
	 * `vtag.css` tem `.vt-perfil__topo { text-align: center }` do desenho
	 * antigo, e @layer só vence onde HÁ CONCORRENTE: a propriedade que a folha
	 * nova não declara passa do legado direto, sem disputa. Foi a terceira vez
	 * que isso mordeu nesta migração — antes foi o `display` daqui e o
	 * `background` do `.vt-card__link`.
	 *
	 * A regra que sai disso: ao migrar uma tela, declarar TODA propriedade que
	 * a folha antiga declarava para aquele seletor, inclusive as que se quer
	 * no valor padrão.
	 */
	.vt-perfil__topo {
		display: block;
		text-align: start;
	}

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

	/*
	 * Duas colunas quando HÁ TRILHO — e a pergunta é essa, não o estado.
	 *
	 * A regra keyava em `.is-ideal`/`.is-completo`, apoiada numa premissa que
	 * valeu enquanto só o profissional usava esta folha: "o motor já garante
	 * que não há trilho abaixo de Ideal". Verdade, mas a recíproca é falsa — a
	 * clínica (etapa 7) chega a Completo e **não tem trilho nenhum**, porque
	 * nenhum bloco dela pede a lateral. O resultado foi a tela inteira caber
	 * nos 18rem da primeira coluna: bio, equipe, endereço e links espremidos
	 * numa faixa estreita, com dois terços da largura vazios ao lado.
	 *
	 * `:has()` pergunta o que a regra sempre quis saber. Onde ele não existe, a
	 * regra inteira cai e a tela fica em uma coluna — que é legível, e é o
	 * mesmo tipo de degradação que o colapso da bio já usa: mostrar tudo numa
	 * coluna nunca é o erro.
	 */
	@media (min-width: 900px) {
		.vt-perfil__corpo:has(.vt-perfil__trilho) {
			grid-template-columns: 18rem minmax(0, 1fr);
			gap: var(--vt-space-12);
			align-items: start;
		}

		.vt-perfil__trilho {
			position: sticky;
			top: var(--vt-space-6);
			display: grid;
			gap: var(--vt-space-6);
		}
	}

	/*
	 * O RITMO ENTRE SEÇÕES, e por que ele estava em 128 px.
	 *
	 * A conta era acidental: `listagem.css` dá `margin: 48px 0` a toda
	 * `.vt-secao` — escrita para o fluxo normal, onde margens vizinhas
	 * COLAPSAM e 48 + 48 dá 48 — e aqui o container é `grid`, onde não há
	 * colapso nenhum. Somava 48 + 32 de `gap` + 48 = **128 px** entre uma
	 * seção e a seguinte, quase o dobro do capítulo da Home.
	 *
	 * Numa grade a fronteira é o `gap`, e é o único lugar onde o espaço deve
	 * ser declarado — a margem da seção vai a zero. O valor é o mesmo da
	 * escala fechada no bloco C da etapa 12: 32 próximo, 48 seção, 64
	 * capítulo. Seções irmãs do vTag são seção: **48**.
	 */
	.vt-perfil__principal {
		display: grid;
		gap: var(--vt-space-12);
		min-width: 0;
	}

	/*
	 * `min-width: 0` porque as duas colunas são grades, e item de grade nasce
	 * com o mínimo intrínseco do que está dentro: basta uma seção com grade
	 * interna, tabela ou código longo para a coluna inteira crescer além da
	 * tela em vez de o conteúdo se ajustar.
	 */
	.vt-perfil__principal > .vt-secao,
	.vt-perfil__trilho > .vt-secao {
		margin-block: 0;
		min-width: 0;
	}

	/*
	 * O PAR: a apresentação e a ficha de atendimento, lado a lado.
	 *
	 * Só onde NÃO há trilho — que é o caso de toda clínica hoje. Ali a coluna
	 * principal tem a largura inteira, e dois blocos a desperdiçavam de formas
	 * opostas: o "Sobre" respeita a medida de leitura (64ch ≈ 593 px) e deixava
	 * 399 px vazios à direita; os horários gastavam mil pixels para mostrar
	 * "Segunda a sexta, 08:00–18:00". Emparelhados, cada um resolve o vazio do
	 * outro, e a medida do texto não precisa ser esticada além do legível.
	 *
	 * A proporção 1.6/1 não é arbitrária: numa principal de 992 px ela dá 590
	 * à esquerda, que é exatamente a medida da bio — o texto ocupa a coluna
	 * inteira em vez de deixar sobra dentro dela.
	 *
	 * O par só se forma quando os dois existem e estão adjacentes (`+`), e é o
	 * peso dos blocos que garante a adjacência. Sem o segundo, a regra não
	 * casa e o "Sobre" volta a ocupar a linha inteira — a ausência de dados
	 * altera a composição, não a destrói.
	 */
	@media (min-width: 900px) {
		.vt-perfil__corpo:not(:has(> .vt-perfil__trilho)) .vt-perfil__principal:has(> .vt-secao--bio + .vt-secao--atendimento) {
			grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
			/* 48 e não 32: com o gap curto os dois blocos liam como um bloco
			   só de texto em duas colunas — e são coisas de naturezas
			   diferentes, uma escrita pela clínica sobre si mesma e outra
			   conferível. A distância é o primeiro sinal de que são duas. */
			column-gap: var(--vt-space-12);
		}

		/* Todo o resto continua ocupando a faixa inteira. */
		.vt-perfil__corpo:not(:has(> .vt-perfil__trilho)) .vt-perfil__principal > .vt-secao {
			grid-column: 1 / -1;
		}

		.vt-perfil__corpo:not(:has(> .vt-perfil__trilho)) .vt-perfil__principal > .vt-secao--bio:has(+ .vt-secao--atendimento) {
			grid-column: 1;
		}

		/*
		 * A ficha ganha MOLDURA quando está no par.
		 *
		 * Distância sozinha não bastava: lado a lado, sem nada em volta, o
		 * "Sobre" e os horários pareciam duas colunas do mesmo texto. A
		 * moldura é a mesma do convite de avaliação — borda fina, fundo de
		 * superfície, raio médio —, e é ela que diz "isto é outra coisa": um
		 * cartão de dados conferíveis ao lado de um texto de apresentação.
		 *
		 * Só no par. No trilho do profissional o bloco já está numa coluna
		 * separada, com régua e fundo próprios; uma moldura ali seria caixa
		 * dentro de caixa.
		 */
		.vt-perfil__corpo:not(:has(> .vt-perfil__trilho)) .vt-perfil__principal > .vt-secao--bio + .vt-secao--atendimento {
			grid-column: 2;
			/* Alinhado ao topo: a ficha é curta, e esticá-la até a altura do
			   texto abriria um vazio dentro do próprio bloco. */
			align-self: start;
			padding: var(--vt-space-5);
			border: 1px solid var(--vt-linha);
			border-radius: var(--vt-radius-md);
			background: var(--vt-superficie-1);
		}

		/* Dentro da moldura o título não precisa do tamanho de seção: ele
		   nomeia um cartão, não abre um capítulo. */
		.vt-perfil__corpo:not(:has(> .vt-perfil__trilho)) .vt-perfil__principal > .vt-secao--bio + .vt-secao--atendimento .vt-secao__titulo {
			margin-block: 0 var(--vt-space-3);
			font-size: var(--vt-fs-lg);
		}
	}

	/*
	 * A BARRA DE AÇÕES FECHA O CABEÇALHO, e a fronteira dela vale 48 como a
	 * das seções — ela vinha com 24, herdados de `.vt-acoes` em
	 * `listagem.css`, e ficava colada no "Sobre" enquanto o resto da página
	 * já andava em 48.
	 *
	 * Só no desktop: abaixo de 720 px esta mesma barra é `position: fixed` no
	 * pé da tela, e margem em elemento fixo não separa coisa nenhuma. Lá quem
	 * dá o respiro é o `padding-block` da identidade.
	 */
	@media (min-width: 721px) {
		.vt-perfil__topo > .vt-acoes {
			margin-bottom: var(--vt-space-12);
		}
	}

	/*
	 * ...e no celular esse respiro tem de vir do PRÓPRIO topo, porque lá o
	 * último elemento em fluxo muda conforme o perfil: no profissional básico
	 * é o rótulo de estado ("Dados não confirmados desde outubro de 2025"), na
	 * clínica são os chips de especialidade, e em quem não tem nem um nem
	 * outro é a identidade — que já fecha com o próprio `padding-block`.
	 *
	 * Por isso a condição é `:has()`: o topo ganha o fecho quando termina em
	 * algo que NÃO é a identidade. Sem ela, o rótulo encostava no "Como
	 * ginecologista" e o chip "Oftalmologistas" encostava no "5 profissionais
	 * atendem aqui" — o mesmo defeito em duas telas, porque a causa é a mesma:
	 * a barra de ações, que fecharia o cabeçalho, é `position: fixed` aqui.
	 *
	 * O valor é 32, o mesmo que separa duas seções no celular — medido: acima
	 * da pílula sobram 36 px, e com 24 embaixo ela ficava mais perto do bloco
	 * seguinte do que da identidade a que pertence.
	 */
	@media (max-width: 720px) {
		.vt-perfil__topo:has(> .vt-chips--esp),
		.vt-perfil__topo:has(> .vt-selos > *) {
			padding-bottom: var(--vt-space-8);
		}
	}

	/* ── identidade ─────────────────────────────────────────────────── */

	.vt-id {
		display: grid;
		gap: var(--vt-space-4);
		padding-block: var(--vt-space-8) var(--vt-space-6);
	}

	/*
	 * No CELULAR o cabeçalho começa mais cedo.
	 *
	 * Medido a 414 px: entre o fim da trilha e o começo da identidade havia 48
	 * px — 16 da margem da trilha mais 32 deste padding — e logo acima ainda
	 * vinham os 24 do `<main>`. Quase um décimo da tela gasto antes de a
	 * página dizer de quem ela é, numa tela onde o nome, o selo e o botão de
	 * WhatsApp disputam a primeira dobra.
	 *
	 * No desktop os 32 continuam: lá a altura não é escassa, e o ar acima do
	 * nome é o que separa o perfil da navegação do site.
	 */
	@media (max-width: 720px) {
		.vt-id {
			padding-block: var(--vt-space-3) var(--vt-space-6);
		}
	}

	/*
	 * A diferença entre as duas variantes é de EIXO. O `cartao` é centrado e
	 * vertical porque é o desenho de quem tem pouco dado: com ar em volta,
	 * um perfil mínimo parece um cartão de visita; empilhado à esquerda
	 * pareceria um formulário interrompido.
	 */
	/*
	 * O cartão respira mais EM VOLTA, não ACIMA.
	 *
	 * O ar deste desenho é o que faz um perfil de pouco dado parecer um cartão
	 * de visita em vez de um formulário interrompido — e ele mora nas laterais
	 * e embaixo. Acima, o que existe é distância da navegação, e ali o cartão
	 * seguia com 48 px enquanto a identidade em faixa já tinha descido para
	 * 32: dois tipos de perfil começando em alturas diferentes, sem que a
	 * diferença dissesse nada. No celular a distância é a mesma da faixa,
	 * porque lá a primeira dobra é disputada por todos igualmente.
	 */
	.vt-id--cartao {
		justify-items: center;
		text-align: center;
		padding-block: var(--vt-space-8) var(--vt-space-8);
	}

	@media (max-width: 720px) {
		.vt-id--cartao {
			padding-block: var(--vt-space-3) var(--vt-space-6);
		}
	}

	.vt-id--faixa {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--vt-space-6);
	}

	/*
	 * A ponta de CHEGADA da viagem (§5.1). O nome vai no invólucro, e não na
	 * `<img>`, porque do lado do card o par é `.vt-card__retrato` — que também
	 * é invólucro e existe tanto para a foto quanto para o monograma. Nomear a
	 * imagem de um lado e o invólucro do outro faria o Premium viajar e o
	 * Básico não. Ver `listagem.css`.
	 */
	.vt-id__retrato {
		view-transition-name: var(--vt-foto);
	}

	.vt-id__foto,
	.vt-id__monograma {
		width: 7.5rem;
		height: 7.5rem;
		border-radius: 50%;
		display: grid;
		place-items: center;
	}

	.vt-id__foto {
		object-fit: cover;
		border: 2px solid var(--vt-confianca);
	}

	/*
	 * Monograma, não ilustração por sexo (§6.8): declara a ausência da foto em
	 * vez de disfarçá-la. Para o visitante é neutro; para o dono que se
	 * encontrou no Google, é um incômodo produtivo.
	 */
	.vt-id__monograma {
		background: var(--vt-superficie-2);
		border: 1px solid var(--vt-linha);
		color: var(--vt-confianca-texto);
		font-size: var(--vt-fs-2xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-sub);
		position: relative;
	}

	.vt-id__monograma::after {
		content: "";
		position: absolute;
		bottom: 1.15rem;
		width: 1.5rem;
		height: 2px;
		border-radius: 2px;
		background: var(--vt-confianca);
	}

	/*
	 * A LINHA DO NOME, e o selo dentro dela.
	 *
	 * O selo vinha numa fileira abaixo da identidade, dividindo a linha com
	 * "atende online" — mesma pílula, mesma altura, uma verificada e a outra
	 * não. Aqui ele fica ao lado de quem ele qualifica, e a forma não mudou:
	 * é a mesma pílula de duas zonas da etapa 11.
	 *
	 * `align-items: baseline` alinharia o selo pela base de um nome de 41 px,
	 * pendurando-o. `center` o alinha pelo meio da primeira linha, que é onde
	 * o olho o procura. O `flex-wrap` deixa o selo cair para a linha de baixo
	 * num nome longo em tela estreita, em vez de espremer o nome.
	 */
	.vt-id__linha-nome {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
	}

	/*
	 * Na FAIXA o selo vai para a direita, e não é só respiro: colado ao nome
	 * ele parecia parte do nome. Encostado na borda, ele fecha a linha e
	 * termina exatamente onde a régua da tira de credencial termina — medido,
	 * os dois em x=1449. A identidade passa a ter duas âncoras verticais em
	 * vez de um bloco de texto solto à esquerda.
	 *
	 * Só na faixa: o cartão é centrado, e ali "à direita" não quer dizer nada.
	 */
	.vt-id--faixa .vt-id__linha-nome {
		justify-content: space-between;
	}

	.vt-id--cartao .vt-id__linha-nome {
		justify-content: center;
	}

	/*
	 * ── A FAIXA NO CELULAR ──────────────────────────────────────────
	 *
	 * A 414 px a faixa era foto de 120 px à esquerda e TUDO espremido nos 223
	 * que sobravam: o nome quebrava em duas linhas, o selo ocupava 202 dos 223,
	 * e a tira de credencial vinha em coluna estreita embaixo. Parecia a versão
	 * comprimida do desktop, que é exatamente o que o celular não deve ser.
	 *
	 * A composição do cliente: nome e especialidade ocupam a largura toda em
	 * cima; embaixo, o retrato divide a linha com o registro e a cidade — que
	 * é a informação que combina com um rosto.
	 *
	 * `display: contents` no bloco de texto é o que permite isso sem mexer no
	 * HTML: os filhos dele passam a ser itens da grade da identidade, e cada um
	 * escolhe sua área.
	 *
	 * Medido: o nome sai de duas linhas para UMA, e a faixa cresce 11 px —
	 * 290 para 301. Paga-se onze pixels por um nome inteiro.
	 */
	@media (max-width: 720px) {
		.vt-id--faixa {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-areas:
				"nome    nome"
				"esp     esp"
				"retrato ficha";
			column-gap: var(--vt-space-4);
			row-gap: var(--vt-space-3);
			align-items: center;
		}

		.vt-id--faixa .vt-id__texto {
			display: contents;
		}

		.vt-id--faixa .vt-id__retrato {
			grid-area: retrato;
		}

		.vt-id--faixa .vt-id__linha-nome {
			grid-area: nome;
			/* No celular o selo volta para junto do nome: com o nome ocupando
			   a largura toda, jogá-lo na borda o afastaria de quem ele
			   qualifica. */
			justify-content: flex-start;
		}

		.vt-id--faixa .vt-id__credencial {
			grid-area: esp;
			margin: 0;
		}

		/*
		 * A tira perde a régua e vira coluna: ao lado de um retrato de 120 px
		 * ela tem 231 de largura, e registro e cidade lado a lado não caberiam.
		 * A régua também não faz falta — quem separa aqui é o próprio retrato.
		 */
		.vt-id--faixa .vt-id__ficha {
			grid-area: ficha;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--vt-space-2);
			margin: 0;
			padding-top: 0;
			border-top: 0;
		}
	}

	/*
	 * O TIQUE sobre o retrato: a verificação ancorada em quem está verificado.
	 * A mesma marca do card, na escala daqui. Ele e o selo dizem a mesma
	 * coisa, e é de propósito — o tique marca o rosto, o selo nomeia o nível.
	 */
	.vt-id__tique {
		position: absolute;
		inset: auto 0.35rem 0.35rem auto;
		display: grid;
		place-items: center;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 50%;
		background: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
		box-shadow: 0 0 0 3px var(--vt-superficie-1);
	}

	.vt-id__retrato {
		position: relative;
	}

	.vt-id__nome {
		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);
		margin: 0;
		text-wrap: balance;
	}

	.vt-id__credencial {
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-lg);
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		align-items: baseline;
	}

	.vt-id--cartao .vt-id__credencial {
		justify-content: center;
	}

	/*
	 * ── A TIRA DE CREDENCIAL ────────────────────────────────────────
	 *
	 * Registro e lugar, na gramática da ficha: régua fina em cima, marcador de
	 * tipo antes do valor, algarismo tabular. É a mesma gramática do card, do
	 * portão e dos contadores desde a etapa 11 — a identidade do vTag era o
	 * único lugar que ainda não a tinha.
	 *
	 * O que ela substitui: três linhas de cinza em três tamanhos, com o
	 * registro pendurado depois de um ponto do meio. O separador em CSS que
	 * existia aqui saiu junto — quem separa agora é o vão entre os dados, e
	 * cada um tem o próprio marcador.
	 *
	 * A régua NÃO é enfeite: é a mesma linha que separa "quem é" de "o que o
	 * catálogo sabe" no card. Aqui ela dá base à identidade, que era um nome
	 * flutuando sobre três linhas soltas.
	 */
	.vt-id__ficha {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vt-space-2) var(--vt-space-5);
		margin: var(--vt-space-3) 0 0;
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-texto-medio);
		/*
		 * `fs-lg`, e não `fs-base`: o registro é mono a 0,94em, e com o corpo
		 * base ele saía em 16 px — MENOR que os 18 px da especialidade logo
		 * acima. A credencial que se confere não pode ser o menor dado da
		 * identidade. Com `lg` ele empata com a especialidade, que é onde ele
		 * deve estar: as duas respondem perguntas diferentes e igualmente
		 * importantes — o que faz, e com que registro.
		 */
		font-size: var(--vt-fs-lg);
	}

	.vt-id--cartao .vt-id__ficha {
		justify-content: center;
	}

	.vt-id__dado {
		display: inline-flex;
		align-items: baseline;
		gap: var(--vt-space-2);
		white-space: nowrap;
	}

	/*
	 * O registro deixa de ser cinza-fraco: ele é a credencial, e agora tem o
	 * peso do dado que se confere. Continua em mono — número em mono lê como
	 * registro; em texto corrido, como recado.
	 */
	.vt-id__registro,
	.vt-ficha__numero {
		font-family: var(--vt-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: 0.94em;
	}

	.vt-id__dado--registro {
		color: var(--vt-texto-forte);
	}

	/* ── selos ──────────────────────────────────────────────────────── */

	/*
	 * Sobrou o ESTADO do registro. O selo de nível subiu para a linha do nome
	 * na etapa 12, e "atende online" desceu para a ficha — era atributo
	 * declarado vestido de verificação. A caixa some quando não há estado a
	 * declarar; `:empty` não serviria, porque o PHP deixa espaço em branco.
	 */
	.vt-selos {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		margin-block: var(--vt-space-3) 0;
		/* O legado centralizava; aqui só o cartão centraliza (regra abaixo). */
		justify-content: flex-start;
		list-style: none;
		padding: 0;
	}

	.vt-id--cartao ~ .vt-selos,
	.vt-perfil__topo .vt-id--cartao + .vt-selos {
		justify-content: center;
	}

	/*
	 * Sem estado a declarar, a caixa não existe — senão ela deixa a própria
	 * margem entre a identidade e as ações. `:empty` não serve: o PHP deixa
	 * espaço em branco lá dentro. O seletor precisa de dois níveis para vencer
	 * a regra de cima, que tem a mesma especificidade e vem antes.
	 */
	.vt-perfil__topo .vt-selos:not(:has(> *)) {
		display: none;
	}

	/*
	 * O vTag herda a ANATOMIA do selo de `listagem.css` — uma pílula, duas
	 * zonas, verificação à esquerda e nível preenchido à direita — e muda só a
	 * escala: aqui ele é o carimbo do próprio perfil, e não uma marca no canto
	 * de um card. Duas folhas na mesma camada; esta carrega depois e vence.
	 */
	.vt-selo {
		display: inline-flex;
		align-items: stretch;
		gap: 0;
		height: 26px;
		overflow: hidden;
		background: transparent;
		padding: 0;
		border-radius: var(--vt-radius-full);
		border: 1px solid var(--vt-confianca);
		color: var(--vt-confianca-texto);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.vt-selo__base {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-1);
		padding-inline: var(--vt-space-3);
	}

	.vt-selo__nivel {
		display: inline-flex;
		align-items: center;
		padding-inline: var(--vt-space-3);
		background: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	.vt-selo__icone {
		width: 13px;
		height: 13px;
	}

	/* A casca continua contornada nos dois níveis: quem preenche é a zona. */
	.vt-selo--premium {
		background: transparent;
		color: var(--vt-confianca-texto);
	}

	/* Os selos que NÃO são de nível continuam com o padding na casca: eles têm
	   uma zona só, e é o texto direto dentro da pílula. */
	.vt-selo--neutro,
	.vt-selo--pendente {
		align-items: center;
		padding-inline: var(--vt-space-3);
	}

	.vt-selo--neutro {
		border-color: var(--vt-linha-forte);
		color: var(--vt-texto-fraco);
	}

	/* Rótulo de estado, não penalidade: é afirmação verdadeira sobre o dado. */
	.vt-selo--pendente {
		border-color: var(--vt-estado-alerta);
		color: var(--vt-estado-alerta);
		text-transform: none;
		letter-spacing: 0;
		font-weight: var(--vt-peso-medio);
	}

	/* ── ações ──────────────────────────────────────────────────────── */

	/*
	 * A regra-base de `.vt-acoes` foi para `listagem.css` na etapa 8, junto do
	 * `.vt-acao` que ela arruma: a tela do artigo foi a segunda a pedir a
	 * mesma barra de contato, e container e botão em folhas diferentes é como
	 * se descobre, meses depois, que um dos dois mudou sozinho. O que fica
	 * aqui é o que só o vTag tem.
	 */
	.vt-id--cartao ~ .vt-acoes {
		justify-content: center;
	}

	/*
	 * Barra fixa no celular: é o contexto natural do vTag, aberto por um link
	 * de WhatsApp, com uma mão só. `safe-area-inset` porque o iPhone tem uma
	 * barra de gestos onde o botão cairia.
	 */
	@media (max-width: 720px) {
		/*
		 * A BARRA NO CELULAR: uma ação com nome, o resto em glifo.
		 *
		 * Ela era `grid-auto-columns: 1fr` — quatro colunas iguais para
		 * rótulos de tamanhos muito diferentes. Medido a 414 px: "Agendar pelo
		 * WhatsApp" ficava com 83 px e o texto quebrava em TRÊS linhas,
		 * enquanto "Compartilhar" levava 170. A barra não parecia apertada,
		 * parecia mal montada.
		 *
		 * Agora é flex: a ação primária leva o nome e o espaço que sobra; as
		 * secundárias viram alvos de 48 px com o glifo. O rótulo continua no
		 * HTML, escondido só visualmente — quem ouve a página continua ouvindo
		 * "Como chegar", e não precisamos de `aria-label` repetindo texto que
		 * já está lá.
		 *
		 * Por que o primeiro botão é o que mantém o nome: ele é o único cujo
		 * VERBO carrega a promessa. Alfinete, globo e o glifo de compartilhar
		 * dizem sozinhos para onde vão; "Agendar" não tem desenho equivalente.
		 */
		/*
		 * O ESPAÇO QUE A BARRA RESERVA PARA QUEM VEM DE FORA.
		 *
		 * A barra é `position: fixed` no pé da janela, e o botão de cookies do
		 * plugin Pictore All in One também — só que com z-index 99998 contra
		 * os 20 daqui. Medido em 12/09/2026: o botão ocupava de 16 px a 50 px
		 * do fundo, à esquerda, exatamente sobre o alvo de toque do "Agendar".
		 * Quem tocasse no canto do botão principal abria cookies.
		 *
		 * Hoje esse botão está desligado no painel do plugin e o caminho de
		 * volta vive na Política de Privacidade, então esta linha não muda
		 * nada na tela. Ela existe para o dia em que alguém religar a chave
		 * sem lembrar deste conflito: o plugin lê `--pcon-reabrir-desvio` e
		 * sobe o botão acima da barra sozinho.
		 *
		 * A conta é derivada dos mesmos tokens que desenham a barra — altura
		 * do alvo + os dois paddings + uma folga —, para que mudar o respiro
		 * da barra não deixe este número mentindo.
		 *
		 * O `:has()` prende a reserva à barra: a variante `fixa` só é montada
		 * quando o perfil tem contato (`Composicao\Blocos\Acoes`), e num vTag
		 * sem barra nenhuma isto levantaria o botão do plugin sem motivo.
		 */
		:root:has(.vt-acoes--fixa) {
			--pcon-reabrir-desvio: calc(
				var(--vt-alvo-toque) + (var(--vt-space-2) * 2) + var(--vt-space-3) +
				env(safe-area-inset-bottom, 0px)
			);
		}

		.vt-acoes--fixa {
			position: fixed;
			inset: auto 0 0;
			z-index: 20;
			margin: 0;
			padding: var(--vt-space-2) var(--vt-space-3);
			padding-bottom: calc(var(--vt-space-2) + env(safe-area-inset-bottom, 0px));
			background: var(--vt-superficie-1);
			border-top: 1px solid var(--vt-linha);
			box-shadow: var(--vt-sombra-lg);
			display: flex;
			align-items: stretch;
			gap: var(--vt-space-2);
		}

		.vt-acoes--fixa .vt-acao {
			padding-inline: var(--vt-space-3);
			font-size: var(--vt-fs-sm);
		}

		.vt-acoes--fixa .vt-acao--primaria {
			flex: 1 1 0;
			min-width: 0;
		}

		/*
		 * O rótulo curto entra e o longo sai — por `display`, e só na PRIMÁRIA.
		 * `display: none` tira do leitor de tela junto, que é o certo aqui:
		 * são dois rótulos para a mesma ação, e ele deve ouvir um.
		 */
		.vt-acoes--fixa .vt-acao--primaria .vt-acao__rotulo--curto {
			display: inline;
		}

		.vt-acoes--fixa .vt-acao--primaria:has(.vt-acao__rotulo--curto) .vt-acao__rotulo:not(.vt-acao__rotulo--curto) {
			display: none;
		}

		/*
		 * As secundárias: alvo quadrado de 48 px, que é o mínimo da casa. O
		 * `details` entra na conta porque o embrulho `vt-compartilhar` não tem
		 * caixa — ver a correção logo abaixo.
		 */
		.vt-acoes--fixa .vt-acao:not(.vt-acao--primaria),
		.vt-acoes--fixa details.vt-compartilhar {
			flex: 0 0 var(--vt-alvo-toque);
			width: var(--vt-alvo-toque);
			padding-inline: 0;
		}

		.vt-acoes--fixa .vt-compartilhar__botao {
			width: 100%;
			padding-inline: 0;
		}

		/*
		 * Nas SECUNDÁRIAS o rótulo some da tela e FICA no leitor: recorte, não
		 * `display: none`. É a diferença entre um botão sem nome e um botão
		 * cujo nome não ocupa espaço.
		 */
		.vt-acoes--fixa .vt-acao:not(.vt-acao--primaria) .vt-acao__rotulo,
		.vt-acoes--fixa .vt-compartilhar__botao .vt-acao__rotulo {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
			border: 0;
		}

		/*
		 * O PAINEL ABRIA PARA BAIXO — e a barra é fixa no rodapé. Medido a
		 * 414×700: a caixa começava em y=688 e 304 px dela ficavam fora da
		 * tela. Na prática o kit de compartilhamento não existia no celular,
		 * que é justamente onde o vTag circula.
		 */
		.vt-acoes--fixa .vt-compartilhar__caixa {
			inset-inline: auto 0;
			bottom: calc(100% + var(--vt-space-2));
			margin-top: 0;
			max-height: 70vh;
			overflow-y: auto;
		}

		/* Espaço para a barra não cobrir o fim do conteúdo. */
		.vt-main--perfil {
			padding-bottom: calc(var(--vt-space-16) + var(--vt-alvo-toque));
		}
	}

	/* O rótulo curto só existe na barra fixa do celular. */
	.vt-acao__rotulo--curto {
		display: none;
	}

	/* ── compartilhar ───────────────────────────────────────────────── */

	/*
	 * O embrulho não desenha nada: quem desenha é o `<summary>`.
	 *
	 * A regra existia como `vt-compartilhar { display: contents }` — seletor
	 * de elemento, 0,0,1 — e perdia para `.vt-acao` (0,1,0), que o próprio
	 * template põe no embrulho. Resultado: `display: flex` com borda e fundo
	 * por fora, e o `<summary>` com borda e fundo por dentro. Caixa dentro de
	 * caixa, nos dois temas e nas duas larguras, desde que o componente
	 * existe.
	 */
	vt-compartilhar.vt-acao {
		display: contents;
	}

	.vt-compartilhar {
		position: relative;
	}

	.vt-compartilhar__botao {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--vt-space-2);
		min-height: var(--vt-alvo-toque);
		padding-inline: var(--vt-space-4);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		list-style: none;
		white-space: nowrap;
	}

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

	.vt-compartilhar__caixa {
		position: absolute;
		z-index: 30;
		inset-inline-start: 0;
		margin-top: var(--vt-space-2);
		min-width: 17rem;
		padding: var(--vt-space-3);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		box-shadow: var(--vt-sombra-lg);
	}

	.vt-compartilhar__rotulo {
		margin: 0 0 var(--vt-space-2);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
		color: var(--vt-texto-fraco);
	}

	.vt-compartilhar__url {
		width: 100%;
		font: inherit;
		font-size: var(--vt-fs-xs);
		padding: var(--vt-space-2);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-2);
		color: var(--vt-texto-forte);
	}

	.vt-compartilhar__saidas {
		list-style: none;
		margin: var(--vt-space-3) 0 0;
		padding: 0;
		display: grid;
		gap: var(--vt-space-1);
		border-top: 1px solid var(--vt-linha);
		padding-top: var(--vt-space-2);
	}

	.vt-compartilhar__saida {
		display: flex;
		align-items: center;
		min-height: var(--vt-alvo-toque);
		padding-inline: var(--vt-space-2);
		border-radius: var(--vt-radius-sm);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		cursor: pointer;
		list-style: none;
	}

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

	.vt-compartilhar__saida:hover {
		background: var(--vt-superficie-2);
		color: var(--vt-interacao);
	}

	.vt-compartilhar__qr {
		border-top: 1px solid var(--vt-linha);
		margin-top: var(--vt-space-2);
		padding-top: var(--vt-space-2);
		text-align: center;
	}

	/*
	 * O QR é preto sobre branco, sempre — inclusive no tema escuro. Leitor de
	 * QR espera módulos escuros sobre fundo claro, e inverter reduz a taxa de
	 * leitura em aparelho ruim. Um quadro branco em volta é o preço, e é
	 * barato perto de um QR que não lê.
	 */
	.vt-compartilhar__qr-img {
		display: block;
		margin: var(--vt-space-2) auto;
		background: #fff;
		padding: var(--vt-space-2);
		border-radius: var(--vt-radius-sm);
		color: #000;
	}

	.vt-compartilhar__nota {
		font-size: var(--vt-fs-micro);
		color: var(--vt-texto-fraco);
		text-align: left;
		line-height: var(--vt-lh-compacta);
		margin: var(--vt-space-2) 0 0;
	}

	.vt-compartilhar__qr-baixar {
		display: inline-block;
		font-size: var(--vt-fs-xs);
		color: var(--vt-interacao);
		padding-block: var(--vt-space-2);
	}

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

	/*
	 * DUAS VOZES DE TÍTULO, e o que decide é a COLUNA.
	 *
	 * O vTag tinha cinco seções e um carimbo só: "Sobre" — a voz da pessoa — e
	 * "Como médico ortopedista" — o registro no conselho — eram anunciados
	 * pelos mesmos 12 px em caixa alta cinza. Uma página com cinco títulos
	 * idênticos não se lê, se varre; era a origem direta da sensação de ficha
	 * de biblioteca.
	 *
	 * A regra não é por bloco, é por coluna, e ela se sustenta sozinha:
	 *
	 *   PRINCIPAL  é a leitura em sequência — quem é, onde atende, o que
	 *              publica. São capítulos, e recebem voz de capítulo.
	 *   TRILHO     é material de referência, consultado e não lido: a ficha do
	 *              conselho e o convite à avaliação. Rótulo continua rótulo.
	 *
	 * Isso vale para os quatro níveis sem `if`: num perfil sem trilho a ficha
	 * cai na principal e vira capítulo, que é o certo — lá ela é uma das duas
	 * ou três seções da página, não uma nota lateral.
	 *
	 * 22 px em caixa normal é o MESMO capítulo da Home, decidido no bloco C da
	 * etapa 12. Não é uma voz nova: é a voz que a casa já tem, chegando à
	 * segunda tela. E o escopo em `.vt-perfil__principal` é o que impede o
	 * vazamento para a área da conta, que divide esta classe com o vTag.
	 */
	.vt-perfil__principal .vt-secao__titulo {
		margin-bottom: var(--vt-space-5);
		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);
	}

	.vt-secao__titulo {
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
		color: var(--vt-texto-fraco);
		margin: 0 0 var(--vt-space-3);
	}

	.vt-bio {
		max-width: var(--vt-medida-bio);
		color: var(--vt-texto-forte);
	}

	/*
	 * **A lista da bio, que nunca tinha chegado ao ar.**
	 *
	 * `bio_formatada()` sabe desenhá-la desde sempre, mas o editor a perdia na
	 * volta para a marcação — então nenhuma bio do acervo tem uma, e este
	 * `<ul>` ficava com o padrão do navegador: recuo de 40 px, fora de qualquer
	 * régua da casa. Consertado o editor em 05/09/2026, ela passou a aparecer,
	 * e a folha tem de dizer como.
	 *
	 * Os valores são os MESMOS do editor (`.vt-rico__area ul/li`), pelo mesmo
	 * motivo que o vão do parágrafo: o que se vê ao escrever é o que vai para o
	 * ar. **Aqui e não em `vtag.css`** — aquela folha é o legado que ainda não
	 * saiu do tema, e regra nova não entra em arquivo que está para sumir.
	 */
	.vt-bio ul {
		margin: 0 0 var(--vt-space-4);
		padding-left: var(--vt-space-5);
	}

	.vt-bio li {
		margin-bottom: var(--vt-space-1);
	}

	/*
	 * O último bloco não empurra o rodapé da seção — vale para o parágrafo e
	 * para a lista, e por isso é `> :last-child` e não `p:last-child`.
	 */
	.vt-bio > :last-child {
		margin-bottom: 0;
	}

	/*
	 * A variante de DESTAQUE é a do perfil com pouco dado, onde a bio é a
	 * estrela: corpo maior e medida mais curta, porque texto maior cansa antes.
	 * A proporção com a medida normal se manteve — de 38/44 para 54/64 —, e em
	 * corpo 18 isso dá ~590 px, contra os 417 de antes.
	 */
	.vt-secao--destaque .vt-bio {
		font-size: var(--vt-fs-lg);
		max-width: 54ch;
	}

	/*
	 * O colapso da bio.
	 *
	 * O texto está FORA do `<details>`; o `<details>` é só o interruptor, e
	 * `:has()` liga um ao outro. Por isso o texto aparece uma vez só no HTML e
	 * o `<summary>` contém apenas o rótulo.
	 *
	 * `max-height` em vez de `line-clamp`: a bio tem parágrafos e listas, e
	 * `-webkit-line-clamp` é imprevisível com filhos em bloco. O `mask` faz a
	 * última linha desaparecer, o que diz "continua" melhor do que um corte
	 * seco.
	 *
	 * Sem `:has()`, nada disto se aplica: o interruptor fica escondido e a bio
	 * aparece inteira. É a degradação certa — mostrar tudo nunca é o erro.
	 */
	/*
	 * ── a imagem da clínica, ao lado da apresentação ────────────────
	 *
	 * **Grade, e não `float`.** O texto da clínica pode ser curto, e com
	 * `float` um parágrafo de duas linhas deixaria a imagem sobrando para
	 * dentro do bloco seguinte. Em grade a seção termina onde a mais alta das
	 * duas colunas termina, que é o que a leitura espera.
	 *
	 * O interruptor de "continuar lendo" ocupa a linha inteira embaixo, senão
	 * ele nasceria na coluna do texto e ficaria alinhado ao meio da imagem.
	 */
	.vt-bio-bloco.tem-capa {
		display: grid;
		gap: var(--vt-space-5);
		align-items: start;
		grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
	}

	.vt-bio-bloco.tem-capa .vt-bio__interruptor {
		grid-column: 1 / -1;
	}

	.vt-bio__capa {
		margin: 0;
		overflow: hidden;
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	/* `aspect-ratio` fixa a proporção que o V1 usava (3:2), e `object-fit`
	   recorta o que sobra em vez de espremer a fachada. */
	.vt-bio__capa img {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/*
	 * No estreito a imagem abre a seção e o texto vem embaixo — que é a ordem
	 * do HTML. Uma coluna de 22ch ao lado de um texto de 20ch não é grade, é
	 * duas colunas de sílabas.
	 */
	@media (max-width: 46rem) {
		.vt-bio-bloco.tem-capa {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.vt-bio__interruptor {
		display: none;
	}

	@supports selector(:has(*)) {
		.vt-bio-bloco.is-colapsavel .vt-bio__interruptor {
			display: block;
			margin-top: var(--vt-space-2);
		}

		.vt-bio-bloco.is-colapsavel:has(.vt-bio__interruptor:not([open])) .vt-bio {
			max-height: 11.5rem;
			overflow: hidden;
			mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
		}

		/*
		 * A ABERTURA É ANIMADA, e o argumento não é suavidade.
		 *
		 * Medida no perfil do Dr. Marcelo, a bio vai de 184 px a 911 px: hoje
		 * o documento cresce **727 px num único quadro** e tudo o que está
		 * abaixo — onde atende, vídeos, artigos, links — pula de lugar sem
		 * aviso. Ao fechar, pula para cima. Interpolar a altura faz o olho
		 * acompanhar em vez de reencontrar a página.
		 *
		 * `interpolate-size` é o que torna isto declarativo: sem ele não se
		 * anima até `max-content`, e a saída seria medir a altura em JS ou o
		 * velho truque do `max-height: 200rem` — que gasta a maior parte da
		 * transição animando espaço vazio, com duração real imprevisível.
		 *
		 * O CUSTO É REAL E ESTÁ AQUI: altura não é propriedade de composição,
		 * então cada quadro refaz o layout de tudo o que vem abaixo. Medido
		 * neste desktop: 27 quadros, mediana de 16,6 ms, pior de 20,9 ms —
		 * imperceptível. Em aparelho modesto pode custar mais, e é por isso
		 * que a duração é a MÉDIA da casa e não uma mais longa: quanto menos
		 * quadros, menos reflow.
		 *
		 * Onde `interpolate-size` não existe, nada disto roda e a bio abre
		 * instantânea — que é exatamente o comportamento de antes.
		 *
		 * O DEGRADÊ NÃO ACOMPANHA, e é de propósito. Ele some no primeiro
		 * quadro, porque existe para dizer "continua" — e no instante em que a
		 * pessoa clica, ela já sabe que continua. Interpolá-lo daria trabalho
		 * (`@property` com a parada do gradiente) para animar um aviso que
		 * acabou de perder a função.
		 */
		@media (prefers-reduced-motion: no-preference) {
			.vt-bio-bloco.is-colapsavel .vt-bio {
				interpolate-size: allow-keywords;
				transition: max-height var(--vt-dur-media) var(--vt-ease-entrada);
			}

			.vt-bio-bloco.is-colapsavel:has(.vt-bio__interruptor[open]) .vt-bio {
				max-height: max-content;
			}
		}

		.vt-bio-bloco:has(.vt-bio__interruptor:not([open])) .vt-bio__menos,
		.vt-bio-bloco:has(.vt-bio__interruptor[open]) .vt-bio__mais {
			display: none;
		}
	}

	.vt-bio__alternar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-1);
		min-height: var(--vt-alvo-toque);
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		list-style: none;
	}

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

	.vt-bio__alternar::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		rotate: 45deg;
		translate: 0 -2px;
		transition: rotate var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-bio__interruptor[open] .vt-bio__alternar::after {
		rotate: -135deg;
		translate: 0 2px;
	}


	/* ── ficha ──────────────────────────────────────────────────────── */

	.vt-ficha {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0;
	}

	/*
	 * O valor tem PISO. Com `minmax(0, 1fr)` o rótulo crescia até o
	 * max-content e comia a coluna do dado: "Conselho Regional de Psicologia"
	 * deixava 52 px para "CRP 06-11707/J", que quebrava em três linhas dentro
	 * do trilho de 288 px. Num catálogo o rótulo pode dobrar; o dado, não —
	 * ele é o que a pessoa veio conferir. Medido: com 8rem de piso o registro
	 * cabe numa linha e o par encolhe de 89 px para 68 px de altura.
	 */
	.vt-ficha__par {
		display: grid;
		grid-template-columns: minmax(7rem, auto) minmax(8rem, 1fr);
		gap: var(--vt-space-3);
		padding-block: var(--vt-space-2);
		border-bottom: 1px solid var(--vt-linha);
		font-size: var(--vt-fs-sm);
	}

	.vt-ficha__par:last-child {
		border-bottom: 0;
	}

	/*
	 * ── O MARCADOR DE TIPO ──────────────────────────────────────────
	 *
	 * Ele precede o dado e some da leitura de quem ouve a página: quem lê o
	 * rótulo já sabe o tipo, e o ícone seria a mesma informação duas vezes.
	 *
	 * Herda `currentColor`, e é por isso que ele nunca vira enfeite: onde ele
	 * está, o texto é cinza de rótulo, e ele fica cinza junto. Nenhum marcador
	 * pinta de mint — a moeda da verificação não paga ícone de endereço.
	 *
	 * `flex: none` porque em linha com texto que quebra ele seria o primeiro a
	 * ser espremido, e um alfinete achatado não é mais um alfinete.
	 * `translateY` porque o centro óptico das cinco formas fica acima da
	 * linha de base do texto ao lado.
	 */
	.vt-icone {
		width: 1em;
		height: 1em;
		flex: none;
		opacity: 0.75;
	}

	/*
	 * O EMPURRÃO ÓPTICO de 0,09em vale só onde o marcador se alinha pela LINHA
	 * DE BASE do texto ao lado — o centro óptico das formas fica acima dela.
	 *
	 * Ele era global, e nos botões da barra de ações, que centralizam por flex,
	 * empurrava o glifo 1,4 px abaixo do centro. Um empurrão que corrige numa
	 * situação desalinha na outra: quem centraliza não precisa de correção.
	 */
	.vt-endereco__linha .vt-icone,
	.vt-id__dado .vt-icone {
		translate: 0 0.09em;
	}

	/*
	 * O marcador vive numa CALHA à esquerda da ficha, não dentro da coluna do
	 * rótulo. Dentro dela ele custava 23 px de largura ao texto: "Conselho
	 * Regional de Medicina" passou de duas linhas para três, e a linha da
	 * ficha, de 68 px para 94. Medido na tela.
	 *
	 * Na calha ele resolve dois problemas de uma vez: o rótulo recupera a
	 * largura, e os marcadores se empilham alinhados — uma coluna que o olho
	 * percorre, que é a única forma de um marcador acelerar varredura de
	 * verdade. As linhas sem marcador mantêm o recuo e continuam alinhadas.
	 */
	.vt-ficha__par {
		padding-left: 1.6rem;
	}

	/*
	 * NO TRILHO, o par EMPILHA. A conta não fecha de outro jeito: a coluna tem
	 * 288 px, e rótulo em duas linhas (148) + vão (12) + piso do valor (128)
	 * já são 288 — a calha do marcador não cabe em lugar nenhum. Medido: com a
	 * calha dentro das duas colunas, "Conselho Regional de Medicina" ia de
	 * duas linhas para três e o par de 68 px para 94.
	 *
	 * Empilhado, o rótulo ganha a largura toda e cabe numa linha, o valor vem
	 * abaixo em monoespaçada, e o par fica MENOR do que era antes do marcador.
	 * A ficha em duas colunas continua onde há largura para ela — quando o
	 * bloco cai na coluna principal, num perfil sem trilho.
	 */
	.vt-perfil__trilho .vt-ficha__par {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vt-space-1);
	}

	.vt-ficha dt {
		position: relative;
		color: var(--vt-texto-fraco);
	}

	.vt-ficha dt .vt-icone {
		position: absolute;
		left: -1.6rem;
		top: 0.18em;
	}

	.vt-ficha dd {
		margin: 0;
		color: var(--vt-texto-forte);
	}

	.vt-ficha dd.is-nao {
		color: var(--vt-texto-fraco);
	}

	/* ── contato ────────────────────────────────────────────────────── */

	/*
	 * A SEÇÃO USA A FICHA INTEIRA e não inventa anatomia própria: rótulo à
	 * esquerda, dado à direita, dígitos em monoespaçada — a mesma gramática do
	 * registro no conselho, porque telefone é dado que se anota, não convite
	 * que se aceita. O que muda são três coisas, e as três têm a mesma razão:
	 * este é o dado que boa parte de quem abre um vTag veio buscar.
	 *
	 *   1. **O corpo.** Mesmo argumento de `.vt-endereco__linha--dado`: numa
	 *      seção de rótulos cinza, o dado procurado não pode sair no menor
	 *      tamanho da folha.
	 *   2. **O alvo.** O número É o link — não há botão nesta seção — e um
	 *      link de 17 px de altura no celular é um alvo que erra. O
	 *      `min-height` o leva aos 44 px da casa sem transformá-lo em botão:
	 *      continua texto sublinhado, na cor de interação que `base.css` dá a
	 *      todo link (a cor do `dd` chega por herança e perde para ela).
	 *   3. **O eixo.** Com o número ocupando 44 px, o rótulo alinharia pelo
	 *      topo e ficaria flutuando acima dele. `center` põe os dois na mesma
	 *      linha óptica.
	 *
	 * E a CALHA sai. `.vt-ficha__par` reserva 1,6 rem à esquerda para o
	 * marcador de tipo se pendurar; sem marcador, esse recuo é espaço guardado
	 * para um ícone que nunca vem — e o efeito na tela é o rótulo começando 26
	 * px à direita do título "Contato", o único bloco da coluna que não
	 * encosta na margem. Medido a 414 px: "Contato" em x=16, "WhatsApp" em
	 * x=42.
	 */
	.vt-secao--contato .vt-ficha__par {
		align-items: center;
		padding-left: 0;
	}

	.vt-secao--contato .vt-ficha__numero {
		font-size: var(--vt-fs-base);
	}

	.vt-contato__numero {
		display: inline-flex;
		align-items: center;
		min-height: var(--vt-alvo-toque);
	}

	/* ── chips, endereços, clínicas, links ──────────────────────────── */

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

	.vt-chip {
		font-size: var(--vt-fs-sm);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-full);
		padding: var(--vt-space-1) var(--vt-space-3);
		color: var(--vt-texto-medio);
	}

	.vt-chip--destaque {
		border-color: var(--vt-confianca);
		color: var(--vt-confianca-texto);
	}

	/*
	 * `.vt-artigos` e `.vt-videos` saíram deste grupo na etapa 8: as duas
	 * listas passaram a viver em `conteudo.css`, com o card e a fachada que
	 * elas contêm, porque as subpáginas `/@{slug}/artigos` e `/@{slug}/videos`
	 * precisavam do mesmo desenho e não carregam esta folha.
	 */
	.vt-enderecos,
	.vt-clinicas,
	.vt-links,
	.vt-redes {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--vt-space-3);
	}

	/*
	 * O RESUMO DA LISTA — com três ou mais lugares, a seção se dobra.
	 *
	 * Ele nasceu sem uma linha de CSS: colava na lista e não dizia que era
	 * clicável. É um controle, então tem o alvo de toque da casa, o cursor de
	 * quem clica e um foco visível; e é uma contagem, não um título, então
	 * fica na voz do rótulo — o dado forte são os endereços logo abaixo.
	 */
	.vt-enderecos-lista__resumo {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-height: var(--vt-alvo-toque);
		margin-bottom: var(--vt-space-2);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
	}

	.vt-enderecos-lista__resumo:hover {
		color: var(--vt-texto-forte);
	}

	/* O triângulo nativo do `summary` vem colado e muda de forma entre
	   navegadores; o nosso é a mesma seta das outras dobras da casa. */
	.vt-enderecos-lista__resumo::-webkit-details-marker {
		display: none;
	}

	.vt-enderecos-lista__resumo {
		list-style: none;
	}

	.vt-enderecos-lista__resumo::before {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		flex: none;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		rotate: -45deg;
		translate: 0 -0.1em;
		transition: rotate 120ms ease;
	}

	.vt-enderecos-lista[open] > .vt-enderecos-lista__resumo::before {
		rotate: 45deg;
		translate: 0 -0.15em;
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-enderecos-lista__resumo::before {
			transition: none;
		}
	}

	.vt-endereco {
		padding: var(--vt-space-4);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
	}

	/*
	 * O RÓTULO NOMEIA O LUGAR; O ENDEREÇO É O DADO.
	 *
	 * "Consultório", "Clínica Vida" — quem procura já sabe o que é um
	 * consultório: o que ele precisa ler é a rua. O rótulo desce a uma
	 * sobrescrita e o endereço sobe ao corpo, em texto forte. Nos vínculos de
	 * clínica o rótulo é o nome dela e leva ao vTag da clínica, então ali ele
	 * é link — e o único elemento azul do cartão.
	 */
	.vt-endereco__titulo {
		margin: 0 0 var(--vt-space-1);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		color: var(--vt-texto-medio);
	}

	.vt-endereco__titulo a {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-1);
		color: var(--vt-interacao);
	}

	.vt-endereco__titulo .vt-icone {
		width: 1rem;
		height: 1rem;
		flex: none;
	}

	/*
	 * As duas ações do endereço, na mesma faixa: ver o mapa aqui e traçar a
	 * rota lá fora são coisas diferentes, e nenhuma das duas é o endereço.
	 * A fachada aberta toma a linha inteira porque aí ela já é o mapa.
	 */
	.vt-endereco__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-4);
		margin-top: var(--vt-space-3);
	}

	/*
	 * O endereço é o dado que mais se procura num perfil de saúde, e era o
	 * único parágrafo cinza de uma seção cinza. Com o alfinete, o olho acha a
	 * linha sem ler a seção inteira. `align-items: baseline` alinha o
	 * marcador pela primeira linha de um endereço que quebra em duas.
	 */
	.vt-endereco__linha {
		display: flex;
		align-items: baseline;
		gap: var(--vt-space-2);
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/* Depois de `.vt-endereco__linha`, e não antes: mesma especificidade, e
	   quem vem por último ganha. Já custou esta folha quatro vezes. */
	.vt-endereco__linha--dado {
		font-size: var(--vt-fs-base);
		color: var(--vt-texto-forte);
		line-height: var(--vt-lh-compacta);
	}

	.vt-endereco__mapa {
		display: inline-flex;
		align-items: center;
		min-height: var(--vt-alvo-toque);
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	.vt-links,
	.vt-redes {
		gap: var(--vt-space-2);
	}

	/*
	 * FLEX com quebra, e não `grid-auto-flow: column`.
	 *
	 * A coluna automática cria uma faixa por rede e não quebra nunca: a 414 px
	 * três redes somavam exatos 367 e a quarta punha o DOCUMENTO em 466 px —
	 * rolagem horizontal na página inteira, que é a coisa que esta obra não
	 * admite. Com a marca dentro, as pastilhas ficaram mais largas e o limite
	 * ficou mais perto ainda. Medido com 3, 4, 5 e 6 redes.
	 */
	.vt-redes {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	/*
	 * ── AS REDES ────────────────────────────────────────────────────
	 *
	 * Elas ficavam a ZERO pixel da lista de links e com o mesmo desenho dela.
	 * O intervalo é o primeiro conserto: a rede não é o próximo item da lista,
	 * é outra natureza.
	 */
	.vt-redes {
		margin-top: var(--vt-space-5);
	}

	/* O `display` da rede se resolve mais abaixo, junto com o do link e o da
	   clínica: aqui ele perderia para a regra que declara `block`. */

	/*
	 * A MARCA fica maior que os marcadores de dado (1em) porque aqui ela é o
	 * conteúdo, não a etiqueta: é ela que se reconhece de longe.
	 */
	.vt-marca {
		width: 1.25rem;
		height: 1.25rem;
		flex: none;
	}

		/*
	 * TODAS EM `currentColor`, e é decisão de produto do cliente: o vTag fechou
	 * num padrão cromático próprio, e quatro logotipos em quatro cores de marca
	 * furavam esse padrão bem no fim da página. O que identifica a rede é a
	 * FORMA — o anel do Instagram, o "f", o triângulo do YouTube —, e a forma
	 * continua inteira em tinta da casa.
	 *
	 * O "G" do Google, em `blocos/avaliacao.php`, continua colorido: é a única
	 * marca que aparece dentro de uma AÇÃO, e ali a cor promete para onde o
	 * clique leva. Uma exceção com motivo, não duas famílias.
	 */

	/*
	 * No hover a caixa inteira assume a cor da marca na borda — é o feedback
	 * que o link e a clínica já têm, com a diferença de que aqui a cor vem da
	 * rede e não da interação.
	 */
	.vt-rede:hover .vt-marca,
	.vt-rede:focus-visible .vt-marca {
		scale: 1.08;
	}

	.vt-marca {
		transition: scale var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-link,
	.vt-rede,
	.vt-clinica__link {
		display: block;
		padding: var(--vt-space-3) var(--vt-space-4);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-forte);
		text-decoration: none;
		font-weight: var(--vt-peso-medio);
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	/*
	 * Clínica e link viram caixas com marcador, e por isso trocam o `block`
	 * pelo `flex` — precisa vir DEPOIS da regra acima, que tem a mesma
	 * especificidade e declara `display: block`.
	 *
	 * As redes ficam de fora: "Instagram" não precisa de ícone para dizer o
	 * que é, e um marcador ali seria enfeite — que é exatamente o que a regra
	 * 1 do `icone()` proíbe.
	 */
	.vt-clinica__link {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
	}

	/*
	 * A REDE entra aqui pelo mesmo motivo — e sem isto ela ficava `block`, o
	 * `<svg>` voltava a ser inline e sentava na linha de base: a marca subia
	 * 3,8 px em relação ao centro do botão. Terceira vez que esta ordem morde
	 * nesta folha.
	 */
	.vt-rede {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
	}

	.vt-link:hover,
	.vt-rede:hover,
	.vt-clinica__link:hover {
		border-color: var(--vt-interacao);
	}

	/*
	 * A fachada de vídeo e o card de artigo saíram daqui na etapa 8, para
	 * `conteudo.css`. Ficaram em duas telas ao mesmo tempo — o bloco do vTag e
	 * a subpágina — e manter a cópia aqui era garantir que as duas
	 * divergissem.
	 */

	/* ── faixas ─────────────────────────────────────────────────────── */

	/*
	 * **O `color` aqui não é enfeite: é a correção de um texto ilegível.**
	 *
	 * `.vt-faixa` existe duas vezes. A do `@layer legado` (vtag.css) pinta a
	 * faixa de navy e o texto de BRANCO; esta, do `@layer componente`, troca o
	 * fundo por `--vt-superficie-2`, que é claro. Como camada só vence onde há
	 * concorrente, o fundo passou a vir daqui e a cor continuou vindo de lá:
	 * branco sobre superfície clara, sem leitura nenhuma. Declarar a cor no
	 * mesmo lugar em que se declara o fundo é o que fecha o par — e vale para
	 * qualquer faixa futura, não só para a que revelou o defeito.
	 */
	.vt-faixa {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		align-items: center;
		padding: var(--vt-space-3) var(--vt-space-4);
		margin-block: var(--vt-space-4);
		border-left: 3px solid var(--vt-confianca);
		background: var(--vt-superficie-2);
		color: var(--vt-texto-forte);
		border-radius: 0 var(--vt-radius-sm) var(--vt-radius-sm) 0;
		font-size: var(--vt-fs-sm);
	}

	.vt-faixa__texto {
		margin: 0;
	}

	.vt-faixa__link {
		color: var(--vt-interacao);
		font-weight: var(--vt-peso-medio);
	}

	.vt-faixa--previa {
		border-left-color: var(--vt-estado-alerta);
		background: var(--vt-superficie-2);
		color: var(--vt-texto-forte);
	}

	/*
	 * A faixa do dono é discreta e permanente, e NUNCA sobrepõe o conteúdo do
	 * vTag (§8.3). Ela vem antes do bloco de concorrentes: quem se encontrou
	 * no Google lê primeiro o convite para assumir o próprio perfil.
	 */
	/*
	 * ── A FAIXA DE REIVINDICAÇÃO ────────────────────────────────────
	 *
	 * É a porta de entrada do profissional que se encontrou no Google — a
	 * §8.3 a chama de maior fonte de lead orgânico prevista —, e era uma caixa
	 * branca com borda cinza, do mesmo desenho do endereço e dos links, a 52%
	 * ou 73% da página conforme o tamanho do perfil. Medido em sete perfis.
	 *
	 * Ela não MUDA DE LUGAR, e é decisão de produto: subir a faixa a
	 * interporia na leitura do paciente, que é quem a página serve primeiro.
	 * O que muda é ela deixar de parecer mais uma caixa.
	 *
	 * O tratamento é o do CONVITE da Home, que faz o mesmo trabalho — chamar o
	 * profissional, uma vez, no fim, sem urgência: superfície-3 preenchida,
	 * que é navy no claro e o poço no escuro. É o único bloco preenchido da
	 * página, e quem rola encontra sem procurar. Não é elemento novo: é o
	 * mesmo painel, na segunda tela.
	 *
	 * A borda continua porque no escuro a superfície-3 é quase o tom do chão:
	 * sem ela o painel não tem forma.
	 */
	.vt-faixa-dono {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-4);
		align-items: center;
		justify-content: space-between;
		margin-top: var(--vt-space-12);
		padding: var(--vt-space-5) var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		font-size: var(--vt-fs-base);
	}

	.vt-faixa-dono--entrega {
		border-color: var(--vt-confianca);
	}

	.vt-faixa-dono__texto {
		color: var(--vt-texto-sobre-3);
		max-width: 46ch;
	}

	.vt-faixa-dono strong {
		color: var(--vt-confianca);
	}

	/*
	 * O botão inverte, pelo mesmo motivo do CTA do cabeçalho: `--primaria` é
	 * navy preenchido, e navy sobre navy não se lê. Ele troca os dois papéis
	 * da superfície em que está — a mesma correção, e a mesma conta: 16:1.
	 */
	/*
	 * `:root` na frente não é preciosismo: `listagem.css` condiciona o botão
	 * primário por tema com `:root[data-vt-tema="auto"] .vt-acao--primaria`
	 * (0,3,0), e sem o `:root` esta regra sai em 0,2,0 e perde em silêncio —
	 * foi o que aconteceu no primeiro teste, com navy sobre navy. É a mesma
	 * armadilha que já custou um botão invisível na etapa 11.
	 */
	:root .vt-faixa-dono .vt-acao--primaria {
		background: var(--vt-texto-sobre-3);
		border-color: var(--vt-texto-sobre-3);
		color: var(--vt-superficie-3);
	}

	:root .vt-faixa-dono .vt-acao--primaria:hover,
	:root .vt-faixa-dono .vt-acao--primaria:focus-visible {
		background: var(--vt-confianca);
		border-color: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	/*
	 * ── O CONVITE À AVALIAÇÃO ───────────────────────────────────────
	 *
	 * "Já foi atendido?" é o motor de autoridade pública do profissional — e
	 * uma das razões de ele compartilhar o próprio vTag. Estava com o mesmo
	 * desenho de qualquer outra seção do trilho: rótulo de 12 px, um parágrafo
	 * e um botão branco.
	 *
	 * Ganha a SUPERFÍCIE que o endereço, o link e a clínica já têm — não um
	 * elemento novo, o mesmo cartão da casa. Numa coluna de referência, ter
	 * corpo é o que separa uma peça de um comentário.
	 */
	.vt-secao--avaliar {
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

	.vt-avaliar__texto {
		margin: 0 0 var(--vt-space-3);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-acao--avaliar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
	}

	/* ── o que vem depois do vTag ───────────────────────────────────── */

	/*
	 * Muda de superfície, não só de espaço: sai da superfície do perfil e cai
	 * no chão da plataforma, com régua em cima. Visualmente, aqui acabou o
	 * vTag e começou o catálogo — que é o que impede o bloco de parecer parte
	 * do perfil de quem está sendo lido.
	 */
	.vt-depois {
		margin-top: var(--vt-space-12);
		padding-block: var(--vt-space-8);
		border-top: 1px solid var(--vt-linha);
		background: var(--vt-superficie-0);
	}

	.vt-depois__titulo {
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		color: var(--vt-texto-medio);
		margin: 0 0 var(--vt-space-4);
	}

	/* ══ o vTag de CLÍNICA (etapa 7) ═══════════════════════════════════ */

	/*
	 * "Mesma linguagem, eixo diferente" (§07). Quase nada muda: identidade,
	 * ações, selos, bio, onde atende e links são os mesmos blocos, com o mesmo
	 * desenho. O que é só da clínica são três coisas — as especialidades no
	 * topo, a equipe, e a fachada do mapa (que o profissional ganha junto).
	 */

	/*
	 * As especialidades, logo abaixo do nome. O profissional tem credencial
	 * ("oftalmologista, CRM/SP 190901"); a clínica não tem — as especialidades
	 * SÃO a credencial dela, e por isso ocupam o lugar que lá é da credencial.
	 *
	 * São links, e o contorno diz isso sem usar a cor de interação: um chip
	 * azul ao lado dos selos mint faria a tela ter duas cores disputando o
	 * mesmo olhar, no lugar exato em que o selo precisa vencer.
	 */
	.vt-chips--esp {
		justify-content: center;
		margin-top: var(--vt-space-1);
	}

	.vt-perfil__topo:has(.vt-id--faixa) .vt-chips--esp {
		justify-content: flex-start;
	}

	.vt-chip--esp {
		color: var(--vt-texto-medio);
		text-decoration: none;
		border-color: var(--vt-linha-forte);
	}

	.vt-chip--esp:hover,
	.vt-chip--esp:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	/* ── a equipe ───────────────────────────────────────────────────── */

	/*
	 * O card é o MESMO das listagens — é o que mantém a hierarquia de níveis
	 * que a §07 pede, com foto no Premium e monograma no resto. O container
	 * query do card decide o desenho pela largura que ele recebeu, então as
	 * duas variantes abaixo mudam só a grade; o card se ajusta sozinho.
	 */
	.vt-equipe {
		display: grid;
		gap: var(--vt-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * `auto-fit`, e não `auto-fill`: a diferença é justamente o buraco.
	 * `auto-fill` cria as colunas que couberem na largura e deixa vazias as
	 * que sobram — dois profissionais numa coluna de mil pixels viravam dois
	 * cards estreitos com meia tela vazia à direita. `auto-fit` colapsa as
	 * colunas sem card e reparte a largura entre as que existem.
	 *
	 * **O teto vai no CONTÊINER, não na coluna.** Tentar limitar a coluna com
	 * `minmax(15rem, 24rem)` foi o erro da primeira versão: o `auto-fit`
	 * passa a criar quantas colunas de 24rem couberem, e 24rem vira o tamanho
	 * de todas — a equipe de cinco, que saía em três colunas, encolheu para
	 * duas. Limitando a LARGURA DA FAIXA pelo número de cards (`--vt-equipe-n`,
	 * que o template imprime), cada caso recebe o que precisa: dois param em
	 * duas colunas com sobra à direita, cinco voltam a três.
	 */
	.vt-equipe--grade {
		--vt-equipe-colunas: min(var(--vt-equipe-n, 4), 4);

		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		justify-content: start;
		/*
		 * `min-width: 0` e o `min(100%, …)` são o cinto e o suspensório do
		 * mesmo defeito: um item de grade nasce com `min-width: auto`, que é o
		 * tamanho INTRÍNSECO do conteúdo — e o conteúdo aqui é uma grade cujo
		 * mínimo é o número de cards vezes 15rem. No celular isso esticava a
		 * faixa para 1248 px numa tela de 414, e os cinco cards saíam lado a
		 * lado atravessando a página. O `max-width` sozinho não segurava: ele
		 * valia 1572, muito acima do estrago.
		 */
		min-width: 0;
		max-width: min(
			100%,
			calc(
				var(--vt-equipe-colunas) * 24rem
				+ (var(--vt-equipe-colunas) - 1) * var(--vt-space-3)
			)
		);
	}

	/*
	 * Um só: uma coluna, com medida. Um card sozinho esticado na largura da
	 * tela não lê como "equipe de um", lê como card quebrado.
	 */
	.vt-equipe--lista {
		grid-template-columns: minmax(0, 1fr);
		max-width: 34rem;
	}

	/*
	 * O CTA de vínculo, discreto e no rodapé da lista (§07): é para o
	 * profissional, não para o paciente, e quem lê esta página quase sempre é o
	 * segundo. Um botão daria a ele o peso de uma ação principal que ele não
	 * tem.
	 */
	.vt-equipe__vinculo {
		margin: var(--vt-space-4) 0 0;
		font-size: var(--vt-fs-sm);
	}

	.vt-equipe__vinculo a {
		color: var(--vt-texto-medio);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

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

	/* ── a fachada do mapa ──────────────────────────────────────────── */

	/*
	 * §07: "o mapa importa mais aqui do que no perfil pessoal — clínica é
	 * endereço. Fachada estática, interativa ao toque."
	 *
	 * Nasce `hidden` e quem revela é `mapa.js`. Sem JavaScript ela nunca
	 * aparece e o "Como chegar" continua servindo — botão que não faz nada é
	 * pior que botão nenhum.
	 */
	.vt-mapa {
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		overflow: hidden;
		background: var(--vt-superficie-2);
	}

	.vt-mapa__abrir {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--vt-space-2);
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 0;
		background: none;
		color: var(--vt-texto-medio);
		font: inherit;
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
	}

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

	.vt-mapa__icone {
		width: 1.25rem;
		height: 1.25rem;
		flex: none;
		color: var(--vt-confianca-texto);
	}

	/* Depois do toque: a fachada vira o mapa, e a altura passa a ser a dele. */
	.vt-mapa.is-aberto {
		background: none;
		flex: 1 0 100%;
	}

	.vt-mapa__quadro {
		display: block;
		width: 100%;
		height: 20rem;
		border: 0;
	}

	/* ── galeria da clínica ─────────────────────────────────────────── */

	/*
	 * O MOSAICO é uma grade de `auto-fill`, e não colunas fixas: com sete
	 * fotos numa tela grande saem quatro por linha, e no celular duas, sem
	 * ninguém decidir nada. A proporção 4:3 é fixa porque foto de ambiente é
	 * quase sempre paisagem — alturas diferentes fariam a grade parecer
	 * quebrada, que é o oposto do que um lugar organizado quer dizer.
	 *
	 * A `fileira` (até quatro fotos) rola na horizontal no celular em vez de
	 * empilhar: quatro fotos empilhadas ocupariam a tela inteira e empurrariam
	 * os links para longe.
	 */
	.vt-galeria-vtag {
		display: grid;
		/* 14rem e não 11: medido com as sete fotos da Franca Visão, 11rem dava
		   cinco por linha e deixava duas órfãs num vazio de meia tela. Com
		   14rem saem quatro e três — e a foto fica grande o bastante para
		   justificar os 1600px que o admin guarda. */
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		gap: var(--vt-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-galeria-vtag__item {
		margin: 0;
	}

	.vt-galeria-vtag__link {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
		border: 1px solid var(--vt-linha);
	}

	.vt-galeria-vtag__link img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 220ms ease;
	}

	/* O leve zoom diz "isto abre", que é a única affordance que uma grade de
	   fotos tem. Some para quem pediu menos movimento. */
	.vt-galeria-vtag__link:hover img,
	.vt-galeria-vtag__link:focus-visible img {
		transform: scale(1.03);
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-galeria-vtag__link img { transition: none; }
		.vt-galeria-vtag__link:hover img,
		.vt-galeria-vtag__link:focus-visible img { transform: none; }
	}

	/*
	 * A legenda só aparece no hover/foco e sobre um véu — no repouso ela
	 * competiria com a foto, e é a foto que está sendo mostrada. No toque não
	 * há hover: lá ela não aparece, e a legenda inteira espera no diálogo.
	 */
	.vt-galeria-vtag__legenda {
		position: absolute;
		inset: auto 0 0;
		padding: var(--vt-space-4) var(--vt-space-2) var(--vt-space-2);
		background: linear-gradient(to top, rgba(1, 33, 71, 0.85), transparent);
		color: #fff;
		font-size: var(--vt-fs-micro);
		line-height: 1.3;
		opacity: 0;
		transition: opacity 180ms ease;
	}

	.vt-galeria-vtag__link:hover .vt-galeria-vtag__legenda,
	.vt-galeria-vtag__link:focus-visible .vt-galeria-vtag__legenda {
		opacity: 1;
	}

	@media (max-width: 720px) {
		/*
		 * Duas colunas, e não o que o `auto-fill` decidiria: a 414 px a coluna
		 * de 14rem só cabe uma vez, e as sete fotos da galeria viravam sete
		 * telas de rolagem antes dos horários e dos links. Miniatura de ~180 px
		 * ainda diz o que a foto mostra, e a ampliação está a um toque.
		 */
		.vt-galeria-vtag--mosaico {
			grid-template-columns: repeat(2, 1fr);
		}

		.vt-galeria-vtag--fileira {
			display: flex;
			gap: var(--vt-space-3);
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			/* A sombra de rolagem some com o padding; o negativo devolve a
			   sangria até a borda da tela, que é o que faz parecer que há mais
			   foto adiante. */
			margin-inline: calc(var(--vt-space-4) * -1);
			padding-inline: var(--vt-space-4);
		}

		.vt-galeria-vtag--fileira .vt-galeria-vtag__item {
			flex: 0 0 72%;
			scroll-snap-align: start;
		}
	}

	/* ── a foto ampliada ────────────────────────────────────────────── */

	.vt-lightbox {
		max-width: min(92vw, 60rem);
		max-height: 92vh;
		padding: 0;
		border: 0;
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		color: var(--vt-texto);
		overflow: visible;
	}

	.vt-lightbox::backdrop {
		background: rgba(1, 33, 71, 0.8);
	}

	.vt-lightbox__quadro {
		margin: 0;
	}

	.vt-lightbox__foto {
		display: block;
		max-width: 100%;
		max-height: 78vh;
		margin: 0 auto;
		border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0;
	}

	.vt-lightbox__legenda {
		padding: var(--vt-space-3) var(--vt-space-4);
		font-size: var(--vt-fs-sm);
		color: var(--vt-texto-fraco);
		text-align: center;
	}

	.vt-lightbox__seta,
	.vt-lightbox__fechar {
		position: absolute;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-1);
		color: var(--vt-texto);
		font-size: 1.4rem;
		line-height: 1;
		cursor: pointer;
	}

	.vt-lightbox__seta--antes { inset: 50% auto auto -1.25rem; transform: translateY(-50%); }
	.vt-lightbox__seta--depois { inset: 50% -1.25rem auto auto; transform: translateY(-50%); }
	.vt-lightbox__fechar { inset: -1.25rem -1.25rem auto auto; }

	/* Numa tela estreita não há margem fora do quadro para pendurar botão:
	   eles entram para dentro, sobre a própria foto. */
	@media (max-width: 720px) {
		.vt-lightbox__seta--antes { inset: 50% auto auto 0.5rem; }
		.vt-lightbox__seta--depois { inset: 50% 0.5rem auto auto; }
		.vt-lightbox__fechar { inset: 0.5rem 0.5rem auto auto; }
	}

	/* ── horários e convênios ───────────────────────────────────────── */

	/*
	 * Mesma anatomia da ficha (`.vt-ficha`): rótulo à esquerda, valor à
	 * direita, régua entre as linhas. Não é decisão de estilo — é a gramática
	 * do catálogo, e horário é dado de ficha tanto quanto o registro no
	 * conselho. A hora sai em tabular para as colunas de minutos alinharem.
	 */
	.vt-horarios {
		display: grid;
		gap: 0;
		margin: 0;
	}

	/*
	 * O CORPO é o da ficha, não o do texto corrido.
	 *
	 * O bloco não declarava tamanho e herdava o corpo base: o dia saía em 17 e
	 * a hora em 16, ao lado de uma ficha de registro rodando em 15 na MESMA
	 * coluna — e com o título da seção em 12. O horário, que é dado de
	 * consulta, pesava mais na página que o dado principal e que o próprio
	 * título que o anuncia.
	 *
	 * Pior: o dia (17) ficava maior que a hora (16), invertendo os papéis —
	 * o rótulo gritando mais alto que o dado. Em `.vt-ficha__par` os dois têm
	 * o mesmo corpo e quem os distingue é a cor e a família; aqui passa a ser
	 * igual.
	 */
	.vt-horarios__linha {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vt-space-4);
		padding-block: var(--vt-space-2);
		border-bottom: 1px solid var(--vt-linha);
		font-size: var(--vt-fs-sm);
	}

	.vt-horarios__linha:last-child {
		border-bottom: 0;
	}

	.vt-horarios__linha dt {
		color: var(--vt-texto-fraco);
	}

	/*
	 * As faixas do mesmo dia EMPILHAM, alinhadas à direita.
	 *
	 * Um dia com intervalo de almoço tem duas faixas, e um com encaixe à tarde
	 * tem três. Em linha única com `nowrap` — como era — elas atravessavam o
	 * trilho de 288 px por 138, e no celular faziam a página inteira rolar de
	 * lado. O `nowrap` continua, mas em cada FAIXA: "08:00–12:00" não pode
	 * quebrar no meio; o conjunto pode.
	 */
	.vt-horarios__linha dd {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.1rem;
		min-width: 0;
		margin: 0;
		font-variant-numeric: tabular-nums;
		font-family: var(--vt-font-mono);
		font-size: 0.94em;
	}

	.vt-horarios__faixa {
		white-space: nowrap;
	}

	.vt-horarios__nota {
		margin-block: var(--vt-space-2) 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
	}

	.vt-convenios {
		margin-block: var(--vt-space-5) 0;
	}

	/* Sem régua acima: o título já separa. Duas linhas fininhas seguidas
	   fariam a seção parecer três seções. */
	.vt-convenios__titulo {
		margin-block: 0 var(--vt-space-2);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		color: var(--vt-texto-fraco);
	}

	/*
	 * O chip de convênio é o mesmo da especialidade, com uma diferença que
	 * importa: ele NÃO clica. O filtro por convênio existe na busca, não aqui,
	 * e um chip com cara de link que não leva a lugar nenhum é a pior das duas
	 * opções. Sem borda de foco, sem hover, cursor normal.
	 */
	.vt-chips--convenio {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-chip--convenio {
		padding: 0.15rem var(--vt-space-3);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-2);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
	}

	/* ═══════════════════════════════════════════════════════════════════
	   A CONFIRMAÇÃO DE DADOS (§5.2)
	   ═══════════════════════════════════════════════════════════════════
	   Duas peças, e a divisão entre elas é O desenho:

	   O PAINEL explica, uma vez, no topo. Ele é CLARO — superfície-1 com
	   uma faixa mint na borda. Ele já foi preenchido de navy, e a tela
	   ficava carregada: um bloco escuro de sete linhas antes do vTag
	   competia com a página que a pessoa veio conferir, e é a página que
	   importa. Informação quer leitura, não volume.

	   O BALÃO decide, e é ele que fica preenchido. A troca é deliberada:
	   o peso visual pertence à ÚNICA coisa que a pessoa precisa fazer aqui.
	   Antes ele era uma faixa clara com dois botões, discreta a ponto de
	   passar por rodapé — e quem chega pela primeira vez não achava onde
	   aprovar ou recusar. Agora ele é o bloco mais forte da tela.
	   ═══════════════════════════════════════════════════════════════════ */

	.vt-confirmar {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		margin-block: var(--vt-space-5) var(--vt-space-6);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-left: 3px solid var(--vt-confianca);
		border-radius: 0 var(--vt-radius-lg) var(--vt-radius-lg) 0;
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
	}

	.vt-confirmar__titulo {
		margin: 0;
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		line-height: 1.25;
		color: var(--vt-texto-forte);
		text-wrap: balance;
	}

	/*
	 * **Sem trava de medida aqui.** O painel já tem largura máxima: é a do
	 * conteúdo do vTag. Um `max-width: 60ch` por dentro quebrava as linhas
	 * MUITO antes da borda do card e deixava uma coluna estreita com uma
	 * faixa vazia à direita — texto espremido dentro de uma caixa larga. Quem
	 * governa a medida é o container, não cada parágrafo.
	 */
	.vt-confirmar__texto {
		margin: 0;
		color: var(--vt-texto-medio);
	}

	.vt-confirmar__texto strong {
		color: var(--vt-confianca-texto);
		font-weight: var(--vt-peso-titulo);
	}

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

	.vt-confirmar__garantias li {
		display: grid;
		grid-template-columns: 1.1rem 1fr;
		gap: var(--vt-space-2);
		align-items: start;
		font-size: var(--vt-fs-sm);
		color: var(--vt-texto-medio);
	}

	/*
	 * O tique é desenhado com borda, não com caractere: `✓` de fonte muda de
	 * peso e de linha de base entre sistemas, e numa lista curta a diferença
	 * aparece.
	 */
	.vt-confirmar__garantias li::before {
		content: "";
		width: 0.55rem;
		height: 0.3rem;
		margin-top: 0.42rem;
		border-left: 2px solid var(--vt-confianca-texto);
		border-bottom: 2px solid var(--vt-confianca-texto);
		transform: rotate(-45deg);
	}

	/*
	 * A SITUAÇÃO é a única linha do painel com fundo próprio: é o dado que a
	 * pessoa veio buscar — em que pé está o perfil dela. Agora que o painel é
	 * claro, os tons vêm de `--vt-estado-*`, que trocam com o tema; as
	 * variantes `-e` serviam ao fundo escuro fixo de antes.
	 */
	.vt-confirmar__situacao {
		margin: 0;
		padding: var(--vt-space-3) var(--vt-space-4);
		border-left: 3px solid currentcolor;
		border-radius: 0 var(--vt-radius-sm) var(--vt-radius-sm) 0;
		background: color-mix(in srgb, currentcolor 10%, transparent);
		font-size: var(--vt-fs-sm);
		line-height: 1.55;
	}

	.vt-confirmar__situacao--ok { color: var(--vt-estado-ok); }
	.vt-confirmar__situacao--aviso { color: var(--vt-estado-alerta); }
	.vt-confirmar__situacao--alerta { color: var(--vt-estado-erro); }

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

	.vt-confirmar--feito {
		gap: var(--vt-space-2);
		border-left-color: var(--vt-confianca);
	}

	/*
	 * O convite depois da confirmação: uma linha, no fim, separada por um filete.
	 *
	 * **Ele não pode virar cobrança.** Quem acabou de confirmar já entregou o
	 * que a rotina pedia, e a §5.2 é explícita: profissional disposto a
	 * confirmar periodicamente já é conquista. Por isso o convite é texto
	 * corrente com um link — não um botão, não um bloco, não uma segunda
	 * chamada disputando com a primeira.
	 */
	.vt-confirmar__convite {
		margin: var(--vt-space-2) 0 0;
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
		font-size: var(--vt-fs-sm);
		color: var(--vt-texto-medio);
	}

	.vt-confirmar__link {
		color: var(--vt-interacao);
		font-weight: var(--vt-peso-medio);
		white-space: nowrap;
	}

	/*
	 * AS DUAS PORTAS, lado a lado e do mesmo tamanho.
	 *
	 * A da esquerda resolve pela equipe, a da direita pelo próprio profissional
	 * — e nenhuma das duas é a "certa": a §5.2 quer as duas disponíveis, porque
	 * uma garante o dado correto e a outra pode virar uma conta. Empilhar uma
	 * embaixo da outra faria a segunda parecer alternativa de quem recusou a
	 * primeira; a grade de duas colunas as apresenta como escolha.
	 */
	.vt-confirmar__portas {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
		gap: var(--vt-space-4);
		margin-top: var(--vt-space-2);
	}

	.vt-confirmar__porta {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--vt-space-2);
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-confirmar__porta form {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--vt-space-2);
		width: 100%;
	}

	.vt-confirmar__porta-titulo {
		margin: 0;
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		color: var(--vt-texto-forte);
	}

	.vt-confirmar__rotulo {
		font-size: var(--vt-fs-sm);
		color: var(--vt-texto-medio);
	}

	.vt-confirmar__campo {
		width: 100%;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
		font: inherit;
		font-size: var(--vt-fs-sm);
		resize: vertical;
	}

	@supports not (background: color-mix(in srgb, red 50%, transparent)) {
		.vt-confirmar__situacao { background: none; }
	}

	/* ── o balão: o protagonista ────────────────────────────────────── */

	/*
	 * `sticky` e não `fixed`: o balão é o último filho do `main`, então fica
	 * colado no rodapé da janela enquanto houver página e assenta no próprio
	 * lugar quando ela acaba — sem reservar espaço embaixo e sem cobrir o fim
	 * do conteúdo, que é o que o `fixed` faria em tela baixa.
	 *
	 * **De borda a borda da TELA, não da coluna.** O balão nasceu com a
	 * largura do `main`, e o fundo escuro terminava junto com a coluna de
	 * texto: sobrava chão claro dos dois lados e ele lia como mais um bloco do
	 * conteúdo — um rodapé opcional, não uma decisão pendente. Uma faixa que
	 * atravessa a janela inteira não pertence à página, pertence à tela, e é
	 * essa diferença que o faz parar quem está rolando.
	 *
	 * O recuo é `calc(50% - 50vw)` a partir do centro da coluna. O par
	 * obrigatório é o `overflow-x: clip` no `main`, logo abaixo: `100vw`
	 * inclui a barra de rolagem, e sem a poda isso vira rolagem horizontal na
	 * página inteira. `clip` e não `hidden` de propósito — `hidden` criaria um
	 * contêiner de rolagem e o `sticky` deixaria de grudar.
	 */
	.vt-balao {
		position: sticky;
		bottom: 0;
		z-index: 20;
		width: 100vw;
		margin-top: var(--vt-space-6);
		margin-inline: calc(50% - 50vw);
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		border-top: 3px solid var(--vt-confianca);
		box-shadow: 0 -10px 30px -14px rgb(1 33 71 / 55%);
	}

	/*
	 * A poda vai no `body`, e NÃO no `main`.
	 *
	 * A primeira tentativa foi `overflow-x: clip` no próprio `main` — que é o
	 * elemento estreito. Ele podava justamente o transbordo que o balão precisa
	 * para atravessar a tela, e a faixa voltava a terminar na largura da
	 * coluna. Quem poda tem de ser um ancestral que já ocupa a janela inteira.
	 *
	 * `clip` e não `hidden`: `hidden` criaria um contêiner de rolagem e o
	 * `sticky` do balão deixaria de grudar. E `:has()` para a regra valer só
	 * nesta tela — o resto do site não paga por ela.
	 */
	body:has(.vt-main--confirmar) {
		overflow-x: clip;
	}

	/*
	 * O conteúdo do balão volta à largura da coluna: a FAIXA atravessa a tela,
	 * o texto não. Pergunta e botões alinhados com o resto da página é o que
	 * mantém a faixa larga sem virar bagunça em monitor grande.
	 */
	.vt-balao__interno {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-3) var(--vt-space-5);
		max-width: 64rem;
		margin-inline: auto;
		padding: var(--vt-space-4);
	}

	.vt-balao__chamada {
		flex: 1 1 18rem;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	/*
	 * A sobrelinha em mint e caixa alta é o que anuncia a pendência antes de a
	 * pessoa ler a frase inteira — dois centímetros de texto que mudam a faixa
	 * de "opção no rodapé" para "falta você responder".
	 */
	.vt-balao__olho {
		margin: 0;
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--vt-confianca);
	}

	/*
	 * A pergunta é a chamada da tela, não uma legenda: ela sobe de tamanho e
	 * de peso porque precisa ser lida por quem chegou distraído.
	 */
	.vt-balao__pergunta {
		margin: 0;
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-medio);
		line-height: 1.35;
		color: var(--vt-texto-sobre-3);
		text-wrap: balance;
	}

	.vt-balao__pergunta strong {
		color: var(--vt-confianca);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-balao__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
	}

	.vt-balao__forma { margin: 0; }

	/*
	 * Os dois botões sobre a superfície-3, que é escura nos DOIS temas — daí
	 * as cores virem escritas aqui e não do `.vt-acao` comum, que é desenhado
	 * para fundo claro. O "sim" é mint cheio, a cor da confiança; o "não" é
	 * contorno claro. Os dois têm o mesmo tamanho: recusar não pode ser mais
	 * difícil de achar do que aprovar.
	 */
	.vt-balao .vt-acao {
		min-height: 3rem;
		padding-inline: var(--vt-space-5);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		border-radius: var(--vt-radius-full);
	}

	/*
	 * **`:root` na frente, pela mesma razão da faixa do dono.**
	 *
	 * `listagem.css` condiciona o primário por tema com
	 * `:root[data-vt-tema="auto"] .vt-acao--primaria` (0,3,0). Sem o `:root`
	 * esta regra sai em 0,2,0 e perde em silêncio — e no tema claro o botão
	 * "sim" voltava a ser navy preenchido, sobre o navy do balão: sumia. É a
	 * mesma armadilha que a nota da faixa do dono descreve, e ela pegou de
	 * novo.
	 */
	:root .vt-balao .vt-acao--primaria,
	:root .vt-balao .vt-acao--primaria:hover,
	:root .vt-balao .vt-acao--primaria:focus-visible {
		background: var(--vt-confianca);
		border-color: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	/*
	 * O "não" também é um formulário — o clique já avisa a agência (§5.2), e a
	 * tela seguinte é que pergunta o motivo. Enquanto ele era um `<details>`
	 * com um campo dentro, quem clicava e desistia de escrever não deixava
	 * rastro nenhum.
	 */
	.vt-balao__nao { margin: 0; }

	:root .vt-balao__nao .vt-acao,
	:root .vt-balao__nao .vt-acao:hover,
	:root .vt-balao__nao .vt-acao:focus-visible {
		background: transparent;
		border-color: color-mix(in srgb, var(--vt-texto-sobre-3) 45%, transparent);
		color: var(--vt-texto-sobre-3);
	}

	:root .vt-balao__nao .vt-acao:hover,
	:root .vt-balao__nao .vt-acao:focus-visible {
		border-color: var(--vt-confianca);
	}

	@supports not (border-color: color-mix(in srgb, red 50%, transparent)) {
		:root .vt-balao__nao .vt-acao { border-color: var(--vt-texto-sobre-3); }
	}

	/*
	 * **O balão e a barra de contato disputavam o mesmo rodapé.**
	 *
	 * Abaixo de 720 px, `.vt-acoes--fixa` — Agendar, Como chegar,
	 * Compartilhar — é `position: fixed` no pé da janela, com o mesmo
	 * `z-index` do balão. As duas apareciam uma sobre a outra, e a de baixo
	 * ficava inalcançável.
	 *
	 * Na tela da confirmação o rodapé é do balão: aquelas ações são para quem
	 * VISITA o perfil, e quem está aqui é o dono, decidindo sobre os próprios
	 * dados.
	 *
	 * **E ela SOME, em vez de voltar para o fluxo.** Devolvê-la ao fluxo foi a
	 * primeira tentativa, e criava um problema pior do que resolvia: o
	 * profissional passava a ver o próprio vTag diferente de como o público o
	 * vê — uma barra no meio da página, num lugar onde ninguém mais a
	 * encontra. Esta tela existe para mostrar o vTag como ele é; um elemento
	 * fora do lugar é justamente o que ela não pode inventar. Some limpo, e o
	 * telefone e o WhatsApp que ele veio conferir continuam no corpo da página.
	 *
	 * Só no celular: no desktop esta barra não é fixa, está no lugar dela, e o
	 * público a vê ali.
	 */
	@media (max-width: 720px) {
		.vt-main--confirmar .vt-acoes--fixa {
			display: none;
		}

		/*
		 * E o espaço reservado para ela sai junto. `.vt-main--perfil` guarda um
		 * alvo de toque no fim da página para a barra fixa não cobrir o
		 * conteúdo; sem barra, aquilo vira uma faixa vazia entre o último bloco
		 * e o balão.
		 */
		.vt-main--confirmar.vt-main--perfil {
			padding-bottom: var(--vt-space-16);
		}
	}

	/*
	 * No celular as duas respostas dividem a linha — e a divisão é GRADE, não
	 * flex.
	 *
	 * Medido em 376 px: com `flex: 1 1 0` cada botão ficava com 145 px, 290
	 * mais 8 de gap, dentro de uma faixa de 297. Sobravam menos de dois
	 * pixels, o segundo caía para a linha de baixo e o balão passava a ocupar
	 * 20% da altura da tela — exatamente o que ele existe para não fazer.
	 * `1fr 1fr` reparte o que existe em vez de pedir espaço: não há sobra a
	 * acabar.
	 *
	 * O `min-width: 0` é o par obrigatório disso: item de grade tem largura
	 * mínima automática do conteúdo, e um rótulo comprido estouraria a coluna
	 * mesmo com a fração certa.
	 */
	@media (max-width: 34rem) {
		.vt-balao__interno {
			gap: var(--vt-space-2);
			padding: var(--vt-space-3);
		}

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

		.vt-balao__acoes {
			display: grid;
			grid-template-columns: 1fr 1fr;
			width: 100%;
			gap: var(--vt-space-2);
			/*
			 * `stretch` desfaz o `center` que a regra de cima herda para cá.
			 * Com o centro, os dois botões ficavam com alturas diferentes — 47
			 * e 54 px, porque o rótulo do "não" quebra em duas linhas — e o par
			 * aparecia desencontrado. Esticados, têm a altura da linha e a
			 * mesma base.
			 */
			align-items: stretch;
		}

		.vt-balao__forma { min-width: 0; display: flex; }

		.vt-balao .vt-acao {
			width: 100%;
			height: 100%;
			padding-inline: var(--vt-space-2);
			text-align: center;
		}

		.vt-confirmar {
			padding: var(--vt-space-4);
		}
	}
}