/*
 * Fundação visual da Valoar.
 *
 * Tokens do manual da marca v1.0. Nenhum valor aqui foi inventado: cor,
 * tamanho de fonte e altura de linha vêm do documento aprovado. Se algum
 * número divergir do manual, o manual está certo e este arquivo está errado.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

/* --------------------------------------------------------------------------
 * Fontes
 *
 * Auto-hospedadas. Nada de Google Fonts: é requisição de terceiro no caminho
 * crítico e ponto de LGPD. unicode-range separa latin de latin-ext para o
 * navegador só baixar o segundo arquivo quando a página tiver o caractere.
 * ----------------------------------------------------------------------- */

@font-face {
	font-family: "Amberly Sans";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/AmberlySans-Black.woff2") format("woff2");
}

@font-face {
	font-family: "Amberly Sans";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/AmberlySans-Light.woff2") format("woff2");
}

/* Variável de 100 a 900: um arquivo cobre o 400 e o 600 que a marca usa. */
@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/PublicSans-latin.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/PublicSans-latinext.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/IBMPlexMono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/IBMPlexMono-latinext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * Tokens
 * ----------------------------------------------------------------------- */

:root {
	/* Cor. Papel de cada uma no manual §03. */
	--vlr-roxo: #592784;
	--vlr-roxo-claro: #8b5fb0;
	--vlr-laranja: #ee8438;
	--vlr-verde: #48867b;

	/*
	 * Verde de texto. O verde da marca dá 4,22:1 sobre branco — o próprio
	 * manual §03 diz que ele só passa em título grande, e o rótulo de estado
	 * tem 11px.
	 *
	 * Regra: área e faixa usam --vlr-verde; texto usa --vlr-verde-texto.
	 *
	 * Era #427b71, calibrado só contra branco (4,88:1). Fundo branco não é o
	 * único que existe: sobre a superfície ele caía para 4,43:1 no "Para quem
	 * é" da página de serviços, e sobre o verde a 12% do selo do menu para
	 * 4,24:1. Calibrar contra o fundo mais claro do site é calibrar contra o
	 * caso mais fácil.
	 *
	 * Este tom passa nos três: 6,18:1 no branco, 5,61:1 na superfície, 5,35:1
	 * sobre o próprio verde a 12%.
	 */
	--vlr-verde-texto: #376a61;

	/*
	 * Laranja de texto, pelo mesmo motivo do verde acima. O laranja da marca dá
	 * 2,63:1 sobre branco — reprovado até para título grande, que precisa de
	 * 3:1. Ele é cor de ÁREA: fundo, faixa, borda, numeral dentro de uma
	 * pastilha colorida.
	 *
	 * Quando a laranja precisa virar letra sobre fundo claro, é esta. 5,28:1
	 * sobre branco e 4,79:1 sobre a superfície, com folga nos dois.
	 */
	--vlr-laranja-texto: #a8551b;

	--vlr-cinza: #b6b8bb;
	--vlr-tinta: #1b1523;
	--vlr-tinta-fraca: #6b6478;
	--vlr-papel: #ffffff;
	--vlr-superficie: #f5f3f8;
	--vlr-borda: #e4dfec;

	/*
	 * Cor do produto. Cada página de sistema sobrescreve com a cor dele, e o
	 * roxo recua para o produto liderar. É o que faz seis páginas parecerem
	 * seis coisas, saindo de um sistema só.
	 */
	--vlr-produto: var(--vlr-roxo);
	--vlr-produto-tinta: #ffffff;

	/* ----------------------------------------------------------------------
	 * Botão
	 *
	 * Tokens próprios, e não `--vlr-roxo` direto, para o botão poder ser
	 * recolorido sem arrastar junto link, selo e barra de rolagem. Enquanto
	 * ninguém mexer, eles APONTAM para o roxo da marca — o padrão continua
	 * sendo o que sempre foi.
	 *
	 * `--vlr-btn-sobe` é a distância que o botão levanta no hover. Zero desliga
	 * o efeito sem precisar de outra regra: quem escolhe "sem efeito" no painel
	 * grava 0 aqui.
	 * ------------------------------------------------------------------- */
	--vlr-btn-fundo: var(--vlr-roxo);
	--vlr-btn-tinta: #ffffff;
	--vlr-btn-hover: var(--vlr-roxo-claro);
	--vlr-btn-hover-tinta: #ffffff;
	--vlr-btn-raio: var(--vlr-raio);
	--vlr-btn-sobe: -1px;

	/* Tipografia. */
	--vlr-marca: "Amberly Sans", system-ui, sans-serif;
	--vlr-corpo: "Public Sans", system-ui, -apple-system, sans-serif;
	--vlr-dado: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	/* Ritmo. Escala de 4px, com passo maior onde o olho precisa de pausa. */
	--vlr-e1: 4px;
	--vlr-e2: 8px;
	--vlr-e3: 12px;
	--vlr-e4: 16px;
	--vlr-e5: 24px;
	--vlr-e6: 32px;
	--vlr-e7: 48px;
	--vlr-e8: 64px;
	--vlr-e9: clamp(56px, 8vw, 104px);

	/* Medidas. */
	--vlr-pad: clamp(20px, 5vw, 64px);
	--vlr-largura: 1180px;
	--vlr-leitura: 66ch;
	--vlr-raio: 10px;
	--vlr-raio-placa: 22%;

	/* ----------------------------------------------------------------------
	 * Profundidade
	 *
	 * Existiam oito sombras diferentes escritas à mão em quatro arquivos, cada
	 * uma com o próprio desfoque e a própria opacidade. Oito sombras não são um
	 * sistema: são oito decisões tomadas em oito momentos, e é por isso que os
	 * cards do site pareciam pertencer a projetos diferentes.
	 *
	 * Três degraus, e cada um tem função:
	 *
	 *   1  repouso    — o card existe e está apoiado na página
	 *   2  atenção    — o ponteiro está nele
	 *   3  flutuante  — está por cima de outro conteúdo (menu, gaveta)
	 *
	 * O `-Ypx` no terceiro valor puxa a sombra para dentro do elemento, que é o
	 * que faz ela parecer luz de cima em vez de borrão em volta.
	 * ------------------------------------------------------------------- */
	--vlr-sombra-1: 0 1px 2px rgb(27 21 35 / 4%), 0 8px 20px -16px rgb(27 21 35 / 28%);
	--vlr-sombra-2: 0 2px 4px rgb(27 21 35 / 5%), 0 16px 32px -20px rgb(27 21 35 / 42%);
	--vlr-sombra-3: 0 2px 6px rgb(27 21 35 / 5%), 0 28px 60px -30px rgb(27 21 35 / 42%);

	/* ----------------------------------------------------------------------
	 * Movimento
	 *
	 * Antes cada transição escolhia a própria duração: 0,15s aqui, 0,16s ali,
	 * 0,18s na do lado. A diferença é pequena o bastante para ninguém apontar e
	 * grande o bastante para o conjunto parecer desalinhado, porque dois
	 * elementos vizinhos respondem ao mesmo hover em velocidades diferentes.
	 *
	 * Três durações, uma curva. `cubic-bezier(0.2, 0.7, 0.3, 1)` sai rápido e
	 * chega devagar: é o que faz o movimento parecer que obedeceu ao ponteiro em
	 * vez de ter sido agendado. `ease` do navegador acelera no meio e é o que dá
	 * a sensação de animação de apresentação de slide.
	 * ------------------------------------------------------------------- */
	--vlr-curva: cubic-bezier(0.2, 0.7, 0.3, 1);
	--vlr-rapido: 0.16s;
	--vlr-medio: 0.28s;

	/* Entrada por rolagem. Mais longa porque percorre distância, não estado. */
	--vlr-entrada: 0.62s;
}

