/*
 * Páginas de conteúdo — catálogo, casos, nicho e páginas internas.
 *
 * As três compartilham o mesmo esqueleto: cabeçalho de arquivo, grade,
 * estado vazio, hero que troca de cor, corpo com lateral fixa e trilha.
 * Separar isso em três folhas faria a mesma regra existir em três lugares,
 * que é pior do que a folha ser um pouco maior.
 *
 * A ideia que governa: catálogo de peças, não grade de recurso. Rótulo em
 * mono, alinhamento tabular, sensação de número de peça. É o que separa isto
 * de qualquer SaaS roxo — e SaaS roxo com gradiente é exatamente o visual que
 * denuncia layout feito por IA.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

/* --------------------------------------------------------------------------
 * Cabeçalho de arquivo
 * ----------------------------------------------------------------------- */

.vlr-cab-arquivo {
	padding-block: var(--vlr-e8) var(--vlr-e6);
	border-bottom: 1px solid var(--vlr-borda);
}

/*
 * A grade vem logo depois do cabeçalho, então usa um respiro menor que o
 * padrão de seção. Somar o padding dos dois abria mais de 150px de vão morto
 * entre o filtro e o primeiro card — espaço não é ritmo, é buraco.
 */
.vlr-cab-arquivo + .vlr-secao {
	padding-top: var(--vlr-e6);
}

.vlr-cab-arquivo h1 {
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	margin-bottom: var(--vlr-e4);
}

.vlr-cab-arquivo p {
	font-size: 1.06rem;
}

/* --------------------------------------------------------------------------
 * Filtro por nicho
 *
 * Fica na horizontal e rola no celular, sem quebrar linha.
 * ----------------------------------------------------------------------- */
.vlr-filtro {
	display: flex;
	gap: var(--vlr-e2);
	margin-top: var(--vlr-e6);
	overflow-x: auto;
	padding-bottom: var(--vlr-e2);
	scrollbar-width: thin;
}

.vlr-filtro a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--vlr-dado);
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
	text-decoration: none;
	padding: 9px var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 999px;
	min-height: 38px;
	transition: border-color var(--vlr-rapido) var(--vlr-curva), color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-filtro a:hover {
	border-color: var(--vlr-roxo);
	color: var(--vlr-roxo);
}

.vlr-filtro a[aria-current="page"] {
	background: var(--vlr-roxo);
	border-color: var(--vlr-roxo);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Grade do catálogo
 * ----------------------------------------------------------------------- */

.vlr-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: var(--vlr-e5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Botão que fecha uma seção de grade. Seletor de irmão adjacente em vez de uma
 * margem no próprio `.vlr-btn`: o botão aparece em cabeçalho, em hero e em
 * rodapé de seção, e uma margem global empurraria os três.
 */
.vlr-grade + .vlr-btn {
	margin-top: var(--vlr-e6);
}

/* --------------------------------------------------------------------------
 * Card de sistema
 *
 * Assimétrico de propósito: placa no alto à esquerda, nome e nicho alinhados
 * à esquerda, estado como linha de especificação embaixo. Pilha centralizada
 * é o que faz seis cards parecerem o mesmo card seis vezes.
 * ----------------------------------------------------------------------- */

.vlr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e4);
	padding: var(--vlr-e5);
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	transition: border-color var(--vlr-medio) var(--vlr-curva), transform var(--vlr-medio) var(--vlr-curva), box-shadow var(--vlr-medio) var(--vlr-curva);
	height: 100%;
}

/*
 * A cor do produto entra como filete no topo, não como fundo. Fundo colorido
 * em card obrigaria a recalcular contraste do texto para cada produto, e é aí
 * que nasce texto branco sobre laranja.
 */
.vlr-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--vlr-produto);
	border-radius: var(--vlr-raio) var(--vlr-raio) 0 0;
}

.vlr-card:hover {
	border-color: var(--vlr-produto);
	transform: translateY(-2px);
	box-shadow: var(--vlr-sombra-2);
}

/* O card inteiro é clicável, mas só o nome é o link de verdade — isso
   mantém a leitura do leitor de tela limpa, com um link por card. */
.vlr-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--vlr-raio);
}

.vlr-card__topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vlr-e4);
}

.vlr-card .vlr-placa {
	width: 52px;
}

.vlr-card__nicho {
	font-family: var(--vlr-dado);
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
	text-align: right;
	line-height: 1.5;
}

.vlr-card h2,
.vlr-card h3 {
	font-size: 1.4rem;
	line-height: 1.1;
	margin: 0;
}

.vlr-card h2 a,
.vlr-card h3 a {
	color: var(--vlr-tinta);
	text-decoration: none;
}

.vlr-card:hover h2 a,
.vlr-card:hover h3 a {
	color: var(--vlr-produto);
}

.vlr-card__resumo {
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--vlr-tinta-fraca);
	margin: 0;
	max-width: none;
}

/*
 * A prova no card. Filete na cor do produto à esquerda, número grande em
 * Amberly, rótulo e cliente em mono. É o bloco que faz um sistema sem demo
 * ter o que mostrar na grade.
 */
.vlr-card__prova {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 2px var(--vlr-e3);
	margin: 0;
	max-width: none;
	padding-left: var(--vlr-e4);
	border-left: 3px solid var(--vlr-produto);
}

.vlr-card__prova b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--vlr-tinta);
	font-variant-numeric: tabular-nums;
	grid-row: span 2;
}

.vlr-card__prova span {
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--vlr-tinta);
}

.vlr-card__prova em {
	font-family: var(--vlr-dado);
	font-style: normal;
	font-size: 0.66rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

/* Linha de especificação. Empurrada para o rodapé do card com margin-top
   auto, então cards de altura diferente alinham o estado na mesma base. */
/*
 * Duas fileiras, não uma.
 *
 * Estado, CTA e contagem de módulos disputavam uma linha só, e o CTA sempre
 * perdia: "Conhecer solução" quebrava no meio, sublinhado, atravessado pela
 * borda tracejada. O rodapé de um card de vitrine é onde mora a ação — ele não
 * pode ser a parte espremida.
 *
 * Agora o estado e a contagem dividem a primeira fileira, que é metadado, e o
 * CTA fica sozinho na segunda.
 */
.vlr-card__spec {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--vlr-e3);
	margin-top: auto;
	padding-top: var(--vlr-e4);
	border-top: 1px dashed var(--vlr-borda);
}

/*
 * Só existe quando o estado comercial permite: disponível e demo têm botão,
 * em desenvolvimento não tem. A ausência é regra, não esquecimento — ver
 * CPT::cta_do_estado().
 *
 * Era um link sublinhado que ficava laranja no hover. Laranja sobre branco dá
 * 2,63:1, abaixo do mínimo de 4,5:1 — e num CTA, que é o elemento que precisa
 * ser lido.
 *
 * Virou pílula, e o texto é TINTA, não a cor do produto. A cor do produto no
 * texto sobre um fundo dessa mesma cor a 12% depende da cor: no roxo passa, no
 * dourado do Anilha o botão sumiu dentro do próprio fundo. Tinta sobre um
 * fundo claro passa com qualquer produto do catálogo, inclusive os que o
 * Demóstenes cadastrar depois. A cor continua presente — no fundo, na placa e
 * na faixa do topo do card.
 */
