/* =========================================================================
   LSV Tecnologia — folha de estilo única.
   Ordem: tokens › base › palco › clientes › rodapé › 404 › preferências.

   A página é uma coluna só: marca e frase no escuro, faixa de clientes no
   claro, rodapé no escuro. Não há JavaScript — o que se move é animação CSS,
   e a esteira para no :hover (e vira faixa estática em reduced-motion).
   ========================================================================= */

:root {
	/* ----- Paleta da marca -----
	   Azul elétrico é a cor de destaque, mas só pinta texto sobre fundo escuro
	   (5,16:1 no marinho). Sobre branco ele fica em 3,71:1, abaixo do mínimo de
	   4,5:1 para texto — por isso o que é clicável em fundo claro usa --acao. */
	--marinho: #010e2a;
	--eletrico: #0083fd;
	--acao: #0069d9;
	--acao-forte: #0056b3;

	/* Texto e superfícies. Todos os pares usados passam em 4,5:1. */
	--tinta-900: #0a192f;
	--tinta-600: #5e6e85;
	--claro-100: #cbd5e1;
	--fundo-2: #f4f7fb;
	/* Cinza-azulado de apoio no escuro: 5,67:1 sobre o marinho, passa em texto
	   pequeno. É o tom da assinatura do rodapé. */
	--linha-forte: #7c8da6;

	/* Escala de espaçamento (4 › 96) e de raio. */
	--e1: 4px;
	--e2: 8px;
	--e3: 12px;
	--e4: 16px;
	--e5: 24px;
	--e6: 32px;
	--e7: 48px;
	--e8: 64px;
	--e9: 96px;
	--raio-p: 10px;

	--respiro: 20px;
	--curva: cubic-bezier(0.22, 0.75, 0.3, 1);
	--fonte: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Intervalo entre as logos da esteira. É o mesmo valor dentro do grupo e
	   entre um grupo e o próximo — se os dois divergirem, a emenda aparece. */
	--vao: clamp(40px, 5vw, 72px);
}

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

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

body {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--marinho);
	color: #fff;
	font-family: var(--fonte);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--acao);
	text-decoration: none;
}

img,
svg {
	display: block;
}

/* O anel usa o elétrico: é o único tom da família acima de 3:1 tanto sobre
   branco (3,71:1) quanto sobre o marinho (5,16:1), e aparece nos dois fundos. */
:focus-visible {
	outline: 3px solid var(--eletrico);
	outline-offset: 2px;
	border-radius: 4px;
}

.simbolos {
	display: none;
}

/* ---------- Entrada ----------
   Animação de carregamento, não de rolagem: `both` segura o estado inicial
   durante o atraso, então nada pisca visível antes da hora. */

@keyframes entra {
	from {
		opacity: 0;
		translate: 0 18px;
	}
}

.entra {
	animation: entra 0.75s var(--curva) both;
}

.entra--2 {
	animation-delay: 0.12s;
}

.entra--3 {
	animation-delay: 0.26s;
}

.entra--4 {
	animation-delay: 0.4s;
}

.entra--5 {
	animation-delay: 0.54s;
}

/* ---------- Palco (marca + frase) ---------- */

/* Ocupa a sobra da coluna: em tela alta a marca fica centrada no espaço livre;
   em tela baixa o padding mínimo manda e a página rola normalmente. */
.palco {
	position: relative;
	isolation: isolate;
	/* Segura o halo: ele é mais largo que a tela no celular (120vw) e, solto,
	   empurrava a largura do documento e criava rolagem horizontal. */
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--e4), 3vw, var(--e6));
	/* O respiro é proporcional à altura (9vh/5vh) e some quando falta espaço:
	   como o palco é o item que cresce (`flex: 1`), em tela que comporta a
	   página inteira ele estica de volta e o padding não muda nada do que se vê.
	   Encolher aqui só tem efeito onde a coluna já não cabe — é lá que a
	   assinatura do rodapé estava ficando abaixo da dobra. */
	padding: clamp(var(--e7), 9vh, var(--e9)) var(--respiro) clamp(var(--e5), 5vh, var(--e7));
	text-align: center;
}

/* Halo de luz elétrica atrás da marca — a mesma ideia do brilho do logo. Fica
   contido no palco: mais abaixo ele clarearia o fundo da frase e derrubaria o
   contraste do texto. */
.palco__brilho {
	position: absolute;
	z-index: -1;
	top: -22%;
	left: 50%;
	width: min(860px, 120vw);
	aspect-ratio: 1 / 1;
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 131, 253, 0.28), transparent 62%);
	filter: blur(40px);
}

/* O lockup já traz a palavra "TECNOLOGIA" desenhada, então não acompanha
   texto. A largura é que define o tamanho; a altura segue a proporção do
   arquivo (900×421), declarada no <img> para não deslocar enquanto carrega. */
.palco__marca {
	width: clamp(190px, 25vw, 300px);
	height: auto;
}

/* O corpo e a entrelinha moram aqui, não nos filhos: as duas colunas só
   emparelham linha a linha se compartilharem os dois valores. Os filhos herdam,
   e quem ajusta o tamanho (telas baixas, abaixo) mexe num ponto só. */
