/*
	Soluções — recomposta em 28/09/2026 com a estrutura de Quem somos.

	A abertura é o componente das internas (`interna.css`); os desenhos dos
	momentos vêm de `desenho.css`, os mesmos da Home. Aqui ficam a ponte, o
	percurso horizontal (decisão V1) e as marcas.

	Regra que manda no percurso: o empilhamento vertical é o padrão, e o
	percurso horizontal é uma camada por cima que o JavaScript liga quando a
	tela comporta e o visitante não pediu menos movimento. Se o JS não rodar,
	se a tela for estreita ou baixa, ou se prefers-reduced-motion estiver
	ligado, a seção continua sendo cinco blocos empilhados na ordem certa —
	legíveis, navegáveis e com as âncoras funcionando pelo comportamento
	nativo.

	Nada aqui intercepta a rolagem. O palco lê a própria posição e traduz
	avanço vertical em deslocamento horizontal; quem controla o ritmo continua
	sendo o visitante.
*/

/* ---------- a ponte ---------- */

.solucoes-ponte {
	padding-block: var(--pic-esp-6) var(--pic-esp-5);
}

.solucoes-ponte__frase {
	max-width: 56rem;
	font-size: clamp(1.5rem, 3.4vw, 2.7rem);
	font-weight: 200;
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: var(--pic-texto);
	text-wrap: pretty;
}

/* ---------- o percurso ---------- */

.percurso {
	position: relative;
}

.percurso__palco {
	display: flex;
	flex-direction: column;
	gap: var(--pic-esp-3);
}

.percurso__camadas {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- o mapa de etapas ---------- */

.percurso__mapa {
	padding-block: var(--pic-esp-3);
}

.percurso__etapas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.percurso__etapa {
	flex: 1 1 8rem;
	min-width: 0;
}

.percurso__ir {
	display: block;
	width: 100%;
	padding: 0.6rem 0 0;
	border: 0;
	border-top: 1px solid var(--pic-linha);
	background: none;
	color: var(--pic-texto-3);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: left;
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.percurso__ir:hover,
.percurso__ir:focus-visible {
	color: var(--pic-texto);
}

/* O número da etapa no tom dela: o mapa já diz a cor de cada momento. */
.percurso__ir-n {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--pic-tom);
}

/*
	O que já passou fica marcado, mas o que falta continua legível: o mapa
	precisa responder "onde você está" e "onde precisa chegar" ao mesmo tempo.
	Um indicador que só acendesse a etapa atual perderia a segunda metade.

	O fio é de 1 px e na cor do momento — a linha de cima do mapa se acende do
	azul ao ciano conforme o visitante avança, que é o gradiente
	institucional se construindo etapa por etapa.
*/
.percurso__etapa[data-estado="passou"] .percurso__ir {
	border-top-color: color-mix(in srgb, var(--pic-tom) 55%, transparent);
}

.percurso__etapa[data-estado="atual"] .percurso__ir {
	border-top-color: var(--pic-tom);
	color: var(--pic-texto);
	box-shadow: 0 -1px 0.7rem -0.2rem var(--pic-tom);
}

/* ---------- uma camada, empilhada ---------- */

/*
	Empilhada (celular, tela baixa, movimento reduzido): cada camada abre com
	o fio de 1 px na cor do momento e o desenho centrado — a mesma sequência
	estruturada dos momentos da Home no celular.
*/
.camada {
	position: relative;
	display: grid;
	gap: var(--pic-esp-3);
	padding-block: var(--pic-esp-5);
}

.camada::before {
	content: "";
	position: absolute;
	inset: 0 var(--pic-gutter) auto;
	height: 1px;
	background: linear-gradient(to right, var(--pic-tom), transparent 70%);
}

.percurso:not(.e-horizontal) .camada {
	padding-inline: var(--pic-gutter);
	max-width: calc(var(--pic-largo) + 2 * var(--pic-gutter));
	margin-inline: auto;
}

.camada__desenho {
	position: relative;
	width: clamp(8rem, 38vw, 12rem);
	color: var(--pic-tom);
}

.camada__n {
	position: absolute;
	right: 100%;
	top: 0;
	margin-right: 0.4rem;
	font-size: 0.8rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--pic-tom);
}