.vlr-card__cta {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding-inline: var(--vlr-e4);
	border-radius: 999px;
	background: color-mix(in srgb, var(--vlr-produto) 16%, transparent);
	color: var(--vlr-tinta);
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 0.78rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-card__cta::after {
	content: "→";
	transition: transform var(--vlr-rapido) var(--vlr-curva);
}

.vlr-card__cta:hover {
	background: color-mix(in srgb, var(--vlr-produto) 26%, transparent);
}

.vlr-card__cta:hover::after {
	transform: translateX(3px);
}

/* A contagem é metadado do lado direito da primeira fileira. */
.vlr-card__spec .vlr-card__modulos {
	justify-self: end;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.vlr-card__cta,
	.vlr-card__cta::after {
		transition-duration: 0.01ms;
	}
}

.vlr-card__modulos {
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

/* Estado vazio do arquivo. Ensina o que fazer, não só avisa que não tem nada. */
.vlr-vazio {
	border: 1px dashed var(--vlr-borda);
	border-radius: var(--vlr-raio);
	background: var(--vlr-superficie);
	padding: var(--vlr-e8) var(--vlr-e5);
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Capacidades já construídas
 *
 * Eram seis bullets minúsculos numa lista de duas colunas — o bloco que o §13
 * chama de importante, porque liga o serviço mais simples ao mais complexo,
 * era o mais fraco da página.
 *
 * Agora é uma grade de pastilhas com a contagem real embaixo do nome. O número
 * é o que muda a leitura: "Agendamento" é promessa, "Agendamento · 2 projetos"
 * é prova.
 * ----------------------------------------------------------------------- */

.vlr-capacidades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--vlr-e3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-capacidade {
	display: grid;
	gap: 3px;
	padding: var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 12px;
	background: var(--vlr-superficie);
}

.vlr-capacidade__nome {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1.15;
	color: var(--vlr-tinta);
}

.vlr-capacidade__n {
	font-family: var(--vlr-dado);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

/*
 * Na página de serviço a pastilha vira link quando existe projeto para mostrar,
 * e continua texto quando não existe.
 *
 * A distinção é a informação: clicar leva ao arquivo da funcionalidade, e mandar
 * o visitante para um arquivo vazio é pior do que não oferecer o clique. Por
 * isso o link só existe com contagem maior que zero, e o hover confirma que há
 * algo do outro lado.
 */
/*
 * Na página de serviço a grade é de três colunas fixas, não `auto-fill`.
 *
 * Com `minmax(190px, 1fr)` num container de 1052px cabem cinco colunas, e os
 * seis itens de Sistemas Web e de SaaS caíam 5+1 — o sexto sozinho numa segunda
 * fileira com quatro quintos de vão vazio. Três colunas fecham seis em duas
 * fileiras cheias e cinco em 3+2, que lê como resto de grade e não como sobra.
 *
 * A Home continua no `auto-fill`: lá são até nove termos, e três colunas
 * deixariam a lista alta demais.
 */
.vlr-capacidades--servico {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 62rem) {
	.vlr-capacidades--servico {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.vlr-capacidades--servico {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * O CARTÃO INTEIRO É O ALVO, e não só a linha do nome.
 *
 * O link media 309x18px dentro de um cartão de 343x73. A WCAG 2.5.8 pede
 * 24x24, e 18 de altura reprova — mas o problema real é anterior à norma: o
 * cartão já reage ao apontar, com borda e elevação, então ele PARECE clicável
 * inteiro. Quem clica no meio dele, onde não há texto, não acontece nada.
 * Promessa visual que a área de clique não cumpre.
 *
 * O `::after` esticado resolve os dois de uma vez: o alvo passa a ser o cartão
 * (73px de altura, três vezes o mínimo) e o clique passa a funcionar onde a
 * aparência já dizia que funcionaria. Mesmo padrão que `.vlr-card__link` e
 * `.vlr-caso-card__link` já usam — é a linguagem da casa, não invenção nova.
 *
 * `position: relative` no cartão é obrigatório: sem ele o `inset: 0` se mediria
 * contra a página e o link cobriria a tela toda.
 */
a.vlr-capacidade__nome {
	text-decoration: none;
}

.vlr-capacidade:has( a.vlr-capacidade__nome ) {
	position: relative;
}

a.vlr-capacidade__nome::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.vlr-capacidade:has( a.vlr-capacidade__nome ) {
	transition: border-color var(--vlr-rapido) var(--vlr-curva), transform var(--vlr-rapido) var(--vlr-curva);
}

.vlr-capacidade:has( a.vlr-capacidade__nome:hover ),
.vlr-capacidade:has( a.vlr-capacidade__nome:focus-visible ) {
	border-color: var(--vlr-roxo);
	transform: translateY(-2px);
}

.vlr-capacidade:has( a.vlr-capacidade__nome:hover ) a.vlr-capacidade__nome {
	color: var(--vlr-roxo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vlr-capacidade:has( a.vlr-capacidade__nome:hover ),
	.vlr-capacidade:has( a.vlr-capacidade__nome:focus-visible ) {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * Busca, resultado e 404
 *
 * As três telas compartilham o esqueleto de arquivo — cabeçalho, seção, estado
 * vazio — porque são a mesma situação vista de ângulos diferentes: alguém
 * procurando algo que talvez não esteja aqui.
 * ----------------------------------------------------------------------- */

.vlr-busca {
	display: grid;
	gap: var(--vlr-e2);
	margin-block-end: var(--vlr-e8);
	max-inline-size: 620px;
}

.vlr-busca__rotulo {
	font-family: var(--vlr-dado);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

/*
 * Campo e botão na mesma linha, e o botão não encolhe.
 *
 * `flex: none` no botão: sem isso "Buscar" perde a disputa de largura com o
 * campo em tela estreita e o rótulo quebra no meio.
 */
.vlr-busca__linha {
	display: flex;
	gap: var(--vlr-e2);
}

.vlr-busca__linha .vlr-btn {
	flex: none;
}

.vlr-busca__campo {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--vlr-corpo);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--vlr-tinta);
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	padding: 12px 14px;
	/* Mesma altura mínima do botão, senão os dois ficam desalinhados por 2px. */
	min-block-size: 48px;
	transition: border-color var(--vlr-rapido) var(--vlr-curva), box-shadow var(--vlr-rapido) var(--vlr-curva);
}

.vlr-busca__campo:focus {
	outline: none;
	border-color: var(--vlr-roxo);
	box-shadow: 0 0 0 3px rgb(89 39 132 / 14%);
}

.vlr-busca__campo:focus-visible {
	outline: 2px solid var(--vlr-roxo);
	outline-offset: 1px;
}

/* ---- Resultado agrupado por tipo ---- */

.vlr-grupo-busca + .vlr-grupo-busca {
	margin-block-start: var(--vlr-e8);
}

/*
 * O nome do grupo é o que faz a busca respeitar o §12: o visitante sabe se está
 * vendo trabalho feito para cliente ou produto à venda antes de clicar.
 */
.vlr-grupo-busca__nome {
	display: flex;
	align-items: center;
	gap: var(--vlr-e3);
	padding-block-end: var(--vlr-e3);
	margin-block-end: var(--vlr-e5);
	border-block-end: 1px solid var(--vlr-borda);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.vlr-grupo-busca__n {
	font-family: var(--vlr-dado);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

/*
 * Lista densa, não vitrine.
 *
 * Reaproveitar o card de case aqui foi cogitado e descartado: aquele card tem
 * tela, filete de cor e lista de funcionalidades, e seis resultados dele viram
 * seis rolagens. Resultado de busca se varre; vitrine se contempla.
 */
.vlr-resultados {
	display: grid;
	gap: var(--vlr-e5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-resultado {
	display: grid;
	gap: 5px;
	padding-inline-start: var(--vlr-e4);
	border-inline-start: 2px solid var(--vlr-borda);
	transition: border-color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-resultado:hover {
	border-inline-start-color: var(--vlr-roxo);
}

.vlr-resultado__nome {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.2;
}

.vlr-resultado__nome a {
	color: var(--vlr-tinta);
}

.vlr-resultado__nome a:hover {
	color: var(--vlr-roxo);
}

.vlr-resultado__meta {
	margin: 0;
	font-size: 0.7rem;
}

.vlr-resultado__resumo {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--vlr-tinta-fraca);
}

/* ---- Estado vazio e 404 ---- */

/*
 * As duas telas novas alinham à esquerda, e não ao centro do `.vlr-vazio`.
 *
 * O componente base é centralizado porque nasceu no arquivo de cases, onde é o
 * único conteúdo da tela. Aqui ele fica embaixo de um cabeçalho alinhado à
 * esquerda, e bloco centralizado sob título alinhado lê como duas páginas
 * coladas. As duas usam o mesmo alinhamento porque são vizinhas: quem cai no
 * 404, busca, não acha, e vê a mesma caixa mudar de eixo, nota.
 */
.vlr-vazio--busca,
.vlr-vazio--404 {
	padding-block: var(--vlr-e7) 0;
	text-align: start;
}

.vlr-vazio--busca h2,
.vlr-vazio--404 h2 {
	margin-inline: 0;
}

.vlr-vazio--busca p,
.vlr-vazio--404 p {
	margin-inline: 0;
}

/*
 * Os quatro caminhos. Quatro em uma fileira no desktop, dois no tablet, um no
 * celular: nenhuma dessas configurações deixa célula vazia.
 */
.vlr-atalhos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vlr-e3);
	list-style: none;
	margin-block-start: var(--vlr-e6);
	padding: 0;
}

.vlr-atalho {
	display: grid;
	gap: 6px;
	height: 100%;
	padding: var(--vlr-e5) var(--vlr-e4);
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	text-decoration: none;
	transition: border-color var(--vlr-rapido) var(--vlr-curva), transform var(--vlr-rapido) var(--vlr-curva), box-shadow var(--vlr-rapido) var(--vlr-curva);
}

.vlr-atalho:hover,
.vlr-atalho:focus-visible {
	border-color: var(--vlr-roxo);
	transform: translateY(-2px);
	box-shadow: var(--vlr-sombra-2);
}

.vlr-atalho b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1.15;
	color: var(--vlr-tinta);
}

.vlr-atalho:hover b {
	color: var(--vlr-roxo);
}

.vlr-atalho span {
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--vlr-tinta-fraca);
}

.vlr-404__zap {
	margin-block-start: var(--vlr-e7);
	padding-block-start: var(--vlr-e5);
	border-block-start: 1px solid var(--vlr-borda);
	font-size: 0.95rem;
	color: var(--vlr-tinta-fraca);
	max-inline-size: none;
}

@media (max-width: 62rem) {
	.vlr-atalhos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.vlr-atalhos {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.vlr-vazio p {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Página de produto
 *
 * Aqui o roxo recua e a cor do produto lidera. Seis produtos geram seis
 * páginas com temperatura diferente, a partir de um sistema só.
 * ----------------------------------------------------------------------- */

.vlr-produto-hero {
	background: var(--vlr-produto);
	color: var(--vlr-produto-tinta);
	padding-block: var(--vlr-e8) var(--vlr-e9);
}

.vlr-produto-hero__grade {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--vlr-e5) var(--vlr-e6);
	align-items: start;
}

.vlr-produto-hero .vlr-placa {
	width: 96px;
	/* Sobre o fundo da própria cor, a placa inverte para não sumir. */
	background: var(--vlr-produto-tinta);
	color: var(--vlr-produto);
}

.vlr-produto-hero h1 {
	font-size: clamp(2.2rem, 6vw, 3.8rem);
	margin-bottom: var(--vlr-e4);
	color: inherit;
}

.vlr-produto-hero__resumo {
	font-size: clamp(1.02rem, 1.9vw, 1.22rem);
	line-height: 1.5;
	max-width: 54ch;
	margin-bottom: var(--vlr-e6);
	opacity: 0.94;
}

.vlr-produto-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vlr-e3) var(--vlr-e5);
	margin-bottom: var(--vlr-e6);
}

.vlr-produto-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e3);
}

/*
 * Contraste no hero do produto. O tema da página é a cor do produto, que pode
 * ser clara (laranja, ouro) ou escura (roxo, verde). O PHP decide qual das
 * duas classes entra, medindo a luminância — nunca chutando. É a regra do
 * manual §03 aplicada de forma automática, para nunca nascer texto branco
 * sobre laranja.
 */
.vlr-produto-hero--claro {
	--vlr-produto-tinta: var(--vlr-tinta);
}

.vlr-produto-hero--claro .vlr-btn {
	background: var(--vlr-tinta);
	border-color: var(--vlr-tinta);
	color: #fff;
}

.vlr-produto-hero--claro .vlr-btn:hover {
	background: transparent;
	color: var(--vlr-tinta);
}

.vlr-produto-hero--claro .vlr-btn--vazado {
	background: transparent;
	color: var(--vlr-tinta);
}

.vlr-produto-hero--claro .vlr-btn--vazado:hover {
	background: var(--vlr-tinta);
	color: #fff;
}

/*
 * Metadado no hero do produto: tinta cheia, sem opacidade.
 *
 * Era branco a 82%% e tinta a 78%%, para dar hierarquia. Transparência sobre
 * uma cor que o Demóstenes escolhe no painel é aposta: sobre o roxo os 82%%
 * davam 7,43:1, mas sobre o #C2410C do FORJA caíam para 3,97:1 — reprovado, e
 * bem no rótulo que avisa que o produto ainda está em desenvolvimento.
 *
 * A hierarquia continua existindo; ela vem do tamanho e da mono em caixa alta,
 * que é de onde deveria vir desde o começo. Com tinta cheia o pior caso do
 * catálogo atual passa a 5,18:1.
 */
.vlr-produto-hero--claro .vlr-estado,
.vlr-produto-hero--claro .vlr-dado {
	color: var(--vlr-produto-tinta);
}

.vlr-produto-hero--escuro .vlr-btn {
	background: #fff;
	border-color: #fff;
	color: var(--vlr-produto);
}

.vlr-produto-hero--escuro .vlr-btn:hover {
	background: transparent;
	color: #fff;
}

.vlr-produto-hero--escuro .vlr-btn--vazado {
	background: transparent;
	color: #fff;
}

.vlr-produto-hero--escuro .vlr-btn--vazado:hover {
	background: #fff;
	color: var(--vlr-produto);
}

.vlr-produto-hero--escuro .vlr-estado,
.vlr-produto-hero--escuro .vlr-dado {
	color: var(--vlr-produto-tinta);
}

/* Corpo da página de produto. */
.vlr-produto-corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--vlr-e9) var(--vlr-e8);
	align-items: start;
	/* Menor no topo: o corpo vem logo depois da trilha, e 104px ali viram
	   buraco em vez de respiro. */
	padding-block: var(--vlr-e7) var(--vlr-e9);
}

.vlr-modulos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--vlr-borda);
}

/*
 * Módulo como linha de tabela, com número. Lista de bolinha some na leitura;
 * linha numerada dá a sensação de inventário, que é a ideia do catálogo.
 */
.vlr-modulos li {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: var(--vlr-e4);
	align-items: baseline;
	padding-block: var(--vlr-e4);
	border-bottom: 1px solid var(--vlr-borda);
	counter-increment: vlr-mod;
}

/*
 * O número fica em tinta-fraca, não na cor do produto. Conteúdo gerado por
 * CSS conta como texto para o leitor de tela e para o axe, e cor de produto
 * clara — o ouro do Anilha dá 2,4:1 — reprova em 11px. A sensação de
 * inventário vem da mono com zero à esquerda, não da cor.
 */
.vlr-modulos li::before {
	content: counter(vlr-mod, decimal-leading-zero);
	font-family: var(--vlr-dado);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

.vlr-modulos {
	counter-reset: vlr-mod;
}

.vlr-lateral {
	position: sticky;
	top: 92px;
	display: grid;
	gap: var(--vlr-e5);
}

.vlr-quadro {
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	background: var(--vlr-superficie);
	padding: var(--vlr-e5);
}

.vlr-quadro h2,
.vlr-quadro h3 {
	font-size: 1.05rem;
	margin-bottom: var(--vlr-e3);
}

.vlr-quadro p {
	font-size: 0.94rem;
	line-height: 1.55;
}

.vlr-quadro .vlr-btn {
	width: 100%;
	justify-content: center;
	margin-top: var(--vlr-e4);
}

/* Caso ligado ao produto. É a prova que transforma página de produto em
   página de venda, então recebe destaque, não uma nota de rodapé. */
.vlr-prova {
	display: block;
	border: 1px solid var(--vlr-borda);
	border-left: 3px solid var(--vlr-produto);
	border-radius: var(--vlr-raio);
	padding: var(--vlr-e5);
	text-decoration: none;
	color: inherit;
	background: var(--vlr-papel);
	transition: border-color var(--vlr-rapido) var(--vlr-curva), box-shadow var(--vlr-rapido) var(--vlr-curva);
}

.vlr-prova:hover {
	box-shadow: var(--vlr-sombra-2);
	color: inherit;
}

.vlr-prova h2,
.vlr-prova h3 {
	font-size: 1.15rem;
	margin-bottom: var(--vlr-e2);
}

.vlr-prova__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e5);
	margin-top: var(--vlr-e4);
	padding: 0;
	list-style: none;
}

.vlr-prova__numeros div {
	display: grid;
	gap: 2px;
}

.vlr-prova__numeros b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--vlr-produto);
	font-variant-numeric: tabular-nums;
}

.vlr-prova__numeros span {
	font-family: var(--vlr-dado);
	font-size: 0.66rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

/* Trilha de navegação. */
.vlr-trilha {
	padding-block: var(--vlr-e4);
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vlr-trilha ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vlr-e2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-trilha li + li::before {
	content: "/";
	margin-right: var(--vlr-e2);
	color: var(--vlr-cinza);
}

/*
 * O alvo de toque tinha 14px de altura — a altura da letra, sem nada em volta.
 * No celular, "Início" e "Cases" ficam colados um do outro e o dedo não acerta.
 *
 * O padding vertical leva o alvo a 30px sem mexer no ritmo da linha, porque o
 * `ol` já é flex e o `li` acomoda a altura maior sem empurrar o resto.
 */
.vlr-trilha a {
	display: inline-block;
	padding-block: var(--vlr-e2);
	color: var(--vlr-tinta-fraca);
	text-decoration: none;
}

.vlr-trilha a:hover {
	color: var(--vlr-roxo);
}

.vlr-trilha [aria-current="page"] {
	color: var(--vlr-tinta);
}

@media (max-width: 56.25rem) {
	.vlr-produto-corpo {
		grid-template-columns: 1fr;
		gap: var(--vlr-e7);
	}

	.vlr-lateral {
		position: static;
	}
}

@media (max-width: 40rem) {
	.vlr-produto-hero__grade {
		grid-template-columns: 1fr;
	}

	.vlr-produto-hero .vlr-placa {
		width: 68px;
	}

	.vlr-grade {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Casos
 *
 * Prova social com número, não galeria de imagem. O número vem antes do nome
 * do cliente na hierarquia visual: quem bate o olho precisa ler "18 meses no
 * ar" antes de ler "Chalés de Lençóis". Adjetivo nenhum faz esse trabalho.
 * ----------------------------------------------------------------------- */

.vlr-grade--casos {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/*
 * O card virou tela + texto. A borda esquerda colorida saiu: ela funcionava
 * quando o card era só tipografia, mas ao lado de um screenshot ela concorre
 * com a própria imagem e o card fica com dois pontos de cor brigando.
 * A cor do sistema continua no card, agora na pastilha sobre a tela.
 */
.vlr-caso-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	height: 100%;
}

.vlr-caso-card:hover,
.vlr-caso-card:focus-within {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--vlr-produto) 40%, var(--vlr-borda));
	box-shadow: 0 18px 36px -24px rgb(27 21 35 / 50%);
}

.vlr-caso-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* --------------------------------------------------------------------------
 * A tela
 * ----------------------------------------------------------------------- */

/*
 * `aspect-ratio` no contêiner e `cover` na imagem: a grade precisa de altura
 * previsível e os screenshots chegam com proporções diferentes (1000x458 e
 * 1000x481). Sem isto, uma tela 23px mais alta desalinha a fileira inteira.
 *
 * A altura reservada também segura o CLS — o espaço existe antes da imagem
 * carregar.
 */
.vlr-caso-card__tela {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--vlr-superficie);
	border-bottom: 1px solid var(--vlr-borda);
	overflow: hidden;
}

/*
 * `object-position: top` porque screenshot de site tem a informação em cima.
 * Centralizar cortaria o cabeçalho do projeto, que é o que identifica a tela.
 */
.vlr-caso-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease;
}