/* --------------------------------------------------------------------------
 * Pontos de quebra
 *
 * QUATRO, e a lista é fechada. Existiam catorze — 26, 30, 32, 34 e 40rem, mais
 * 560, 620, 860, 900, 980 e 1000px — misturando as duas unidades e com valores
 * fazendo quase a mesma coisa: 860, 900, 980 e 1000 são quatro decisões
 * diferentes para a mesma virada de layout, tomadas em quatro momentos.
 *
 *   34rem     544px   grade de coluna única
 *   40rem     640px   listas de duas colunas viram uma
 *   56.25rem  900px   o menu vira gaveta; conteúdo com lateral empilha
 *   62rem     992px   grades de três e quatro colunas reduzem
 *
 * TODOS EM REM, e isso é acessibilidade e não preferência. Quem aumenta a fonte
 * padrão do navegador para 24px passa a receber a virada de layout num viewport
 * proporcionalmente maior — que é o que dá espaço para o texto crescido. Com
 * breakpoint em px, aumentar a fonte só aperta as colunas.
 *
 * Detalhe da especificação que vale saber antes de tentar testar: dentro de
 * media query, `rem` se refere à fonte PADRÃO DO NAVEGADOR, e não ao `font-size`
 * computado do `<html>`. Declarar `html { font-size: 24px }` não move quebra
 * nenhuma — só a configuração do próprio usuário move. É o comportamento
 * desejado nos dois sentidos: o CSS do tema não desloca o layout sem querer, e a
 * escolha de quem precisa de letra maior é respeitada.
 *
 * CSS não aceita variável em media query, então estes valores continuam escritos
 * à mão. A lista existir aqui é o que permite conferir se um número novo pertence
 * à escala ou é mais uma decisão solta.
 *
 * 56.25rem é 900px com a raiz em 16px, e o `nav.js` usa ESTA MESMA consulta,
 * negada. Antes ele usava `min-width: 901px` — o vão de 1px existia para os dois
 * não se sobreporem, e sobrevivia só enquanto a raiz fosse 16px. Espelhar a
 * consulta em vez de calcular a vizinha elimina o vão e a suposição.
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * `scroll-padding-top` é o que impede a pílula sticky de comer o alvo de
 * qualquer âncora.
 *
 * O cabeçalho tem 68px de altura e fica encostado no topo. A barra superior
 * rola embora, então não entra na conta. Sem esta reserva, todo salto para
 * âncora — o
 * "pular para o conteúdo", os links do rodapé, o retorno do formulário —
 * deixava o destino atrás do cabeçalho. Isso reprova o critério 2.4.11 da
 * WCAG 2.2 (foco não obscurecido), e para quem navega por teclado é pior que
 * um erro visual: o foco existe, responde ao Enter, e não aparece.
 *
 * Vale reservar aqui em vez de pendurar `scroll-margin-top` em cada
 * componente que vira destino, que era o remédio anterior e cobria um lugar
 * só.
 */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(68px + var(--vlr-e4));
}

/*
 * Quem pede menos movimento no sistema recebe menos movimento. Vale para a
 * rolagem suave e para toda transição declarada abaixo.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--vlr-papel);
	color: var(--vlr-tinta);
	font-family: var(--vlr-corpo);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
 * Tipografia
 * ----------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--vlr-marca);
	font-weight: 900;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.3rem, 6.4vw, 4.2rem);
	line-height: 1;
}

h2 {
	font-size: clamp(1.55rem, 3.2vw, 2.25rem);
	line-height: 1.08;
}

h3 {
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	line-height: 1.2;
}

h4 {
	font-size: 1rem;
	line-height: 1.3;
}

p {
	margin: 0 0 var(--vlr-e4);
	max-width: var(--vlr-leitura);
}

p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 600;
}

a {
	color: var(--vlr-roxo);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * Título que é link não usa sublinhado.
 *
 * A regra acima serve texto corrido, onde o traço é o que separa o link da
 * frase em volta. Num h2 de Amberly Black a 2rem o mesmo traço vira uma barra
 * grossa embaixo do título, e "Sistemas Web" passa a parecer link sem estilo
 * em vez de cabeçalho.
 *
 * O link continua distinguível sem ele: tamanho, peso, cor e posição já o
 * separam do texto ao redor, que é o que a WCAG pede de quem não usa
 * sublinhado. O traço volta no hover, para confirmar que dá para clicar.
 */
