/*
	Home.

	Nove momentos, dois deles claros. As fichas de cor, tipografia e espaço
	vêm de base.css — aqui só o que é da Home.
*/

/* ---------- 1. abertura: o painel é o ambiente ---------- */

/*
	A abertura ocupa a tela inteira e o painel é o fundo dela. O texto vive
	dentro da cena — não ao lado de uma imagem.

	`isolation: isolate` não é decoração: os quadros do painel usam
	`mix-blend-mode: screen` no lampejo e na luz do cursor, e sem um contexto
	de mesclagem próprio aqui eles somariam com o que estiver atrás da seção.
*/
.abertura {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(7.5rem, 14vh, 10.5rem) var(--pic-esp-5);
	overflow: hidden;
}

/*
	No celular o cabeçalho é a barra de 4rem e flutua sobre o painel, então a
	abertura ocupa a tela exata e o padding do topo reserva a barra.
*/
@media (max-width: 48rem) {
	.abertura {
		padding-block-start: calc(4rem + var(--pic-esp-3));
	}
}

/*
	Celular baixo (iPhone SE, 375 x 667): com os respiros de sempre a abertura
	media 729 px e a assinatura caía para fora da tela. Os dois respiros da
	base encolhem e a conta fecha em 649.
*/
@media (max-width: 48rem) and (max-height: 45rem) {
	.abertura {
		padding-block-end: var(--pic-esp-3);
	}

	/* Dois nomes: esta regra vem antes da da assinatura, mais abaixo. */
	.abertura .abertura__assinatura {
		padding-top: var(--pic-esp-3);
	}
}

/*
	O cabeçalho que flutua sobre a abertura mora em `base.css` desde
	28/09/2026: as páginas internas ganharam abertura de tela cheia e fazem o
	mesmo. Vale para qualquer página com `[data-abertura]`.
*/

.abertura__env {
	position: relative;
	z-index: 2;
	width: 100%;

	/*
		O bloco de texto não captura o ponteiro: o relevo dos quadros continua
		respondendo por baixo da frase, e o painel inteiro fica vivo em vez de
		ter um retângulo morto no meio. Os links e botões reativam para si.
	*/
	pointer-events: none;
}

.abertura__env a,
.abertura__env button {
	pointer-events: auto;
}

.abertura__dizer {
	max-width: 34rem;
}

.abertura__frase {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	line-height: 1.02;

	/*
		A sombra do texto é o que separa a camada de cima do painel. Sem ela a
		frase encosta no fundo e a abertura perde a profundidade toda — e é
		também uma segunda garantia de legibilidade sobre um quadro claro.
	*/
	text-shadow: 0 0.02em 0.08em rgba(0, 0, 0, 0.55),
		0 0.12em 0.7em rgba(3, 3, 8, 0.6);
}

/*
	No verbo em gradiente a sombra tem de vir de `drop-shadow`: o glifo é
	pintado por `background-clip: text` sobre cor transparente, e `text-shadow`
	ali desenha atrás de um vazio.
*/
.abertura__verbo {
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 0.1em 0.5em rgba(3, 3, 8, 0.7));
}

.abertura__linha {
	display: block;
	overflow: hidden;
}

/*
	Cada linha entra sozinha, uma depois da outra, no carregamento. A abertura
	está acima da dobra: animação amarrada à rolagem não dispara aqui, então a
	entrada é por tempo. É o único lugar do site em que isso vale.

	Os atrasos partem de 0,35 s — o painel começa a acender antes, e a frase
	entra sobre um fundo que já tem vida.
*/
@media (prefers-reduced-motion: no-preference) {
	.abertura__linha {
		animation: pic-sobe-linha 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.abertura__linha:nth-child(1) { animation-delay: 0.35s; }
	.abertura__linha:nth-child(2) { animation-delay: 0.44s; }
	.abertura__linha:nth-child(3) { animation-delay: 0.53s; }
	.abertura__linha:nth-child(4) { animation-delay: 0.62s; }
	.abertura__linha:nth-child(5) { animation-delay: 0.71s; }

	.abertura__lead { animation: pic-sobe-linha 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.82s both; }
	.abertura__acoes { animation: pic-sobe-linha 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.92s both; }
	.abertura__assinatura { animation: pic-sobe-linha 0.95s cubic-bezier(0.16, 1, 0.3, 1) 1.04s both; }
}

@keyframes pic-sobe-linha {
	from {
		opacity: 0;
		transform: translate3d(0, 0.9em, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.abertura__lead {
	max-width: 32rem;
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	color: var(--pic-texto-2);
	text-shadow: 0 0.08em 0.55em rgba(3, 3, 8, 0.75);
}

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pic-esp-2);
	margin-top: var(--pic-esp-4);
}

.abertura__acoes .pic-botao {
	box-shadow: 0 0.9rem 2rem rgba(3, 3, 8, 0.45);
}

/*
	A assinatura da marca fecha a abertura, rente à base — `margin-top: auto`
	num contêiner `justify-content: center` empurra só ela para o fim, e o
	bloco de texto segue centrado no espaço que sobra.
*/
.abertura__assinatura {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--pic-largo);
	margin: var(--pic-esp-5) auto 0;
	margin-top: auto;
	padding-top: var(--pic-esp-5);
	padding-inline: var(--pic-gutter);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--pic-texto-3);
	text-shadow: 0 0.08em 0.5em rgba(3, 3, 8, 0.8);
}

/* ---------- o movimento das camadas acima do painel ---------- */