.vlr-caso-card:hover .vlr-caso-card__img {
	transform: scale(1.02);
}

/*
 * A pastilha do sistema flutua sobre a tela. Fundo com blur porque ela pousa
 * sobre um screenshot de conteúdo imprevisível: sem o fundo, o texto some em
 * cima de uma região clara da imagem.
 */
.vlr-caso-card__sistema {
	position: absolute;
	left: var(--vlr-e3);
	bottom: var(--vlr-e3);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 5px;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgb(27 21 35 / 18%);
	font-family: var(--vlr-dado);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta);
}

.vlr-caso-card__sistema .vlr-placa {
	width: 22px;
}

/* Sem tela, a pastilha volta a ser um item de linha no topo do texto. */
.vlr-caso-card__sistema--solto {
	position: static;
	padding: 0;
	background: none;
	backdrop-filter: none;
	box-shadow: none;
	color: var(--vlr-tinta-fraca);
	font-weight: 400;
}

.vlr-caso-card__sistema--solto .vlr-placa {
	width: 26px;
}

/* --------------------------------------------------------------------------
 * O texto
 * ----------------------------------------------------------------------- */

.vlr-caso-card__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e3);
	flex: 1;
	padding: var(--vlr-e5);
}

.vlr-caso-card__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vlr-e3);
	flex-wrap: wrap;
}

.vlr-caso-card__nome {
	font-size: 1.28rem;
	line-height: 1.12;
	margin: 0;
}

.vlr-caso-card__nome a {
	color: var(--vlr-tinta);
	text-decoration: none;
}

/*
 * O cliente encosta no nome do projeto, com o espaço menor que o do resto do
 * card: é legenda do título, não a próxima informação.
 */
.vlr-caso-card__cliente {
	margin: calc(var(--vlr-e3) * -1 + 2px) 0 0;
	max-width: none;
	font-family: var(--vlr-dado);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

.vlr-caso-card__resumo {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--vlr-tinta-fraca);
	margin: 0;
	max-width: none;
}

/*
 * Os números, quando existirem. O §19 proíbe inventar métrica, então este
 * bloco fica ausente na maior parte dos cases — e o card precisa ficar
 * inteiro sem ele. Por isso `margin-top: auto` e nada de altura fixa.
 */
.vlr-caso-card__mais {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e5);
	list-style: none;
	margin: auto 0 0;
	padding: var(--vlr-e4) 0 0;
	border-top: 1px dashed var(--vlr-borda);
}

.vlr-caso-card__mais li {
	display: grid;
	gap: 1px;
}

.vlr-caso-card__mais b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--vlr-produto);
	font-variant-numeric: tabular-nums;
}

.vlr-caso-card__mais span {
	font-family: var(--vlr-dado);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

@media (prefers-reduced-motion: reduce) {
	.vlr-caso-card,
	.vlr-caso-card__img {
		transition-duration: 0.01ms;
	}

	.vlr-caso-card:hover,
	.vlr-caso-card:focus-within {
		transform: none;
	}

	.vlr-caso-card:hover .vlr-caso-card__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * Hero do caso
 * ----------------------------------------------------------------------- */

.vlr-caso-hero {
	background: var(--vlr-produto);
	color: var(--vlr-produto-tinta);
	padding-block: var(--vlr-e8) var(--vlr-e9);
}

.vlr-caso-hero h1 {
	font-size: clamp(2.2rem, 6vw, 3.8rem);
	margin-block: var(--vlr-e3) var(--vlr-e4);
	color: inherit;
}

.vlr-caso-hero__resumo {
	font-size: clamp(1.02rem, 1.9vw, 1.22rem);
	line-height: 1.5;
	max-width: 56ch;
	opacity: 0.94;
}

/* Os números medidos, em linha. É a dobra que vende o caso. */
.vlr-numeros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e6) var(--vlr-e8);
	list-style: none;
	margin: var(--vlr-e7) 0 0;
	padding: 0;
}

.vlr-numeros li {
	display: grid;
	gap: var(--vlr-e1);
}

.vlr-numeros b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: clamp(2.6rem, 6vw, 4rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.vlr-numeros span {
	font-family: var(--vlr-dado);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.82;
}

@media (max-width: 40rem) {
	.vlr-grade--casos {
		grid-template-columns: 1fr;
	}

	.vlr-numeros {
		gap: var(--vlr-e5);
	}
}

/* --------------------------------------------------------------------------
 * Páginas de serviços e sobre
 *
 * Duas páginas fixas do tema, não conteúdo do editor. O topo é comum às duas
 * para o site não parecer dois sites, e o corpo muda: serviço é lista longa
 * lida com atenção, princípio é bloco curto lido de relance.
 * ----------------------------------------------------------------------- */

.vlr-topo-pagina {
	padding-block: var(--vlr-e9, 96px) var(--vlr-e7, 48px);
	background:
		radial-gradient(900px 460px at 14% -10%, rgb(89 39 132 / 14%), transparent 62%),
		radial-gradient(700px 420px at 92% 6%, rgb(238 132 56 / 11%), transparent 60%);
}

/*
 * Título de topo de página: no máximo três linhas.
 *
 * Com 16ch e a escala cheia, "Seu projeto pode começar em um site e crescer
 * para uma aplicação completa" saía em QUATRO linhas de Amberly Black — o
 * mesmo problema do hero da Home. A partir da quarta linha a fonte para de ser
 * lida como frase e passa a ser vista como bloco.
 *
 * Medido no navegador: 17ch com 3.7rem devolve três linhas e ainda deixa
 * respiro à direita.
 */
.vlr-topo-pagina h1 {
	max-inline-size: 17ch;
	font-size: clamp(2.2rem, 5.2vw, 3.7rem);
	text-wrap: balance;
}

.vlr-topo-pagina__linha {
	margin-block-start: var(--vlr-e5);
	max-inline-size: 60ch;
	font-size: clamp(1.02rem, 1.6vw, 1.22rem);
}

/* --------------------------------------------------------------------------
 * Topo de página com tela real
 *
 * A página de serviço abria com tipografia à esquerda e metade da tela vazia à
 * direita, e não tinha nenhuma imagem em lugar nenhum: Sistemas Web e SaaS não
 * têm case ligado, então o único bloco visual do template nunca renderizava.
 *
 * Uma página que vende desenvolvimento de software sem mostrar software
 * contraria o §35 e o §38 de uma vez. A prova de que o produto existe é a tela
 * dele, e as telas existem no banco — são prints reais dos sistemas.
 *
 * Duas telas sobrepostas, a de trás recuada e escurecida. Mesma composição do
 * hero da Home, de propósito: quem chega aqui pelo menu reconhece a linguagem.
 * ----------------------------------------------------------------------- */

.vlr-topo-pagina__grade {
	display: grid;
	gap: var(--vlr-e7);
	align-items: center;
}

.vlr-topo-pagina--com-telas .vlr-topo-pagina__grade {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
}

/* Com tela ao lado, o título não precisa mais dos 17ch que evitavam a quarta
   linha num bloco de largura cheia: a coluna já limita. */
.vlr-topo-pagina--com-telas h1 {
	max-inline-size: 14ch;
}

.vlr-topo-pagina--com-telas .vlr-topo-pagina__linha {
	max-inline-size: 46ch;
}

/*
 * `5 / 4` e não `4 / 3`: com a caixa mais alta as duas telas sobravam pequenas
 * dentro dela e a composição virava enfeite no canto. A prova precisa ter o
 * tamanho de prova.
 */
.vlr-topo-pagina__telas {
	position: relative;
	aspect-ratio: 5 / 4;
}

.vlr-topo-pagina__tela {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--vlr-raio);
	border: 1px solid var(--vlr-borda);
	background: var(--vlr-papel);
}

.vlr-topo-pagina__tela img {
	display: block;
	width: 100%;
	height: auto;
}

/* Atrás: recuada para o alto e para a direita, e clareada para não competir. */
.vlr-topo-pagina__tela--0 {
	top: 0;
	right: 0;
	width: 86%;
	box-shadow: 0 14px 34px -22px rgb(27 21 35 / 40%);
}

.vlr-topo-pagina__tela--0::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(245 243 248 / 52%);
}

/* Na frente: inteira, ancorada embaixo à esquerda, com a sombra mais funda. */
.vlr-topo-pagina__tela--1 {
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	box-shadow: 0 28px 56px -26px rgb(27 21 35 / 52%);
}

/*
 * Abaixo de 62rem a composição vira uma tela só, embaixo do texto. Duas
 * imagens sobrepostas em coluna estreita viram borrão: a de trás fica com
 * quarenta pixels visíveis e não prova nada, só suja a área.
 */
@media (max-width: 62rem) {
	.vlr-topo-pagina--com-telas .vlr-topo-pagina__grade {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlr-topo-pagina--com-telas h1,
	.vlr-topo-pagina--com-telas .vlr-topo-pagina__linha {
		max-inline-size: 17ch;
	}

	.vlr-topo-pagina--com-telas .vlr-topo-pagina__linha {
		max-inline-size: 60ch;
	}

	.vlr-topo-pagina__telas {
		aspect-ratio: auto;
		max-inline-size: 520px;
	}

	.vlr-topo-pagina__tela {
		position: static;
		width: 100%;
	}

	.vlr-topo-pagina__tela--0 {
		display: none;
	}
}

/* ---- Frentes de serviço ---- */

.vlr-frente {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--vlr-e8, 64px);
	padding-block: var(--vlr-e8, 64px);
	border-block-start: 1px solid var(--vlr-borda);
	align-items: start;
}

.vlr-frente__numero {
	font-family: var(--vlr-dado);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--vlr-laranja, #ee8438);
	margin-block-end: var(--vlr-e3);
}

.vlr-frente h2 {
	max-inline-size: 15ch;
	text-wrap: balance;
}

.vlr-frente__linha {
	margin-block-start: var(--vlr-e4);
	max-inline-size: 44ch;
}

/* O "para quem é" é a pergunta que o visitante faz primeiro. Barra verde
   para ele achar de relance ao varrer a página. */
.vlr-paraquem {
	margin-block-start: var(--vlr-e5);
	padding: var(--vlr-e4) var(--vlr-e5);
	background: var(--vlr-superficie);
	border-inline-start: 3px solid var(--vlr-verde, #48867b);
	border-radius: var(--vlr-raio, 12px);
}

.vlr-paraquem b {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-verde-texto, #427b71);
	margin-block-end: var(--vlr-e2);
}

.vlr-frente__lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vlr-e3) var(--vlr-e6);
	margin-block-start: var(--vlr-e4);
	list-style: none;

	/* Mesmo caso do `.vlr-principios`: o marcador saiu, o recuo de 40px da `ul`
	   ficou, e a lista de escopo desalinhava do resto da coluna. */
	padding: 0;
}

.vlr-frente__lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	line-height: 1.45;
}

.vlr-frente__lista li::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 6px;
	margin-block-start: 8px;
	border-radius: 50%;
	background: var(--vlr-verde, #48867b);
}

.vlr-frente__prazo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e6);
	margin-block-start: var(--vlr-e6);
	padding-block-start: var(--vlr-e5);
	border-block-start: 1px solid var(--vlr-borda);
}

.vlr-frente__prazo small {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block-end: 4px;
	opacity: 0.72;
}

.vlr-frente__prazo b {
	font-size: 1.05rem;
	letter-spacing: -0.02em;
}

/* ---- Princípios ---- */

.vlr-principios {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vlr-e5);
	margin-block: var(--vlr-e8, 64px);
	list-style: none;

	/*
	 * `list-style: none` não tira o recuo — só o marcador.
	 *
	 * Sem este `padding`, o `padding-inline-start` de 40px que o navegador dá a
	 * toda `ul` continuava valendo, e a grade inteira ficava 40px à direita do
	 * título da seção e de todos os outros blocos da página. Some no meio de uma
	 * grade de três colunas e aparece na hora quando o bloco vira coluna única
	 * no celular.
	 */
	padding: 0;
}

.vlr-principio {
	padding: var(--vlr-e6) var(--vlr-e5);
	background: var(--vlr-superficie);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio, 12px);
}

