/*
 * A home.
 *
 * Sete dobras com ritmo alternado de propósito: roxo cheio, papel, superfície,
 * cor do produto, papel, roxo cheio. Seção empilhada com o mesmo peso é o que
 * faz página longa parecer template — o olho precisa de troca de fundo para
 * saber que mudou de assunto.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

/* --------------------------------------------------------------------------
 * 1. Hero
 * ----------------------------------------------------------------------- */

.vlr-hero {
	padding-block: clamp(56px, 9vw, 116px) clamp(60px, 10vw, 124px);

	/*
	 * Profundidade sem imagem.
	 *
	 * O roxo chapado dava aparência de bloco de cor, não de fundo. As duas
	 * camadas aqui são: um clarão frio no alto à direita, atrás da pilha de
	 * sistemas, e a tinta escura embaixo à esquerda puxando o peso para o
	 * texto. Nenhuma delas tem borda visível — o olho lê como luz, não como
	 * gradiente decorativo.
	 */
	background:
		radial-gradient(120% 90% at 78% 8%, rgb(139 95 176 / 55%) 0%, transparent 62%),
		radial-gradient(90% 80% at 0% 100%, rgb(27 21 35 / 60%) 0%, transparent 60%),
		var(--vlr-roxo);
	position: relative;
	overflow: hidden;
}

/*
 * Malha de pontos, quase invisível de propósito.
 *
 * Dá textura para a luz ter em que bater. A 6% de opacidade ela não é vista,
 * é sentida — subir isso transforma em papel de parede.
 */
.vlr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgb(255 255 255 / 26%) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .06;
	pointer-events: none;
}

.vlr-hero > * {
	position: relative;
}

.vlr-hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: var(--vlr-e7) var(--vlr-e8);
	align-items: center;
}

/*
 * 16ch quebrava a headline em quatro linhas depois que as telas entraram e
 * estreitaram a coluna. Quatro linhas de Amberly Black viram um bloco, não uma
 * frase. 19ch a devolve para três, e `balance` distribui as palavras em vez de
 * deixar "empresas." sozinho na última.
 */
.vlr-hero h1 {
	margin-block: var(--vlr-e3) var(--vlr-e4);
	max-width: 19ch;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
 * A pilha de sistemas do hero
 *
 * O catálogo aparece antes de qualquer rolagem. Cada linha usa a cor real do
 * sistema, então a mesma cor reaparece no card lá embaixo e na página dele —
 * a ligação se faz sozinha, sem legenda.
 * ----------------------------------------------------------------------- */

.vlr-pilha {
	display: grid;
	gap: 10px;
}

.vlr-pilha__item {
	display: flex;
	align-items: center;
	gap: var(--vlr-e3);
	padding: 12px 14px;
	border-radius: var(--vlr-raio);
	background: rgb(255 255 255 / 9%);
	border: 1px solid rgb(255 255 255 / 12%);
	backdrop-filter: blur(2px);

	/*
	 * Cada linha entra um pouco depois da anterior. É a única animação da
	 * primeira dobra e ela existe para o olho ler de cima para baixo, não
	 * para enfeitar.
	 */
	animation: vlr-pilha-entra .5s both;
	animation-delay: calc(var(--i) * 70ms);
}

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

@keyframes vlr-pilha-entra {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* A placa herda a cor do sistema, igual ao card do catálogo. */
.vlr-pilha__item .vlr-placa {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--vlr-produto);
}

.vlr-pilha__texto {
	display: grid;
	gap: 1px;
	min-width: 0;
	flex: 1;
}

.vlr-pilha__texto b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1.15;
	color: #fff;
}

.vlr-pilha__texto span {
	font-family: var(--vlr-dado);
	font-size: 0.62rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 62%);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vlr-pilha__estado {
	font-family: var(--vlr-dado);
	font-size: 0.58rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 70%);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 5px;
}

.vlr-pilha__estado::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Só o que já está no ar ganha o ponto verde. O resto fica neutro. */
.vlr-pilha__estado--no_ar::before,
.vlr-pilha__estado--demo::before {
	background: #7fd6a8;
}

/* A tagline em Amberly Light, o único lugar dela no site inteiro. */
.vlr-hero__tag {
	color: rgb(255 255 255 / 88%);
	margin-bottom: var(--vlr-e6);
}

.vlr-hero__sub {
	font-size: clamp(1.02rem, 1.9vw, 1.2rem);
	line-height: 1.55;
	max-width: 56ch;
	color: rgb(255 255 255 / 86%);
	margin-bottom: var(--vlr-e7);
}

/* `.vlr-hero__acoes` foi para `base.css`: quatro templates usam o par de
   botões, e só a home carregava esta folha. */

/*
 * Os três serviços, embaixo dos CTAs. Eram itens com visto verde, o que dizia
 * "incluído no pacote" — mas eles são LINKS para três páginas, e o visitante
 * que lê como lista de benefício não clica.
 *
 * Viraram pílulas com seta. A seta é o único enfeite e ela informa: indica que
 * há página do outro lado.
 */
