/*
	Blocos compartilhados entre páginas.

	Estes três nasceram na Home e são reaproveitados em Quem somos — e vão
	aparecer em mais páginas. Ficaram um tempo dentro de home.css, e o efeito
	foi exatamente o que se espera: em Quem somos os números apareceram como
	lista sem estilo, porque home.css só carrega na home.

	A regra que fica: bloco usado por mais de uma página não mora na folha de
	uma página. Estes entram junto da base, em toda página.
*/

/* ---------- 5. números, na faixa clara ---------- */

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

.numeros__intro {
	margin-bottom: var(--pic-esp-5);
}

.numeros__intro h2 {
	margin-bottom: var(--pic-esp-3);
}

.numeros__titulo {
	margin-bottom: var(--pic-esp-4);
	font-size: clamp(1.7rem, 3.6vw, 2.8rem);
	font-weight: 200;
	letter-spacing: -0.03em;
}

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

.numeros__lista {
	display: grid;
	gap: var(--pic-esp-4);
	grid-template-columns: 1fr;
	margin: 0;
	padding-block: var(--pic-esp-4);
	border-block: 1px solid rgba(29, 29, 36, 0.14);
}

@media (min-width: 44rem) {
	.numeros__lista {
		grid-template-columns: repeat(3, 1fr);
	}
}

.numero {
	margin: 0;
}