.vlr-principio b {
	display: block;
	font-size: 1.14rem;
	letter-spacing: -0.028em;
	margin-block-end: var(--vlr-e3);
}

.vlr-principio p {
	font-size: 0.96rem;
}

/*
 * A faixa de números da página sobre.
 *
 * O componente nasceu dentro da página de case, onde flutua no meio do texto e
 * precisa das próprias margens. Na sobre ele passou a morar numa `.vlr-secao`,
 * que já tem `padding-block: var(--vlr-e9)`. As margens de origem somavam com
 * esse padding e abriam um vão de quase 200px acima da faixa — o tipo de
 * espaço que parece bloco faltando, não respiro.
 */
.vlr-numeros--sobre {
	margin: 0;

	/*
	 * Grade de quatro, não flex que quebra.
	 *
	 * O componente é flex porque na página de case ele tem dois ou três itens e
	 * quebra bem. Com os quatro da sobre, a quarta coluna caía sozinha numa
	 * segunda linha com três quartos de vão vazio à direita — o "0 tema
	 * comprado", que é o número mais forte da faixa, aparecia como sobra.
	 */
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vlr-e6) var(--vlr-e5);
}

/*
 * A faixa de números é uma tira, não um capítulo.
 *
 * `.vlr-secao` reserva `var(--vlr-e9)` em cima e embaixo, e para uma linha de
 * quatro números isso abre mais de 200px de folga em volta de 90px de conteúdo.
 * Respiro de capítulo em cima de conteúdo de tira lê como bloco que não
 * carregou.
 */
.vlr-secao--tira {
	padding-block: var(--vlr-e7);
}

/* Banda: tem título, então pede mais que a tira e menos que o capítulo. */
.vlr-secao--banda {
	padding-block: var(--vlr-e8);
}

/*
 * Mesma soma, mesma correção: a grade de princípios trazia `margin-block` de
 * 64px de quando era o primeiro elemento da página, e agora vem depois de um
 * `.vlr-secao__cab` que já reserva o espaço dele.
 */
.vlr-secao__cab + .vlr-principios {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
 * Os dois modelos comerciais (§46)
 *
 * A regra que decide se o visitante está contratando desenvolvimento ou
 * comprando algo pronto nunca havia sido escrita para ele. Aqui ela vira duas
 * colunas irmãs — mesmo peso, mesma forma, selo diferente.
 *
 * Irmãs de propósito: dar destaque visual a um dos lados escolheria o funil no
 * lugar do visitante, que é exatamente o que o §12 proíbe.
 * ----------------------------------------------------------------------- */

.vlr-modelos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vlr-e5);
}

.vlr-modelo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vlr-e3);
	padding: var(--vlr-e6) var(--vlr-e5);
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
}

/*
 * O selo do funil. Mesma pastilha do menu suspenso, e as duas cores são as
 * mesmas de lá: verde para sob medida, roxo para pronto para usar. Quem clicou
 * no menu reconhece onde chegou.
 *
 * As duas usam variante de texto, não a cor de área — o verde da marca dá
 * 4,22:1 sobre branco e este rótulo tem menos de 12px.
 */
.vlr-modelo__selo {
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	font-family: var(--vlr-dado);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
	max-width: none;
}

.vlr-modelo__selo--servico {
	background: rgb(72 134 123 / 12%);
	color: var(--vlr-verde-texto);
}

.vlr-modelo__selo--produto {
	background: rgb(89 39 132 / 11%);
	color: var(--vlr-roxo);
}

.vlr-modelo h3 {
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.vlr-modelo__linha {
	margin: 0;
	font-size: 0.98rem;
}

.vlr-modelo__itens {
	display: grid;
	gap: var(--vlr-e2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

/*
 * Link que parece link.
 *
 * A primeira versão usava tinta com sublinhado na cor da borda — 1,2:1 contra o
 * branco. O sublinhado existia no código e não na tela, e três nomes de serviço
 * clicáveis ficavam indistinguíveis de texto corrido. A WCAG 1.4.1 é sobre
 * exatamente isso: cor não pode ser o único sinal, e sinal invisível não é
 * sinal.
 */
.vlr-modelo__itens a {
	color: var(--vlr-roxo);
	font-weight: 600;
	text-decoration-color: rgb(89 39 132 / 40%);
}

.vlr-modelo__itens a:hover {
	color: var(--vlr-roxo-claro);
	text-decoration-color: currentcolor;
}

/* A contagem real, no lugar onde o outro lado lista os serviços. */
.vlr-modelo__conta {
	margin: 0;
	font-family: var(--vlr-dado);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

/* `margin-top: auto` alinha os dois botões na base mesmo com textos de altura
   diferente — dois CTAs em alturas distintas leem como um sendo preferido. */
.vlr-modelo__cta {
	margin: auto 0 0;
	padding-block-start: var(--vlr-e3);
}

.vlr-modelos__tela {
	margin: var(--vlr-e6) 0 0;
	display: grid;
	gap: var(--vlr-e3);
	justify-items: start;
}

.vlr-modelos__tela img {
	border-radius: var(--vlr-raio);
	border: 1px solid var(--vlr-borda);
}

/* --------------------------------------------------------------------------
 * Como trabalhamos
 *
 * Eram seis cartões com número e título e mais nada dentro — quinhentos pixels
 * de altura para seis frases curtas, e cada cartão anunciando um conteúdo que
 * não existia. Cartão é caixa de conteúdo; passo de processo é marco.
 *
 * Agora é uma trilha: régua fina em cima de cada passo, número, título. O
 * numeral fica, e aqui ele é legítimo — o processo É uma sequência, e a ordem
 * carrega informação que o leitor precisa.
 * ----------------------------------------------------------------------- */

.vlr-processo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vlr-e6) var(--vlr-e5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vlr-processo__passo {
	display: grid;
	gap: var(--vlr-e2);
	padding-top: var(--vlr-e4);
	border-top: 2px solid var(--vlr-borda);
}

/*
 * O laranja de texto, não o da marca. O da marca dá 2,38:1 sobre esta
 * superfície — reprovado até para título grande.
 */
.vlr-processo__n {
	font-family: var(--vlr-dado);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--vlr-laranja-texto);
	font-variant-numeric: tabular-nums;
}

.vlr-processo__passo h3 {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.2;
	text-wrap: balance;
}

/*
 * A variante detalhada, usada na página sobre.
 *
 * A Home mostra os mesmos seis nomes de propósito — o §13.05 pede o processo
 * lá. Repetir a lista curta na sobre seria só ocupar espaço com o que o
 * visitante já leu, então aqui cada passo ganha uma linha dizendo o que o
 * cliente faz ou recebe naquela etapa.
 *
 * A régua fica mais grossa e roxa no primeiro passo, porque com o texto embaixo
 * os seis marcos viram seis blocos, e sem um ponto de partida o olho não sabe
 * por onde entrar. Numa sequência a ordem é a informação, e ela precisa estar
 * visível antes da leitura.
 */
.vlr-processo--detalhado .vlr-processo__passo {
	gap: var(--vlr-e2);
}

.vlr-processo--detalhado .vlr-processo__passo:first-child {
	border-top-color: var(--vlr-roxo);
}

.vlr-processo__detalhe {
	margin: 0;
	max-width: none;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--vlr-tinta-fraca);
}

@media (max-width: 62rem) {
	.vlr-processo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.vlr-processo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vlr-e5);
	}
}

/* --------------------------------------------------------------------------
 * Tecnologias
 *
 * Nome em mono e nada mais: sem logotipo, sem selo de parceria, sem ícone
 * colorido. Logotipo de terceiro numa página institucional lê como endosso, e
 * o §36 é explícito que a tecnologia não é a proposta de valor.
 * ----------------------------------------------------------------------- */

/*
 * Banda assimétrica: título à esquerda, pastilhas à direita.
 *
 * A primeira versão era um capítulo inteiro — cabeçalho de seção largo, depois
 * uma fileira de nove pastilhas ocupando toda a largura, e a nona caindo
 * sozinha numa segunda linha. Duas coisas erradas de uma vez: peso de capítulo
 * para o bloco menos importante da página, e órfã na quebra.
 *
 * Aqui o bloco vira banda. Ganha metade da altura, resolve a órfã porque a
 * coluna é mais estreita e a quebra passa a ser 3+3+3, e é o único momento
 * assimétrico da página — o que quebra a fila de sete faixas empilhadas de
 * largura cheia.
 */
.vlr-tecs-banda {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--vlr-e5) var(--vlr-e7);
	align-items: start;
}

.vlr-tecs-banda h2 {
	max-inline-size: 18ch;
	text-wrap: balance;
}

.vlr-tecs-banda__linha {
	margin-block-start: var(--vlr-e3);
	max-inline-size: 46ch;
	font-size: 0.98rem;
}

.vlr-tecs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vlr-tecs li {
	padding: 9px var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 999px;
	background: var(--vlr-papel);
	font-family: var(--vlr-dado);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--vlr-tinta-fraca);
}

@media (max-width: 62rem) {
	.vlr-frente {
		grid-template-columns: 1fr;
		gap: var(--vlr-e6);
	}

	.vlr-principios {
		grid-template-columns: 1fr 1fr;
	}

	.vlr-modelos,
	.vlr-tecs-banda {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlr-numeros--sobre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.vlr-frente__lista,
	.vlr-principios {
		grid-template-columns: 1fr;
	}
}

/* CTA do serviço na página de serviços. */
.vlr-frente__cta {
	margin-top: var(--vlr-e5, 1.5rem);
}

/* --------------------------------------------------------------------------
 * Página de serviço: abertura e escopo
 * ----------------------------------------------------------------------- */

/*
 * "Para quem é" ao lado dos tipos de projeto.
 *
 * As duas respondem a mesma pergunta por ângulos diferentes — quem contrata e o
 * que se contrata — e lado a lado elas se explicam. Empilhadas, como estavam,
 * viravam duas seções iguais uma embaixo da outra.
 */
.vlr-servico__abre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--vlr-e7);
	align-items: start;
}

/* A variante solta do `.vlr-paraquem` aceita prosa dentro, e não só uma linha. */
.vlr-paraquem--solto {
	margin: 0;
}

.vlr-paraquem--solto .vlr-prosa {
	font-size: 1.02rem;
}

/*
 * O escopo, em rótulo mono e não em h2.
 *
 * Enquanto tinha h2 do mesmo tamanho do resto da página, a lista de 15 itens de
 * Sistemas Web era o maior bloco da tela e disputava atenção com a prova. É
 * conferência, não argumento: quem lê item a item já decidiu conversar.
 */
.vlr-escopo + .vlr-escopo {
	margin-block-start: var(--vlr-e7);
	padding-block-start: var(--vlr-e6);
	border-block-start: 1px solid var(--vlr-borda);
}

/*
 * Rótulo e nota em colunas, não lado a lado em flex.
 *
 * Em flex a nota disputava a linha com o rótulo mono e quebrava com duas
 * palavras órfãs no fim ("no preço." sozinho). Duas colunas dão largura fixa
 * para cada um e a quebra passa a ser onde a frase pede.
 */
.vlr-escopo__cab {
	display: grid;
	grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
	gap: var(--vlr-e3) var(--vlr-e6);
	align-items: baseline;
	margin-block-end: var(--vlr-e5);
}

.vlr-escopo__nota {
	margin: 0;
	font-size: 0.92rem;
	color: var(--vlr-tinta-fraca);
	max-inline-size: 62ch;
}

@media (max-width: 40rem) {
	.vlr-escopo__cab {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Três colunas para o escopo, não duas.
 *
 * Com 15 e 17 itens, duas colunas devolvem oito linhas de altura e a lista
 * volta a ser o bloco mais alto da página. Três colunas cortam para seis e
 * fazem a leitura ser de varredura, que é como lista de conferência se lê.
 */
.vlr-escopo .vlr-frente__lista {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 0;
}

@media (max-width: 62rem) {
	.vlr-servico__abre {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vlr-e6);
	}

	.vlr-escopo .vlr-frente__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.vlr-escopo .vlr-frente__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vlr-servico__bloco {
	margin-top: var(--vlr-e6, 2rem);
}

.vlr-servico__casos {
	margin-top: var(--vlr-e8, 3rem);
}

/* ---------------------------------------------------------------------------
 * Narrativa do case (§19)
 *
 * Cada bloco é uma etapa do argumento — desafio, solução, entregue, telas,
 * resultado. O espaçamento entre eles é maior que o interno de propósito: o
 * leitor precisa sentir a virada de assunto sem precisar de linha divisória.
 * ------------------------------------------------------------------------ */

.vlr-caso-bloco {
	margin-top: var(--vlr-e8);
}

.vlr-caso-bloco > h2 {
	margin-bottom: var(--vlr-e4);
}

/*
 * Galeria de telas.
 *
 * auto-fit com minmax deixa uma tela sozinha ocupar a largura toda e duas ou
 * três dividirem — sem media query e sem contar itens no PHP. Um print de
 * interface some quando espremido em coluna estreita.
 */
.vlr-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--vlr-e4);
}

.vlr-galeria__item {
	margin: 0;
}

.vlr-galeria__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vlr-raio);
	border: 1px solid var(--vlr-borda);
}