.percurso:not(.e-horizontal) .camada__n {
	position: static;
	display: block;
	margin: 0 0 0.4rem;
}

.camada__numero {
	display: block;
	margin-bottom: var(--pic-esp-2);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pic-tom);
	font-variant-numeric: tabular-nums;
}

.camada__titulo {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.9rem, 4vw, 3.3rem);
	font-weight: 200;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--pic-texto);
}

/*
	O sinal de reconhecimento é o primeiro texto que o visitante lê na camada,
	e é o único trabalho da página que ele não consegue fazer sozinho: se
	identificar. Por isso tem peso próprio, e não vira legenda. O fio é de
	1 px, no tom do momento — nunca traço grosso.
*/
.camada__sinal {
	max-width: 36rem;
	padding-left: 1.1rem;
	border-left: 1px solid var(--pic-tom);
	font-size: clamp(1.08rem, 1.9vw, 1.3rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--pic-texto);
}

.camada__sinal b {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pic-tom);
}

.camada__corpo {
	max-width: var(--pic-medida);
}

.camada__lead {
	margin-bottom: var(--pic-esp-2);
	font-size: 1.12rem;
	color: var(--pic-texto);
}

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

.camada__servico {
	padding: 0.32rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--pic-tom) 45%, var(--pic-linha));
	border-radius: 99px;
	font-size: 0.8rem;
	color: var(--pic-texto-2);
}

.camada__destino {
	max-width: 38rem;
	margin-top: var(--pic-esp-4);
	padding-top: var(--pic-esp-2);
	border-top: 1px solid var(--pic-linha);
	font-size: 0.95rem;
	color: var(--pic-texto-2);
}

.camada__destino b {
	color: var(--pic-texto);
}

.camada__nota {
	max-width: 36rem;
	margin-top: var(--pic-esp-3);
	padding: var(--pic-esp-2);
	background: var(--pic-elevado);
	border-left: 1px solid var(--pic-borda);
	font-size: 0.88rem;
	color: var(--pic-texto-3);
}

.camada__nota b {
	color: var(--pic-texto-2);
}

