/*
	Quem somos, recomposta em 28/09/2026.

	A abertura é o componente das internas (`interna.css`). Aqui ficam as
	seções da página, cada uma com a sua mecânica — o porquê de cada uma está
	no cabeçalho de `page-quem-somos.php`.
*/

/* ---------- 2. a trajetória ---------- */

.qs-trajetoria {
	padding-block: var(--pic-esp-6);
}

.qs-trajetoria__env {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--pic-esp-3);
}

@media (min-width: 52rem) {
	.qs-trajetoria__env {
		grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 46rem);
		gap: var(--pic-esp-5);
	}
}

/*
	A coluna do tempo tem a altura do texto (a grade estica), e o trilho
	ocupa o que sobra entre os dois anos. O fio dentro dele cresce com a
	rolagem; sem animação, ele está inteiro — o estado final é o visível.
*/
.qs-trajetoria__tempo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pic-esp-2);
}

@media (min-width: 52rem) {
	.qs-trajetoria__tempo {
		align-items: flex-end;
	}
}

.qs-trajetoria__ano {
	font-size: clamp(0.95rem, 1.8vw, 1.35rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--pic-texto-3);
	font-variant-numeric: tabular-nums;
}

.qs-trajetoria__ano--hoje {
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-weight: 500;
}

.qs-trajetoria__trilho {
	position: relative;
	flex: 1;
	width: 1px;
	background: var(--pic-linha);
}

@media (min-width: 52rem) {
	.qs-trajetoria__trilho {
		margin-right: 1.1rem;
	}
}

.qs-trajetoria__fio {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, #5481ff, #12e4ff);
	transform-origin: 50% 0;
}

/*
	A gota de luz na ponta do fio: é ela que o olho acompanha descendo. Ela é
	IRMÃ do fio, e não filha: o fio cresce por `scaleY`, e escala de pai
	achataria a gota num traço. Anda por `top`, na mesma linha do tempo.
	Sem animação ela fica na base, onde o fio inteiro termina.
*/
.qs-trajetoria__gota {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--pic-ciano);
	box-shadow: 0 0 0.9rem 0.2rem rgba(18, 228, 255, 0.45);
}

.qs-trajetoria__texto p {
	margin: 0;
	font-size: clamp(1.12rem, 2vw, 1.45rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--pic-texto);
}

.qs-trajetoria__texto p + p {
	margin-top: var(--pic-esp-4);
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/*
			Os dois andam na linha do tempo do TRILHO, nomeada, e não na
			própria: a gota se move por `top`, e com a `view()` dela mesma o
			movimento mudaria a medida que o conduz. O trilho não se move.
		*/
		.qs-trajetoria__trilho {
			view-timeline: --qs-tempo block;
		}

		.qs-trajetoria__fio {
			animation: pic-fio-cresce linear both;
			animation-timeline: --qs-tempo;
			animation-range: cover 50vh cover calc(100% - 50vh);
		}

		.qs-trajetoria__gota {
			animation: pic-gota-desce linear both;
			animation-timeline: --qs-tempo;
			animation-range: cover 50vh cover calc(100% - 50vh);
		}
	}
}

@keyframes pic-gota-desce {
	from {
		top: 0%;
	}

	to {
		top: 100%;
	}
}

