/* =========================================================================
   NOSSAS SOLUCOES
   Figma: Frame 467 (956:513) — faixa y 5388–7493 (2105 de altura).
   O quadro tem as coordenadas do arquivo (1440 de largura); cada bloco de
   texto e cada painel entram na posicao exata. O fundo (degrades e brilhos
   dos quatro cards) e o recorte do proprio render, com as areas de texto
   reconstruidas — ver isp_recortar_fundo em uploads/isp-build.
   ========================================================================= */

#isp-solucoes {
	position: relative;
	display: block;
	padding: 0;
	background-color: var(--isp-preto);
	color: var(--isp-branco);
	overflow: hidden;
}

#isp-solucoes-quadro {
	position: relative;
	display: block;
	width: 1440px;
	max-width: 100%;
	height: 2105px;
	margin-inline: auto;
	padding: 0;
	/* O background-image vem de isp_fundos_de_secao(), no functions.php:
	   ele depende de uma URL do banco e por isso nao pode morar aqui. */
}

/* Todo bloco de conteudo e posicionado no quadro pelas coordenadas do Figma. */
#isp-solucoes-quadro > .e-con,
#isp-solucoes-quadro > .elementor-widget {
	position: absolute;
	margin: 0;
	padding: 0;
}

#isp-solucoes-quadro > .e-con > .elementor-widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ---------- Cabecalho ---------- */
#isp-solucoes-topo {
	left: 347px;
	top: 121px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 42px;
	width: 726px;
	text-align: center;
}

.isp-solucoes__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	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-solucoes__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	width: 1043px;
	max-width: none;
	margin-inline: -158.5px;
	font-family: var(--isp-fonte-titulo);
	font-size: 46px;
	line-height: 52px;
	font-weight: 400;
	color: #ffffff;
}

#isp-solucoes-topo .isp-solucoes__lead {
	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;
	color: rgba(248, 249, 250, 0.6);
}

.isp-solucoes__lead p {
	margin: 0;
}

/* ---------- Blocos de texto dos quatro cards ---------- */
/* As regras comuns moram nos ids, e nao numa classe: _css_classes nao sai no
   HTML de container nesta versao do Elementor, entao uma classe aqui morre
   em silencio e os blocos nascem sem largura. */
#isp-sol-discovery,
#isp-sol-governanca,
#isp-sol-outsourcing,
#isp-sol-roi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 492px;
}

/* Cards largos (Discovery e ROI): no arquivo cada peca tem um top proprio
   (0 / 44 / 94 / 194) dentro do bloco, e nao um empilhamento com gap. */
#isp-sol-discovery { left: 113px; top: 480px; height: 246px; display: block; }
#isp-sol-roi       { left: 113px; top: 1644px; height: 274px; display: block; }

#isp-sol-discovery > .elementor-widget,
#isp-sol-roi > .elementor-widget {
	position: absolute;
	left: 0;
	width: 100%;
}

#isp-sol-discovery > .elementor-widget:nth-child(1),
#isp-sol-roi > .elementor-widget:nth-child(1) { top: 0; }

#isp-sol-discovery > .elementor-widget:nth-child(2),
#isp-sol-roi > .elementor-widget:nth-child(2) { top: 44px; }

#isp-sol-discovery > .elementor-widget:nth-child(3),
#isp-sol-roi > .elementor-widget:nth-child(3) { top: 94px; }

#isp-sol-discovery > .elementor-widget:nth-child(4) { top: 194px; width: auto; }
#isp-sol-roi > .elementor-widget:nth-child(4)       { top: 222px; width: auto; }

/* Cards altos (Governanca e Outsourcing): pilha com gap 32, ancorada embaixo. */
#isp-sol-governanca  { left: 113px; top: 1189px; height: 338px; gap: 32px; justify-content: flex-end; }
#isp-sol-outsourcing { left: 760px; top: 1214px; height: 310px; gap: 32px; justify-content: flex-end; }

.isp-solucao__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	text-transform: uppercase;
	color: #d2d6e3;
}

/* Titulo com o mesmo recorte de degrade do hero, so que mais fechado. */
.isp-solucao__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 28px;
	line-height: 58px;
	font-weight: 400;
	background-image: linear-gradient(174.32747933130125deg, rgb(255, 255, 255) 33.276%, rgb(153, 153, 153) 103.28%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Mesma correcao de .isp-degrade em 01-base.css: sem isto a descida do
	   "g" de "Diagnostico" e do "p" de "Operacional" fica sem tinta. */
	padding-bottom: 0.25em;
	margin-bottom: -0.25em;
}