/*
	O desenho se traça na chegada, empilhado — a mesma regra do celular da
	Home (`home.css`, "O desenho se desenha quando o momento chega"). Quem
	esconde o traço é a classe da raiz: sem JavaScript o desenho está pronto.
*/
@media (prefers-reduced-motion: no-preference) {
	.pic-desenho-pronto .percurso:not(.e-horizontal) [data-desenha] .desenho__t {
		stroke-dasharray: 620;
		stroke-dashoffset: 620;
	}

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

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

/* ---------- modo percurso, ligado pelo JavaScript ---------- */

/*
	Um passo de rolagem por passagem entre camadas, curto o bastante para um
	giro de roda atravessar ele inteiro. É isso que dá a sensação de trocar de
	tela por gesto, em vez de arrastar.
*/
.percurso.e-horizontal {
	--pic-passo: 48svh;
}

/*
	Encaixe por gesto, nativo do navegador.

	A classe entra e sai do <html> pelo JavaScript, junto com o modo
	horizontal, porque `scroll-snap-type` mora no elemento que rola e só deve
	valer enquanto o percurso existe.

	`proximity`, não `mandatory`: o encaixe acontece quando o visitante para
	perto de uma camada, e em nenhum outro lugar da página. Com `mandatory` a
	rolagem passaria a ser conduzida pelo navegador o tempo todo — e aí seria
	movimento que bloqueia, exatamente o que a regra do projeto proíbe.
*/
.pic-com-percurso {
	scroll-snap-type: y proximity;
}

/*
	Marcos invisíveis, um por camada, na altura exata de cada parada. São eles
	que o navegador usa como ponto de encaixe. Ficam no trilho, não no palco:
	o palco é grudado e não acompanha a rolagem.
*/
.percurso__marco {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	scroll-snap-align: start;
	/*
		`normal`, e não `always`.

		`always` obriga o navegador a parar em TODOS os pontos de encaixe.
		Isso garante "um giro, uma tela" — e é a mesma propriedade que faz a
		rolagem rápida brigar, porque atravessar o percurso de volta passa a
		exigir quatro paradas forçadas. As duas coisas são a mesma palavra:
		não dá para ter uma sem a outra.

		Com `normal` o navegador não interrompe gesto nenhum. Ele só escolhe
		onde pousar quando o gesto termina:

		- Giro deliberado (uns três cliques, cerca de 300 px) pousa na camada
		  seguinte, porque ela fica mais perto que a de origem. É o "um giro,
		  uma tela" no uso normal.
		- Cutucada leve (um ou dois cliques) volta para a camada atual, que
		  continua sendo a mais próxima. Nada muda por acidente.
		- Giro rápido atravessa livre e pousa onde parar. Quem gira rápido
		  quer andar rápido.

		É a única configuração em que rolagem rápida e pouso limpo convivem.
	*/
	scroll-snap-stop: normal;

	/*
		Anula a folga do cabeçalho no encaixe. Desde 24/09/2026 o `<html>`
		tem `scroll-padding-top` com a altura da barra fixa — é o que impede
		uma âncora de parar debaixo dela —, e o encaixe respeita essa folga:
		cada camada pousava 92 px ANTES do marco. Medido em 28/09/2026 a
		pedido do cliente, que viu as camadas descentralizadas: posição 1,84
		em vez de 2,00, e o conteúdo inteiro 310 px à direita, com o corpo
		encostando na borda. O marco devolve os 92 px com margem negativa.
	*/
	scroll-margin-top: calc(-1 * var(--pic-cab-altura));
}

.percurso.e-horizontal .percurso__trilho {
	position: relative;
}

.percurso.e-horizontal .percurso__trilho {
	height: calc(100svh + (var(--pic-camadas, 5) - 1) * var(--pic-passo));
}

.percurso.e-horizontal .percurso__palco {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	gap: 0;
}

/*
	O topo do palco reserva a altura da barra do cabeçalho. A barra some na
	descida, mas o encaixe do percurso às vezes devolve alguns pixels para
	cima ao pousar — e um gesto para cima traz a barra de volta, por cima do
	mapa. Medido em 28/09/2026: barra e mapa na mesma faixa da tela.
*/
.percurso.e-horizontal .percurso__mapa {
	flex: none;
	padding-block: calc(var(--pic-cab-altura) + var(--pic-esp-1)) var(--pic-esp-2);
}

/*
	Cinco painéis, cada um da largura do palco, numa fileira que transborda.
	flex-basis de 100% resolve contra o palco, então nenhuma conta depende de
	vw — o que importa porque vw ignora a barra de rolagem e desalinharia
	tudo por alguns pixels.
*/
.percurso.e-horizontal .percurso__camadas {
	display: flex;
	flex-wrap: nowrap;
	flex: 1;
	width: 100%;
	min-height: 0;
	transform: translate3d(var(--pic-x, 0px), 0, 0);
	will-change: transform;
}

.percurso.e-horizontal .camada {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-block: var(--pic-esp-3);
	padding-inline: var(--pic-gutter);
	border-top: 0;
	/*
		Nada de overflow próprio aqui. A camada chegou a ter `overflow-y: auto`
		como válvula de segurança, e isso é uma armadilha: numa tela baixa a
		roda do mouse passa a rolar DENTRO da camada em vez de avançar o
		percurso. Ou o conteúdo cabe numa tela e o percurso acontece, ou o
		JavaScript desliga o modo horizontal e tudo volta a empilhar. Sem
		meio-termo em que a roda não faz o que o visitante espera.
	*/
	min-height: 0;
}

/* ---------- a camada no palco ---------- */

/*
	O desenho do momento no CENTRO, a cabeça (etapa, título, sinal) à
	esquerda e o corpo à direita, em colunas iguais. Corrigido em 28/09/2026
	a pedido do cliente, que achou a primeira versão desequilibrada — e era,
	por duas causas medidas:

	1. a margem lateral era `(100% - 76rem) / 2` e esquecia a margem interna
	   do `.pic-env`: as camadas começavam antes do logo do cabeçalho e
	   terminavam depois do botão, e o corpo encostava na borda;
	2. o desenho ficava numa coluna estreita à esquerda e o texto mais longo
	   todo na direita — o peso inteiro de um lado, e o centro vazio.

	Com o desenho no eixo, a composição é simétrica em torno do meio da
	página, que é também o eixo do mapa de etapas logo acima.

	Dentro do palco o espaço vertical é finito: a camada tem de caber numa
	tela, porque não há rolagem própria. O ritmo é medido em svh — em
	monitor grande fica folgado, em notebook aperta sozinho. Se ainda assim
	não couber, `percurso.js` desliga o modo e empilha.
*/
.percurso.e-horizontal .camada {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "cabeca desenho corpo";
	align-content: center;
	align-items: center;
	column-gap: clamp(1.75rem, 3.6vw, 4rem);
	padding-block: clamp(0.75rem, 2svh, 1.5rem);
	padding-inline: calc(max(0px, (100% - var(--pic-largo)) / 2) + var(--pic-gutter));
}

.percurso.e-horizontal .camada::before {
	display: none;
}

.percurso.e-horizontal .camada__cabeca { grid-area: cabeca; }
.percurso.e-horizontal .camada__corpo { grid-area: corpo; }

.percurso.e-horizontal .camada__desenho {
	grid-area: desenho;
	width: min(19rem, 32svh, 22vw);
	justify-self: center;

	/* O halo abaixo vai atrás do desenho, e só dele. */
	isolation: isolate;
}

/*
	Um halo no tom do momento atrás do desenho. É o que dá ao centro o peso
	de protagonista: traço fino sozinho, no meio de duas colunas de texto,
	lia como vazio. Elipse que morre antes da borda, como a luz do site.
*/
.percurso.e-horizontal .camada__desenho::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--pic-tom) 16%, transparent), transparent);
	pointer-events: none;
}