/*
	A régua: uma linha que cresce com a contagem, no roxo do AI Ready — na
	faixa clara o ciano reprova (1,55:1) e o roxo é a cor de ação.

	Ela segue o MESMO gatilho e o MESMO tempo da contagem, e isso não é
	capricho: régua e número são a mesma informação dita de dois jeitos, e uma
	chegando antes da outra desmente as duas. Quando a contagem deixou de ser
	amarrada à rolagem, a régua teve de sair junto — se tivesse ficado, a linha
	estaria cheia com o número ainda subindo.
*/
.numero__regua {
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 0.85rem;
	transform-origin: left center;

	/*
		CHEIA por padrão. Régua é acabamento do número, e número sem medida
		embaixo lê como erro de carregamento — então o estado de repouso, o que
		vale sem JavaScript, sem observador e com movimento reduzido, é a linha
		inteira. O que falha tem de falhar mostrando a verdade, não um toco de
		2 px.
	*/
	transform: scaleX(1);
	background: linear-gradient(90deg, #9900ff, #5481ff);
	opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
	/*
		Encolhe no CARREGAMENTO, assim que se sabe que o gatilho existe, e
		cresce no DISPARO. Encolher só no disparo faria a linha aparecer cheia
		e desabar antes de crescer de novo — o mesmo defeito de um quadro que a
		troca do número evita do outro lado.
	*/
	.pic-conta-pronta .numero__regua {
		transform: scaleX(0.06);
	}

	.pic-conta-pronta .pic-conta-roda .numero__regua {
		animation: pic-regua 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
	}
}

@keyframes pic-regua {
	from {
		transform: scaleX(0.06);
		opacity: 0.3;
	}

	to {
		transform: scaleX(1);
		opacity: 0.55;
	}
}

/*
	Mono tabular: "+2.400 projetos" em tabular parece medido; em proporcional,
	parece redigido. Numa agência que fala de dados, o detalhe conta.
*/
.numero__valor {
	font-size: clamp(2.4rem, 5.5vw, 3.6rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--pic-grafite);
}

.numero__rotulo {
	margin: 0.5rem 0 0;
	font-size: 0.92rem;
	color: #4a4a58;
}

.numeros__cta {
	margin-top: var(--pic-esp-4);
}

/* ---------- 7. depoimentos, na faixa clara (decisão V4) ---------- */

/*
	Composição de `telas/depoimentos.jpeg` (23/09/2026): cartão horizontal —
	retrato grande à esquerda, citação à direita — igual para todos, num
	trilho que rola na horizontal com o próximo cartão aparecendo pela metade.
*/
.depoimentos {
	position: relative;
	overflow: clip; /* clip, não hidden: hidden vira contêiner de rolagem e prende a view() de quem está dentro — ver 30-tecnologia.md */
	isolation: isolate;
	padding-block: var(--pic-esp-6);
}

.depoimentos__env {
	max-width: 90rem;
}

.depoimentos__intro {
	margin-bottom: var(--pic-esp-5);
}

.depoimentos__intro h2 {
	margin-top: var(--pic-esp-2);
	font-size: clamp(2.3rem, 4.4vw, 4rem);
	line-height: 1.08;
}

.depoimentos__intro h2 > span {
	display: block;
}

/*
	A curva ao fundo, deitada: o traço da referência atravessa a faixa do pé
	esquerdo ao alto direito. É a `)` da marca girada, e não uma linha
	qualquer — 1 px, no azul, a meia força. Na faixa clara ela sai sem o
	ciano, que sobre branco dá 1,55:1 e desaparece.
*/
.depoimentos__curva {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;

	/*
		Uma faixa estreita e muito comprida, girada: a `)` vira um arco
		longo que entra pela esquerda na altura dos cartões, passa por trás
		deles e sai pelo alto à direita, ao lado do título.
	*/
	width: clamp(12rem, 18vw, 20rem);
	height: 130vw;
	opacity: 0.55;
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(66deg);
	--pic-curva-peso: 1;
	--pic-curva-de: #5481ff;
	--pic-curva-ate: #5481ff;
}

.depoimentos__curva .pic-curva {
	display: block;
	width: 100%;
	height: 100%;
}

/*
	O TRILHO. Rola na horizontal com encaixe nativo, e a barra de rolagem
	sai de vista: quem passa são as setas, o toque e o trackpad. O foco de
	teclado fica no trilho inteiro (`tabindex="0"` na marcação), e as setas
	do teclado rolam sozinhas — comportamento nativo de região rolável.

	O preenchimento vertical existe para a sombra do cartão em relevo não
	ser cortada pela borda do contêiner que rola.
*/
/*
	O trilho SANGRA pela direita até a borda da tela. Preso ao envelope, o
	cartão seguinte era cortado a seco no meio da citação, numa linha
	vertical no meio da página — parecia defeito, e não convite. Cortado na
	borda da tela, ele lê como o que é: continua ali do lado.
*/
.depoimentos__trilho {
	margin-left: calc(var(--pic-esp-2) * -1);
	margin-right: calc(50% - 50vw);
	padding: var(--pic-esp-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pic-esp-2);
	scrollbar-width: none;
	container-type: inline-size;
}

.depoimentos__trilho::-webkit-scrollbar {
	display: none;
}

.depoimentos__trilho:focus-visible {
	outline: 2px solid var(--pic-grafite);
	outline-offset: 2px;
}

/*
	A SOBRA NO FIM DA LISTA. Sem ela, com dois cartões numa tela larga, o
	trilho só rolava 184 px: o segundo cartão nunca chegava à posição do
	primeiro, e a seta "próximo" mal se mexia. A sobra é exatamente a largura
	do trilho menos a de um cartão — o bastante para o último encaixar no
	começo, como todos os outros.
*/
.depoimentos__lista {
	display: flex;
	gap: var(--pic-esp-3);
	width: max-content;
	margin: 0;
	padding: 0 calc(100cqi - min(56rem, 88cqi)) 0 0;
	list-style: none;
}

/*
	Com um vídeo aberto, o cartão dele cresce ~250 px, e o vizinho fechado
	esticaria junto — retrato alongado e um vão embaixo da citação. A
	condição é de estado, e `:has()` a lê da lista.
*/
.depoimentos__lista:has(.depoimento__midia[open]) {
	align-items: flex-start;
}

/*
	Cada cartão tem 88 % da largura do trilho no celular e até 56 rem na
	tela larga — sempre menos que o trilho, para o próximo aparecer. Em
	unidade de contêiner, porque a lista tem largura do próprio conteúdo e
	porcentagem ali seria circular. Com um depoimento só
	não há próximo, e o cartão toma a largura que couber.
*/
.depoimento {
	flex: none;
	width: min(56rem, 88cqi);
	scroll-snap-align: start;
}

.depoimentos__lista[data-total="1"] {
	padding-right: 0;
}

.depoimentos__lista[data-total="1"] .depoimento {
	width: min(56rem, 100cqi);
}

/*
	O CARTÃO. Superfície branca sobre a faixa, borda de 1 px e raio de 6 —
	a mesma gramática dos cartões do site. O retrato vai até a borda, sem
	respiro: é ele que dá peso de peça ao cartão.

	O contraste não mudou em relação ao cartão anterior: citação em grafite
	sobre branco, 16,75:1; cargo em `#4a4a58`, 8,71:1.
*/
.depoimento__figura {
	display: grid;
	grid-template-columns: 1fr;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(29, 29, 36, 0.08);
	border-radius: 6px;
	background: var(--pic-branco);
	box-shadow: 0 0.8rem 2rem rgba(29, 29, 36, 0.06);
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.36s ease, border-color 0.36s ease;
}

.depoimento:hover .depoimento__figura,
.depoimento:focus-within .depoimento__figura {
	border-color: rgba(29, 29, 36, 0.16);
	box-shadow: 0 1.4rem 2.8rem rgba(29, 29, 36, 0.12);
}

@media (min-width: 46rem) {
	.depoimento__figura {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
		min-height: 26rem;
	}
}

/*
	O retrato ocupa a coluna inteira. No celular ele vem em cima, em 4:3,
	ancorado no alto para o rosto nunca sair do quadro.
*/
.depoimento__retrato {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pic-grafite);
}