@keyframes pic-fio-cresce {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

/* ---------- 3. os sócios ---------- */

.qs-socios {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.qs-socios__intro {
	max-width: 44rem;
	margin-bottom: var(--pic-esp-5);
}

.qs-socios__intro h2 {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.7rem, 3.6vw, 2.8rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.qs-socios__intro p {
	font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.qs-socios__dupla {
	display: grid;
	gap: var(--pic-esp-5);
}

@media (min-width: 52rem) {
	.qs-socios__dupla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pic-esp-5) clamp(2rem, 6vw, 6rem);
		align-items: start;
	}

	/* O degrau: a segunda pessoa desce. */
	.qs-socios__dupla .socio:nth-child(2) {
		margin-top: clamp(4rem, 12vw, 10rem);
	}
}

/*
	Teto de largura no retrato: na coluna inteira, cada um passava de 500 px
	de altura e os dois juntos ocupavam uma tela só de foto, com o texto
	empurrado para fora dela.
*/
.socio__retrato {
	max-width: 21rem;
	margin-bottom: var(--pic-esp-3);
	border-radius: 4px;
}

.socio__face {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: clip;
	border-radius: 4px;
	background: var(--pic-elevado);
	box-shadow: 0 1.4rem 3rem rgba(3, 3, 8, 0.45);
}

.socio__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.socio__nome {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 400;
	letter-spacing: -0.015em;
}

.socio__area {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.socio__texto {
	margin-top: var(--pic-esp-2);
	font-size: 0.98rem;
	color: var(--pic-texto-2);
}

.socio__olhar {
	margin-top: var(--pic-esp-2);
	padding-left: 1rem;
	border-left: 1px solid var(--pic-ciano);
	font-size: 0.98rem;
	color: var(--pic-texto);
}

/* ---------- 4. clientes: as faixas ---------- */

.qs-clientes {
	padding-block: var(--pic-esp-6);
	overflow: clip;
}

.qs-clientes__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--pic-esp-2);
	margin-bottom: var(--pic-esp-4);
}

.qs-clientes__rotulo {
	margin: 0 0 var(--pic-esp-2);
}

.qs-clientes__titulo {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(1.7rem, 3.6vw, 2.8rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

.qs-clientes__pausa {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--pic-linha);
	border-radius: 999px;
	background: transparent;
	color: var(--pic-texto-3);
	font: inherit;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.qs-clientes__pausa:hover,
.qs-clientes__pausa:focus-visible {
	color: var(--pic-texto);
	border-color: var(--pic-borda);
}

.qs-clientes__pausa[hidden] {
	display: none;
}

/* Duas barras quando anda; um triângulo quando está parada. */
.qs-clientes__pausa-icone {
	width: 0.6rem;
	height: 0.7rem;
	border-inline: 0.18rem solid currentColor;
}

.qs-clientes.e-pausado .qs-clientes__pausa-icone {
	border: 0;
	border-left: 0.6rem solid currentColor;
	border-block: 0.35rem solid transparent;
}

/* Sem movimento não há o que pausar. */
@media (prefers-reduced-motion: reduce) {
	.qs-clientes__pausa {
		display: none;
	}
}

.qs-clientes__faixas {
	display: grid;

	/*
		`minmax(0, 1fr)`, e não a trilha automática: a trilha automática
		estica até o conteúdo (o trilho tem 8.550 px), e os 120% da faixa
		passavam a ser de 8.550 — medido, a faixa com 10.260 px e a deriva
		andando cinco vezes o que devia.
	*/
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7rem;

	/*
		As bordas se apagam: os logos nascem e somem na névoa, em vez de
		serem cortados pela borda da tela. É o que faz a faixa ler como fluxo
		sem começo nem fim.
	*/
	mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

/*
	A faixa é mais larga que a tela (10% de cada lado), porque a deriva da
	rolagem a desloca até 5% da própria largura: sem a sobra, a borda
	esquerda do trilho apareceria.
*/
.qs-faixa {
	width: 120%;
	margin-left: -10%;
	font-size: clamp(0.86rem, 1.9vw, 1rem);
}

.qs-faixa__trilho {
	display: flex;
	width: max-content;
}

.qs-faixa__tira {
	display: flex;
	gap: 0.7em;
	margin: 0;
	padding: 0 0.7em 0 0;
	list-style: none;
}

/*
	A chapa. Uma pequena tela com um fio de luz na borda, como os quadros do
	painel da Home — o parentesco é de propósito: as duas faixas são a mesma
	parede, uma de trabalho, outra de quem confiou nele.
*/
.qs-logo {
	flex: none;
	width: 16em;
	height: 8.5em;
	border-radius: 4px;
}

.qs-logo__chapa {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(160deg, #26262f, #1f1f27);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		0 0.8rem 1.6rem rgba(3, 3, 8, 0.35);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.qs-logo img {
	display: block;
	max-width: none;
	opacity: 0.78;
	transition: opacity 0.3s ease;
}

.qs-logo:hover .qs-logo__chapa {
	box-shadow: inset 0 0 0 1px rgba(18, 228, 255, 0.35),
		0 1rem 2rem rgba(3, 3, 8, 0.5);
}

.qs-logo:hover img {
	opacity: 1;
}

.qs-logo .pic-luz {
	opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
	.qs-faixa__trilho {
		animation: qs-faixa-anda var(--qs-ciclo, 90s) linear infinite;
	}

	.qs-faixa--volta .qs-faixa__trilho {
		animation-direction: reverse;
	}

	/* Olhar um logo para a faixa dele; o botão para as duas. */
	.qs-faixa:hover .qs-faixa__trilho,
	.qs-clientes.e-pausado .qs-faixa__trilho {
		animation-play-state: paused;
	}
}

@keyframes qs-faixa-anda {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/*
	Sem movimento, a faixa vira grade: a primeira tira, quebrando em linhas,
	e nada mais. Uma faixa parada cortada pela borda da tela esconderia
	metade dos clientes.
*/
@media (prefers-reduced-motion: reduce) {
	.qs-clientes__faixas {
		mask-image: none;
		-webkit-mask-image: none;
		padding-inline: var(--pic-gutter);
	}

	.qs-faixa {
		width: auto;
		margin: 0;
	}

	.qs-faixa--volta,
	.qs-faixa__tira + .qs-faixa__tira {
		display: none;
	}

	.qs-faixa__trilho {
		width: auto;
	}

	.qs-faixa__tira {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}
}

/* ---------- 5. especialização ---------- */

.qs-especializacao {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.qs-especializacao__env {
	display: grid;
	gap: var(--pic-esp-5);
	align-items: center;
}

@media (min-width: 60rem) {
	.qs-especializacao__env {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: clamp(2.5rem, 6vw, 6rem);
	}
}

.qs-especializacao h2 {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.qs-especializacao p + p {
	margin-top: var(--pic-esp-2);
}

.qs-especializacao .pic-botao {
	margin-top: var(--pic-esp-3);
}

.qs-p4 {
	display: block;
	border-radius: 6px;
	color: inherit;
}

.qs-p4__face {
	position: relative;
	display: block;
	aspect-ratio: 3 / 1.45;
	overflow: clip;
	border-radius: 6px;
	background: #0b1430;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
		0 1.4rem 3rem rgba(3, 3, 8, 0.5);
}

.qs-p4__fundo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
}

.qs-p4__logo {
	position: absolute;
	left: 9%;
	top: 50%;
	width: auto;
	height: clamp(3.6rem, 8vw, 6rem);
	transform: translateY(-50%);
	filter: drop-shadow(0 0.3rem 1rem rgba(3, 3, 8, 0.6));
}

/* ---------- 6. o fecho ---------- */

.qs-fecho {
	padding-block: var(--pic-esp-6);
	border-top: 1px solid var(--pic-linha);
}

.qs-fecho__frase {
	max-width: 58rem;
	font-size: clamp(1.55rem, 3.6vw, 2.9rem);
	font-weight: 200;
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: var(--pic-texto);
	text-wrap: pretty;
}