/* =========================================================================
   METODOLOGIA ISP LEADERS (radar)
   Figma: faixa y 2441–3720 (1279 de altura).
   Content 956:405 em y 2561 · Group 448 - RADAR (1371:18) em x 79 / y 2839,
   caixa de 1281x760 com os cinco cards e o radar posicionados por cima.
   ========================================================================= */

#isp-metodo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
	/* 91 no topo, não 120: no Figma as seções são blocos absolutos que se
	   sobrepõem, e a de cima termina 29px depois do que a moldura sugere.
	   Com 91 o cabeçalho cai em y=2561 e o radar em y=2839, como no arquivo. */
	padding: 91px var(--isp-margem) 121px;
	background-color: #020202;
	color: var(--isp-branco);
	overflow: hidden;
}

/* ---------- Fundo: grade fina + brilho azul na base ---------- */
/* A grade sao 150 retangulos no arquivo (Group 451); aqui ela vira duas
   repeticoes de gradiente — mesmo desenho, sem 150 elementos no DOM.
   Passo medio: 27.64 na vertical e 29.29 na horizontal. */
.isp-metodo__fundo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(to bottom, rgba(80, 90, 200, 0.02) 0 2.815px, transparent 2.815px 27.64px),
		repeating-linear-gradient(to right, rgba(80, 90, 200, 0.02) 0 3.047px, transparent 3.047px 29.29px);
	background-position: 18px 27px;
}

/* O brilho da base e uma elipse cujo centro cai abaixo da seção; as paradas
   vieram de medir o render do Figma coluna a coluna. */
.isp-metodo__brilho {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: 1440px;
	height: 100%;
	transform: translateX(-50%);
	pointer-events: none;
	background-image: radial-gradient(
		ellipse 520px 420px at 780px calc(100% + 221px),
		rgba(76, 88, 251, 1) 0%,
		rgba(76, 88, 251, 0.95) 55%,
		rgba(76, 88, 251, 0.6) 70%,
		rgba(76, 88, 251, 0.3) 85%,
		rgba(76, 88, 251, 0.13) 100%,
		rgba(76, 88, 251, 0.06) 118%,
		rgba(76, 88, 251, 0.02) 140%,
		rgba(76, 88, 251, 0) 160%
	);
}

/* ---------- Cabecalho ---------- */
#isp-metodo-topo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 42px;
	width: 896px;
	max-width: 100%;
	padding: 0;
	text-align: center;
}

#isp-metodo-topo > .elementor-widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

.isp-metodo__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0 auto;
	max-width: 620px;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--isp-azul);
}

.isp-metodo__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 46px;
	line-height: 52px;
	font-weight: 400;
	color: #ffffff;
}

.isp-metodo__titulo strong {
	font-weight: 700;
}

#isp-metodo-topo .isp-metodo__lead {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	max-width: 726px;
	margin-inline: auto;
	font-family: var(--isp-fonte-titulo);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(248, 249, 250, 0.6);
}

.isp-metodo__lead p {
	margin: 0;
}

/* ---------- Radar + cards ---------- */
.isp-metodo__radar {
	position: relative;
	z-index: 2;
	width: 1281px;
	height: 760px;
	max-width: 100%;
}

.isp-metodo__grafico {
	position: absolute;
	top: 0;
	left: 340px;
	width: 620px;
	height: 580px;
}

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

/* O cone gira em torno do centro do prato, que no sistema do SVG e o ponto
   (300,258).

   A origem vai em PORCENTAGEM sobre a caixa do proprio cone (fill-box), e
   nao em pixels do desenho (view-box): o valor "view-box" so existe no
   Safari a partir da 15.4, e nos iPhones anteriores a regra inteira era
   descartada — a animacao rodava, mas em torno do lugar errado, e na tela
   o ponteiro parecia travado apontando para as 2h (o cliente apontou isso
   em 02/09/2026). "fill-box" e entendido desde o Safari 11.

   A conta: a caixa do cone e 228,58 com 247x200, entao o centro do prato
   cai em (300-228)/247 = 29,25% na horizontal e (258-58)/200 = 100% na
   vertical — o apice do cone, no pe da caixa dele. */