.vlr-galeria__item a:focus-visible img {
	outline: 2px solid var(--vlr-roxo);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Perguntas frequentes (§15–17)
 *
 * `details`/`summary` do próprio navegador: acessível por teclado, funciona sem
 * JavaScript e o buscador lê a resposta mesmo com o bloco fechado. Um acordeão
 * em JS aqui seria trabalho para piorar as três coisas.
 * ------------------------------------------------------------------------ */

.vlr-faq {
	display: flex;
	flex-direction: column;
	border-block-start: 1px solid var(--vlr-borda);
}

.vlr-faq__item {
	border-block-end: 1px solid var(--vlr-borda);
}

.vlr-faq__item > summary {
	cursor: pointer;
	padding: var(--vlr-e4) 0;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--vlr-e3);
}

.vlr-faq__item > summary::-webkit-details-marker {
	display: none;
}

/* O sinal é conteúdo gerado, então não entra na árvore de acessibilidade:
   quem usa leitor de tela já ouve o estado do `details` pelo próprio elemento. */
.vlr-faq__item > summary::after {
	content: "+";
	font-family: var(--vlr-dado);
	color: var(--vlr-roxo);
	flex: none;
}

.vlr-faq__item[open] > summary::after {
	content: "\2013";
}

.vlr-faq__item > summary:focus-visible {
	outline: 2px solid var(--vlr-roxo);
	outline-offset: 2px;
}

.vlr-faq__item > .vlr-prosa {
	padding-block-end: var(--vlr-e4);
}

/* ---------------------------------------------------------------------------
 * Comparação de planos (§22)
 *
 * Tabela e não cartões: cartão lado a lado obriga o leitor a cruzar três listas
 * na cabeça para descobrir o que muda de um plano para o outro. A tabela põe a
 * diferença na mesma linha.
 * ------------------------------------------------------------------------ */

.vlr-planos-secao {
	margin-block: var(--vlr-e8);
}

/* A tabela rola dentro do próprio container; o corpo da página nunca rola
   de lado. Em telas estreitas três colunas de plano não cabem, e encolher a
   fonte até caber deixaria a comparação ilegível. */
.vlr-tabela-rolo {
	overflow-x: auto;
	margin-top: var(--vlr-e5);
}

.vlr-comparacao {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.vlr-comparacao th,
.vlr-comparacao td {
	padding: var(--vlr-e3) var(--vlr-e4);
	border-bottom: 1px solid var(--vlr-borda);
	text-align: left;
	vertical-align: top;
}

.vlr-comparacao thead th {
	border-bottom-width: 2px;
}

.vlr-comparacao tbody td,
.vlr-comparacao tfoot td {
	text-align: center;
}

.vlr-comparacao tbody th {
	font-weight: 400;
}

.vlr-comparacao__nome {
	display: block;
	font-family: var(--vlr-marca);
	font-size: 1.05rem;
}

.vlr-comparacao__preco {
	display: block;
	margin-top: 2px;
	font-family: var(--vlr-dado);
	font-size: .95rem;
	color: var(--vlr-roxo);
}

.vlr-comparacao__preco small {
	font-size: .7rem;
	color: var(--vlr-tinta-fraca);
}

/* "Sob consulta" é a verdade quando ninguém definiu preço. Um "R$ 0,00" ali
   anunciaria de graça o que não é. */
.vlr-comparacao__preco--vazio {
	color: var(--vlr-tinta-fraca);
	font-style: italic;
}

.vlr-comparacao__chamada {
	display: block;
	margin-top: 4px;
	color: var(--vlr-tinta-fraca);
	font-size: .78rem;
}

.vlr-comparacao__destaque {
	background: color-mix(in srgb, var(--vlr-roxo) 6%, transparent);
}

.vlr-comparacao__sim {
	color: var(--vlr-verde);
	font-weight: 700;
}

.vlr-comparacao__nao {
	color: var(--vlr-tinta-fraca);
}

.vlr-comparacao tfoot td {
	border-bottom: 0;
	padding-top: var(--vlr-e4);
}

/* ---------------------------------------------------------------------------
 * Área do cliente
 * ------------------------------------------------------------------------ */

.vlr-conta-login {
	max-width: 26rem;
	margin-block: var(--vlr-e6);
}

.vlr-conta-login input[type="text"],
.vlr-conta-login input[type="password"] {
	width: 100%;
}

.vlr-conta-topo {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--vlr-e3);
	margin-block: var(--vlr-e5);
	padding-block-end: var(--vlr-e3);
	border-block-end: 1px solid var(--vlr-borda);
}

.vlr-conta-pedidos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e5);
}

.vlr-conta-pedido {
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	padding: var(--vlr-e5);
}

.vlr-conta-pedido__topo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--vlr-e3);
}

.vlr-conta-pedido__topo h2 {
	margin: 0;
}

/* Grade de duas colunas: rótulo e valor lado a lado. `dl` mantém a relação
   semântica que uma tabela de duas colunas perderia. */
.vlr-conta-pedido__dados {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--vlr-e2) var(--vlr-e4);
	margin-block: var(--vlr-e4);
}

.vlr-conta-pedido__dados dt {
	font-family: var(--vlr-dado);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

.vlr-conta-pedido__dados dd {
	margin: 0;
}

.vlr-conta-licenca {
	margin-block: var(--vlr-e4);
	padding: var(--vlr-e4);
	border-radius: var(--vlr-raio);
	background: var(--vlr-superficie);
}

/* A chave é copiada à mão para dentro do sistema instalado. `user-select: all`
   faz um clique selecionar tudo, e `word-break` impede que ela estoure a caixa
   no celular. */
.vlr-conta-licenca__chave {
	display: block;
	margin-block: var(--vlr-e2);
	font-size: 1rem;
	letter-spacing: .04em;
	user-select: all;
	word-break: break-all;
}

.vlr-conta-pedido__nota {
	margin-block-start: var(--vlr-e2);
	font-size: .8rem;
}

/*
 * Módulos no card sem tela. Ver o comentário em card-produto.php: existe para
 * o card não abrir um vão em branco no meio da vitrine.
 *
 * Marcador quadrado na cor do produto, o mesmo do que-foi-entregue no destaque
 * de caso — é a mesma ideia (lista de coisas concretas), então usa a mesma
 * forma.
 */
.vlr-card__itens {
	display: grid;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-card__itens li {
	position: relative;
	padding-left: 19px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--vlr-tinta-fraca);
}

.vlr-card__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--vlr-produto);
}

/* --------------------------------------------------------------------------
 * Página de serviços — os três pilares
 * ----------------------------------------------------------------------- */

/*
 * O ícone, no lugar do numeral. Ver o comentário em page-servicos.php: numerar
 * três alternativas sugeria uma escada que o §5 não descreve.
 */
.vlr-frente__icone {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--vlr-e4);
	border-radius: 13px;
	background: rgb(72 134 123 / 12%);
	color: var(--vlr-verde-texto);
}

.vlr-frente__icone svg {
	width: 23px;
	height: 23px;
	fill: currentcolor;
}

/*
 * A prova ao lado da promessa: tela do case, rótulo e nome.
 *
 * `align-items: stretch` com a imagem em `object-fit: cover` porque a coluna
 * de texto ao lado define a altura, e screenshot esticado denuncia o encaixe.
 */
.vlr-frente__prova {
	display: flex;
	align-items: stretch;
	gap: var(--vlr-e4);
	margin-top: var(--vlr-e5);
	padding: var(--vlr-e3);
	border: 1px solid var(--vlr-borda);
	border-radius: 14px;
	background: var(--vlr-papel);
	text-decoration: none;
	transition: border-color var(--vlr-rapido) var(--vlr-curva), box-shadow var(--vlr-rapido) var(--vlr-curva), transform var(--vlr-rapido) var(--vlr-curva);
}

.vlr-frente__prova:hover,
.vlr-frente__prova:focus-visible {
	transform: translateY(-2px);
	border-color: var(--vlr-roxo);
	box-shadow: 0 14px 28px -22px rgb(27 21 35 / 45%);
}

.vlr-frente__prova img {
	flex: 0 0 108px;
	width: 108px;
	height: 100%;
	min-height: 68px;
	object-fit: cover;
	object-position: top center;
	border-radius: 9px;
	background: var(--vlr-superficie);
}

.vlr-frente__prova-texto {
	display: grid;
	align-content: center;
	gap: 3px;
	min-width: 0;
}

.vlr-frente__prova-texto b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1.15;
	color: var(--vlr-tinta);
}

/*
 * Exemplos de projeto como pastilha.
 *
 * Peso menor que a lista de escopo de propósito: escopo é contrato e se
 * confere item a item; exemplo é reconhecimento e se lê de relance.
 */
.vlr-frente__exemplos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e2);
	list-style: none;
	margin: 0 0 var(--vlr-e5);
	padding: 0;
}

.vlr-frente__exemplos li {
	padding: 7px 13px;
	border: 1px solid var(--vlr-borda);
	border-radius: 999px;
	background: var(--vlr-superficie);
	font-size: 0.86rem;
	line-height: 1.3;
	color: var(--vlr-tinta-fraca);
}

@media (max-width: 34rem) {
	.vlr-frente__prova {
		flex-direction: column;
	}

	.vlr-frente__prova img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlr-frente__prova {
		transition-duration: 0.01ms;
	}

	.vlr-frente__prova:hover,
	.vlr-frente__prova:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * Caso em destaque
 *
 * Mora aqui e não em home.css porque é usado nos DOIS lugares: na dobra de
 * prova da Home e no arquivo de cases. Enquanto viveu só na folha da Home, o
 * arquivo carregava o componente sem estilo nenhum e o destaque saía em coluna
 * única, com a tela ocupando a largura inteira.
 * ----------------------------------------------------------------------- */

.vlr-caso-destaque {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--vlr-e7);
	align-items: start;
}

.vlr-caso-destaque__telas {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e3);
	min-width: 0;
}

/*
 * A moldura da tela. A borda e o raio existem para a imagem não sangrar direto
 * no fundo da página: screenshot sem contorno lê como erro de layout, não como
 * captura de tela.
 */
.vlr-caso-destaque__principal {
	margin: 0;
	border: 1px solid var(--vlr-borda);
	border-radius: 16px;
	overflow: hidden;
	background: var(--vlr-superficie);
	box-shadow: 0 24px 48px -32px rgb(27 21 35 / 55%);
}

.vlr-caso-destaque__principal img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * `flex` com base de 190px, não grid de colunas iguais: a galeria pode ter uma
 * miniatura ou três, e uma coluna esticada na largura toda ficaria mais pesada
 * que a tela principal que ela deveria apoiar.
 */
.vlr-caso-destaque__mini {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-caso-destaque__mini > li {
	flex: 0 1 190px;
	min-width: 0;
}

.vlr-caso-destaque__mini figure {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e2);
	margin: 0;
}

.vlr-caso-destaque__mini img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border: 1px solid var(--vlr-borda);
	border-radius: 10px;
	background: var(--vlr-superficie);
}

.vlr-caso-destaque__mini figcaption {
	font-family: var(--vlr-dado);
	font-size: 0.66rem;
	line-height: 1.45;
	letter-spacing: 0.03em;
	color: var(--vlr-tinta-fraca);
}

.vlr-caso-destaque__texto {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e3);
	padding-top: var(--vlr-e2);
}

.vlr-caso-destaque__nome {
	margin: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.08;
}

.vlr-caso-destaque__nome a {
	color: var(--vlr-tinta);
	text-decoration: none;
}

.vlr-caso-destaque__nome a:hover {
	color: var(--vlr-produto);
}

.vlr-caso-destaque__cliente {
	margin: -6px 0 0;
	max-width: none;
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

.vlr-caso-destaque__resumo {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--vlr-tinta-fraca);
}

/*
 * O que foi entregue. Marcador em vez de bullet redondo: a lista é de coisas
 * concretas construídas, e o quadradinho na cor do projeto amarra a lista ao
 * resto do card sem precisar de mais um título.
 */
.vlr-caso-destaque__entregue {
	display: grid;
	gap: var(--vlr-e2);
	list-style: none;
	margin: var(--vlr-e2) 0 0;
	padding: 0;
}

.vlr-caso-destaque__entregue li {
	position: relative;
	padding-left: var(--vlr-e5);
	font-size: 0.92rem;
	line-height: 1.5;
}

.vlr-caso-destaque__entregue li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--vlr-produto);
}

.vlr-caso-destaque__cta {
	align-self: flex-start;
	margin-top: var(--vlr-e3);
	display: inline-flex;
	align-items: center;
	gap: var(--vlr-e2);
	min-height: 44px;
	padding-inline: var(--vlr-e5);
	border-radius: 999px;
	background: var(--vlr-produto);
	color: #fff;
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 0.84rem;
	text-decoration: none;
}

.vlr-caso-destaque__cta::after {
	content: "→";
	transition: transform var(--vlr-rapido) var(--vlr-curva);
}

.vlr-caso-destaque__cta:hover::after {
	transform: translateX(3px);
}