.vlr-hero__frentes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e2);
	margin-top: var(--vlr-e6);
	padding-top: var(--vlr-e5);
	border-top: 1px solid rgb(255 255 255 / 16%);
	list-style: none;
}

.vlr-hero__frentes a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding-inline: var(--vlr-e4);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 999px;
	font-size: 0.88rem;
	line-height: 1.2;
	color: rgb(255 255 255 / 92%);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vlr-rapido) var(--vlr-curva), border-color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-hero__frentes a::after {
	content: "→";
	opacity: 0.6;
	transition: transform var(--vlr-rapido) var(--vlr-curva), opacity var(--vlr-rapido) var(--vlr-curva);
}

.vlr-hero__frentes a:hover,
.vlr-hero__frentes a:focus-visible {
	background: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 42%);
}

.vlr-hero__frentes a:hover::after {
	transform: translateX(3px);
	opacity: 1;
}

/*
 * Abaixo de 30rem o rótulo mais longo ("SaaS e Plataformas sob medida") não
 * cabe numa pílula de linha única. Aí ela ocupa a largura toda e pode quebrar,
 * que é melhor do que estourar a caixa.
 */
@media (max-width: 34rem) {
	/*
	 * O `li` precisa esticar junto. Sem ele, `width: 100%` no link mede 100% de
	 * um item flex que já encolheu para caber no conteúdo — ou seja, não muda
	 * nada, e o rótulo mais longo continua espremido.
	 */
	.vlr-hero__frentes li {
		width: 100%;
	}

	.vlr-hero__frentes a {
		width: 100%;
		white-space: normal;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlr-hero__frentes a,
	.vlr-hero__frentes a::after {
		transition-duration: 0.01ms;
	}
}
/* --------------------------------------------------------------------------
 * 2. Prova imediata
 *
 * Vem antes de qualquer promessa, e é de propósito: o visitante lê um número
 * de cliente real antes de ler a primeira frase de venda.
 * ----------------------------------------------------------------------- */

.vlr-faixa {
	background: var(--vlr-superficie);
	border-bottom: 1px solid var(--vlr-borda);
	padding-block: var(--vlr-e6);
}

.vlr-faixa__interno {
	display: grid;
	gap: var(--vlr-e4);
}

.vlr-faixa__conteudo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vlr-e5) var(--vlr-e7);
}

.vlr-faixa__cliente {
	margin: 0;
	max-width: none;
	display: grid;
	gap: 2px;
}

.vlr-faixa__cliente strong {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1.1;
}

.vlr-faixa__cliente span {
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

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

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

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

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

/*
 * `.vlr-secao__cab` foi para `base.css`.
 *
 * Título à esquerda, frase de apoio à direita — empilhar os dois centralizados
 * é o gesto mais previsível que existe e aparece em toda landing genérica. Cinco
 * templates usam esse cabeçalho, e enquanto ele morava aqui só a home o
 * recebia.
 */

/* --------------------------------------------------------------------------
 * 4. Os três caminhos
 *
 * A bifurcação explícita do site. Quem quer só um site institucional precisa
 * se reconhecer aqui, senão sai da página achando que a Valoar só vende
 * sistema — e vai embora sem falar com ninguém.
 * ----------------------------------------------------------------------- */

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

.vlr-caminho {
	display: flex;
	flex-direction: column;
	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 do meio é o mais comum e ganha um filete roxo no topo. Não é destaque de
 * venda — é orientação: a maior parte de quem chega pelo buscador quer um
 * site, não um sistema.
 */
.vlr-caminho:nth-child(2) {
	border-top: 3px solid var(--vlr-roxo);
}

.vlr-caminho h3 {
	font-size: 1.28rem;
	line-height: 1.15;
}

.vlr-caminho p {
	font-size: 0.97rem;
	line-height: 1.55;
	margin: 0;
	max-width: none;
}

.vlr-caminho__para {
	color: var(--vlr-tinta-fraca);
	font-size: 0.9rem !important;
	padding-top: var(--vlr-e3);
	border-top: 1px dashed var(--vlr-borda);
	margin-top: auto !important;
}

.vlr-caminho .vlr-btn {
	margin-top: var(--vlr-e4);
	justify-content: center;
}

/* --------------------------------------------------------------------------
 * 6. Quem faz
 * ----------------------------------------------------------------------- */

/*
 * Coluna única quando não há foto — que é o caso permanente.
 *
 * O grid era `1fr | 300px`, e a segunda coluna existia para `.vlr-quem__foto`.
 * Só que o §35 proíbe foto de banco e a Valoar não tem retrato de equipe para
 * pôr ali, então a coluna nunca foi preenchida: sobravam 300px de branco
 * exatamente ao lado do texto que explica a empresa.
 *
 * `:has()` resolve sem tocar no template: com foto o layout de duas colunas
 * volta sozinho, sem foto o texto fica na largura de leitura e o vazio some.
 */
.vlr-quem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: var(--vlr-e7) var(--vlr-e8);
	align-items: center;
}

.vlr-quem:not(:has(.vlr-quem__foto)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 72ch;
}

.vlr-quem h2 {
	margin-block: var(--vlr-e3) var(--vlr-e4);
}

.vlr-quem__foto img {
	border-radius: var(--vlr-raio);
	width: 100%;
}

/*
 * A ficha.
 *
 * Ocupa a metade que antes só existia se houvesse logo cadastrado. Números
 * saem do banco, e o "1" é o argumento da seção inteira: uma pessoa entre o
 * cliente e o código. Escrever isso em número diz mais rápido do que o
 * parágrafo ao lado.
 */
.vlr-ficha {
	list-style: none;
	margin: 0;
	padding: var(--vlr-e5);
	display: grid;
	gap: var(--vlr-e4);
	background: var(--vlr-superficie);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
}

.vlr-ficha li {
	display: grid;
	gap: 2px;
	padding-left: var(--vlr-e4);
	border-left: 2px solid var(--vlr-roxo);
}

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

.vlr-ficha span {
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--vlr-tinta-fraca);
}