h1 a,
h2 a,
h3 a,
h4 a {
	text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible,
h4 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

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

/*
 * Foco visível em tudo que recebe teclado. O anel usa dois tons para
 * sobreviver tanto no papel quanto no roxo cheio — anel de uma cor só
 * desaparece em um dos dois fundos, e aí a navegação por Tab se perde.
 */
:focus-visible {
	outline: 3px solid var(--vlr-roxo);
	outline-offset: 2px;
	border-radius: 3px;
}

/*
 * `.vlr-final` entra em toda lista de contexto escuro daqui para baixo.
 *
 * O bloco declara o próprio fundo roxo, mas as regras de "estou sobre escuro"
 * — botão, anel de foco, texto fraco, rótulo mono — sempre foram penduradas em
 * `.vlr-escuro`. Quem escrevesse `class="vlr-final"` sem lembrar de acrescentar
 * `vlr-escuro` recebia o fundo roxo com os componentes ainda pintados para
 * fundo claro.
 *
 * Isso já custou dois bugs: a subheadline branca sobre branco, corrigida em
 * 16/08/2026, e o botão vazado roxo sobre roxo — contraste 1:1, texto
 * literalmente invisível — encontrado em 17/08/2026 em `/servicos/` e `/sobre/`.
 * Os dois têm a mesma raiz: um bloco que carrega o próprio fundo escuro e não
 * carrega as consequências dele.
 *
 * Acrescentar a classe em cada template resolveria as duas páginas de hoje e
 * deixaria a armadilha armada para a próxima. Por isso a regra passa a valer
 * pelo componente.
 */
.vlr-escuro :focus-visible,
.vlr-final :focus-visible,
.vlr-fundo-cor :focus-visible {
	outline-color: #fff;
}

/* --------------------------------------------------------------------------
 * Entrada por rolagem
 *
 * Mudou-se para `movimento.css` em 17/08/2026, quando o movimento deixou de ser
 * um fade e virou um sistema com curva própria, assinatura no título, leitura de
 * progresso e profundidade nas telas. Aquilo é vocabulário de movimento, e
 * vocabulário merece arquivo.
 *
 * A regra que veio junto continua valendo: nada é escondido sem `.vlr-anima` no
 * `<html>`, e essa classe é escrita pelo JS. Sem JS, a pagina aparece inteira.
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Utilidades
 * ----------------------------------------------------------------------- */

/* Padrão do WordPress, para leitor de tela. Não trocar por display:none. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--vlr-papel);
	clip-path: none;
	color: var(--vlr-roxo);
	display: block;
	font-family: var(--vlr-dado);
	font-size: 0.8rem;
	height: auto;
	left: var(--vlr-e4);
	line-height: normal;
	padding: var(--vlr-e3) var(--vlr-e5);
	text-decoration: none;
	top: var(--vlr-e4);
	width: auto;
	z-index: 100000;
	border-radius: var(--vlr-raio);
	box-shadow: 0 4px 20px rgb(27 21 35 / 22%);
}

.vlr-cont {
	width: 100%;
	max-width: var(--vlr-largura);
	margin-inline: auto;
	padding-inline: var(--vlr-pad);
}

.vlr-secao {
	padding-block: var(--vlr-e9);
}

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

/* Seção de roxo cheio. É assim que a cor da marca ocupa a página. */
.vlr-escuro {
	background: var(--vlr-roxo);
	color: #fff;
}

.vlr-escuro h1,
.vlr-escuro h2,
.vlr-escuro h3,
.vlr-escuro h4,
.vlr-final h1,
.vlr-final h2,
.vlr-final h3,
.vlr-final h4 {
	color: #fff;
}

.vlr-escuro a,
.vlr-final a {
	color: #fff;
}

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

.vlr-escuro .vlr-fraco,
.vlr-final .vlr-fraco {
	color: rgb(255 255 255 / 74%);
}

/*
 * Rótulo de dado. IBM Plex Mono em caixa alta é o que dá ao catálogo cara de
 * catálogo de peça, e não de grade de recurso de SaaS.
 */
.vlr-dado {
	font-family: var(--vlr-dado);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
	font-variant-numeric: tabular-nums;
}

.vlr-escuro .vlr-dado,
.vlr-final .vlr-dado {
	color: rgb(255 255 255 / 72%);
}

/* A tagline. Único lugar da Amberly Light, conforme o manual §04. */
.vlr-tagline {
	font-family: var(--vlr-marca);
	font-weight: 300;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
 * Botões
 *
 * Contraste do manual §03: sobre roxo o texto é branco (10,2:1). Sobre
 * laranja o texto é tinta (6,0:1) — branco sobre laranja dá 2,9:1 e reprova
 * em qualquer auditoria. Por isso não existe modificador de botão laranja
 * com texto branco neste arquivo, e não deve passar a existir.
 * ----------------------------------------------------------------------- */

.vlr-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--vlr-e2);
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
	line-height: 1;
	padding: 15px var(--vlr-e5);
	border: 2px solid var(--vlr-btn-fundo);
	border-radius: var(--vlr-btn-raio);
	background: var(--vlr-btn-fundo);
	color: var(--vlr-btn-tinta);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--vlr-rapido) var(--vlr-curva), border-color var(--vlr-rapido) var(--vlr-curva), transform var(--vlr-rapido) var(--vlr-curva);
	/* Alvo de toque confortável no celular. */
	min-height: 48px;
}

.vlr-btn:hover {
	background: var(--vlr-btn-hover);
	border-color: var(--vlr-btn-hover);
	color: var(--vlr-btn-hover-tinta);
	transform: translateY(var(--vlr-btn-sobe));
}

.vlr-btn--vazado {
	background: transparent;
	color: var(--vlr-roxo);
}

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

.vlr-escuro .vlr-btn,
.vlr-final .vlr-btn {
	background: #fff;
	border-color: #fff;
	color: var(--vlr-roxo);
}

.vlr-escuro .vlr-btn:hover,
.vlr-final .vlr-btn:hover {
	background: transparent;
	color: #fff;
}

.vlr-escuro .vlr-btn--vazado,
.vlr-final .vlr-btn--vazado {
	background: transparent;
	color: #fff;
}

.vlr-escuro .vlr-btn--vazado:hover,
.vlr-final .vlr-btn--vazado:hover {
	background: #fff;
	color: var(--vlr-roxo);
}

/* --------------------------------------------------------------------------
 * Etiqueta de estado
 *
 * O argumento inteiro da marca é "já funciona". Por isso "no ar" é o
 * elemento mais confiante do card, com ponto vivo, e "em breve" é o mais
 * discreto: promessa não pode competir com prova.
 * ----------------------------------------------------------------------- */

.vlr-estado {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--vlr-dado);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vlr-estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentcolor;
	flex: none;
}

.vlr-estado--no_ar {
	color: var(--vlr-verde-texto);
	font-weight: 600;
}