/* O giro do cone mora no proprio SVG (animateTransform, em radar.svg).
   Aqui ficou so a nota: nao devolver a animacao por CSS, porque ela
   depende de transform-box e some no Safari antigo. */

/* Os blips acendem em sequencia, como se o cone os tivesse encontrado. */
.isp-radar__blip {
	animation: isp-radar-blip 6s ease-in-out infinite;
}

/* Cada atraso e o instante em que o cone passa por aquele conector.
   Angulo do blip em torno do centro do prato (300,258), medido do topo no
   sentido horario, menos os 90 graus da borda dianteira do cone, sobre a
   volta de 6s:  atraso = ((angulo - 90) mod 360) / 360 * 6s.
   blip 1 (34,109) 299.3 deg · 2 (567,109) 60.8 · 3 (34,406) 240.9 ·
   4 (567,406) 119.0 · 5 (300,542) 180.0 */
#isp-radar-blip-1 { animation-delay: 3.49s; }
#isp-radar-blip-2 { animation-delay: 5.51s; }
#isp-radar-blip-3 { animation-delay: 2.52s; }
#isp-radar-blip-4 { animation-delay: 0.48s; }
#isp-radar-blip-5 { animation-delay: 1.50s; }

@keyframes isp-radar-blip {
	0%, 70%, 100% {
		opacity: 0.22;
	}
	8% {
		opacity: 0.75;
	}
	30% {
		opacity: 0.35;
	}
}

/* Quem pede menos movimento no sistema: os blips param pelo CSS; a
   varredura, que agora e SMIL, e pausada pelo isp.js — "animation: none"
   nao alcanca animacao de SVG. */
@media (prefers-reduced-motion: reduce) {
	.isp-radar__blip {
		animation: none;
	}
}

/* Pedido do cliente (26/08/2026): o simbolo no centro do radar ficou
   pequeno. Cresceu 30% mantendo o centro exatamente sobre o centro do prato
   (300, 258 no sistema do SVG) — por isso o topo e a esquerda mudam junto. */
.isp-metodo__simbolo {
	position: absolute;
	top: 181.3px;
	left: 230.79px;
	width: 138.415px;
	height: 153.4px;
}

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

/* ---------- Cards ---------- */
.isp-metodo__card {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 374px;
	height: 218px;
	padding: 24px;
	border: 1px solid rgba(97, 97, 249, 0);
	border-radius: 20px;
	/* A conversão automática do degradê do Figma (232deg, azul de 58.9% a
	   93.8%) deixa o card 8x mais azul do que ele é no arquivo: coloca o
	   platô de cor sobre o card em vez da parte que desvanece. Estas paradas
	   foram ajustadas aos pixels do render — canto superior direito no azul
	   mais forte, inferior esquerdo transparente. */
	background-image: linear-gradient(45deg, rgba(17, 17, 245, 0) 24.6%, rgba(17, 17, 245, 0.42) 201.2%);
}

.isp-metodo__card--discovery   { top: 0;     left: 0; }
.isp-metodo__card--governanca  { top: 297px; left: 0; }
.isp-metodo__card--outsourcing { top: 542px; left: 453px; }
.isp-metodo__card--roi         { top: 297px; left: 907px; width: 373px; }
.isp-metodo__card--automacao   { top: 0;     left: 907px; }

