/* =========================================================================
   E DEPOIS DO DIAGNOSTICO — a trilha do Metodo ISP 360º
   Figma: Frame 1171275722 (1041:28), faixa y 6458–7820.

   Os quatro cards vem como UMA imagem composta (fotos, rotulos e o selo
   "Voce esta aqui"), exportada em 2x. Os cotovelos que ligam os cards sao
   SVG do arquivo, posicionados por cima — eles sao irmaos da grade no Figma
   e por isso passam sobre os cards.
   ========================================================================= */

#isp-depois {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 80px;
	/* Pedido do cliente (26/08/2026): o conteudo ficava colado no topo e
	   sobrava um vao embaixo. O recuo do arquivo (45 em cima, 120 embaixo)
	   virou a media dos dois, entao a faixa mantem a mesma altura e o bloco
	   fica no meio. */
	padding: 82.5px var(--isp-margem);
	background-color: var(--isp-preto);
	color: var(--isp-branco);
	overflow: hidden;
}

#isp-depois > .e-con,
#isp-depois > .elementor-widget {
	width: 1281px;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#isp-depois-topo {
	gap: 40px;
	width: 1281px;
	max-width: 100%;
	text-align: center;
}

#isp-depois .isp-servico__eyebrow .elementor-heading-title {
	max-width: none;
	font-family: var(--isp-fonte-titulo);
	letter-spacing: 0;
	color: var(--isp-branco);
}

#isp-depois .isp-servico__titulo .elementor-heading-title {
	font-size: 36px;
	line-height: 52px;
	color: var(--isp-branco);
}

#isp-depois .isp-servico__titulo strong {
	font-weight: 600;
}

#isp-depois .isp-servico__lead {
	max-width: none;
	color: rgba(212, 211, 211, 0.74);
}

/* O fecho e o botao repetem o tom do texto de abertura. */
.isp-depois__fecho {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: var(--isp-fonte-titulo);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	text-align: center;
	color: rgba(212, 211, 211, 0.74);
}

.isp-depois__fecho p {
	margin: 0;
}

#isp-depois .isp-btn--azul {
	background-color: #1b4bff;
	border-color: var(--isp-linha);
	color: #f8f9fa;
}

/* Esta seção tem fundo preto: aqui a pilula NAO escurece no hover, senao ela
   desaparece. Fica so o azul do arquivo, o rotulo branco e o leve
   deslocamento com sombra que toda pilula tem. */
#isp-depois .isp-btn--azul:hover,
#isp-depois .isp-btn--azul:focus-visible {
	background-color: #1b4bff;
	color: #f8f9fa;
}

#isp-depois > .elementor-widget:last-child {
	width: auto;
}

/* ---------- A trilha ---------- */
/* display:contents no desktop: o invólucro de rolagem existe só para o
   celular, e como bloco ele tirava 1px da largura da trilha. */
.isp-trilha-rolagem {
	display: contents;
}

.isp-trilha {
	position: relative;
	width: 1281px;
	max-width: 100%;
	aspect-ratio: 1281 / 546;
}

.isp-trilha__cards {
	display: block;
	width: 100%;
	height: auto;
}

/* Os cotovelos, nas coordenadas do arquivo (ja descontado o topo da grade). */
.isp-trilha__fio {
	position: absolute;
	display: block;
	pointer-events: none;
}

.isp-trilha__fio svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.isp-trilha__fio--a { left: 309px; top: 158px; width: 169px; height: 72px;  transform: scaleX(-1); }
.isp-trilha__fio--b { left: 957px; top: 107px; width: 169px; height: 123px; transform: scaleX(-1); }
.isp-trilha__fio--c { left: 633px; top: 354px; width: 172px; height: 91px;  transform: rotate(180deg); }

/* As pontas de seta dos cotovelos. */
.isp-trilha__seta {
	position: absolute;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: #ffffff;
	pointer-events: none;
}

.isp-trilha__seta svg {
	display: block;
	width: 100%;
	height: 100%;
}

.isp-trilha__seta--1 { left: 1118px; top: 222px; transform: rotate(90deg); }
.isp-trilha__seta--2 { left: 797px;  top: 346px; transform: rotate(-90deg); }
.isp-trilha__seta--3 { left: 947px;  top: 100px; }
.isp-trilha__seta--4 { left: 625px;  top: 437px; }
.isp-trilha__seta--5 { left: 470px;  top: 223px; transform: rotate(90deg); }
.isp-trilha__seta--6 { left: 301px;  top: 150px; }