/* O pulso só existe no "no ar". É o estado que merece movimento. */
.vlr-estado--no_ar::before {
	animation: vlr-pulso 2.4s ease-in-out infinite;
}

@keyframes vlr-pulso {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

.vlr-estado--demo_aberta {
	color: var(--vlr-roxo);
	font-weight: 600;
}

.vlr-estado--em_finalizacao {
	color: #8a5a12;
}

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

.vlr-escuro .vlr-estado--no_ar {
	color: #8fd9c8;
}

.vlr-escuro .vlr-estado--demo_aberta,
.vlr-escuro .vlr-estado--em_finalizacao,
.vlr-escuro .vlr-estado--em_breve {
	color: rgb(255 255 255 / 82%);
}

/* --------------------------------------------------------------------------
 * A placa
 *
 * Quadrado de canto arredondado com o ícone de silhueta dentro. Mesma forma
 * da marca, mudando só cor e desenho — manual §05. O canto é percentual para
 * a proporção sobreviver de 16px a 96px sem virar círculo.
 * ----------------------------------------------------------------------- */

.vlr-placa {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: var(--vlr-raio-placa);
	background: var(--vlr-produto);
	color: var(--vlr-produto-tinta);
	flex: none;
}

.vlr-placa svg {
	width: 58%;
	height: 58%;
	fill: currentcolor;
}

/* --------------------------------------------------------------------------
 * Cabeçalho
 *
 * Pílula flutuante, dois painéis em cascata. Quem manda em aberto/fechado é o
 * `aria-expanded` do próprio botão: um estado só, lido pelo CSS e pelo leitor
 * de tela ao mesmo tempo, sem classe paralela para dessincronizar.
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * A barra superior
 *
 * Cidade, e-mail e redes. Rola embora com a página, de propósito: é informação
 * de rodapé que ganhou lugar no alto por conveniência, e não merece ocupar
 * altura fixa da tela toda vez que alguém rola.
 * ----------------------------------------------------------------------- */

.vlr-barra {
	background: var(--vlr-tinta);
	color: rgb(255 255 255 / 78%);
	font-size: 0.82rem;
}

.vlr-barra__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vlr-e3) var(--vlr-e5);
	min-block-size: 40px;
	padding-block: 6px;
}

.vlr-barra__contato {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vlr-e2) var(--vlr-e4);
	margin: 0;
	max-inline-size: none;
}

/* O separador é desenhado, e não digitado: um "·" no HTML sobraria sozinho
   quando um dos dois campos da Identidade estivesse vazio. */
.vlr-barra__contato > * + *::before {
	content: "·";
	margin-inline-end: var(--vlr-e4);
	opacity: 0.5;
}

.vlr-barra a {
	color: inherit;
	text-decoration: none;
}

.vlr-barra a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vlr-social {
	display: flex;
	align-items: center;
	gap: var(--vlr-e1);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: none;
}

/*
 * 34px de alvo com o ícone a 17px. Abaixo de 24px o critério 2.5.8 da WCAG
 * reprova, e ícone social é o tipo de alvo que a pessoa acerta de primeira ou
 * desiste.
 */
.vlr-social__link {
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	color: rgb(255 255 255 / 72%);
	transition:
		color var(--vlr-rapido) var(--vlr-curva),
		background-color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-social__link svg {
	inline-size: 17px;
	block-size: 17px;
	fill: currentcolor;
}

.vlr-social__link:hover,
.vlr-social__link:focus-visible {
	color: #fff;
	background: rgb(255 255 255 / 12%);
}

/* --------------------------------------------------------------------------
 * O cabeçalho
 *
 * Largura cheia, encostado no topo, com filete embaixo. Comum de propósito: a
 * pílula flutuante que estava aqui veio da gramática de `conceptsis.com.br`, que
 * o §33 lista como referência — e o mesmo §33 manda não copiar estrutura nem
 * componente. Barra arredondada flutuando é assinatura de outra marca.
 *
 * O fundo é opaco, e não translúcido com desfoque. Além de sair do vocabulário
 * emprestado, `backdrop-filter` numa faixa que fica fixa na tela é um dos custos
 * de composição mais altos que existem: o navegador refaz o borrão a cada quadro
 * de rolagem, na área inteira da barra.
 * ----------------------------------------------------------------------- */

.vlr-topo {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--vlr-papel);
	border-block-end: 1px solid var(--vlr-borda);
}

.vlr-topo__interno {
	display: flex;
	align-items: center;
	gap: var(--vlr-e5);
	min-block-size: 68px;
}

/*
 * Ao rolar, o cabeçalho ganha sombra — e só ao rolar. Sombra permanente numa
 * barra encostada no topo sugere que existe conteúdo passando por baixo quando
 * não existe. `animation-timeline: scroll()` resolve sem uma linha de JS: a
 * sombra aparece nos primeiros 80px e fica.
 */
@supports (animation-timeline: scroll()) {
	@keyframes vlr-topo-sombra {
		from { box-shadow: 0 0 0 rgb(27 21 35 / 0%); }
		to   { box-shadow: var(--vlr-sombra-1); }
	}

	.vlr-topo {
		animation: vlr-topo-sombra linear both;
		animation-timeline: scroll();
		animation-range: 0 80px;
	}
}

/* A proposta não tem navegação, então a barra encolhe para caber só a marca. */
.vlr-topo--limpo .vlr-topo__interno {
	min-block-size: 60px;
}

/*
 * A MARCA PRECISA MANDAR NO TOPO, e ela não estava mandando.
 *
 * O dono pediu "mais imponência e potência", e a conta dava razão a ele: o nome
 * estava em 19,8px contra 14,9px dos itens do menu. Um terço maior. Nessa
 * proporção o olho lê a marca como MAIS UM item da navegação, e não como o dono
 * da página — a diferença é pequena demais para significar hierarquia, e grande
 * demais para parecer proposital.
 *
 * Agora fica perto de 1,7x o menu, que é onde a diferença passa a ser lida como
 * "isto é de outra ordem". O topo tem 68px, então o crescimento cabe sem mexer
 * na altura da barra.
 *
 * `clamp` e não valor fixo: no celular a barra é mais estreita e o nome
 * competiria com o botão do menu.
 *
 * `letter-spacing` sai do positivo e vai para levemente negativo. Amberly Black
 * em corpo pequeno pede um respiro entre letras para não empastar; no tamanho
 * maior acontece o contrário — o espaço extra afrouxa a palavra e ela perde
 * exatamente a densidade que a torna imponente.
 */