.palco__frase {
	display: grid;
	gap: var(--e5);
	/* Empilhado, a medida de uma coluna só. No desktop a regra de duas colunas
	   troca isto pela medida de cada metade. */
	max-width: 24ch;
	font-size: clamp(24px, 5.6vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.palco__titulo {
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	letter-spacing: inherit;
}

/* A tradução é secundária por peso e cor, não por tamanho — o corpo igual é o
   que mantém as linhas das duas colunas na mesma altura. O --claro-100 dá
   12,9:1 sobre o marinho; o cinza apagado do layout que inspirou isto ficava
   pouco acima de 2:1 e reprovaria em texto. */
.palco__traducao {
	font-size: 0.8em;
	font-style: italic;
	font-weight: 400;
	line-height: inherit;
	color: var(--claro-100);
	text-wrap: balance;
}

/* A expressão destacada não quebra: são 16 caracteres, cabem numa linha mesmo
   a 320px, e partida ao meio ela deixa de ser uma imagem só. */
.palco__destaque {
	color: var(--eletrico);
	white-space: nowrap;
}

/* O `gap` do palco é o mesmo entre marca e frase e entre frase e ação, e isso
   deixava a pílula colada no texto: um botão precisa de mais ar acima do que
   duas linhas de texto. A margem é o acréscimo sobre o gap, não o vão inteiro —
   em tela baixa ela encolhe para 8px e a página continua fechando. */
.palco__acao {
	margin-top: clamp(var(--e2), 2vh, var(--e5));
}

/* ----- Colunas espelhadas -----
   Duas medidas de 25ch fecham cada bloco em quatro linhas escritas à mão, perto
   do quadrado. A medida não é para quebrar o texto — é folga: a maior linha tem
   24 caracteres em negrito e precisa caber inteira em qualquer system-ui, senão
   ela dobra e a coluna ganha uma quinta linha. O vão largo e o alinhamento
   oposto bastam como separação: uma divisória desenhada no meio competiria com
   o halo atrás da marca. */
@media (min-width: 760px) {
	.palco__frase {
		grid-template-columns: repeat(2, minmax(0, 25ch));
		justify-content: center;
		align-items: start;
		gap: clamp(var(--e5), 5vw, var(--e8));
		max-width: none;
		font-size: clamp(24px, 3.2vw, 36px);
		line-height: 1.3;
	}

	.palco__titulo {
		text-align: right;
	}

	.palco__traducao {
		/* Volta ao corpo da frase: lado a lado, tamanhos diferentes fariam as
		   linhas das duas colunas desencontrarem. */
		font-size: 1em;
		text-align: left;
	}

	/* A quebra passa a ser a do HTML. Sem `nowrap` de propósito: se numa fonte
	   larga uma linha não couber nos 25ch, é melhor ela dobrar do que vazar por
	   cima da coluna vizinha. */
	.palco__linha {
		display: block;
	}
}

/* Notebook de tela baixa (1366×768 e parecidos): sem isto a coluna passa da
   dobra. Encolher a marca e o respiro do palco traz a página inteira de volta
   para uma tela só — e desde que a pílula entrou aqui é ela, a única ação do
   site, que fica fora da tela se a conta não fechar.
   Precisa vir depois da regra de duas colunas: mesma especificidade, quem
   decide é a ordem. */
@media (min-width: 760px) and (max-height: 820px) {
	.palco {
		padding-top: clamp(var(--e5), 6vh, var(--e7));
		padding-bottom: clamp(var(--e4), 4vh, var(--e6));
	}

	.palco__marca {
		width: clamp(170px, 18vw, 230px);
	}

	.palco__frase {
		font-size: clamp(22px, 2.5vw, 30px);
	}
}

/* ---------- Clientes ---------- */

/* Faixa clara de propósito: quatro das sete logos são escuras (a do BTG é
   #001E61, a da Reserva é quase preta) e sumiriam no marinho. Pintar todas de
   branco também não serve — o nome dentro do bloco da Orange é branco
   desenhado, não vazado, e desapareceria junto.

   Os pisos dos dois `clamp()` daqui e do título são mais baixos que os do resto
   da página de propósito: é no celular que a faixa aperta a coluna, e o palco —
   que leva a frase e a pílula — precisa do espaço mais do que a faixa precisa
   do respiro. */
.clientes {
	padding: clamp(var(--e5), 4vw, var(--e7)) 0;
	background: var(--fundo-2);
	color: var(--tinta-900);
}

.clientes__titulo {
	margin-bottom: clamp(var(--e4), 4vw, var(--e6));
	padding-inline: var(--respiro);
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinta-600);
}

.esteira__janela {
	width: 100%;
	overflow: hidden;
	/* Desmancha as pontas em vez de cortar a logo no meio. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Desliza exatamente um grupo por ciclo. O deslocamento é porcentagem da
   largura do próprio trilho: com três grupos idênticos, 33,3333% é um grupo
   cravado, e no recomeço a cópia seguinte já está no lugar da primeira.
   Por isso o intervalo entre grupos não pode vir de `gap` no trilho — ele
   entraria duas vezes na largura total e a conta deixaria de fechar. */
@keyframes esteira {
	to {
		transform: translateX(-33.3333%);
	}
}

.esteira__trilho {
	display: flex;
	width: max-content;
	animation: esteira 38s linear infinite;
}

/* Para com o ponteiro em cima: movimento automático precisa de alguma saída, e
   com o botão fora esta é a que resta junto com o reduced-motion. O `.esteira`
   não tem estilo próprio — existe como moldura do hover, que precisa valer na
   faixa inteira, e é ele também que devolve a cor das logos. */
.esteira:hover .esteira__trilho {
	animation-play-state: paused;
}

.esteira__grupo {
	display: flex;
	align-items: center;
	gap: var(--vao);
	/* Fecha o intervalo até o grupo seguinte, mantendo o ritmo uniforme. */
	padding: 0 var(--vao) 0 0;
	margin: 0;
	list-style: none;
}

.cliente {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--cap-l);
	height: 56px;
}

.cliente img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--cap-a);
}