/* =========================================================================
   RESPONSIVO
   A trilha so faz sentido na largura do arquivo: abaixo dela, a imagem
   acompanha a largura e os fios saem de cena.
   ========================================================================= */

@media (max-width: 1360px) {
	.isp-trilha__fio,
	.isp-trilha__seta {
		display: none;
	}
}

/* Abaixo de 1024 a trilha encolheria para menos de 400px de largura e os
   rotulos dos quatro cards ficariam ilegiveis. Em vez de encolher, ela
   mantem uma largura minima e a faixa rola na horizontal. */
@media (max-width: 1023px) {
	.isp-trilha-rolagem {
		display: block;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.isp-trilha-rolagem::-webkit-scrollbar {
		display: none;
	}

	.isp-trilha {
		width: 880px;
		max-width: none;
	}
}

@media (max-width: 1024px) {
	#isp-depois {
		gap: 48px;
		padding-block: 80px;
	}

	#isp-depois .isp-servico__titulo .elementor-heading-title {
		font-size: 28px;
		line-height: 38px;
	}
}

/* =========================================================================
   E DEPOIS DO … NO CELULAR — Figma "07 E DEPOIS DO…" (390x1070 no Discovery)

   Regua: 64 | topo 228 | 20 | respiro 8 | 20 | vitrine 344 | 20 | setas 56
          | 20 | respiro 12 | 20 | fecho | 20 | respiro 12 | 20 | botao 38 | 64

   A trilha inteira e uma imagem so no desktop — as quatro fotos, os rotulos
   e o selo ja desenhados, com os cotovelos por cima. Em 390 ela sai de cena
   e no lugar entram os quatro cards de 300x344 de isp_trilha_etapas(), em
   carrossel (pedido do cliente). A arte de cada card vem por fundo, de
   isp_trilha_no_celular() no functions.php.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-depois {
		gap: 20px;
		padding: 64px 0;
	}

	#isp-depois > .e-con,
	#isp-depois > .elementor-widget {
		width: 100%;
	}

	/* Dois ids de proposito: o #isp-depois > .e-con { padding: 0 } do
	   desktop pesa (1,1,0) e ganhava de #isp-depois-topo, que pesa (1,0,0)
	   — o recuo era descartado e o texto encostava na borda em 390.
	   O mesmo vale para o fecho, que tambem e filho direto. */
	#isp-depois > #isp-depois-topo,
	#isp-depois > .isp-depois__fecho {
		padding-inline: var(--isp-margem);
	}

	#isp-depois-topo {
		width: 100%;
		gap: 14px;
	}

	#isp-depois .isp-servico__eyebrow .elementor-heading-title {
		font-family: var(--isp-fonte-corpo);
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 1.6px;
	}

	#isp-depois .isp-servico__titulo .elementor-heading-title {
		font-size: 26px;
		line-height: 32px;
	}

	#isp-depois .isp-servico__lead {
		font-family: var(--isp-fonte-corpo);
		font-size: 14px;
		line-height: 22px;
	}

	/* A imagem composta e os cotovelos so fazem sentido na largura do
	   arquivo de 1440; aqui quem conta a historia sao os quatro cards. */
	.isp-trilha__cards,
	.isp-trilha__fio,
	.isp-trilha__seta {
		display: none;
	}

	.isp-trilha-rolagem,
	.isp-trilha {
		display: block;
		width: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	.isp-trilha__etapas {
		display: flex;
		width: 100%;
	}

	.isp-trilha__etapa {
		display: block;
		flex: 0 0 300px;
		width: 300px;
		height: 344px;
		border-radius: 14.19px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* O selo da pagina corrente. Ele nao esta nas imagens: sao quatro
	   arquivos para o site inteiro, e o selo muda de card a cada pagina. */
	.isp-trilha__etapa.is-aqui {
		position: relative;
	}

	.isp-trilha__etapa.is-aqui::after {
		content: "Você está aqui";
		position: absolute;
		top: 16px;
		left: 16px;
		padding: 7px 14px;
		border-radius: 999px;
		background-color: var(--isp-azul);
		font-family: var(--isp-fonte-corpo);
		font-size: 13px;
		line-height: 18px;
		font-weight: 500;
		color: #ffffff;
	}

	.isp-depois__fecho {
		padding-inline: var(--isp-margem);
		font-size: 17px;
		line-height: 26px;
	}
}


/* =========================================================================
   TRILHA CLICAVEL (desktop)

   A trilha e uma imagem so — os quatro cards estao dentro do render. Para
   ela ficar interativa, as quatro etapas viram areas transparentes por cima
   da imagem, uma sobre cada card. As medidas sao fracoes da caixa da
   trilha (1280x545 no quadro de 1440), tiradas da propria imagem: as
   colunas caem em 0,4–24,1% / 25,2–49,5% / 50,6–74,8% / 75,9–100%, e o
   segundo e o quarto card entram mais abaixo, como no desenho.

   A ordem das etapas gira por pagina (a primeira e sempre a pagina atual),
   e a imagem de cada pagina segue o mesmo giro — entao os quatro lugares
   valem para todas.
   ========================================================================= */
@media (min-width: 768px) {
	.isp-trilha {
		position: relative;
	}

	.isp-trilha__etapas {
		position: absolute;
		inset: 0;
		z-index: 3;
	}

	.isp-trilha__etapa {
		position: absolute;
		display: block;
		background-color: transparent;
		/* 22 e o raio do card dentro do render; com 14 os cantos da sombra
		   sobravam para fora da arte. */
		border-radius: 22px;
		/* Sem cor: a arte ja esta na imagem. O realce do ponteiro e um fio
		   e uma leve subida, para o visitante perceber que clica. */
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

	/* Medidas tiradas do proprio render (1536x655), conferidas com uma
	   grade de 10% por cima da imagem: as quatro colunas caem em
	   0-371, 388-760, 777-1148 e 1165-1536, e o card mede 425 de altura —
	   Discovery e Outsourcing comecam no topo (linha 0, altura 425 = 64,89%)
	   e Governança e Inteligencia entram na linha 277 (42,29%) e saem
	   cortados no pe da imagem — por isso a altura deles e o que resta,
	   57,71%, e nao os mesmos 64,89%.

	   Os numeros saem de uma varredura das quatro imagens: para cada faixa
	   de coluna, a primeira e a ultima linha em que mais de 92% dos pixels
	   nao sao pretos. Antes eu tinha estimado 230 para os de baixo, e a
	   caixa sobrava 39px acima da foto — o "retangulo preto em volta" que o
	   cliente viu, porque o brilho contornava a sobra e nao o card.

	   O endereco e o NOME de cada etapa, e nao a posicao dela na lista: a
	   ordem no HTML gira a cada pagina (a primeira e sempre a pagina
	   atual, que e o que o carrossel do celular precisa), enquanto a
	   ORDEM DENTRO DA IMAGEM e sempre a mesma. Com :nth-child os links
	   caiam nos cards errados fora da Discovery. */
	.isp-trilha__etapa--discovery    { left: 0;      top: 0;      width: 24.15%; height: 64.89%; }
	.isp-trilha__etapa--governanca   { left: 25.26%; top: 42.29%; width: 24.22%; height: 57.71%; }
	.isp-trilha__etapa--outsourcing  { left: 50.59%; top: 0;      width: 24.15%; height: 64.89%; }
	.isp-trilha__etapa--inteligencia { left: 75.85%; top: 42.29%; width: 24.15%; height: 57.71%; }

	/* So o brilho azul, e colado no card.

	   Duas coisas mudaram depois do primeiro teste, as duas por causa do
	   "retangulo preto atras das imagens" que o cliente viu:
	   - saiu o transform, que promove o link a uma camada propria e faz o
	     navegador pintar um retangulo opaco atras dele;
	   - a sombra perdeu o deslocamento e ganhou o mesmo raio do card, para
	     o brilho contornar a arte em vez de desenhar um retangulo maior
	     que ela nos cantos. */
	@media (hover: hover) {
		a.isp-trilha__etapa:hover,
		a.isp-trilha__etapa:focus-visible {
			box-shadow: 0 0 34px 2px rgba(5, 60, 250, 0.5);
			outline: none;
		}
	}
}