/*
 * PLACA E NOME TÊM A MESMA ALTURA, e uma medida só governa as duas.
 *
 * A primeira correção aumentou o nome e mesmo assim ele continuou menor que a
 * placa — o dono voltou a apontar, e estava certo de novo. A causa era que os
 * dois eram definidos em números separados, então divergiam sem ninguém notar.
 *
 * E divergiam de um jeito que engana: o corpo da fonte NÃO é a altura das
 * letras. Amberly Black tem caixa alta de 0,72 do corpo — medido no navegador,
 * não estimado. Com 25,92px de corpo, as letras de VALOAR tinham 18,7px de
 * altura contra uma placa de 40px. Menos da metade, enquanto o CSS parecia
 * dizer que os dois estavam grandes.
 *
 * Agora `--vlr-marca-altura` manda nos dois: é a largura da placa e é a altura
 * das letras. O corpo da fonte vira consequência (`altura ÷ 0,72`), e não uma
 * escolha separada que pode escorregar de novo.
 *
 * `line-height: 0.72` faz a caixa da palavra medir o que as letras medem. Sem
 * isso o corpo de 55px criaria uma linha de 55px de altura e a barra do topo
 * cresceria de 68 para 84px por causa do espaço interno da fonte, que é
 * invisível. Vale porque VALOAR é caixa alta inteira: não há descida de letra
 * para ser cortada.
 */
.vlr-marca {
	--vlr-marca-altura: clamp(30px, 26px + 1.1vw, 40px);
	--vlr-marca-caixa-alta: 0.72;

	/*
	 * A altura das letras contra a altura da placa.
	 *
	 * Igualar as duas (proporção 1) foi longe demais, e tem razão técnica: a
	 * placa é um contêiner com respiro interno, as letras são nuas. Com a mesma
	 * medida, a palavra parece inchada ao lado do símbolo em vez de irmã dele.
	 *
	 * 0,66 é onde o conjunto fecha: a marca continua mandando no topo, e o V
	 * volta a parecer do mesmo tamanho da palavra em vez de menor que ela.
	 *
	 * O caminho até aqui, em altura real das letras: 14,3px (perdida no meio do
	 * menu) → 18,7px (ainda menor que a placa) → 40px (grande demais) → 26,4px.
	 */
	--vlr-marca-proporcao: 0.66;

	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--vlr-marca);
	font-weight: 900;
	color: var(--vlr-tinta);
	text-decoration: none;
	flex: none;
}

.vlr-marca > span:not(.vlr-placa) {
	font-size: calc(
		var(--vlr-marca-altura) * var(--vlr-marca-proporcao) / var(--vlr-marca-caixa-alta)
	);
	line-height: var(--vlr-marca-caixa-alta);

	/*
	 * Negativo, e mais firme agora que o corpo é grande. Amberly Black em corpo
	 * pequeno pede respiro para não empastar; grande, o espaço extra afrouxa a
	 * palavra e tira dela exatamente a densidade que a torna imponente.
	 */
	letter-spacing: -0.015em;
}

/* A placa lê a MESMA medida do nome. Antes tinha um `clamp` próprio, e era isso
   que deixava as duas escorregarem uma da outra. */
.vlr-marca__placa {
	width: var(--vlr-marca-altura);
	background: var(--vlr-roxo);
	color: #fff;
	--vlr-produto: var(--vlr-roxo);
	--vlr-produto-tinta: #fff;
}

.vlr-nav {
	display: flex;
	align-items: center;
	gap: var(--vlr-e4);
	margin-left: auto;
}

.vlr-nav__lista {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlr-nav__item {
	position: relative;
}

/*
 * Link e gatilho compartilham a aparência de propósito: o visitante não deve
 * precisar descobrir quais itens abrem painel antes de tentar.
 *
 * 44px de altura é o mínimo de alvo de toque. No desktop parece folgado; num
 * híbrido com tela sensível ao toque é a diferença entre acertar e errar.
 */
.vlr-nav__link,
.vlr-nav__gatilho {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding-inline: 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	font-family: var(--vlr-corpo);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1;
	color: var(--vlr-tinta);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--vlr-rapido) var(--vlr-curva), color var(--vlr-rapido) var(--vlr-curva);
}

.vlr-nav__link:hover,
.vlr-nav__gatilho:hover,
.vlr-nav__item:focus-within > .vlr-nav__gatilho,
.vlr-nav__gatilho[aria-expanded="true"] {
	background: var(--vlr-superficie);
	color: var(--vlr-roxo);
}

.vlr-nav__link--atual,
.vlr-nav__gatilho--atual {
	color: var(--vlr-roxo);
}

.vlr-nav__seta {
	width: 9px;
	height: 9px;
	fill: currentcolor;
	opacity: 0.55;
	transition: transform var(--vlr-medio) var(--vlr-curva);
}

.vlr-nav__gatilho[aria-expanded="true"] .vlr-nav__seta {
	transform: rotate(180deg);
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Painel em cascata
 * ----------------------------------------------------------------------- */

/*
 * `visibility` e não `display` porque display não transiciona; `visibility` e
 * não só `opacity` porque painel transparente continua clicável e continua na
 * ordem de tabulação. As duas juntas somem de verdade e ainda animam.
 */
.vlr-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 5;
	width: max-content;
	max-width: calc(100vw - 2 * var(--vlr-pad));
	padding: var(--vlr-e4);
	border: 1px solid var(--vlr-borda);
	border-radius: 20px;
	background: var(--vlr-papel);
	box-shadow: var(--vlr-sombra-3);
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, -8px);
	transition: opacity var(--vlr-medio) var(--vlr-curva), transform var(--vlr-medio) var(--vlr-curva), visibility 0s linear 0.18s;
}

/*
 * Ponte invisível sobre os 12px entre o botão e o painel. Sem ela o ponteiro
 * sai do item no meio do caminho, o painel fecha, e o visitante conclui que o
 * menu está quebrado — quando o problema era só um vão.
 */
.vlr-mega::before {
	content: "";
	position: absolute;
	inset: -13px 0 auto;
	height: 13px;
}

/*
 * Três caminhos para abrir, e o hover é só um deles. Um menu que só responde a
 * ponteiro exclui teclado e leitor de tela — e some no celular, onde hover não
 * existe.
 */