@media (max-width: 56.25rem) {
	.vlr-caso-destaque {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vlr-e5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlr-caso-destaque__cta::after {
		transition-duration: 0.01ms;
	}
}


/*
 * O cliente, embaixo do nome do projeto na página do case.
 *
 * Ele saiu do h1 em 17/08/2026: o título era o cliente, e como "Foco nos
 * Games" é projeto da própria Valoar, a página abria com um h1 escrito
 * "Valoar" — o mesmo texto da marca no topo e no breadcrumb. Quem chegava
 * procurando o projeto não achava o nome dele em lugar nenhum.
 *
 * Aqui ele é legenda do título: sobe colado, com peso de metadado.
 */
.vlr-caso-hero__cliente {
	margin: var(--vlr-e3) 0 0;
	max-width: none;
	font-family: var(--vlr-dado);
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.82;
}

/* ==========================================================================
 * A LINGUAGEM VISUAL DO SITE — 17/08/2026
 *
 * Aprovada pelo Demóstenes nas duas primeiras seções da Home e estendida ao
 * site inteiro.
 *
 * MORA EM `conteudo.css` e não em `home.css`, e a diferença não é organização:
 * `home.css` só carrega na primeira página. Card de caso, card de produto,
 * régua de processo e planta aparecem em /casos/, /produtos/, /servicos/,
 * /sobre/, nos arquivos de taxonomia e na busca — com o CSS na folha errada,
 * todos eles perderiam a moldura de janela e a rolagem ao apontar, e o site
 * falaria duas línguas. Não é uma coleção de efeitos: são quatro decisões que se repetem, e é
 * a repetição que faz o site parecer um sistema em vez de uma pilha de blocos.
 *
 *   1. JANELA — toda tela real aparece dentro de uma moldura de aplicação.
 *      É o que separa "uma imagem no card" de "um site aberto".
 *
 *   2. PLANTA — o que ainda não existe aparece como contorno que se preenche.
 *      Geometria abstrata, nunca mockup de produto inventado (§35).
 *
 *   3. RESPOSTA — todo bloco interativo reage a apontar E a tabular. Hover
 *      sozinho é decoração para metade das pessoas.
 *
 *   4. VAGAR — o movimento é lento o bastante para ser visto. A primeira
 *      versão do movimento deste site foi reprovada por ser rápida demais.
 *
 * Sem framework e sem biblioteca de animação: é CSS do design system do
 * próprio tema. Num site que vende desenvolvimento, isso não é economia — é o
 * argumento (§17).
 * ====================================================================== */

/* --------------------------------------------------------------------------
 * 1. A janela
 * ----------------------------------------------------------------------- */

.vlr-janela {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 5px;
	block-size: 22px;
	padding-inline: 10px;
	background: rgb(16 11 24 / 92%);
	border-block-end: 1px solid rgb(255 255 255 / 10%);
	pointer-events: none;
}

.vlr-janela s {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: rgb(255 255 255 / 26%);
}

/* A tela desce 22px para não ficar por baixo da barra. */
.vlr-caso-card__tela,
.vlr-card__tela {
	position: relative;
	padding-block-start: 22px;
	background: rgb(16 11 24 / 92%);
}

/*
 * A ROLAGEM AO APONTAR.
 *
 * `object-position` sai do topo e desce, e o efeito é o argumento inteiro: a
 * pessoa vê a página CONTINUAR. Screenshot parado prova que existe uma tela;
 * screenshot que rola prova que existe uma página.
 *
 * 1,8s de propósito. Rápido demais vira tremida e não se lê como rolagem.
 *
 * `object-position` não roda no compositor, e aqui isso não importa: são no
 * máximo três cards apontados um por vez, e a alternativa — imagem maior que a
 * moldura deslocada por transform — exigiria saber a altura natural de cada
 * screenshot, que muda por projeto.
 */
.vlr-caso-card__img,
.vlr-card__tela img {
	transition: object-position 1800ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms var(--vlr-curva);
}

.vlr-caso-card:hover .vlr-caso-card__img,
.vlr-caso-card:focus-within .vlr-caso-card__img,
.vlr-card:hover .vlr-card__tela img,
.vlr-card:focus-within .vlr-card__tela img {
	object-position: center 78%;
}

/* Substitui o zoom de 1.02 que existia: a rolagem já é o gesto, e dois gestos
   ao mesmo tempo no mesmo elemento borram os dois. */
.vlr-caso-card:hover .vlr-caso-card__img {
	transform: none;
}

.vlr-caso-card,
.vlr-card {
	transition: transform 420ms var(--vlr-curva), box-shadow 420ms var(--vlr-curva), border-color 420ms var(--vlr-curva);
}

.vlr-caso-card:hover,
.vlr-caso-card:focus-within,
.vlr-card:hover,
.vlr-card:focus-within {
	transform: translate3d(0, -3px, 0);
	box-shadow: var(--vlr-sombra-2, 0 16px 34px -20px rgb(27 21 35 / 40%));
}

/* --------------------------------------------------------------------------
 * 2. O cabeçalho de seção, com selo
 *
 * O selo em pastilha veio da bifurcação e passa a valer em toda seção da Home.
 * Ele é o que dá à sobrelinha o peso de rótulo de sistema em vez de texto
 * pequeno solto.
 * ----------------------------------------------------------------------- */

.vlr-selo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vlr-roxo) 9%, transparent);
	color: var(--vlr-roxo);
}

.vlr-selo::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: currentColor;
}

.vlr-escuro .vlr-selo,
.vlr-final .vlr-selo {
	background: rgb(255 255 255 / 12%);
	color: rgb(255 255 255 / 82%);
}

/* --------------------------------------------------------------------------
 * 3. O que fazemos: um diagrama por frente
 *
 * O §6 do brief: não repetir o mesmo card três vezes. Cada serviço ganha uma
 * geometria que diz o que ele é, montada em CSS — página, painel, multiusuário.
 * São plantas, não mockups: nenhuma finge ser tela de um produto que existe.
 * ----------------------------------------------------------------------- */

.vlr-caminho {
	position: relative;
	overflow: hidden;
	transition: transform 420ms var(--vlr-curva), box-shadow 420ms var(--vlr-curva);
}

.vlr-caminho:hover,
.vlr-caminho:focus-within {
	transform: translate3d(0, -3px, 0);
	box-shadow: var(--vlr-sombra-2, 0 16px 34px -20px rgb(27 21 35 / 40%));
}

.vlr-planta {
	display: grid;
	gap: 5px;
	margin-block: var(--vlr-e4);
	padding: var(--vlr-e3);
	block-size: 104px;
	border: 1px solid var(--vlr-borda);
	border-radius: 10px;
	background: var(--vlr-superficie);
	align-content: start;
}

.vlr-planta s {
	display: block;
	/* Piso de altura: traço sem regra própria colapsaria para zero e a planta
	   viraria um retângulo vazio, que é o pior resultado possível aqui. */
	block-size: 14px;
	border-radius: 3px;
	border: 1px solid var(--vlr-borda);
	background: var(--vlr-papel);
	transition: background 520ms var(--vlr-curva), border-color 520ms var(--vlr-curva);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.vlr-caminho:hover .vlr-planta s,
.vlr-caminho:focus-within .vlr-planta s {
	background: color-mix(in srgb, var(--vlr-roxo) 16%, var(--vlr-papel));
	border-color: color-mix(in srgb, var(--vlr-roxo) 34%, transparent);
}

/* Site: cabeçalho largo, herói, duas colunas, rodapé. */
.vlr-planta--sites s:nth-child(1) { block-size: 12px; }
.vlr-planta--sites s:nth-child(2) { block-size: 34px; }
.vlr-planta--sites s:nth-child(3) { block-size: 22px; }
.vlr-planta--sites s:nth-child(4) { block-size: 10px; inline-size: 60%; }

/* Sistema: uma grade de painel, quatro quadrantes e uma faixa de tabela. */
/*
 * Na grade do painel quem manda na altura é a grade, não o piso do traço: o
 * `block-size` fixo prendia todos os quadrantes em 14px e o `span 3` do
 * primeiro deixava de significar coisa alguma.
 */
.vlr-planta--sistemas {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 22px;
}

.vlr-planta--sistemas s {
	block-size: auto;
}

.vlr-planta--sistemas s:nth-child(1) { grid-column: span 1; grid-row: span 3; }
.vlr-planta--sistemas s:nth-child(2) { grid-column: span 3; }
.vlr-planta--sistemas s:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.vlr-planta--sistemas s:nth-child(4) { grid-column: span 1; }
.vlr-planta--sistemas s:nth-child(5) { grid-column: span 1; }

/* SaaS: a mesma tela repetida, que é o que multiusuário quer dizer. */
.vlr-planta--saas {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	align-content: stretch;
}

.vlr-planta--saas s {
	block-size: 100%;
}

/* --------------------------------------------------------------------------
 * 4. O processo: a mesma planta da bifurcação, na horizontal
 *
 * Os seis passos já aparecem como obra no bloco "construir". Aqui eles são o
 * assunto, então ganham a régua completa: número em Amberly, trilho e ponto.
 * Mesma metáfora para o mesmo conteúdo — é o que impede a página de parecer
 * duas páginas coladas.
 * ----------------------------------------------------------------------- */

.vlr-processo__passo {
	position: relative;
	transition: transform 420ms var(--vlr-curva);
}

/*
 * O trilho que liga um passo ao outro.
 *
 * Ele nasce em escala zero e cresce quando a lista entra na tela, de um passo
 * para o outro. É o único movimento por rolagem desta seção, e é o que conta a
 * história de sequência que o número sozinho não conta.
 */
.vlr-processo--regua .vlr-processo__passo::before {
	content: "";
	position: absolute;
	inset-block-start: 13px;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--vlr-verde), var(--vlr-roxo));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.vlr-processo--regua .vlr-processo__passo:last-child::before {
	inline-size: 28px;
}