.isp-metodo__ico {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

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

.isp-metodo__card h3 {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 20px;
	line-height: 20.473px;
	font-weight: 400;
	color: #ffffff;
}

.isp-metodo__card p {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: rgba(248, 249, 250, 0.6);
}

/* =========================================================================
   RESPONSIVO
   O arranjo em volta do radar so faz sentido no desktop. Abaixo de 1280 os
   cards viram uma grade e o radar entra no meio, na largura disponivel.
   ========================================================================= */

@media (max-width: 1340px) {
	.isp-metodo__radar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		width: 100%;
		height: auto;
	}

	.isp-metodo__card {
		position: static;
		width: auto;
		height: auto;
		min-height: 218px;
	}

	/* relative, e nao static: o simbolo do centro e filho DESTE elemento e
	   se posiciona em porcentagem. Com o grafico estatico, quem virava a
	   referencia era .isp-metodo__radar — que aqui e a grade inteira, com
	   a altura dos cinco cards. As mesmas porcentagens viravam entao uma
	   lasca de centenas de pixels atravessada por cima dos cards, que foi
	   o que o cliente fotografou no celular em 28/08/2026. */
	.isp-metodo__grafico {
		position: relative;
		/* Obrigatorio junto com o relative: o bloco de cima posiciona este
		   elemento em left:340px enquanto ele e absoluto. Com relative esse
		   mesmo left vira DESLOCAMENTO, e o radar sai 340px para a direita,
		   metade dele fora da tela. */
		inset: auto;
		order: -1;
		grid-column: 1 / -1;
		width: min(620px, 100%);
		height: auto;
		aspect-ratio: 620 / 580;
		margin-inline: auto;
	}

	/* Com o radar fora do fluxo absoluto, o simbolo acompanha em porcentagem. */
	.isp-metodo__simbolo {
		top: 31.26%;
		left: 37.22%;
		width: 22.33%;
		height: 26.45%;
	}
}

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

	.isp-metodo__titulo .elementor-heading-title {
		font-size: 38px;
		line-height: 44px;
	}
}