.vlr-nav__gatilho[aria-expanded="true"] + .vlr-mega,
.vlr-nav__item--mega:hover > .vlr-mega,
.vlr-nav__item--mega:focus-within > .vlr-mega {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

/*
 * OS DOIS PAINÉIS SÃO CENTRALIZADOS NO GATILHO. O de produtos era ancorado pela
 * direita, e o Demóstenes apontou: o cursor ficava num canto e o painel abria em
 * outro, sem relação visível entre o que ele apontou e o que apareceu.
 *
 * A âncora à direita existia porque "Produtos Valoar" era o penúltimo item e um
 * painel largo centralizado nele saía da tela. Com a ordem nova — Sobre,
 * Serviços, Produtos, Cases, Contato — o gatilho passou para o meio da barra, e
 * centralizar cabe.
 *
 * O que sustenta isso em qualquer largura é o `max-inline-size` abaixo, que
 * limita o painel ao container. Sem ele, uma tela de 1024px com o menu inteiro
 * empurrado para a direita voltaria a estourar.
 */
.vlr-mega {
	max-inline-size: min(calc(100vw - 2 * var(--vlr-pad)), 660px);
}

/* Cabeça do painel: o selo que diz em qual funil o visitante entrou (§12). */
.vlr-mega__cabeca {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--vlr-e2) var(--vlr-e3);
	padding: 2px 6px var(--vlr-e3);
	margin-bottom: var(--vlr-e3);
	border-bottom: 1px solid var(--vlr-borda);
}

.vlr-mega__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;
}

/*
 * O selo foi o primeiro lugar onde o verde de texto reprovou sobre fundo que
 * não era branco, e por um tempo teve uma cor própria aqui. O tom subiu para o
 * token em 17/08/2026, quando o mesmo problema reapareceu na página de
 * serviços: cor duplicada em dois arquivos é cor que sai de sincronia.
 */
.vlr-mega--servico .vlr-mega__selo {
	background: rgb(72 134 123 / 12%);
	color: var(--vlr-verde-texto);
}

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

.vlr-mega__frase {
	margin: 0;
	font-size: 0.84rem;
	color: var(--vlr-tinta-fraca);
}

.vlr-mega__grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.vlr-mega__card {
	display: flex;
	align-items: flex-start;
	gap: var(--vlr-e3);
	height: 100%;
	padding: var(--vlr-e3);
	border: 1px solid transparent;
	border-radius: 13px;
	text-decoration: none;
	transition: background-color var(--vlr-rapido) var(--vlr-curva), border-color var(--vlr-rapido) var(--vlr-curva), transform var(--vlr-rapido) var(--vlr-curva);
}

.vlr-mega__card:hover,
.vlr-mega__card:focus-visible {
	background: var(--vlr-superficie);
	border-color: var(--vlr-borda);
	transform: translateY(-1px);
}

.vlr-mega__icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgb(72 134 123 / 12%);
	color: var(--vlr-verde-texto);
}

/* A cor do produto vem do inline `--vlr-produto` que o template grava. */
.vlr-mega__icone--produto {
	background: color-mix(in srgb, var(--vlr-produto) 13%, transparent);
	color: var(--vlr-produto);
}

.vlr-mega__icone svg {
	width: 19px;
	height: 19px;
	fill: currentcolor;
}

.vlr-mega__texto {
	display: block;
	min-width: 0;
}

.vlr-mega__nome {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--vlr-tinta);
}

/*
 * `nowrap` porque rótulo curto quebrado no meio ("Em / desenvolvimento") vira
 * duas linhas de altura irregular e desalinha a grade inteira.
 */
.vlr-mega__estado {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgb(238 132 56 / 15%);
	color: #a8551b;
	font-family: var(--vlr-dado);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vlr-mega__resumo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-top: 5px;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--vlr-tinta-fraca);
}

.vlr-mega__pe {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: var(--vlr-e3);
	margin-inline: 6px;
	padding-top: var(--vlr-e3);
	border-top: 1px solid var(--vlr-borda);
	width: calc(100% - 12px);
	font-family: var(--vlr-dado);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vlr-roxo);
	text-decoration: none;
}

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

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

.vlr-topo .vlr-btn {
	font-size: 0.8rem;
	padding: 11px var(--vlr-e4);
	min-height: 44px;
	flex: none;
}

/* Botão do menu no celular. Some no desktop. */
.vlr-menu-btn {
	display: none;
	align-items: center;
	gap: var(--vlr-e2);
	background: none;
	border: 1px solid var(--vlr-borda);
	border-radius: 999px;
	padding: 9px 15px;
	font-family: var(--vlr-dado);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vlr-tinta);
	cursor: pointer;
	min-height: 44px;
	margin-left: auto;
}

.vlr-menu-btn__barras {
	position: relative;
	display: block;
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
}

.vlr-menu-btn__barras::before,
.vlr-menu-btn__barras::after {
	content: "";
	position: absolute;
	left: 0;
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
}

.vlr-menu-btn__barras::before {
	top: -5px;
}

.vlr-menu-btn__barras::after {
	top: 5px;
}

/* --------------------------------------------------------------------------
 * Celular: a barra vira gaveta e os painéis viram sanfona.
 * ----------------------------------------------------------------------- */