@media (prefers-reduced-motion: no-preference) {
	.vlr-anima .vlr-processo--regua .vlr-processo__passo::before {
		animation: vlr-trilho 760ms var(--vlr-curva) both;
		animation-delay: calc(var(--i, 0) * 130ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlr-processo--regua .vlr-processo__passo::before {
		transform: scaleX(1);
	}
}

@keyframes vlr-trilho {
	to {
		transform: scaleX(1);
	}
}

.vlr-processo--regua .vlr-processo__n {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--vlr-papel);
	border: 2px solid var(--vlr-borda);
	font-size: 0.72rem;
	transition: border-color 420ms var(--vlr-curva), color 420ms var(--vlr-curva);
}

.vlr-processo--regua .vlr-processo__passo:hover .vlr-processo__n {
	border-color: var(--vlr-roxo);
	color: var(--vlr-roxo);
}

.vlr-superficie .vlr-processo--regua .vlr-processo__n {
	background: var(--vlr-superficie);
}

/* --------------------------------------------------------------------------
 * 5. Capacidades: a pastilha que reage
 *
 * A contagem é o argumento — "Agendamento · 2 projetos" é prova, "Agendamento"
 * sozinho é promessa (§38). Ao apontar, o número ganha peso e a pastilha
 * levanta: o gesto reforça exatamente o que diferencia as duas.
 * ----------------------------------------------------------------------- */

.vlr-capacidade {
	transition: transform 320ms var(--vlr-curva), border-color 320ms var(--vlr-curva), background 320ms var(--vlr-curva);
}

.vlr-capacidade:hover,
.vlr-capacidade:focus-within {
	transform: translate3d(0, -2px, 0);
	border-color: color-mix(in srgb, var(--vlr-roxo) 40%, transparent);
	background: var(--vlr-papel);
}

.vlr-capacidade__n {
	transition: color 320ms var(--vlr-curva);
}

.vlr-capacidade:hover .vlr-capacidade__n {
	color: var(--vlr-roxo);
}

/* --------------------------------------------------------------------------
 * 6. Amplitude: os segmentos
 *
 * Bloco de apoio, e por isso o gesto é o menor da página: a pastilha ganha a
 * borda da marca e nada mais. Seção que não vende não pode disputar atenção com
 * as que vendem.
 * ----------------------------------------------------------------------- */

.vlr-filtro a {
	transition: border-color 280ms var(--vlr-curva), color 280ms var(--vlr-curva), transform 280ms var(--vlr-curva);
}

.vlr-filtro a:hover,
.vlr-filtro a:focus-visible {
	transform: translate3d(0, -2px, 0);
}

/* --------------------------------------------------------------------------
 * 7. A chamada final
 *
 * A única faixa escura depois do hero, e o fecho da página. Ganha a mesma
 * sequência de entrada do hero, para a página terminar com o gesto com que
 * começou.
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.vlr-anima .vlr-final h2,
	.vlr-anima .vlr-final .vlr-final__sub,
	.vlr-anima .vlr-final .vlr-hero__acoes {
		animation: vlr-sobe 760ms var(--vlr-curva) both;
	}

	.vlr-anima .vlr-final .vlr-final__sub {
		animation-delay: 130ms;
	}

	.vlr-anima .vlr-final .vlr-hero__acoes {
		animation-delay: 260ms;
	}
}

@keyframes vlr-sobe {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
}

/* --------------------------------------------------------------------------
 * 8. Movimento reduzido
 *
 * Nenhum dos gestos acima carrega informação que não esteja no conteúdo. Com
 * movimento reduzido tudo nasce no estado final, e nada se perde.
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vlr-caso-card,
	.vlr-card,
	.vlr-caminho,
	.vlr-capacidade,
	.vlr-filtro a,
	.vlr-caso-card__img,
	.vlr-card__tela img,
	.vlr-planta s,
	.vlr-processo__passo,
	.vlr-processo--regua .vlr-processo__n {
		transition: none;
	}
}

/* A tela grande do destaque usa a mesma moldura, e por isso o mesmo recuo. */
.vlr-caso-destaque__principal {
	position: relative;
	padding-block-start: 22px;
	background: rgb(16 11 24 / 92%);
	overflow: hidden;
}

.vlr-caso-destaque__principal img {
	object-position: center 0%;
	transition: object-position 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vlr-caso-destaque:hover .vlr-caso-destaque__principal img,
.vlr-caso-destaque:focus-within .vlr-caso-destaque__principal img {
	object-position: center 78%;
}

@media (prefers-reduced-motion: reduce) {
	.vlr-caso-destaque__principal img {
		transition: none;
	}
}

/*
 * O enquadramento de repouso desce um pouco.
 *
 * `object-position: top` supõe que a informação de um screenshot está em cima,
 * e isso vale para site claro. Não vale para o portal de games: o topo dele é um
 * herói quase preto, e o card virava um retângulo preto — que, nas palavras do
 * próprio dono, não prova nada.
 *
 * 16% passa da faixa escura e ainda mostra o cabeçalho do projeto, que é o que
 * identifica a tela. Ao apontar, a página rola até 78% e mostra o corpo.
 */
.vlr-caso-card__img,
.vlr-card__tela img,
.vlr-caso-destaque__principal img {
	object-position: center 16%;
}


/* Na página de serviços a planta responde ao apontar da frente inteira, e não
   do cartão — lá a frente É o bloco. */
.vlr-frente:hover .vlr-planta s,
.vlr-frente:focus-within .vlr-planta s {
	background: color-mix(in srgb, var(--vlr-roxo) 16%, var(--vlr-papel));
	border-color: color-mix(in srgb, var(--vlr-roxo) 34%, transparent);
}

.vlr-frente .vlr-planta {
	max-inline-size: 280px;
}

/* --------------------------------------------------------------------------
 * As telas grandes: página de produto e topo da página de serviço
 * ----------------------------------------------------------------------- */

.vlr-produto-tela {
	position: relative;
	margin: 0 0 var(--vlr-e7);
	padding-block-start: 22px;
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	overflow: hidden;
	background: rgb(16 11 24 / 92%);
	line-height: 0;
}

/*
 * `cover` com proporção fixa, e não a imagem inteira.
 *
 * Com `block-size: auto` a página aparecia por completo e minúscula — um
 * screenshot de 1000px deitado em 686px vira uma mancha, e uma mancha escura
 * vira retângulo preto. O recorte mostra a interface em tamanho legível, que é
 * a diferença entre ilustrar e provar.
 */
.vlr-produto-tela img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 16%;
	transition: object-position 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vlr-produto-tela:hover img {
	object-position: center 78%;
}

/* No topo da página de serviço a moldura já existe; falta só o recuo da barra. */
.vlr-topo-pagina__tela {
	position: relative;
	padding-block-start: 22px;
	background: rgb(16 11 24 / 92%);
}

@media (prefers-reduced-motion: reduce) {
	.vlr-produto-tela img {
		transition: none;
	}
}

/* ==========================================================================
 * A página de produto: estrutura de venda
 *
 * A ordem é problema → tela → módulos → prova → implantação → preço, e ela veio
 * da pesquisa de mercado de 17/08/2026 (registrada em `Valoar\Pagina_Produto`).
 * Quem chega numa página de produto não quer a descrição do software: quer
 * saber se você entende o problema dele.
 * ====================================================================== */

.vlr-produto-dor {
	max-inline-size: 46rem;
}

.vlr-produto-dor h2 {
	font-size: clamp(1.8rem, 4.2vw, 2.9rem);
	line-height: 1.08;
	margin-block: var(--vlr-e3) var(--vlr-e4);
	text-wrap: balance;
	max-inline-size: 20ch;
}

.vlr-produto-dor__apoio {
	font-size: 1.08rem;
	color: var(--vlr-tinta-fraca);
	max-inline-size: 54ch;
}

.vlr-produto-dor__texto {
	margin-block-start: var(--vlr-e5);
	padding-block-start: var(--vlr-e5);
	border-block-start: 1px solid var(--vlr-borda);
}

/* A legenda embaixo da tela grande. Dizer ONDE ela foi tirada é o que
   transforma screenshot em prova; sem isso é ilustração. */
.vlr-produto-tela figcaption {
	padding: var(--vlr-e3) var(--vlr-e4);
	background: var(--vlr-papel);
	border-block-start: 1px solid var(--vlr-borda);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * As peças: um módulo por cartão, com o interruptor desenhado
 *
 * O interruptor não é enfeite. "Liga e desliga sozinho" é o argumento contra a
 * plataforma pronta, onde se paga por tudo e usa-se metade — desenhar o gesto
 * diz isso sem repetir a frase em cada cartão.
 * ----------------------------------------------------------------------- */

.vlr-pecas {
	list-style: none;
	margin: var(--vlr-e6) 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.vlr-peca {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 12px;
	background: var(--vlr-papel);
	transition: border-color 320ms var(--vlr-curva), transform 320ms var(--vlr-curva), box-shadow 320ms var(--vlr-curva);
}

.vlr-peca:hover {
	transform: translate3d(0, -2px, 0);
	border-color: color-mix(in srgb, var(--vlr-produto, var(--vlr-roxo)) 42%, transparent);
	box-shadow: var(--vlr-sombra-2, 0 16px 34px -20px rgb(27 21 35 / 34%));
}

/* O interruptor, desenhado e não escrito. Nasce ligado, porque o módulo está
   no produto; ao apontar ele desliza, mostrando que a escolha é do cliente. */
.vlr-peca__chave {
	display: block;
	inline-size: 34px;
	block-size: 20px;
	flex: none;
	margin-block-start: 2px;
	padding: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vlr-produto, var(--vlr-roxo)) 26%, transparent);
	transition: background 320ms var(--vlr-curva);
}

.vlr-peca__chave s {
	display: block;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: var(--vlr-produto, var(--vlr-roxo));
	transform: translate3d(14px, 0, 0);
	transition: transform 320ms var(--vlr-curva);
}

.vlr-peca:hover .vlr-peca__chave s {
	transform: translate3d(0, 0, 0);
}

.vlr-peca:hover .vlr-peca__chave {
	background: var(--vlr-borda);
}

/*
 * AS CHAVES SE LIGAM SOZINHAS QUANDO A GRADE ENTRA — sem encostar no hover.
 *
 * Este efeito ja quebrou o hover duas vezes, e as duas por erro meu. Vale
 * escrever por que, porque a armadilha nao aparece em teste nem no console.
 *
 * 1o erro: fiz a chave NASCER desligada e so ligar quando a grade entrasse.
 *    Quem depende de um evento para chegar no estado de repouso fica preso
 *    quando o evento nao vem. E a chave desligada mais o hover, que tambem
 *    desliga, davam a mesma coisa: mouse em cima e nada acontecia.
 *
 * 2o erro: amarrei tudo a `[data-anima="dentro"]`. No Chrome esse atributo
 *    NUNCA vira "dentro" — ver o bloco @supports do movimento.css: onde
 *    `animation-timeline: view()` existe, a entrada e feita so em CSS pela
 *    linha do tempo da rolagem, e o JS nao marca nada. As regras não casavam,
 *    e a chave ficava no estado desligado para sempre.
 *
 * A forma certa, e a que este bloco usa:
 *
 * - O estado de repouso continua sendo LIGADO, escrito na regra normal la em
 *   cima. Nada aqui redefine isso. Sem suporte, sem JS, com movimento
 *   reduzido: a chave esta ligada e o hover funciona. O efeito e um extra que
 *   pode faltar, nunca uma condicao para a pagina estar certa.
 *
 * - O quadro-chave tem so `from`, e o `to` fica implicito: o proprio estado
 *   natural do elemento. Mesmo idioma do `vlr-entra` no movimento.css.
 *
 * - `animation-fill-mode` fica em `none`, que e o padrao, e e A PECA CENTRAL.
 *   Fora da faixa de entrada a animacao nao aplica valor nenhum, entao quem
 *   manda e a regra normal — e o hover volta a ser dono do `transform` assim
 *   que a grade termina de entrar. Com `both` ou `forwards` a animacao
 *   continuaria pendurada e mataria o hover de novo, que foi exatamente o
 *   estrago das duas primeiras tentativas.
 *
 * - A escada usa a linha do tempo do PAI, deslocando a faixa de cada filha, e
 *   nao atraso em milissegundos. Um cronometro por grade em vez de um por
 *   cartao, igual ao resto do site. E a faixa comeca cedo, dentro da propria
 *   entrada do cartao, para a virada acontecer enquanto ele ainda esta
 *   surgindo.
 */
@keyframes vlr-chave-liga {

	from {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes vlr-chave-trilho {

	from {
		background: var(--vlr-borda);
	}
}

@supports (animation-timeline: view()) {

	.vlr-anima .vlr-pecas .vlr-peca__chave s {
		animation: vlr-chave-liga linear;
		animation-timeline: view();
		animation-range: entry 2% cover 34%;
	}

	.vlr-anima .vlr-pecas .vlr-peca__chave {
		animation: vlr-chave-trilho linear;
		animation-timeline: view();
		animation-range: entry 2% cover 34%;
	}

	.vlr-anima .vlr-pecas > :nth-child(2) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(2) .vlr-peca__chave { animation-range: entry 7% cover 39%; }
	.vlr-anima .vlr-pecas > :nth-child(3) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(3) .vlr-peca__chave { animation-range: entry 12% cover 44%; }
	.vlr-anima .vlr-pecas > :nth-child(4) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(4) .vlr-peca__chave { animation-range: entry 17% cover 49%; }
	.vlr-anima .vlr-pecas > :nth-child(5) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(5) .vlr-peca__chave { animation-range: entry 22% cover 54%; }
	.vlr-anima .vlr-pecas > :nth-child(6) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(6) .vlr-peca__chave { animation-range: entry 27% cover 59%; }
	.vlr-anima .vlr-pecas > :nth-child(7) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(7) .vlr-peca__chave { animation-range: entry 32% cover 64%; }
	.vlr-anima .vlr-pecas > :nth-child(8) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(8) .vlr-peca__chave { animation-range: entry 37% cover 69%; }
	.vlr-anima .vlr-pecas > :nth-child(n + 9) .vlr-peca__chave s,
	.vlr-anima .vlr-pecas > :nth-child(n + 9) .vlr-peca__chave { animation-range: entry 42% cover 74%; }

	/* Com o mouse em cima, o hover manda e a animacao sai da frente. Sem isto,
	   apontar durante a entrada daria um empurra-empurra entre os dois. */
	.vlr-anima .vlr-pecas .vlr-peca:hover .vlr-peca__chave s,
	.vlr-anima .vlr-pecas .vlr-peca:hover .vlr-peca__chave,
	.vlr-anima .vlr-pecas .vlr-peca:focus-within .vlr-peca__chave s,
	.vlr-anima .vlr-pecas .vlr-peca:focus-within .vlr-peca__chave {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Quem pediu menos movimento recebe a chave ligada e parada. */
	.vlr-anima .vlr-pecas .vlr-peca__chave s,
	.vlr-anima .vlr-pecas .vlr-peca__chave {
		animation: none;
	}
}

.vlr-peca b {
	display: block;
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1.2;
}

.vlr-peca p {
	margin: 6px 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--vlr-tinta-fraca);
}

/* --------------------------------------------------------------------------
 * O bloco de preço sem preço
 *
 * Ele não some quando não há tabela. Sumir seria pior: "quanto custa" é a
 * pergunta mais frequente da página, e página que não a reconhece parece estar
 * escondendo. A pesquisa de mercado mostrou que o concorrente mais forte da
 * categoria também não publica preço — venda consultiva desta faixa fecha por
 * conversa, e isto é o padrão, não uma lacuna disfarçada.
 * ----------------------------------------------------------------------- */

.vlr-produto-preco {
	max-inline-size: 44rem;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--vlr-e3);
}

.vlr-produto-preco h2 {
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
	max-inline-size: 22ch;
}

.vlr-produto-preco p {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--vlr-tinta-fraca);
}

.vlr-produto-preco .vlr-btn {
	margin-block-start: var(--vlr-e3);
}

@media (prefers-reduced-motion: reduce) {
	.vlr-peca,
	.vlr-peca__chave,
	.vlr-peca__chave s {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Duas colunas na página de produto
 *
 * A primeira versão empilhava tudo em largura cheia: parágrafo, imagem,
 * parágrafo. Isso lê como documento, não como página de produto — e a Home, que
 * o dono aprovou, é feita de composição lado a lado.
 *
 * A coluna de texto é a maior e vem primeiro na marcação: em coluna única (o
 * celular), o argumento aparece antes da imagem, que é a ordem certa de leitura.
 * ----------------------------------------------------------------------- */

.vlr-par-produto {
	display: grid;
	gap: var(--vlr-e6);
	align-items: center;
}

@media (min-width: 56.25rem) {
	.vlr-par-produto {
		/*
		 * A coluna de texto passou a ser a maior.
		 *
		 * Com 1fr contra 1.05fr ela ficava em 520px, e o título entrava em
		 * QUATRO linhas curtas de Amberly Black — que param de ser frase e viram
		 * bloco de textura. A tela perde 60px e não sente; o título ganha a
		 * terceira linha cheia.
		 */
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(var(--vlr-e6), 5vw, var(--vlr-e8));
	}

	/*
	 * No bloco de preço a proporção inverte: o texto manda e o quadro de conta
	 * é apoio, não protagonista.
	 *
	 * `center` e não `start`: com `start` o quadro grudava no topo e sobrava um
	 * vão embaixo dele do tamanho da diferença entre as duas colunas. Alinhado
	 * ao meio, os dois blocos dividem o mesmo eixo e o vão some.
	 */
	.vlr-par-produto--preco {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: center;
	}
}

.vlr-par-produto__texto {
	min-inline-size: 0;
}

/*
 * 18ch quebrava "O trabalho que rouba a manhã não aparece em lugar nenhum do
 * orçamento" em QUATRO linhas curtas, e quatro linhas de Amberly Black param de
 * ser frase e viram bloco de textura. 26ch devolve três linhas cheias na coluna
 * de 560px, medido.
 */
.vlr-par-produto__texto h2 {
	font-size: clamp(1.8rem, 4vw, 2.7rem);
	line-height: 1.1;
	margin-block: var(--vlr-e3) var(--vlr-e5);
	text-wrap: balance;
	max-inline-size: 30ch;
}

.vlr-par-produto__apoio {
	font-size: 1.05rem;
	line-height: 1.62;
	color: var(--vlr-tinta-fraca);
	max-inline-size: 54ch;
	margin: 0;
}

.vlr-par-produto__prosa {
	margin-block-start: var(--vlr-e5);
	padding-block-start: var(--vlr-e5);
	border-block-start: 1px solid var(--vlr-borda);
}

/* O botão estava colado no parágrafo. `var(--vlr-e6)` é o mesmo respiro que
   separa parágrafo de botão no hero e na chamada final. */
.vlr-par-produto__texto .vlr-btn {
	margin-block-start: var(--vlr-e6);
}

.vlr-par-produto__tela {
	margin: 0;
	min-inline-size: 0;
}

/* A tela ao lado é menor que a de largura cheia, então o recorte abre um pouco:
   16/10 mostra mais interface que 16/9 sem virar tira. */
.vlr-par-produto__tela img {
	aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
 * A faixa na cor do produto
 *
 * Segunda faixa escura da página, no meio. É ela que dá o ritmo escuro-claro que
 * a Home tem, e é o que faz seis páginas de produto parecerem seis coisas
 * saindo de um template só.
 *
 * `--vlr-produto` e `--vlr-produto-tinta` já vêm do `<article>`, calculados a
 * partir da cor cadastrada — a faixa funciona no dourado do Anilha e no verde do
 * Publisher sem ninguém escolher nada.
 * ----------------------------------------------------------------------- */

/*
 * A faixa usa `--vlr-produto-fundo`, que é a cor do produto já escurecida até o
 * branco passar em 4,5:1. Por isso a tinta aqui é branca SEMPRE, e não a
 * calculada pela luminosidade da cor crua — era ela que trazia texto preto sobre
 * o verde do Publisher.
 *
 * O clarão no alto à esquerda é o mesmo do hero: é ele que impede a faixa de ler
 * como bloco de cor chapado.
 */
.vlr-em-produto {
	background:
		radial-gradient(90% 120% at 12% 0%, rgb(255 255 255 / 14%) 0%, transparent 58%),
		radial-gradient(80% 90% at 100% 100%, rgb(0 0 0 / 22%) 0%, transparent 60%),
		var(--vlr-produto-fundo, var(--vlr-roxo));
	color: #fff;
}

.vlr-em-produto h2,
.vlr-em-produto h3,
.vlr-em-produto b {
	color: #fff;
}

/*
 * Texto de apoio na faixa colorida: tinta CHEIA, não 78%.
 *
 * A 78% o contraste caía para 3,94:1 no verde do Publisher e 3,74:1 no FORJA —
 * abaixo dos 4,5:1 da norma, e reprovando em silêncio. Transparência sobre uma
 * cor de marca arbitrária é justamente o que não dá para prever: cada produto
 * tem a sua, e uma delas sempre vai ficar do lado errado da conta.
 *
 * A hierarquia entre título e apoio passa a vir do tamanho e do peso, que não
 * dependem da cor de fundo.
 */
.vlr-em-produto p,
.vlr-em-produto .vlr-processo__detalhe {
	/*
	 * 100%, e não 88%.
	 *
	 * O comentário acima já dizia "tinta CHEIA" e a regra estava em 88% — um
	 * conserto anterior parou no meio do caminho e ninguém percebeu, porque 88%
	 * de branco parece branco. A varredura mediu 3,99:1 no Publisher e 4,35:1 no
	 * FORJA, os dois abaixo dos 4,5:1 da norma, nas CINCO páginas de produto.
	 *
	 * Transparência sobre cor de marca arbitrária é justamente o que não dá para
	 * prever: cada produto tem a sua, e alguma sempre cai do lado errado da
	 * conta. Tinta cheia tira a variável da equação.
	 */
	color: #fff;
}

/*
 * O selo escurece o fundo em vez de clareá-lo.
 *
 * Ele tinha `background: rgb(255 255 255 / 16%)`, e essa era a pior falha da
 * faixa: a pastilha clara levantava a luminosidade EXATAMENTE atrás do texto
 * branco, então o rótulo ficava com menos contraste que o texto ao redor —
 * 3,54:1 no Anilha. Um destaque que atrapalha a leitura do que destaca.
 *
 * Com preto translúcido o efeito se inverte: a pastilha continua se separando
 * da faixa, e agora empurra o contraste do texto para cima em vez de para
 * baixo. Funciona em qualquer cor de produto, inclusive nas que ainda não
 * existem.
 */
.vlr-em-produto .vlr-dado,
.vlr-em-produto .vlr-selo {
	background: rgb(0 0 0 / 22%);
	color: #fff;
}

/* A régua do processo dentro da faixa: o trilho e o número trocam para a tinta
   do produto, senão ficam roxos sobre a cor do produto. */
.vlr-em-produto .vlr-processo--regua .vlr-processo__passo::before {
	background: rgb(255 255 255 / 58%);
}

.vlr-em-produto .vlr-processo--regua .vlr-processo__n {
	background: transparent;
	border-color: rgb(255 255 255 / 42%);
	color: #fff;
}

.vlr-em-produto .vlr-processo--regua .vlr-processo__passo:hover .vlr-processo__n {
	border-color: #fff;
	color: #fff;
}

/* --------------------------------------------------------------------------
 * O quadro "o que entra na conta"
 *
 * A resposta a "quanto custa" era um texto centralizado dizendo "depende" — e
 * "depende" sem mostrar a variável é o mesmo que não responder.
 *
 * Os três números saem do cadastro e do modelo comercial. Nenhum é preço, e é
 * exatamente por isso que eles podem estar aqui.
 * ----------------------------------------------------------------------- */

.vlr-conta {
	padding: var(--vlr-e5);
	border: 1px solid var(--vlr-borda);
	border-radius: 14px;
	background: var(--vlr-papel);
	box-shadow: var(--vlr-sombra-1, 0 2px 10px -6px rgb(27 21 35 / 24%));
}

.vlr-conta > .vlr-dado {
	display: block;
	margin-block-end: var(--vlr-e4);
}

.vlr-conta ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vlr-e4);
}

.vlr-conta li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
}

/*
 * `--vlr-produto-forte` e não `--vlr-produto`: aqui o número é LETRA sobre
 * branco, e a cor de área não serve para isso. O dourado do Anilha dava 2,42:1.
 */
.vlr-conta b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--vlr-produto-forte, var(--vlr-roxo));
	min-inline-size: 1.6ch;
}

