/**
 * Área do usuário.
 *
 * **Outro ambiente, outras regras.** O catálogo é vitrine: austero, sem
 * ornamento, feito para o paciente que consulta em vinte segundos e vai embora.
 * A área do usuário é SISTEMA — é onde o profissional trabalha, administra o
 * próprio perfil e volta toda semana. As duas coisas não se desenham igual, e
 * tratar a segunda com a régua da primeira produzia o que havia aqui: um
 * formulário cinza flutuando numa página vazia, que não dá a ninguém a
 * impressão de estar entrando em coisa alguma.
 *
 * O que esta folha persegue é hierarquia: quem chega precisa perceber, antes de
 * digitar a senha, que passou de visitante a membro. Isso se faz com
 * superfície, profundidade e vocabulário de sistema — não com mais texto.
 *
 * Ela é também o começo da saída de `vtag.css`, a última folha do desenho
 * antigo que o tema ainda carrega. Regra de sempre nesta migração: declarar
 * TODA propriedade que a folha velha declarava para o mesmo seletor, porque
 * `@layer` só vence onde há concorrente.
 */

@layer componente {
	/*
	 * ── a casca do portão ───────────────────────────────────────────
	 */

	.vt-corpo-portao {
		/*
		 * A tela inteira é uma superfície só, e não a página do site com um
		 * formulário dentro. O gradiente é o que dá PROFUNDIDADE sem imagem:
		 * duas luzes frias, muito diluídas, nos cantos onde o conteúdo não
		 * está — o suficiente para o fundo deixar de ser um retângulo chapado.
		 */
		min-height: 100dvh;
		background:
			radial-gradient(70rem 40rem at 88% -10%, rgba(82, 238, 198, 0.16), transparent 60%),
			radial-gradient(60rem 40rem at -10% 110%, rgba(1, 33, 71, 0.10), transparent 60%),
			var(--vt-superficie-2);
	}

	.vt-portao__topo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-4);
		max-width: 76rem;
		margin-inline: auto;
		padding: var(--vt-space-5) var(--vt-space-4);
	}

	.vt-portao__marca {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		margin: 0;
	}

	.vt-portao__marca a {
		display: inline-flex;
		align-items: center;
	}

	/*
	 * A divisa entre a marca e o nome da área. É o gesto que diz "isto é um
	 * lugar dentro do produto", como o `/` que separa o produto do módulo nos
	 * consoles que este público já usa.
	 */
	.vt-portao__marca-divisa {
		width: 1px;
		height: 1.25rem;
		background: var(--vt-linha);
	}

	.vt-portao__marca-area {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: 0.01em;
	}

	.vt-portao__voltar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		text-decoration: none;
	}

	.vt-portao__voltar:hover,
	.vt-portao__voltar:focus-visible {
		color: var(--vt-texto-forte);
	}

	/*
	 * ── a grade ─────────────────────────────────────────────────────
	 *
	 * Formulário e painel dividem a tela. A proporção favorece o painel de
	 * pouco — ele carrega o argumento, e o formulário só precisa da medida em
	 * que um campo continua confortável de preencher.
	 */
	.vt-portao__grade {
		display: grid;
		gap: var(--vt-space-8);
		max-width: 76rem;
		margin-inline: auto;
		padding: var(--vt-space-4) var(--vt-space-4) var(--vt-space-12);
	}

	@media (min-width: 960px) {
		.vt-portao__grade {
			grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
			gap: var(--vt-space-12);
			/*
			 * `start`, e não `center`: centrado, o painel se alinhava pela
			 * COLUNA — que é mais alta que o cartão, porque inclui o "Ainda
			 * não tem conta?" abaixo dele. O painel descia 46 px, e as duas
			 * bases caíam quase no mesmo lugar (746 e 746), o que lia como
			 * dois blocos alinhados pelo pé, com os topos desencontrados.
			 * Alinhados pelo topo, os dois começam na mesma linha e a
			 * diferença de altura vira o que ela é: dois conteúdos de tamanhos
			 * diferentes.
			 */
			align-items: start;
			min-height: calc(100dvh - 12rem);
			padding-block: var(--vt-space-8) var(--vt-space-12);
		}
	}

	/*
	 * ── o cartão do formulário ──────────────────────────────────────
	 *
	 * Superfície elevada: é a mesa de trabalho, e ela precisa parecer uma
	 * coisa que se pode tocar. A sombra é larga e fraca — sistema sério não
	 * usa sombra dura —, e a borda de um pixel segura a aresta nos temas em
	 * que a sombra some.
	 */
	/*
	 * ── a porta de quem foi convidado ───────────────────────────────
	 *
	 * O convite era um `.vt-alerta--ok` colado no título — o mesmo elemento
	 * verde de "deu certo ao salvar" —, e ele é a RAZÃO de a pessoa estar nesta
	 * tela. Agora é um bloco próprio acima do cartão, com a identidade de quem
	 * convidou.
	 *
	 * **Ele não é um segundo cartão.** Fundo próprio e sem sombra, contra o
	 * cartão branco elevado logo abaixo: dois objetos com a mesma anatomia
	 * disputariam a atenção, e o que a pessoa precisa fazer é preencher o de
	 * baixo. Este apresenta; aquele age.
	 */
	.vt-convite-porta {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		margin-bottom: var(--vt-space-5);
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

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

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

	/*
	 * O logo da clínica, no mesmo desenho do retrato que a área da conta usa em
	 * toda parte: círculo, `object-fit: cover`, e o monograma quando não há
	 * imagem — nunca um retângulo cinza vazio.
	 */
	.vt-convite-porta__marca {
		display: grid;
		flex: none;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		overflow: hidden;
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-1);
		box-shadow: inset 0 0 0 1px var(--vt-linha);
	}

	.vt-convite-porta__marca img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vt-convite-porta__monograma {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
	}

	.vt-convite-porta__identidade {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}

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

	.vt-convite-porta__lugar {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-convite-porta__chamada {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		line-height: var(--vt-lh-compacta);
		letter-spacing: -0.01em;
		text-wrap: balance;
	}

	/*
	 * Os três passos são uma LISTA, e não um parágrafo: a pessoa está decidindo
	 * se entra, e três coisas contadas em sequência se conferem uma a uma. O
	 * marcador é um traço curto — bolinha aqui pesaria mais que o texto.
	 */
	.vt-convite-porta__passos {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-convite-porta__passos li {
		display: flex;
		gap: var(--vt-space-2);
	}

	.vt-convite-porta__passos li::before {
		content: "—";
		flex: none;
		color: var(--vt-texto-fraco);
	}

	/*
	 * O convite que venceu. Alerta, e não erro: nada deu errado — o prazo
	 * acabou, e o caminho continua existindo. A cor do erro aqui faria a pessoa
	 * achar que não pode se cadastrar.
	 */
	.vt-convite-porta--morta {
		border-color: var(--vt-estado-alerta);
	}

	.vt-convite-porta--morta .vt-convite-porta__olho {
		color: var(--vt-estado-alerta);
	}

	.vt-convite-porta__saida {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-portao__cartao {
		padding: var(--vt-space-8);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: 0 1px 2px rgba(1, 33, 71, 0.04), 0 12px 32px -12px rgba(1, 33, 71, 0.18);
	}

	.vt-portao__forma-titulo {
		margin: 0 0 var(--vt-space-2);
		font-size: var(--vt-fs-2xl);
		line-height: 1.15;
		letter-spacing: -0.01em;
	}

	.vt-portao__forma-apoio {
		margin: 0 0 var(--vt-space-6);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * A linha de "continuar conectado" e "esqueci minha senha" divide o
	 * espaço: são as duas decisões secundárias do formulário, e empilhá-las
	 * fazia a página parecer mais longa do que é.
	 */
	.vt-portao__linha-acao {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		margin-block: var(--vt-space-2) var(--vt-space-6);
	}

	.vt-portao__lembrar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

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

	/*
	 * O botão ocupa a largura inteira do cartão. Num formulário de duas
	 * entradas, o alvo principal não disputa espaço com nada — e a largura
	 * cheia é o que o dedo encontra sem mirar, no celular.
	 */
	/* ── o aceite dos termos ─────────────────────────────────────────── */

	/*
	 * A caixa e o texto, alinhados pela primeira linha. `align-items: center`
	 * numa frase de duas linhas centraliza a caixa entre elas, o que parece
	 * erro de composição — a caixa pertence à primeira linha, e é com ela que
	 * se alinha.
	 *
	 * A caixa não é redesenhada: `accent-color` pinta o controle nativo com a
	 * cor da marca e mantém o comportamento, o foco e o estado indeterminado
	 * que o navegador já sabe desenhar melhor do que qualquer reimplementação.
	 */
	.vt-aceite {
		margin-block: var(--vt-space-5);
	}

	.vt-aceite__linha {
		display: flex;
		gap: var(--vt-space-3);
		align-items: start;
	}

	.vt-aceite__caixa {
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
		/* Alinha o quadrado à altura-x da primeira linha do rótulo. */
		margin-top: 0.2rem;
		accent-color: var(--vt-superficie-3);
		cursor: pointer;
	}

	:root[data-vt-tema="escuro"] .vt-aceite__caixa,
	:root[data-vt-tema="auto"] .vt-aceite__caixa {
		accent-color: var(--vt-confianca);
	}

	@media (prefers-color-scheme: light) {
		:root[data-vt-tema="auto"] .vt-aceite__caixa {
			accent-color: var(--vt-superficie-3);
		}
	}

	.vt-aceite__texto {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
		cursor: pointer;
	}

	.vt-aceite__texto a {
		color: var(--vt-interacao);
		text-underline-offset: 2px;
	}

	/*
	 * A linha do caminho do Google não tem caixa: é aceite por conduta, e o
	 * que ela faz é dizer o que o clique no botão significa. Entra menor e
	 * mais fraca, colada no botão que ela qualifica.
	 */
	.vt-aceite--google {
		margin: 0 0 var(--vt-space-3);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		line-height: var(--vt-lh-compacta);
	}

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

	.vt-portao__enviar {
		display: block;
		width: 100%;
		padding: var(--vt-space-3) var(--vt-space-5);
		border: 0;
		border-radius: var(--vt-radius-sm);
		/*
		 * As cores são as do BOTÃO PRIMÁRIO do sistema, e não um navy cravado:
		 * com o navy fixo, o botão sumia no tema escuro — fundo do botão e
		 * fundo do cartão eram a mesma cor, e o alvo principal da tela virava
		 * um retângulo invisível com uma palavra dentro. `superficie-3` inverte
		 * junto com o tema, e no escuro o primário do catálogo é mint.
		 */
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		font-family: inherit;
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
		cursor: pointer;
		transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
	}

	:root[data-vt-tema="escuro"] .vt-portao__enviar,
	:root[data-vt-tema="auto"] .vt-portao__enviar {
		background: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	@media (prefers-color-scheme: light) {
		:root[data-vt-tema="auto"] .vt-portao__enviar {
			background: var(--vt-superficie-3);
			color: var(--vt-texto-sobre-3);
		}
	}

	.vt-portao__enviar:hover,
	.vt-portao__enviar:focus-visible {
		box-shadow: 0 8px 20px -8px rgba(1, 33, 71, 0.5);
		transform: translateY(-1px);
	}

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

	.vt-portao__rodape {
		margin: var(--vt-space-5) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		text-align: center;
	}

	/*
	 * ── o painel ────────────────────────────────────────────────────
	 *
	 * Navy, com uma segunda luz mint no alto: é a superfície da marca e o
	 * único lugar da tela onde o mint aparece — sobre navy ele tem 11:1
	 * (§12.1) e pode brilhar.
	 */
	.vt-portao__painel {
		position: relative;
		overflow: hidden;
		padding: var(--vt-space-8);
		border-radius: var(--vt-radius-lg);
		background:
			radial-gradient(40rem 24rem at 100% 0%, rgba(82, 238, 198, 0.18), transparent 62%),
			var(--vt-navy, #012147);
		color: #fff;
	}

	/*
	 * `--vt-space-12`, e não um `--vt-space-10` que eu supus existir: a escala
	 * salta de 8 para 12. E o erro não sai barato — `var()` inválido não faz a
	 * declaração ser ignorada em favor da anterior, como um valor mal escrito
	 * faria: ela é aceita no parse e vira "guaranteed-invalid" na computação,
	 * o que para `padding` significa o valor inicial, ZERO. O painel ficou com
	 * o texto encostado na borda, e a regra de cima nem chegou a valer.
	 */
	@media (min-width: 960px) {
		.vt-portao__painel {
			padding: var(--vt-space-12);
		}
	}

	/*
	 * O SELO é a frase que muda a hierarquia: quem lê descobre, antes do
	 * título, que a área não é para qualquer visitante. O ponto que pulsa é a
	 * convenção de "sistema ativo" — a mesma bolinha de status que este
	 * público vê em todo console.
	 */
	.vt-portao__selo {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		margin: 0 0 var(--vt-space-5);
		padding: 0.3rem var(--vt-space-3);
		border: 1px solid rgba(82, 238, 198, 0.32);
		border-radius: var(--vt-radius-full);
		background: rgba(82, 238, 198, 0.10);
		color: var(--vt-mint, #52eec6);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/*
	 * O ponto fica no MEIO do selo, em qualquer largura.
	 *
	 * Uma versão anterior o prendia ao topo quando o texto quebrasse em duas
	 * linhas no celular — mas a regra pegava desde 959 px, onde o selo ainda
	 * cabe numa linha só, e o ponto subia sem motivo. Centrado, ele acompanha
	 * o texto nos dois casos: é um indicador de estado, não um marcador de
	 * primeira linha.
	 */
	.vt-portao__selo-ponto {
		flex: 0 0 auto;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--vt-mint, #52eec6);
		box-shadow: 0 0 0 0 rgba(82, 238, 198, 0.6);
		animation: vt-pulso 2.4s ease-out infinite;
	}

	@keyframes vt-pulso {
		70% { box-shadow: 0 0 0 8px rgba(82, 238, 198, 0); }
		100% { box-shadow: 0 0 0 0 rgba(82, 238, 198, 0); }
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-portao__selo-ponto { animation: none; }
	}

	.vt-portao__titulo {
		margin: 0 0 var(--vt-space-4);
		color: #fff;
		font-size: var(--vt-fs-2xl);
		line-height: 1.2;
		letter-spacing: -0.01em;
		max-width: 22ch;
	}

	.vt-portao__linha {
		margin: 0 0 var(--vt-space-8);
		color: rgba(255, 255, 255, 0.74);
		font-size: var(--vt-fs-base);
		line-height: 1.5;
		max-width: 46ch;
	}

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

	.vt-portao__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--vt-space-4);
		align-items: start;
	}

	/*
	 * Ícone em cápsula — a gramática de recurso que todo sistema usa, e que no
	 * catálogo seria ornamento proibido. Aqui ele faz o trabalho de deixar os
	 * três recursos varridos de relance, que é como um profissional decide se
	 * a ferramenta serve.
	 */
	.vt-portao__icone {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid rgba(82, 238, 198, 0.28);
		border-radius: var(--vt-radius-md);
		background: rgba(82, 238, 198, 0.12);
		color: var(--vt-mint, #52eec6);
	}

	.vt-portao__item-texto {
		display: block;
		color: rgba(255, 255, 255, 0.72);
		font-size: var(--vt-fs-sm);
		line-height: 1.45;
	}

	.vt-portao__item-nome {
		display: block;
		margin-bottom: 0.1rem;
		color: #fff;
		font-size: var(--vt-fs-base);
	}

	.vt-portao__nota {
		display: flex;
		align-items: flex-start;
		gap: var(--vt-space-2);
		margin: var(--vt-space-8) 0 0;
		padding-top: var(--vt-space-5);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		color: rgba(255, 255, 255, 0.66);
		font-size: var(--vt-fs-sm);
		line-height: 1.45;
	}

	.vt-portao__nota svg {
		flex: 0 0 auto;
		margin-top: 0.15em;
		color: var(--vt-mint, #52eec6);
	}

	/*
	 * ── o botão do Google ───────────────────────────────────────────
	 *
	 * **Ele ficava branco no branco no tema escuro.** A folha legada declara
	 * `background: var(--vt-white)` — branco fixo, como a marca do Google pede
	 * — e `color: var(--vt-texto)`, que no escuro vira quase branco: o botão
	 * principal de entrada com o rótulo invisível.
	 *
	 * A correção crava as DUAS cores. A superfície branca é requisito da
	 * identidade do Google, então é o texto que acompanha, em qualquer tema.
	 */
	.vt-google__botao {
		padding-block: var(--vt-space-3);
		border-color: var(--vt-linha);
		border-radius: var(--vt-radius-sm);
		background: #fff;
		color: var(--vt-navy, #012147);
	}

	.vt-google__botao:hover,
	.vt-google__botao:focus-visible {
		background: #f1f3f5;
		box-shadow: 0 6px 16px -10px rgba(1, 33, 71, 0.4);
	}

	/*
	 * ── campos ──────────────────────────────────────────────────────
	 *
	 * O anel de foco em mint é a única cor de acento do formulário, e existe
	 * por acessibilidade antes de estética: quem navega por teclado precisa
	 * ver onde está sem procurar.
	 */
	.vt-portao .vt-campo__entrada:focus-visible {
		outline: 2px solid var(--vt-mint, #52eec6);
		outline-offset: 2px;
	}

	/*
	 * ── o rodapé do portão ──────────────────────────────────────────
	 */
	.vt-portao__rodape-barra {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		max-width: 76rem;
		margin-inline: auto;
		padding: var(--vt-space-5) var(--vt-space-4) var(--vt-space-8);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-portao__copy {
		margin: 0;
	}

	.vt-portao__copy-link {
		color: var(--vt-texto-fraco);
	}

	/*
	 * ── celular ─────────────────────────────────────────────────────
	 *
	 * O painel desce para depois do formulário — é a ordem do HTML, e ela
	 * existe por isso. Ali ele encolhe: quem abriu o login no telefone já
	 * decidiu entrar, e o argumento vira reforço, não anúncio.
	 */
	@media (max-width: 959px) {
		.vt-portao__cartao {
			padding: var(--vt-space-6);
		}

		/*
		 * O cabeçalho não cabe inteiro a 414 px: "Área do Profissional" e
		 * "Voltar ao catálogo" quebravam em duas linhas cada, e o topo virava
		 * um bloco de texto. O rótulo da área FICA — é a mensagem da tela —, e
		 * quem recua é a porta de volta, que continua ali como seta com nome
		 * acessível.
		 */
		.vt-portao__voltar-texto {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}

		.vt-portao__voltar {
			width: 2.25rem;
			height: 2.25rem;
			justify-content: center;
			border: 1px solid var(--vt-linha);
			border-radius: var(--vt-radius-full);
		}

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



		.vt-portao__painel {
			padding: var(--vt-space-6);
		}

		.vt-portao__titulo {
			font-size: var(--vt-fs-xl);
		}

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


@layer componente {
	/*
	 * ══ o APP: a casca das telas internas ═══════════════════════════════
	 *
	 * Segunda versão, depois da avaliação do cliente. A primeira tirou o
	 * cabeçalho do catálogo e pôs um trilho claro: resolveu a navegação e não
	 * resolveu a impressão. A área do usuário não é uma tela funcional — é o
	 * espaço VIP da plataforma. Qualquer um cria um Instagram; um vTag não, e a
	 * tela precisa dizer isso antes de qualquer palavra.
	 *
	 * O trilho é **navy permanente**. É a assinatura que faz o olho reconhecer
	 * "estou dentro do produto" em menos tempo do que leva para ler um rótulo,
	 * e é a continuação do painel navy do portão: sem ela, a porta era mais
	 * bonita que a casa.
	 *
	 * O conteúdo fica **claro**, e a escolha é de uso, não de gosto: aqui se
	 * preenche formulário longo, se julga foto de perfil e se lê texto próprio.
	 * Console escuro inteiro fica bonito na primeira tela e cansa na terceira.
	 */

	/*
	 * ── o realce de estado ──────────────────────────────────────────
	 *
	 * **`--vt-superficie-3` NÃO é "a superfície mais elevada".** No tema claro
	 * ela é `#012147` — navy, uma superfície ESCURA, feita para receber
	 * `--vt-texto-sobre-3` por cima. Usada como fundo de hover com
	 * `--vt-texto-forte` (que no claro também é `#012147`) dava navy sobre
	 * navy: o rótulo do item do menu SUMIA ao passar o mouse. Quem apontou foi
	 * o cliente.
	 *
	 * Realce de estado não sai de token de superfície, porque "mais alto" e
	 * "mais escuro" não são a mesma escala. Sai de uma mistura do próprio
	 * texto com o fundo — acompanha o tema por construção e não pode inverter.
	 */
	.vt-corpo-conta {
		--vt-realce: color-mix(in srgb, currentColor 7%, transparent);
		--vt-realce-forte: color-mix(in srgb, currentColor 12%, transparent);

		/* O chão é levemente tingido para o cartão branco ter de onde subir. */
		min-height: 100dvh;
		background: var(--vt-superficie-2);
	}

	/*
	 * ── o foco ──────────────────────────────────────────────────────
	 *
	 * Desenhado, e não herdado. A área inteira estava usando o anel padrão do
	 * navegador, que muda de forma entre navegadores e desaparece contra o
	 * navy do trilho. Num ambiente onde se preenche formulário longo, o foco é
	 * componente de produto, não detalhe de acessibilidade: quem navega por
	 * teclado precisa saber onde está sem procurar.
	 */
	.vt-corpo-conta :focus-visible {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
		border-radius: var(--vt-radius-sm);
	}

	.vt-app__trilho :focus-visible {
		outline-color: var(--vt-mint);
	}

	.vt-membro :focus-visible {
		outline-color: var(--vt-interacao);
	}

	/* ── a grade do app ─────────────────────────────────────────────── */

	.vt-app {
		display: grid;
		min-height: 100dvh;
	}

	@media (min-width: 900px) {
		.vt-app {
			grid-template-columns: 16.5rem minmax(0, 1fr);
		}
	}

	/* ── o trilho navy ──────────────────────────────────────────────── */

	.vt-app__trilho {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-6);
		padding: var(--vt-space-5) var(--vt-space-4);
		/*
		 * Duas luzes muito diluídas nos cantos, como no portão. É o que dá
		 * profundidade sem imagem e impede que a coluna leia como um retângulo
		 * chapado de cor — a diferença entre "escuro" e "profundo".
		 */
		background:
			radial-gradient(30rem 20rem at 20% -5%, rgba(82, 238, 198, 0.10), transparent 60%),
			radial-gradient(24rem 24rem at 90% 105%, rgba(84, 128, 255, 0.12), transparent 60%),
			var(--vt-navy);
		color: var(--vt-navy-claro-2);
	}

	@media (min-width: 900px) {
		.vt-app__trilho {
			position: sticky;
			top: 0;
			height: 100dvh;
			padding: var(--vt-space-6) var(--vt-space-4);
		}
	}

	/*
	 * A marca clipa por `max-width`, que é animável — `width: auto` para um
	 * valor fixo não é, e o corte acontecia de um quadro para o outro no meio
	 * de uma coluna que estava deslizando.
	 */
	.vt-app__marca {
		min-width: 0;
		max-width: 14rem;
		margin: 0;
		padding-inline: var(--vt-space-2);
		overflow: hidden;
		transition: max-width var(--vt-dur-media) var(--vt-ease-transf);
	}

	/*
	 * **A palavra da marca sai de `currentColor`**, e `a` na folha base pinta
	 * de `--vt-interacao` — um azul escuro. Sobre o navy do trilho ela
	 * praticamente sumia. É o mesmo cuidado que `.vt-rodape__marca` já tomava
	 * do outro lado: marca apagada não é discrição, é descuido.
	 */
	.vt-app__marca a {
		display: inline-flex;
		align-items: center;
		color: var(--vt-white);
	}

	/*
	 * Recolhido, a palavra é CORTADA e o símbolo fica. O desenho é um só, a
	 * palavra vive numa classe própria e o corte é do container — nada é
	 * redesenhado, e não há segundo arquivo a manter em sincronia.
	 */
	.vt-app__marca .vt-logo {
		flex: none;
	}

	/*
	 * O botão de recolher é um item do trilho, e herda tudo dele. Só precisa
	 * desfazer o que um `<button>` traz de fábrica e girar o ícone — que é a
	 * única coisa que gira, e gira sozinha.
	 */
	.vt-app__recolher {
		width: 100%;
		border: 0;
		background: none;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.vt-app__recolher .vt-app__icone {
		transition: transform var(--vt-dur-media) var(--vt-ease-transf),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-trilho-recolhido .vt-app__recolher .vt-app__icone {
		transform: rotate(180deg);
	}

	/*
	 * O rótulo da área sumia com `display: none` ao recolher, e tudo o que
	 * vinha abaixo subia de uma vez. Ele agora **guarda o próprio espaço** e
	 * some por opacidade, como os rótulos do menu: nada abaixo dele se mexe.
	 * O `nowrap` no filho evita que "Área do Profissional" quebre em duas
	 * linhas enquanto a coluna encolhe — a mesma armadilha dos itens.
	 */
	.vt-app__area {
		margin: calc(var(--vt-space-4) * -1) 0 0;
		padding-inline: var(--vt-space-2);
		overflow: hidden;
		color: var(--vt-navy-claro-3);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-app__area span {
		display: block;
		white-space: nowrap;
	}

	.vt-app__nav--pe {
		margin-top: auto;
		padding-top: var(--vt-space-4);
		border-top: 1px solid rgba(255, 255, 255, 0.10);
	}

	.vt-app__lista {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-app__item {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		min-width: 0;
		overflow: hidden;
		padding: var(--vt-space-3) var(--vt-space-3);
		border-radius: var(--vt-radius-md);
		color: var(--vt-navy-claro-2);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__item:hover,
	.vt-app__item:focus-visible {
		background: rgba(255, 255, 255, 0.07);
		color: var(--vt-white);
	}

	/*
	 * O item ativo tem superfície E marca. A barrinha de mint à esquerda é o
	 * que sobrevive a qualquer daltonismo e a qualquer contraste: a posição
	 * carrega o estado, e a cor só confirma.
	 */
	.vt-app__item.esta-aqui {
		background: rgba(255, 255, 255, 0.11);
		color: var(--vt-white);
	}

	/*
	 * A marca fica DENTRO do item. Ela vivia num `left` negativo, para nascer
	 * na borda do trilho — e o `overflow: hidden` que o rótulo passou a exigir
	 * a cortava fora, junto com o próprio ícone quando recolhido. Dentro, ela
	 * sobrevive aos dois estados sem depender de o item transbordar.
	 */
	.vt-app__item.esta-aqui::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 3px;
		height: 1.25rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-mint);
		transform: translateY(-50%);
	}

	.vt-app__icone {
		display: inline-flex;
		flex: none;
		color: var(--vt-navy-claro-3);
		transition: color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__item:hover .vt-app__icone,
	.vt-app__item.esta-aqui .vt-app__icone {
		color: var(--vt-mint);
	}

	/* ── a coluna de conteúdo ───────────────────────────────────────── */

	.vt-app__coluna {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	/*
	 * Topo, conteúdo e rodapé compartilham a MESMA medida e o mesmo eixo. Sem
	 * isso o "Ver meu vTag" ia parar no canto direito da janela, a 700 px do
	 * cartão a que ele se refere — e numa tela larga a coluna de conteúdo
	 * ficava encostada na esquerda, com meio monitor vazio ao lado.
	 */
	/*
	 * A medida é do APP, não de um texto. 62rem servia a uma coluna única de
	 * formulário e deixava meio monitor vazio num dashboard que tem grade — e
	 * a queixa foi essa: conteúdo espremido no meio. 96rem é o teto em que
	 * quatro indicadores lado a lado ainda respiram e uma linha de texto não
	 * ultrapassa a medida de leitura (que é imposta no próprio parágrafo, não
	 * no container).
	 */
	.vt-app__topo,
	.vt-app__coluna .vt-main,
	.vt-app__rodape {
		width: 100%;
		max-width: 96rem;
		margin-inline: auto;
	}

	/*
	 * O topo é FIXO. Numa tela de edição longa a identidade, o link do vTag e
	 * a saída não podem depender de rolar até o começo — e um topo que some
	 * faz o app parecer uma página, não um app. O fundo é translúcido com
	 * desfoque para o conteúdo passar por baixo sem sumir nem competir.
	 */
	.vt-app__topo {
		position: sticky;
		top: 0;
		z-index: 15;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--vt-space-5);
		padding: var(--vt-space-3) var(--vt-space-6);
		border-bottom: 1px solid transparent;
		background: color-mix(in srgb, var(--vt-superficie-2) 82%, transparent);
		backdrop-filter: blur(12px);
		font-size: var(--vt-fs-sm);
		transition: border-color var(--vt-dur-media) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-media) var(--vt-ease-entrada);
	}

	/* A régua só aparece quando há conteúdo passando por baixo. */
	.vt-app__topo.esta-colado {
		border-bottom-color: var(--vt-linha);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-app__topo-acoes {
		display: flex;
		align-items: center;
		gap: var(--vt-space-4);
		min-width: 0;
	}

	/* A marca do topo é só do celular; no desktop ela mora no trilho. */
	.vt-app__marca-topo {
		display: none;
		margin: 0;
		margin-right: auto;
	}

	.vt-app__marca-topo a {
		display: inline-flex;
		align-items: center;
	}

	.vt-app__ver {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		color: var(--vt-texto-medio);
		text-decoration: none;
		white-space: nowrap;
	}

	.vt-app__ver:hover,
	.vt-app__ver:focus-visible {
		color: var(--vt-texto-forte);
	}

	.vt-app__eu {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	/*
	 * A inicial em disco: é o que todo sistema usa para dizer "esta é a sua
	 * sessão", e resolve o problema de o nome sumir no celular — o disco cabe
	 * onde o nome não cabe.
	 */
	/* ── o menu do perfil ───────────────────────────────────────────── */

	.vt-app__perfil {
		position: relative;
	}

	.vt-app__perfil-botao {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		max-width: 15rem;
		padding: var(--vt-space-1) var(--vt-space-2);
		border: 0;
		border-radius: var(--vt-radius-full);
		background: none;
		color: inherit;
		font: inherit;
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__perfil-botao:hover,
	.vt-app__perfil-botao[aria-expanded="true"] {
		background: var(--vt-realce);
	}

	.vt-app__retrato {
		flex: none;
		width: 2rem;
		height: 2rem;
		border-radius: var(--vt-radius-full);
		object-fit: cover;
	}

	.vt-app__seta {
		flex: none;
		color: var(--vt-texto-fraco);
		transition: transform var(--vt-dur-media) var(--vt-ease-transf);
	}

	.vt-app__perfil-botao[aria-expanded="true"] .vt-app__seta {
		transform: rotate(180deg);
	}

	/*
	 * ── o sino ──────────────────────────────────────────────────────
	 *
	 * Ele é um `<a>` promovido a controle de painel pelo `conta.js`, e por
	 * isso ganha aqui a mesma anatomia do botão do perfil: o `position:
	 * relative` do invólucro é o que ancora o painel, que é `absolute`.
	 *
	 * **A cor é a do texto, e não a de link.** Um ícone azul e sublinhado ao
	 * lado do retrato leria como "mais um link do cabeçalho"; o que distingue
	 * o sino de um enfeite é o contador, não a cor dele.
	 */
	.vt-app__sino {
		position: relative;
		flex: none;
	}

	.vt-app__sino-botao {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--vt-alvo-toque);
		height: var(--vt-alvo-toque);
		border-radius: var(--vt-radius-full);
		color: var(--vt-texto-medio);
		text-decoration: none;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__sino-botao:hover,
	.vt-app__sino-botao:focus-visible,
	.vt-app__sino-botao[aria-expanded="true"] {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	/*
	 * O contador é `--vt-estado-erro` porque ele é o único ponto do cabeçalho
	 * que pede ação — mint aqui competiria com o selo de verificação, que já
	 * tem dono (§6.1), e o navy sumiria dentro do próprio ícone.
	 *
	 * `pointer-events: none` para o clique atravessar até o link: um alvo de
	 * 1 rem grudado no meio do sino roubaria o toque no celular.
	 */
	.vt-app__sino-conta {
		position: absolute;
		top: 0.35rem;
		right: 0.3rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.05rem;
		height: 1.05rem;
		padding: 0 0.25rem;
		border: 2px solid var(--vt-superficie-1);
		border-radius: var(--vt-radius-full);
		background: var(--vt-estado-erro);
		color: var(--vt-white);
		font-size: 0.625rem;
		font-weight: var(--vt-peso-titulo);
		line-height: 1;
		pointer-events: none;
	}

	.vt-app__menu {
		position: absolute;
		top: calc(100% + var(--vt-space-2));
		right: 0;
		z-index: 30;
		min-width: 15rem;
		padding: var(--vt-space-2);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-lg);
		animation: vt-menu-entra var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__menu[hidden] {
		display: none;
	}

	@keyframes vt-menu-entra {
		from {
			opacity: 0;
			transform: translateY(-0.25rem);
		}
	}

	.vt-app__menu-quem {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		margin: 0;
		padding: var(--vt-space-3);
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-app__menu-quem strong {
		color: var(--vt-texto-forte);
	}

	.vt-app__menu-quem span {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		overflow-wrap: anywhere;
	}

	.vt-app__menu-item {
		display: block;
		padding: var(--vt-space-3);
		border-radius: var(--vt-radius-sm);
		color: var(--vt-texto-medio);
		text-decoration: none;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-app__menu-item:hover,
	.vt-app__menu-item:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	/*
	 * Sair é a última linha e vem depois de uma régua: é o destino de saída, e
	 * misturá-lo aos outros itens é o que fazia dele um botão de primeira
	 * ordem ao lado do nome. Aqui ele é consequência de abrir o perfil.
	 */
	.vt-app__menu-item--sair {
		margin-top: var(--vt-space-2);
		padding-top: calc(var(--vt-space-3) + 1px);
		border-top: 1px solid var(--vt-linha);
		border-radius: 0 0 var(--vt-radius-sm) var(--vt-radius-sm);
	}

	/*
	 * ── o painel do sino ────────────────────────────────────────────
	 *
	 * Mais largo que o do perfil porque o conteúdo é diferente: ali são
	 * rótulos de uma linha, aqui são três — título, corpo e data. E com teto
	 * de altura, porque dez avisos de três linhas passariam do rodapé da tela
	 * num notebook.
	 *
	 * `overscroll-behavior: contain` para a rolagem parar no fim da lista em
	 * vez de continuar na página atrás dela.
	 */
	.vt-app__menu--avisos {
		width: min(23rem, calc(100vw - var(--vt-space-6)));
		min-width: 0;
	}

	.vt-app__menu-vazio {
		margin: 0;
		padding: var(--vt-space-4) var(--vt-space-3);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-avisos-menu {
		max-height: min(24rem, 60vh);
		margin: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		list-style: none;
	}

	.vt-avisos-menu__item + .vt-avisos-menu__item {
		border-top: 1px solid var(--vt-linha);
	}

	/*
	 * O aviso inteiro é o alvo — não um "Ver" no canto. `display: grid` para
	 * as três linhas empilharem sem `<br>`, e o realce de hover cobre o
	 * bloco todo, que é o que diz que ele é clicável.
	 */
	.vt-avisos-menu__link {
		display: grid;
		gap: 0.15rem;
		padding: var(--vt-space-3);
		border-radius: var(--vt-radius-sm);
		color: inherit;
		text-decoration: none;
	}

	a.vt-avisos-menu__link:hover,
	a.vt-avisos-menu__link:focus-visible {
		background: var(--vt-realce);
	}

	.vt-avisos-menu__titulo {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O corpo do aviso tem até 500 caracteres no banco. Três linhas é o que
	 * cabe sem o painel virar uma página: quem quer o texto inteiro tem o
	 * histórico, que é para onde o rodapé leva.
	 */
	.vt-avisos-menu__texto {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
	}

	.vt-avisos-menu__data {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * O não lido ganha uma barra à ESQUERDA, e não fundo colorido: a lista
	 * continua legível quando tudo é novo, que é o caso mais comum de quem
	 * abre o sino. Mesma decisão da lista do histórico.
	 */
	.vt-avisos-menu__item.esta-novo {
		box-shadow: inset 3px 0 0 var(--vt-confianca);
	}

	/* O rodapé do painel é irmão do "Sair" do menu do perfil: régua acima,
	   e centralizado porque é destino, não item de lista. */
	.vt-app__menu-item--rodape {
		margin-top: var(--vt-space-2);
		padding-top: calc(var(--vt-space-3) + 1px);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-interacao);
		text-align: center;
	}

	.vt-app__inicial {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: var(--vt-radius-full);
		/*
		 * `superficie-3` e `texto-sobre-3`, não navy cravado: no tema escuro
		 * um disco navy sobre página navy é um buraco, e o par de tokens é
		 * justamente o que existe para "superfície escura com o texto certo
		 * por cima" — nos dois temas.
		 */
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-app__nome {
		max-width: 14rem;
		overflow: hidden;
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-app__sair {
		color: var(--vt-texto-fraco);
		text-decoration: none;
	}

	.vt-app__sair:hover,
	.vt-app__sair:focus-visible {
		color: var(--vt-texto-forte);
		text-decoration: underline;
	}

	.vt-app__coluna .vt-main {
		flex: 1 1 auto;
		padding: 0 var(--vt-space-6) var(--vt-space-12);
	}

	.vt-app__rodape {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-4);
		padding: var(--vt-space-5) var(--vt-space-6);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-app__copy {
		margin: 0;
	}

	.vt-app__copy-link {
		color: var(--vt-texto-fraco);
		text-decoration: none;
	}

	.vt-app__copy-link:hover,
	.vt-app__copy-link:focus-visible {
		color: var(--vt-texto-forte);
		text-decoration: underline;
	}

	/* ── o trilho recolhido ─────────────────────────────────────────── */

	@media (min-width: 900px) {
		.vt-app {
			transition: grid-template-columns var(--vt-dur-media) var(--vt-ease-transf);
		}

		.vt-trilho-recolhido .vt-app {
			grid-template-columns: 4.75rem minmax(0, 1fr);
		}

		/*
		 * **Nada se move na horizontal, nem o recuo.**
		 *
		 * Recolhido, o trilho tinha `padding-inline` menor e o item ficava
		 * `justify-content: center` sem recuo. Com o rótulo ainda no fluxo — e
		 * ele está, porque some por opacidade —, a linha do item continua tão
		 * larga quanto o texto; centrar essa linha larga numa coluna de 76 px
		 * empurrava o ícone para fora pela ESQUERDA, e o `overflow: hidden` o
		 * cortava. Foi assim que os ícones sumiram ao recolher.
		 *
		 * A correção é também o que faz a animação parar de parecer estranha:
		 * o recuo é o mesmo nos dois estados, então **o ícone não sai do
		 * lugar**. O que acontece na tela passa a ser uma coisa só — o rótulo
		 * aparecendo ou sumindo enquanto a coluna respira —, em vez de três
		 * movimentos concorrentes.
		 */
		/*
		 * 2,5rem = os 8px de recuo de cada lado mais os 23,6px do símbolo, que
		 * é o desenho até `x=3300` do `viewBox` na altura de 1,75rem. Menos
		 * que isso corta o próprio símbolo; mais, e começa a aparecer o "v" da
		 * palavra.
		 */
		.vt-trilho-recolhido .vt-app__marca {
			max-width: 2.5rem;
		}

		.vt-trilho-recolhido .vt-app__area {
			opacity: 0;
			transition-delay: 0s;
		}

		.vt-app__area {
			transition: opacity var(--vt-dur-rapida) var(--vt-ease-entrada) var(--vt-dur-media);
		}

		/*
		 * **O rótulo desaparece por opacidade, e volta DEPOIS da largura.**
		 *
		 * Com `clip-path`, expandir devolvia o texto ao fluxo no primeiro
		 * quadro — ainda com o trilho em 4,75rem —, e "Minhas clínicas"
		 * quebrava em duas linhas e se espremia durante os 250 ms da
		 * transição. O olho lê isso como defeito, e é.
		 *
		 * Opacidade não mexe no fluxo; o `nowrap` e o `overflow` do item
		 * garantem que nada quebre enquanto a coluna cresce; e o atraso na
		 * volta faz o texto aparecer com o espaço já pronto para ele. Some com
		 * atraso zero, porque sumir cedo é justamente o que evita o aperto.
		 *
		 * `opacity: 0` mantém o rótulo no documento — quem usa leitor de tela
		 * não vê o ícone, e menu recolhido é economia de pixel, não de
		 * informação.
		 */
		/*
		 * `nowrap` é regra do DESKTOP e só dele: ela existe para o rótulo não
		 * quebrar em duas linhas enquanto o trilho cresce. Aplicada em toda
		 * largura, ela fixava a largura mínima de cada aba da barra do celular
		 * no tamanho do rótulo por extenso — "Minhas clínicas" — e empurrava a
		 * barra inteira para fora da tela.
		 */
		.vt-app__item {
			white-space: nowrap;
		}

		.vt-app__rotulo {
			transition: opacity var(--vt-dur-rapida) var(--vt-ease-entrada) var(--vt-dur-media);
		}

		/* O rótulo curto é da barra de abas; aqui cabe o nome por extenso. */
		.vt-app__rotulo--curto {
			display: none;
		}

		.vt-trilho-recolhido .vt-app__rotulo {
			opacity: 0;
			transition-delay: 0s;
		}

	}

	/* ── o app no celular ───────────────────────────────────────────── */

	@media (max-width: 899px) {
		/*
		 * O trilho vira barra fixa no PÉ. É onde o polegar chega, é o padrão
		 * que este público já usa em todo aplicativo, e resolve de uma vez o
		 * problema que a versão anterior tinha: com o menu no topo, o nome e a
		 * porta de "Meus dados" sumiam no estreito e não sobrava caminho.
		 */
		.vt-app__trilho {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 20;
			flex-direction: row;
			gap: 0;
			padding: var(--vt-space-2) var(--vt-space-2)
				calc(var(--vt-space-2) + env(safe-area-inset-bottom));
			box-shadow: 0 -8px 24px -12px rgba(1, 33, 71, 0.5);
		}

		/*
		 * A marca, o rótulo da área e o botão de recolher vivem no topo — ou
		 * não vivem. Recolher uma barra de abas não quer dizer nada, e o botão
		 * estava tomando o lugar de uma aba inteira na barra do pé.
		 */
		.vt-app__cabeca,
		.vt-app__marca,
		.vt-app__area {
			display: none;
		}

		/*
		 * A proporção acompanha a CONTAGEM de abas. Com `flex: 1` nos dois, o
		 * grupo de quatro dividia metade da barra e "Conta", sozinha no outro
		 * grupo, ficava com 200 px para si — quatro abas espremidas ao lado de
		 * uma folgada.
		 */
		.vt-app__nav {
			flex: 4 1 0;
			margin: 0;
			padding: 0;
			border: 0;
		}

		.vt-app__nav--pe {
			flex: 1 1 0;
			margin: 0;
			padding: 0;
			border: 0;
		}

		/* Recolher uma barra de abas não quer dizer nada. */
		.vt-app__so-tela {
			display: none;
		}

		.vt-app__lista {
			flex-direction: row;
		}

		/*
		 * `min-width: 0` nos dois: item de flex nasce com `min-width: auto` e
		 * se recusa a encolher abaixo do próprio conteúdo. É o mesmo defeito
		 * que a etapa 12 já tinha catalogado na equipe da clínica, e aqui ele
		 * produzia rolagem horizontal na página inteira.
		 */
		.vt-app__lista > li {
			flex: 1 1 0;
			min-width: 0;
		}

		.vt-app__item {
			flex-direction: column;
			gap: 0.25rem;
			padding: var(--vt-space-2) var(--vt-space-1);
			font-size: var(--vt-fs-micro);
			text-align: center;
		}

		/*
		 * Na barra de abas quem aparece é o rótulo CURTO. O por extenso fica no
		 * documento, fora de vista, porque é ele que o leitor de tela anuncia —
		 * "Clínicas" resolve o espaço para o olho e não deve custar precisão a
		 * quem ouve.
		 */
		.vt-app__rotulo {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		.vt-app__rotulo--curto {
			position: static;
			width: auto;
			height: auto;
			max-width: 100%;
			overflow: hidden;
			clip-path: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		/* A marca do ativo vira sublinhado superior, que é o que cabe. */
		.vt-app__item.esta-aqui::before {
			top: 0;
			left: 50%;
			width: 1.25rem;
			height: 3px;
			transform: translateX(-50%);
		}

		.vt-app__topo {
			gap: var(--vt-space-3);
			padding-inline: var(--vt-space-4);
		}

		/*
		 * ── o painel de avisos vaza pela ESQUERDA no estreito ───────────
		 *
		 * Medido em 390 px: o painel nascia em `-62 px`. Ele é `absolute` com
		 * `right: 0` **ancorado no sino** — e o sino não está na borda, porque
		 * o menu do perfil fica à direita dele. Com 366 px de largura contados
		 * a partir dali, sobra tela para a esquerda e o texto era cortado no
		 * meio: "Avisos" aparecia como "s".
		 *
		 * O menu do PERFIL nunca teve isto porque ele é estreito (15rem) e a
		 * âncora dele é o último elemento da barra. O de avisos é o dobro.
		 *
		 * **A correção tira a âncora do sino**: com ele `static`, o bloco de
		 * contenção passa a ser `.vt-app__topo` — que é `sticky`, portanto
		 * posicionado, e atravessa a tela inteira. Aí `left` e `right` são as
		 * margens da tela, e o `top: calc(100% + …)` que a regra base já tem
		 * passa a significar "logo abaixo do topo", que é onde ele deve abrir.
		 *
		 * Sem número mágico: nenhuma altura de cabeçalho escrita à mão, que
		 * mentiria no dia em que a barra mudar de altura.
		 */
		.vt-app__sino {
			position: static;
		}

		.vt-app__menu--avisos {
			right: var(--vt-space-3);
			left: var(--vt-space-3);
			width: auto;
		}

		.vt-app__marca-topo {
			display: block;
		}

		/*
		 * O NOME sai e o disco fica. Numa barra de 430 px cabem a marca, o
		 * link do vTag, a identidade e a saída — mas não o nome por extenso, e
		 * ele é o único dos quatro que se resume a uma inicial sem perder o
		 * que informa.
		 */
		.vt-app__nome {
			display: none;
		}

		.vt-app__coluna .vt-main {
			padding-inline: var(--vt-space-4);
		}

		.vt-app__rodape {
			padding: var(--vt-space-5) var(--vt-space-4) calc(var(--vt-space-16) + var(--vt-space-6));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-app__item,
		.vt-app__icone,
		.vt-app__rotulo,
		.vt-app__marca,
		.vt-app__area,
		.vt-corpo-conta .vt-acao,
		.vt-lista-conta__link {
			transition: none;
		}
	}

	/*
	 * ══ o cartão de membro ══════════════════════════════════════════════
	 *
	 * A primeira coisa do painel, e a razão de o painel ter mudado: ele abria
	 * com uma checklist administrativa, e o número que dá orgulho — as visitas
	 * ao perfil — morava atrás de um item de menu.
	 */

	/*
	 * **O cartão é claro, e não navy.** Ele nasceu navy para se destacar, e o
	 * efeito foi o contrário: a tela ficava clara na saudação, mergulhava numa
	 * faixa escura e voltava a clarear nos indicadores. Três trocas de tom em
	 * 400 px de rolagem leem como remendo, não como hierarquia — e o navy da
	 * casa já tem um dono, que é o trilho.
	 *
	 * A importância continua marcada, por outros três canais: um tom um pouco
	 * mais fundo que o dos outros cartões, uma sombra maior e o retrato. Peso
	 * se constrói com profundidade, não com inversão de cor.
	 */
	.vt-membro {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-6);
		margin-bottom: var(--vt-space-6);
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		/*
		 * A mistura acompanha o tema por construção: no claro escurece o
		 * branco com uma pitada de navy; no escuro faz o mesmo sobre a
		 * superfície escura. Um valor fixo serviria a um dos dois.
		 */
		background:
			radial-gradient(36rem 18rem at 92% -40%, color-mix(in srgb, var(--vt-mint) 14%, transparent), transparent 60%),
			color-mix(in srgb, var(--vt-navy) 6%, var(--vt-superficie-1));
		box-shadow: var(--vt-sombra-md);
		color: var(--vt-texto-forte);
	}

	.vt-membro__identidade {
		display: flex;
		align-items: center;
		gap: var(--vt-space-5);
		min-width: 0;
	}

	.vt-membro__foto,
	.vt-membro__monograma {
		flex: none;
		width: 5rem;
		height: 5rem;
		border-radius: var(--vt-radius-full);
		object-fit: cover;
	}

	/*
	 * O aro é o gesto que transforma retrato em credencial. Ele é branco e
	 * translúcido, não mint: mint nesta casa é confiança VERIFICADA, e emprestá-lo
	 * a uma moldura seria gastar o sinal mais forte do sistema com ornamento.
	 */
	/*
	 * O aro é o gesto que transforma retrato em credencial. Ele é da cor da
	 * superfície, não mint: mint nesta casa é confiança VERIFICADA, e
	 * emprestá-lo a uma moldura gastaria o sinal mais forte do sistema com
	 * ornamento.
	 */
	.vt-membro__foto {
		border: 3px solid var(--vt-superficie-1);
		box-shadow: 0 0 0 1px var(--vt-linha);
	}

	.vt-membro__monograma {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid var(--vt-superficie-1);
		box-shadow: 0 0 0 1px var(--vt-linha);
		background: var(--vt-realce-forte);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: 0.02em;
	}

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

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

	.vt-membro__arroba {
		margin: var(--vt-space-1) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		overflow-wrap: anywhere;
	}

	.vt-membro__arroba a {
		color: var(--vt-interacao);
		text-decoration: none;
	}

	.vt-membro__arroba a:hover,
	.vt-membro__arroba a:focus-visible {
		text-decoration: underline;
	}

	.vt-membro__marcas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2);
		margin: var(--vt-space-3) 0 0;
	}

	/*
	 * Nível e estado com pesos diferentes de propósito. O nível é
	 * pertencimento, e por isso é preenchido; o estado é informação de
	 * momento, e por isso é contorno. Nivelar os dois faria o plano parecer um
	 * aviso e o aviso parecer um plano.
	 */
	.vt-membro__nivel {
		padding: 0.2rem var(--vt-space-3);
		border-radius: var(--vt-radius-full);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-membro__nivel--premium {
		background: var(--vt-navy);
		color: var(--vt-mint);
	}

	.vt-membro__nivel--vip {
		background: var(--vt-realce-forte);
		color: var(--vt-texto-forte);
	}

	:root[data-vt-tema="escuro"] .vt-membro__nivel--premium {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-membro__estado {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		padding: 0.2rem var(--vt-space-3);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-full);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-micro);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-membro__ponto {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-estado-alerta);
	}

	.vt-membro__estado--ok .vt-membro__ponto {
		background: var(--vt-estado-ok);
	}

	/* ── os números da faixa ────────────────────────────────────────── */

	.vt-membro__numeros {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--vt-space-6);
		margin: 0;
		padding-top: var(--vt-space-5);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

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

	.vt-membro__numero--acao {
		margin-left: auto;
	}

	.vt-membro__numero-rotulo {
		color: var(--vt-navy-claro-3);
		font-size: var(--vt-fs-micro);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	/*
	 * Algarismo tabular, como manda a régua da ficha: dois números empilhados
	 * em larguras diferentes leem como dois números de coisas diferentes.
	 */
	.vt-membro__numero-valor {
		margin: var(--vt-space-1) 0 0;
		color: var(--vt-white);
		font-size: var(--vt-fs-2xl);
		font-variant-numeric: tabular-nums;
		font-weight: var(--vt-peso-display);
		line-height: 1;
	}

	.vt-membro__numero--acao a {
		color: var(--vt-mint);
		font-size: var(--vt-fs-sm);
		text-decoration: none;
	}

	.vt-membro__numero--acao a:hover,
	.vt-membro__numero--acao a:focus-visible {
		text-decoration: underline;
	}

	.vt-membro__acoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		margin: 0;
		padding-top: var(--vt-space-5);
		border-top: 1px solid var(--vt-linha);
	}

	.vt-membro__acao {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-membro__acao:hover,
	.vt-membro__acao:focus-visible {
		border-color: var(--vt-texto-medio);
		background: var(--vt-realce);
	}

	.vt-membro__acao--forte {
		border-color: transparent;
		background: var(--vt-navy);
		color: var(--vt-white);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-membro__acao--forte:hover,
	.vt-membro__acao--forte:focus-visible {
		border-color: transparent;
		background: var(--vt-navy);
		color: var(--vt-mint);
	}

	:root[data-vt-tema="escuro"] .vt-membro__acao--forte {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	:root[data-vt-tema="escuro"] .vt-membro__acao--forte:hover,
	:root[data-vt-tema="escuro"] .vt-membro__acao--forte:focus-visible {
		background: var(--vt-white);
		color: var(--vt-navy);
	}

	.vt-membro--convite .vt-membro__acoes {
		padding-top: 0;
		border-top: 0;
	}

	/* O convite é o mesmo cartão sem números: mesma casa, outro momento. */
	.vt-membro--convite .vt-membro__nome {
		font-size: var(--vt-fs-lg);
	}

	/*
	 * ── o cartão do pedido de reivindicação ─────────────────────────
	 *
	 * É o cartão do convite com **duas linhas de texto a mais e um estado**: o
	 * que está sendo esperado, e por quê. Não é um componente novo, de propósito
	 * — a situação é a mesma ("você ainda não tem um vTag aqui") e só o próximo
	 * passo é outro; um componente próprio divergiria do vizinho com o tempo.
	 *
	 * A borda usa a cor de espera, a mesma de `.vt-membro__estado--espera`:
	 * alerta aqui quer dizer "falta algo", e o que falta é um clique numa caixa
	 * de entrada.
	 */
	.vt-membro--pedido {
		border-color: var(--vt-estado-alerta);
	}

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

	/*
	 * O texto que explica a espera. Ele carrega o endereço mascarado, que é a
	 * informação mais consultada do cartão — daí a medida curta: numa linha de 90
	 * caracteres o olho perde o `p*****@h****.c**.b*` no meio dela.
	 */
	.vt-membro__pendencia {
		max-width: 62ch;
		margin: var(--vt-space-4) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	.vt-membro__nota {
		max-width: 62ch;
		margin: var(--vt-space-3) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		line-height: var(--vt-lh-compacta);
	}

	/*
	 * As duas ações são FORMULÁRIOS, e não links: elas gravam. O `form` zera a
	 * margem para não desalinhar os dois botões dentro da faixa em `flex`, e o
	 * `button` recebe o que um `<a>` não precisava — o cursor e o `appearance`,
	 * que sem reset devolvem o botão cinza do sistema operacional.
	 */
	.vt-membro__acoes form {
		margin: 0;
	}

	button.vt-membro__acao {
		appearance: none;
		cursor: pointer;
		font-family: inherit;
	}

	/*
	 * ── o sino não cabia em 360 px ──────────────────────────────────
	 *
	 * **Regressão que o sino trouxe, medida no navegador.** A barra do topo
	 * carrega marca + "Ver meu vTag" + sino + perfil; sem o sino ela fechava em
	 * 345 px, com ele foi para 390 — e 360 px é largura de aparelho real (é a
	 * mesma que a barra de abas do pé já tinha obrigado a encurtar rótulo).
	 * Trinta pixels de perfil ficavam fora da tela, com rolagem horizontal
	 * junto.
	 *
	 * **O que cede é a PALAVRA, não o alvo.** É a mesma regra que já tirou o
	 * nome do perfil daqui: sai o que se resume sem perder o que informa. O
	 * ícone de "abre em outra aba" continua sendo o destino, e o rótulo vira
	 * `.vt-visualmente-oculto` em vez de `display: none` — assim ele continua
	 * no documento, e o nome acessível do link segue sendo "Ver meu vTag (abre
	 * em nova aba)". `display: none` tiraria a palavra da árvore de
	 * acessibilidade e o link passaria a se chamar só "(abre em nova aba)".
	 *
	 * O sino não tem essa saída: ele não tem palavra visível para ceder, e não
	 * existe em nenhum outro canto da tela. "Ver meu vTag" existe — no menu do
	 * perfil e, no dashboard, num botão de largura cheia.
	 *
	 * **420 px, e não 899:** em 430 a barra ainda fecha com as palavras (415),
	 * então cortar antes disso seria tirar texto de quem tem espaço.
	 */
	@media (max-width: 420px) {
		.vt-app__ver {
			padding-inline: var(--vt-space-2);
		}

		.vt-app__ver span:not(.vt-visualmente-oculto) {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}

	@media (max-width: 599px) {
		.vt-membro__identidade {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--vt-space-4);
		}

		/*
		 * Empilhadas, as duas ações viram uma coluna de larguras diferentes —
		 * duas linhas que começam juntas e acabam em lugares distintos leem
		 * como desalinho. No estreito elas ocupam a largura toda e voltam a
		 * ser um par.
		 */
		.vt-membro__acoes {
			flex-direction: column;
			align-items: stretch;
		}

		.vt-membro__acao {
			justify-content: center;
		}

		.vt-membro__numeros {
			gap: var(--vt-space-5);
		}
	}

	/*
	 * ══ o vocabulário das telas internas ════════════════════════════════
	 *
	 * O bloco A deu o quadro; este dá o conteúdo dele. E resolve, de passagem,
	 * o defeito que a conferência do bloco A achou: `vtag.css` define apelidos
	 * do desenho antigo com valor claro FIXO — `--vt-fundo` é `#ffffff`,
	 * `--vt-borda` é `#d8ced4`, `--vt-mint-tint` é `#e3f2f0` — que não viram
	 * com o tema. O texto por cima usa `--vt-texto-forte`, que vira. No escuro
	 * dava cartão branco com letra quase branca, e "Confirmar o e-mail" sumia.
	 *
	 * Nada aqui usa apelido: só token de superfície, de linha e de estado. É
	 * por isso que cada componente ganhou nome novo (`vt-passo-conta` no lugar
	 * de `vt-passo`) em vez de sobrescrever o antigo — sobrescrever herdaria em
	 * silêncio toda propriedade que esta folha não declarasse, que é o
	 * vazamento da regra 1 da etapa 5.
	 */

	/* ── o topo da tela ─────────────────────────────────────────────── */

	.vt-tela-conta__topo {
		margin-bottom: var(--vt-space-6);
	}

	.vt-tela-conta__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-2xl);
		letter-spacing: var(--vt-track-titulo);
	}

	.vt-tela-conta__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/* ── a ficha: o cartão que carrega um assunto ───────────────────── */

	/*
	 * Um assunto por cartão, e o cartão diz do que se trata antes do primeiro
	 * campo. O painel antigo era uma coluna de `<h2>` com formulário solto
	 * embaixo: nada delimitava onde um assunto acabava e o outro começava, e a
	 * senha ficava visualmente colada ao telefone.
	 */
	/*
	 * A ficha sobe do chão por ELEVAÇÃO, não por contorno. Uma borda de 1px
	 * sobre um fundo quase da mesma cor desenha uma linha, não um objeto — e
	 * era o que fazia a área parecer um formulário impresso. A sombra é curta
	 * e de baixo contraste: o suficiente para o cartão existir, longe do
	 * ornamento que envelhece.
	 */
	.vt-ficha-conta {
		margin-bottom: var(--vt-space-5);
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	/*
	 * **A pendência se anuncia por ícone, não por barra lateral.**
	 *
	 * A régua de 3px na borda de início pesava demais: ela pinta o cartão
	 * inteiro de urgência, e este é um cartão que a pessoa vai reler todo dia
	 * até resolver. O ícone diz a mesma coisa — "isto pede atenção" — no
	 * tamanho de um ícone, junto do título, que é onde a leitura já está.
	 */
	/*
	 * A linha só vira flex ONDE há ícone. Aplicada a todo `__topo`, ela punha
	 * o título e a linha de apoio lado a lado nas outras fichas, que têm os
	 * dois como filhos diretos — "Minhas clínicas" ficou com a explicação à
	 * direita do próprio nome.
	 */
	.vt-ficha-conta--pendencia .vt-ficha-conta__topo {
		display: flex;
		align-items: flex-start;
		gap: var(--vt-space-3);
	}

	.vt-ficha-conta__aviso {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: var(--vt-radius-full);
		background: color-mix(in srgb, var(--vt-estado-alerta) 15%, transparent);
		color: var(--vt-estado-alerta);
	}

	.vt-ficha-conta__topo {
		margin-bottom: var(--vt-space-5);
	}

	.vt-ficha-conta__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		letter-spacing: var(--vt-track-sub);
	}

	.vt-ficha-conta__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-1) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-ficha-conta__vazio {
		margin: 0 0 var(--vt-space-4);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-ficha-conta__acoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		margin: var(--vt-space-5) 0 0;
	}

	.vt-ficha-conta form + form {
		margin-top: var(--vt-space-5);
		padding-top: var(--vt-space-5);
		border-top: 1px solid var(--vt-linha);
	}

	/* ── o botão, na área do usuário ────────────────────────────────── */

	/*
	 * `.vt-acao` do legado desenha em `--vt-navy`, que é a cor da MARCA e não
	 * um token de tema: no escuro é contorno navy sobre página navy. Aqui ele
	 * é redeclarado com escopo na casca — o botão do catálogo continua o que
	 * era, e o desta casa passa a enxergar o tema.
	 */
	.vt-corpo-conta .vt-acao {
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-media) var(--vt-ease-entrada);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--vt-space-2);
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-3) var(--vt-space-5);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-0);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		text-decoration: none;
	}

	.vt-corpo-conta .vt-acao:hover,
	.vt-corpo-conta .vt-acao:focus-visible {
		border-color: var(--vt-texto-medio);
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	/*
	 * O primário é o MESMO do portão, e não uma segunda versão: `superficie-3`
	 * com `texto-sobre-3`, virando para mint no escuro. Aquele botão já tinha
	 * sido resolvido com o argumento certo — navy cravado some no tema escuro,
	 * porque fundo do botão e fundo do cartão viram a mesma cor — e um segundo
	 * primário nesta casa faria a porta e a sala terem botões diferentes.
	 */
	.vt-corpo-conta .vt-acao--primaria {
		border-color: transparent;
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
	}

	:root[data-vt-tema="escuro"] .vt-corpo-conta .vt-acao--primaria,
	:root[data-vt-tema="auto"] .vt-corpo-conta .vt-acao--primaria {
		background: var(--vt-confianca);
		color: var(--vt-confianca-sobre);
	}

	@media (prefers-color-scheme: light) {
		:root[data-vt-tema="auto"] .vt-corpo-conta .vt-acao--primaria {
			background: var(--vt-superficie-3);
			color: var(--vt-texto-sobre-3);
		}
	}

	.vt-corpo-conta .vt-acao--primaria:hover,
	.vt-corpo-conta .vt-acao--primaria:focus-visible {
		border-color: transparent;
		box-shadow: 0 8px 20px -8px rgba(1, 33, 71, 0.5);
	}

	/*
	 * A ação discreta é link, não botão: ela fica ao lado de uma primária e
	 * disputaria com ela se tivesse contorno. "Não é este e-mail?" precisa
	 * estar à mão de quem precisa, e fora do caminho de quem não precisa.
	 */
	.vt-corpo-conta .vt-acao--discreta {
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--vt-interacao);
		font-weight: var(--vt-peso-corpo);
		text-decoration: underline;
	}

	.vt-corpo-conta .vt-acao--discreta:hover,
	.vt-corpo-conta .vt-acao--discreta:focus-visible {
		background: none;
		color: var(--vt-interacao-forte);
	}

	/* ── os passos da validação ─────────────────────────────────────── */

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

	.vt-passo-conta {
		display: flex;
		gap: var(--vt-space-4);
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	/*
	 * O passo cumprido muda de FUNDO e de marca, não de cor de texto: quem
	 * está lendo precisa continuar lendo. É a mesma regra do item ativo do
	 * trilho — superfície diz estado melhor que cor.
	 */
	.vt-passo-conta.esta-feito {
		border-color: var(--vt-confianca);
		background: color-mix(in srgb, var(--vt-mint) 12%, var(--vt-superficie-0));
	}

	.vt-passo-conta__marca {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-passo-conta.esta-feito .vt-passo-conta__marca {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-passo-conta__texto {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	.vt-passo-conta__nome {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
	}

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

	.vt-passo-conta__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-4);
		margin-top: var(--vt-space-1);
	}

	/* ── avisos ─────────────────────────────────────────────────────── */

	.vt-avisos-conta {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-aviso-conta {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-1);
		padding: var(--vt-space-4) 0;
		border-top: 1px solid var(--vt-linha);
	}

	.vt-aviso-conta:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.vt-aviso-conta__titulo {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O ponto do não lido fica à ESQUERDA do título e fora do fluxo do texto:
	 * dentro dele, empurrava a primeira linha e desalinhava as duas colunas de
	 * avisos lidos e não lidos.
	 */
	.vt-aviso-conta.esta-nova .vt-aviso-conta__titulo::before {
		content: "";
		display: inline-block;
		width: 0.5rem;
		height: 0.5rem;
		margin-right: var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: var(--vt-confianca);
		vertical-align: 0.05em;
	}

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

	.vt-aviso-conta__link {
		align-self: flex-start;
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O pé do aviso: data à esquerda, destino à direita, na mesma linha.
	 * `margin-top` pequeno porque ele é metadado, e não uma terceira frase.
	 */
	/*
	 * **Data e destino andam JUNTOS, encostados à esquerda.** A primeira
	 * versão usava `space-between`, que no celular fica certo e no desktop
	 * joga o "Ver" a mais de mil pixels da data que ele acompanha — um link
	 * sozinho no canto direito de um cartão largo não parece pertencer a
	 * linha nenhuma. Alinhados, os dois se leem como o pé de UM aviso.
	 */
	.vt-aviso-conta__pe {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-4);
		margin-top: var(--vt-space-1);
	}

	.vt-aviso-conta__data {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * "novo" escrito, além do ponto colorido do título: cor não é informação
	 * para quem não a enxerga, e é justamente esta palavra que separa o que a
	 * pessoa ainda não viu.
	 */
	.vt-aviso-conta__novo {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: color-mix(in srgb, var(--vt-confianca) 18%, transparent);
		color: var(--vt-texto-forte);
		font-size: 0.625rem;
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	/*
	 * Anterior e próxima, com a posição no meio. Não é a régua numerada do
	 * catálogo: a lista cresce por cima, e o aviso que hoje está na página 2
	 * amanhã está na 3 — um número de página aqui não é endereço de nada.
	 */
	.vt-avisos-paginas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-3);
		margin-top: var(--vt-space-5);
		padding-top: var(--vt-space-4);
		border-top: 1px solid var(--vt-linha);
	}

	.vt-avisos-paginas__onde {
		margin-inline: auto;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/* ── lista simples (clínicas do painel) ─────────────────────────── */

	.vt-lista-conta {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-lista-conta__item {
		border-top: 1px solid var(--vt-linha);
	}

	.vt-lista-conta__item:first-child {
		border-top: 0;
	}

	.vt-lista-conta__link {
		display: block;
		padding: var(--vt-space-3) 0;
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		transition: color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-lista-conta__link:hover,
	.vt-lista-conta__link:focus-visible {
		color: var(--vt-interacao);
		text-decoration: underline;
	}

	/* ── a porta: um atalho do tamanho de um atalho ─────────────────── */

	.vt-porta-conta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-4);
		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-0);
		color: inherit;
		text-decoration: none;
	}

	.vt-porta-conta:hover,
	.vt-porta-conta:focus-visible {
		border-color: var(--vt-texto-fraco);
	}

	.vt-porta-conta__texto {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-1);
		min-width: 0;
	}

	.vt-porta-conta__nome {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
	}

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

	.vt-porta-conta__seta {
		flex: none;
		color: var(--vt-texto-fraco);
	}

	.vt-porta-conta:hover .vt-porta-conta__seta {
		color: var(--vt-texto-forte);
	}

	/* ── valor de leitura, com selo de estado ───────────────────────── */

	/*
	 * A gramática da ficha da etapa 11, aqui dentro: rótulo pequeno, valor com
	 * peso, e o estado como selo ao lado — não como cor no próprio valor. Um
	 * e-mail pintado de vermelho por não estar confirmado seria cor carregando
	 * categoria, que é o canal mais fraco (regra 7 da etapa 12).
	 */
	.vt-valor-conta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vt-space-2) var(--vt-space-3);
		margin: 0 0 var(--vt-space-4);
	}

	.vt-valor-conta__rotulo {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-valor-conta__valor {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		overflow-wrap: anywhere;
	}

	.vt-selo-conta {
		padding: 0.15rem var(--vt-space-2);
		border-radius: var(--vt-radius-sm);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-selo-conta--ok {
		background: color-mix(in srgb, var(--vt-estado-ok) 16%, transparent);
		color: var(--vt-estado-ok);
	}

	.vt-selo-conta--pendente {
		background: color-mix(in srgb, var(--vt-estado-alerta) 16%, transparent);
		color: var(--vt-estado-alerta);
	}

	/* ── o campo de senha, com o olho ───────────────────────────────── */

	.vt-senha {
		position: relative;
		display: block;
	}

	/*
	 * O espaço à direita é reservado no CAMPO, e não obtido empurrando o
	 * botão para fora: senha longa passando por baixo do olho é o defeito
	 * clássico deste componente.
	 */
	.vt-senha__campo {
		width: 100%;
		padding-right: 3rem;
	}

	.vt-senha__olho {
		position: absolute;
		top: 50%;
		right: var(--vt-space-2);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border: 0;
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-fraco);
		cursor: pointer;
		transform: translateY(-50%);
	}

	.vt-senha__olho:hover,
	.vt-senha__olho:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-senha__olho[hidden] {
		display: none;
	}

	/*
	 * O `hidden` do HTML não esconde elemento de SVG: a regra da folha do
	 * navegador vale para o namespace HTML, e o corte do olho nascia visível —
	 * o botão dizia "esconder" antes de alguém ter mostrado coisa alguma.
	 */
	.vt-senha__corte[hidden] {
		display: none;
	}

	/* ── o medidor de força, sem apelido de token ───────────────────── */

	.vt-corpo-conta .vt-forca__barra {
		background: var(--vt-realce-forte);
	}

	.vt-corpo-conta .vt-forca__nivel {
		background: var(--vt-estado-erro);
	}

	.vt-corpo-conta .vt-forca[data-nivel="2"] .vt-forca__nivel {
		background: var(--vt-estado-alerta);
	}

	.vt-corpo-conta .vt-forca[data-nivel="3"] .vt-forca__nivel,
	.vt-corpo-conta .vt-forca[data-nivel="4"] .vt-forca__nivel {
		background: var(--vt-estado-ok);
	}
}

@layer componente {
	/*
	 * ══ o DASHBOARD ═════════════════════════════════════════════════════
	 *
	 * O painel eram três cartões empilhados numa coluna e nenhum número. O
	 * sistema guarda muito mais, e o que ele guarda é justamente o que dá
	 * orgulho: quanto o vTag circulou, por onde as pessoas saíram dele, o
	 * quanto do perfil já está pronto.
	 *
	 * A grade é de 12 colunas na tela larga. Não é grade por modernidade: é
	 * porque as peças têm PESOS diferentes — o cartão de membro e o gráfico
	 * pedem largura, os indicadores pedem repetição, as fichas de gestão
	 * pedem coluna. Empilhar tudo dá a todas o mesmo peso, que é o que fazia
	 * a tela parecer sem hierarquia.
	 */

	.vt-dash__saudacao {
		margin-bottom: var(--vt-space-6);
	}

	/*
	 * **A faixa de recado não tinha folga embaixo, e a grade começava colada
	 * nela** — medido: 0 px, em todo recado do painel, não só num.
	 *
	 * `.vt-alerta` é compartilhada e traz `margin: var(--vt-space-4) 0 0`:
	 * topo, e nada mais. Onde ela nasceu isso bastava, porque era o último
	 * elemento do bloco. No painel ela cai ENTRE a saudação e a grade, e um
	 * dos dois vãos ficou sem dono.
	 *
	 * O valor é o da saudação, que é o ritmo entre blocos desta tela: com ele
	 * a faixa fica com 24 px dos dois lados (em cima, os 16 dela colapsam com
	 * os 24 da saudação, que é o maior).
	 *
	 * **Escopo no filho direto de `.vt-dash`** porque a mesma classe serve ao
	 * portão e ao editor, onde a folga de baixo é de outro dono. Especificidade
	 * 0,2,0 contra 0,1,0, e as duas folhas estão em `@layer componente` — por
	 * isso esta vence, mesmo com `formulario.css` carregando depois.
	 */
	.vt-dash > .vt-alerta {
		margin-bottom: var(--vt-space-6);
	}

	/*
	 * A saudação é a linha que faz a tela ser DAQUELA pessoa. Custa uma
	 * consulta a nada e é a diferença entre "sistema" e "meu espaço".
	 */
	.vt-dash__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-2xl);
		letter-spacing: var(--vt-track-titulo);
		line-height: var(--vt-lh-titulo);
	}

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

	/*
	 * ── o topo com recorte (desempenho) ─────────────────────────────
	 *
	 * O dashboard não tem controle nenhum no alto; a tela de desempenho tem um,
	 * e ele fica NA MESMA LINHA do título por ser o que governa a tela inteira.
	 * `align-items: end` alinha o controle pela base do parágrafo de apoio, e
	 * não pelo topo do bloco: as duas peças têm alturas diferentes e o que o
	 * olho lê como "mesma linha" é a base.
	 */
	.vt-dash__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: var(--vt-space-4);
	}

	/*
	 * O recorte é um trilho segmentado, e não três links soltos: as três opções
	 * são excludentes e a forma precisa dizer isso antes da leitura. A opção
	 * ativa sobe para a superfície de card — é ela que parece um botão apertado.
	 */
	.vt-recorte {
		display: flex;
		gap: 2px;
		padding: 3px;
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-2);
	}

	.vt-recorte__opcao {
		padding: var(--vt-space-2) var(--vt-space-4);
		border-radius: var(--vt-radius-full);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-variant-numeric: tabular-nums;
		text-decoration: none;
		white-space: nowrap;
	}

	/*
	 * O realce de estado sai de `currentColor`: ele acompanha o tema por
	 * construção, e é a regra que o bloco D fixou depois de `--vt-superficie-3`
	 * ter sido usada como se fosse elevação.
	 */
	.vt-recorte__opcao:hover,
	.vt-recorte__opcao:focus-visible {
		background: color-mix(in srgb, currentColor 10%, transparent);
		color: var(--vt-texto-forte);
	}

	.vt-recorte__opcao[aria-current] {
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-dash__grade {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--vt-space-5);
		align-items: start;
	}

	/*
	 * **`min-width: 0` nos filhos da grade.** `1fr` é `minmax(auto, 1fr)`, e o
	 * `auto` mínimo é o min-content do item — que aqui era a fileira de botões
	 * do cartão de membro, 461 px lado a lado. A coluna de 313 px virou uma
	 * trilha de 511, e a página inteira ganhou rolagem horizontal no celular.
	 *
	 * É o mesmo defeito que a etapa 12 catalogou na equipe da clínica, e é a
	 * terceira vez que ele aparece neste projeto: item de grade não encolhe
	 * sozinho, e quem não declara isso descobre no celular.
	 */
	.vt-dash__grade > * {
		min-width: 0;
	}

	@media (min-width: 1000px) {
		.vt-dash__grade {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}

		.vt-dash__grade > .vt-membro { grid-column: span 12; }
		.vt-dash__grade > .vt-dash__kpis { grid-column: span 12; }
		.vt-dash__grade > .vt-dash__grafico { grid-column: span 7; }
		.vt-dash__grade > .vt-dash__saidas { grid-column: span 5; }
		.vt-dash__grade > .vt-ficha-conta { grid-column: span 6; }
		.vt-dash__grade > .vt-dash__larga { grid-column: span 12; }

		/*
		 * Os três quadros do desempenho: 4 + 4 + 4. Eles respondem perguntas
		 * IRMÃS — como falaram, por onde circulou, o que olharam —, e peso
		 * igual é o que diz isso. Dar mais largura a um deles seria afirmar uma
		 * hierarquia que os dados não têm.
		 */
		.vt-dash__grade > .vt-dash__quadro {
			grid-column: span 4;

			/*
			 * A grade é `align-items: start`, e três cards irmãos com 5, 6 e 3
			 * linhas terminavam em três alturas diferentes. Aqui eles são uma
			 * FILEIRA, não três peças avulsas: a base comum é o que diz isso.
			 */
			align-self: stretch;
		}
	}

	/* Na grade, o espaçamento é do `gap`: margem própria abriria vãos duplos. */
	.vt-dash__grade > .vt-membro,
	.vt-dash__grade > .vt-ficha-conta {
		margin-bottom: 0;
	}

	/* ── os indicadores ─────────────────────────────────────────────── */

	.vt-dash__kpis {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: var(--vt-space-5);
	}

	.vt-kpi {
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
		/*
		 * A entrada é escalonada por `--vt-ordem`. O movimento é curto e
		 * acontece uma vez: é o que dá a sensação de que a tela MONTOU, em vez
		 * de já estar lá parada — e é o oposto de animação decorativa, que
		 * repete e cansa.
		 */
		animation: vt-sobe 320ms var(--vt-ease-entrada) backwards;
		animation-delay: calc(var(--vt-ordem, 0) * 60ms);
	}

	@keyframes vt-sobe {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}

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

	.vt-kpi__valor {
		display: flex;
		align-items: baseline;
		gap: var(--vt-space-2);
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-3xl);
		font-variant-numeric: tabular-nums;
		font-weight: var(--vt-peso-display);
		line-height: 1;
	}

	/*
	 * A variação é o que transforma um número em informação: "93" sozinho não
	 * diz se é muito. Ela some quando não há base de comparação — um "+100%"
	 * que quer dizer "saímos do zero" é ruído com cara de sinal.
	 */
	.vt-kpi__delta {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-kpi__delta--sobe {
		background: color-mix(in srgb, var(--vt-estado-ok) 16%, transparent);
		color: var(--vt-estado-ok);
	}

	.vt-kpi__delta--desce {
		background: color-mix(in srgb, var(--vt-estado-erro) 14%, transparent);
		color: var(--vt-estado-erro);
	}

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

	/* ── o anel da completude ───────────────────────────────────────── */

	.vt-kpi--anel {
		display: flex;
		align-items: center;
		gap: var(--vt-space-4);
	}

	.vt-anel {
		position: relative;
		flex: none;
		display: grid;
		place-items: center;
	}

	.vt-anel svg {
		transform: rotate(-90deg);
	}

	.vt-anel__trilho {
		stroke: var(--vt-realce-forte);
	}

	/*
	 * `pathLength="100"` faz o traço ser medido em PORCENTAGEM, e não no
	 * perímetro real do círculo. Sem isso, mudar o raio quebraria o cálculo do
	 * `dasharray` e ninguém lembraria por quê.
	 */
	.vt-anel__arco {
		stroke: var(--vt-mint);
		stroke-dasharray: 100;
		stroke-dashoffset: calc(100 - var(--vt-pct, 0));
		animation: vt-anel-enche 900ms var(--vt-ease-entrada) backwards;
	}

	@keyframes vt-anel-enche {
		from { stroke-dashoffset: 100; }
	}

	.vt-anel__valor {
		position: absolute;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-variant-numeric: tabular-nums;
		font-weight: var(--vt-peso-display);
	}

	.vt-anel__valor small {
		font-size: 0.7em;
	}

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

	.vt-kpi__acao {
		display: inline-block;
		margin-top: var(--vt-space-2);
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	.vt-kpi__acao:hover,
	.vt-kpi__acao:focus-visible {
		text-decoration: underline;
	}

	/* ── o gráfico e as saídas ──────────────────────────────────────── */

	.vt-dash__grafico,
	.vt-dash__saidas,
	.vt-dash__quadro {
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-dash__cabeca {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vt-space-3);
		margin-bottom: var(--vt-space-5);
	}

	.vt-dash__secao {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		letter-spacing: var(--vt-track-sub);
	}

	.vt-dash__mais {
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		text-decoration: none;
	}

	.vt-dash__mais:hover,
	.vt-dash__mais:focus-visible {
		text-decoration: underline;
	}

	.vt-dash__vazio {
		max-width: var(--vt-medida);
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * A nota de rodapé da tela — como cada número é contado. Ela não é um
	 * quadro: é ressalva sobre tudo o que está acima, e um card em volta lhe
	 * daria o mesmo peso dos dados que ela apenas qualifica.
	 */
	.vt-dash__nota {
		max-width: var(--vt-medida);
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * A nota que qualifica a lista logo abaixo dela — "estes números não são do
	 * período" — precisa de respiro, senão encosta na primeira linha e as duas
	 * se leem como um bloco só. A do RODAPÉ da tela não leva esta margem: lá
	 * ela fecha a página e o espaço vem da grade.
	 *
	 * Filha direta, e não `.vt-dash__quadro .vt-dash__nota`: o descendente
	 * pegaria qualquer nota que um quadro venha a ter dentro de outra lista, e
	 * espaçamento herdado por acaso é o que faz uma tela vizinha mudar sozinha.
	 */
	.vt-dash__quadro > .vt-dash__nota {
		margin-block-end: var(--vt-space-4);
	}

	/*
	 * Área em SVG, e não trinta barrinhas: com 30 pontos a barra vira textura e
	 * a linha mostra a FORMA, que é o que "como vai" de fato pergunta. O
	 * desenho é `aria-hidden` e a legenda diz início, pico e fim — descrever
	 * trinta números em voz alta não é acessibilidade, é ruído.
	 */
	.vt-grafico {
		height: 10rem;
		/*
		 * O traço é fino de propósito e precisa de contraste, não de peso:
		 * mint sobre superfície clara já é discreto, e engordar a linha faria
		 * um pico de 35 parecer uma barra. O ganho vem do `non-scaling-stroke`
		 * no SVG, que impede o `preserveAspectRatio="none"` de esticar a
		 * espessura horizontalmente e deixá-la irregular ao longo da curva.
		 */
	}

	.vt-grafico svg {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.vt-grafico__linha {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		animation: vt-traco 1100ms var(--vt-ease-entrada) backwards;
	}

	@keyframes vt-traco {
		from {
			stroke-dasharray: 0 1;
		}
	}

	.vt-grafico__area {
		animation: vt-aparece 900ms var(--vt-ease-entrada) 200ms backwards;
	}

	@keyframes vt-aparece {
		from { opacity: 0; }
	}

	.vt-grafico__legenda {
		display: flex;
		justify-content: space-between;
		margin: var(--vt-space-3) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		font-variant-numeric: tabular-nums;
	}

	.vt-saidas {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * **As três células são POSICIONADAS, não empilhadas pela ordem.** A barra
	 * declara `grid-column: 1 / -1`, e com colocação automática ela empurrava o
	 * valor para uma TERCEIRA linha: rótulo em cima, barra no meio e o número
	 * solto embaixo, longe do que ele mede. O defeito é da ficha (etapa 11) —
	 * valor e rótulo são um par e se leem na mesma linha.
	 *
	 * Nunca apareceu porque a lista vinha do dashboard, e lá "Por onde saíram"
	 * esteve vazia em toda conferência: componente só se confere COM dado.
	 */
	.vt-saidas__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 2.5rem;
		gap: var(--vt-space-1) var(--vt-space-3);
		align-items: center;
	}

	.vt-saidas__nome {
		grid-area: 1 / 1;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * A marca ao lado do nome — "é o botão Agendar", "não está no seu vTag".
	 * Ela responde *onde eu acho esse link*, que é a pergunta que nasce ao ver
	 * um número alto num item que não está na lista do Linktree.
	 *
	 * Bloco e não inline: com quatro links de nome longo, uma marca no fim da
	 * linha empurraria o valor para fora do alinhamento. Cor de token, para
	 * atravessar os dois temas — literal aqui seria clara fixa, e no escuro
	 * sumiria no fundo.
	 */
	.vt-saidas__marca {
		display: block;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-saidas__valor {
		grid-area: 1 / 2;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-variant-numeric: tabular-nums;
		font-weight: var(--vt-peso-titulo);
		text-align: right;
	}

	.vt-saidas__barra {
		grid-area: 2 / 1 / 3 / -1;
		height: 6px;
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		overflow: hidden;
	}

	.vt-saidas__nivel {
		display: block;
		width: calc(var(--vt-pct, 0) * 1%);
		height: 100%;
		border-radius: var(--vt-radius-full);
		background: var(--vt-mint);
		animation: vt-cresce 700ms var(--vt-ease-transf) backwards;
	}

	@keyframes vt-cresce {
		from { width: 0; }
	}

	/* ── divulgar: o par de "Minhas clínicas" ───────────────────────── */

	/*
	 * **Uma ficha sozinha no fim de uma grade de 12 colunas fica órfã.** Era o
	 * caso de "Minhas clínicas", que ocupava meia largura e deixava a outra
	 * metade em branco no pé da tela.
	 *
	 * O par não é enchimento: divulgar é a única coisa que o dono do vTag pode
	 * fazer para mexer nos números que ele acabou de ler no alto da mesma tela.
	 * O endereço à mão, com um clique para copiar, é o caminho mais curto entre
	 * "vi que tive 93 visitas" e "quero mais".
	 */
	.vt-divulgar__endereco {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		margin: 0 0 var(--vt-space-4);
		padding: var(--vt-space-3) var(--vt-space-4);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-divulgar__url {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-divulgar__copiar {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: var(--vt-space-2);
		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-xs);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-divulgar__copiar:hover,
	.vt-divulgar__copiar:focus-visible {
		border-color: var(--vt-texto-medio);
		background: var(--vt-realce);
	}

	/* Copiado é confirmação, e some sozinha: não vale um aviso de rodapé. */
	.vt-divulgar__copiar.esta-feito {
		border-color: var(--vt-estado-ok);
		color: var(--vt-estado-ok);
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-kpi,
		.vt-anel__arco,
		.vt-grafico__linha,
		.vt-grafico__area,
		.vt-saidas__nivel,
		.vt-app__menu {
			animation: none;
		}

		.vt-app,
		.vt-app__recolher,
		.vt-app__seta,
		.vt-app__perfil-botao,
		.vt-app__menu-item {
			transition: none;
		}
	}
}

@layer componente {
	/*
	 * ══ o EDITOR do vTag ════════════════════════════════════════════════
	 *
	 * A tela mais usada da área, e a que era mais longa: sete seções numa
	 * rolagem só, o "Salvar" no meio do caminho, o estado numa faixa de texto
	 * e a foto perdida entre dois campos. Quem entrava para trocar um telefone
	 * rolava por tudo.
	 *
	 * A cabeça responde "de quem é este vTag e o que dá para fazer com ele";
	 * as abas levam a qualquer seção sem esconder nenhuma; e a barra de salvar
	 * só existe quando há o que salvar.
	 */

	/*
	 * **O editor é uma coluna de digitação, não um dashboard.** A medida de
	 * 96rem serve à grade do painel, onde quatro indicadores dividem a
	 * largura; aqui ela produzia um campo de CEP com 1.170 px. Campo longo
	 * demais não é generosidade: ele desalinha o olho entre o rótulo e o que
	 * se digitou, e sugere que cabe muito mais texto do que cabe.
	 */
	.vt-editor {
		max-width: 62rem;
	}

	/*
	 * Os campos de valor curto param onde o valor acaba. É a régua da ficha
	 * aplicada à entrada: a largura do campo é uma promessa sobre o tamanho do
	 * que se espera dentro dele.
	 */
	.vt-editor #vt-cep,
	.vt-editor #vt-numero,
	.vt-editor #vt-uf-perfil {
		max-width: 12rem;
	}

	.vt-editor__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-5);
		margin-bottom: var(--vt-space-5);
	}

	.vt-editor__quem {
		display: flex;
		align-items: center;
		gap: var(--vt-space-5);
		min-width: 0;
	}

	.vt-editor__retrato {
		position: relative;
		flex: none;
	}

	.vt-editor__retrato img,
	.vt-editor__monograma {
		display: block;
		width: 5.5rem;
		height: 5.5rem;
		border: 3px solid var(--vt-superficie-1);
		border-radius: var(--vt-radius-full);
		box-shadow: 0 0 0 1px var(--vt-linha);
		object-fit: cover;
	}

	.vt-editor__monograma {
		display: grid;
		place-items: center;
		background: var(--vt-realce-forte);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-display);
	}

	/*
	 * O botão da câmera é uma pastilha sobre o canto do retrato — o lugar em
	 * que este público já procura trocar foto, em qualquer aplicativo. Trocar
	 * a foto é raro, e um seletor de arquivo aberto no alto da tela pesa mais
	 * do que ajuda.
	 */
	/*
	 * `min-height: 0` porque a folha de base dá a todo `button` a altura do
	 * alvo de toque (44px): o botão saía 36×44 — uma pílula, não um círculo.
	 * Aqui o alvo generoso é o retrato inteiro logo ao lado; o que este
	 * controle precisa ser é redondo e pequeno.
	 */
	.vt-editor__trocar {
		position: absolute;
		right: -0.25rem;
		bottom: -0.25rem;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		min-height: 0;
		padding: 0;
		border: 2px solid var(--vt-superficie-1);
		border-radius: var(--vt-radius-full);
		background: var(--vt-navy);
		color: var(--vt-white);
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-editor__trocar:hover,
	.vt-editor__trocar:focus-visible {
		background: var(--vt-interacao);
	}

	:root[data-vt-tema="escuro"] .vt-editor__trocar {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

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

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

	.vt-editor__endereco {
		margin: var(--vt-space-1) 0 0;
		font-size: var(--vt-fs-sm);
		overflow-wrap: anywhere;
	}

	.vt-editor__endereco a {
		color: var(--vt-interacao);
		text-decoration: none;
	}

	.vt-editor__endereco a:hover,
	.vt-editor__endereco a:focus-visible {
		text-decoration: underline;
	}

	/*
	 * O estado era um parágrafo de faixa larga com o recado inteiro. Aqui ele
	 * é uma linha com um ponto: a mesma informação, no peso de um rótulo, e no
	 * lugar onde se lê quem é o dono — porque o estado É um atributo do vTag,
	 * não um aviso do sistema.
	 */
	.vt-editor__estado {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-editor__ponto {
		flex: none;
		width: 0.45rem;
		height: 0.45rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-estado-alerta);
	}

	.vt-editor__estado--ativo .vt-editor__ponto {
		background: var(--vt-estado-ok);
	}

	.vt-editor__estado--suspenso .vt-editor__ponto {
		background: var(--vt-estado-erro);
	}

	.vt-editor__acoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
	}

	.vt-editor__foto-caixa {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--vt-space-4);
		margin-bottom: var(--vt-space-5);
		padding: var(--vt-space-5);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
	}

	.vt-editor__foto-caixa[hidden] {
		display: none;
	}

	.vt-editor__foto-caixa form {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--vt-space-3);
	}

	.vt-editor__foto-caixa .vt-campo__rotulo,
	.vt-editor__foto-caixa .vt-campo__ajuda {
		flex-basis: 100%;
	}

	.vt-pendencias-conta {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin: 0;
		padding-left: var(--vt-space-5);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/* ── as abas ────────────────────────────────────────────────────── */

	/*
	 * Elas são âncoras, e não abas de verdade. Um editor com abas que escondem
	 * obriga a salvar por aba ou a adivinhar o que ficou por preencher do
	 * outro lado — e a completude do perfil é calculada sobre o conjunto.
	 * Estas servem para chegar rápido e para dizer onde se está.
	 *
	 * Grudam logo abaixo do topo fixo do app: `--vt-topo` é a altura dele,
	 * medida no `conta.js`, porque o valor muda com a fonte e com o zoom.
	 */
	.vt-editor__abas {
		position: sticky;
		top: var(--vt-topo, 3.5rem);
		z-index: 12;
		display: flex;
		gap: var(--vt-space-1);
		margin-bottom: var(--vt-space-5);
		padding: var(--vt-space-2) 0;
		background: color-mix(in srgb, var(--vt-superficie-2) 88%, transparent);
		backdrop-filter: blur(12px);
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	.vt-editor__aba {
		flex: none;
		padding: var(--vt-space-2) var(--vt-space-4);
		border-radius: var(--vt-radius-full);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
		white-space: nowrap;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-editor__aba:hover,
	.vt-editor__aba:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-editor__aba.esta-aqui {
		background: var(--vt-navy);
		color: var(--vt-white);
	}

	:root[data-vt-tema="escuro"] .vt-editor__aba.esta-aqui {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	/*
	 * O alvo da âncora precisa parar ABAIXO do topo fixo e das abas, senão a
	 * seção chega escondida atrás dos dois. `scroll-margin-top` é o que existe
	 * para isso — deslocar por `padding` mentiria sobre o espaçamento.
	 */
	.vt-editor .vt-ficha-conta {
		scroll-margin-top: calc(var(--vt-topo, 3.5rem) + 4rem);
	}

	/* ── a barra de salvar ──────────────────────────────────────────── */

	/*
	 * Num formulário desta altura, um "Salvar" parado no fim é um botão que a
	 * pessoa procura; e um sempre à vista, mesmo sem nada para salvar, é ruído
	 * permanente. Esta aparece quando há alteração e gruda no pé enquanto
	 * houver.
	 */
	/*
	 * **`fixed`, não `sticky`.** Grudada, ela só existia enquanto o próprio
	 * formulário estava em vista: bastava rolar até Endereços — que é outro
	 * formulário, fora deste — para o "Salvar alterações" sumir com as
	 * alterações ainda pendentes. Uma barra de salvar que desaparece conforme
	 * a rolagem é pior do que um botão parado no fim, porque some sem avisar.
	 *
	 * Fixa, ela acompanha a tela inteira, e o `padding-bottom` no editor abre o
	 * espaço para ela não cobrir o último cartão.
	 */
	.vt-editor__barra {
		position: fixed;
		right: var(--vt-space-5);
		bottom: var(--vt-space-5);
		left: var(--vt-space-5);
		z-index: 14;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-4);
		width: auto;
		max-width: 62rem;
		margin-inline: auto;
		padding: var(--vt-space-4) var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-lg);
		animation: vt-sobe 240ms var(--vt-ease-entrada) backwards;
	}

	/*
	 * A barra fixa vive na largura da janela, e o trilho ocupa os primeiros
	 * 16,5rem dela. Sem este recuo ela nasceria por baixo do menu.
	 */
	@media (min-width: 900px) {
		.vt-editor__barra {
			left: calc(16.5rem + var(--vt-space-5));
		}

		.vt-trilho-recolhido .vt-editor__barra {
			left: calc(4.75rem + var(--vt-space-5));
		}
	}

	@media (max-width: 899px) {
		/* Acima da barra de abas do celular, nunca por baixo dela. */
		.vt-editor__barra {
			bottom: calc(var(--vt-space-16) + var(--vt-space-2));
			right: var(--vt-space-4);
			left: var(--vt-space-4);
		}
	}

	.vt-editor {
		padding-bottom: var(--vt-space-16);
	}

	.vt-editor__barra[hidden] {
		display: none;
	}

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

	/* ── o que o legado ainda desenha aqui ──────────────────────────── */

	/*
	 * `vt-registros-conta`, `vt-vinculos` e `vt-campos-lado-a-lado` continuam
	 * vindo de `vtag.css`, e lá eles usam os apelidos de token que não viram
	 * com o tema. Redeclarar o que decide COR é o suficiente para a tela
	 * funcionar no escuro; a forma daqueles componentes serve, e reescrevê-la
	 * seria refazer o que já está certo.
	 */
	.vt-corpo-conta .vt-registro-conta {
		border-color: var(--vt-linha);
		background: var(--vt-superficie-2);
	}

	/*
	 * ── a lista de vínculos, na gramática da casa ───────────────────
	 *
	 * Ela vinha inteira de `vtag.css` e era o último componente do legado à
	 * vista no editor: faixa preenchida em `--vt-superficie-2` dentro de um
	 * cartão que já é `--vt-superficie-1` — duas superfícies quase iguais
	 * empilhadas, que no escuro leem como um realce que ninguém pediu —, e o
	 * nome desenhado como link de artigo, azul e sublinhado.
	 *
	 * **Nome de pessoa numa lista de sistema é rótulo, não link de leitura.**
	 * É a mesma decisão do card da clínica e do trilho de seções: `currentColor`
	 * e sublinhado só no hover. A régua vira o separador — o que já separa as
	 * fichas em toda esta área.
	 *
	 * Vale para as duas pontas do vínculo: a seção "Profissionais" da clínica e
	 * a seção "Clínicas" do vTag são a mesma lista vista dos dois lados.
	 */
	.vt-corpo-conta .vt-vinculos__item {
		gap: var(--vt-space-2) var(--vt-space-4);
		padding: var(--vt-space-4) 0;
		border-bottom: 1px solid var(--vt-linha);
		background: none;
	}

	.vt-corpo-conta .vt-vinculos__item:last-child {
		border-bottom: 0;
	}

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

	/*
	 * ── o convite por e-mail mostra nome E endereço ─────────────────
	 *
	 * A linha do convite exibia só um dos dois — o nome quando havia perfil, o
	 * e-mail quando não havia. Com o nome do convite gravado, os dois existem
	 * ao mesmo tempo e os dois importam por motivos diferentes: o nome é como a
	 * clínica reconhece o convite na lista, e o e-mail é para onde a mensagem
	 * foi. É o e-mail que resolve "convidei o Paulo e ele diz que não recebeu".
	 *
	 * `align-items: flex-start` porque o filho é um link: em coluna, sem isso,
	 * ele esticaria pela faixa inteira e a área clicável passaria a ser a linha
	 * toda, não o nome.
	 */
	.vt-corpo-conta .vt-vinculos__quem {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--vt-space-1);
	}

	.vt-corpo-conta .vt-vinculos__email {
		font-weight: var(--vt-peso-corpo);
		font-size: var(--vt-fs-xs);
		color: var(--vt-texto-fraco);
		/* Endereço longo em faixa estreita: quebrar em qualquer ponto é o único
		   jeito de ele não empurrar a linha para fora. */
		word-break: break-all;
	}

	/*
	 * ── a linha que a resposta acabou de mexer ──────────────────────
	 *
	 * O aviso de canto diz "recebi"; ele não diz qual. O convite recém-enviado
	 * nasce no TOPO da lista, e o formulário que o enviou fica no pé da seção —
	 * sem isto, quem clica em "Enviar convite" não vê nada mudar onde está
	 * olhando, e precisa procurar na lista o que acabou de fazer.
	 *
	 * **Realce estático, e não animação que apaga.** O `esta-nova` só existe no
	 * desenho da resposta àquele envio: a navegação seguinte já vem sem ele. Um
	 * clarão de dois segundos exigiria que a pessoa estivesse olhando no
	 * instante certo — e some para quem pediu menos movimento. Este fica até a
	 * próxima ação, e sai sozinho.
	 *
	 * A barra é `--vt-estado-ok`, e não mint: mint é selo de verificação, e
	 * confirmar uma ação não é atestar identidade (§6.1).
	 */
	.vt-corpo-conta .vt-vinculos__item.esta-nova {
		padding-inline: var(--vt-space-3);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-2);
		box-shadow: inset 3px 0 0 var(--vt-estado-ok);
	}

	.vt-corpo-conta .vt-vinculos__quem a {
		color: inherit;
		text-decoration: none;
	}

	.vt-corpo-conta .vt-vinculos__quem a:hover,
	.vt-corpo-conta .vt-vinculos__quem a:focus-visible {
		text-decoration: underline;
	}

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

	/*
	 * As ações são do fim da linha. Sem isto elas ficavam encostadas no estado,
	 * e "Vinculado Desfazer vínculo" lia como uma frase só.
	 *
	 * **O invólucro entrou quando as ações viraram três.** Com uma só, empurrar
	 * cada `<form>` bastava; com "Reenviar convite", "Link do convite" e
	 * "Cancelar convite", o que quebra no celular precisa quebrar JUNTO — três
	 * formulários irmãos num `flex-wrap` se espalham um por linha, cada um numa
	 * margem diferente, e o que era uma barra de ações vira uma lista.
	 */
	.vt-corpo-conta .vt-vinculos__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vt-space-1) var(--vt-space-3);
		margin-inline-start: auto;
	}

	/*
	 * ── a confirmação de desfazer vínculo ───────────────────────────
	 *
	 * `flex: 1 0 100%` porque o item é `display: flex; flex-wrap: wrap`: sem
	 * a base de 100% a caixa disputaria a linha com o nome e o estado, e uma
	 * pergunta espremida ao lado do que ela pergunta não é uma pergunta.
	 *
	 * A superfície é `--vt-superficie-2` sobre o cartão em `--vt-superficie-1`,
	 * e a borda em `--vt-estado-erro` a 30% é o que separa esta caixa da
	 * confirmação neutra do assistente: as duas têm a mesma forma, e só uma
	 * delas apaga algo que está no ar. Tudo em token, para ela existir nos
	 * dois temas — `--vt-superficie-2` é escura no escuro, e a borda vira o
	 * vermelho claro do tema junto com ela.
	 */
	.vt-corpo-conta .vt-desvincular {
		flex: 1 0 100%;
		display: grid;
		gap: var(--vt-space-3);
		margin-block-start: var(--vt-space-2);
		padding: var(--vt-space-5);
		border: 1px solid color-mix(in srgb, var(--vt-estado-erro) 30%, transparent);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	/*
	 * `display: none` explícito: o `hidden` não vence o `display: grid` acima,
	 * e a caixa nasceria aberta em toda linha da lista.
	 */
	.vt-corpo-conta .vt-desvincular[hidden] {
		display: none;
	}

	/* Foco programático, e não navegação por Tab: a caixa recebe o foco para
	   ser lida, e um anel nela repetiria o que a borda já diz. Os dois botões
	   dentro continuam com o anel deles. */
	.vt-corpo-conta .vt-desvincular:focus {
		outline: none;
	}

	.vt-corpo-conta .vt-desvincular__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-corpo-conta .vt-desvincular__texto {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-corpo-conta .vt-desvincular__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3) var(--vt-space-5);
	}

	/*
	 * **A ação destrutiva é vermelha e discreta; a saída segura é a primária.**
	 * É a regra que o cliente escreveu na confirmação da especialidade — a
	 * resposta esperada vem primeiro e com peso —, e aqui a esperada é ficar.
	 *
	 * Escopado nesta caixa de propósito: um `.vt-acao--perigo` global é decisão
	 * de sistema, e nenhuma outra tela pediu uma ainda.
	 */
	.vt-corpo-conta .vt-desvincular__sair {
		color: var(--vt-estado-erro);
	}

	.vt-corpo-conta .vt-desvincular__sair:hover,
	.vt-corpo-conta .vt-desvincular__sair:focus-visible {
		color: var(--vt-estado-erro);
		text-decoration-thickness: 2px;
	}

	/*
	 * ── o reenvio em pausa ──────────────────────────────────────────
	 *
	 * Reenviar é barato para quem clica e caro para quem já tem a mensagem
	 * parada na caixa. Durante a pausa o botão **diz quando volta** em vez de
	 * aceitar o clique e responder "não" — e o `conta.js` o devolve ao normal
	 * quando o tempo passa, para ele não mentir ao contrário.
	 *
	 * `text-decoration: none` porque sublinhado é a marca do que é clicável
	 * nesta área: mantê-lo aqui prometeria o clique que este botão recusa.
	 */
	.vt-corpo-conta .vt-vinculos__acoes .vt-acao--discreta:disabled {
		color: var(--vt-texto-fraco);
		text-decoration: none;
		cursor: default;
	}

	/*
	 * ── o andamento do convite ──────────────────────────────────────
	 *
	 * **Chamava-se `vt-trilha`, e o nome já era de outro dono.** O assistente
	 * usa `.vt-trilha` para as barras de progresso dos capítulos, e este bloco
	 * o pegou emprestado sem olhar: `.vt-corpo-conta .vt-trilha` é mais
	 * específico que `.vt-trilha`, então ele vencia mesmo declarado antes — o
	 * `grid-auto-flow: column` daquelas barras virava `flex-direction: column`
	 * e o cabeçalho do assistente inteiro passou a empilhar. Quem viu foi o
	 * cliente, numa tela que este trabalho não tinha encostado.
	 *
	 * Seis pontos e uma frase. "Convite enviado — esperando o cadastro" ficava
	 * parado porque era o único estado que o banco guardava; as outras cinco
	 * etapas já existiam espalhadas em quatro tabelas e nunca tinham sido lidas
	 * juntas.
	 *
	 * **Os pontos são a figura, a frase é o texto.** A lista é `aria-hidden` e
	 * a frase abaixo diz a mesma coisa em palavras — cada público recebe a
	 * informação uma vez, em vez de o leitor de tela ouvir seis etapas e
	 * depois o resumo delas.
	 */
	.vt-corpo-conta .vt-andamento {
		flex: 1 1 100%;
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin-top: var(--vt-space-1);
	}

	.vt-corpo-conta .vt-andamento__pontos {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Cada item é o ponto MAIS o trecho de linha até o próximo — por isso ele
	 * tem largura e o último não. Desenhar a linha como um elemento separado
	 * atrás de tudo pediria posicionamento absoluto sobre uma faixa que muda de
	 * largura com a fonte do sistema.
	 */
	.vt-corpo-conta .vt-andamento__ponto {
		position: relative;
		flex: 0 0 1.9rem;
		height: 0.5rem;
	}

	.vt-corpo-conta .vt-andamento__ponto:last-child {
		flex-basis: 0.5rem;
	}

	.vt-corpo-conta .vt-andamento__ponto::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0.25rem;
		right: -0.25rem;
		height: 1px;
		background: var(--vt-linha-forte);
		transform: translateY(-50%);
	}

	.vt-corpo-conta .vt-andamento__ponto:last-child::before {
		content: none;
	}

	.vt-corpo-conta .vt-andamento__ponto::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--vt-superficie-1);
		box-shadow: inset 0 0 0 1px var(--vt-linha-forte);
		transform: translateY(-50%);
	}

	.vt-corpo-conta .vt-andamento__ponto.esta-feito::after {
		background: var(--vt-estado-ok);
		box-shadow: none;
	}

	/*
	 * **A linha se pinta pelo ponto SEGUINTE, não pelo próprio.** O trecho
	 * entre a etapa 2 e a 3 só está percorrido quando a 3 aconteceu; pintá-lo
	 * junto com a 2 faria a trilha prometer um passo à frente do que houve.
	 * Sem `:has` a linha fica cinza — a leitura degrada para "os pontos dizem",
	 * que continua certa.
	 */
	.vt-corpo-conta .vt-andamento__ponto:has(+ .esta-feito)::before {
		background: var(--vt-estado-ok);
	}

	/*
	 * O ponto onde o convite parou ganha um halo, para a frase abaixo ter
	 * endereço na figura.
	 *
	 * **O halo é da própria cor, diluída — não um vão pintado do fundo.** A
	 * linha muda de superfície quando o realce de "acabei de mexer aqui" cai
	 * sobre ela, e um anel que finge ser o fundo aparece como um aro errado
	 * exatamente aí. Translúcido funciona sobre as duas superfícies e nos dois
	 * temas, sem precisar saber em qual delas está.
	 */
	.vt-corpo-conta .vt-andamento__ponto.esta-agora::after {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-estado-ok) 30%, transparent);
	}

	.vt-corpo-conta .vt-andamento__ponto.esta-em-alerta::after {
		background: var(--vt-estado-erro);
		box-shadow: none;
	}

	.vt-corpo-conta .vt-andamento__agora {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 var(--vt-space-2);
		margin: 0;
		font-size: var(--vt-fs-xs);
		color: var(--vt-texto-fraco);
		font-weight: var(--vt-peso-corpo);
	}

	.vt-corpo-conta .vt-andamento__etapa {
		color: var(--vt-texto-medio);
		font-weight: var(--vt-peso-medio);
	}

	/* O separador é do CSS: no HTML ele viraria texto que o leitor de tela
	   soletra, e a frase já é lida como duas partes pela pontuação visual. */
	.vt-corpo-conta .vt-andamento__quando::before {
		content: "·";
		margin-inline-end: var(--vt-space-2);
	}

	.vt-corpo-conta .vt-andamento__erro {
		flex-basis: 100%;
		color: var(--vt-estado-erro);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * ── o link do convite ───────────────────────────────────────────
	 *
	 * Ele nasce dentro da linha do convite — `flex-basis: 100%` numa faixa que
	 * já é `flex-wrap` —, e não no topo da seção: a lista pode ter vários
	 * convites pendentes, e um endereço de noventa caracteres solto lá em cima
	 * não diz de quem é.
	 *
	 * A borda tracejada é a mesma de "Divulgue seu vTag", e pelo mesmo motivo:
	 * ela marca o que é para copiar, não o que é para ler.
	 */
	.vt-corpo-conta .vt-convite-link {
		flex: 1 1 100%;
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin-top: var(--vt-space-2);
	}

	.vt-corpo-conta .vt-convite-link__texto {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-corpo);
	}

	.vt-corpo-conta .vt-convite-link__caixa {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		margin: 0;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		/*
		 * **`superficie-1`, e não `2`.** A caixa só existe dentro da linha que
		 * o realce acabou de marcar, e o realce já é `superficie-2`: repetir a
		 * superfície empilharia dois fundos idênticos e deixaria a borda
		 * tracejada sozinha para separar as duas coisas. Recuar um nível é o
		 * que faz a caixa aparecer — e vale nos dois temas, porque o par
		 * `1`/`2` inverte junto com eles.
		 */
		background: var(--vt-superficie-1);
	}

	/*
	 * **A URL inteira, quebrando onde precisar.** No painel o endereço do vTag
	 * é curto e cabe numa linha com reticências; aqui ele carrega um token de
	 * 64 caracteres, e reticências esconderiam justamente a parte que faz o
	 * link funcionar — deixando quem não tem JavaScript sem nada para
	 * selecionar à mão.
	 */
	.vt-corpo-conta .vt-convite-link__url {
		flex: 1 1 auto;
		min-width: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-corpo);
		line-height: var(--vt-lh-compacta);
		word-break: break-all;
	}

	.vt-corpo-conta .vt-convite-link__copiar {
		display: inline-flex;
		flex: none;
		align-self: flex-start;
		align-items: center;
		gap: var(--vt-space-2);
		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-xs);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-corpo-conta .vt-convite-link__copiar:hover,
	.vt-corpo-conta .vt-convite-link__copiar:focus-visible {
		border-color: var(--vt-texto-medio);
		background: var(--vt-realce);
	}

	.vt-corpo-conta .vt-convite-link__copiar.esta-feito {
		border-color: var(--vt-estado-ok);
		color: var(--vt-estado-ok);
	}

	@media (max-width: 40rem) {
		.vt-corpo-conta .vt-convite-link__caixa {
			flex-direction: column;
			align-items: stretch;
		}

		.vt-corpo-conta .vt-convite-link__copiar {
			align-self: flex-start;
		}
	}

	.vt-corpo-conta fieldset {
		border-color: var(--vt-linha);
	}

	.vt-corpo-conta legend,
	.vt-corpo-conta code {
		color: var(--vt-texto-forte);
	}

	/*
	 * O prefixo do endereço — `vtagsv2.pichost.com.br/@` — vem de
	 * `formulario.css` numa linha que não quebra: no estreito ele empurrava o
	 * campo para fora do cartão. Aqui ele passa para cima do campo, que é onde
	 * um prefixo longo cabe, e encolhe para a medida do rótulo.
	 */
	@media (max-width: 700px) {
		.vt-editor .vt-campo__arroba {
			flex-wrap: wrap;
		}

		.vt-editor .vt-campo__arroba span {
			flex-basis: 100%;
			font-size: var(--vt-fs-sm);
		}

		.vt-editor .vt-campo__arroba .vt-campo__entrada {
			flex: 1 1 auto;
			min-width: 0;
		}
	}

	@media (max-width: 599px) {
		.vt-editor__quem {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--vt-space-4);
		}

		.vt-editor__acoes {
			width: 100%;
		}

		.vt-editor__acoes > *,
		.vt-editor__acoes form,
		.vt-editor__acoes .vt-acao {
			flex: 1 1 auto;
			justify-content: center;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-editor__barra,
		.vt-editor__aba,
		.vt-editor__trocar {
			animation: none;
			transition: none;
		}
	}
}

@layer componente {
	/*
	 * ══ o EDITOR por SEÇÕES ═════════════════════════════════════════════
	 *
	 * A primeira versão desta tela era um formulário contínuo com âncoras, e o
	 * cliente recusou com o argumento certo: **um vTag tem muito dado, e a
	 * rolagem única é o que espanta quem vai gerenciá-lo.** O modelo passou a
	 * ser o do painel administrativo — cada assunto no seu lugar, com o próprio
	 * salvar — e o mapa de seções é o mesmo de lá, para quem dá suporte não
	 * precisar traduzir de cabeça a tela do profissional para a da agência.
	 */

	.vt-ed__quadro {
		display: grid;
		gap: var(--vt-space-6);
		align-items: start;
	}

	@media (min-width: 1000px) {
		.vt-ed__quadro {
			grid-template-columns: 15rem minmax(0, 1fr);
			gap: var(--vt-space-8);
		}

		.vt-ed__trilho {
			position: sticky;
			top: calc(var(--vt-topo, 4rem) + var(--vt-space-4));
		}
	}

	.vt-ed__quadro > * {
		min-width: 0;
	}

	/* O voltar é só do celular; na tela larga o trilho está sempre ali. */
	.vt-ed__voltar {
		display: none;
		align-items: center;
		gap: var(--vt-space-2);
		margin-bottom: var(--vt-space-4);
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		text-decoration: none;
	}

	@media (max-width: 999px) {
		/*
		 * **Ou a lista, ou a seção.** No estreito os dois não cabem: com os
		 * dois na página, quem abria "Atendimento" via o menu inteiro antes de
		 * chegar ao primeiro campo. Sem `?s=` mostra-se a lista; com ele, a
		 * seção e a porta de volta.
		 */
		.vt-ed__quadro.esta-na-secao .vt-ed__trilho {
			display: none;
		}

		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__conteudo {
			display: none;
		}

		/*
		 * **A saída acompanha a rolagem.**
		 *
		 * Ela existia só no alto da seção, e no celular uma seção é longa:
		 * quem terminou de mexer nos horários de domingo tinha de subir sete
		 * dias para voltar à lista. O gesto que o cliente elogiou — edita um
		 * bloco, volta, escolhe outro — só é barato se o "volta" estiver
		 * sempre à mão.
		 *
		 * A margem negativa é o que a faz sangrar até as bordas do cartão:
		 * uma barra que gruda precisa cobrir o que passa por baixo, e uma
		 * barra com o recuo do conteúdo deixaria duas frestas nas laterais.
		 */
		.vt-ed__quadro.esta-na-secao .vt-ed__voltar {
			position: sticky;
			z-index: 5;
			top: var(--vt-topo, 3.5rem);
			display: flex;
			margin: calc(var(--vt-space-6) * -1) calc(var(--vt-space-6) * -1) var(--vt-space-5);
			padding: var(--vt-space-3) var(--vt-space-6);
			border-bottom: 1px solid var(--vt-linha);
			border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0;
			background: var(--vt-superficie-1);
		}


		/*
		 * Na lista, cada seção é uma linha de toque com seta — o padrão de
		 * "abre outra tela" que todo aplicativo usa. Sem isso ela pareceria um
		 * menu lateral espremido, que é o que era.
		 */
		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__trilho {
			padding: var(--vt-space-2) 0;
			border: 1px solid var(--vt-linha);
			border-radius: var(--vt-radius-lg);
			background: var(--vt-superficie-1);
			box-shadow: var(--vt-sombra-sm);
		}

		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__grupo {
			padding-inline: var(--vt-space-5);
		}

		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__item {
			padding: var(--vt-space-4) var(--vt-space-5);
			border-radius: 0;
			font-size: var(--vt-fs-base);
		}

		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__item::after {
			content: "";
			flex: none;
			width: 0.5rem;
			height: 0.5rem;
			border-top: 2px solid var(--vt-texto-fraco);
			border-right: 2px solid var(--vt-texto-fraco);
			transform: rotate(45deg);
		}

		.vt-ed__quadro:not(.esta-na-secao) .vt-ed__conta {
			margin-left: auto;
		}
	}

	/* ── o trilho de seções ─────────────────────────────────────────── */

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

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

	.vt-ed__lista {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-ed__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-3);
		padding: var(--vt-space-3);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		text-decoration: none;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-ed__item:hover,
	.vt-ed__item:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-ed__item.esta-aqui {
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * A contagem existe para poupar a visita: "Endereços 2" responde antes de
	 * abrir. E o zero é o convite mais barato que existe para preencher — por
	 * isso ele aparece, apagado, em vez de sumir.
	 */
	.vt-ed__conta {
		flex: none;
		min-width: 1.5rem;
		padding: 0.05rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
		font-variant-numeric: tabular-nums;
		text-align: center;
	}

	.vt-ed__conta.esta-vazia {
		background: none;
		color: var(--vt-texto-fraco);
	}

	/* ── o conteúdo da seção ────────────────────────────────────────── */

	.vt-ed__conteudo {
		padding: var(--vt-space-6);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-ed__topo {
		margin-bottom: var(--vt-space-6);
		padding-bottom: var(--vt-space-5);
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-ed__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		letter-spacing: var(--vt-track-sub);
	}

	.vt-ed__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-ed__vazio {
		margin: 0 0 var(--vt-space-5);
		padding: var(--vt-space-5);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-ed__par {
		display: grid;
		gap: 0 var(--vt-space-5);
	}

	@media (min-width: 700px) {
		.vt-ed__par {
			grid-template-columns: 1fr 1fr;
		}
	}

	.vt-ed__par > * {
		min-width: 0;
	}

	.vt-campo--meio {
		max-width: 28rem;
	}

	/*
	 * `vt-ed__bloco`, e não `vt-ed__grupo`: aquele é o rótulo de grupo do
	 * trilho ("PERFIL", "ATUAÇÃO"), que é caixa alta. Reusar o nome no
	 * `<fieldset>` da seção fez `text-transform` — que é HERDADO — descer
	 * sobre todos os rótulos, ajudas e caixas de dentro. Duas coisas
	 * diferentes não dividem classe.
	 */
	.vt-ed__bloco {
		min-width: 0;
		margin: 0 0 var(--vt-space-6);
		padding: 0;
		border: 0;
	}

	.vt-ed__legenda {
		margin-bottom: var(--vt-space-3);
		padding: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

	/*
	 * **O selo da seção mora na linha do título.**
	 *
	 * Dentro da caixa de etiquetas ele custava caro dos dois jeitos: absoluto,
	 * colava na borda por cima do campo; em fluxo, reservava uma faixa vazia
	 * permanente no pé da caixa — e o cliente viu o inchaço. A linha do título
	 * já existe, tem folga à direita e não reserva altura nenhuma.
	 */
	.vt-ed__bloco--selado {
		position: relative;
	}

	.vt-ed__bloco--selado > .vt-campo__selo {
		top: 0.1rem;
		right: 0;
		font-size: var(--vt-fs-xs);
		transform: none;
	}

	/*
	 * O botão de salvar da seção some quando o salvamento automático está de
	 * pé: ele existe para quem está sem JavaScript, e `conta.js` o esconde. Um
	 * botão que nunca precisa ser clicado ensina a desconfiar do automático.
	 */
	.vt-ed__enviar {
		margin: var(--vt-space-6) 0 0;
	}

	.vt-ed__enviar[hidden] {
		display: none;
	}

	/* ── o selo de gravação ─────────────────────────────────────────── */

	.vt-campo__caixa {
		position: relative;
		display: block;
	}

	/*
	 * **Um campo que se grava sozinho precisa dizer três coisas** que um campo
	 * comum não diz: que está salvando, que salvou e que falhou. Sem isso o
	 * automático é pior que o botão — quem não vê confirmação sai e volta para
	 * conferir.
	 */
	.vt-campo__selo {
		position: absolute;
		top: 50%;
		right: var(--vt-space-3);
		display: none;
		font-size: var(--vt-fs-xs);
		transform: translateY(-50%);
	}

	.vt-campo__selo[data-vt-estado="salvando"],
	.vt-campo__selo[data-vt-estado="salvo"],
	.vt-campo__selo[data-vt-estado="erro"] {
		display: block;
	}

	.vt-campo__selo[data-vt-estado="salvando"] { color: var(--vt-texto-fraco); }
	.vt-campo__selo[data-vt-estado="salvo"]    { color: var(--vt-estado-ok); }
	.vt-campo__selo[data-vt-estado="erro"]     { color: var(--vt-estado-erro); }

	/* Numa área de texto o selo desce para o canto de baixo, onde não cobre. */
	.vt-campo__caixa:has(textarea) .vt-campo__selo {
		top: auto;
		bottom: var(--vt-space-3);
		transform: none;
	}

	.vt-campo__caixa:has(textarea) .vt-campo__entrada,
	.vt-campo__caixa:has(select) .vt-campo__entrada {
		width: 100%;
	}

	/* ── prefixo de campo (@ e redes) ───────────────────────────────── */

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

	/*
	 * A folha do catálogo dá a `.vt-campo__arroba span` o tamanho `fs-xl` — ele
	 * serve ao portão, onde o prefixo do `@` é a peça principal da linha. Aqui
	 * o prefixo é contexto de um campo entre oito, e no tamanho grande ele
	 * competia com o próprio valor. O seletor precisa da mesma força.
	 */
	.vt-campo__arroba .vt-campo__prefixo {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-corpo);
		white-space: nowrap;
	}

	.vt-campo__arroba .vt-campo__entrada {
		flex: 1 1 12rem;
		min-width: 0;
	}

	/*
	 * **O selo também é um `span` dentro do `.vt-campo__arroba`.**
	 *
	 * A regra do catálogo pinta TODO `span` ali com `fs-xl` e peso de título —
	 * ela foi escrita para o prefixo do `@`, que é a peça principal do portão.
	 * O prefixo já tinha a correção; o selo não, e por isso a confirmação de
	 * gravação do `@` saía enorme e em negrito no fim da linha, do tamanho de
	 * um título, enquanto a das outras seções é uma palavra discreta. Mesmo
	 * seletor, mesma força.
	 */
	.vt-campo__arroba .vt-campo__selo {
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-corpo);
		letter-spacing: normal;
		text-transform: none;
	}

	/* ── listas de itens (links, endereços) ─────────────────────────── */

	.vt-itens-ed {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-4);
		margin: 0 0 var(--vt-space-6);
		padding: 0;
		list-style: none;
	}

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

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

	.vt-item-ed__ordem {
		display: grid;
		flex: none;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xs);
		font-variant-numeric: tabular-nums;
	}

	.vt-item-ed__campos {
		display: grid;
		flex: 1 1 auto;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	@media (min-width: 700px) {
		.vt-item-ed__campos {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		}
	}

	.vt-item-ed__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
		margin-bottom: var(--vt-space-4);
	}

	.vt-item-ed__nome {
		color: var(--vt-texto-forte);
	}

	.vt-item-ed__selo {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: color-mix(in srgb, var(--vt-estado-ok) 16%, transparent);
		color: var(--vt-estado-ok);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-item-ed__topo .vt-campo__selo {
		position: static;
		margin-left: auto;
		transform: none;
	}

	.vt-item-ed__remover {
		margin-top: var(--vt-space-3);
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
	}

	.vt-ed__novo {
		margin-top: var(--vt-space-6);
		padding: var(--vt-space-5);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-lg);
	}

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

	/* ── horários ───────────────────────────────────────────────────── */

	.vt-horas {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
	}

	/*
	 * Grade, e não flex: as colunas de manhã e tarde precisam se alinhar entre
	 * as sete linhas. Em flex, um dia sem tarde encolheria e o "12:00" de
	 * quarta cairia embaixo do "08:00" de terça.
	 */
	.vt-horas__cabeca,
	.vt-horas__dia {
		display: grid;
		grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vt-space-3);
		align-items: center;
	}

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

	.vt-horas__dia {
		padding: var(--vt-space-2) 0;
		border-bottom: 1px solid var(--vt-linha);
	}

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

	@media (max-width: 700px) {
		/*
		 * No estreito a tarde desce para uma segunda linha, alinhada sob a
		 * manhã: duas faixas de hora lado a lado em 360 px não cabem sem
		 * espremer os campos até o formato ficar ilegível.
		 */
		.vt-horas__cabeca {
			display: none;
		}

		.vt-horas__dia {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--vt-space-2);
			padding-block: var(--vt-space-3);
		}
	}

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

	.vt-horas__faixa .vt-campo__entrada {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

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

	.vt-horas__extra {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/* ── especialidades ─────────────────────────────────────────────── */

	.vt-esp-ed {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-esp-ed__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
		padding: var(--vt-space-3) 0;
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-esp-ed__item .vt-marcar {
		flex: 1 1 14rem;
	}

	.vt-esp-ed__principal {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: var(--vt-navy);
		color: var(--vt-mint);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	/* O RQE só faz sentido na especialidade marcada. */
	.vt-esp-ed__rqe {
		flex: none;
		opacity: 0.4;
		transition: opacity var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-esp-ed__item.esta-marcada .vt-esp-ed__rqe {
		opacity: 1;
	}

	.vt-esp-ed__rqe .vt-campo__entrada {
		width: 8rem;
	}

	.vt-marcar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-3);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		cursor: pointer;
	}

	.vt-marcar input {
		width: 1.1rem;
		height: 1.1rem;
		accent-color: var(--vt-interacao);
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-ed__item,
		.vt-esp-ed__rqe {
			transition: none;
		}
	}
}

@layer componente {
	/*
	 * ══ os controles do editor, no padrão do admin ══════════════════════
	 *
	 * O cliente recusou a primeira versão com uma régua que vale para tudo o
	 * que vier: **numa área que precisa mostrar autoridade, o controle de
	 * fábrica é o que denuncia a falta de cuidado.** `<select>` de duas
	 * opções, `checkbox` de 13px e área de texto "um por linha" resolvem o
	 * dado e desfazem a impressão.
	 *
	 * Cada peça daqui tem par no painel administrativo. Não é imitação: é a
	 * mesma solução para o mesmo problema, e duas soluções diferentes para o
	 * mesmo dado divergem no primeiro dia.
	 */

	/* ── o alternador de duas opções ────────────────────────────────── */

	.vt-alterna {
		border: 0;
		margin: 0 0 var(--vt-space-5);
		padding: 0;
	}

	/*
	 * A linha do alternador: o controle e a confirmação de gravação, lado a
	 * lado. O selo mora aqui e não solto no formulário — ver `alternador()`.
	 */
	.vt-alterna__linha {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
	}

	/*
	 * **Isto é uma escolha, e precisa parecer uma.**
	 *
	 * A versão anterior encolheu os rótulos até `fs-xs` num trilho quase sem
	 * borda, e o cliente leu o resultado como ele é: parecia descrição, não
	 * seleção. Um controle que decide como o catálogo inteiro escreve sobre a
	 * pessoa não pode ser a menor coisa da tela.
	 *
	 * O que devolve o convite não é só tamanho: é o alvo de toque inteiro, a
	 * borda que fecha o trilho e o contraste da opção NÃO escolhida — se as
	 * duas são cinza-claro, não há par para comparar, e o que se vê é um selo.
	 */
	.vt-alterna__caixa {
		position: relative;
		display: inline-flex;
		padding: 0.25rem;
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-2);
	}

	/*
	 * O `radio` continua existindo — é ele que faz o teclado, o leitor de tela
	 * e o envio sem JavaScript funcionarem. O que se desenha é o rótulo.
	 */
	.vt-alterna__radio {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.vt-alterna__opcao {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.5rem;
		min-width: 8.5rem;
		padding: var(--vt-space-2) var(--vt-space-5);
		border-radius: var(--vt-radius-full);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-medio);
		white-space: nowrap;
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	/* A opção que NÃO está valendo ainda responde ao ponteiro: é o que diz
	   que ela é clicável antes de o clique acontecer. */
	.vt-alterna__radio:not(:checked) + .vt-alterna__opcao:hover {
		background: var(--vt-realce);
	}

	.vt-alterna__radio:checked + .vt-alterna__opcao {
		background: var(--vt-navy);
		color: var(--vt-white);
	}

	:root[data-vt-tema="escuro"] .vt-alterna__radio:checked + .vt-alterna__opcao {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-alterna__radio:focus-visible + .vt-alterna__opcao {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
	}

	.vt-alterna .vt-campo__selo {
		position: static;
		align-self: center;
		margin-left: 0;
		font-size: var(--vt-fs-xs);
		transform: none;
	}

	/* ── o interruptor ──────────────────────────────────────────────── */

	.vt-chaves {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-4);
	}

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

	.vt-chave .vt-campo__selo {
		position: static;
		font-size: var(--vt-fs-xs);
		transform: none;
	}

	.vt-chave__entrada {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.vt-chave__rotulo {
		display: flex;
		align-items: flex-start;
		gap: var(--vt-space-3);
		cursor: pointer;
	}

	.vt-chave__trilho {
		position: relative;
		flex: none;
		width: 2.75rem;
		height: 1.6rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		transition: background var(--vt-dur-media) var(--vt-ease-transf);
	}

	.vt-chave__bola {
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
		transition: transform var(--vt-dur-media) var(--vt-ease-transf);
	}

	.vt-chave__entrada:checked + .vt-chave__rotulo .vt-chave__trilho {
		background: var(--vt-estado-ok);
	}

	.vt-chave__entrada:checked + .vt-chave__rotulo .vt-chave__bola {
		transform: translateX(1.15rem);
	}

	.vt-chave__entrada:focus-visible + .vt-chave__rotulo .vt-chave__trilho {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
	}

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

	.vt-chave__texto small {
		display: block;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/* ── etiquetas (convênios) ──────────────────────────────────────── */

	.vt-tags {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		padding: var(--vt-space-3);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-0);
	}

	.vt-tags:focus-within {
		border-color: var(--vt-interacao);
	}

	.vt-tags__lista {
		display: contents;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-tags__item {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		padding: 0.2rem 0.3rem 0.2rem var(--vt-space-3);
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
	}

	.vt-tags__tirar {
		display: grid;
		place-items: center;
		width: 1.25rem;
		height: 1.25rem;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: var(--vt-radius-full);
		background: none;
		color: var(--vt-texto-fraco);
		cursor: pointer;
	}

	.vt-tags__tirar:hover,
	.vt-tags__tirar:focus-visible {
		background: var(--vt-realce-forte);
		color: var(--vt-estado-erro);
	}

	.vt-tags__campo {
		flex: 1 1 10rem;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.vt-tags__campo:focus {
		outline: none;
	}

	/*
	 * O campo que trafega. Escondido com JavaScript, visível sem ele — assim a
	 * seção continua funcionando com "um por linha" para quem não tem script.
	 */
	.vt-tags__valor {
		flex-basis: 100%;
		min-height: 5rem;
		border: 0;
		background: none;
		color: var(--vt-texto-medio);
		font: inherit;
		resize: vertical;
	}

	.vt-tags.esta-viva .vt-tags__valor {
		position: absolute;
		width: 1px;
		height: 1px;
		min-height: 0;
		overflow: hidden;
		clip-path: inset(50%);
	}

	/* ── o editor de texto ──────────────────────────────────────────── */

	.vt-texto-rico {
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-0);
		overflow: hidden;
	}

	.vt-texto-rico:focus-within {
		border-color: var(--vt-interacao);
	}

	.vt-texto-rico__barra {
		display: flex;
		align-items: center;
		gap: var(--vt-space-1);
		padding: var(--vt-space-2);
		border-bottom: 1px solid var(--vt-linha);
		background: var(--vt-superficie-2);
	}

	.vt-texto-rico__botao {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-height: 0;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 0;
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-medio);
		font: inherit;
		font-size: var(--vt-fs-xs);
		cursor: pointer;
	}

	.vt-texto-rico__botao:hover,
	.vt-texto-rico__botao:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-texto-rico__botao[aria-pressed="true"] {
		background: var(--vt-navy);
		color: var(--vt-white);
	}

	:root[data-vt-tema="escuro"] .vt-texto-rico__botao[aria-pressed="true"] {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-texto-rico__divisa {
		width: 1px;
		height: 1.25rem;
		margin-inline: var(--vt-space-2);
		background: var(--vt-linha);
	}

	.vt-texto-rico__previa {
		margin-left: auto;
	}

	.vt-texto-rico__campo {
		display: block;
		width: 100%;
		border: 0;
		border-radius: 0;
		background: none;
	}

	/*
	 * **`display` de autor vence `[hidden]` do navegador.** O `display: block`
	 * acima anulava o `hidden` que o script põe ao abrir a prévia, e a área de
	 * texto continuava visível por cima dela. É o mesmo defeito que a etapa 12
	 * catalogou no `<details>` que abria só no celular — e a regra que se tira
	 * dele é esta: todo seletor que declara `display` precisa declarar o
	 * `[hidden]` correspondente.
	 */
	.vt-texto-rico__campo[hidden] {
		display: none;
	}

	.vt-texto-rico__campo:focus {
		outline: none;
	}

	/*
	 * A prévia mostra o que o vTag vai mostrar — não uma aproximação genérica
	 * de markdown. É por isso que ela herda a tipografia da bio pública.
	 */
	.vt-texto-rico__saida {
		padding: var(--vt-space-4);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		line-height: var(--vt-lh-base);
	}

	.vt-texto-rico__saida[hidden] {
		display: none;
	}

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

	.vt-texto-rico__saida ul {
		margin: 0 0 var(--vt-space-3);
		padding-left: var(--vt-space-5);
	}

	.vt-texto-rico__saida :last-child {
		margin-bottom: 0;
	}

	/* ── redes sociais ──────────────────────────────────────────────── */

	.vt-redes {
		display: grid;
		gap: var(--vt-space-3);
	}

	@media (min-width: 900px) {
		.vt-redes {
			grid-template-columns: 1fr 1fr;
		}
	}

	.vt-rede {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		min-width: 0;
		padding: var(--vt-space-3);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	/*
	 * Preenchida ganha a borda na cor da marca; vazia fica recuada. É o que
	 * responde "quais das oito o visitante encontra" sem ler campo por campo.
	 */
	.vt-rede.esta-no-ar {
		border-color: color-mix(in srgb, var(--vt-marca) 45%, transparent);
		background: var(--vt-superficie-1);
	}

	/*
	 * **A rede vazia não fica apagada.** Ela tinha `opacity: .72`, e o efeito
	 * era o oposto do pretendido: esmaecia exatamente os cartões que a pessoa
	 * precisa preencher. Quem já está no ar se distingue pelo selo "no vTag" e
	 * pelo ícone na cor da marca — dois sinais que não custam contraste ao que
	 * falta fazer.
	 */
	.vt-rede:not(.esta-no-ar) .vt-rede__base {
		color: var(--vt-texto-fraco);
	}

	.vt-rede__icone {
		display: grid;
		flex: none;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-fraco);
	}

	.vt-rede.esta-no-ar .vt-rede__icone {
		background: color-mix(in srgb, var(--vt-marca) 12%, transparent);
		color: var(--vt-marca);
	}

	/* No escuro, a cor da marca escurece demais em quatro das oito. */
	:root[data-vt-tema="escuro"] .vt-rede.esta-no-ar .vt-rede__icone {
		color: color-mix(in srgb, var(--vt-marca) 65%, white);
	}

	.vt-rede__corpo {
		flex: 1 1 auto;
		min-width: 0;
	}

	.vt-rede__nome {
		display: block;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-titulo);
	}

	/*
	 * ── onde se digita ──────────────────────────────────────────────
	 *
	 * **O campo tinha deixado de parecer um campo.** Ele vinha sem borda, sem
	 * fundo e sem raio, com uma linha tracejada por baixo — e o resultado, dito
	 * pelo cliente, é que era difícil ACHAR onde digitar: ao lado de
	 * "facebook.com/" o marcador "usuario" lia como continuação do texto, e não
	 * como campo vazio. Oito cartões assim viram um parágrafo.
	 *
	 * Agora ele é o campo da casa — a mesma caixa de todos os outros — e o
	 * prefixo fica FORA dela, que é a gramática já aprovada no `@` da
	 * Identidade: contexto de um lado, dado do outro, e a borda dizendo onde se
	 * escreve.
	 */
	.vt-rede__campo {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-width: 0;
		margin-top: var(--vt-space-1);
	}

	/*
	 * **O prefixo tem largura mínima para as caixas ALINHAREM.**
	 *
	 * Os oito domínios têm larguras diferentes — `x.com/` tem 41 px e
	 * `linkedin.com/in/` tem 96 —, e com a caixa à direita de cada um os campos
	 * começavam em oito lugares distintos. Enquanto o campo era invisível isso
	 * não aparecia; com a borda, virou uma escada.
	 *
	 * A medida é a do maior prefixo. Alinhar oito campos vale o espaço: é o que
	 * faz a lista ser lida como lista, e não como oito linhas soltas.
	 */
	.vt-rede__base {
		flex: none;
		min-width: 6.5rem;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		white-space: nowrap;
	}

	.vt-rede__campo .vt-campo__entrada {
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--vt-fs-sm);
	}

	.vt-rede__lado {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--vt-space-2);
	}

	.vt-rede__selo {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: color-mix(in srgb, var(--vt-estado-ok) 16%, transparent);
		color: var(--vt-estado-ok);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.vt-rede__abrir,
	.vt-item-ed__abrir {
		display: grid;
		place-items: center;
		width: 1.9rem;
		height: 1.9rem;
		border-radius: var(--vt-radius-sm);
		color: var(--vt-texto-fraco);
		text-decoration: none;
	}

	.vt-rede__abrir:hover,
	.vt-rede__abrir:focus-visible,
	.vt-item-ed__abrir:hover,
	.vt-item-ed__abrir:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-rede__selo[hidden],
	.vt-rede__abrir[hidden] {
		display: none;
	}

	.vt-rede .vt-campo__selo {
		position: static;
		transform: none;
	}

	.vt-item-ed__lado {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--vt-space-2);
	}

	@media (max-width: 520px) {
		/*
		 * No estreito o prefixo passa para cima do campo. Lado a lado, sobram
		 * 60 px para o nome de usuário e ele fica ilegível — e o prefixo é
		 * contexto, que pode ceder a linha ao dado.
		 */
		.vt-rede__campo {
			flex-wrap: wrap;
			gap: var(--vt-space-1);
		}

		/* Em linha própria, a largura mínima não tem o que alinhar — e ela
		   reservaria um vão à direita do prefixo. */
		.vt-rede__base {
			flex-basis: 100%;
			min-width: 0;
		}

		/*
		 * **O selo e o botão de abrir descem para baixo do campo.**
		 *
		 * Eles são `flex: none` e ocupavam 115 px fixos da linha; com o campo
		 * agora tendo caixa, sobravam 90 px para digitar num viewport de 388.
		 * O `flex-basis` do corpo é o que empurra o lado para a linha seguinte:
		 * sem ele o navegador espreme os três em vez de quebrar, porque
		 * "espremido" ainda cabe.
		 *
		 * Descem, e não somem: o selo diz que a rede está no ar e o botão é a
		 * razão de alguém voltar a esta tela — conferir se o `@` leva mesmo
		 * aonde deveria.
		 */
		.vt-rede {
			flex-wrap: wrap;
		}

		.vt-rede__corpo {
			flex: 1 1 calc(100% - 3rem);
		}

		.vt-rede__lado {
			margin-inline-start: auto;
		}
	}
}

@layer componente {
	/* ── horários com faixas livres ─────────────────────────────────── */

	.vt-horas__dia {
		display: grid;
		grid-template-columns: 6rem minmax(0, 1fr);
		gap: var(--vt-space-2) var(--vt-space-3);
		align-items: start;
		padding: var(--vt-space-3) 0;
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-horas__rotulo {
		padding-top: 0.55rem;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-horas__faixas {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		min-width: 0;
	}

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

	/*
	 * Os campos de hora ficavam em `fs-base` — a medida dos campos de texto —
	 * enquanto tudo à volta deles nesta seção é `fs-sm`. Sete linhas de
	 * "08:00 — 18:00" naquele corpo pesavam mais que o próprio assunto.
	 */
	.vt-horas__faixa .vt-campo__entrada {
		width: auto;
		min-width: 0;
		flex: 0 1 7rem;
		min-height: 2.4rem;
		padding-block: var(--vt-space-2);
		font-size: var(--vt-fs-sm);
	}

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

	/* O selo da grade acompanha, e fica na coluna dos campos. */
	.vt-horas .vt-campo__selo {
		position: static;
		align-self: flex-end;
		font-size: var(--vt-fs-xs);
		transform: none;
	}

	.vt-horas__tirar {
		display: grid;
		place-items: center;
		width: 1.9rem;
		height: 1.9rem;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-fraco);
		cursor: pointer;
	}

	.vt-horas__tirar:hover,
	.vt-horas__tirar:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-estado-erro);
	}

	.vt-horas__acoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-3);
		grid-column: 2;
	}

	.vt-horas__acao {
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--vt-interacao);
		font: inherit;
		font-size: var(--vt-fs-xs);
		cursor: pointer;
	}

	.vt-horas__acao:hover,
	.vt-horas__acao:focus-visible {
		text-decoration: underline;
	}

	@media (max-width: 700px) {
		.vt-horas__dia {
			grid-template-columns: minmax(0, 1fr);
		}

		.vt-horas__rotulo {
			padding-top: 0;
			font-weight: var(--vt-peso-titulo);
		}

		.vt-horas__acoes {
			grid-column: 1;
		}
	}

	/* ── especialidades ─────────────────────────────────────────────── */

	.vt-esp {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-4);
		margin-bottom: var(--vt-space-5);
	}

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

	/*
	 * A principal tem peso próprio porque ela DECIDE o vTag: dela saem o
	 * título, o coletivo e os campos do formulário. Num selo cinza de oito
	 * pixels, trocar a principal parecia reordenar uma lista qualquer.
	 */
	.vt-esp__cartao.esta-principal {
		border-color: var(--vt-linha-forte);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-esp__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-3);
	}

	.vt-esp__quem {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		min-width: 0;
	}

	.vt-esp__nome {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
	}

	.vt-esp__marca {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: var(--vt-navy);
		color: var(--vt-mint);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	:root[data-vt-tema="escuro"] .vt-esp__marca {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-esp__acoes {
		display: flex;
		gap: var(--vt-space-3);
	}

	.vt-esp__acao {
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--vt-interacao);
		font: inherit;
		font-size: var(--vt-fs-xs);
		cursor: pointer;
	}

	.vt-esp__acao:hover,
	.vt-esp__acao:focus-visible {
		text-decoration: underline;
	}

	.vt-esp__acao--tirar {
		color: var(--vt-estado-erro);
	}

	.vt-esp__efeito {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-5);
		margin: var(--vt-space-4) 0 0;
		padding: var(--vt-space-3) var(--vt-space-4);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-realce);
	}

	.vt-esp__efeito dt {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-esp__efeito dd {
		margin: 0.15rem 0 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * **O `max-width` era do campo e apertava a ajuda junto.**
	 *
	 * O RQE é um número de cinco dígitos e não precisa de campo largo — mas a
	 * regra estava no bloco inteiro, e a explicação de duas linhas descia em
	 * dezesseis rems, virando uma coluna estreita e alta que inchava o cartão.
	 * O limite pertence à caixa do campo; o texto lê na largura da ficha.
	 */
	.vt-esp__rqe {
		margin-top: var(--vt-space-4);
		margin-bottom: 0;
		max-width: none;
	}

	.vt-esp__rqe .vt-campo__caixa {
		display: block;
		max-width: 12rem;
	}

	.vt-esp__buscar {
		padding: var(--vt-space-5);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-lg);
	}

	/* ── registros no conselho ──────────────────────────────────────── */

	.vt-regs {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-4);
	}

	.vt-reg {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--vt-space-3);
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	.vt-reg__campos {
		display: grid;
		flex: 1 1 20rem;
		grid-template-columns: minmax(0, 1fr) 5.5rem minmax(0, 1.4fr);
		gap: var(--vt-space-3);
		min-width: 0;
	}

	.vt-reg__campos .vt-campo {
		margin: 0;
	}

	.vt-reg__tirar {
		display: inline-flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-height: 0;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 0;
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-fraco);
		font: inherit;
		font-size: var(--vt-fs-xs);
		cursor: pointer;
	}

	.vt-reg__tirar:hover,
	.vt-reg__tirar:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-estado-erro);
	}

	@media (max-width: 700px) {
		.vt-reg__campos {
			grid-template-columns: minmax(0, 1fr) 5.5rem;
		}

		.vt-reg__campos .vt-campo:last-child {
			grid-column: 1 / -1;
		}
	}

	.vt-ed__novo-acao,
	.vt-ed__enviar-sempre {
		margin: var(--vt-space-5) 0 0;
	}

	/* O pé do formulário de acrescentar: o que confirma e o que desiste, na
	   mesma linha e com pesos diferentes. */
	.vt-ed__novo-pe {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-4);
	}

	/* ── endereços ──────────────────────────────────────────────────── */

	.vt-ends {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-5);
		margin: 0 0 var(--vt-space-6);
		padding: 0;
		list-style: none;
	}

	.vt-end {
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
		overflow: hidden;
	}

	.vt-end.esta-principal {
		border-color: var(--vt-linha-forte);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-end__form {
		padding: var(--vt-space-5);
	}

	.vt-end__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
		margin-bottom: var(--vt-space-5);
	}

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

	.vt-end__marca {
		padding: 0.1rem var(--vt-space-2);
		border-radius: var(--vt-radius-full);
		background: color-mix(in srgb, var(--vt-estado-ok) 16%, transparent);
		color: var(--vt-estado-ok);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-end__topo .vt-campo__selo {
		position: static;
		margin-left: auto;
		transform: none;
	}

	/*
	 * O mapa fica ao lado do formulário, do lado do que ele confere:
	 * coordenada errada é o defeito que só aparece no mapa, e obrigar a rolar
	 * até o fim para conferir é o mesmo que não mostrar.
	 */
	.vt-end__corpo {
		display: grid;
		gap: var(--vt-space-5);
	}

	@media (min-width: 1100px) {
		.vt-end__corpo {
			grid-template-columns: minmax(0, 1fr) 20rem;
		}
	}

	.vt-end__corpo > * {
		min-width: 0;
	}

	.vt-mapa-ed {
		position: relative;
		min-height: 14rem;
		height: 100%;
		border-radius: var(--vt-radius-md);
		background: var(--vt-realce-forte);
		overflow: hidden;
	}

	.vt-mapa-ed__abrir {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--vt-space-2);
		width: 100%;
		height: 100%;
		min-height: 14rem;
		border: 0;
		background: none;
		color: var(--vt-texto-medio);
		font: inherit;
		font-size: var(--vt-fs-sm);
		cursor: pointer;
	}

	.vt-mapa-ed__abrir:hover,
	.vt-mapa-ed__abrir:focus-visible {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-mapa-ed iframe {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 14rem;
		border: 0;
	}

	.vt-end__sem-mapa {
		display: grid;
		place-items: center;
		min-height: 8rem;
		margin: 0;
		padding: var(--vt-space-4);
		border: 1px dashed var(--vt-linha);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		text-align: center;
	}

	.vt-end__pe {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-4);
		padding: var(--vt-space-3) var(--vt-space-5);
		border-top: 1px solid var(--vt-linha);
		background: var(--vt-superficie-2);
	}

	.vt-campo--curto {
		max-width: 14rem;
	}

	/*
	 * O CEP é curto, o aviso ao lado dele não. Com a linha inteira em 14rem
	 * sobravam quatro para "endereço encontrado", que quebrava em duas linhas
	 * e empurrava o campo. O limite vale para o campo — agora fixo em 9,5rem
	 * —, e a linha ganha o que o recado precisa.
	 */
	.vt-campo--curto:has(.vt-campo__cep) {
		max-width: 26rem;
	}

	/*
	 * **O aviso do CEP encolhia o próprio campo.**
	 *
	 * Os dois eram itens de um mesmo flex, e o campo tinha `width: 100%` com
	 * permissão para encolher: quando "buscando…" aparecia, o campo diminuía
	 * na frente de quem estava digitando, e voltava ao tamanho quando o aviso
	 * sumia. Elemento que muda de tamanho porque outro apareceu ao lado dele
	 * lê como defeito — e era.
	 *
	 * O CEP tem largura conhecida: nove caracteres. Fixá-la resolve pela
	 * causa, e o aviso passa a ocupar o espaço que sobra, que já existia.
	 */
	.vt-campo__cep {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		min-height: var(--vt-alvo-toque);
	}

	.vt-campo__cep .vt-campo__entrada {
		flex: 0 0 9.5rem;
		width: 9.5rem;
	}

	.vt-campo__cep-estado {
		flex: 1 1 auto;
		min-width: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-campo__cep-estado[data-vt-estado="erro"] {
		color: var(--vt-estado-erro);
	}

	.vt-campo__cep-estado[data-vt-estado="ok"] {
		color: var(--vt-estado-ok);
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-chave__trilho,
		.vt-chave__bola,
		.vt-alterna__opcao,
		.vt-rede {
			transition: none;
		}
	}
}

@layer componente {
	/*
	 * ══ `[hidden]` contra `display` ═════════════════════════════════════
	 *
	 * **`display` de autor vence o `[hidden]` da folha do navegador.** Todo
	 * seletor desta folha que declara `display` e que o script esconde por
	 * `hidden` precisa da regra correspondente — sem ela, o elemento continua
	 * na tela depois de "escondido".
	 *
	 * Já mordeu duas vezes neste projeto: o `<details>` que abria só no
	 * celular, na etapa 12, e a prévia da apresentação, aqui. Em vez de caçar
	 * caso a caso, esta lista declara de uma vez os que o `conta.js` alcança —
	 * e a regra para quem acrescentar o próximo é entrar nela.
	 */
	.vt-corpo-conta [hidden],
	.vt-app__menu[hidden],
	.vt-editor__foto-caixa[hidden],
	.vt-editor__barra[hidden],
	.vt-ed__enviar[hidden],
	.vt-esp__efeito[hidden],
	.vt-rede__selo[hidden],
	.vt-rede__abrir[hidden],
	.vt-senha__olho[hidden],
	.vt-divulgar__copiar[hidden],
	.vt-convite-link__copiar[hidden],
	.vt-buscar-prof[hidden],
	.vt-buscar-prof__recado[hidden],
	.vt-buscar-prof__retrato img[hidden],
	.vt-buscar-cli__alvo[hidden],
	.vt-buscar-cli__busca[hidden],
	.vt-buscar-cli__recado[hidden],
	.vt-buscar-cli__retrato img[hidden],
	.vt-forca[hidden] {
		display: none;
	}
}

@layer componente {
	/* ── avisos de canto ────────────────────────────────────────────── */

	.vt-avisos {
		position: fixed;
		right: var(--vt-space-5);
		bottom: var(--vt-space-5);
		z-index: 40;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--vt-space-2);
		pointer-events: none;
	}

	@media (max-width: 899px) {
		/*
		 * Acima da barra de abas, e com respiro. A conta era um palpite —
		 * quatro rems de altura mais meio de folga —, e a barra mede mais que
		 * isso: tem recheio, tem a área segura do aparelho e cresce com a
		 * fonte do sistema. O resultado era o aviso encostado nas abas. Agora
		 * `--vt-rodape` é medido no `conta.js`, e o que se soma aqui é só a
		 * folga.
		 */
		.vt-avisos {
			right: var(--vt-space-4);
			bottom: calc(var(--vt-rodape, 4rem) + var(--vt-space-4));
			left: var(--vt-space-4);
		}
	}

	/*
	 * **O aviso é escuro nos dois temas, e é isso que o tira do caminho.**
	 *
	 * Ele era uma pastilha branca de cantos totalmente redondos, com borda
	 * clara e sombra grande: no tema claro virava um balão do mesmo material
	 * dos cartões, disputando a leitura com eles, e no celular — onde ele
	 * ocupava a largura inteira — virava uma faixa. O cliente chamou de bolão,
	 * e a palavra é justa.
	 *
	 * Aqui ele é `--vt-superficie-3`, que é navy no claro e quase preto no
	 * escuro. Uma superfície que a tela não usa em mais nada não precisa gritar
	 * para ser vista: ela é reconhecida pelo contraste de material, e some sem
	 * deixar buraco. É o mesmo raciocínio do topo fixo e do botão primário.
	 *
	 * O raio volta ao dos cartões, a largura é limitada e ele se alinha à
	 * direita: aviso de sistema é uma etiqueta, não um painel.
	 */
	.vt-aviso {
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		max-width: min(26rem, 100%);
		margin: 0;
		padding: var(--vt-space-3) var(--vt-space-4);
		border: 0;
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-3);
		box-shadow: var(--vt-sombra-lg);
		color: var(--vt-texto-sobre-3);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
		animation: vt-aviso-entra var(--vt-dur-media) var(--vt-ease-transf) both;
	}

	/*
	 * A insígnia, no lugar do "✓" solto que era só um caractere colado no
	 * texto. Ela é o que se lê primeiro e de longe — a diferença entre "deu
	 * certo" e "não deu" não deveria depender de ler a frase.
	 */
	.vt-aviso::before {
		content: "";
		display: grid;
		flex: none;
		place-items: center;
		width: 1.4rem;
		height: 1.4rem;
		border-radius: var(--vt-radius-full);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		line-height: 1;
	}

	/*
	 * **As cores de estado aqui são as do tema ESCURO, nos dois temas.** A
	 * superfície é escura sempre, e `--vt-estado-ok`/`--vt-estado-erro` no
	 * claro são as versões fechadas, feitas para fundo branco: sobre o navy
	 * elas somem. Vale a mesma regra que já mordeu esta folha antes — quem
	 * está sobre `--vt-superficie-3` acompanha o companheiro dela, não o tema
	 * da página.
	 */
	.vt-aviso[data-vt-tipo="ok"]::before {
		content: "✓";
		background: color-mix(in srgb, var(--vt-ok-e) 20%, transparent);
		color: var(--vt-ok-e);
	}

	.vt-aviso[data-vt-tipo="erro"]::before {
		content: "!";
		background: color-mix(in srgb, var(--vt-erro-e) 22%, transparent);
		color: var(--vt-erro-e);
	}

	.vt-aviso.esta-saindo {
		opacity: 0;
		transform: translateY(0.25rem);
		transition: opacity var(--vt-dur-rapida) var(--vt-ease-entrada),
			transform var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	@keyframes vt-aviso-entra {
		from {
			opacity: 0;
			transform: translateY(0.75rem) scale(0.97);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-aviso {
			animation: none;
		}

		.vt-aviso.esta-saindo {
			transform: none;
		}
	}

	/* ── a marca que desliza ────────────────────────────────────────── */

	/*
	 * Menor e mais discreto que a primeira versão: o controle é um campo entre
	 * dez, não o assunto da tela. E a legenda ganha o mesmo vão dos outros
	 * rótulos — ela estava colada na barra porque `<legend>` não herda a
	 * margem que `.vt-campo__rotulo` tem.
	 */
	.vt-alterna__caixa {
		padding: 0.15rem;
		font-size: var(--vt-fs-sm);
	}

	.vt-alterna > .vt-campo__rotulo {
		display: block;
		margin-bottom: var(--vt-space-2);
		padding: 0;
	}

	.vt-alterna__opcao {
		position: relative;
		z-index: 1;
		padding: var(--vt-space-2) var(--vt-space-4);
		font-size: var(--vt-fs-xs);
		transition: color var(--vt-dur-media) var(--vt-ease-entrada);
	}

	/*
	 * A marca ANDA até a opção escolhida — pintar o fundo do botão ativo diria
	 * a mesma coisa sem mostrar a troca, e é a troca que confirma que o clique
	 * pegou na opção certa. Ela só existe com JavaScript: sem ele, o fundo
	 * pintado abaixo continua respondendo.
	 */
	/*
	 * **A marca é o navy, e não uma pastilha quase branca.**
	 *
	 * Ela era `--vt-superficie-0` com uma sombra pequena, sobre o trilho
	 * `--vt-superficie-2`: dois brancos separados por um fio, e a diferença
	 * entre escolhido e não escolhido virava uma nuance. Pior, ela é
	 * posicionada e o rótulo não era — então ela pintava POR CIMA do texto e
	 * ainda o lavava. O cliente disse o que se via: era difícil enxergar qual
	 * das duas estava selecionada.
	 *
	 * Agora ela é o mesmo bloco cheio do segmentado do admin — navy no claro,
	 * mint no escuro —, e o rótulo escolhido inverte para a cor de cima. Uma
	 * das duas opções é um bloco de cor sólida: não há como ler isso como
	 * descrição.
	 *
	 * O `z-index` não é enfeite: sem ele o texto do rótulo escolhido fica
	 * DEBAIXO da marca, que foi metade do defeito original.
	 */
	.vt-alterna__marca {
		position: absolute;
		z-index: 0;
		top: 0.25rem;
		bottom: 0.25rem;
		left: 0.25rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-navy);
		box-shadow: var(--vt-sombra-sm);
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
			width 320ms cubic-bezier(0.22, 1, 0.36, 1);
		pointer-events: none;
	}

	:root[data-vt-tema="escuro"] .vt-alterna__marca {
		background: var(--vt-mint);
	}

	.vt-alterna__opcao {
		position: relative;
		z-index: 1;
	}

	.vt-alterna__caixa:not(.esta-viva) .vt-alterna__marca {
		display: none;
	}

	.vt-alterna__caixa.esta-viva .vt-alterna__radio:checked + .vt-alterna__opcao {
		background: none;
		color: var(--vt-white);
		font-weight: var(--vt-peso-titulo);
	}

	:root[data-vt-tema="escuro"] .vt-alterna__caixa.esta-viva .vt-alterna__radio:checked + .vt-alterna__opcao {
		background: none;
		color: var(--vt-navy);
	}

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

	/* ── o editor em tempo real ─────────────────────────────────────── */

	.vt-rico {
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-0);
		overflow: hidden;
	}

	.vt-rico:focus-within {
		border-color: var(--vt-interacao);
	}

	.vt-rico__barra {
		display: flex;
		align-items: center;
		gap: var(--vt-space-1);
		padding: var(--vt-space-2);
		border-bottom: 1px solid var(--vt-linha);
		background: var(--vt-superficie-2);
	}

	.vt-rico__barra[hidden] {
		display: none;
	}

	.vt-rico__botao {
		display: inline-flex;
		align-items: center;
		min-height: 0;
		padding: var(--vt-space-2);
		border: 0;
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-medio);
		cursor: pointer;
		transition: background var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-rico__botao:hover {
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
	}

	.vt-rico__botao[aria-pressed="true"] {
		background: var(--vt-navy);
		color: var(--vt-white);
	}

	:root[data-vt-tema="escuro"] .vt-rico__botao[aria-pressed="true"] {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	/*
	 * A área editável tem a tipografia da bio pública: o que se vê aqui é o que
	 * o vTag mostra, e um tamanho diferente faria a pessoa julgar o texto pela
	 * medida errada.
	 */
	.vt-rico__area {
		min-height: 11rem;
		padding: var(--vt-space-4);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		line-height: var(--vt-lh-base);
	}

	.vt-rico__area[hidden] {
		display: none;
	}

	.vt-rico__area:focus {
		outline: none;
	}

	/*
	 * **O vão do editor é o vão do vTag** — `space-4`, que é o do `p` do
	 * `base.css`. Ele era `space-3`, e a diferença de 4 px não é o problema: o
	 * problema é a régua ser outra. *"Vamos padronizar"* — cliente, 05/09/2026.
	 *
	 * O que se vê aqui tem de ser o que vai para o ar; um editor que desenha o
	 * próprio espaçamento é um editor que mente sobre o resultado, e a pessoa
	 * só descobre depois de publicar.
	 */
	.vt-rico__area p {
		margin: 0 0 var(--vt-space-4);
	}

	.vt-rico__area ul {
		margin: 0 0 var(--vt-space-4);
		padding-left: var(--vt-space-5);
	}

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

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

	.vt-rico__area:empty::before {
		content: attr(data-vazio);
		color: var(--vt-texto-fraco);
	}

	.vt-rico__cru {
		display: block;
		width: 100%;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.vt-rico__cru[hidden] {
		display: none;
	}
}

@layer componente {
	/* ── combobox de sugestões (especialidades) ─────────────────────── */

	/*
	 * A lista da mesma largura do campo, como no admin. O `datalist` nativo
	 * desenhava do tamanho que o navegador quisesse, com a tipografia dele —
	 * e o que devia ser uma escolha parecia um autocompletar de barra de
	 * endereço. Ver o comentário em `templates/conta/vtag/especialidades.php`.
	 */
	.vt-ac {
		position: relative;
	}

	.vt-ac__lista {
		position: absolute;
		z-index: 20;
		top: calc(100% + 4px);
		right: 0;
		left: 0;
		max-height: 17rem;
		margin: 0;
		padding: var(--vt-space-2);
		overflow-y: auto;
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-md);
		list-style: none;
	}

	.vt-ac__item {
		padding: var(--vt-space-2) var(--vt-space-3);
		border-radius: var(--vt-radius-sm);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		cursor: pointer;
	}

	.vt-ac__item.esta-ativa {
		background: var(--vt-navy);
		color: var(--vt-white);
	}

	:root[data-vt-tema="escuro"] .vt-ac__item.esta-ativa {
		background: var(--vt-mint);
		color: var(--vt-navy);
	}

	.vt-ac__vazio {
		padding: var(--vt-space-3);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/* ── medidor de caracteres ──────────────────────────────────────── */

	/*
	 * Ele divide a linha com a ajuda: a régua e a medida têm de ser lidas
	 * juntas, senão o número vira enfeite. Alinhado à direita e na base, ele
	 * cai no canto da área de texto, que é para onde o olho já vai.
	 */
	.vt-campo__ajuda--medida {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--vt-space-3);
	}

	.vt-campo__ajuda--medida > span {
		flex: 1 1 18rem;
	}

	.vt-medidor {
		flex: none;
		font-size: var(--vt-fs-xs);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.vt-medidor[data-vt-estado="falta"] { color: var(--vt-texto-fraco); }
	.vt-medidor[data-vt-estado="ok"]    { color: var(--vt-estado-ok); }
}

@layer componente {
	/*
	 * ── a troca de seção sem recarregar ─────────────────────────────
	 *
	 * O único sinal de que há um pedido no ar. Discreto de propósito: a troca
	 * de seção leva o tempo de uma requisição local, e uma tela que pisca em
	 * cinza a cada clique cansa mais do que informa. O `pointer-events` existe
	 * para o segundo clique impaciente não empilhar pedidos.
	 */
	.vt-ed[data-vt-carregando] {
		cursor: progress;
	}

	.vt-ed[data-vt-carregando] .vt-ed__conteudo {
		opacity: 0.55;
		pointer-events: none;
		transition: opacity var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	/* O título recebe foco na troca de seção; ele não é um controle, e o anel
	   ali seria ruído para quem usa o mouse. O teclado continua vendo o foco
	   nos itens do trilho, que são os controles de verdade. */
	.vt-ed__titulo:focus {
		outline: none;
	}
}

@layer componente {
	/*
	 * O destaque que o recado promete. "Confira os campos destacados" só faz
	 * sentido se algum campo estiver destacado — ver `marcarErros()` no
	 * `conta.js`, que aplica isto a partir do mapa de erros do servidor.
	 */
	.vt-campo__entrada[data-vt-erro] {
		border-color: var(--vt-estado-erro);
		box-shadow: 0 0 0 1px var(--vt-estado-erro);
	}
}

@layer componente {
	/*
	 * O botão que resolve o aviso de "não foi salvo". O aviso de canto some em
	 * segundos, e quem voltou os olhos para a tela depois disso precisa achar
	 * sozinho o que fazer.
	 *
	 * **Um halo que se abre, e não um contorno que pisca.** O contorno vermelho
	 * intermitente da primeira versão dizia "erro" — e não há erro nenhum aqui,
	 * há trabalho por enviar. O anel sai do próprio botão, cresce uma vez e se
	 * dissolve: chama o olho sem acusar ninguém, e não deixa nada piscando na
	 * tela enquanto a pessoa decide.
	 */
	.vt-acao[data-vt-pendente] {
		position: relative;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-interacao) 22%, transparent);
	}

	/*
	 * O halo pulsa duas vezes e se dissolve; o anel fino FICA. A pulsação
	 * chama quem está olhando agora, e o anel responde a quem voltou depois —
	 * sem nada se mexendo na tela enquanto a pessoa decide.
	 */
	.vt-acao[data-vt-pendente]::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--vt-interacao) 55%, transparent);
		animation: vt-halo 1400ms var(--vt-ease-entrada) 2;
	}

	@keyframes vt-halo {
		from {
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--vt-interacao) 55%, transparent);
		}

		to {
			box-shadow: 0 0 0 0.65rem color-mix(in srgb, var(--vt-interacao) 0%, transparent);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-acao[data-vt-pendente] {
			animation: none;
		}
	}
}