@media (min-width: 46rem) {
	.depoimento__retrato {
		height: 100%;
		aspect-ratio: auto;
	}
}

.depoimento__retrato picture {
	display: block;
	width: 100%;
	height: 100%;
}

.depoimento__retrato img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
	O `<details>` e o gatilho enchem a coluna, para o retrato inteiro ser
	a superfície clicável.
*/
.depoimento__midia,
.depoimento__gatilho {
	display: block;
	height: 100%;
}

.depoimento__fala {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--pic-esp-3);
	padding: var(--pic-esp-4) var(--pic-esp-3);
}

@media (min-width: 46rem) {
	.depoimento__fala {
		padding: var(--pic-esp-5) clamp(2rem, 4vw, 3.5rem);
	}
}

.depoimento__citacao {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--pic-grafite);
}

.depoimento__citacao p::before {
	content: "\201C";
}

.depoimento__citacao p::after {
	content: "\201D";
}

/*
	O traço curto entre a fala e quem falou, no azul. É acabamento, não
	texto, então o 3,9:1 do azul sobre branco não pesa aqui.
*/
.depoimento__quem {
	position: relative;
	padding-top: var(--pic-esp-3);
}

.depoimento__quem::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3rem;
	height: 2px;
	border-radius: 1px;
	background: var(--pic-azul);
}

.depoimento__nome {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pic-grafite);
}

.depoimento__papel {
	display: block;
	font-size: 0.92rem;
	color: #4a4a58;
}

/*
	ASSISTIR DEPOIMENTO: o play e o rótulo sentam no pé do retrato, sobre um
	degradê escuro que garante o branco sobre qualquer foto. É acréscimo de
	quem tem vídeo, não degrau — quem não tem continua com o mesmo retrato,
	no mesmo tamanho (V4).
*/
.depoimento__assistir {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 3.5rem var(--pic-esp-3) var(--pic-esp-3);
	background: linear-gradient(to top, rgba(18, 18, 24, 0.72), rgba(18, 18, 24, 0));
	color: var(--pic-branco);
}

.depoimento__play {
	position: relative;
	flex: none;
	width: 3rem;
	height: 3rem;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(18, 18, 24, 0.55);
	transition: background-color 0.24s ease, transform 0.24s ease;
}

.depoimento__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 0.7rem solid var(--pic-branco);
	border-block: 0.44rem solid transparent;
}