.percurso.e-horizontal .camada__desenho .desenho {
	stroke-width: 1.1;
}

/* No palco o número já está no mapa e na etiqueta da etapa. */
.percurso.e-horizontal .camada__n {
	display: none;
}

.percurso.e-horizontal .camada__numero {
	margin-bottom: clamp(0.4rem, 1.2svh, 1rem);
}

.percurso.e-horizontal .camada__titulo {
	margin-bottom: clamp(0.75rem, 2.4svh, 1.5rem);
	font-size: clamp(1.9rem, min(3.4vw, 5.6svh), 3.3rem);
}

.percurso.e-horizontal .camada__sinal {
	font-size: clamp(1rem, 2.3svh, 1.3rem);
}

.percurso.e-horizontal .camada__lead {
	font-size: clamp(1rem, 2svh, 1.12rem);
}

.percurso.e-horizontal .camada__texto {
	font-size: clamp(0.9rem, 1.8svh, 1rem);
}

.percurso.e-horizontal .camada__servicos {
	margin-top: clamp(0.75rem, 2svh, 1.5rem);
}

.percurso.e-horizontal .camada__destino {
	margin-top: clamp(0.9rem, 2.6svh, 2.2rem);
	padding-top: clamp(0.6rem, 1.4svh, 1rem);
}