@layer componente {
	@media (max-width: 999px) {
		/*
		 * **O endereço é o campo, e o campo é a linha inteira.**
		 *
		 * A ficha do Linktree é uma fileira: número, os dois campos, o botão de
		 * abrir. No estreito isso deixava a URL — que é sempre a coisa mais
		 * comprida da tela — com uns quatro centímetros. O número e o abrir
		 * sobem para uma linha de cabeçalho, e os campos ficam com a largura
		 * do cartão.
		 *
		 * **Estas regras moram no fim da folha por necessidade, não por
		 * desleixo.** `.vt-item-ed__form` é declarado depois do bloco estreito
		 * lá em cima, e entre seletores de mesma força quem vem depois vence —
		 * consulta de mídia não acrescenta peso nenhum. Escritas lá, elas não
		 * valiam nada, e a tela continuava igual.
		 */
		.vt-item-ed__form {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			gap: var(--vt-space-3);
		}

		.vt-item-ed__ordem {
			grid-area: 1 / 1;
		}

		.vt-item-ed__lado {
			grid-area: 1 / 2;
			justify-self: end;
		}

		.vt-item-ed__campos {
			grid-area: 2 / 1 / 3 / -1;
		}
	}
}

@layer componente {
	/* ── os passos do pé da seção ───────────────────────────────────── */

	/*
	 * **Só na tela estreita.** No largo o trilho está sempre à vista, e um
	 * segundo caminho para o mesmo lugar é ruído: quem vê a lista inteira não
	 * precisa que a tela lhe diga qual é a próxima linha dela.
	 */
	.vt-ed__passos {
		display: none;
	}

	@media (max-width: 999px) {
		.vt-ed__passos {
			display: flex;
			gap: var(--vt-space-3);
			margin: var(--vt-space-6) calc(var(--vt-space-6) * -1)
				calc(var(--vt-space-6) * -1);
			padding: var(--vt-space-4) var(--vt-space-6);
			border-top: 1px solid var(--vt-linha);
		}

		/*
		 * O primeiro fica à esquerda e o último à direita, mesmo quando só um
		 * existe: na primeira seção não há anterior, e um "próxima" encostado
		 * na margem esquerda contradiria a seta que ele carrega.
		 */
		.vt-ed__passo--depois {
			margin-left: auto;
		}

		.vt-ed__passo {
			display: flex;
			align-items: center;
			gap: var(--vt-space-2);
			min-width: 0;
			padding: var(--vt-space-2) var(--vt-space-3);
			border-radius: var(--vt-radius-md);
			color: var(--vt-texto-forte);
			font-size: var(--vt-fs-sm);
			font-weight: var(--vt-peso-medio);
			text-decoration: none;
			transition: background var(--vt-dur-rapida) var(--vt-ease-entrada);
		}

		.vt-ed__passo:hover,
		.vt-ed__passo:focus-visible {
			background: var(--vt-realce);
		}

		.vt-ed__passo svg {
			flex: none;
			color: var(--vt-texto-fraco);
		}

		.vt-ed__passo span {
			display: grid;
			min-width: 0;
		}

		.vt-ed__passo--depois span {
			text-align: right;
		}

		/* O rótulo diz o SENTIDO; o nome diz o destino. Sem ele, "Endereços"
		   com uma seta ao lado poderia ser tanto o que vem quanto o que passou. */
		.vt-ed__passo small {
			color: var(--vt-texto-fraco);
			font-size: var(--vt-fs-micro);
			font-weight: var(--vt-peso-corpo);
			letter-spacing: var(--vt-track-micro);
			text-transform: uppercase;
		}
	}

	/*
	 * ── as clínicas da conta ────────────────────────────────────────
	 *
	 * A lista era um `<ul>` de nomes sublinhados com uma palavra de estado ao
	 * lado, e o formulário de cadastrar logo abaixo, na mesma tela e com o
	 * mesmo peso. Duas naturezas diferentes lidas como uma coisa só.
	 *
	 * Aqui cada clínica é uma FICHA — a gramática da etapa 11, a mesma do card
	 * do catálogo e dos contadores: identidade em cima, régua fina, e embaixo o
	 * que se mede, com rótulo pequeno e valor com peso. É o que permite
	 * comparar duas clínicas correndo o olho por uma coluna só.
	 *
	 * O cadastro saiu do rodapé e virou sala com endereço próprio (`?nova=1`),
	 * pelo mesmo motivo do `?s=` do editor: recarregar, voltar e mandar o link
	 * por suporte passam a funcionar sem nada de novo.
	 */

	.vt-clis__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--vt-space-4);
		margin-bottom: var(--vt-space-6);
	}

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

	.vt-clis__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-1) 0 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

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

	/*
	 * A ficha sobe do chão por elevação, como as outras desta casa. `relative`
	 * não é detalhe de posicionamento: é o que ancora o link esticado abaixo.
	 */
	.vt-cli {
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-media) var(--vt-ease-entrada);
		position: relative;
		display: flex;
		gap: var(--vt-space-4);
		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-1);
		box-shadow: var(--vt-sombra-sm);
	}

	/*
	 * `:focus-within` junto do `:hover` porque quem chega pelo teclado precisa
	 * ver a mesma coisa que quem chega pelo mouse — e o foco aqui pousa no link
	 * do nome, que está DENTRO da ficha.
	 */
	.vt-cli:hover,
	.vt-cli:focus-within {
		border-color: var(--vt-texto-fraco);
		box-shadow: var(--vt-sombra-md);
	}

	.vt-cli__marca {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		overflow: hidden;
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

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

	.vt-cli__monograma {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
	}

	/* Item de flex nasce com `min-width: auto`, e o nome longo empurraria a
	   ficha para fora da caixa em vez de quebrar. Quarta vez no projeto. */
	.vt-cli__corpo {
		min-width: 0;
		flex: 1 1 auto;
	}

	.vt-cli__cabeca {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vt-space-2) var(--vt-space-4);
	}

	.vt-cli__nome {
		margin: 0;
		min-width: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		letter-spacing: var(--vt-track-sub);
	}

	.vt-cli__link {
		color: inherit;
		text-decoration: none;
	}

	/*
	 * **O cartão inteiro clica, mas o link continua sendo um.** A camada
	 * esticada cobre a ficha e pertence ao link do nome — é o que dá a área de
	 * clique grande sem envolver tudo num `<a>`, o que obrigaria a tirar o link
	 * do `@` e faria o leitor de tela anunciar o cartão como um rótulo só.
	 */
	.vt-cli__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--vt-radius-lg);
	}

	.vt-cli__link:hover,
	.vt-cli__link:focus-visible {
		text-decoration: underline;
	}

	.vt-cli__estado {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: var(--vt-space-2);
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-cli__ponto {
		flex: none;
		width: 0.45rem;
		height: 0.45rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-texto-fraco);
	}

	.vt-cli__estado--ativo .vt-cli__ponto {
		background: var(--vt-estado-ok);
	}

	.vt-cli__estado--aguardando_aprovacao .vt-cli__ponto,
	.vt-cli__estado--aguardando_email .vt-cli__ponto {
		background: var(--vt-estado-alerta);
	}

	.vt-cli__estado--suspenso .vt-cli__ponto {
		background: var(--vt-estado-erro);
	}

	.vt-cli__arroba {
		margin: var(--vt-space-1) 0 0;
		overflow-wrap: anywhere;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O link do `@` fica ACIMA da camada esticada. Sem isto ele existe no HTML
	 * e não recebe clique nenhum — a ficha inteira o cobre.
	 */
	.vt-cli__arroba a {
		position: relative;
		color: var(--vt-texto-medio);
	}

	/*
	 * A régua fina: ela separa o que IDENTIFICA a clínica do que se MEDE nela.
	 * É a mesma linha do card do catálogo, e faz o trabalho que um segundo
	 * cartão aninhado faria — sem o segundo cartão.
	 */
	/*
	 * **Grade de trilhos fixos, e não flex.**
	 *
	 * Com `flex`, cada ficha ocupa a largura do próprio conteúdo: "Ribeirão
	 * Preto/SP" numa clínica e "—" na outra empurravam "Para publicar" para
	 * lugares diferentes, e as duas clínicas deixavam de ser comparáveis
	 * correndo o olho por uma coluna. Comparar é justamente o que uma lista de
	 * fichas existe para permitir — trilhos iguais em todos os cartões são o
	 * que entrega isso.
	 */
	.vt-cli__fichas {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 11rem));
		gap: var(--vt-space-3) var(--vt-space-5);
		margin: var(--vt-space-4) 0 0;
		padding-top: var(--vt-space-4);
		border-top: 1px solid var(--vt-linha);
	}

	/* `1fr` é `minmax(auto, 1fr)`, e o `auto` é o min-content do item: sem isto
	   um valor longo estica o trilho e desalinha o cartão vizinho. */
	.vt-cli__ficha {
		min-width: 0;
	}

	.vt-cli__ficha dt {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-cli__ficha dd {
		margin: var(--vt-space-1) 0 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
	}

	/* Dois números empilhados em larguras diferentes leem como dois números de
	   coisas diferentes. A régua da ficha vale aqui como vale no cartão. */
	.vt-cli__num {
		font-variant-numeric: tabular-nums;
	}

	@media (max-width: 40rem) {
		.vt-cli {
			padding: var(--vt-space-4);
		}

		.vt-cli__marca {
			width: 2.75rem;
			height: 2.75rem;
		}

		/*
		 * No estreito o estado desce para debaixo do nome em vez de disputar a
		 * mesma linha: "Na fila de aprovação" ao lado de um nome de clínica
		 * deixava as duas coisas com duas palavras por linha.
		 */
		.vt-cli__cabeca {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--vt-space-1);
		}

		/*
		 * No estreito três trilhos de 11rem não cabem. Dois, sim — e a terceira
		 * ficha desce inteira, em vez de as três encolherem até o rótulo
		 * quebrar em duas linhas.
		 */
		.vt-cli__fichas {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--vt-space-3) var(--vt-space-4);
		}
	}

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

	/*
	 * **A miniatura manda no item.** Uma galeria se julga pelas imagens, e uma
	 * lista de linhas com o nome do arquivo seria a mesma tela de sempre com
	 * outro rótulo. A grade acompanha a largura: quantas couberem, com o item
	 * nunca menor que a miniatura.
	 */
	.vt-galeria-ed {
		display: grid;
		gap: var(--vt-space-4);
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
		margin: 0 0 var(--vt-space-6);
		padding: 0;
		list-style: none;
	}

	.vt-galeria-ed__conta {
		margin: 0 0 var(--vt-space-3);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		font-variant-numeric: tabular-nums;
	}

	.vt-foto-ed {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		min-width: 0;
		padding: var(--vt-space-3);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
	}

	/*
	 * A foto fora da página fica esmaecida — e o rótulo do interruptor continua
	 * legível, porque a opacidade cai só na MOLDURA. Esmaecer o item inteiro
	 * apagaria justamente o controle que a traz de volta.
	 *
	 * **O estado vem do interruptor, não de uma classe do servidor.** Com a
	 * classe, desligar a foto mudava o interruptor e deixava a miniatura
	 * acesa até a próxima recarga — a tela dizia duas coisas ao mesmo tempo.
	 * `:has()` lê o próprio controle, então vale antes e depois de gravar.
	 */
	.vt-foto-ed:has(input[type="checkbox"]:not(:checked)) .vt-foto-ed__ver {
		opacity: 0.45;
	}

	/*
	 * `aspect-ratio` e não altura fixa: a proporção é a mesma em todas as
	 * miniaturas, e é a proporção que faz a grade parecer uma grade. `object-fit`
	 * recorta o que sobra em vez de espremer a foto.
	 */
	.vt-foto-ed__ver {
		position: relative;
		display: block;
		overflow: hidden;
		aspect-ratio: 4 / 3;
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-3);
	}

	.vt-foto-ed__ver img {
		transition: transform var(--vt-dur-media) var(--vt-ease-entrada);
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vt-foto-ed__ver:hover img,
	.vt-foto-ed__ver:focus-visible img {
		transform: scale(1.03);
	}

	.vt-foto-ed__form {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	/*
	 * O número é a posição na página pública, e responde "esta é a primeira?"
	 * sem que se precise abrir o vTag. Fica SOBRE a foto, e não ao lado do
	 * campo: é atributo da imagem, e ao lado do campo ele competia com a
	 * legenda pela mesma linha.
	 */
	.vt-foto-ed__ordem {
		position: absolute;
		top: var(--vt-space-2);
		inset-inline-start: var(--vt-space-2);
		min-width: 1.35rem;
		padding: 0.1rem 0.35rem;
		/*
		 * **Opaco, e com um anel claro.** Com fundo semitransparente o número
		 * sumia sobre foto escura — e foto de recepção com pouca luz é o caso
		 * comum, não a exceção. O anel garante a separação sobre qualquer
		 * imagem, clara ou escura, sem depender da foto.
		 */
		border: 1px solid rgb(255 255 255 / 55%);
		border-radius: var(--vt-radius-sm);
		background: var(--vt-navy);
		color: var(--vt-white);
		font-size: var(--vt-fs-xs);
		font-variant-numeric: tabular-nums;
		text-align: center;
	}

	.vt-foto-ed__form {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	.vt-foto-ed__pe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-2);
		margin-top: auto;
	}

	.vt-foto-ed__mover {
		display: flex;
		gap: var(--vt-space-1);
	}

	.vt-foto-ed__seta {
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			color var(--vt-dur-rapida) var(--vt-ease-entrada);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.9rem;
		height: 1.9rem;
		padding: 0;
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-sm);
		background: none;
		color: var(--vt-texto-medio);
		cursor: pointer;
	}

	.vt-foto-ed__seta:hover:not(:disabled),
	.vt-foto-ed__seta:focus-visible {
		border-color: var(--vt-texto-fraco);
		color: var(--vt-texto-forte);
	}

	/*
	 * A seta do extremo fica DESABILITADA e à vista, em vez de sumir: some, e
	 * os botões dançam de lugar a cada movimento — o alvo do próximo clique
	 * deixa de estar onde o dedo já estava.
	 */
	.vt-foto-ed__seta:disabled {
		opacity: 0.35;
		cursor: default;
	}

	/* ── a área de envio ────────────────────────────────────────────── */

	/*
	 * Arrastar-e-soltar é o que o admin faz, e é o que separa "enviar fotos" de
	 * "preencher um campo de arquivo". O contorno tracejado é o convite; sem
	 * ele a área seria só um retângulo com um botão dentro.
	 */
	.vt-envio {
		margin-bottom: var(--vt-space-6);
	}

	.vt-envio__area {
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			background var(--vt-dur-rapida) var(--vt-ease-entrada);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--vt-space-2);
		padding: var(--vt-space-6) var(--vt-space-5);
		border: 1px dashed var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-fraco);
		text-align: center;
	}

	.vt-envio__area.esta-sobre {
		border-color: var(--vt-interacao);
		background: color-mix(in srgb, var(--vt-interacao) 8%, var(--vt-superficie-1));
	}

	.vt-envio__area.esta-cheia {
		opacity: 0.6;
	}

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

	.vt-envio__ajuda {
		max-width: var(--vt-medida);
		margin: 0;
		font-size: var(--vt-fs-sm);
	}

	/* O `<label>` é o botão: precisa do cursor, que label não tem por padrão. */
	.vt-envio__botao {
		margin-top: var(--vt-space-2);
		cursor: pointer;
	}

	.vt-envio__area:has(input:focus-visible) .vt-envio__botao {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
	}

	/* Item de flex nasce com `min-width: auto`: sem isto a caixa do campo se
	   recusa a encolher e a legenda estoura a miniatura. */
	.vt-foto-ed__campo {
		min-width: 0;
		flex: 1 1 auto;
	}

	.vt-foto-ed__remover {
		margin-top: auto;
		text-align: right;
	}

	/* ── o campo de arquivo ─────────────────────────────────────────── */

	/*
	 * O `<input type="file">` cru desenha um botão cinza de sistema e a frase
	 * "Nenhum arquivo escolhido" — texto do navegador, que muda de idioma com
	 * ele e não aceita estilo. Numa área que precisa mostrar autoridade, é o
	 * controle de fábrica que denuncia a falta de cuidado.
	 *
	 * O input continua existindo e continua sendo o que trafega; ele só sai de
	 * vista, e quem o aciona é o `<label>` — comportamento nativo do HTML, sem
	 * script nenhum. Ver `campo_de_arquivo()`.
	 */
	.vt-arquivo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-3);
	}

	/*
	 * O `<label>` é o botão, então precisa parecer um: `.vt-acao` já o desenha,
	 * e o que falta é o cursor — label não tem `cursor: pointer` por padrão, e
	 * um botão que não muda o cursor é um botão em que ninguém acredita.
	 */
	.vt-arquivo__botao {
		cursor: pointer;
	}

	/*
	 * **O foco do input escondido tem de aparecer no botão.** O input é
	 * `.vt-visualmente-oculto`, então o anel do navegador cai num retângulo de
	 * 1px que ninguém vê: quem chega pelo teclado não saberia onde está.
	 * `:has()` traz o estado do input para o irmão que está à vista.
	 */
	.vt-arquivo:has(input:focus-visible) .vt-arquivo__botao {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
	}

	.vt-arquivo__nome {
		min-width: 0;
		overflow-wrap: anywhere;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/* ── a imagem da clínica, no editor ─────────────────────────────── */

	.vt-capa-ed {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--vt-space-4);
	}

	.vt-capa-ed__ver,
	.vt-capa-ed__vazia {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 15rem;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-2);
		color: var(--vt-texto-fraco);
	}

	/*
	 * O quadro vazio tem contorno tracejado e o preenchido não: tracejado diz
	 * "aqui cabe alguma coisa", e mantê-lo depois de a imagem entrar
	 * desenharia uma moldura em volta da foto.
	 */
	.vt-capa-ed__vazia {
		border: 1px dashed var(--vt-linha);
	}

	.vt-capa-ed__ver img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Item de flex nasce com `min-width: auto`: sem isto o campo de arquivo
	   não encolhe e a fileira estoura no estreito. */
	.vt-capa-ed__lado {
		display: flex;
		flex: 1 1 16rem;
		flex-direction: column;
		gap: var(--vt-space-3);
		min-width: 0;
	}

	/* ── procurar profissional para convidar ────────────────────────── */

	/*
	 * O campo nasce escondido e o script o revela: sem JavaScript ele não
	 * funcionaria — depende de digitar e receber —, e mostrar um campo de busca
	 * que não busca nada seria pior do que não mostrar. O convite por e-mail é
	 * `<form>` de verdade e continua ali para esse caso.
	 */
	.vt-buscar-prof {
		margin-bottom: var(--vt-space-5);
		padding-bottom: var(--vt-space-5);
		border-bottom: 1px solid var(--vt-linha);
	}

	.vt-buscar-prof__lista {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin: var(--vt-space-3) 0 0;
		padding: 0;
		list-style: none;
	}

	.vt-buscar-prof__lista:empty {
		display: none;
	}

	/*
	 * O resultado inteiro é o botão, e não um nome com um "convidar" ao lado:
	 * a fileira toda é a área de clique, e o rótulo à direita diz o que o
	 * clique faz. Clicar num nome aqui ENVIA um convite — é escrita, e por
	 * isso o botão vive dentro de um `<form>` com CSRF.
	 */
	.vt-buscar-prof__botao {
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			background var(--vt-dur-rapida) var(--vt-ease-entrada);
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		width: 100%;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.vt-buscar-prof__botao:hover,
	.vt-buscar-prof__botao:focus-visible {
		border-color: var(--vt-texto-fraco);
		background: var(--vt-superficie-2);
	}

	.vt-buscar-prof__retrato {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		overflow: hidden;
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-2);
	}

	.vt-buscar-prof__retrato img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Quem não tem foto ganha as iniciais, como em toda parte do catálogo —
	   um retrato vazio numa lista de gente lê como imagem quebrada. */
	.vt-buscar-prof__monograma {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

	/* Item de flex nasce com `min-width: auto`, e nome longo estouraria a
	   fileira em vez de quebrar. */
	.vt-buscar-prof__texto {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}

	.vt-buscar-prof__nome {
		overflow: hidden;
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-titulo);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-buscar-prof__arroba {
		overflow: hidden;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-buscar-prof__convidar {
		flex: none;
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

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

	/*
	 * ── começar: a primeira pergunta e a especialidade ──────────────
	 *
	 * **Esta é a única tela da conta sem trilho** — o `header-conta` o retira
	 * aqui e no `verificar`, porque as duas são uma tarefa só que a pessoa está
	 * no meio de terminar. Sem trilho, a tela precisa de um centro próprio: uma
	 * coluna estreita, e nada disputando com a pergunta.
	 *
	 * A medida é a da leitura, não a da grade. Uma pergunta de uma linha e dois
	 * cartões não têm o que fazer com 1100 px de largura.
	 */
	.vt-comecar__caixa {
		max-width: 40rem;
		margin: 0 auto;
	}

	/*
	 * ══ a trilha do assistente ══════════════════════════════════════════
	 *
	 * **Um segmento por capítulo, com o nome do capítulo escrito.** Ela
	 * substitui duas peças que falavam do mesmo assunto — a barra fina e o
	 * "passo 4 de 10" —, e a segunda mentia: a numeração vinha da ordem, e quem
	 * informou o nome no cadastro ia do "passo 1 de 10" direto ao "passo 3 de
	 * 10". Medido na tela em 04/09.
	 *
	 * O capítulo não salta porque não conta passos: ele nomeia o que está sendo
	 * resolvido. E nomear os quatro adianta o tamanho do caminho, que é a outra
	 * metade do que a pessoa quer saber ao olhar para cima.
	 *
	 * A curva desproporcional do briefing continua viva: ela é o `aria-valuenow`
	 * do `progressbar` e o preenchimento de cada segmento.
	 */
	/*
	 * ⚠️ `--vt-space-8`, e NÃO um `--vt-space-7`: a escala salta de 6 para 8, e
	 * um token inexistente derruba a DECLARAÇÃO INTEIRA — a margem virava zero e
	 * o título colava na trilha. Medido no navegador em 04/09: vão de 0 px entre
	 * o fim da trilha e o `<h1>`. É a segunda vez neste arquivo (ver a nota do
	 * `--vt-space-10` lá em cima); a escala é 1-6, 8, 12, 16.
	 */
	.vt-trilha {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: var(--vt-space-2);
		margin: 0 0 var(--vt-space-8);
	}

	.vt-trilha__etapa {
		display: grid;
		gap: var(--vt-space-2);
		min-width: 0;
	}

	.vt-trilha__risco {
		display: block;
		height: 4px;
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce-forte);
		overflow: hidden;
	}

	.vt-trilha__nivel {
		display: block;
		width: calc(var(--vt-pct, 0) * 1%);
		height: 100%;
		border-radius: var(--vt-radius-full);
		background: var(--vt-mint);
		transition: width var(--vt-dur-media) var(--vt-ease-transf);
	}

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

	/*
	 * `min-width: 0` e o corte: nome de capítulo é curto, mas a coluna a 360 px
	 * é mais curta ainda, e sem isto o nome estica a grade em vez de caber nela
	 * — a armadilha do `min-width: auto` de sempre.
	 */
	.vt-trilha__nome,
	.vt-trilha-atual {
		min-width: 0;
		overflow: hidden;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* O capítulo aberto é o único com peso de texto: é onde a pessoa está. */
	.vt-trilha__etapa.esta-aberto .vt-trilha__nome,
	.vt-trilha-atual {
		color: var(--vt-texto-forte);
	}

	/* O que ainda vem é visível, e mais leve: promessa, não estado. */
	.vt-trilha__etapa.esta-adiante .vt-trilha__nome {
		opacity: 0.65;
	}

	/*
	 * **No estreito só o capítulo aberto se nomeia, numa linha só.** Quatro
	 * nomes em quatro colunas de 80 px viram quatro reticências, que é o mesmo
	 * que nenhum nome. Os quatro riscos continuam: são eles que dizem o tamanho
	 * do caminho.
	 *
	 * A linha é IRMÃ da trilha, e não filha: dentro dela, com
	 * `grid-auto-flow: column`, ela viraria uma quinta coluna — o `1 / -1` não
	 * atravessa uma grade sem colunas explícitas.
	 */
	.vt-trilha__nome { display: none; }

	.vt-trilha-atual {
		margin: calc(var(--vt-space-8) * -1 + var(--vt-space-2)) 0 var(--vt-space-8);
	}

	@media (min-width: 40rem) {
		.vt-trilha__nome { display: block; }
		.vt-trilha-atual { display: none; }
	}

	/*
	 * ══ o palco: a pergunta e a obra ════════════════════════════════════
	 *
	 * **O painel do vTag em construção fica AO LADO da pergunta**, e não acima
	 * dela, onde a maquete ficava. Ao lado, ele é consequência: responde-se de
	 * um lado e a peça aparece do outro, na mesma dobra e sem rolar. Acima,
	 * seria mais um bloco a atravessar antes de chegar ao campo.
	 *
	 * Abaixo do ponto de duas colunas ele volta para cima da pergunta, que é o
	 * único lugar onde continua sendo visto sem rolagem — e ver o que se está
	 * construindo é a diferença entre construir e preencher.
	 */
	.vt-comecar__palco {
		display: grid;
		gap: var(--vt-space-8);
	}

	@media (min-width: 62rem) {
		/*
		 * **A caixa alarga em TODA tela do assistente, e não só nas que têm
		 * painel.** A trilha mora nela, e a 40 rem os quatro capítulos ficam com
		 * 150 px cada: "COMO TE ENCONTRAM" cortava em reticências na primeira
		 * tela — visto na tela em 04/09. Quem guarda a medida do texto é a
		 * coluna da pergunta, que continua em 40 rem.
		 */
		.vt-comecar__caixa {
			max-width: 64rem;
		}

		.vt-comecar__coluna {
			min-width: 0;
			max-width: 40rem;
		}

		/*
		 * **A segunda coluna só existe quando há painel.** Sem esta guarda, a
		 * tela do tipo — a única sem obra — reservava as 20 rem do painel
		 * ausente e espremia os dois cartões de escolha à metade da largura,
		 * com o título quebrado em três linhas. Medido na tela em 04/09.
		 */
		.vt-comecar__caixa--palco .vt-comecar__palco {
			grid-template-columns: minmax(0, 1fr) 20rem;
			align-items: start;
			gap: var(--vt-space-12);
		}

		/*
		 * **Sem painel, a coluna fica à ESQUERDA, e não no meio.** Centrada, ela
		 * saía do prumo da trilha — o primeiro capítulo começava 160 px antes do
		 * título, e as duas coisas pareciam de telas diferentes. Alinhada, a
		 * tela do tipo se lê como as outras nove.
		 */

		/*
		 * Grudada no alto: as telas do lugar e do conselho passam da altura da
		 * dobra, e a obra fora de vista no instante em que a peça entra é a obra
		 * que não conta nada.
		 */
		.vt-obra {
			position: sticky;
			top: var(--vt-space-8);
		}
	}

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

	/*
	 * A conquista do `@`. Uma linha, e não um modal: comemoração que interrompe
	 * vira obstáculo no segundo uso, e esta tela é a mesma para quem volta
	 * depois de ter saído no meio.
	 */
	.vt-comecar__conquista {
		margin: 0 0 var(--vt-space-4);
		padding: var(--vt-space-3) var(--vt-space-4);
		border-radius: var(--vt-radius-md);
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * A saída, discreta e sempre visível. **Assistente sem saída é armadilha**,
	 * e este público reconhece armadilha — mas ela é a última coisa da tela e
	 * não disputa com o botão que leva adiante.
	 */
	.vt-comecar__saida {
		margin: var(--vt-space-6) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-comecar__saida a {
		color: var(--vt-texto-fraco);
	}

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

	.vt-comecar__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-2) 0 var(--vt-space-6);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * As duas opções são IRMÃS e excludentes: mesma largura, mesmo peso, uma
	 * embaixo da outra. Lado a lado elas caberiam, mas a leitura passaria a ser
	 * horizontal — e a segunda opção, que é a menos comum, ganharia metade da
	 * tela por acidente de grade.
	 */
	.vt-comecar__escolhas {
		display: grid;
		gap: var(--vt-space-4);
		margin: 0 0 var(--vt-space-5);
	}

	.vt-comecar__opcao {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-1);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
		color: var(--vt-texto-forte);
		font: inherit;
		text-align: left;
		cursor: pointer;
		transition:
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	/*
	 * O realce sai de `currentColor`: ele acompanha o tema por construção, que
	 * é a regra que o bloco D fixou depois de `--vt-superficie-3` ter sido
	 * usada como se fosse elevação.
	 */
	.vt-comecar__opcao:hover,
	.vt-comecar__opcao:focus-visible {
		border-color: color-mix(in srgb, currentColor 35%, transparent);
		box-shadow: var(--vt-sombra-md);
	}

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

	.vt-comecar__opcao-nome {
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
	}

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

	/* O formulário da especialidade: três peças, e vão entre elas. */
	.vt-comecar__form > * + * {
		margin-top: var(--vt-space-5);
	}

	/*
	 * Duas escolhas curtas que formam UMA informação — "CRM/SP" se lê junto.
	 * Separá-las em duas linhas cheias faria a tela do conselho parecer três
	 * perguntas onde há uma. No estreito elas empilham, porque aí a largura
	 * mandaria o `<select>` da UF para 40 px.
	 */
	.vt-comecar__dupla {
		display: grid;
		gap: var(--vt-space-4);
	}

	@media (min-width: 30rem) {
		.vt-comecar__dupla {
			grid-template-columns: 1fr 8rem;
			align-items: start;
		}

		/*
		 * **A coluna estreita é do campo curto, e ele nem sempre é o segundo.**
		 * `1fr 8rem` serve a conselho+UF e cidade+estado, onde o curto vem
		 * depois. Em número+complemento a ordem se inverte — número tem 10
		 * caracteres e complemento tem 60 —, e usar a mesma regra espremia
		 * justamente o campo que precisa de espaço.
		 */
		.vt-comecar__dupla--inverso {
			grid-template-columns: 8rem 1fr;
		}
	}

	.vt-comecar__dupla > * {
		margin: 0;
	}

	/* A lista do que falta, na tela do fim. Curta e sem enfeite: ela é a
	   exceção, e a tela é de comemoração. */
	.vt-comecar__faltas {
		margin: 0 0 var(--vt-space-5);
		padding-inline-start: var(--vt-space-5);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * O bloco do endereço no assistente. `[hidden]` precisa vencer o `display`
	 * do grid — é a quinta vez no projeto que `display` de autor passa por cima
	 * de `[hidden]`, e a regra vale para todo elemento que nasce escondido.
	 */
	/*
	 * **O bloco de campos que é UMA resposta, e diz isso.**
	 *
	 * Ele era uma pilha de `input` soltos entre a chave que o abre e a cidade
	 * que fica fora dele, e o cliente apontou o efeito em 05/09/2026: *"um
	 * formulário com campos inputs soltos, não delimitados. O ideal é que o
	 * formulário tenha seu próprio espaço, uma sinalização de interface clara
	 * de que 'este é o espaço que você vai informar o seu endereço'"*.
	 *
	 * A moldura não é enfeite: ela é o que diz onde a resposta começa e onde
	 * acaba. Serve ao endereço e à agenda on-line, que têm o mesmo formato —
	 * uma chave que revela um punhado de campos que andam juntos.
	 *
	 * Fundo `superficie-2` e não `superficie-3`: a 3 é a superfície ESCURA nos
	 * dois temas, e usá-la aqui como se fosse elevação é o erro que a etapa 12
	 * catalogou.
	 */
	/*
	 * ── o endereço que vem da clínica ───────────────────────────────
	 *
	 * Somente leitura, e por isso ele **não** se parece com as fichas de
	 * endereço logo abaixo: sem moldura de cartão, sem sombra, sem os controles
	 * daquelas. A barra à esquerda é o que diz "isto é seu, mas não é daqui" —
	 * a mesma gramática que a área da conta usa para dado que vem de outro
	 * dono. Desenhá-lo como as outras fichas convidaria ao clique que não
	 * existe.
	 */
	.vt-corpo-conta .vt-end-clinica {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		margin-bottom: var(--vt-space-6);
		padding: var(--vt-space-4) var(--vt-space-5);
		/*
		 * `--vt-interacao`, e não um token de estado: esta barra não celebra
		 * nem alerta nada — ela diz "isto veio de outro lugar do sistema", e o
		 * azul de navegação é quem carrega esse papel aqui.
		 *
		 * **`--vt-marca` não existe**, e a primeira versão a usou: um token
		 * inexistente derruba a DECLARAÇÃO INTEIRA, então a borda simplesmente
		 * não aparecia. É a terceira vez que esta armadilha aparece no arquivo
		 * (ver as notas do `--vt-space-7` e do `--vt-space-10`).
		 */
		border-left: 3px solid var(--vt-interacao);
		border-radius: 0 var(--vt-radius-md) var(--vt-radius-md) 0;
		background: var(--vt-superficie-2);
	}

	.vt-corpo-conta .vt-end-clinica__titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		letter-spacing: -0.005em;
	}

	.vt-corpo-conta .vt-end-clinica__lista {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-corpo-conta .vt-end-clinica__item {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
	}

	.vt-corpo-conta .vt-end-clinica__nome {
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	.vt-corpo-conta .vt-end-clinica__linha {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/* O vínculo que ainda não fechou diz que ainda não fechou. */
	.vt-corpo-conta .vt-end-clinica__espera {
		margin-top: var(--vt-space-1);
		color: var(--vt-estado-alerta);
		font-size: var(--vt-fs-xs);
	}

	.vt-corpo-conta .vt-end-clinica__nota {
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-corpo-conta .vt-end-clinica__acao {
		margin: 0;
	}

	/*
	 * ── a clínica que convidou, no passo do lugar ───────────────────
	 *
	 * **Para quem veio por convite, esta é A pergunta** — por isso o bloco fica
	 * acima de tudo, antes até da linha de apoio. O cliente descreveu o defeito
	 * que ele resolve: a pessoa intuitivamente digitava o endereço da clínica,
	 * e o vTag terminava com dois endereços iguais.
	 *
	 * A moldura é a mesma do bloco do endereço — mesma borda, mesmo raio, mesma
	 * `superficie-2` — porque as duas coisas são irmãs: cada uma é UMA resposta
	 * inteira à pergunta da tela. Inventar uma segunda anatomia aqui diria que
	 * são coisas de naturezas diferentes, e não são.
	 */
	.vt-lugar-clinica {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
		margin: 0 0 var(--vt-space-6);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

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

	.vt-lugar-clinica__nome {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		line-height: var(--vt-lh-compacta);
		letter-spacing: -0.01em;
	}

	.vt-lugar-clinica__endereco {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	.vt-lugar-clinica__pergunta {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * ── as duas respostas ───────────────────────────────────────────
	 *
	 * **Eram dois botões que enviavam na hora, e viraram escolhas.** O cliente
	 * mediu o custo daquilo em 06/09: *"eu atendo sim na clínica, mas também
	 * atendo online e tenho um consultório"* — confirmar levava a pessoa
	 * embora, e as três verdades não cabiam numa passagem só.
	 *
	 * **Rádio e não interruptor**, porque aqui as opções se excluem — e porque
	 * existe um terceiro estado que precisa continuar existindo: nenhuma
	 * marcada é "ainda não respondi", não "não atendo".
	 */
	.vt-lugar-clinica__opcoes {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin-top: var(--vt-space-1);
	}

	.vt-opcao-clinica {
		display: flex;
		gap: var(--vt-space-3);
		margin: 0;
		padding: var(--vt-space-3) var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		cursor: pointer;
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-opcao-clinica:hover {
		border-color: var(--vt-linha-forte);
	}

	/*
	 * A opção escolhida ganha a borda de marca — e só ela. Pintar o fundo
	 * inteiro daria a ela o peso de um estado do sistema, e isto é uma resposta
	 * que a pessoa ainda pode trocar antes de enviar.
	 */
	.vt-opcao-clinica:has(:checked) {
		border-color: var(--vt-estado-ok);
		box-shadow: inset 0 0 0 1px var(--vt-estado-ok);
	}

	.vt-opcao-clinica__radio {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		margin: 0.15rem 0 0;
		accent-color: var(--vt-estado-ok);
	}

	.vt-opcao-clinica__rotulo {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		cursor: pointer;
	}

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

	.vt-opcao-clinica__ajuda {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/* O anel de foco vai para a opção inteira: o rádio é pequeno, e quem navega
	   por teclado precisa ver qual das duas está sob o cursor. */
	.vt-opcao-clinica:has(:focus-visible) {
		outline: 2px solid var(--vt-interacao);
		outline-offset: 2px;
	}

	.vt-lugar-clinica__nota {
		margin: 0;
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * "Também atende em outro lugar?" separa a pergunta do convite do resto do
	 * passo. Ele é um `<h2>` de verdade porque abre uma seção — e não repete o
	 * peso do `<h1>`, que continua sendo a pergunta da tela.
	 */
	.vt-lugar-clinica__tambem,
	.vt-lugar-formas {
		margin: 0 0 var(--vt-space-2);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		letter-spacing: -0.005em;
	}

	/*
	 * ── um grupo por resposta, no passo do lugar ────────────────────
	 *
	 * **A chave e o espaço que ela abre são a mesma unidade.** A versão
	 * anterior punha as quatro chaves numa pilha e os dois painéis depois
	 * delas: marcar a última abria um formulário 562 px abaixo — medido na
	 * tela, com o endereço aberto —, e o cliente disse o que isso produz em
	 * 06/09: *"dependendo do scroll, o usuário nem percebe que abriu um
	 * formulário novo"*. Painel longe da chave é painel que não abriu.
	 *
	 * O vão ENTRE grupos é maior que o vão dentro de um: é ele que diz onde uma
	 * resposta acaba e a seguinte começa, e sem essa diferença os três grupos
	 * voltam a ser uma lista só com molduras no meio.
	 */
	.vt-lugar-grupos {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-6);
	}

	.vt-lugar-grupo {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-3);
	}

	/*
	 * A cidade abre a tela sozinha, e o vão maior embaixo dela a separa das
	 * formas de atendimento: são duas perguntas, não uma lista de campos.
	 */
	.vt-lugar-cidade {
		margin-bottom: var(--vt-space-6);
	}

	/* O vão do bloco já é o espaçamento; a margem que `formulario.css` dá ao
	   `.vt-campo__ajuda` somaria a ele. Duas classes no seletor porque aquela
	   folha carrega DEPOIS desta. */
	.vt-lugar-cidade .vt-campo__ajuda {
		margin: 0;
	}

	.vt-comecar__local {
		display: grid;
		gap: var(--vt-space-4);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	.vt-comecar__local[hidden] {
		display: none;
	}

	.vt-comecar__local > .vt-campo {
		margin: 0;
	}

	.vt-comecar__local > .vt-comecar__dupla {
		margin: 0;
	}

	/*
	 * O nome do bloco. Não é um `<h2>` — a tela já tem um título, e um segundo
	 * nível aqui competiria com a pergunta —, mas tem o peso de quem nomeia:
	 * é a linha que responde "o que se preenche aqui dentro?" antes de a pessoa
	 * ler os rótulos um a um.
	 */
	.vt-comecar__local-titulo {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-titulo);
	}

	/*
	 * ── a clínica com outros profissionais, no passo do lugar ───────
	 *
	 * A quarta resposta de "Onde você atende?", e o painel que ela abre. A
	 * moldura é a do bloco do endereço — mesma classe, de propósito: as duas
	 * são UMA resposta inteira à pergunta da tela, e inventar uma segunda
	 * anatomia diria que são coisas de naturezas diferentes.
	 *
	 * **Bloco próprio, e não as classes da busca de profissionais.** A anatomia
	 * de uma fileira de resultado é a mesma, e a tentação era reaproveitar
	 * `.vt-buscar-prof__*` — mas ali o nome diria "profissional" numa lista de
	 * clínicas, e as duas divergem no que importa: o retrato de uma pessoa é
	 * redondo, o de um lugar é retangular (a mesma regra dos cards do
	 * catálogo), e ali o clique convida enquanto aqui ele escolhe. Nome de
	 * classe tem dono; este é o segundo, e não um apelido do primeiro.
	 */
	/*
	 * **O componente, separado da moldura que o assistente lhe dá.**
	 *
	 * O layout interno morava em `.vt-comecar__local` — a caixa com borda e
	 * fundo do passo "Onde você atende" —, e por isso a mesma busca posta na
	 * seção Clínicas do editor (08/09/2026) nascia sem grade nem respiro: os
	 * filhos empilhados, colados. Agora `.vt-buscar-cli` carrega o que é do
	 * COMPONENTE, e a moldura continua sendo de quem o hospeda: o assistente
	 * põe as duas classes, o editor só esta.
	 *
	 * `[hidden]` precisa ser dito porque `display: grid` vence o atributo — a
	 * armadilha que este projeto já catalogou. No editor o painel nunca se
	 * esconde, mas uma regra que só vale numa das duas casas é a que quebra na
	 * terceira.
	 */
	.vt-buscar-cli {
		display: grid;
		gap: var(--vt-space-4);
	}

	.vt-buscar-cli[hidden] {
		display: none;
	}

	.vt-buscar-cli__ja {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-buscar-cli__ja-item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vt-space-1) var(--vt-space-3);
	}

	.vt-buscar-cli__ja-nome {
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	.vt-buscar-cli__ja-estado {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * **`min-width: 0`, e não é enfeite: sem ele a COLUNA INTEIRA transborda.**
	 *
	 * Medido em 390 px: com um resultado na lista, `.vt-comecar__coluna` ia de
	 * 343 px para 479 e a tela ganhava rolagem horizontal. Item de grade nasce
	 * com `min-width: auto`, que é o tamanho MÍNIMO DO CONTEÚDO — e o conteúdo
	 * aqui é uma fileira com nome sem quebra. O `overflow: hidden` do nome não
	 * ajuda: ele corta o que é desenhado, não o que o elemento pede.
	 *
	 * O gêmeo da busca de profissionais nunca teve isto porque não mora dentro
	 * de uma grade. É a mesma armadilha da terceira vez neste projeto, e o
	 * jeito de vê-la é medir a largura do PAI, nunca a do elemento novo.
	 */
	.vt-buscar-cli__busca {
		display: grid;
		gap: var(--vt-space-3);
		min-width: 0;
	}

	/* O vão é do `grid` acima; a margem do `.vt-campo` da folha de formulário
	   somaria a ele e abriria um buraco entre o rótulo e a lista. */
	.vt-buscar-cli__busca > .vt-campo,
	.vt-buscar-cli__busca > .vt-buscar-cli__lista,
	.vt-buscar-cli__busca > .vt-buscar-cli__recado,
	.vt-buscar-cli__busca > .vt-buscar-cli__saidas {
		margin: 0;
	}

	.vt-buscar-cli__lista {
		display: flex;
		flex-direction: column;
		gap: var(--vt-space-2);
		min-width: 0;
		padding: 0;
		list-style: none;
	}

	/* Lista vazia não ocupa vão: sem isto o `gap` do painel abriria um degrau
	   entre o campo e o rodapé antes de a primeira busca acontecer. */
	.vt-buscar-cli__lista:empty {
		display: none;
	}

	/*
	 * A fileira inteira é o botão, e o rótulo à direita diz o que o clique faz.
	 * **`type="button"`**: aqui escolher não envia — quem envia é o botão do
	 * fim do passo, que é o único que avança.
	 */
	.vt-buscar-cli__botao {
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			background var(--vt-dur-rapida) var(--vt-ease-entrada);
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		width: 100%;
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.vt-buscar-cli__botao:hover,
	.vt-buscar-cli__botao:focus-visible {
		border-color: var(--vt-texto-fraco);
		background: var(--vt-superficie-2);
	}

	/*
	 * A clínica escolhida, com a mesma anatomia de um resultado — é o mesmo
	 * dado, e trocar a forma no instante da escolha faria parecer que outra
	 * coisa apareceu no lugar.
	 */
	.vt-buscar-cli__alvo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3);
		min-width: 0;
		padding: var(--vt-space-3);
		border: 1px solid var(--vt-estado-ok);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

	/*
	 * **Retangular, e não redonda.** A do profissional é redonda; a marca de um
	 * lugar é retangular, e a diferença diz "pessoa" e "lugar" antes de
	 * qualquer rótulo — é a mesma regra dos cards do catálogo.
	 */
	.vt-buscar-cli__retrato {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		overflow: hidden;
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-2);
	}

	.vt-buscar-cli__retrato img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* Clínica sem logo ganha as iniciais: um retrato vazio numa lista de
	   lugares lê como imagem quebrada. */
	.vt-buscar-cli__monograma {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

	/* Item de flex nasce com `min-width: auto`, e nome longo estouraria a
	   fileira em vez de encurtar. */
	.vt-buscar-cli__texto {
		display: flex;
		flex: 1 1 12rem;
		flex-direction: column;
		min-width: 0;
	}

	.vt-buscar-cli__nome {
		overflow: hidden;
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-titulo);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-buscar-cli__local {
		overflow: hidden;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vt-buscar-cli__escolher {
		flex: none;
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-titulo);
	}

	.vt-buscar-cli__trocar {
		flex: none;
	}

	.vt-buscar-cli__recado {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * ── a bifurcação de "Minhas clínicas" ───────────────────────────────
	 *
	 * Quem chegou na tela de ADMINISTRAR clínicas querendo apenas se vincular a
	 * uma. Mesma gramática da saída logo abaixo — pergunta, gesto, e o que
	 * acontece depois —, e pela mesma razão: quem está no lugar errado precisa
	 * de uma porta, não de um aviso.
	 *
	 * **Classe própria, e não a `__saidas` reaproveitada.** Aquela é do
	 * componente de busca de clínica, e vestir a tela de administração com o
	 * nome de outro componente é como um seletor passa a valer onde ninguém
	 * esperava. O CSS repetido são oito linhas de layout; o que não se duplica
	 * é regra, e aqui não há nenhuma.
	 */
	.vt-bifurca {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-3);
		margin: 0 0 var(--vt-space-6);
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	.vt-bifurca__olho,
	.vt-bifurca__nota {
		flex: 1 1 100%;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * A pergunta é o que a pessoa reconhece como sua — ela carrega o peso, e a
	 * nota fica em corpo de nota. Sem isto as duas linhas se leem como um
	 * parágrafo só, e a pergunta perde a função de parar quem está passando.
	 */
	.vt-bifurca__olho {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	/* Mesma exceção da saída do assistente: do lado de uma frase em letra
	   miúda, um botão de texto vira mais uma palavra da frase. */
	.vt-corpo-conta .vt-bifurca .vt-acao--discreta {
		min-height: 2.5rem;
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	/*
	 * A saída de quem não acha a clínica: pergunta, gesto, e o que acontece
	 * depois — nessa ordem, uma coisa por linha.
	 *
	 * **O gesto é CONTROLE, e não nota de rodapé:** quem chega aqui está
	 * travado, e a resposta a isso não é uma frase. A nota abaixo dele é o
	 * contrário — ela é frase de propósito, e não link: um link convidaria a
	 * sair do assistente agora, que é justamente o que ela existe para não
	 * fazer.
	 */
	.vt-buscar-cli__saidas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-3);
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
	}

	.vt-buscar-cli__saidas-olho,
	.vt-buscar-cli__saidas-nota {
		flex: 1 1 100%;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/*
	 * **As duas saídas têm forma de botão, e é a mesma exceção da linha de
	 * ações do passo.**
	 *
	 * `.vt-acao--discreta` é, no resto da área da conta, um botão de texto —
	 * medido aqui na tela: `padding: 0`, `border: 0`, sublinhado. Do lado de um
	 * rótulo em letra miúda ("Não encontrou a clínica?") as duas viravam mais
	 * duas palavras da mesma frase, e quem está travado leria a saída como nota
	 * de rodapé. O cliente já apontou exatamente isso na saída do passo, em
	 * 05/09: ela "parecia ignorável".
	 *
	 * Contorno e não preenchimento, e um degrau menor que o das ações do fim
	 * (2,5rem contra 3rem): elas precisam ser alcançáveis sem disputar com
	 * "Registrar onde eu atendo", que continua sendo a ação da tela.
	 */
	.vt-corpo-conta .vt-buscar-cli__saidas .vt-acao--discreta {
		min-height: 2.5rem;
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	.vt-corpo-conta .vt-buscar-cli__saidas .vt-acao--discreta:hover,
	.vt-corpo-conta .vt-buscar-cli__saidas .vt-acao--discreta:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	/*
	 * O recado da dupla: colado nela, e não a um vão de campo de distância.
	 *
	 * **Margem POSITIVA e pequena, não negativa.** A primeira versão puxava o
	 * texto para cima com `-space-2` e ele subia por cima da linha de campos —
	 * o vão do formulário (`> * + *`) já é o que ele precisa encurtar, não
	 * anular. Legível na tela do conselho, ilegível na do lugar, e o mesmo
	 * defeito nas duas.
	 */
	/*
	 * **A margem tem DUAS classes no seletor, e é por isso que ela funciona.**
	 *
	 * O elemento é `class="vt-campo__ajuda vt-comecar__recado"`, e
	 * `formulario.css` — que o `assets.php` enfileira DEPOIS de `conta.css` —
	 * traz `.vt-campo__ajuda { margin: 0 }`. Duas classes simples, mesma
	 * especificidade: ganha a última carregada, que é a de lá.
	 *
	 * **Ou seja: esta regra nunca esteve em vigor.** Ela nasceu com margem
	 * negativa, foi "corrigida" para `space-2`, e a tela continuou mostrando
	 * zero — que é exatamente o que o cliente viu em 05/09/2026: *"o texto 'a
	 * cidade é o que coloca você nas buscas por perto' está colado no input
	 * logo acima"*. Medido no navegador no mesmo dia: `margin-top: 0px`.
	 * Trocar o valor de novo teria produzido a mesma tela.
	 *
	 * `.vt-campo__ajuda.vt-comecar__recado` vence por especificidade, e não por
	 * ordem de arquivo — que é o único jeito de a regra não voltar a morrer no
	 * dia em que alguém reordenar as folhas.
	 *
	 * O valor é `space-4`: o recado explica a dupla inteira e não é a ajuda de
	 * um campo, então ele precisa da distância que separa uma coisa da outra —
	 * e continua mais perto dela do que do próximo bloco.
	 */
	.vt-campo__ajuda.vt-comecar__recado {
		display: block;
		margin: var(--vt-space-4) 0 0;
	}

	.vt-campo__ajuda.vt-comecar__recado[hidden] {
		display: none;
	}

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

	/*
	 * Só a margem de BAIXO é zerada. Zerando as duas, o botão perdia o vão que
	 * `> * + *` dá e colava na última linha de campos — pior num formulário
	 * onde ele é a ação que fecha o passo.
	 */
	.vt-comecar__enviar {
		margin-bottom: 0;
	}

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

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

	/*
	 * ── a linha que antecipa o próximo passo ────────────────────────────
	 *
	 * **Ela existe porque o rótulo do botão deixou de fazer esse trabalho.**
	 * Até 05/09/2026 o botão do passo dizia o nome do passo SEGUINTE — "agora,
	 * o meu endereço" na tela que grava o nome —, e o cliente descreveu o que
	 * isso produz: *"isso confunde muito o usuário; eu, que conheço o sistema,
	 * fiquei confuso se ao clicar no botão salvaria o nome, ou se havia um
	 * botão escondido para isso"*.
	 *
	 * Ele também disse que gosta da antecipação, e ela é boa mesmo: saber o que
	 * vem tira o medo de responder. O que ela não pode é ocupar o lugar do nome
	 * da ação. Então ficou embaixo, com peso de informação — não é clicável, e
	 * não parece.
	 */
	.vt-comecar__adiante {
		margin: var(--vt-space-3) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-comecar__adiante::before {
		content: "↓";
		margin-right: var(--vt-space-2);
		opacity: 0.7;
	}

	/*
	 * ── o título antes do nome ──────────────────────────────────────────
	 *
	 * **A decisão que a tela pulada levava embora.** O passo do nome era pulado
	 * para quem se cadastrou com nome, e com ele ia a escolha que o cliente
	 * nomeou: *"é nesse momento que o profissional decide se usará ou não o
	 * título no perfil. Eu me cadastro como Zoe Nori, mas quero meu perfil
	 * exibindo Dra. Zoe Nori"*.
	 *
	 * Três atalhos que escrevem no campo, e não um `<select>` de prefixo: o
	 * título faz parte do nome — é o que o editor diz e o que `@dra.daniela`
	 * comprova —, e uma coluna separada criaria um segundo dono para a mesma
	 * informação.
	 */
	.vt-titulo-nome {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0;
	}

	.vt-titulo-nome[hidden] {
		display: none;
	}

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

	.vt-titulo-nome__opcoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
	}

	.vt-titulo-nome__opcao {
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-medio);
		font: inherit;
		font-size: var(--vt-fs-sm);
		cursor: pointer;
	}

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

	/*
	 * O escolhido tem marca, e ela sai de `currentColor` — a regra que o bloco
	 * D fixou depois de `--vt-superficie-3` ter sido usada como se fosse
	 * elevação, quando ela é a superfície escura nos dois temas.
	 */
	.vt-titulo-nome__opcao.esta-escolhida {
		border-color: color-mix(in srgb, currentColor 45%, transparent);
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

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

	/*
	 * ── a alternativa da especialidade, e a confirmação dela ────────────
	 *
	 * O "não encontrei a minha profissão" estava com o `<a>` cru do HTML —
	 * *"está como um link sem destaque (padrão HTML puro), e quando eu clico,
	 * SE eu conseguir enxergar essa opção…"*. Ele continua sendo a segunda
	 * opção da tela; o que muda é ser enxergável.
	 */
	.vt-comecar__alternativa {
		margin: var(--vt-space-5) 0 0;
	}

	.vt-corpo-conta .vt-comecar__alternativa .vt-acao--discreta {
		min-height: 3rem;
		padding: var(--vt-space-3) var(--vt-space-5);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	.vt-corpo-conta .vt-comecar__alternativa .vt-acao--discreta:hover,
	.vt-corpo-conta .vt-comecar__alternativa .vt-acao--discreta:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	/*
	 * A confirmação que vem ANTES do campo de pedido. *"Se eu dou uma
	 * orientação, eu já ofereço, em seguida, o caminho para seguir ela"* — daí
	 * as duas saídas dentro do próprio bloco, com a volta à lista na frente.
	 */
	.vt-confirma-esp {
		display: grid;
		gap: var(--vt-space-3);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	.vt-confirma-esp[hidden] {
		display: none;
	}

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

	.vt-confirma-esp__texto {
		margin: 0;
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * ── "não tenho registro em conselho" ────────────────────────────────
	 *
	 * Fora do formulário do registro, porque grava outra coisa — e porque dois
	 * `<form>` aninhados não existem em HTML. Separado por uma linha: ele não é
	 * uma terceira saída da mesma pergunta, é a resposta de quem a pergunta não
	 * alcança.
	 */
	.vt-comecar__sem {
		display: grid;
		gap: var(--vt-space-2);
		justify-items: start;
		margin-top: var(--vt-space-6);
		padding-top: var(--vt-space-5);
		border-top: 1px solid var(--vt-linha);
	}

	.vt-corpo-conta .vt-comecar__sem .vt-acao--discreta {
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	.vt-corpo-conta .vt-comecar__sem .vt-acao--discreta:hover,
	.vt-corpo-conta .vt-comecar__sem .vt-acao--discreta:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	.vt-comecar__sem-ajuda {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * ── o que falta, na tela final ──────────────────────────────────────
	 *
	 * **Ela dizia "está de pé" em corpo de display e explicava a pendência em
	 * 13 px.** O cliente fechou o teste convencido de que o vTag estava
	 * publicado, e o diagnóstico dele é do sistema e não dele: *"foi o sistema
	 * que não deixou claro pra ele que existem pendências"*.
	 *
	 * A frase grande passou a dizer o que falta; este bloco é o detalhe — e o
	 * detalhe pode ser menor DEPOIS de a pendência ter sido dita, nunca no
	 * lugar dela. Ele tem moldura porque é a única coisa da tela que exige uma
	 * ação futura, e é ela que o separa da comemoração logo acima.
	 */
	.vt-pendencia {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0 0 var(--vt-space-6);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	.vt-pendencia__texto {
		margin: 0;
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
	}

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

	.vt-pendencia .vt-comecar__faltas {
		margin: 0;
	}

	/*
	 * ══ a entrada do assistente ═════════════════════════════════════════
	 *
	 * As telas do nome, do `@` e do tratamento. Elas foram reescritas no D2
	 * depois de uma auditoria de experiência: a primeira entrega tinha os
	 * mecanismos pedidos e a gramática que o cliente condenou — estados de
	 * validação onde ele pediu convite, um par de botões do editor onde ele
	 * pediu uma frase, e uma comemoração que a pessoa não via acontecer.
	 */

	/*
	 * ══ o vTag em construção ════════════════════════════════════════════
	 *
	 * **Este painel é o que separa construir de preencher.** O assistente monta
	 * um perfil público, e uma sequência de campos não diz isso — por melhor que
	 * seja o texto de cada tela. Aqui a pessoa vê a coisa existir: a silhueta
	 * está montada desde o primeiro instante, com as peças que faltam marcadas
	 * por um traço, e cada resposta troca um traço por um dado.
	 *
	 * Ele é a evolução da maquete da entrada, que morria no passo do tratamento
	 * — exatamente antes das cinco telas em que nada visível acontecia. O
	 * argumento de então era não pagar "um gabarito partido em todas as telas";
	 * ele fica de pé enquanto o painel é decoração, e cai quando ele é o
	 * resultado: o que estava faltando na sequência era justamente o "algo
	 * aconteceu" entre a resposta e a tela seguinte.
	 */
	.vt-obra {
		display: grid;
		gap: var(--vt-space-4);
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
	}

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

	/*
	 * ── a cabeça do cartão ──────────────────────────────────────────────
	 *
	 * A identidade, e a única parte que responde ao teclado: nome e `@`
	 * acompanham o campo enquanto se digita. É o que faz a entrada parecer
	 * criação, e não preenchimento.
	 */
	.vt-obra__cartao {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--vt-space-3);
		padding: var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-0);
		transition:
			border-color var(--vt-dur-media) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-media) var(--vt-ease-entrada);
	}

	/*
	 * O selo é o avatar que ainda não existe: a inicial do nome, e o arroba
	 * enquanto não há nome. Vazio ele seria um buraco na composição, e uma
	 * silhueta de pessoa prometeria uma foto que o assistente não pede.
	 */
	.vt-obra__selo {
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		line-height: 1;
	}

	.vt-obra__linhas {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	/*
	 * `min-width: 0` nos dois: sem ele o nome longo estica o flex em vez de
	 * cortar, e o cartão sai da coluna. É a armadilha de sempre do
	 * `min-width: auto` dentro de flex.
	 */
	.vt-obra__nome,
	.vt-obra__endereco {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	.vt-obra__endereco {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
	}

	/*
	 * ── o carimbo de reservado ──────────────────────────────────────────
	 *
	 * **Ele é uma LINHA do cartão, e não um selo no canto.** No canto ele era
	 * `position: absolute`, e a 320 px de painel passava por cima do nome e do
	 * endereço — visto na tela em 04/09, nos dois temas. O `padding-right` que
	 * abria espaço para ele resolvia o vão e não resolvia o texto: `absolute`
	 * não empurra nada, e a linha continuava correndo por baixo.
	 *
	 * Como terceira linha ele não pode colidir com coisa nenhuma, e a chegada
	 * dele cresce o cartão — que é, ela própria, a notícia de que algo mudou.
	 */
	.vt-obra__carimbo {
		display: none;
		width: fit-content;
		margin-top: var(--vt-space-1);
		padding: 0.1rem 0.5rem;
		border: 1px solid var(--vt-mint);
		border-radius: var(--vt-radius-full);
		color: var(--vt-mint);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	.vt-obra__cartao.esta-reservada {
		border-color: color-mix(in srgb, var(--vt-mint) 45%, transparent);
	}

	.vt-obra__cartao.esta-reservada .vt-obra__carimbo {
		display: block;
		animation: vt-obra-carimbo var(--vt-dur-media) var(--vt-ease-entrada) 1;
	}

	@keyframes vt-obra-carimbo {
		from {
			opacity: 0;
			transform: translateY(-2px);
		}
	}

	/*
	 * ── as peças ────────────────────────────────────────────────────────
	 *
	 * **A peça que falta aparece, e é isso que a faz obra e não resumo.** Um
	 * painel que mostrasse só o que já existe seria um inventário: a pessoa
	 * saberia o que respondeu, e não o que está construindo. Com o traço e o
	 * nome do que vem ali, o lugar vazio é uma promessa — e preenchê-lo é
	 * visível.
	 */
	.vt-obra__pecas {
		display: grid;
		gap: var(--vt-space-3);
		margin: 0;
	}

	.vt-obra__peca {
		display: grid;
		gap: 1px;
		padding-left: var(--vt-space-3);
		border-left: 2px solid var(--vt-linha);
	}

	.vt-obra__peca.esta-pronta {
		border-left-color: var(--vt-mint);
	}

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

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

	.vt-obra__peca.esta-pronta .vt-obra__valor {
		color: var(--vt-texto-forte);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * ── os botões que o vTag já tem ─────────────────────────────────────
	 *
	 * A tradução do dado em ação: a diferença entre "informei o WhatsApp" e
	 * "quem abrir o meu perfil me chama no WhatsApp". É o que o cliente pediu
	 * com todas as letras na tela do agendamento, adiantado para o momento em
	 * que a informação é dada.
	 *
	 * São réplicas mudas, e não botões: sem `cursor`, sem `hover`, sem foco.
	 * Um controle que parece clicável e não é gasta a confiança da tela toda.
	 */
	.vt-obra__acoes {
		display: grid;
		gap: var(--vt-space-2);
	}

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

	.vt-obra__botao {
		padding: 0.25rem 0.6rem;
		border: 1px solid color-mix(in srgb, var(--vt-mint) 45%, transparent);
		border-radius: var(--vt-radius-full);
		background: var(--vt-realce);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * ── a peça que acabou de entrar ─────────────────────────────────────
	 *
	 * **O "algo aconteceu" do ciclo.** Sem ele o painel seria um inventário
	 * mudo, e o briefing pede o contrário: informei algo → algo aconteceu → meu
	 * vTag ficou melhor. Um realce curto, que se apaga sozinho — comemoração
	 * que fica na tela vira ruído no passo seguinte.
	 */
	@keyframes vt-obra-entrou {
		from {
			background: var(--vt-mint);
			color: var(--vt-superficie-0);
		}
	}

	/*
	 * 900 ms, e não `--vt-dur-lenta` (380 ms): as durações do sistema são de
	 * transição de estado, e esta é a de um aviso que precisa ser NOTADO por
	 * quem estava olhando para o outro lado da tela quando ele aconteceu.
	 */
	.vt-obra__peca.esta-nova .vt-obra__valor,
	.vt-obra__botao.esta-nova {
		animation: vt-obra-entrou 900ms var(--vt-ease-entrada) 1;
	}

	.vt-obra__nota {
		margin: 0;
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
	}

	/*
	 * ── a obra no estreito ──────────────────────────────────────────────
	 *
	 * **Ela vai para CIMA da pergunta, e encolhe.** Na primeira versão a ordem
	 * do DOM a deixava embaixo do formulário e embaixo do "voltar um passo" —
	 * visto na tela a 390 px —, e uma obra que só aparece depois de rolar a
	 * tela inteira não conta nada: perde-se exatamente o instante em que a peça
	 * entrou.
	 *
	 * Em cima, o custo é altura, e a primeira versão desta não pagou o preço:
	 * **379 px medidos na página real**, com a pergunta começando aos 544 px —
	 * mais da metade de um celular antes de aparecer o que se veio responder.
	 * O corte tem três alvos, e nenhum deles é informação:
	 *
	 * - **os dois rótulos** ("seu vTag, agora" e "botões do seu vTag") e a nota
	 *   do editor: 60 px de texto que o contexto já dá;
	 * - **as fichas de DADO viram uma linha de texto** separada por pontos —
	 *   elas eram duas fileiras de pílulas para dizer três palavras. As fichas
	 *   continuam onde significam alguma coisa: nos BOTÕES, porque ali a forma
	 *   de pílula é o próprio recado ("isto virou um botão no seu vTag");
	 * - **o carimbo volta para a linha do `@`**, em vez de ocupar uma terceira
	 *   linha do cartão.
	 *
	 * Sem o rótulo dos botões, a régua que separa dado de ação passa a ser a
	 * FORMA: texto corrido de um lado, pílula do outro.
	 */
	.vt-obra {
		order: -1;
		gap: var(--vt-space-2);
		padding: var(--vt-space-4);
	}

	.vt-obra__titulo { display: none; }

	.vt-obra__cartao {
		gap: var(--vt-space-3);
		padding: var(--vt-space-3);
	}

	.vt-obra__selo {
		width: 2.25rem;
		height: 2.25rem;
		font-size: var(--vt-fs-base);
	}

	/*
	 * O carimbo sobe para a linha do `@`: uma linha a menos no cartão.
	 *
	 * **Quem decide isso é `__linhas`, e não `__endereco`** — o carimbo é IRMÃO
	 * do endereço, não filho dele. A primeira tentativa pôs o `flex` no
	 * endereço, e o efeito foi só o que ela não queria: o `@` e o slug viraram
	 * dois itens de flex e ganharam um vão no meio ("@ marcela-lima"), enquanto
	 * o carimbo continuou na terceira linha.
	 */
	.vt-obra__linhas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px var(--vt-space-2);
	}

	.vt-obra__nome { flex: 0 0 100%; }

	.vt-obra__cartao.esta-reservada .vt-obra__carimbo {
		display: inline-block;
		margin-top: 0;
	}

	/*
	 * **Menos no fim.** Lá o conteúdo é a conclusão e o painel é a prova dela:
	 * abrir a tela com o cartão empurra a frase da conquista para 400 px abaixo
	 * da dobra — visto no navegador, em iframe de 390 px, em 04/09.
	 */
	.vt-comecar__palco--fim .vt-obra {
		order: 0;
	}

	/*
	 * As peças viram uma frase: "dentista · CRO/SP 88944 · Franca, SP". Três
	 * palavras não precisam de três pílulas, e as pílulas custavam duas
	 * fileiras inteiras.
	 */
	.vt-obra__pecas {
		display: block;
		font-size: var(--vt-fs-micro);
		line-height: 1.7;
	}

	.vt-obra__peca {
		display: inline;
		padding: 0;
		border: 0;
	}

	.vt-obra__peca + .vt-obra__peca::before {
		content: " · ";
		color: var(--vt-texto-fraco);
	}

	/*
	 * **Ficha respondida é fato; ficha de botão é ação.** As duas fileiras
	 * ficam coladas para se lerem como um campo só, e por isso não podem ter a
	 * mesma cor: com o mesmo verde nas duas, "CRM/SP 90427" e "Ligar" viravam a
	 * mesma coisa. O dado fica neutro e sólido, e o verde fica com o que a
	 * pessoa que abrir o vTag vai poder apertar.
	 */

	/*
	 * **O rótulo das fichas de dado some; o dos botões fica.** As duas fileiras
	 * ficam coladas de propósito, para se lerem como um campo só — e aí "Franca,
	 * SP" e "Ligar" ficam indistinguíveis sem alguma coisa que diga onde uma
	 * acaba. O rótulo dos dados é dispensável (o texto da ficha já diz o que é:
	 * "— sua especialidade", "CRM/SP 90427"); o dos botões não é, porque ele é
	 * quem conta a notícia: aquilo virou um botão no vTag.
	 */
	.vt-obra__pecas .vt-obra__chave,
	.vt-obra__acoes .vt-obra__chave,
	.vt-obra__nota {
		display: none;
	}

	.vt-obra__valor {
		display: inline;
	}

	.vt-obra__valor {
		font-size: var(--vt-fs-micro);
	}

	/*
	 * ── e a obra no largo, onde a altura não é moeda ────────────────────
	 *
	 * Aqui ela tem uma coluna só para si, então volta a ser a lista rotulada:
	 * cada peça na própria linha, com a régua à esquerda e o nome do que é.
	 * **Tudo o que o estreito encolheu se desfaz aqui**, e por isso este bloco
	 * repõe item por item — uma propriedade esquecida deixaria a versão
	 * apertada vazando para a tela grande.
	 */
	@media (min-width: 62rem) {
		.vt-obra {
			order: 0;
			gap: var(--vt-space-4);
			padding: var(--vt-space-5);
		}

		.vt-obra__titulo { display: block; }

		.vt-obra__cartao {
			gap: var(--vt-space-3);
			padding: var(--vt-space-4);
		}

		.vt-obra__selo {
			width: 2.75rem;
			height: 2.75rem;
			font-size: var(--vt-fs-lg);
		}

		.vt-obra__linhas {
			display: grid;
			gap: 2px;
		}

		.vt-obra__nome { flex: initial; }

		.vt-obra__cartao.esta-reservada .vt-obra__carimbo {
			display: block;
			margin-top: var(--vt-space-1);
		}

		.vt-obra__pecas {
			display: grid;
			gap: var(--vt-space-3);
			font-size: inherit;
			line-height: inherit;
		}

		.vt-obra__peca {
			display: grid;
			padding: 0 0 0 var(--vt-space-3);
			border: 0;
			border-left: 2px solid var(--vt-linha);
		}

		.vt-obra__peca + .vt-obra__peca::before { content: none; }

		.vt-obra__peca.esta-pronta {
			border-left-color: var(--vt-mint);
		}

		.vt-obra__pecas .vt-obra__chave,
		.vt-obra__acoes .vt-obra__chave,
		.vt-obra__nota {
			display: block;
		}

		.vt-obra__valor {
			display: block;
			font-size: var(--vt-fs-sm);
		}
	}

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

		.vt-obra__cartao.esta-reservada .vt-obra__carimbo { animation: none; }

		.vt-obra__peca.esta-nova .vt-obra__valor,
		.vt-obra__botao.esta-nova { animation: none; }
	}

	/*
	 * ── a conquista do `@` ──────────────────────────────────────────────
	 *
	 * **Reservar o endereço é a primeira coisa que a pessoa ganha aqui.** Ela
	 * acontece no lugar do formulário, sem recarga: o endereço cresce onde o
	 * campo estava, e o cartão ao lado ganha o carimbo. Enquanto era uma tela
	 * nova depois de um redirecionamento, não havia nada para ver — a página
	 * abria com a comemoração já pronta, que é o mesmo que não comemorar.
	 *
	 * **Sem confete, decidido pelo cliente**: peso tipográfico e tempo. O tempo
	 * é o que faltava — 220 ms é a duração de um `hover`, não de um momento.
	 */
	.vt-conquista {
		margin: 0;

		/*
		 * O halo é um `::before` com `z-index: -1`, e sem contexto próprio ele
		 * subiria até a raiz — passando por baixo de coisas que não são dele.
		 * `isolation` prende a pilha aqui dentro.
		 */
		isolation: isolate;
	}

	.vt-conquista__selo {
		margin: 0 0 var(--vt-space-2);
		color: var(--vt-mint);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
		text-transform: uppercase;
	}

	/*
	 * O host em linha própria, pequeno; o `@` embaixo, no maior corpo da
	 * plataforma. Na mesma linha os dois disputavam a largura, e era o
	 * endereço — o que a pessoa leva embora — que quebrava no meio.
	 */
	.vt-conquista__endereco {
		position: relative;
		margin: 0 0 var(--vt-space-4);
	}

	/*
	 * Os dois alvos de foco da conquista têm `tabindex="-1"`: eles existem para
	 * o JavaScript levar o foco quando a tela troca sem recarga — ninguém chega
	 * neles pelo Tab. O anel do navegador ali é ruído em volta de um título, e
	 * não a marca de "você está aqui".
	 */
	.vt-conquista__endereco:focus,
	.vt-conquista__endereco:focus-visible,
	.vt-conquista__titulo:focus,
	.vt-conquista__titulo:focus-visible {
		outline: none;
	}

	/* O `@` é a marca do endereço, e por isso ele fica um pouco atrás do nome
	   em cor — presente, sem competir com o que a pessoa escolheu. */
	.vt-conquista__arroba {
		color: var(--vt-texto-fraco);
	}

	/*
	 * **O corpo acompanha a largura, e é isso que impede a quebra feia.**
	 *
	 * Um `@` é uma palavra só, e longa: `dra.mariana.lemos` não cabe em 340 px
	 * com 41 px de corpo, e a quebra saía no meio — "…mariana.le / mos", que é
	 * cortar exatamente o que a pessoa acabou de escolher. Encolher com a tela
	 * resolve na origem; a quebra fica como último recurso, para o endereço que
	 * nem assim couber.
	 */
	.vt-conquista__slug {
		display: block;
		color: var(--vt-texto-forte);
		font-size: clamp(1.5rem, 7.5vw, 2.6rem);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-titulo);
		line-height: var(--vt-lh-compacta);

		/*
		 * **`break-word`, e não `anywhere`.** Com `anywhere` o navegador quebra
		 * onde der, e a 340 px o endereço saía "marian / a-lemos" — cortado no
		 * meio da palavra que a pessoa acabou de escolher.
		 */
		overflow-wrap: break-word;
	}

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

	.vt-conquista__apoio {
		max-width: var(--vt-medida);
		margin: var(--vt-space-2) 0 var(--vt-space-6);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
	}

	/*
	 * A entrada da conquista, em três tempos curtos: o selo, o endereço e o
	 * texto. Escalonar é o que faz a sequência parecer um gesto em vez de um
	 * bloco piscando — e é o que sobra de "comemoração" numa gramática sóbria.
	 */
	.vt-conquista.esta-entrando .vt-conquista__selo {
		animation: vt-conquista-sobe 380ms var(--vt-ease-entrada) both;
	}

	.vt-conquista.esta-entrando .vt-conquista__endereco {
		animation: vt-conquista-cresce 520ms 80ms var(--vt-ease-entrada) both;
	}

	.vt-conquista.esta-entrando .vt-conquista__titulo,
	.vt-conquista.esta-entrando .vt-conquista__apoio,
	.vt-conquista.esta-entrando .vt-comecar__enviar {
		animation: vt-conquista-sobe 420ms 260ms var(--vt-ease-entrada) both;
	}

	/*
	 * O brilho: um halo de menta que abre atrás do endereço e se apaga. É a
	 * única coisa perto de "efeito" na tela, dura menos de um segundo e não
	 * deixa resíduo — o oposto de partícula na tela inteira.
	 */
	.vt-conquista.esta-entrando .vt-conquista__endereco::before {
		content: "";
		position: absolute;
		inset: -30% -10%;
		z-index: -1;
		border-radius: var(--vt-radius-full);
		background: radial-gradient(closest-side, color-mix(in srgb, var(--vt-mint) 28%, transparent), transparent);
		animation: vt-conquista-halo 900ms 80ms var(--vt-ease-entrada) both;
	}

	@keyframes vt-conquista-sobe {
		from { opacity: 0; transform: translateY(8px); }
	}

	@keyframes vt-conquista-cresce {
		from { opacity: 0; transform: translateY(10px) scale(0.94); }
	}

	@keyframes vt-conquista-halo {
		from { opacity: 0; transform: scale(0.6); }
		45%  { opacity: 1; }
		to   { opacity: 0; transform: scale(1.1); }
	}

	/* O formulário sai antes de a conquista entrar: some, não pisca. */
	.vt-comecar__form.esta-saindo {
		opacity: 0;
		transform: translateY(-6px);
		transition:
			opacity var(--vt-dur-rapida) var(--vt-ease-transf),
			transform var(--vt-dur-rapida) var(--vt-ease-transf);
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-conquista.esta-entrando .vt-conquista__selo,
		.vt-conquista.esta-entrando .vt-conquista__endereco,
		.vt-conquista.esta-entrando .vt-conquista__endereco::before,
		.vt-conquista.esta-entrando .vt-conquista__titulo,
		.vt-conquista.esta-entrando .vt-conquista__apoio,
		.vt-conquista.esta-entrando .vt-comecar__enviar {
			animation: none;
		}

		.vt-comecar__form.esta-saindo { transition: none; }
	}

	/*
	 * ── o estado do `@`, que é convite e não validação ──────────────────
	 *
	 * O cliente escreveu a frase — "Este @ está disponível e pode ser seu!" — e
	 * a primeira entrega a pôs em 13 px cinza-esverdeado, no lugar em que as
	 * folhas do sistema desenham erro de campo. Aqui ela é uma linha com marca,
	 * cor e corpo de texto: quem tem uma boa notícia não sussurra.
	 */
	.vt-campo__estado {
		display: flex;
		align-items: center;
		gap: var(--vt-space-2);
		min-height: 1.75rem;
		margin: var(--vt-space-2) 0 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-campo__estado:empty {
		display: none;
	}

	.vt-campo__estado::before {
		content: "";
		flex: 0 0 auto;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: var(--vt-radius-full);
		background: currentColor;
		opacity: 0.5;
	}

	.vt-campo__estado[data-vt-estado="ok"] {
		color: var(--vt-estado-ok);
		font-weight: var(--vt-peso-medio);
	}

	/* A marca do "livre" é um ✓, e não um ponto: ela é a resposta, não o eco. */
	.vt-campo__estado[data-vt-estado="ok"]::before {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		opacity: 1;
		content: "✓";
		font-size: var(--vt-fs-base);
		line-height: 1;
	}

	.vt-campo__estado[data-vt-estado="erro"] {
		color: var(--vt-estado-erro);
	}

	.vt-campo__estado[data-vt-estado="buscando"]::before {
		animation: vt-estado-pulsa 900ms ease-in-out infinite;
	}

	@keyframes vt-estado-pulsa {
		50% { opacity: 0.15; }
	}

	@media (prefers-reduced-motion: reduce) {
		.vt-campo__estado[data-vt-estado="buscando"]::before { animation: none; }
	}

	/* O campo do `@` ganha corpo: é o que a tela veio pedir. */
	.vt-campo--arroba .vt-campo__entrada {
		font-size: var(--vt-fs-lg);
	}

	/*
	 * As sugestões de `@`. Só aparecem quando o endereço digitado é de outra
	 * pessoa, e vêm conferidas — por isso podem ser botões que preenchem o
	 * campo, e não texto para copiar à mão.
	 */
	.vt-sugestoes {
		margin: 0;
	}

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

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

	.vt-sugestoes__opcao {
		min-height: var(--vt-alvo-toque);
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-full);
		background: var(--vt-superficie-1);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		cursor: pointer;
		transition:
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			background var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-sugestoes__opcao:hover,
	.vt-sugestoes__opcao:focus-visible {
		border-color: var(--vt-interacao);
		background: var(--vt-realce);
	}

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

	/*
	 * ── a especialidade escolhida ───────────────────────────────────────
	 *
	 * A resposta da busca. Escolher some com o campo e mostra a palavra que vai
	 * para o ar — e o "trocar" ao lado, porque escolha sem volta é armadilha.
	 */
	.vt-escolhida {
		padding: var(--vt-space-4) var(--vt-space-5);
		border: 1px solid color-mix(in srgb, var(--vt-mint) 45%, transparent);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-escolhida__topo {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vt-space-2) var(--vt-space-4);
	}

	.vt-escolhida__nome {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-titulo);
	}

	.vt-escolhida__trocar {
		padding: 0;
		border: 0;
		background: none;
		color: var(--vt-interacao);
		font: inherit;
		font-size: var(--vt-fs-sm);
		text-decoration: underline;
		cursor: pointer;
	}

	.vt-escolhida .vt-esp__efeito {
		margin-top: var(--vt-space-3);
	}

	/*
	 * As duas linhas do item da busca: o nome e, ao lado, a área — que é o que
	 * desempata os parecidos e por onde muita gente procura ("ortopedia" antes
	 * de "ortopedista").
	 */
	.vt-ac__item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--vt-space-2);
	}

	.vt-ac__area {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-ac__item.esta-ativa .vt-ac__area {
		color: inherit;
		opacity: 0.75;
	}

	/*
	 * A alternativa dentro do vazio da busca: quem digitou e não achou já
	 * procurou, e é aqui que "não está na lista" deixa de convidar a pular a
	 * procura.
	 */
	.vt-ac__acao {
		width: 100%;
		margin-top: var(--vt-space-1);
		padding: var(--vt-space-2) var(--vt-space-3);
		border: 0;
		border-top: 1px solid var(--vt-linha);
		background: none;
		color: var(--vt-interacao);
		font: inherit;
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		text-align: left;
		cursor: pointer;
	}

	.vt-ac__acao:hover,
	.vt-ac__acao:focus-visible {
		background: var(--vt-realce);
	}

	/* A ajuda que vem ANTES do campo explica por que ele existe. */
	/*
	 * **Regra órfã desde 05/09/2026** — a ajuda que vinha antes do campo do
	 * pedido virou a tela de confirmação, um passo acima. Fica por enquanto
	 * porque o padrão "ajuda que precede o campo" é reutilizável e custa três
	 * linhas; some na primeira limpeza que varrer a folha.
	 */
	.vt-campo__ajuda--antes {
		margin: 0 0 var(--vt-space-2);
	}

	/*
	 * ── a última tela: o e-mail e o convite ao editor ───────────────────
	 *
	 * A caixa do e-mail só existe para quem não confirmou — confirmada, ela
	 * seria poluição. Ela é aviso, e não erro: o vTag pode ser enviado do mesmo
	 * jeito, e o texto diz isso.
	 */
	.vt-email {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0 0 var(--vt-space-5);
		padding: var(--vt-space-4) var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-left: 3px solid var(--vt-estado-alerta);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
	}

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

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

	.vt-email__estado {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	.vt-email__estado[data-vt-estado="ok"] {
		color: var(--vt-estado-ok);
	}

	.vt-email__estado[data-vt-estado="erro"] {
		color: var(--vt-estado-erro);
	}

	/*
	 * O convite ao editor. **Convite, e não saída de erro**: quem chegou aqui
	 * montou o essencial, e o que sobra é o que deixa o vTag bonito. Fica
	 * depois das ações, separado, para não disputar com o envio.
	 */
	.vt-alem {
		margin: var(--vt-space-8) 0 0;
		padding: var(--vt-space-5);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-1);
	}

	.vt-alem__titulo {
		margin: 0 0 var(--vt-space-2);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
	}

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

	.vt-alem__link {
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
	}

	.vt-alem__link::after {
		content: " →";
	}

	/* A conquista da última tela tem o mesmo `hidden` das outras peças. */
	.vt-comecar__caixa [hidden] {
		display: none;
	}

	/*
	 * ── as escolhas em primeira pessoa ──────────────────────────────────
	 *
	 * O tratamento deixou de ser um par de botões — "simples e travada", nas
	 * palavras do cliente — e virou duas frases que a pessoa assina. Um clique
	 * responde e leva adiante: um "Continuar" depois de uma escolha de duas
	 * opções é um clique cobrado para não decidir nada.
	 *
	 * Lado a lado quando cabe, porque aqui as duas opções são simétricas e
	 * curtas — o contrário da tela do tipo, em que a segunda opção é a menos
	 * comum e não deve ganhar meia tela por acidente de grade.
	 */
	@media (min-width: 40rem) {
		.vt-comecar__escolhas--duplas {
			grid-template-columns: 1fr 1fr;
			align-items: stretch;
		}
	}

	.vt-comecar__opcao--frase {
		gap: 0;
		padding: var(--vt-space-5);
	}

	.vt-comecar__opcao-pronome {
		margin-top: 2px;
		color: var(--vt-mint);
		font-size: var(--vt-fs-xs);
		font-weight: var(--vt-peso-medio);
		letter-spacing: var(--vt-track-micro);
	}

	.vt-comecar__opcao--frase .vt-comecar__opcao-texto {
		margin-top: var(--vt-space-3);
		padding-top: var(--vt-space-3);
		border-top: 1px solid var(--vt-linha);
	}

	/* Quem volta a esta tela vê o que respondeu — sem parecer desabilitado. */
	.vt-comecar__opcao.esta-escolhida {
		border-color: color-mix(in srgb, var(--vt-mint) 55%, transparent);
		box-shadow: var(--vt-sombra-md);
	}

	/*
	 * ── ações e rodapé da entrada ───────────────────────────────────────
	 */

	/*
	 * A ação primária da entrada tem corpo: ela é o gesto da tela, e competia
	 * em tamanho com o link de "deixar para depois".
	 */
	.vt-acao--grande {
		min-height: 3rem;
		padding-inline: var(--vt-space-6);
		font-size: var(--vt-fs-base);
	}

	.vt-acao--grande.esta-ocupado {
		opacity: 0.7;
		cursor: progress;
	}

	.vt-comecar__nota--calma {
		color: var(--vt-texto-fraco);
	}

	/*
	 * Só a margem de BAIXO é zerada. Zerando as duas, o botão perdia o vão que
	 * `> * + *` dá e colava na última linha de campos.
	 */
	.vt-comecar__enviar {
		margin-bottom: 0;
	}

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

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

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

	/*
	 * ── a linha de ações do passo ───────────────────────────────────────
	 *
	 * **A saída do passo é um controle, e não uma nota de rodapé.** "Informo
	 * depois", "não uso agenda on-line" e "na verdade, gerencio uma clínica"
	 * decidem para onde a pessoa vai, e estavam com a aparência de "esse link
	 * pode ser ignorado" — o diagnóstico é do cliente, e ele está certo.
	 *
	 * Lado a lado da ação primária, com a hierarquia dizendo qual é qual: a
	 * discreta continua discreta, mas com corpo de botão e área de toque de
	 * botão.
	 */
	.vt-comecar__acoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-3) var(--vt-space-4);
		margin-bottom: 0;
	}

	/*
	 * **A saída do passo tem forma de botão AQUI, e só aqui.**
	 *
	 * `.vt-acao--discreta` é, no resto da área da conta, um botão de texto — e
	 * é assim que ela deve continuar lá. Nesta linha ela é a segunda opção de
	 * uma decisão de navegação, e o cliente apontou justamente que ela parecia
	 * ignorável. Contorno contra preenchido mantém a hierarquia sem sussurrar:
	 * dá para ver qual é a ação da tela e, ainda assim, que a outra existe.
	 */
	.vt-corpo-conta .vt-comecar__acoes .vt-acao--discreta {
		min-height: 3rem;
		padding: var(--vt-space-3) var(--vt-space-5);
		border: 1px solid var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		font-weight: var(--vt-peso-medio);
		text-decoration: none;
	}

	.vt-corpo-conta .vt-comecar__acoes .vt-acao--discreta:hover,
	.vt-corpo-conta .vt-comecar__acoes .vt-acao--discreta:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	/*
	 * ── a navegação do assistente ───────────────────────────────────────
	 *
	 * Voltar e sair são a moldura, não o conteúdo: ficam depois de uma linha,
	 * um em cada ponta, com o mesmo peso — nenhum dos dois disputa com a ação
	 * do passo, e nenhum dos dois se esconde.
	 */
	.vt-comecar__nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-2) var(--vt-space-4);
		margin-top: var(--vt-space-8);
		padding-top: var(--vt-space-4);
		border-top: 1px solid var(--vt-linha);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	/* Sozinha na barra, a saída fica na direita, que é o lugar dela. */
	.vt-comecar__nav > .vt-comecar__saida:only-child {
		margin-left: auto;
	}

	/*
	 * **Os dois são OPÇÕES, e um link sublinhado não é uma opção.**
	 *
	 * O cliente escreveu a régua em 05/09/2026, olhando o "deixar para depois"
	 * da primeira tela: *"botões como texto (link) são invisíveis em
	 * interfaces… minha sugestão é mantê-lo com baixa atenção, mas demonstrá-lo
	 * como uma opção e não como um link que está lá por burocracia. 'Termos de
	 * uso', 'política de privacidade' sim são acessos que merecem esse
	 * tratamento: o usuário acha, se ele procurar"*.
	 *
	 * A distinção é essa: um link de rodapé é um ACESSO — quem precisa procura.
	 * "Voltar um passo" e "deixar para depois" são DECISÕES da tela, e uma
	 * decisão precisa ser vista sem ser procurada.
	 *
	 * Contorno sem preenchimento, altura de alvo de toque, sem sublinhado: a
	 * hierarquia continua muito abaixo da ação primária — que é preenchida e
	 * grande, num bloco acima —, e ainda assim se reconhece como algo em que se
	 * clica. É o mesmo tratamento que a linha de ações do passo já dá às saídas
	 * ("informo depois"), e que o cliente aprovou lá.
	 *
	 * **E é o que deixou o "na verdade, gerencio uma clínica" sair do passo do
	 * `@`:** com o voltar visível, aquele botão virou a segunda porta para a
	 * mesma sala.
	 */
	.vt-comecar__voltar,
	.vt-comecar__saida a {
		display: inline-flex;
		align-items: center;
		min-height: var(--vt-alvo-toque);
		margin: 0;
		padding: var(--vt-space-2) var(--vt-space-4);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		text-decoration: none;
	}

	.vt-comecar__saida {
		display: inline-flex;
		align-items: center;
		margin: 0;
	}

	.vt-comecar__voltar::before {
		content: "←";
		margin-right: var(--vt-space-2);
	}

	.vt-comecar__voltar:hover,
	.vt-comecar__voltar:focus-visible,
	.vt-comecar__saida a:hover,
	.vt-comecar__saida a:focus-visible {
		border-color: var(--vt-interacao);
		color: var(--vt-texto-forte);
	}

	/*
	 * ── o que já está resolvido ─────────────────────────────────────────
	 *
	 * A confirmação do que já virou botão no vTag. Era uma linha de apoio em
	 * corpo miúdo — "a informação mais valiosa da tela sem destaque nenhum",
	 * nas palavras do cliente. Uma linha por canal, com a marca de feito na
	 * margem.
	 */
	/*
	 * **A margem de cima existe porque ela vem logo abaixo do `<h1>`**, que tem
	 * `margin: 0` — *"o box que informa o celular/telefone está colado no
	 * título"*, cliente em 05/09/2026. Nas outras telas quem dá esse respiro é
	 * o parágrafo de apoio; nesta a lista vem antes dele.
	 */
	.vt-feito {
		display: grid;
		gap: var(--vt-space-3);
		margin: var(--vt-space-6) 0;
		padding: 0;
		list-style: none;
	}

	.vt-feito__item {
		display: grid;
		gap: 2px;
		padding: var(--vt-space-3) var(--vt-space-4) var(--vt-space-3) var(--vt-space-8);
		border: 1px solid color-mix(in srgb, var(--vt-mint) 40%, transparent);
		border-radius: var(--vt-radius-md);
		background: var(--vt-superficie-1);
		position: relative;
	}

	.vt-feito__item::before {
		content: "✓";
		position: absolute;
		inset: var(--vt-space-3) auto auto var(--vt-space-4);
		color: var(--vt-mint);
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
		line-height: 1.3;
	}

	.vt-feito__nome {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-base);
		font-weight: var(--vt-peso-titulo);
	}

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

	/*
	 * O cartão de efeito é o do editor, e o `hidden` precisa vencer o `flex`
	 * declarado lá. É a quarta vez no projeto que `display` de autor passa por
	 * cima de `[hidden]`; a regra vale para todo elemento que nasce escondido.
	 */
	.vt-esp__efeito[data-vt-comecar-efeito][hidden],
	.vt-sugestoes[hidden],
	.vt-comecar__form[hidden],
	.vt-comecar__form [hidden] {
		display: none;
	}
}