/* As logos têm proporções muito diferentes (de 1:1 a 7:1). Uma caixa única
   deixaria o logotipo-texto minúsculo ao lado do bloco sólido, então são três,
   escolhidas pela proporção, para o peso óptico ficar parecido. */

/* Logotipo escrito, bem mais largo que alto (Reserva, Hinova). */
.cliente--larga {
	--cap-l: 150px;
	--cap-a: 28px;
}

/* Marca com símbolo, proporção entre 2:1 e 3,5:1 (Stone, BTG, Enel, Prata). */
.cliente--alta {
	--cap-l: 112px;
	--cap-a: 46px;
}

/* Bloco sólido quadrado (Orange): como é área cheia de cor, pesa muito mais
   que um logotipo vazado do mesmo tamanho, e por isso entra menor. */
.cliente--bloco {
	--cap-l: 44px;
	--cap-a: 44px;
}

/* Cinza por padrão, cor no hover — efeito só onde o ponteiro existe.
   Escurece com `brightness` em vez de apagar com `opacity`: baixar a opacidade
   lava as marcas claras e some com o texto branco dentro do bloco da Orange. */
@media (hover: hover) {
	.cliente img {
		filter: grayscale(1) brightness(0.65) contrast(1.1);
		transition: filter 0.35s var(--curva);
	}

	.esteira:hover .cliente img {
		filter: none;
	}
}

/* ---------- Rodapé ----------
   Uma linha de 13px, centrada. O contato mora no palco, então aqui não há ação,
   nem rótulo, nem fio: a troca de fundo da faixa clara para o marinho já é a
   divisória, e o que sobra é a assinatura.

   Sem medida nem contêiner interno — é um parágrafo centrado pelo `text-align`
   do bloco, e o `min(1080px)` que existia aqui não tinha mais o que conter. */

.rodape {
	padding: clamp(var(--e4), 2.5vw, var(--e5)) var(--respiro) calc(var(--e4) + env(safe-area-inset-bottom));
	background: var(--marinho);
	text-align: center;
}

.rodape__assinatura {
	font-size: 13px;
	color: var(--linha-forte);
}

/* ---------- Pílula do WhatsApp ----------
   A ação principal das duas páginas: embaixo da frase no palco, embaixo do
   recado na 404. É o único bloco pintado do site — o peso é o que faz dela a
   primeira coisa clicável que o olho encontra depois do texto. */

.zap {
	display: inline-flex;
	align-items: center;
	gap: var(--e3);
	min-height: 56px;
	padding: 0 var(--e6);
	border-radius: 999px;
	background: var(--acao);
	color: #fff;
	font-size: clamp(17px, 2.4vw, 20px);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color 0.2s var(--curva), transform 0.2s var(--curva);
}

.zap svg {
	flex: 0 0 auto;
	fill: currentColor;
}

.zap:hover {
	background: var(--acao-forte);
	color: #fff;
	transform: translateY(-2px);
}

.zap:active {
	transform: translateY(0) scale(0.985);
}

/* ---------- Página 404 ---------- */

.erro {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e5);
	padding: var(--e7) var(--respiro);
	text-align: center;
}

.erro__marca {
	width: clamp(170px, 22vw, 240px);
	height: auto;
	margin-bottom: var(--e2);
}

.erro__titulo {
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
}

.erro__texto {
	max-width: 46ch;
	color: var(--claro-100);
}

/* ---------- Preferência por menos movimento ----------
   Sem movimento a esteira não faz sentido como esteira: vira uma linha de
   logos que quebra e se centra. */

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

	.esteira__janela {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Volta a ser bloco para o grupo ocupar a linha inteira e poder quebrar —
	   como item flex ele ficaria preso à largura do próprio conteúdo. */
	.esteira__trilho {
		display: block;
		width: auto;
		animation: none;
	}

	.esteira__grupo[aria-hidden='true'] {
		display: none;
	}

	.esteira__grupo {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--e6);
		padding: 0 var(--respiro);
	}

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