/* O local é texto, não número: a fonte de marca em 1.5rem quebraria a linha. */
.vlr-ficha__local {
	border-left-color: var(--vlr-laranja);
}

.vlr-ficha__local b {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--vlr-tinta);
}

/*
 * `.vlr-final` e a costura dela com o rodapé foram para `base.css`.
 *
 * Em 17/08/2026 a folha inteira estava faltando fora da home. O fundo roxo do
 * bloco fora escrito aqui na sessão anterior, junto do bug de subheadline
 * branca sobre branco — mas escrito na folha errada, então `/servicos/`,
 * `/sobre/`, a página de serviço e a de case continuavam sem ele.
 */

/* --------------------------------------------------------------------------
 * O convite que fecha a grade do catálogo
 * ----------------------------------------------------------------------- */

.vlr-card--convite {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e3);
	background: transparent;
	border: 1px dashed var(--vlr-borda);
	box-shadow: none;
}

/* Sem cor de produto no topo: ele não é um produto, é a porta ao lado deles. */
.vlr-card--convite::before,
.vlr-card--convite::after {
	display: none;
}

.vlr-card--convite h3 {
	font-size: 1.2rem;
	line-height: 1.18;
	margin: 0;
}

.vlr-card--convite .vlr-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
 * Telas estreitas
 * ----------------------------------------------------------------------- */

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

	/*
	 * A pilha vira faixa horizontal rolável: empilhada ela empurraria o CTA
	 * para fora da tela.
	 *
	 * A faixa sangra até a borda do vidro. Cortada na margem do container, a
	 * linha seguinte parecia conteúdo estourando; cortada na beirada da tela,
	 * lê como "tem mais, arrasta" — que é o que ela é.
	 */
	.vlr-pilha {
		grid-auto-flow: column;
		grid-auto-columns: minmax(230px, 78%);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		margin-inline: -20px;
		padding: 2px 20px var(--vlr-e2);
		scrollbar-width: none;
	}

	.vlr-pilha::-webkit-scrollbar {
		display: none;
	}

	.vlr-pilha__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 56.25rem) {
	.vlr-quem {
		grid-template-columns: 1fr;
	}

	.vlr-quem__foto {
		max-width: 200px;
	}

	.vlr-ficha {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

@media (max-width: 40rem) {
	.vlr-faixa__conteudo {
		align-items: flex-start;
	}

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

/* --------------------------------------------------------------------------
 * O print dentro do card do catálogo
 *
 * Faixa curta e cortada no topo: o que interessa é a primeira dobra do
 * sistema, que é onde se reconhece o produto. Recorte fixo mantém os cards
 * do mesmo tamanho mesmo com capturas de alturas diferentes — grade que
 * dança é pior que grade sem imagem.
 * ----------------------------------------------------------------------- */

.vlr-card__tela {
	margin: var(--vlr-e4) 0 var(--vlr-e5);
	border: 1px solid var(--vlr-borda);
	border-radius: calc(var(--vlr-raio, 12px) - 4px);
	overflow: hidden;
	background: var(--vlr-superficie);
	line-height: 0;
}

.vlr-card__tela img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: top center;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vlr-card:hover .vlr-card__tela img,
.vlr-card:focus-within .vlr-card__tela img {
	transform: scale(1.03);
}

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

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

/* --------------------------------------------------------------------------
 * As telas do hero
 *
 * A prova do §38 na primeira dobra. Duas capturas reais sobrepostas: a de trás
 * recuada e menor, a da frente inteira. A sobreposição não é enfeite — ela é o
 * que diz "são projetos diferentes" sem precisar de legenda, e é o que faz
 * duas imagens ocuparem o espaço que uma sozinha deixaria pela metade.
 * ----------------------------------------------------------------------- */

/*
 * A coluna da vitrine subiu de 470px para 560px em 17/08/2026.
 *
 * Com 470 a moldura media 385px de altura contra 574 de hero: um objeto pequeno
 * no canto de uma dobra grande lê como enfeite, não como prova. A vitrine é o
 * argumento visual da primeira tela, e argumento precisa de tamanho.
 */
.vlr-hero--com-telas .vlr-hero__grade {
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: center;
	gap: clamp(var(--vlr-e6), 5vw, var(--vlr-e8));
}

/*
 * A headline encolhe quando divide a dobra com as telas. Sem isto ela vinha em
 * QUATRO linhas de Amberly Black, e quatro linhas dessa fonte param de ser
 * frase e viram um bloco de textura — a pessoa vê o peso antes de ler a
 * palavra. 3.6rem devolve as três linhas com a coluna a 518px, medido.
 */
.vlr-hero--com-telas h1 {
	font-size: clamp(2.3rem, 5vw, 3.6rem);
}

.vlr-hero__telas {
	position: relative;
	aspect-ratio: 5 / 4;
	min-width: 0;
}

/*
 * A moldura. Screenshot sangrando direto no fundo lê como erro de layout; a
 * borda clara sobre o roxo escuro devolve a leitura de "captura de tela".
 */
.vlr-hero__tela {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 12px;
	background: var(--vlr-tinta);
}

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

/* Atrás: recuada para o alto e para a direita, e escurecida para não competir. */
.vlr-hero__tela--0 {
	top: 0;
	right: 0;
	width: 82%;
	box-shadow: 0 18px 40px -22px rgb(0 0 0 / 60%);
}

/*
 * O véu que recua a tela de trás caiu de 34% para 14%, e ganhou um filete claro.
 *
 * 34% de escuro funciona quando a tela de trás é clara. Quando ela é a interface
 * de um portal de games — fundo quase preto — o véu escuro sobre imagem escura,
 * num hero roxo escuro, some com tudo: sobra um retângulo preto.
 *
 * E retângulo preto não prova nada. O §35 chama a tela de prova de que o produto
 * existe, então uma tela ilegível é pior do que tela nenhuma: ocupa o espaço da
 * prova sem entregá-la.
 *
 * A recuada passou a vir da geometria — ela é menor, está mais alta, tem sombra
 * mais rasa — e não de apagar a imagem. O filete claro é o que garante que a
 * borda apareça mesmo quando o conteúdo dela for da mesma cor do fundo.
 */
.vlr-hero__tela--0 {
	border-color: rgb(255 255 255 / 26%);
}

.vlr-hero__tela--0::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(20 12 32 / 14%);
}

/* Na frente: inteira, ancorada embaixo à esquerda, com a sombra mais funda. */
.vlr-hero__tela--1 {
	bottom: 0;
	left: 0;
	width: 92%;
	z-index: 2;
	border-color: rgb(255 255 255 / 26%);
	box-shadow: 0 34px 64px -28px rgb(0 0 0 / 78%);
}

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

	.vlr-hero__telas {
		aspect-ratio: auto;
		max-width: 560px;
	}

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

	.vlr-hero__tela--0 {
		display: none;
	}
}

/*
 * O bloco "Como trabalhamos" foi para `conteudo.css`.
 *
 * A Home e a página sobre usam o mesmo componente, e a sobre carrega
 * `conteudo.css` sem carregar esta folha. A Home carrega as duas, então nada
 * mudou para ela.
 */

/*
 * O bloco de capacidades foi para `conteudo.css`.
 *
 * A Home e a pagina de servico usam a mesma grade de pastilhas com contagem, e
 * a pagina de servico nao carrega esta folha. Mesmo caso do `.vlr-processo`.
 */


/* --------------------------------------------------------------------------
 * 1b. A vitrine do hero
 *
 * Substituiu as duas telas soltas em 17/08/2026. A moldura é interface de
 * verdade — barra de janela, abas, palco — e o que ela mostra continua sendo
 * screenshot real. O §17 pede que o site demonstre o que a Valoar sabe
 * construir; duas imagens paradas dentro de uma borda arredondada não demonstram
 * nada que um template não faça.
 *
 * A moldura é DESENHADA, não fotografada: nenhuma imagem de notebook, nenhum
 * mockup comprado. É CSS, e é por isso que ela é prova.
 * ----------------------------------------------------------------------- */

.vlr-vitrine {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 14px;
	overflow: hidden;
	background: #100b18;

	/*
	 * Duas sombras: uma rasa e curta que cola a moldura no fundo, outra funda e
	 * larga que a levanta. Uma sombra só ou gruda ou flutua; o par é o que dá a
	 * leitura de objeto apoiado.
	 */
	box-shadow:
		0 2px 6px -2px rgb(0 0 0 / 50%),
		0 40px 70px -34px rgb(0 0 0 / 80%);
}

/* ---- barra de janela ---- */

.vlr-vitrine__barra {
	display: flex;
	align-items: center;
	gap: var(--vlr-e3);
	padding: 10px 13px;
	background: rgb(255 255 255 / 5%);
	border-block-end: 1px solid rgb(255 255 255 / 10%);
}

.vlr-vitrine__pontos {
	display: flex;
	gap: 6px;
	flex: none;
}

.vlr-vitrine__pontos s {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: rgb(255 255 255 / 20%);
}

/*
 * O endereço é o domínio REAL do site, lido de `home_url()`. Escrever
 * "app.exemplo.com" ali seria inventar — e o §23 do brief proíbe. O cadeado é o
 * mesmo desenho de qualquer navegador, e é o que faz o olho reconhecer a peça.
 */
.vlr-vitrine__endereco {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgb(255 255 255 / 7%);
	font-family: var(--vlr-dado);
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	color: rgb(255 255 255 / 62%);
}

.vlr-vitrine__endereco svg {
	inline-size: 11px;
	block-size: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ---- abas ---- */

.vlr-vitrine__abas {
	position: relative;
	display: flex;
	gap: 2px;
	padding: 6px 6px 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.vlr-vitrine__abas::-webkit-scrollbar {
	display: none;
}

.vlr-vitrine__aba {
	appearance: none;
	border: 0;
	background: none;
	padding: 12px 15px;

	/*
	 * 44px, o mesmo alvo dos outros controles do site. Aba de 38px passa na
	 * regra 2.5.8 da WCAG, que pede 24, e ainda assim erra no polegar: elas
	 * ficam encostadas umas nas outras, e errar a aba num carrossel leva a
	 * pessoa para a tela errada sem ela entender por quê.
	 */
	min-block-size: 44px;
	font: inherit;
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: rgb(255 255 255 / 52%);
	cursor: pointer;
	white-space: nowrap;
	border-radius: 8px 8px 0 0;
	transition: color var(--vlr-rapido) var(--vlr-curva), background var(--vlr-rapido) var(--vlr-curva);
}

.vlr-vitrine__aba:hover {
	color: rgb(255 255 255 / 82%);
}

.vlr-vitrine__aba[aria-selected="true"] {
	color: #fff;
	background: rgb(255 255 255 / 9%);
}

.vlr-vitrine__aba:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/*
 * O fio de avanço.
 *
 * Ele existe para responder "por que a tela trocou sozinha?" antes da pergunta
 * ser feita. Sem ele o rodízio parece defeito. A largura é escrita pelo script
 * numa custom property, então a animação roda no compositor.
 */
.vlr-vitrine__fio {
	position: absolute;
	inset-inline: 6px;
	inset-block-end: 0;
	block-size: 2px;
	background: rgb(255 255 255 / 10%);
	border-radius: 2px;
	overflow: hidden;
}

.vlr-vitrine__fio s {
	display: block;
	block-size: 100%;
	inline-size: 100%;
	background: var(--vlr-laranja);
	transform: scaleX(var(--avanco, 0));
	transform-origin: 0 50%;
	transition: transform 120ms linear;
}

/* Rodízio parado, fio some: barra de progresso que não progride mente. */
.vlr-vitrine[data-parada] .vlr-vitrine__fio {
	opacity: 0;
}

/* ---- palco ---- */

.vlr-vitrine__palco {
	position: relative;
	background: var(--vlr-tinta);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.vlr-vitrine__painel {
	position: absolute;
	inset: 0;
}

.vlr-vitrine__painel img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: top center;
}

.vlr-vitrine__painel:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/*
 * A troca.
 *
 * Entra deslizando 16px e clareando, em 520ms. É devagar de propósito: a
 * primeira versão do movimento deste site foi reprovada por ser rápida demais
 * para ser vista, e uma troca de tela que ninguém percebe não comunica nada.
 */
.vlr-vitrine__painel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.vlr-vitrine__painel {
		animation: vlr-entra-tela 520ms var(--vlr-curva) both;
	}
}

@keyframes vlr-entra-tela {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
}

/*
 * A sequência de entrada do hero (§4): identidade, headline, texto, botões,
 * vitrine. O `--i` de cada elemento já existe no template; a vitrine é o último
 * degrau e entra com um passo maior, porque ela é o desfecho da frase.
 */
@media (prefers-reduced-motion: no-preference) {
	.vlr-hero--com-telas .vlr-vitrine {
		animation: vlr-entra-vitrine 900ms var(--vlr-curva) 320ms both;
	}
}

@keyframes vlr-entra-vitrine {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0) scale(0.985);
	}
}