.percurso.e-horizontal .camada__nota {
	margin-top: clamp(0.75rem, 2svh, 1.5rem);
	padding: clamp(0.6rem, 1.4svh, 1rem);
	font-size: 0.83rem;
	line-height: 1.5;
}

.percurso.e-horizontal .percurso__etapas {
	flex-wrap: nowrap;
}

/*
	Tela larga mas não tanto (62 a 80rem): três colunas apertariam o texto
	em faixas de 250 px. Ficam duas, iguais, e o desenho sobe para cima da
	cabeça, menor. O centro é a divisa das duas colunas.
*/
@media (max-width: 79.99rem) {
	.percurso.e-horizontal .camada {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"desenho corpo"
			"cabeca  corpo";
		align-items: start;
		row-gap: clamp(0.75rem, 2svh, 1.5rem);
	}

	.percurso.e-horizontal .camada__desenho {
		justify-self: start;
		width: min(9rem, 18svh);
	}

	.percurso.e-horizontal .camada__corpo { align-self: center; }
}

/* ---------- a chegada ---------- */

/*
	Quando uma camada assume o palco (`data-estado="atual"`, escrito por
	`percurso.js`), o desenho se traça e as peças do texto sobem em cascata
	curta. A camada que ainda FALTA espera com o traço recolhido e o texto
	baixo e apagado — ela entra pela direita já vazia, e se monta ao chegar.

	São TRANSIÇÕES, e isso é a regra: voltar para uma camada que já passou
	não repete nada (ela já está montada), e recuar para a direita desfaz
	sozinho. Nenhum estado de repouso esconde conteúdo — sem o JavaScript,
	não existe `data-estado` e está tudo à vista.

	O ponteiro move o desenho alguns pixels (a seção publica `--pic-px`): é a
	peça sob ele que responde, não o texto.
*/
@media (prefers-reduced-motion: no-preference) {
	.percurso.e-horizontal .camada__peca {
		transition: opacity 0.6s ease, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(0.18s + var(--i, 0) * 0.07s);
	}

	.percurso.e-horizontal .camada[data-estado="falta"] .camada__peca {
		opacity: 0;
		transform: translate3d(0, 1.3rem, 0);
		transition-delay: 0s;
	}

	.percurso.e-horizontal .desenho__t {
		stroke-dasharray: 620;
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 1.9s cubic-bezier(0.45, 0.05, 0.2, 1) 0.15s;
	}

	.percurso.e-horizontal .desenho__t:nth-of-type(2n) {
		transition-delay: 0.4s;
	}

	.percurso.e-horizontal .camada[data-estado="falta"] .desenho__t {
		stroke-dashoffset: 620;
		transition-duration: 0.5s;
		transition-delay: 0s;
	}

	.percurso.e-horizontal .camada__n {
		transition: opacity 0.6s ease 0.1s;
	}

	.percurso.e-horizontal .camada[data-estado="falta"] .camada__n {
		opacity: 0;
	}

	.percurso.e-horizontal .camada__desenho .desenho {
		transform: translate3d(calc(var(--pic-px, 0) * 12px), calc(var(--pic-py, 0) * 8px), 0);
		transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ---------- PicHost e P4Saúde ---------- */

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

.solucoes-marcas__env {
	display: grid;
	gap: var(--pic-esp-5);
}

@media (min-width: 52rem) {
	.solucoes-marcas__env {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pic-esp-5) clamp(2rem, 5vw, 5rem);
	}
}

.marca__chapa {
	display: block;
	margin-bottom: var(--pic-esp-4);
	border-radius: 6px;
	color: inherit;
}

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

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

.marca__logo {
	position: absolute;
	left: 8%;
	top: 50%;
	width: auto;
	max-width: 46%;
	transform: translateY(-50%);
	filter: drop-shadow(0 0.3rem 1rem rgba(3, 3, 8, 0.6));
}

.marca__titulo {
	margin-bottom: var(--pic-esp-3);
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

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

.marca .pic-botao {
	margin-top: var(--pic-esp-2);
}