@media (max-width: 56.25rem) {
	/*
	 * A gaveta é ancorada no `__interno`, e não no cabeçalho inteiro: o
	 * cabeçalho é largura cheia e a gaveta precisa respeitar o container, senão
	 * ela encosta na borda da tela enquanto o resto do site respira.
	 */
	.vlr-topo__interno {
		position: relative;
		min-block-size: 60px;
	}

	/*
	 * A barra superior encolhe: o e-mail e a cidade saem e ficam só as redes,
	 * centralizadas. Endereço de e-mail em 12px numa faixa de 40px é texto que
	 * ninguém lê e alvo que ninguém acerta — e ele está no rodapé, inteiro.
	 */
	.vlr-barra__contato {
		display: none;
	}

	.vlr-barra__interno {
		justify-content: center;
		min-block-size: 36px;
	}

	.vlr-menu-btn {
		display: inline-flex;
	}

	.vlr-nav {
		display: none;
		position: absolute;
		inset: calc(100% + 10px) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--vlr-e3);
		max-height: calc(100dvh - 120px);
		overflow-y: auto;
		padding: var(--vlr-e4);
		border: 1px solid var(--vlr-borda);
		border-radius: 22px;
		background: var(--vlr-papel);
		box-shadow: var(--vlr-sombra-3);
	}

	.vlr-nav[data-aberto="sim"] {
		display: flex;
	}

	.vlr-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.vlr-nav__link,
	.vlr-nav__gatilho {
		width: 100%;
		justify-content: space-between;
		padding-inline: var(--vlr-e3);
		border-radius: 12px;
		font-size: 1rem;
	}

	/*
	 * Sanfona. Hover não abre aqui: no celular o primeiro toque num item que
	 * responde a hover dispara os dois estados de uma vez, e o painel abre e
	 * fecha no mesmo gesto.
	 */
	.vlr-mega {
		position: static;
		display: none;
		width: auto;
		max-width: none;
		margin: 4px 0 var(--vlr-e3);
		padding: var(--vlr-e3);
		border-radius: 14px;
		background: var(--vlr-superficie);
		box-shadow: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vlr-nav__item--mega:hover > .vlr-mega,
	.vlr-nav__item--mega:focus-within > .vlr-mega {
		display: none;
		transform: none;
	}

	/*
	 * O `transform: none` precisa estar repetido aqui, não só na regra base
	 * acima: as regras de abertura do desktop têm especificidade maior e o
	 * `translateX(-50%)` delas atravessava a media query, jogando a sanfona
	 * meia tela para fora no celular.
	 */
	.vlr-nav__gatilho[aria-expanded="true"] + .vlr-mega {
		display: block;
		transform: none;
	}

	.vlr-mega__grade,
	.vlr-mega__grade--dupla {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlr-mega__card {
		background: var(--vlr-papel);
		border-color: var(--vlr-borda);
	}

	.vlr-topo .vlr-btn {
		justify-content: center;
		width: 100%;
	}
}

/*
 * Quem pede menos movimento recebe o painel pronto, não o painel congelado:
 * zerar a duração mantém a troca de estado instantânea em vez de travá-la.
 */
@media (prefers-reduced-motion: reduce) {
	.vlr-mega,
	.vlr-mega__card,
	.vlr-mega__pe::after,
	.vlr-nav__seta,
	.vlr-nav__link,
	.vlr-nav__gatilho {
		transition-duration: 0.01ms;
	}

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

/* --------------------------------------------------------------------------
 * Moldura de página
 *
 * Estes três componentes moravam em `home.css` e não são da home: o cabeçalho
 * de seção aparece em cinco templates, o par de botões em quatro, e a chamada
 * final em quatro. Só que `home.css` é carregada exclusivamente na front page —
 * então em `/servicos/`, `/sobre/`, na página de serviço e na de case a
 * chamada final vinha SEM as regras dela.
 *
 * O efeito era invisível para uma varredura de contraste, e é por isso que
 * passou: sem `.vlr-final`, a seção herdava o papel branco e ficava com texto
 * escuro sobre claro, que aprova em qualquer medição. O que se perdia era o
 * roxo cheio, a centralização e a costura com o rodapé — a página terminava
 * com um bloco de texto solto no branco em vez do fechamento da marca.
 *
 * Ficam aqui, e não em `conteudo.css`, porque `base.css` já é a camada que
 * toda tela carrega: é onde vivem o cabeçalho, o rodapé e o botão. Componente
 * de moldura pertence à moldura.
 * ----------------------------------------------------------------------- */

/* Par de botões. Nasceu no hero, virou o padrão de toda chamada do site. */
.vlr-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e3);
}

/* Cabeçalho de seção: título à esquerda, frase de apoio à direita. */
.vlr-secao__cab {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--vlr-e4) var(--vlr-e7);
	align-items: end;
	margin-bottom: var(--vlr-e6);
}

.vlr-secao__cab p:last-child {
	margin: 0;
	padding-bottom: 4px;
}

/*
 * Botão no cabeçalho de seção não estica.
 *
 * `.vlr-btn` é `inline-flex`, mas como item direto de uma grade ele recebe
 * `justify-self: stretch` e passa a ocupar a coluna inteira — 296px de botão
 * para "Ver todos os cases". Botão largo demais deixa de parecer botão e passa
 * a parecer campo de formulário.
 */
.vlr-secao__cab > .vlr-btn {
	justify-self: start;
}

/*
 * A chamada final.
 *
 * O fundo roxo é declarado aqui, no próprio componente, e não numa classe
 * `vlr-escuro` ao lado: a versão que dependia da classe externa é justamente a
 * que deixou a subheadline branca sobre branco quando um template esqueceu de
 * escrevê-la. Bloco que só funciona em fundo escuro carrega o próprio fundo.
 */
.vlr-final {
	text-align: center;
	background:
		radial-gradient(90% 120% at 50% 0%, rgb(139 95 176 / 45%) 0%, transparent 60%),
		var(--vlr-roxo);
	color: #fff;
	padding-block: var(--vlr-e9);
}

.vlr-final h2 {
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	color: #fff;
	max-width: 22ch;
	margin-inline: auto;
	text-wrap: balance;
}

.vlr-final__sub {
	font-size: clamp(1rem, 1.8vw, 1.14rem);
	line-height: 1.55;
	margin: var(--vlr-e4) auto var(--vlr-e7);
	max-width: 58ch;
	color: rgb(255 255 255 / 86%);
}

.vlr-final .vlr-hero__acoes {
	justify-content: center;
}

.vlr-final__tag {
	color: rgb(255 255 255 / 70%);
	margin-top: var(--vlr-e8);
}

/*
 * O rodapé também é roxo cheio, e encosta na chamada final.
 *
 * A regra antiga era `.vlr-final + .vlr-rodape`, que nunca casou: o <main>
 * fecha entre os dois, então eles não são irmãos adjacentes. O resultado era
 * uma faixa branca de 104px separando dois blocos roxos — parecia seção
 * vazia que faltou preencher. O :has() sobe até o main e resolve.
 *
 * O filete claro continua no lugar: sem ele, chamada e rodapé viram um bloco
 * roxo só de 700px e o visitante perde a noção de onde a página acabou.
 */