@media (max-width: 62rem) {
	.vlr-vitrine__palco {
		aspect-ratio: 16 / 11;
	}
}

@media (max-width: 34rem) {
	.vlr-vitrine__endereco {
		display: none;
	}

	.vlr-vitrine__palco {
		aspect-ratio: 4 / 3;
	}
}

/* --------------------------------------------------------------------------
 * 2. Construir ou pronto
 *
 * O bloco mais importante da Home, e o que o §5 do brief de 17/08/2026 pede: o
 * visitante entende em segundos que a Valoar responde a duas perguntas
 * diferentes, sem ler um parágrafo.
 *
 * POR QUE UMA MOLDURA SÓ, PARTIDA AO MEIO
 * ---------------------------------------
 * Dois cartões lado a lado dizem "duas coisas parecidas". Aqui o assunto é o
 * contrário: são dois caminhos DIFERENTES. Então os lados dividem uma moldura,
 * separados por um fio, e cada um tem linguagem visual própria — o esquerdo é
 * obra se montando, o direito é produto empilhado.
 *
 * A COLUNA QUE CRESCE
 * -------------------
 * Apontar ou tabular para um lado faz ele ganhar espaço do outro, e a composição
 * dele se anima. É a "transição de estado" que o brief pede, e é o que
 * transforma a seção numa demonstração de UI em vez de uma explicação sobre UI.
 *
 * `:focus-within` acompanha o `:hover` em toda regra. Interação que só existe
 * no mouse não é interação, é decoração para metade das pessoas.
 * ----------------------------------------------------------------------- */