/* Nos cards altos o titulo tem duas linhas e entrelinha menor. */
#isp-sol-governanca .isp-solucao__titulo .elementor-heading-title,
#isp-sol-outsourcing .isp-solucao__titulo .elementor-heading-title {
	line-height: 36px;
	background-image: linear-gradient(163.40664177910332deg, rgb(255, 255, 255) 33.276%, rgb(153, 153, 153) 103.28%);
}

/* O aparo vai no bloco, nunca em cada <p>: no Outsourcing o texto tem dois
   parágrafos e, aparados um a um, eles se sobrepõem. */
.isp-solucao__texto {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
}

.isp-solucao__texto p {
	margin: 0;
}

/* No Outsourcing o paragrafo é mais estreito que o bloco. */
#isp-sol-outsourcing .isp-solucao__texto {
	width: 447px;
	max-width: 100%;
}

/* ---------- Paineis de indicadores ---------- */
.isp-paineis {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.isp-painel {
	position: absolute;
	display: block;
}

.isp-painel img {
	display: block;
	width: 100%;
	height: 100%;
	/* O recorte tem a proporcao exata do lugar; 'fill' evita o letterbox
	   de arredondamento que o 'contain' introduziria. */
	object-fit: fill;
}

/* =========================================================================
   RESPONSIVO
   Abaixo de 1440 a composicao absoluta nao cabe: o quadro vira uma pilha,
   cada card com o seu painel em cima do texto. O fundo composto sai de cena
   (ele so faz sentido no arranjo do desktop) e cada card ganha o degrade.
   ========================================================================= */

@media (max-width: 1439px) {
	#isp-solucoes {
		padding: 96px var(--isp-margem);
	}

	#isp-solucoes-quadro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 64px;
		width: 100%;
		max-width: var(--isp-largura);
		height: auto;
	}

	#isp-solucoes-quadro > .e-con,
	#isp-solucoes-quadro > .elementor-widget {
		position: static;
	}

	#isp-solucoes-topo {
		width: 100%;
		max-width: 726px;
	}

	.isp-solucoes__titulo .elementor-heading-title {
		width: auto;
		margin-inline: 0;
	}

	#isp-sol-discovery,
	#isp-sol-governanca,
	#isp-sol-outsourcing,
	#isp-sol-roi {
		display: flex;
		width: 100%;
		max-width: 620px;
		height: auto;
		gap: 20px;
	}

	/* Os cards largos voltam ao fluxo: fora do desktop nao ha top fixo. */
	#isp-sol-discovery > .elementor-widget,
	#isp-sol-roi > .elementor-widget {
		position: static;
		top: auto;
		width: 100%;
	}

	/* Os paineis reentram no fluxo, um sob o outro, na largura disponivel. */
	.isp-paineis {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
		width: 100%;
	}

	.isp-painel {
		position: static !important;
		width: auto !important;
		height: auto !important;
		max-width: 100%;
	}

	.isp-painel img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/* =========================================================================
   NOSSAS SOLUCOES NO CELULAR — Figma "06 NOSSAS SOLUÇÕES" (390x2779)

   Regua: 64 | topo 246 | 16 | respiro 12 | 16 | discovery 552 | 16 |
          governanca 558 | 16 | outsourcing 632 | 16 | roi 571 | 64

   Cada bloco de texto vira um CARD fechado: caixa de 342 com raio 20, fio
   #6161f9 a 28%, degrade proprio, e o painel de indicadores no topo. O
   painel entra como ::before — a URL da imagem vem do banco, entao a regra
   e emitida por isp_paineis_no_celular() no functions.php. A camada solta
   .isp-paineis, que no desktop flutua sobre o quadro, some aqui.

   O botao destes cards e menor que o das seções (36 contra 42,6), como no
   arquivo: rotulo de 11,12 e disco de 24,9.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-solucoes {
		padding-block: 64px;
	}

	#isp-solucoes-quadro {
		gap: 16px;
	}

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

	.isp-solucoes__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 1.6px;
	}

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

	#isp-solucoes-topo .isp-solucoes__lead {
		font-size: 14px;
		line-height: 22px;
	}

	/* ---------- Os quatro cards ---------- */
	/* O seletor precisa do pai: "#isp-solucoes-quadro > .e-con" la em cima
	   zera o padding de todo card e, sendo id+classe, ganha de um id
	   sozinho. Com o pai no seletor sao dois ids e a regra vale. */
	#isp-solucoes-quadro > #isp-sol-discovery,
	#isp-solucoes-quadro > #isp-sol-governanca,
	#isp-solucoes-quadro > #isp-sol-outsourcing,
	#isp-solucoes-quadro > #isp-sol-roi {
		gap: 14px;
		width: 100%;
		max-width: none;
		padding: 16px 16px 20px;
		/* O fio vai por sombra interna, e nao por border: com 1px de borda a
		   caixa de conteudo fica com 308 e o painel, que tem 310 no arquivo,
		   encostava na margem direita e saia cortado. Sem borda o conteudo
		   mede 342 - 32 = 310 exatos. */
		border: 0;
		border-radius: 20px;
		box-shadow: inset 0 0 0 1px rgba(97, 97, 249, 0.28);
		/* O degrade do arquivo tem a matriz [[0.62,0.78],[-0.78,0.62]], que
		   num quadro NORMALIZADO daria 141,5deg. O Figma calcula o degrade
		   na caixa normalizada e o CSS calcula em pixels, entao o angulo
		   precisa da proporcao do card (342x552): 154deg. Com 141,5 o azul
		   demorava a escurecer e a metade direita saia clara demais. */
		/* Duas camadas: o halo azul que o desktop tem em volta do painel (sem
		   ele o recorte, que ja traz esse brilho, aparece como um retangulo
		   colado no card) e o degrade do arquivo por baixo. O angulo de 154
		   vem da matriz do Figma corrigida pela proporcao do card. */
		background-image:
			radial-gradient(115% 42% at 50% 20%,
				rgba(78, 84, 236, 0.55) 0%,
				rgba(38, 42, 170, 0.34) 45%,
				rgba(12, 16, 70, 0.12) 72%,
				rgba(0, 0, 0, 0) 100%),
			linear-gradient(154deg, #161c8c 0%, #080c37 52%, #030412 100%);
		justify-content: flex-start;
	}

	.isp-solucao__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		font-weight: 500;
		letter-spacing: 1.2px;
	}

	/* Sem o degrade recortado: no arquivo de 390 o titulo do card e branco
	   solido. Em 310 de largura o degrade chegava ao cinza na segunda
	   linha e "Estruturação e Automação de Processos" terminava apagado. */
	.isp-solucao__titulo .elementor-heading-title,
	#isp-sol-governanca .isp-solucao__titulo .elementor-heading-title,
	#isp-sol-outsourcing .isp-solucao__titulo .elementor-heading-title {
		font-size: 22px;
		line-height: 28px;
		background-image: none;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: #ffffff;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.isp-solucao__texto,
	#isp-sol-outsourcing .isp-solucao__texto {
		width: 100%;
		font-size: 14px;
		line-height: 22px;
		color: rgba(255, 255, 255, 0.85);
	}

	/* Nada de fundo proprio para a Governança: no arquivo os quatro cards
	   tem exatamente o mesmo degrade (de 20,26,133 no topo a 4,7,35 no pe).
	   As chips daquele painel sao escuras no Figma tambem — o que fazia
	   elas parecerem pretas era o card, nao a arte. Clarear a imagem e o
	   halo do card em cima disso virava um bloco lilas, que nao existe em
	   lugar nenhum do desenho. */

	/* O botao do card: 36 de altura, ante os 42,6 dos CTAs de seção. */
	#isp-solucoes .isp-btn {
		min-height: 0;
		gap: 6.94px;
		padding: 5.31px 5.31px 5.31px 16.31px;
		border-width: 0.69px;
		font-size: 11.12px;
		line-height: 18.06px;
	}

	#isp-solucoes .isp-btn__ico {
		width: 24.94px;
		height: 24.94px;
		flex: 0 0 24.94px;
	}

	#isp-solucoes .isp-btn__ico svg {
		width: 20px;
		height: 20px;
	}

	/* A camada de paineis do desktop sai: no celular cada card carrega o
	   seu, pelo ::before emitido no functions.php. */
	.isp-paineis {
		display: none;
	}
}