/*
 * Duas formas, porque o `.vlr-final` mora em dois lugares.
 *
 * Na Home ele é filho direto do `#vlr-conteudo`. Em `/sobre/`, `/servicos/` e na
 * página de serviço ele está dentro do `<article>` que o `post_class()` pede. A
 * regra tinha só a primeira forma, e nessas três páginas a faixa branca de 104px
 * voltava a aparecer entre dois blocos roxos.
 *
 * É a terceira vez nesta sessão que um seletor escrito para a estrutura da Home
 * falha calado nas outras. O padrão vale anotar: quando o componente pode estar
 * embrulhado, o seletor precisa dizer isso.
 */
#vlr-conteudo:has( > .vlr-final:last-child ) + .vlr-rodape,
#vlr-conteudo:has( > :last-child > .vlr-final:last-child ) + .vlr-rodape {
	margin-top: 0;
	border-top: 1px solid rgb(255 255 255 / 18%);
}

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

@media (max-width: 40rem) {
	/* Botão de largura cheia no celular: dois botões meio a meio ficam com
	   rótulo quebrado em duas linhas. */
	.vlr-hero__acoes .vlr-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
 * Rodapé
 * ----------------------------------------------------------------------- */

.vlr-rodape {
	background: var(--vlr-roxo);
	color: #fff;
	padding-block: var(--vlr-e9) var(--vlr-e7);
	margin-top: var(--vlr-e9);
}

.vlr-rodape__grade {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--vlr-e7) var(--vlr-e6);
	align-items: start;
}

.vlr-rodape h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}

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

/*
 * O link do rodapé precisa de 24px de altura, e não tinha.
 *
 * A WCAG 2.5.8 pede alvo de 24x24 CSS px. Os links de navegação daqui mediam
 * 20 — a linha de texto e nada em volta. Dedo grande, celular chacoalhando no
 * ônibus, mão com tremor: 4px fazem diferença real nessa situação, e o rodapé
 * é onde estão os caminhos para Serviços, Cases e Produtos.
 *
 * `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 do
 * rodapé não muda — só a área que aceita o toque.
 *
 * A regra vale para o rodapé inteiro, que é a única parte do site presente em
 * todas as páginas. Fora dele, link dentro de frase é isento pela própria
 * norma, porque a entrelinha do texto ao redor é que manda no tamanho.
 */
.vlr-rodape a {
	color: rgb(255 255 255 / 88%);
	text-decoration: none;
}

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

.vlr-rodape a:hover {
	color: #fff;
	text-decoration: underline;
}

.vlr-rodape__base {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlr-e3) var(--vlr-e5);
	justify-content: space-between;
	align-items: center;
	margin-top: var(--vlr-e8);
	padding-top: var(--vlr-e5);
	border-top: 1px solid rgb(255 255 255 / 20%);
}

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

/* Marcação de conteúdo do editor, quando o cliente escreve no bloco. */
.vlr-prosa > * + * {
	margin-top: var(--vlr-e4);
}

.vlr-prosa h2,
.vlr-prosa h3 {
	margin-top: var(--vlr-e7);
}

.vlr-prosa ul,
.vlr-prosa ol {
	max-width: var(--vlr-leitura);
	padding-left: var(--vlr-e5);
}

.vlr-prosa li + li {
	margin-top: var(--vlr-e2);
}

.vlr-prosa img {
	border-radius: var(--vlr-raio);
}


/* --------------------------------------------------------------------------
 * O BOTÃO FLUTUANTE DO WHATSAPP
 *
 * Padrão que quase todo site brasileiro de serviço usa: quem quer falar não
 * deveria precisar procurar a página de contato.
 *
 * Verde do WhatsApp e não roxo da marca, e isso é decisão. A cor aqui não está
 * dizendo "Valoar", está dizendo "WhatsApp" — é reconhecimento, não identidade.
 * Pintar de roxo economizaria coerência e custaria o clique, porque o botão
 * deixaria de ser reconhecido de longe pelo que ele é.
 * ----------------------------------------------------------------------- */

.vlr-zap-fixo {
	position: fixed;

	/*
	 * `env(safe-area-inset-*)` para o iPhone: sem isso o botão fica embaixo da
	 * barra de gestos, e no aparelho que mais recebe esse clique.
	 */
	inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(20px + env(safe-area-inset-right, 0px));
	z-index: 60;

	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;

	/*
	 * O aro em verde-escuro é acessibilidade, não enfeite.
	 *
	 * O verde do WhatsApp contra uma página branca dá 1,98:1 de contraste de
	 * borda — abaixo dos 3:1 que a WCAG 1.4.11 pede para o limite de um
	 * controle. O ícone branco dentro do verde é isento por ser marca
	 * registrada, e trocá-lo destruiria o reconhecimento que faz o botão
	 * funcionar. O contorno do disco não é isento, e esse dá para resolver.
	 *
	 * `#128c7e` é o verde-escuro da própria paleta do WhatsApp, então o aro
	 * levanta o contorno sem inventar cor que não pertence à marca.
	 *
	 * A sombra fica junto: ela separa o botão de conteúdo de qualquer cor, e o
	 * aro sozinho não resolveria sobre fundo escuro.
	 */
	border: 2px solid #128c7e;
	box-shadow: 0 10px 26px -8px rgb(0 0 0 / 42%);
	transition: transform 200ms var(--vlr-curva, ease), box-shadow 200ms var(--vlr-curva, ease);
}

.vlr-zap-fixo svg {
	inline-size: 28px;
	block-size: 28px;
	fill: currentColor;
}

.vlr-zap-fixo:hover,
.vlr-zap-fixo:focus-visible {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 16px 32px -10px rgb(0 0 0 / 50%);
}

.vlr-zap-fixo:focus-visible {
	outline: 3px solid var(--vlr-roxo);
	outline-offset: 3px;
}

/*
 * No celular ele encolhe e chega mais perto do canto.
 *
 * Não é economia de espaço: 56px numa tela de 390px é um disco no meio do
 * caminho da leitura, e o polegar alcança o canto sem precisar de tanto alvo.
 * 48px continua muito acima do mínimo de 24px.
 */
@media (max-width: 40rem) {

	.vlr-zap-fixo {
		inline-size: 48px;
		block-size: 48px;
		inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
		inset-inline-end: calc(14px + env(safe-area-inset-right, 0px));
	}

	.vlr-zap-fixo svg {
		inline-size: 24px;
		block-size: 24px;
	}
}

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

	.vlr-zap-fixo {
		transition: none;
	}

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

/* Na impressão ele não existe: link flutuante vira mancha preta no papel. */
@media print {

	.vlr-zap-fixo {
		display: none;
	}
}