/*
 * O cabeçalho é CENTRALIZADO, e não alinhado à esquerda num canto.
 *
 * Antes ele ficava encostado à esquerda com o título travado em 18ch. Duas
 * linhas curtas e espremidas num bloco estreito, enquanto logo abaixo as duas
 * colunas da seção ocupavam a largura toda. A leitura ficava torta: o olho
 * lia num bloco apertado no canto e depois abria para um par largo e folgado.
 *
 * Centralizado, o cabeçalho passa a anunciar as duas colunas em vez de brigar
 * com elas — e a pergunta "a solução que você precisa já existe?" é dirigida a
 * quem lê, então merece o eixo da página e não a margem.
 *
 * O `18ch` sai. Ele existia para forçar a quebra em duas linhas, e era ele que
 * criava o aperto. Com `text-wrap: balance` e um teto generoso, o navegador
 * escolhe a quebra que equilibra as linhas sozinho, na largura que a tela der.
 */
.vlr-escolha__cab {
	max-inline-size: 46rem;
	margin-block-end: var(--vlr-e7);
	margin-inline: auto;
	text-align: center;
}

.vlr-escolha__cab h2 {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.06;
	margin-block: var(--vlr-e2) var(--vlr-e3);
	text-wrap: balance;
}

/*
 * `margin-inline: auto` junto com o `text-align` do pai: um centraliza as
 * linhas dentro da caixa, o outro centraliza a caixa. Só o segundo deixaria o
 * texto centralizado num bloco encostado à esquerda, que é o defeito de sempre
 * quando se centraliza pela metade.
 */