.depoimento__assistir-texto {
	white-space: nowrap;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.depoimento__assistir-texto::after {
	content: "";
	display: inline-block;
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: 1px;
	margin-left: 0.9rem;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.7);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.depoimento__gatilho:hover .depoimento__play {
		background: var(--pic-roxo);
		transform: scale(1.06);
	}

	.depoimento__gatilho:hover .depoimento__assistir-texto::after {
		transform: scaleX(1.4);
	}

	.depoimento__gatilho:hover .depoimento__retrato img {
		scale: 1.03;
	}
}

/*
	OS CONTROLES. Pontos no centro, setas à direita, como a referência. Os
	pontos são botões com nome; o ativo é o grafite, os outros um cinza que
	só marca posição.
*/
.depoimentos__controles {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: var(--pic-esp-3);
}

.depoimentos__controles[hidden] {
	display: none;
}

.depoimentos__pontos {
	grid-column: 2;
	display: flex;
	gap: 0.3rem;
}

.depoimentos__ponto {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.depoimentos__ponto::before {
	content: "";
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	margin: auto;
	border-radius: 50%;
	background: rgba(29, 29, 36, 0.2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.depoimentos__ponto[aria-current="true"]::before {
	background: var(--pic-grafite);
	transform: scale(1.15);
}

.depoimentos__setas {
	grid-column: 3;
	justify-self: end;
	display: flex;
	gap: 0.75rem;
}

.depoimentos__seta {
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid rgba(29, 29, 36, 0.12);
	border-radius: 50%;
	background: var(--pic-branco);
	color: var(--pic-grafite);
	font: inherit;
	font-size: 1.15rem;
	cursor: pointer;
	box-shadow: 0 0.5rem 1.2rem rgba(29, 29, 36, 0.08);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.depoimentos__seta:hover:not(:disabled) {
	border-color: rgba(29, 29, 36, 0.3);
	box-shadow: 0 0.7rem 1.6rem rgba(29, 29, 36, 0.14);
}

.depoimentos__seta:disabled {
	opacity: 0.4;
	cursor: default;
	box-shadow: none;
}

/* ---------- o vídeo do depoimento (21/09/2026) ---------- */

/*
	O gatilho é o próprio retrato. `list-style: none` e o pseudo do WebKit
	tiram o triângulo que o navegador desenha no `<summary>`; o marcador é o
	play. Mãozinha, e não seta: o clique FAZ alguma coisa.
*/
.depoimento__gatilho {
	list-style: none;
	cursor: pointer;
}

.depoimento__gatilho::-webkit-details-marker {
	display: none;
}

/*
	ABERTO, O CARTÃO INTEIRO VIRA O PLAYER.

	O retrato é o rosto da pessoa; com o vídeo aberto o mesmo rosto está ali,
	em movimento. E a citação sai enquanto ele toca: a fala é o próprio vídeo,
	com legenda. Fica o comando de fechar e, embaixo, quem está falando.

	O vídeo ocupa a largura do cartão em 16:9 — no cartão lateral ele caberia
	numa coluna de 22 rem, pequeno demais para um rosto falando.
*/
.depoimento__figura:has(.depoimento__midia[open]) {
	grid-template-columns: 1fr;
}

.depoimento__figura:has(.depoimento__midia[open]) .depoimento__citacao {
	display: none;
}

.depoimento__figura:has(.depoimento__midia[open]) .depoimento__fala {
	padding-block: var(--pic-esp-3);
}

.depoimento__midia[open] {
	display: flex;
	flex-direction: column;
	height: auto;
}

.depoimento__midia[open] .depoimento__gatilho {
	order: 2;
	height: auto;
	padding: var(--pic-esp-2) var(--pic-esp-3) 0;
}

@media (min-width: 46rem) {
	.depoimento__midia[open] .depoimento__gatilho {
		padding-inline: clamp(2rem, 4vw, 3.5rem);
	}

	.depoimento__figura:has(.depoimento__midia[open]) .depoimento__fala {
		padding-inline: clamp(2rem, 4vw, 3.5rem);
	}
}

.depoimento__midia[open] .depoimento__quadro {
	order: 1;
}

.depoimento__midia[open] .depoimento__retrato {
	display: none;
}

/*
	O rótulo de abrir existe só para leitor de tela — ele diz o nome e a
	duração, que o texto visível não diz. O de fechar é visível, porque um
	vídeo aberto precisa de uma saída à vista.
*/
.depoimento__rotulo--abre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.depoimento__rotulo--fecha {
	display: none;
}

.depoimento__midia[open] .depoimento__rotulo--abre {
	display: none;
}

.depoimento__midia[open] .depoimento__rotulo--fecha {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.87rem;
	font-weight: 600;
	color: #4a4a58;
}

.depoimento__fechar {
	position: relative;
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(29, 29, 36, 0.28);
}

.depoimento__fechar::before,
.depoimento__fechar::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.6rem;
	height: 1px;
	background: #4a4a58;
}

.depoimento__fechar::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.depoimento__fechar::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*
	O fundo grafite preenche enquanto a capa não chega e enquadra a imagem
	depois. `width`/`height` do `<video>` vêm do PHP com os valores reais de
	cada arquivo — as duas fontes têm proporções diferentes, e são eles que
	evitam o salto quando o quadro abre.
*/
.depoimento__quadro {
	overflow: hidden;
	background: var(--pic-grafite);
	line-height: 0;
}

.depoimento__video {
	display: block;
	width: 100%;
	height: auto;
}

/*
	Relevo desligado enquanto o vídeo toca: imagem em movimento inclinando
	em 3D perde nitidez e parece que algo escorregou.
*/
.depoimento:has(.depoimento__midia[open]) .pic-face,
.depoimento:has(.depoimento__midia[open]):hover .pic-face,
.depoimento:has(.depoimento__midia[open]):focus-within .pic-face {
	transform: none;
}

/* ---------- 8. fechamento ---------- */

/*
	Composição de `telas/vamos_conversar.jpeg`. No celular a foto vem em cima,
	num recorte da mão e do rascunho, e o texto embaixo; a partir de 60 rem a
	foto ocupa a direita da seção e se apaga no grafite por trás do texto.
*/
.conversa {
	position: relative;
	overflow: clip; /* clip, não hidden: hidden vira contêiner de rolagem e prende a view() de quem está dentro — ver 30-tecnologia.md */
	isolation: isolate;
	border-top: 1px solid var(--pic-linha);
}

.conversa__foto {
	display: block;
	position: relative;
	z-index: -2;
	aspect-ratio: 4 / 3;

	/* O pé do recorte se apaga para dentro do título que vem logo abaixo. */
	-webkit-mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.35) 22%, #000 46%);
	mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.35) 22%, #000 46%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.conversa__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
	A foto é de dia, mesa clara; o site é noite. Um véu grafite abaixa o tom —
	véu, e não `filter` na imagem, porque filtro dentro de máscara rasterizou
	em quadrados na seção dos sócios (23/09/2026).
*/
.conversa__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 24, 0.32);
}