/*
	A abertura não é HTML parado sobre uma animação: as camadas de cima também
	se movem, e por dois estímulos diferentes.

	PONTEIRO. `--pic-px` e `--pic-py` (-1 a 1) chegam do `painel.js`, e o que
	eles movem é a PERSPECTIVA, não a posição. A primeira versão deslizava o
	bloco em x e y; o cliente pediu para trocar por uma mudança de perspectiva
	bem sutil, acompanhando o que o painel já faz — e ele está certo, porque
	deslizar texto é um efeito à parte, enquanto inclinar usa a mesma
	gramática dos quadros: o lado em que o cursor está recua, o oposto vem à
	frente.

	Os ângulos são deliberadamente pequenos (2,2° e 1,5° no bloco, 3° na
	assinatura, nos extremos da tela). O que se quer é a sensação de um plano
	que responde, não um cartão girando: a 2,2° o deslocamento da borda fica
	na casa de dois pixels. A diferença de ângulo entre o bloco e a assinatura
	é o que dá profundidade entre as duas camadas, e a transição longa dá a
	inércia do gesto, sem biblioteca nenhuma.

	ROLAGEM. O bloco de texto sobe e esmaece enquanto a abertura sai, em
	`scroll(root)`. Rola mais rápido que a página, o painel recua mais devagar
	que ela: a abertura se desmonta em três velocidades.
*/
@media (prefers-reduced-motion: no-preference) {
	.abertura__flutua {
		transform: perspective(1200px)
			rotateY(calc(var(--pic-px, 0) * 2.2deg))
			rotateX(calc(var(--pic-py, 0) * -1.5deg));
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.abertura__assina-flutua {
		display: inline-block;
		transform: perspective(900px) rotateY(calc(var(--pic-px, 0) * 3deg));
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	@supports (animation-timeline: scroll(root block)) {
		.abertura__dizer {
			animation: pic-abertura-sobe linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 90svh;
		}
	}
}

@keyframes pic-abertura-sobe {
	from {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}

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

/* ---------- 2. os cinco momentos: o palco ---------- */

.palco {
	position: relative;
	padding-block: var(--pic-esp-6) 0;
	border-top: 1px solid var(--pic-linha);
}

/* ---------- a pergunta que abre a sessão ---------- */

.palco__pergunta {
	display: grid;
	gap: var(--pic-esp-3);
	margin-bottom: var(--pic-esp-6);
}

@media (min-width: 60rem) {
	.palco__pergunta {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--pic-esp-6);
		align-items: end;
	}
}

.palco__titulo {
	margin: 0;
	font-size: clamp(2.2rem, 5.6vw, 4rem);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.palco__linha {
	display: block;
	overflow: hidden;
}

.palco__linha > span {
	display: block;
}

.palco__dizer p {
	font-size: clamp(0.98rem, 1.5vw, 1.1rem);
	color: var(--pic-texto-2);
}

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

/*
	A segunda linha carrega a escala de cor da seção. O gradiente é mais largo
	que o texto (300%) para a posição dele poder VIAJAR com a rolagem: a
	pergunta atravessa o mesmo caminho do azul ao ciano que os cinco momentos
	percorrem adiante. Estado parado no azul, que é o primeiro tom.
*/
.palco__linha--tom > span {
	background: linear-gradient(
		100deg,
		var(--pic-azul) 0%,
		var(--pic-azul) 22%,
		var(--pic-ciano) 62%,
		var(--pic-ciano) 100%
	);
	background-size: 300% 100%;
	background-position: 0% 50%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.palco__convite {
	color: var(--pic-texto-3);
}

/*
	O fio da entrega. Some no celular: lá a pergunta e as cenas já estão no
	mesmo fluxo, e o fio ligaria coisas que não estão separadas.
*/
.palco__fio {
	display: none;
}

@media (min-width: 60rem) {
	.palco__fio {
		display: block;
		grid-column: 1 / -1;
		width: 1px;
		height: clamp(3rem, 7vh, 5.5rem);
		margin-top: var(--pic-esp-4);
		transform-origin: top center;
		background: linear-gradient(to bottom, var(--pic-azul), transparent);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/*
			Cada linha do título tem DUAS animações na mesma régua: a subida de
			dentro do recorte, na entrada, e a viagem da cor, que continua
			enquanto o bloco sai. Listas separadas por vírgula casam por
			posição — primeira animação com a primeira faixa, e assim por
			diante.
		*/
		.palco__linha > span {
			animation: pic-sobe-de-dentro cubic-bezier(0.16, 1, 0.3, 1) both;
			animation-timeline: view();
		}

		.palco__linha:nth-child(1) > span {
			animation-range: entry 8% entry 62%;
		}

		.palco__linha--tom > span {
			animation: pic-sobe-de-dentro cubic-bezier(0.16, 1, 0.3, 1) both,
				pic-cor-viaja linear both;
			animation-timeline: view(), view();
			animation-range: entry 16% entry 72%, entry 45% exit 45%;
		}

		/*
			A saída do bloco inteiro: ele avança na direção de quem lê e
			esmaece, como câmera que passa por ele para entrar no palco. É o
			que transforma "título acima da seção" em "título que entrega a
			seção".
		*/
		.palco__dizer {
			animation: pic-foca cubic-bezier(0.16, 1, 0.3, 1) both;
			animation-timeline: view();
			animation-range: entry 24% entry 88%;
		}

		.palco__fio {
			animation: pic-fio linear both;
			animation-timeline: view();
			animation-range: entry 60% exit 10%;
		}
	}
}

@keyframes pic-sobe-de-dentro {
	from {
		transform: translate3d(0, 105%, 0);
	}

	to {
		transform: none;
	}
}

/* A cor atravessa a escala: azul na pergunta, ciano quando o palco assume. */
@keyframes pic-cor-viaja {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

/*
	Entrada com foco: o texto chega desfocado e fora de lugar e ENTRA EM FOCO.
	É o mesmo gesto de uma lente ajustando — e diz "preste atenção, começa
	aqui" sem precisar de nenhum enfeite.
*/
@keyframes pic-foca {
	from {
		opacity: 0;
		transform: translate3d(0, 1.8rem, 0);
		filter: blur(7px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/*
	A pergunta SAI PARA BAIXO, e não para cima.

	Subindo, ela vagava a área justamente onde o conteúdo ia aparecer, e abria
	uma janela de tela vazia entre a introdução e a primeira cena. Descendo,
	ela desocupa o alto primeiro — que é por onde a cena chega — e continua
	preenchendo a parte de baixo enquanto se despede.

	O patamar até 45% é o que faz o título ficar mais tempo na tela: ele
	segura, inteiro, por quase metade da própria fatia, e só então afunda.
*/
@keyframes pic-entrega {
	0%,
	45% {
		opacity: 1;
		transform: scale(1) translate3d(0, 0, 0);
		filter: blur(0);
	}

	100% {
		opacity: 0;
		transform: scale(0.96) translate3d(0, 4.5rem, 0);
		filter: blur(6px);
	}
}

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

	25% {
		opacity: 1;
	}

	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* ---------- reserva: sem palco, uma sequência empilhada ---------- */

/*
	Este é o estado BASE, e ele tem de ser legível sozinho: celular, navegador
	sem linha do tempo de rolagem, movimento reduzido. As cenas ficam no fluxo,
	uma embaixo da outra, inteiras. O palco é o acréscimo — e o acréscimo é que
	vive dentro de consulta.
*/
.palco__cenas {
	display: grid;
	gap: var(--pic-esp-6);
}

.cena {
	position: relative;
	display: grid;
	gap: var(--pic-esp-3);
	align-content: center;
}

.cena__desenho {
	color: var(--pic-tom);

	/*
		No celular, 42 % da tela: com 30 % os ícones redesenhados tinham
		117 px, pouco para o detalhe que ganharam — a busca e o resultado da
		presença viravam risquinhos.
	*/
	width: clamp(8rem, 42vw, 13rem);
}

/* O vocabulário do desenho (`.desenho`, `.desenho__*`) mora em `desenho.css` desde 28/09/2026. */

.cena__marca {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 0.4rem;
}

.cena__n {
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--pic-tom);
}

.cena__de {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

.cena__titulo {
	margin: 0;
	font-size: clamp(2.1rem, 6.4vw, 4.2rem);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--pic-texto);
}

.cena__lead {
	margin: var(--pic-esp-2) 0 0;
	max-width: 36rem;
	font-size: clamp(1.08rem, 2.1vw, 1.5rem);
	font-weight: 300;
	line-height: 1.3;
	color: var(--pic-tom);
}

.cena__sinal,
.cena__destino {
	max-width: 40rem;
	margin: var(--pic-esp-3) 0 0;
	font-size: clamp(0.95rem, 1.5vw, 1.06rem);
	line-height: 1.5;
	color: var(--pic-texto-2);
}

.cena__etiqueta {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

/* Os serviços são nota de rodapé: conceito primeiro, prático depois. */
.cena__pe {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem var(--pic-esp-3);
	margin: var(--pic-esp-4) 0 0;
	padding-top: var(--pic-esp-2);
	border-top: 1px solid var(--pic-linha);
	max-width: 40rem;
}

.cena__servicos {
	font-size: 0.78rem;
	color: var(--pic-texto-3);
}

.cena__ir {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pic-texto-3);
	text-decoration: none;
	transition: color 0.25s ease;
}

.cena__ir::after {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background: currentcolor;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cena__ir:hover,
.cena__ir:focus-visible {
	color: var(--pic-tom);
}

.cena__ir:hover::after {
	width: 2.4rem;
}

.palco__indice {
	margin-top: var(--pic-esp-5);
}

.palco__indice ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--pic-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	A área de clique era de 25 x 21 px — o tamanho do número, e só. Num atalho
	que fica no canto da tela isso é pequeno demais para acertar, e é o que
	fazia o índice parecer quebrado. O padding à esquerda estende o alvo para o
	lado de onde o ponteiro vem, sem mudar nada do que se vê.
*/
.palco__indice a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.35rem 0 0.35rem 2rem;
	font-size: 0.78rem;
	color: var(--pic-texto-3);
	text-decoration: none;
	transition: color 0.3s ease;
}

.palco__indice a:hover,
.palco__indice a:focus-visible {
	color: var(--pic-tom);
}

.palco__indice-n {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--pic-tom);
}

.palco__cta {
	margin-block: var(--pic-esp-6);
}

/* O atalho da introdução só existe onde não há palco — ver abaixo. */
.palco__atalhos {
	display: none;
}

/* ---------- sem palco: a sequência estruturada (24/09/2026) ---------- */

/*
	Onde o palco não existe — abaixo de 60rem, ou com movimento reduzido —, os
	cinco momentos são uma sequência. Empilhados sem mais nada, eles liam como
	uma lista corrida (medido em 390 x 844: ~4.200 px sem marca de onde um
	momento termina e o outro começa, o desenho do seguinte flutuando no vão).
	Quatro peças, aprovadas pelo cliente:

	1. o desenho CENTRADO e maior, abrindo o momento, com o número logo abaixo;
	2. um fio de 1 px na cor do momento marcando o começo de cada um;
	3. o índice sobe para debaixo do convite ("vá direto ao seu");
	4. o desenho se desenha quando o momento chega (bloco de movimento abaixo).

	O texto fica à esquerda: parágrafo centrado cansa a leitura.

	A consulta espelha a do palco pelo avesso. Nada aqui vaza para ele.
*/
@media (max-width: 59.99rem), (prefers-reduced-motion: reduce) {
	.palco__pergunta {
		margin-bottom: var(--pic-esp-5);
	}

	/* 3. o índice, debaixo do convite; o do fim da seção sai. */
	.palco__atalhos {
		display: block;
		grid-column: 1 / -1;
		margin-top: var(--pic-esp-2);
	}

	.palco__indice {
		display: none;
	}

	.palco__atalhos ol {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
		gap: 0 var(--pic-esp-3);
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--pic-linha);
	}

	.palco__atalhos li {
		border-bottom: 1px solid var(--pic-linha);
	}

	.palco__atalhos a {
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		min-height: 2.75rem;
		padding-block: 0.75rem;
		font-size: 0.85rem;
		line-height: 1.3;
		color: var(--pic-texto-2);
		text-decoration: none;
	}

	.palco__atalhos a:hover,
	.palco__atalhos a:focus-visible {
		color: var(--pic-tom);
	}

	/* 2. o fio: cada momento começa numa linha na cor dele. */
	.palco__cenas {
		gap: var(--pic-esp-5);
	}

	.cena {
		gap: var(--pic-esp-2);
		padding-top: var(--pic-esp-4);
	}

	.cena::before {
		content: "";
		position: absolute;
		top: 0;
		inset-inline: 0;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			var(--pic-tom) 50%,
			transparent
		);
		opacity: 0.7;
	}

	/* 1. o desenho abre o momento, no eixo, e o número vem logo abaixo. */
	.cena__desenho {
		justify-self: center;
		width: clamp(10rem, 50vw, 15rem);
	}

	.cena__marca {
		justify-content: center;
		margin-bottom: var(--pic-esp-2);
	}
}

/*
	4. O desenho se desenha quando o momento chega.

	No palco o traço corre com a rolagem; aqui o gatilho é a CHEGADA, e a
	animação é do relógio — uma vez, até o fim. Mesma disciplina da contagem
	dos números: quem esconde o traço é a classe que o JavaScript põe na raiz
	(`pic-desenho-pronto`). Sem JavaScript, sem observador, ou com movimento
	reduzido, o desenho está pronto desde o início — nunca em branco.
*/
@media (max-width: 59.99rem) and (prefers-reduced-motion: no-preference) {
	.pic-desenho-pronto [data-desenha] .desenho__t {
		stroke-dasharray: 620;
		stroke-dashoffset: 620;
	}

	.pic-desenho-pronto [data-desenha].pic-desenha .desenho__t {
		animation: pic-desenho-chega 1.9s cubic-bezier(0.45, 0.05, 0.2, 1) 0.1s forwards;
	}

	.pic-desenho-pronto [data-desenha].pic-desenha .desenho__t:nth-of-type(2n) {
		animation-delay: 0.3s;
	}
}

@keyframes pic-desenho-chega {
	to {
		stroke-dashoffset: 0;
	}
}

/* ---------- o palco, onde ele cabe ---------- */

/*
	A partir daqui é o acréscimo: a corrida alta, o palco preso e as cenas
	empilhadas em camadas, cada uma com sua fatia da rolagem.

	`contain` é a fase em que a corrida COBRE a tela inteira — exatamente o
	período em que o `sticky` fica preso. Por isso as fatias das cenas são
	escritas em `contain`: elas mapeiam 1 para 1 no tempo em que o palco
	segura a tela.

	Só de 60rem para cima. Prender a tela num celular, onde a barra do
	navegador muda a altura durante a rolagem, entrega um palco que pula — e o
	visitante perde o controle da página.
*/
@media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) and (height: 100svh) {
		.palco__corrida {
			position: relative;
			/* 640svh: 16% para a pergunta segurar e 84% para as cinco cenas. */
			height: 640svh;
			view-timeline-name: --pic-palco;
			view-timeline-axis: block;

			/*
				Sinal para o JavaScript: o palco está ativo nesta largura, com
				estas preferências. É por esta ficha que o atalho do índice
				sabe se deve calcular a fatia de rolagem da cena ou se pode
				simplesmente rolar até o elemento.
			*/
			--pic-palco-ativo: 1;
		}

		.palco {
			timeline-scope: --pic-palco;
		}

		.palco__fixo {
			position: sticky;
			top: 0;
			height: 100svh;
			display: grid;
			align-content: center;
			overflow: hidden;
		}

		/* As cenas ocupam o mesmo lugar: uma de cada vez no palco. */
		.palco__cenas {
			position: relative;
			display: block;
			min-height: 62svh;
		}

		/*
			A PERGUNTA É A CENA DE ABERTURA, e está dentro do palco por uma
			razão estrutural: fora dele, o palco só começa a cobrir a tela
			depois que ela saiu inteira — e no meio disso abre uma janela
			vazia. Dentro, as duas coisas dividem a mesma fatia de rolagem e a
			troca acontece por sobreposição.
		*/
		.palco__pergunta {
			position: absolute;
			align-content: center;
			align-items: center;
			margin: 0;
			animation: pic-entrega linear both;
			animation-timeline: --pic-palco;
			animation-range: contain 0% contain 16%;
		}

		/*
			As animações de entrada da pergunta trocam de régua: aqui elas
			correm na linha do tempo do palco, como tudo o mais em cena. A
			`view()` de cada elemento não serve dentro de um contêiner preso —
			elemento preso não "entra" na tela.
		*/
		.palco__linha:nth-child(1) > span {
			animation-timeline: --pic-palco;
			animation-range: entry 30% entry 88%;
		}

		.palco__linha--tom > span {
			animation-timeline: --pic-palco, --pic-palco;
			animation-range: entry 38% entry 96%, entry 62% contain 14%;
		}

		.palco__dizer {
			animation-timeline: --pic-palco;
			animation-range: entry 46% contain 2%;
		}

		.palco__fio {
			animation-timeline: --pic-palco;
			animation-range: entry 72% contain 8%;
		}

		/*
			A primeira cena entra SEM subir: a pergunta está descendo, e duas
			coisas se cruzando no meio da tela lê como atropelo. Ela surge no
			lugar, com um leve avanço de escala.
		*/
		.cena:first-of-type {
			animation-name: pic-cena-primeira;
		}

		.cena {
			position: absolute;
			grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
			gap: var(--pic-esp-5);
			align-items: center;
			opacity: 0;
			pointer-events: none;
		}

		/*
			O desenho é grande: de 17 a 30 rem, e pequeno e centrado num canto
			ele viraria enfeite — a seção pediu experiência.

			O TRAÇO acompanha a escala. O desenho tem 240 unidades e aqui
			chega a 480 px: com o traço de 1,1 da marcação, a linha saía com
			2,2 px — grossa para ícones com esse tanto de detalhe, e contra a
			regra da pena de fênix. Com 0,75 ela fica entre 0,85 e 1,5 px.
		*/
		.cena__desenho {
			grid-column: 2;
			grid-row: 1;
			justify-self: center;
			width: clamp(17rem, 32vw, 30rem);
			opacity: 0.9;
		}

		.cena__desenho .desenho {
			stroke-width: 0.75;
		}

		/*
			O vão do índice tem de ficar no INSET das peças, não no padding do
			palco: peça posicionada em absoluto se apoia na caixa de padding do
			contêiner, então o padding não a segura — e a coluna da direita
			invadia o índice.
		*/
		.cena,
		.palco__pergunta {
			inset: 0 6.5rem 0 0;
		}

		.cena__dizer {
			grid-column: 1;
			grid-row: 1;
		}

		/*
			A cena entra, SEGURA e sai. O patamar entre 22% e 78% é o que faz o
			título ficar parado enquanto o conteúdo se apresenta — sem ele a
			cena atravessaria a tela em movimento contínuo e ninguém leria
			nada.
		*/
		.cena {
			animation: pic-cena linear both;
			animation-timeline: --pic-palco;
			animation-range: contain var(--pic-cena-de, 0%) contain var(--pic-cena-ate, 20%);
		}

		/* A última fica: a sessão não termina numa tela vazia. */
		.cena:last-child {
			animation-name: pic-cena-fica;
		}

		/*
			Dentro da cena, as peças chegam em ordem — primeiro o título, depois
			o sintoma, depois a nota de rodapé. Elas andam na mesma régua do
			palco, com um atraso próprio em quadros.
		*/
		.cena__dizer > * {
			animation: pic-cena-peca linear both;
			animation-timeline: --pic-palco;
			animation-range: contain var(--pic-cena-de, 0%) contain var(--pic-cena-ate, 20%);
		}

		.cena__dizer > :nth-child(1) { animation-name: pic-peca-1; }
		.cena__dizer > :nth-child(2) { animation-name: pic-peca-2; }
		.cena__dizer > :nth-child(3) { animation-name: pic-peca-3; }
		.cena__dizer > :nth-child(4) { animation-name: pic-peca-4; }
		.cena__dizer > :nth-child(5) { animation-name: pic-peca-5; }
		.cena__dizer > :nth-child(6) { animation-name: pic-peca-6; }

		/* O desenho se constrói: o traço corre enquanto a cena está no palco. */
		.cena__desenho .desenho__t {
			stroke-dasharray: 620;
			stroke-dashoffset: 620;
			animation: pic-desenha-traco linear both;
			animation-timeline: --pic-palco;
			animation-range: contain var(--pic-cena-de, 0%) contain var(--pic-cena-ate, 20%);
		}

		/* O índice acende o momento que está no palco. */
		.palco__indice {
			position: absolute;
			right: var(--pic-gutter);
			top: 50%;
			translate: 0 -50%;
			margin: 0;
		}

		.palco__indice ol {
			flex-direction: column;
			gap: 0.9rem;
			align-items: flex-end;
		}

		.palco__indice li {
			animation: pic-indice linear both;
			animation-timeline: --pic-palco;
			animation-range: contain var(--pic-cena-de, 0%) contain var(--pic-cena-ate, 20%);
		}

		.palco__indice-nome {
			max-width: 0;
			overflow: hidden;
			white-space: nowrap;
			opacity: 0;
			transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
		}

		.palco__indice a:hover .palco__indice-nome,
		.palco__indice a:focus-visible .palco__indice-nome {
			max-width: 14rem;
			opacity: 1;
		}

		.palco__cta {
			margin-block: 0 var(--pic-esp-6);
		}
	}
}

/*
	O CLIQUE ANDA JUNTO COM A OPACIDADE (23/09/2026).

	A cena nasce com `pointer-events: none` — invisível, ela não pode pegar
	clique. Mas a animação só devolvia a opacidade, nunca o clique: em tela
	larga o "Ver a camada" aparecia e não funcionava em nenhum momento — o
	clique atravessava a cena e caía na pergunta, que fica por baixo.
	Encontrado pelo cliente.

	`pointer-events` é propriedade discreta: entre dois quadros ela troca no
	meio do caminho. Então a cena fica clicável de ~9 % a ~90 % da sua
	fatia de rolagem — de quando já está meio visível a quando ainda está
	meio visível.
*/
@keyframes pic-cena {
	0% {
		opacity: 0;
		transform: translate3d(0, 4rem, 0);
		pointer-events: none;
	}

	18%,
	80% {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	100% {
		opacity: 0;
		transform: translate3d(0, -3rem, 0);
		pointer-events: none;
	}
}

@keyframes pic-cena-primeira {
	0% {
		opacity: 0;
		transform: scale(0.985);
		pointer-events: none;
	}

	22%,
	80% {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	100% {
		opacity: 0;
		transform: translate3d(0, -3rem, 0);
		pointer-events: none;
	}
}

@keyframes pic-cena-fica {
	0% {
		opacity: 0;
		transform: translate3d(0, 4rem, 0);
		pointer-events: none;
	}

	18%,
	100% {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/*
	Seis quadros quase iguais, e a diferença entre eles é só QUANDO a peça
	chega. É a forma de escalonar dentro de uma fatia de rolagem sem calcular
	faixa por peça na marcação.
*/
@keyframes pic-peca-1 {
	0%, 10% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	22%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-peca-2 {
	0%, 14% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	26%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-peca-3 {
	0%, 18% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	31%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-peca-4 {
	0%, 22% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	36%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-peca-5 {
	0%, 26% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	41%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-peca-6 {
	0%, 30% { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
	46%, 100% { opacity: 1; transform: none; }
}

@keyframes pic-desenha-traco {
	0%, 12% {
		stroke-dashoffset: 620;
	}

	62%, 100% {
		stroke-dashoffset: 0;
	}
}

@keyframes pic-indice {
	0% {
		opacity: 0.32;
	}

	20%,
	80% {
		opacity: 1;
	}

	100% {
		opacity: 0.32;
	}
}

/* A vida dos desenhos parados (pulso, ondas, laço) mora em `desenho.css` desde 28/09/2026. */

/* ---------- 3. AI Ready: os sinais se organizam (decisão V5) ---------- */

.ai-ready {
	/*
		Aqui a assinatura é o gradiente EXPANDIDO (decisão V5), e apontar o
		token no alto da seção é o que faz o desvio do padrão ficar declarado
		num lugar só, em vez de virar cor solta num componente.

		O botão da seção NÃO segue por aqui: ele sai de `--pic-grad-acao`,
		porque a ponta roxa do expandido não sustenta texto escuro. Ver o bloco
		dos tokens em `base.css` — a conta está lá, medida.

		**Onde o expandido aparece desde 22/09/2026:** na AURA e no ANEL do
		núcleo da composição, que corre ciano → azul → roxo → azul → ciano. Ele
		saiu da manchete, onde era tinta de letra a 3,03:1, e virou luz — que é
		o que a direção da Juliana propôs e o que o roxo sabe fazer sobre
		grafite. A assinatura da V5 continua inteira; mudou o material, não a
		cor.
	*/
	--pic-grad-destaque: var(--pic-grad-expandido);

	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);
	border-top: 1px solid var(--pic-linha);
}

/* A aura e a chuva de código moram em `ai.css` desde 28/09/2026. */

/*
	A MANCHETE É BRANCA, E SÓ A FRASE-CHAVE CARREGA O GRADIENTE (direção da
	Juliana, 22/09/2026).

	A manchete inteira corria no gradiente expandido, e a ponta roxa dele dá
	3,03:1 sobre grafite — o piso do texto grande. Duas linhas inteiras ali é a
	afirmação toda no limite do contraste e, pior, sem ênfase nenhuma: tudo
	colorido é nada destacado.

	O roxo não sai da seção, muda de lugar. Ele continua sendo a assinatura do
	AI Ready (decisão V5) na AURA, onde é luz do ambiente e não tinta da letra.
	Na frase-chave corre o institucional, azul→ciano, de 4,79:1 a 10,82:1 — e a
	pergunta que dá nome à seção é justamente o que o olho tem de pegar.
*/
.ai-ready__titulo {
	margin-block: var(--pic-esp-2) var(--pic-esp-3);
	color: var(--pic-texto);
}

.ai-ready__chave {
	background: var(--pic-grad-institucional);
	background-size: 220% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.ai-ready__chave {
		animation: pic-grad-anda 14s ease-in-out infinite alternate;
	}
}

.ai-ready__abertura {
	max-width: 34rem;
	font-size: 1.06rem;
	color: var(--pic-texto-2);
}

@keyframes pic-grad-anda {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

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

/*
	As quatro camadas.

	Elas eram o que mais chamava atenção na seção e não diziam nada — quatro
	rótulos isolados. Agora cada uma guarda a frase que explica a camada e a
	chave do que a Pictore faz ali, e as duas aparecem quando o cartão CRESCE
	sob o ponteiro.

	A estrutura tem duas peças por um motivo: o `<li>` guarda a VAGA na grade,
	pequena e fixa, e a `__caixa` é uma camada por cima dela. Crescer a caixa
	não move a vaga, então o cartão passa por cima dos vizinhos em vez de
	empurrá-los — a grade fica parada enquanto um cartão ganha destaque.

	A versão anterior reservava a altura do texto dentro do próprio cartão, e o
	cliente matou a ideia com uma frase certeira: sobrava um vazio esperando
	alguém passar o mouse. Espaço reservado esperando é espaço morto, não
	animação.
*/
.ai-ready__camadas {
	display: grid;
	gap: 0.6rem;
	margin: var(--pic-esp-4) 0;
	padding: 0;
	list-style: none;

	/*
		Só a opacidade, e só para ela não pular quando o hover assume o que a
		rolagem ainda não terminou. A transição só tem efeito nesse momento:
		enquanto a animação corre, ela manda na propriedade e a transição fica
		de fora. `transform` não entra aqui de propósito — o grupo não se move
		por causa de ponteiro nenhum.
	*/
	transition: opacity 0.3s ease;

	/*
		O GRUPO SOBE, e não só o cartão sob o ponteiro.

		O `z-index: 5` do `<li>` em hover não bastava, e o motivo é que ele
		nunca chegava a valer aqui fora: esta lista tem `data-mov="assenta"`,
		uma animação de `transform` e `opacity` com preenchimento `both`, e
		animação nessas duas propriedades cria contexto de empilhamento
		próprio. O `z-index` do cartão fica preso lá dentro, e a lista inteira
		volta a ser um irmão de `z-index: auto` — pintado na ordem do
		documento, ou seja, ANTES do fecho que vem logo abaixo.

		Visto na tela: o cartão aberto crescia por cima do fecho e o texto do
		fecho aparecia por cima dele. O fundo opaco do cartão não resolve esse
		caso — ele protege de quem está atrás, não de quem pinta depois.
	*/
	position: relative;
	z-index: 3;
}

@media (min-width: 40rem) {
	.ai-ready__camadas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
	A VAGA. Pequena, fixa, e é ela que a grade enxerga — a caixa cresce por
	cima dela sem empurrar ninguém.
*/
.camada {
	position: relative;
	min-height: 4.5rem;
}

/*
	O CARTÃO, no desenho da Juliana (22/09/2026): selo redondo, nome e uma
	descrição curta, **sem caixa em volta**. Em repouso não há borda nem fundo;
	a superfície só aparece quando o ponteiro chega.

	Antes o cartão era uma chapa com borda roxa e gradiente, e só o nome dentro.
	O conteúdo que explicava a camada vivia inteiro no hover. Agora o que
	explica está à vista e o hover acrescenta o concreto — a chave.

	**O padding em repouso não é zero de propósito.** Ele é exatamente a metade
	do padding do hover, e o `inset` negativo do hover vale exatamente a outra
	metade: `-0,7rem + 1,4rem` é o mesmo `0,7rem` de agora. O conteúdo fica
	PARADO enquanto a caixa cresce em volta dele. Com padding zero em repouso, o
	texto daria um passo para dentro no instante do hover — o mesmo tipo de
	salto de 4,5 px que o cliente já apontou uma vez nesta seção.
*/
.camada__caixa {
	position: absolute;

	/*
		Presa em cima, solta embaixo: a altura vem do conteúdo, e é isso que
		permite crescer para baixo sem que nada precise ser calculado.
	*/
	inset: 0 0 auto 0;
	min-height: 100%;
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.7rem 0.85rem;

	/*
		UM CURSOR SÓ EM CIMA DO CARTÃO.

		Sem isto o ponteiro alterna entre seta e barra de texto conforme passa
		pelo nome ou pelo espaço ao lado, e a troca pisca o tempo todo enquanto
		o cartão abre — o cliente viu e apontou.

		Fica a SETA, e não a mãozinha: o cartão reage ao ponteiro, mas o clique
		não leva a lugar nenhum. Mãozinha promete uma página que não existe, e
		promessa não cumprida é pior que cursor neutro. Selecionar o texto
		continua funcionando.
	*/
	cursor: default;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--pic-texto);
	transition: inset 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease,
		background-color 0.35s ease, box-shadow 0.42s ease;
}

/*
	O SELO. É ele que liga os dois lados da seção: o mesmo ícone aparece na
	peça correspondente do diagrama, à direita. Entrou no lugar do número —
	num cartão desta altura os dois disputam o mesmo trabalho, e o número não
	se repete do outro lado.

	A ordem do método não se perdeu: continua na ordem de leitura e no pulso,
	que corre de um cartão para o seguinte.
*/
.camada__selo {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;

	/*
		Aumentado em 22/09/2026 a pedido do cliente: de 2,6 para 3,1 rem, com o
		ícone de 1,25 para 1,55. O selo passou a ser mais alto que as duas
		linhas de texto ao lado — e é ele quem manda na altura da vaga, por
		isso o `min-height` de `.camada` subiu junto.
	*/
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid rgba(153, 0, 255, 0.34);
	border-radius: 50%;
	background: rgba(84, 129, 255, 0.1);
	color: var(--pic-azul);
	transition: color 0.35s ease, border-color 0.35s ease,
		background-color 0.35s ease;
}

.camada__icone {
	width: 1.55rem;
	height: 1.55rem;
}

/*
	BLOCO, e não grade nem flex — e isso não é preferência, é o que faz o
	cartão crescer. O vão que abre usa `grid-template-rows` de `0fr` a `1fr`, e
	uma faixa em fração dentro de um ITEM de grade não contribui altura para o
	pai: medido, resolvia para 0 px mesmo forçada com `!important`. Em fluxo
	normal, a mesma regra resolve para a altura do conteúdo.
*/
.camada__texto {
	display: block;
	min-width: 0;
}

.camada__nome {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.camada__resumo {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--pic-texto-3);
}

/*
	O vão que abre. `grid-template-rows` de 0fr a 1fr é o que anima altura sem
	número mágico — e o filho precisa de `overflow: hidden` e `min-height: 0`,
	senão a altura mínima automática do item de grade impede a faixa de chegar
	a zero.
*/
.camada__vao {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.camada__dentro {
	overflow: hidden;
	min-height: 0;
}

.camada__chave {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--pic-texto-3);
}

@media (hover: hover) and (pointer: fine) {
	/*
		Quem está sob o ponteiro passa para cima de todo mundo — e o teclado
		abre o mesmo cartão pelo mesmo caminho.

		O foco entra por `:focus-visible`, e não por `:focus-within`: a caixa é
		uma parada de leitura, não um botão, e com foco simples um clique de
		mouse deixaria o cartão aberto por cima dos vizinhos depois que o
		ponteiro já saiu — um estado que ninguém pediu e que parece travado.
		`:focus-visible` só dispara no teclado, que é exatamente quem precisa.
	*/
	.camada:hover,
	.camada:has(.camada__caixa:focus-visible) {
		z-index: 5;
	}

	/*
		O GRUPO FICA OPACO — e NÃO se move.

		A entrada `assenta` é conduzida pela rolagem e só termina com a lista no
		meio da tela, então dá para alcançar um cartão com o grupo ainda em 0,85
		de opacidade. Parado isso não se nota; expandido, sim — medido: o
		parágrafo de baixo aparecia ATRAVÉS do cartão aberto, que é exatamente o
		defeito que o fundo opaco existe para evitar.

		A posição NÃO é tocada: esta regra já forçou também o `transform` final,
		e o grupo dava um salto de 4,5 px para cima no instante do hover. O
		cliente apontou. Quem se mexe ao receber o ponteiro é só o cartão que o
		recebeu.

		`!important` não é força bruta por preguiça: declaração de animação vence
		declaração normal do autor, e `!important` é o único lugar da cascata
		acima dela.
	*/
	.ai-ready__camadas:has(.camada:hover),
	.ai-ready__camadas:has(.camada__caixa:focus-visible) {
		opacity: 1 !important;
	}

	/*
		A SUPERFÍCIE APARECE. É a receita que o site já usa em `.solucao__link`
		e no depoimento: fundo elevado, borda de 1 px, sombra. A diferença aqui
		é que ela nasce do nada — em repouso o cartão é só texto.

		O fundo é OPACO. Enquanto a caixa cobre o cartão de baixo, um fundo
		translúcido deixaria o texto dele aparecer por trás, e dois textos
		sobrepostos leem como defeito.
	*/
	.camada:hover .camada__caixa,
	.camada__caixa:focus-visible {
		inset: -0.7rem -0.85rem auto -0.85rem;
		padding: 1.4rem 1.7rem;
		border-color: rgba(153, 0, 255, 0.45);
		background: linear-gradient(150deg, #262633 0%, #1f1f2a 100%);
		box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
	}

	.camada:hover .camada__vao,
	.camada__caixa:focus-visible .camada__vao {
		grid-template-rows: 1fr;
	}

	.camada:hover .camada__selo,
	.camada__caixa:focus-visible .camada__selo {
		color: var(--pic-ciano);
		border-color: rgba(18, 228, 255, 0.5);
		background: rgba(18, 228, 255, 0.1);
	}
}

/*
	Sem ponteiro, nada disso acontece: a caixa volta para o fluxo e a chave
	fica sempre à vista. Conteúdo escondido atrás de um gesto que o aparelho
	não tem é conteúdo perdido — e caixa fora do fluxo sem hover cobriria o
	cartão de baixo para sempre.
*/
@media (hover: none), (pointer: coarse) {
	.camada {
		min-height: 0;
	}

	.camada__caixa {
		position: relative;
		inset: auto;
	}

	.camada__vao {
		grid-template-rows: 1fr;
	}
}

/*
	O PULSO: o convite, agora no SELO.

	Ele morava na borda da caixa, e a caixa deixou de existir em repouso — um
	pulso desenhando um retângulo que não está lá seria o efeito anunciando a
	si mesmo. No selo ele tem uma forma própria para latejar, e é o selo quem
	acende no hover: o convite e a resposta acontecem na mesma peça.

	Os quatro pulsam EM SEQUÊNCIA, com atraso vindo da marcação: além de
	chamar, a ordem diz que são quatro etapas de um método. E o pulso PARA no
	hover: convite atendido, convite encerrado.
*/
@media (prefers-reduced-motion: no-preference) {
	.camada__selo::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: 50%;
		pointer-events: none;
		border: 1px solid transparent;
		animation: pic-camada-pulso 3.6s ease-in-out infinite;
		animation-delay: var(--pic-pulso-atraso, 0s);
	}

	.camada:hover .camada__selo::after,
	.camada__caixa:focus-visible .camada__selo::after {
		animation: none;
	}
}

@keyframes pic-camada-pulso {
	0%,
	62%,
	100% {
		border-color: transparent;
		box-shadow: 0 0 0 0 rgba(153, 0, 255, 0);
	}

	31% {
		border-color: rgba(174, 92, 255, 0.6);
		box-shadow: 0 0 1.1rem -0.2rem rgba(153, 0, 255, 0.5);
	}
}

.ai-ready .pic-botao {
	margin-top: var(--pic-esp-3);
}

/*
	O FECHO: o argumento da seção em duas linhas.

	O fio que o antecede não é enfeite — é o que separa o método (as quatro
	camadas) da conclusão. Curto, de um lado só, no gradiente institucional: é
	o mesmo grafismo da régua dos números, na menor escala em que ainda se lê.
*/
.ai-ready__fecho {
	margin-top: var(--pic-esp-4);
}

.ai-ready__fio {
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-bottom: var(--pic-esp-3);
	border-radius: 1px;
	background: var(--pic-grad-institucional);
}

.ai-ready__fecho p {
	display: grid;
	gap: 0.3rem;
	max-width: 36rem;
	font-size: 1.08rem;
	line-height: 1.45;
	color: var(--pic-texto);
}

/* A composição (núcleo, peças, arcos, sinais) mora em `ai.css` desde 28/09/2026. */

/* ---------- 4. cases: cada case é um momento (decisão V3) ---------- */

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

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

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

/*
	A lista é mais larga que o envelope de leitura (76 rem): a cena de cada
	case é uma composição de aparelhos, e em 1216 px ela ficaria miúda. Em
	90 rem ela chega a ~920 px de largura no cartão, que é onde as telas se
	leem.
*/
.cases__lista {
	display: grid;
	gap: var(--pic-esp-4);
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 var(--pic-gutter);
	list-style: none;
}

.case {
	position: relative;
}

/*
	O CARTÃO — composição de `Cases/referencia_cad.jpeg`.

	A cena ocupa a direita e desce até o pé; o texto senta à esquerda, sobre a
	parte da cena que o degradê já apagou. O fundo é mais fundo que o grafite
	da página, com uma luz fria no alto à esquerda — a mesma penumbra das
	fotos, que é o que faz a cena parecer continuar no cartão em vez de estar
	colada nele.
*/
.case__link {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: clip; /* clip, não hidden: hidden vira contêiner de rolagem e prende a view() de quem está dentro — ver 30-tecnologia.md */
	border: 1px solid var(--pic-linha);
	border-radius: 6px;
	background:
		radial-gradient(ellipse 70% 60% at 0% 0%, rgba(84, 129, 255, 0.12), transparent 70%),
		radial-gradient(ellipse 60% 70% at 100% 100%, rgba(18, 228, 255, 0.05), transparent 70%),
		#131318;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s ease;
}

.case__link:hover,
.case__link:focus-visible {
	border-color: rgba(84, 129, 255, 0.45);
}

/*
	A CENA. No celular ela vem primeiro, de largura inteira, e se apaga só
	pelo pé, para dentro do texto. Na tela larga ela vai para a direita.

	A composição entra INTEIRA (proporção nativa, sem `cover`): nas três, os
	aparelhos vão de ~8 % a ~94 % da largura, e qualquer recorte comeria um
	celular ou um tablete.
*/
.case__cena {
	position: relative;
	display: block;
	aspect-ratio: 1672 / 941;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to top, transparent, #000 22%);
	mask-image: linear-gradient(to top, transparent, #000 22%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/*
	`<picture>` é inline por natureza e não tem altura própria — sem esta
	regra, o `height: 100%` da imagem não encontra contra o que resolver e a
	foto renderiza com zero de altura.
*/
.case__cena picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
	A imagem não tem movimento próprio: ela anda com o cartão (relevo, luz,
	chegada) e nada mais. Tinha seguido o ponteiro e avançado no hover, e o
	cliente pediu para tirar em 23/09/2026 — a cena é a peça, não uma janela
	com algo se mexendo dentro.
*/
.case__cena img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case__conteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--pic-esp-3);
	margin-top: calc(var(--pic-esp-2) * -1);
	padding: 0 var(--pic-gutter) var(--pic-esp-4);
}

/*
	A cena ao lado do texto só a partir de 75 rem. Em 1024 px a coluna ficava
	com 234 px: o nome do case quebrava, deixando a barra órfã, e as
	disciplinas corriam por cima do celular. Abaixo disso o cartão empilha —
	cena inteira em cima, texto embaixo — e a cena ganha largura em vez de
	perder.
*/
@media (min-width: 75rem) {
	/*
		A altura do cartão vem da cena: 64 % da largura, na proporção dela,
		mais uma sobra no alto para o texto respirar. É PISO, não teto — se o
		texto pedir mais, o cartão cresce. Por isso `min-height` em unidade de
		contêiner e não `aspect-ratio`: com `aspect-ratio` numa grade o
		cartão ficou com a altura da proporção e o texto vazou 35 px pelo pé.
	*/
	.case {
		container-type: inline-size;
	}

	.case__link {
		display: grid;
		min-height: 47.5cqi;
	}

	/*
		A cena ancora no canto inferior direito e se apaga por três lados:
		muito pela esquerda, onde o texto senta; bastante pelo alto, onde
		sobra fundo de cartão; pouco pelo pé. `mask-composite: intersect` é o
		que faz as três rampas valerem juntas em vez de se somarem.

		As rampas têm paradas intermediárias de propósito. Um degradê linear
		de 0 a 100 % em 18 % da altura deixou uma LINHA visível no alto da
		cena: o olho lê onde a rampa começa como borda. Com a entrada suave
		(quase nada nos primeiros passos) a borda some.
	*/
	.case__cena {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 68%;
		-webkit-mask-image:
			linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08) 3.2%, rgba(0, 0, 0, 0.3) 6.7%, rgba(0, 0, 0, 0.65) 10.6%, #000 16%),
			linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08) 8.0%, rgba(0, 0, 0, 0.3) 16.8%, rgba(0, 0, 0, 0.65) 26.4%, #000 40%),
			linear-gradient(to top, transparent, rgba(0, 0, 0, 0.08) 2.8%, rgba(0, 0, 0, 0.3) 5.9%, rgba(0, 0, 0, 0.65) 9.2%, #000 14%);
		mask-image:
			linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08) 3.2%, rgba(0, 0, 0, 0.3) 6.7%, rgba(0, 0, 0, 0.65) 10.6%, #000 16%),
			linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08) 8.0%, rgba(0, 0, 0, 0.3) 16.8%, rgba(0, 0, 0, 0.65) 26.4%, #000 40%),
			linear-gradient(to top, transparent, rgba(0, 0, 0, 0.08) 2.8%, rgba(0, 0, 0, 0.3) 5.9%, rgba(0, 0, 0, 0.65) 9.2%, #000 14%);
		mask-composite: intersect;

		/*
			Sem repetição. A camada padrão repete o degradê, e com a altura
			fracionária da cena (514,3 px) a primeira fileira de pixels
			amostrava o PÉ do ladrilho anterior — que é opaco. Resultado: um
			fio claro de 1 px no alto da cena, com falhas, justo onde a rampa
			devia ser zero.
		*/
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	/*
		Com o recuo, a coluna termina perto de 35 % da largura do cartão — e
		não pode passar disso: a cena começa em 32 %, e os aparelhos da
		esquerda (o celular do Dr. Marcelo, o notebook da VitaTags) começam
		por volta de 8 a 11 % dela, ou seja, a 37–40 % do cartão. É o que
		deixa o texto sobre penumbra, nunca sobre tela — e é também por isso
		que a rampa da esquerda é curta: mais longa, ela apagaria meio
		celular.

		O cartão é grade de uma célula só para a coluna esticar até o pé: é
		o que prende as disciplinas no rodapé.
	*/
	.case__conteudo {
		justify-self: start;
		width: min(30%, 28rem);
		margin: 0;
		padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 3.4vw, 3rem) clamp(2rem, 4.5vw, 4rem);
		box-sizing: content-box;
	}
}

/*
	A MARCAÇÃO DO CASE — sinalização, não título: ordem, fio, tipo e nome.
	Fica no alto à esquerda em todos os cartões; é essa constância que faz o
	olho aprender onde procurar.
*/
.case__marca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	/*
		Apertado no celular para a linha caber inteira: quebrada, a barra
		ficava órfã no fim da primeira linha e o nome sozinho na segunda.
	*/
	gap: 0.5rem clamp(0.6rem, 2vw, 1rem);
	font-size: clamp(0.92rem, 2.4vw, 1.05rem);
}

.case__marca-ordem {
	font-size: 0.95em;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--pic-texto-2);
}

/*
	O FIO — é por ele que o cartão EMITE. Um traço fino em azul, e dentro
	dele um brilho que corre de ponta a ponta a cada 9 s. O brilho é um
	gradiente RADIAL numa faixa de 5 px, e não `filter`, que obrigaria o
	navegador a refazer o borrão a cada quadro.
*/
.case__marca-fio {
	position: relative;
	flex: none;
	width: clamp(2.5rem, 8vw, 5.5rem);
	height: 1px;
	background: rgba(84, 129, 255, 0.7);
}

.case__marca-fio::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 5px;
	opacity: 0;
	background-image: radial-gradient(
		closest-side,
		rgba(18, 228, 255, 1),
		rgba(84, 129, 255, 0.45) 45%,
		transparent 78%
	);
	background-repeat: no-repeat;
	background-size: 45% 100%;
}

.case__marca-tipo {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pic-texto);
}

.case__marca-barra {
	width: 1px;
	height: 1.1rem;
	background: var(--pic-borda);
}

.case__marca-nome {
	font-size: 1em;
	font-weight: 400;
	color: var(--pic-texto-2);
}

/*
	O COMPASSO: 9 s é longo de propósito. Sinal que pisca a cada 2 s vira
	alarme; a cada 9 s, o olho encontra um cartão acendendo enquanto lê o
	outro. O atraso vem da marcação, um por cartão. `backwards` é
	obrigatório: durante o atraso o quadro de 0 %, invisível, já vale — sem
	ele o brilho ficava parado e aceso no começo do fio.
*/
@media (prefers-reduced-motion: no-preference) {
	.case__marca-fio::after {
		animation: pic-case-feixe 9s cubic-bezier(0.33, 0, 0.2, 1) infinite
			backwards;
		animation-delay: var(--pic-sinal-atraso, 0s);
	}
}

@keyframes pic-case-feixe {
	0% {
		background-position: -40% 50%;
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	22% {
		opacity: 1;
	}

	30%,
	100% {
		background-position: 140% 50%;
		opacity: 0;
	}
}

/*
	O bloco principal fica no meio da altura que sobra entre a marcação e as
	disciplinas. Nos dois cases sem número ele é mais curto, e centrado ele
	não deixa o título pendurado no alto com um vão embaixo.
*/
.case__principal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pic-esp-2);

	/* Empilhado, entre 60 e 75 rem, a linha passava de 90 caracteres. */
	max-width: 40rem;
}

@media (min-width: 75rem) {
	.case__principal {
		margin-block: auto;
		padding-block: var(--pic-esp-3);
	}

	/*
		As disciplinas não cabem numa linha na largura da coluna, e no rodapé
		elas podem passar dela: embaixo, a cena já se apagou no fundo. Uma
		linha só é o que a referência pede — a assinatura do trabalho, não
		um parágrafo.
	*/
	.case__disciplinas {
		width: max-content;
		max-width: 60cqi;
	}
}

.case__resultado {
	display: block;
	margin-bottom: var(--pic-esp-1);
}

/*
	O número é o herói do cartão — por isso pesado, e não o 200 dos números
	da seção seguinte: lá são três lado a lado, aqui é um só, e ele tem de
	ganhar da cena ao lado.
*/
.case__numero {
	display: block;
	font-size: clamp(3.2rem, 6.4vw, 6rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
	background: var(--pic-grad-institucional);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.case__sufixo {
	margin-left: 0.18em;
}

.case__metrica {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pic-texto-2);
}

.case__titulo {
	display: block;
	font-size: clamp(1.5rem, 2.5vw, 2.15rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--pic-texto);
	text-wrap: balance;
}

.case__texto {
	display: block;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--pic-texto-2);
}

/*
	"Ver o case": um verbo com seta que avança diz o que acontece ao clicar.
	O sublinhado é o gradiente institucional e cresce no hover.
*/
.case__ir {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: var(--pic-esp-1);
	padding-bottom: 0.4rem;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--pic-ciano);
}

.case__ir::after {
	content: "→";
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.case__ir::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 1px;
	background: var(--pic-grad-institucional);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.case__link:hover .case__ir::after,
.case__link:focus-visible .case__ir::after {
	translate: 0.35rem 0;
}

.case__link:hover .case__ir::before,
.case__link:focus-visible .case__ir::before {
	transform: scaleX(1.15);
}

/*
	O separador ÓRFÃO. Quando a linha quebra, o "·" do primeiro item da linha
	nova ficava pendurado no começo dela. A saída: TODO item leva o separador
	à esquerda, numa caixa de largura fixa, e a lista recua essa largura para
	fora e corta o recuo com `clip-path`. Quem começa linha — o primeiro e
	qualquer um que a quebra jogou para baixo — tem o separador exatamente na
	faixa cortada. Sem JavaScript medindo quebra de linha.
*/
.case__disciplinas {
	--pic-sep: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0;
	margin-left: calc(var(--pic-sep) * -1);
	clip-path: inset(0 0 0 var(--pic-sep));
	font-size: 0.88rem;
	color: var(--pic-texto-3);
}

.case__disciplinas > span::before {
	content: "·";
	display: inline-block;
	width: var(--pic-sep);
	text-align: center;
	color: var(--pic-borda);
}

/* ---------- 5. tecnologia para construir: os sócios como fundo ---------- */

/*
	Composição de `telas/tecnologia_para_construir.jpeg`. No celular a foto
	vem em cima e o texto embaixo; a partir de 60 rem a foto é o fundo da
	seção inteira e o texto senta sobre a penumbra à esquerda.
*/
.construir {
	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;
	background: var(--pic-fundo);
}

.construir__foto {
	display: block;
	position: relative;

	/*
		-2, e não -1: a penumbra (`::before`) mora em -1, e com o mesmo
		índice a foto, que vem depois na ordem do documento, pintava POR
		CIMA dela — a primeira versão saiu com a foto crua e o texto branco
		sobre parede branca.
	*/
	z-index: -2;
	aspect-ratio: 5 / 6;
	max-height: 78svh;
	margin-inline: auto;

	/*
		Apaga o pé do recorte para dentro do texto que vem logo abaixo. A
		manchete sobe 2,5 rem sobre a foto — com 5 rem ela sentava nas pernas
		dos dois, onde a foto ainda não tinha apagado.
	*/
	-webkit-mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.35) 20%, #000 42%);
	mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.35) 20%, #000 42%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.construir__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/*
	O tom de noite da tela larga vem da penumbra por cima; no celular não há
	penumbra, e a foto crua é parede branca. Um véu grafite aproxima as duas.

	Véu, e não `filter: brightness()` na imagem: com o filtro dentro da
	máscara, o Chrome rasterizou o pé da foto em QUADRADOS claros soltos
	sobre o degradê. Conferido nos dois sentidos — sem o filtro some,
	religado volta.
*/
.construir__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 24, 0.2);
}

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

.construir__coluna {
	max-width: 36rem;
}

.construir__curva {
	display: none;
}

@media (min-width: 60rem) {
	/*
		A altura acompanha a proporção da foto até o teto: 16:9 é o quadro em
		que os dois ficam inteiros, da cabeça aos pés. O piso existe para a
		coluna de texto, que numa tela baixa pediria mais que a proporção.
	*/
	.construir {
		display: grid;
		align-items: center;
		min-height: clamp(44rem, 56.25vw, 64rem);
	}

	.construir__foto {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/*
		Os sócios estão entre 57 % e 83 % da largura da foto. Ancorada em 70 %
		na horizontal, a foto corta pela esquerda — o escritório ao fundo — e
		os dois ficam sempre à direita da coluna de texto, em qualquer
		proporção de tela.
	*/
	.construir__foto img {
		object-position: 70% 40%;
	}

	.construir__foto::after {
		content: none;
	}

	/*
		A PENUMBRA. A foto original é clara — parede branca e luz quente — e a
		referência é noite. Quatro camadas fazem a virada, todas no grafite do
		manual (V9: a direção nova entra em composição, não em token de cor):

		1. a cortina da esquerda, quase opaca atrás do texto e aberta sobre
		   os sócios — é ela que garante o contraste da coluna;
		2. o pé e o alto, que fundem a seção nas vizinhas sem linha de corte;
		3. um véu geral, que abaixa a parede branca para o tom de noite;
		4. a luz fria no alto à esquerda, a mesma dos cartões dos cases.

		A cortina foi MEDIDA, não estimada: a conta refaz as quatro camadas
		sobre os pixels da foto, na caixa de cada texto, e pega o ponto mais
		claro (1920 × 1024). A primeira versão, que abria em 42 %, deixava o
		azul do gradiente da manchete a 2,92:1 na ponta direita — abaixo do
		piso de 3:1 do texto grande. Com esta: manchete no azul 4,01:1,
		"tecnologia" 4,99:1, parágrafos em branco 15,47:1, rótulos dos números
		8,5:1.
	*/
	.construir::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			radial-gradient(ellipse 50% 60% at 0% 0%, rgba(84, 129, 255, 0.16), transparent 70%),
			linear-gradient(90deg,
				rgba(22, 22, 29, 0.97) 0%,
				rgba(22, 22, 29, 0.95) 34%,
				rgba(22, 22, 29, 0.88) 46%,
				rgba(22, 22, 29, 0.5) 56%,
				rgba(22, 22, 29, 0) 68%),
			linear-gradient(to bottom, var(--pic-fundo), rgba(29, 29, 36, 0) 16%),
			linear-gradient(to top, var(--pic-fundo), rgba(29, 29, 36, 0) 22%),
			rgba(18, 18, 24, 0.3);
	}

	/*
		O envelope é o mesmo dos cartões dos cases (90 rem), e não o de
		leitura (76 rem): a coluna alinha com a borda dos cartões logo acima,
		e a manchete ganha a largura para ficar em duas linhas.
	*/
	.construir__env {
		width: 100%;
		max-width: 90rem;
		margin-top: 0;
		padding-block: var(--pic-esp-6);
	}

	.construir__coluna {
		max-width: min(44rem, 48%);
	}

	/*
		A curva atravessa entre a coluna e os sócios, mais alta que a seção,
		para entrar e sair pelas bordas em vez de começar e terminar no meio
		do quadro.
	*/
	.construir__curva {
		display: block;
		position: absolute;
		top: -6%;
		bottom: -6%;
		left: 47%;
		width: clamp(6rem, 11vw, 10rem);
		opacity: 0.55;
		pointer-events: none;
		--pic-curva-de: #5481ff;
		--pic-curva-ate: #9900ff;
	}

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

.construir__titulo {
	margin-bottom: var(--pic-esp-4);
	font-size: clamp(2.1rem, 3.3vw, 3.3rem);
	line-height: 1.1;
}

.construir__titulo > span {
	display: block;
}

.construir__chave {
	background: var(--pic-grad-institucional);
	background-size: 220% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.construir__chave {
		animation: pic-grad-anda 14s ease-in-out infinite alternate;
	}
}

.construir__coluna > p:not(.construir__cta) {
	max-width: 34rem;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--pic-texto-2);
}

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

/*
	"tecnologia", no azul do manual — o eco da primeira linha da manchete no
	meio do parágrafo. Azul sobre a penumbra fica acima de 4,76:1, o par do
	manual para o azul sobre grafite.
*/
.construir__destaque {
	color: var(--pic-azul);
}

/*
	OS NÚMEROS. Três colunas separadas por um fio azul, e não uma grade
	emoldurada: na referência eles são uma frase de três medidas, não três
	caixas. Os estilos de base (contagem, régua que cresce) vêm de
	`blocos.css`; aqui muda o que a faixa clara não tem — a cor do escuro e
	a régua CURTA, que sublinha o número em vez de medir a coluna.
*/
/*
	Os três ficam SEMPRE numa linha. Com quebra, no celular eles caíam em
	1 + 2 e o fio do primeiro ficava apontando para o vazio. A escala desce
	com a tela até caber: "+2.400" em 1,75 rem tem ~92 px, e a coluna de
	390 px comporta os três.
*/
.construir__numeros {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	margin: var(--pic-esp-5) 0 0;
}

.construir__numeros .numero {
	padding-right: clamp(0.85rem, 3vw, 2.5rem);
	margin-right: clamp(0.85rem, 3vw, 2.5rem);
	border-right: 1px solid rgba(84, 129, 255, 0.55);
}

.construir__numeros .numero:last-child {
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}

.construir__numeros .numero__valor {
	font-size: clamp(1.75rem, 3.2vw, 2.9rem);
	font-weight: 300;
	color: var(--pic-texto);
}

.construir__numeros .numero__regua {
	width: 2.4rem;
	margin-top: 0.8rem;
	opacity: 0.9;
}

.construir__numeros .numero__rotulo {
	margin-top: 0.8rem;
	font-size: clamp(0.82rem, 1.2vw, 0.95rem);
	color: var(--pic-texto-2);
}

.construir__cta {
	margin-top: var(--pic-esp-5);
}

/*
	O botão da referência é contorno, não chapa: na seção o que tem peso é a
	foto, e um gradiente cheio aqui disputaria com a manchete.
*/
.construir__botao {
	position: relative;
	overflow: hidden;
	gap: 1.1rem;
	padding: 0.95rem 1.6rem;
	border-color: var(--pic-azul);
	background: rgba(29, 29, 36, 0.35);
	color: var(--pic-texto);
	font-weight: 500;
}

.construir__botao:hover,
.construir__botao:focus-visible {
	border-color: var(--pic-ciano);
}

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

.construir__botao:hover .construir__seta,
.construir__botao:focus-visible .construir__seta {
	translate: 0.3rem 0;
}

/* ---------- 6. ecossistema: quatro soluções, quatro marcas ---------- */

/*
	Composição de `telas/experiencia_que_se_transforma.jpeg` (23/09/2026).

	Quem identifica cada solução continua sendo o LOGO, em chapa própria —
	agora com uma imagem da área da marca ao fundo, o assunto à direita e a
	esquerda escura para o logo. O padrão da seção não mudou: a entrada é do
	grupo, o relevo diz que são portas, a luz responde ao ponteiro.
*/

.ecossistema {
	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);
	border-top: 1px solid var(--pic-linha);

	/* A luz fria da referência, no alto à direita, onde o arco passa. */
	background:
		radial-gradient(ellipse 45% 55% at 92% 0%, rgba(84, 129, 255, 0.14), transparent 70%),
		var(--pic-fundo);
}

.ecossistema__env {
	max-width: 90rem;
}

/*
	O arco: a curva da marca, grande, no canto superior direito — ela entra
	pelo alto e desce por trás do título até a altura dos cartões.
*/
.ecossistema__curva {
	position: absolute;
	top: -4%;
	right: 6%;
	z-index: -1;
	width: clamp(10rem, 22vw, 24rem);
	height: 62%;
	opacity: 0.6;
	pointer-events: none;
	--pic-curva-peso: 1;
	--pic-curva-de: #5481ff;
	--pic-curva-ate: #9900ff;
}

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

.ecossistema__intro {
	max-width: 62rem;
	margin-bottom: var(--pic-esp-5);
}

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

.ecossistema__chave {
	background: var(--pic-grad-institucional);
	background-size: 220% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.ecossistema__chave {
		animation: pic-grad-anda 14s ease-in-out infinite alternate;
	}
}

.ecossistema__intro p {
	max-width: 44rem;
	font-size: 1.05rem;
	color: var(--pic-texto-2);
}

/*
	Peça separada, com folga em volta: peça que cede sob o ponteiro precisa de
	espaço para ceder, e colada na vizinha o relevo vira colisão.
*/
.ecossistema__solucoes {
	display: grid;
	gap: var(--pic-esp-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/*
	O CARTÃO: chapa no alto, a fala embaixo e o botão de seta no canto. A
	borda tem um fio de azul, e o fundo sobe um passo do grafite — é a
	moldura escura da referência, dentro da paleta do manual (V9).
*/
.solucao__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pic-esp-3);
	height: 100%;
	padding: 0.9rem 0.9rem var(--pic-esp-4);
	border: 1px solid rgba(84, 129, 255, 0.24);
	border-radius: 6px;
	background: linear-gradient(180deg, var(--pic-elevado), var(--pic-fundo));
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.3s ease,
		transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.36s ease;
}

.solucao__link:hover,
.solucao__link:focus-visible {
	border-color: color-mix(in srgb, var(--pic-acento-b, #12e4ff) 55%, transparent);
	box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.45);
}

/*
	O fio de gradiente no pé acende de fora para dentro: é o sinal de que a
	porta responde. Gradiente DA MARCA — o acento que a V5 autoriza fora do
	AI Ready, dizendo de quem é o cartão.
*/
.solucao__link::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--pic-acento-a, #5481ff),
		var(--pic-acento-b, #12e4ff)
	);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.solucao__link:hover::before,
.solucao__link:focus-visible::before {
	transform: scaleX(1);
}

/*
	A CHAPA DO LOGO.

	Altura fixa e igual nas quatro — é ela que mantém a grade lendo como
	grade: os lockups vão de 1,79:1 a 4,67:1. 8,1 rem = o logo mais alto
	(6,05 rem, a P4Saúde) mais o respiro; com menos, a chapa dela crescia e
	a tagline descia 7 px em relação à vizinha — medido.

	O fundo é a imagem da marca, ancorada à DIREITA, onde está o assunto, e
	uma cortina escura da esquerda para o logo branco ler sobre ela. Por
	cima, a lavagem na cor do logo, mais leve que antes: a imagem já dá cor.
*/
.solucao__chapa {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 8.1rem;
	padding: var(--pic-esp-2) var(--pic-esp-3);
	overflow: hidden;
	border-radius: 4px;
	background: #0d1020;
	box-shadow: inset 0 0 0 1px rgba(190, 208, 240, 0.08);
	transition: box-shadow 0.35s ease;
}

.solucao__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.solucao__fundo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.solucao__chapa::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(10, 12, 24, 0.82), rgba(10, 12, 24, 0.35) 45%, transparent 70%),
		linear-gradient(
			115deg,
			color-mix(in srgb, var(--pic-acento-a, #5481ff) 14%, transparent),
			transparent 60%
		);
}

.solucao__link:hover .solucao__chapa,
.solucao__link:focus-visible .solucao__chapa {
	box-shadow: inset 0 0 0 1px
		color-mix(in srgb, var(--pic-acento-b, #12e4ff) 34%, transparent);
}

.solucao__link:hover .solucao__fundo img,
.solucao__link:focus-visible .solucao__fundo img {
	scale: 1.04;
}

/*
	`--pic-logo-altura` é correção de PESO VISUAL, vinda da marcação: o que
	se iguala é o tamanho do LOGOTIPO, que é o que o olho compara.
*/
.solucao__logo {
	display: block;
	width: auto;
	height: var(--pic-logo-altura, 3rem);
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

/*
	A fala ocupa o cartão menos a coluna do botão, para o texto nunca correr
	por baixo da seta.
*/
.solucao__dizer {
	display: block;
	flex: 1 1 auto;
	padding: 0 calc(3.25rem + var(--pic-esp-4)) 0 var(--pic-esp-2);
}

/* O Studio leva a uma tela de login. O rótulo evita a porta fechada. */
.solucao__rotulo {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.3rem 0.8rem;
	background: rgba(10, 12, 24, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 99px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pic-texto);
}

/*
	A tagline é BRANCA (pedido do cliente em 23/09/2026: branco ou o
	gradiente de "novas soluções" — a escolha foi branco).

	O gradiente é a ênfase da manchete, e a regra da V10 vale aqui também:
	tudo colorido é nada destacado. Quatro títulos no mesmo gradiente
	repetiriam quatro vezes o destaque que só "novas soluções." deve ter, e
	disputariam com o que já tem cor em cada cartão — o logo e a imagem da
	chapa. Branco dá a hierarquia pelo peso e deixa a cor para a marca.
	O ciano anterior tinha o mesmo problema, em menor grau.
*/
.solucao__tagline {
	display: block;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pic-texto);
}

.solucao__texto {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--pic-texto-2);
}

/*
	O botão de seta: círculo com fio azul, no canto de baixo. Todas estas
	portas levam para fora do site, e a seta anda para a direita no hover.
*/
.solucao__ir {
	position: absolute;
	right: var(--pic-esp-3);
	bottom: var(--pic-esp-4);
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid rgba(84, 129, 255, 0.7);
	border-radius: 50%;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--pic-texto);
	transition: border-color 0.3s ease, background-color 0.3s ease,
		translate 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.solucao__link:hover .solucao__ir,
.solucao__link:focus-visible .solucao__ir {
	border-color: var(--pic-ciano);
	background: rgba(18, 228, 255, 0.08);
	translate: 0.2rem 0;
}

/*
	NO CELULAR (abaixo de 44 rem, onde a grade tem uma coluna):

	- O selo do Studio desce para o pé da chapa, que reserva a altura dele.
	  No alto ele caía em cima do logo — medido em 375 px: o selo começava
	  77 px antes do fim do logo.
	- A seta sai do canto e vai para baixo do texto, à direita. No canto ela
	  reservava 92 px de coluna, e o texto corria em 190 px de largura.
*/
@media (max-width: 43.99rem) {
	.solucao__rotulo {
		top: auto;
		bottom: 0.6rem;
	}

	/*
		Só no pé ainda não bastou: a chapa tem 130 px e o selo pegava a
		linha "STUDIO" do logo. A chapa que tem selo reserva embaixo a
		altura dele, e o logo centraliza no que sobra.
	*/
	.solucao__chapa:has(.solucao__rotulo) {
		padding-bottom: 2.7rem;
	}

	.solucao__dizer {
		padding-right: var(--pic-esp-2);
	}

	.solucao__link {
		padding-bottom: var(--pic-esp-3);
	}

	.solucao__ir {
		position: static;
		align-self: flex-end;
		margin-right: var(--pic-esp-2);
	}
}