/* =========================================================================
   METODO ISP 360 NO CELULAR — Figma "04 MÉTODO ISP 360" (390x1957)

   Regua: 64 | topo 212 | 12 | radar 320 | 12 | seta 34 | 12 | card 199 |
          … (seta + card se repetem 5 vezes) … | 64

   Os cinco cards viram uma coluna unica, ligados por uma seta que aponta
   para baixo — a leitura do metodo passa a ser sequencial, que e o que o
   cliente pediu ao ver o radar no celular. A seta nao existe no HTML: ela
   e desenhada em ::before de cada card, entao o desktop nao muda.

   O card e o MESMO do quadro de 1440 a 91,44% (374 de largura viram 342).
   Como no comparativo, a reducao vem de zoom em vez de vinte medidas
   reescritas — e o proprio Figma so tem ali um clone reduzido.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-metodo {
		gap: 12px;
		padding-block: 64px;
	}

	/* O brilho da base e uma elipse desenhada para um quadro de 1440 e presa
	   a essa largura; em 390 ela vira uma mancha azul que toma o pe da
	   seção inteiro. No arquivo de 390 o fundo e chapado (#03030a) e a unica
	   luz vem do proprio radar. */
	.isp-metodo__brilho {
		display: none;
	}

	/* A grade de pontos e desenhada para o quadro de 1440 e, em 390, vira um
	   quadriculado visivel atras do radar. No arquivo de 390 o fundo da
	   seção e chapado. */
	.isp-metodo__fundo {
		display: none;
	}

	/* O SVG do radar nasce com overflow visivel, e os conectores e os blips
	   das pontas passam da caixa de 620x580 — em 390 eles apareciam
	   cruzando a seção ate os cantos. No arquivo eles sao cortados pela
	   caixa, entao aqui o corte volta. */
	.isp-metodo__grafico,
	.isp-radar {
		overflow: hidden;
	}

	/* Os conectores dos cantos ligam o radar aos quatro cards que, no quadro
	   de 1440, ficam em volta dele. Em 390 os cards estao empilhados abaixo
	   e essas quatro diagonais saem do prato apontando para o vazio — no
	   arquivo de 390 elas nao existem, so a haste de baixo, que aponta para
	   o primeiro card da pilha.

	   O recorte e a forma do PRATO mais essa haste. Um simples overflow nao
	   resolve (os conectores estao dentro da caixa de 620x580) e esconder
	   os blips por id tambem nao (as pontas sao paths proprios, sem id). O
	   poligono abaixo e um circulo de raio 206 no centro do prato, aberto
	   embaixo numa fresta de 2,4% para a haste passar. */
	.isp-metodo__grafico {
		clip-path: polygon(51.28% 79.86%, 56.99% 78.79%, 62.43% 76.67%, 67.44% 73.58%, 71.88% 69.60%, 75.60% 64.85%, 78.50% 59.49%, 80.48% 53.68%, 81.49% 47.58%, 81.49% 41.39%, 80.48% 35.29%, 78.50% 29.47%, 75.60% 24.11%, 71.88% 19.37%, 67.44% 15.39%, 62.43% 12.29%, 56.99% 10.18%, 51.28% 9.10%, 45.49% 9.10%, 39.79% 10.18%, 34.35% 12.29%, 29.33% 15.39%, 24.89% 19.37%, 21.17% 24.11%, 18.27% 29.47%, 16.29% 35.29%, 15.29% 41.39%, 15.29% 47.58%, 16.29% 53.68%, 18.27% 59.49%, 21.17% 64.85%, 24.89% 69.60%, 29.33% 73.58%, 34.35% 76.67%, 39.79% 78.79%, 45.49% 79.86%, 47.19% 100%, 49.59% 100%);
	}

	#isp-radar-blip-1,
	#isp-radar-blip-2,
	#isp-radar-blip-3,
	#isp-radar-blip-4 {
		display: none;
	}

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

	.isp-metodo__eyebrow .elementor-heading-title {
		max-width: 100%;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 1.6px;
	}

	.isp-metodo__titulo .elementor-heading-title {
		font-size: 28px;
		line-height: 34px;
	}

	#isp-metodo-topo .isp-metodo__lead {
		max-width: 100%;
		font-family: var(--isp-fonte-corpo);
		font-size: 14px;
		line-height: 22px;
	}

	/* Uma coluna so. O vao de 58 e a soma do desenho: 12 de respiro, 34 da
	   seta e mais 12 — a seta fica exatamente no meio do intervalo. */
	.isp-metodo__radar {
		grid-template-columns: minmax(0, 1fr);
		gap: 58px;
	}

	/* O prato nao esta no meio do SVG: o centro dele fica em x=300 de um
	   viewBox de 620, ou seja 48,39%. Com a caixa centralizada, o circulo
	   (e a haste que aponta para o primeiro card) saiam 5,5px a esquerda
	   do centro da coluna. O deslocamento devolve os dois ao eixo. */
	.isp-metodo__grafico {
		width: 100%;
		transform: translateX(5.5px);
	}

	/* relative (e nao static) porque a seta e um ::before ancorado no card.
	   O inset: auto e obrigatorio junto: cada card guarda o top/left do
	   arranjo de 1440 (--outsourcing tem top:542 left:453) e, em relative,
	   esses valores voltam a valer como DESLOCAMENTO — tres cards se
	   empilhavam um sobre o outro no pe da seção. */
	/* Sem zoom, pelo mesmo motivo do comparativo (o Safari do iPhone nao
	   reduz o texto junto). Os valores sao os do quadro de 1440 a 91,44%,
	   que e a reducao de 374 para 342. */
	.isp-metodo__card {
		position: relative;
		inset: auto;
		width: 100%;
		height: 199.3px;
		min-height: 0;
		gap: 21.95px;
		padding: 21.95px;
		border-radius: 18.29px;
	}

	.isp-metodo__ico {
		flex: 0 0 21.95px;
		width: 21.95px;
		height: 21.95px;
	}

	.isp-metodo__card h3 {
		font-size: 18.29px;
		line-height: 18.72px;
	}

	.isp-metodo__card p {
		font-size: 14.63px;
		line-height: 21.95px;
	}

	/* A seta: haste de 1x18 e ponta de 10x8, ambas centradas, ocupando os
	   34px logo acima do card (12 de respiro + 34 da seta = -46). */
	.isp-metodo__card::before {
		content: "";
		position: absolute;
		top: -46px;
		left: 50%;
		width: 10px;
		height: 34px;
		transform: translateX(-50%);
		background-repeat: no-repeat;
		background-position: center top, center bottom;
		background-size: 1px 18px, 10px 8px;
		background-image:
			linear-gradient(rgba(5, 60, 250, 0.55), rgba(5, 60, 250, 0.55)),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%23053CFA' d='M5 8 0 0h10z'/%3E%3C/svg%3E");
	}
}