.conversa__dizer {
	position: relative;
	max-width: 36rem;
}

.conversa__env {
	position: relative;
	margin-top: -3rem;
	padding-bottom: var(--pic-esp-6);
}

/*
	A curva desenha no lado ESQUERDO e termina onde está o botão. É o único
	lugar do site em que ela encerra um percurso em vez de conduzir a outro —
	por isso pode ser grande aqui. No celular ela some: a coluna ocupa a
	largura inteira e ela passaria por baixo do texto.
*/
.conversa__curva {
	display: none;
}

@media (min-width: 60rem) {
	.conversa {
		display: grid;
		align-items: center;
		min-height: clamp(34rem, 38vw, 46rem);
	}

	/*
		O assunto da foto é a MÃO, e ela está na borda esquerda do original
		(o punho entre 5 % e 27 % da largura). A primeira versão apagava a
		foto numa rampa de 40 % e o punho sumia inteiro na penumbra, atrás do
		texto. Agora:

		- a foto começa em 44 % da seção e é ancorada pela ESQUERDA, para o
		  punho cair logo depois da coluna de texto, entre ~47 % e ~62 %;
		- a rampa da esquerda é curta — 12 % da caixa — e apaga só a manga
		  do suéter, que é escura e some bem no grafite;
		- alto e pé se apagam pouco, para fundir nas vizinhas;
		- e um apagamento RADIAL no canto superior esquerdo. Com a rampa
		  curta, o fundo cinza-claro do alto da foto (monitor e mesa) virava
		  uma aresta vertical — a foto lia como caixa colada. O canto some,
		  e o punho, que está no meio da altura, fica de fora do raio.

		As rampas têm paradas intermediárias: linear, o olho lê o começo da
		rampa como borda.
	*/
	.conversa__foto {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56%;
		aspect-ratio: auto;
		-webkit-mask-image:
			linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0.45) 7%, #000 12%),
			linear-gradient(to bottom, transparent, #000 12%),
			linear-gradient(to top, transparent, #000 14%),
			radial-gradient(ellipse 42% 62% at 0% 0%, transparent 25%, #000 80%);
		mask-image:
			linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0.45) 7%, #000 12%),
			linear-gradient(to bottom, transparent, #000 12%),
			linear-gradient(to top, transparent, #000 14%),
			radial-gradient(ellipse 42% 62% at 0% 0%, transparent 25%, #000 80%);
		mask-composite: intersect;
	}

	.conversa__foto img {
		object-position: 0% 50%;
	}

	/*
		O envelope é o mesmo dos cases e dos sócios (90 rem): a coluna alinha
		com eles e sai de cima da foto. E a coluna tem teto de 40 % da
		largura, para terminar antes de 44 %, onde a foto começa.
	*/
	.conversa__env {
		max-width: 90rem;
	}

	.conversa__dizer {
		max-width: min(36rem, 40%);
	}

	.conversa__env {
		width: 100%;
		margin-top: 0;
		padding-block: var(--pic-esp-6);
	}

	/*
		A curva mora na MARGEM, à esquerda do texto, e nunca por baixo dele.
		Com posição fixa em porcentagem, em 1280 px ela cruzava os parágrafos
		e o botão. Agora a borda direita dela é calculada a partir de onde a
		coluna começa — metade da sobra fora dos 90 rem, mais a calha — e
		fica 1,5 rem antes do texto. Em 1920 ela ocupa a margem; onde não há
		margem, sobra só a ponta dela na borda da tela.
	*/
	.conversa__curva {
		--largura: clamp(8rem, 12vw, 13rem);
		display: block;
		position: absolute;
		top: -12%;
		bottom: -12%;
		left: calc(max(0px, (100% - 90rem) / 2) + var(--pic-gutter) - 1.5rem - var(--largura));
		z-index: -1;
		width: var(--largura);
		opacity: 0.45;
		pointer-events: none;

		/*
			Peso 1: a curva é uma pena de fênix — delicada, sutil, leve. Com
			`non-scaling-stroke` no componente, 1 é 1 px de tela por mais
			esticada que ela esteja.
		*/
		--pic-curva-peso: 1;
		transform: translate3d(
			calc(var(--pic-px, 0) * -14px),
			calc(var(--pic-py, 0) * -10px),
			0
		);
		transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.conversa__curva .pic-curva {
		display: block;
		width: 100%;
		height: 100%;
	}
}



.conversa h2 {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(2.3rem, 4.4vw, 4rem);
}

.conversa__dizer > p:not(.conversa__cta) {
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.6;
	color: var(--pic-texto-2);
}

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

.conversa__cta {
	margin-top: var(--pic-esp-4);
}

.conversa__botao {
	position: relative;
	overflow: hidden;
	gap: 1rem;
	padding: 1rem 1.7rem;
	font-size: 1.02rem;
}

.conversa__seta {
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.conversa__botao:hover .conversa__seta,
.conversa__botao:focus-visible .conversa__seta {
	translate: 0.3rem 0;
}