.vlr-conta span {
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--vlr-tinta-fraca);
}

.vlr-conta__nota {
	margin: var(--vlr-e4) 0 0;
	padding-block-start: var(--vlr-e4);
	border-block-start: 1px solid var(--vlr-borda);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--vlr-tinta-fraca);
}

/* --------------------------------------------------------------------------
 * Profundidade na tela do produto
 *
 * O bloco do problema era texto e uma imagem parada — chapado, nas palavras do
 * dono. O que a Home tem e ele aprovou é PROFUNDIDADE.
 *
 * O MECANISMO É O QUE JÁ FUNCIONA NO TEMA, copiado do parallax do hero em
 * `movimento.css`: `@supports`, atalho `animation:` e `animation-range: cover`.
 *
 * Duas tentativas anteriores falharam em silêncio e vale registrar as duas,
 * porque as duas parecem certas no inspetor:
 *
 *   1. Animar `object-position` sob timeline de rolagem. Nome, duração e
 *      timeline aparecem corretos e o recorte não sai do lugar — a propriedade
 *      não interpola nesse contexto.
 *   2. `animation-range: entry 15% exit 15%`. A faixa mista não resolveu e a
 *      animação simplesmente não rodou. `cover` é o que o hero usa e o que
 *      funciona.
 *
 * A regra que sobrou: quando o tema já tem um efeito funcionando, copiar o
 * mecanismo dele sai mais barato que reinventar um equivalente.
 * ----------------------------------------------------------------------- */

.vlr-par-produto__tela {
	position: relative;
	overflow: hidden;
	box-shadow:
		0 2px 6px -2px rgb(27 21 35 / 22%),
		0 40px 70px -34px rgb(27 21 35 / 40%);
}

/*
 * A imagem é 14% mais alta que a moldura, e é essa sobra que o parallax
 * percorre. Sem ela, deslocar a imagem abriria uma faixa vazia embaixo.
 */
/*
 * A moldura fixa a proporção e a imagem é POSICIONADA dentro dela.
 *
 * `block-size: 114%` no fluxo normal não resolvia: altura em porcentagem só vale
 * quando o pai tem altura definida, e a moldura era do tamanho do conteúdo. O
 * navegador caía em `auto`, o `aspect-ratio` assumia, e a sobra que o parallax
 * precisa percorrer nunca existia. O sintoma era a imagem no tamanho certo e o
 * efeito parado.
 */
.vlr-par-produto__tela {
	aspect-ratio: 16 / 10;
}

.vlr-par-produto__tela img {
	position: absolute;
	inset-block-start: 22px;
	inset-inline: 0;
	inline-size: 100%;
	block-size: calc(114% - 22px);
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center top;
}

/*
 * O PARALLAX POR ROLAGEM NÃO ENTROU AQUI, e vale registrar por quê para ninguém
 * tentar de novo achando que é esquecimento.
 *
 * Três abordagens, nenhuma animou este elemento, e todas parecem certas no
 * inspetor — nome da animação, timeline e duração aparecem corretos:
 *
 *   1. Animar `object-position`: a propriedade não interpola sob timeline de
 *      rolagem neste navegador.
 *   2. `animation-range: entry X exit Y`: a faixa mista não roda.
 *   3. `animation-range: cover` com `transform`, copiando o parallax do hero que
 *      funciona: a animação fica anexada e o `transform` computado permanece
 *      `none`, o que indica timeline inativa para esta caixa.
 *
 * A diferença provável para o hero é a posição absoluta dentro de moldura de
 * proporção fixa. Perseguir isso custaria mais do que entrega: a página já tem
 * entrada por rolagem em toda seção, o interruptor dos módulos, os números que
 * contam e a revelação ao apontar — que é o gesto mais forte dos dois, porque
 * responde a uma intenção em vez de acontecer sozinho.
 *
 * A sobra de 14% na imagem fica: é ela que o hover percorre.
 */

/*
 * A REVELAÇÃO AO APONTAR.
 *
 * Passar o mouse desce a página dentro da moldura em 1,2s. É lento de propósito:
 * a leitura de "a página continua" só acontece se der tempo de ver.
 */
.vlr-par-produto__tela img {
	transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.vlr-par-produto__tela:hover img,
.vlr-par-produto__tela:focus-within img {
	transform: translate3d(0, -12%, 0);
}

/* --------------------------------------------------------------------------
 * O quadro de conta ganha vida
 * ----------------------------------------------------------------------- */

.vlr-conta {
	transition: transform 420ms var(--vlr-curva), box-shadow 420ms var(--vlr-curva);
}

.vlr-conta:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: var(--vlr-sombra-2, 0 16px 34px -20px rgb(27 21 35 / 34%));
}

.vlr-conta li {
	transition: transform 320ms var(--vlr-curva);
}

.vlr-conta li:hover {
	transform: translate3d(4px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.vlr-conta,
	.vlr-conta li,
	.vlr-par-produto__tela img {
		animation: none;
		transition: none;
		transform: none;
	}
}


/* --------------------------------------------------------------------------
 * ALVO MÍNIMO DE 24px em listas de link
 *
 * A varredura de 18/08/2026 achou links de 18px de altura em lista — na lista
 * dos dois modelos do Sobre. Lista não é frase: a isenção da WCAG 2.5.8 vale
 * para link dentro de texto corrido, onde a entrelinha do parágrafo é que manda
 * no tamanho. Aqui cada item é uma linha própria e o tamanho é escolha nossa.
 *
 * 4px de diferença parecem nada até a pessoa estar num ônibus, com o celular
 * chacoalhando, ou com tremor na mão.
 *
 * `inline-block` com `min-block-size` em vez de padding solto: padding aumenta a
 * área mas não garante piso, e um rótulo de uma palavra continuaria curto. O
 * `align-content` mantém o texto no meio da caixa maior, então o desenho não
 * muda — só a área que aceita o toque.
 * ----------------------------------------------------------------------- */

.vlr-modelo__itens a {
	display: inline-block;
	min-block-size: 24px;
	align-content: center;
}