.vlr-escolha__apoio {
	max-inline-size: 52ch;
	margin-inline: auto;
	color: var(--vlr-tinta-fraca);
	font-size: 1.05rem;
}

/*
 * A moldura partida.
 *
 * `1fr 1fr` em repouso; ao apontar um lado, `1.18fr 0.82fr`. A diferença é
 * pequena de propósito — o suficiente para o olho sentir que o lado respondeu,
 * pequena o bastante para o texto do outro lado não reflowar feio.
 */
.vlr-escolha__par {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--vlr-borda);
	border-radius: 18px;
	overflow: hidden;
	background: var(--vlr-papel);
	transition: grid-template-columns 620ms var(--vlr-curva);
}

.vlr-escolha__par:has(.vlr-lado--construir:hover),
.vlr-escolha__par:has(.vlr-lado--construir:focus-within) {
	grid-template-columns: 1.18fr 0.82fr;
}

.vlr-escolha__par:has(.vlr-lado--pronto:hover),
.vlr-escolha__par:has(.vlr-lado--pronto:focus-within) {
	grid-template-columns: 0.82fr 1.18fr;
}

.vlr-lado {
	display: flex;
	flex-direction: column;
	gap: var(--vlr-e3);
	min-inline-size: 0;
	padding: var(--vlr-e6) var(--vlr-e5) var(--vlr-e5);
	position: relative;
	transition: background 420ms var(--vlr-curva);
}

/* O fio que separa. É a fronteira entre os dois funis do §40, e por isso ela
   é desenhada e não deixada em branco. */
.vlr-lado--pronto {
	border-inline-start: 1px solid var(--vlr-borda);
}

.vlr-lado:hover,
.vlr-lado:focus-within {
	background: var(--vlr-superficie);
}

/*
 * Os selos. Verde para o que se constrói, roxo para o que já existe — as duas
 * cores que o manual já usa para separar os dois modelos comerciais no menu.
 * Cor nenhuma foi inventada aqui.
 */
.vlr-lado__selo {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

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

.vlr-lado--construir .vlr-lado__selo {
	color: var(--vlr-verde-texto);
	background: color-mix(in srgb, var(--vlr-verde) 12%, transparent);
}

.vlr-lado--pronto .vlr-lado__selo {
	color: var(--vlr-roxo);
	background: color-mix(in srgb, var(--vlr-roxo) 10%, transparent);
}

.vlr-lado h3 {
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.1;
	margin: 0;
}

.vlr-lado__texto {
	margin: 0;
	max-inline-size: 40ch;
	color: var(--vlr-tinta-fraca);
	font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
 * A obra: o processo se montando
 *
 * Seis barras, uma por passo real do processo, com comprimentos crescentes — o
 * projeto ganhando corpo. Geometria abstrata de propósito: o §35 proíbe mockup
 * falso, e aqui nada finge ser tela de um produto que não existe. É o diagrama
 * de construção que o §18 pede.
 * ----------------------------------------------------------------------- */

.vlr-obra {
	display: grid;
	gap: 9px;
	margin-block: var(--vlr-e3);
	padding: var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 12px;
	background: var(--vlr-papel);
}

/*
 * Rótulo à esquerda em coluna FIXA, barra à direita crescendo.
 *
 * A primeira versão punha a barra primeiro, com a largura dela na coluna do
 * grid. O efeito colateral era exato e ruim: quanto mais adiantado o passo,
 * maior a barra e menor a sobra para o nome — "Colocamos no ar" virava
 * "Colocamos…" e "Evoluímos quando necessário" virava "Ev…". Os passos finais,
 * que são os que interessam a quem está avaliando contratar, eram justamente os
 * ilegíveis.
 *
 * Com a coluna fixa, nome nenhum trunca e o crescimento continua legível.
 */
.vlr-obra__barra {
	display: grid;
	/*
	 * A barra fica na coluna flexível e o rótulo se encolhe ao próprio texto.
	 *
	 * Com a coluna do rótulo fixa em 7,5rem, a barra ficava presa nesse mesmo
	 * espaço e o crescimento de 34% a 94% acontecia dentro de 120px — a
	 * diferença entre o primeiro passo e o último quase não aparecia, e o
	 * diagrama parava de contar que o projeto ganha corpo.
	 */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-block-size: 20px;
}

/*
 * Contorno, não barra cinza cheia.
 *
 * A primeira versão usava barra sólida cinza em repouso, e o resultado foi
 * exatamente o oposto do pretendido: seis retângulos cinza empilhados leem como
 * SKELETON DE CARREGAMENTO — a pessoa conclui que o conteúdo não carregou.
 *
 * Contorno vazio lê como planta baixa, que é a metáfora certa: o projeto está
 * desenhado e ainda não construído. Ao apontar, ele se constrói.
 */
.vlr-obra__barra s {
	display: block;
	inline-size: var(--w);
	block-size: 11px;
	border: 1px solid var(--vlr-borda);
	border-radius: 3px;
	background: none;
	transform-origin: 0 50%;
}

.vlr-obra__barra b {
	font-family: var(--vlr-dado);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--vlr-tinta-fraca);
	text-align: end;
	line-height: 1.25;

	/*
	 * O nome do passo aparece SEMPRE. Ele é a informação do bloco, e informação
	 * que só existe no hover não existe para quem lê no celular, para quem
	 * navega por teclado e para quem só passa o olho.
	 *
	 * O que o apontar acrescenta é a construção, não o conteúdo.
	 */
	opacity: 0.55;
	transition: opacity 320ms var(--vlr-curva), color 320ms var(--vlr-curva);
	transition-delay: calc(var(--i) * 70ms);
}

/*
 * Em repouso as barras estão vazias — a obra não começou. Ao apontar o lado,
 * elas se preenchem em sequência de cima para baixo e os nomes aparecem.
 *
 * O passo é 90ms e a barra leva 420ms: seis passos levam quase um segundo para
 * completar. É lento de propósito. A primeira versão do movimento deste site foi
 * reprovada por ser rápida demais para ser vista, e uma sequência que termina
 * antes do olho chegar nela não conta história nenhuma.
 */
.vlr-obra__barra s::after {
	content: "";
	display: block;
	block-size: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--vlr-verde), var(--vlr-roxo));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 420ms var(--vlr-curva);
	transition-delay: calc(var(--i) * 90ms);
}

.vlr-lado--construir:hover .vlr-obra__barra s::after,
.vlr-lado--construir:focus-within .vlr-obra__barra s::after {
	transform: scaleX(1);
}

.vlr-lado--construir:hover .vlr-obra__barra b,
.vlr-lado--construir:focus-within .vlr-obra__barra b {
	opacity: 1;
	color: var(--vlr-tinta);
}

/* --------------------------------------------------------------------------
 * O baralho: os produtos que já existem
 *
 * Empilhados e levemente rodados em repouso, abrindo em leque quando o lado
 * responde. Produto com tela mostra a tela; produto sem tela mostra uma placa
 * com a cor e o ícone dele.
 *
 * A placa NÃO é substituto de screenshot. Ela é a estrutura preparada para
 * receber um, que é o que o §23 do brief pede quando a informação ainda não
 * existe. No dia em que Anilha e Reservas tiverem tela, a mesma marcação passa
 * a mostrá-la sem mudar uma linha de CSS.
 * ----------------------------------------------------------------------- */

.vlr-baralho {
	position: relative;
	margin-block: var(--vlr-e3);
	block-size: 168px;
	min-inline-size: 0;
}

.vlr-baralho__carta {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	inline-size: 60%;
	max-inline-size: 220px;
	block-size: 150px;
	padding: var(--vlr-e3);
	border: 1px solid var(--vlr-borda);
	border-radius: 11px;
	overflow: hidden;
	background: var(--vlr-produto, var(--vlr-roxo));
	box-shadow: 0 10px 24px -14px rgb(27 21 35 / 45%);

	/*
	 * O leque sai de duas variáveis por carta: deslocamento e rotação, ambos
	 * derivados de `--i`. Uma transformação só, no compositor, sem tocar em
	 * layout — é o que o §21 pede.
	 */
	transform:
		translate3d(calc(var(--i) * 13px), calc(var(--i) * 5px), 0)
		rotate(calc(var(--i) * 1.6deg));
	z-index: calc(10 - var(--i));
	transition: transform 620ms var(--vlr-curva), box-shadow 420ms var(--vlr-curva);
	transition-delay: calc(var(--i) * 45ms);
}

.vlr-baralho__carta b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1.1;
	color: var(--vlr-produto-tinta, #fff);
}

.vlr-baralho__icone {
	inline-size: 26px;
	block-size: 26px;
	fill: var(--vlr-produto-tinta, #fff);
	opacity: 0.85;
}

.vlr-baralho__carta--tela {
	padding: 0;
	background: var(--vlr-tinta);
}

.vlr-baralho__carta--tela img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: top center;
}

.vlr-lado--pronto:hover .vlr-baralho__carta,
.vlr-lado--pronto:focus-within .vlr-baralho__carta {
	transform:
		translate3d(calc(var(--i) * 30px), calc(var(--i) * -2px), 0)
		rotate(calc(var(--i) * -0.8deg));
	box-shadow: 0 16px 32px -16px rgb(27 21 35 / 55%);
}

/* --------------------------------------------------------------------------
 * Listas e botão
 * ----------------------------------------------------------------------- */

.vlr-lado__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.vlr-lado__lista li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vlr-lado__lista a {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	min-block-size: 40px;
	border: 1px solid var(--vlr-borda);
	border-radius: 999px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--vlr-tinta);
	text-decoration: none;
	background: var(--vlr-papel);
	transition: border-color var(--vlr-rapido) var(--vlr-curva), color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-lado__lista a:hover,
.vlr-lado__lista a:focus-visible {
	border-color: var(--vlr-roxo);
	color: var(--vlr-roxo);
}

.vlr-lado__estado {
	font-family: var(--vlr-dado);
	font-size: 0.62rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vlr-laranja-texto);
}

/* Empurra o botão para o rodapé do lado, para os dois CTAs ficarem alinhados
   mesmo quando um lado tem mais texto que o outro. */
.vlr-lado__cta {
	margin-block-start: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
 * Estreito e movimento reduzido
 * ----------------------------------------------------------------------- */

@media (max-width: 56.25rem) {
	.vlr-escolha__par,
	.vlr-escolha__par:has(.vlr-lado--construir:hover),
	.vlr-escolha__par:has(.vlr-lado--pronto:hover) {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlr-lado--pronto {
		border-inline-start: 0;
		border-block-start: 1px solid var(--vlr-borda);
	}

	/*
	 * No estreito não existe apontar, então as duas composições nascem no
	 * estado final. Uma obra que nunca se monta e um baralho que nunca se abre
	 * seriam, no celular, só um bloco cinza e um monte de cartas empilhadas.
	 */
	.vlr-obra__barra s::after {
		transform: scaleX(1);
	}

	.vlr-obra__barra b {
		opacity: 1;
		color: var(--vlr-tinta);
	}

	.vlr-baralho {
		block-size: 156px;
	}

	.vlr-baralho__carta {
		inline-size: 46%;
		block-size: 138px;
		transform:
			translate3d(calc(var(--i) * 22px), 0, 0)
			rotate(calc(var(--i) * -0.7deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlr-escolha__par,
	.vlr-lado,
	.vlr-obra__barra s::after,
	.vlr-obra__barra b,
	.vlr-baralho__carta {
		transition: none;
	}

	/* Sem movimento, as composições também nascem prontas: o conteúdo não pode
	   depender de uma animação que a pessoa desligou. */
	.vlr-obra__barra s::after {
		transform: scaleX(1);
	}

	.vlr-obra__barra b {
		opacity: 1;
		color: var(--vlr-tinta);
	}
}

/*
 * As pastilhas de frente do hero passam de 21px para 36px de alvo.
 *
 * 21px reprova no critério 2.5.8 da WCAG, que pede 24 — e elas estão na
 * primeira dobra, coladas umas nas outras, no lugar onde mais gente toca.
 */
.vlr-hero__frentes a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
}