/* =========================================================================
   POR QUE A ISP LEADERS E DIFERENTE
   Figma: Frame 6 (956:165) — y 1409–2441, fundo #040404, py 120, gap 60.
   ========================================================================= */

#isp-diferente {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
	padding: 120px var(--isp-margem);
	background-color: #040404;
	color: var(--isp-branco);
	overflow: hidden;
}

/* ---------- Cabecalho ---------- */
#isp-diferente-topo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 42px;
	width: 898px;
	max-width: 100%;
	padding: 0;
	text-align: center;
}

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

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

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

/* O aparo vai no BLOCO, nunca em cada <p>: aplicado parágrafo a parágrafo,
   ele encolhe cada caixa até a altura da maiúscula e os parágrafos vizinhos
   passam a se sobrepor. No bloco, ele apara só a primeira e a última linha. */
#isp-diferente-topo .isp-diferente__lead {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	max-width: 818px;
	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-diferente__lead p {
	margin: 0;
}

/* ---------- Comparativo ---------- */
/* O par de cards e mais largo (1009.97) que a coluna de texto e sangra dos
   dois lados; no arquivo ele fica centralizado no quadro de 1440. */
/* Pedido do cliente (26/08/2026): os dois cards com o mesmo tamanho e
   alinhados. No arquivo o card preto tem 374 e encosta no topo, e o azul
   tem 397 e fica centralizado na faixa — o desencontro de 23px na altura e
   de 11 no topo era visivel. Agora os dois medem 397 e comecam juntos. */
.isp-comparativo {
	display: flex;
	align-items: stretch;
	width: 1009.97px;
	max-width: 100%;
	height: 397px;
}

.isp-comparativo__card {
	display: flex;
	flex-direction: column;
	width: 485px;
	height: 100%;
	border-radius: 14.64px;
	overflow: hidden;
}

.isp-comparativo__card--tradicional {
	background-color: var(--isp-chumbo);
}

.isp-comparativo__card--isp {
	margin-left: 39.97px;
	box-shadow: 0 4.504px 10.81px 0 rgba(0, 0, 0, 0.25);
}

.isp-comparativo__cabeca {
	padding: 22.522px 22.522px 23.472px;
	border-bottom: 0.95px solid var(--isp-linha);
	background-color: var(--isp-chumbo);
}

.isp-comparativo__card--isp .isp-comparativo__cabeca {
	background-color: transparent;
	background-image: linear-gradient(-31.970195754073814deg, rgb(1, 33, 142) 29.555%, rgb(5, 60, 250) 100.92%);
}

.isp-comparativo__cabeca h3,
.isp-comparativo__cabeca .elementor-heading-title,
.isp-comparativo__cabeca .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	padding-top: 3.801px;
	font-family: var(--isp-fonte-titulo);
	font-size: 27.026px;
	line-height: 26.604px;
	font-weight: 500;
	color: rgba(221, 220, 220, 0.8);
}

.isp-comparativo__card--isp .isp-comparativo__cabeca h3,
.isp-comparativo__card--isp .isp-comparativo__cabeca .elementor-heading-title,
.isp-comparativo__card--isp .isp-comparativo__cabeca .elementor-heading-title {
	color: #ffffff;
}

.isp-comparativo__corpo {
	flex: 1 1 auto;
	padding: 19.003px 30.404px;
	background-color: var(--isp-chumbo);
}

.isp-comparativo__card--isp .isp-comparativo__corpo {
	background-color: transparent;
	background-image: linear-gradient(-71.36105599914617deg, rgb(1, 33, 142) 29.555%, rgb(5, 60, 250) 100.92%);
}

.isp-comparativo__lista {
	display: flex;
	flex-direction: column;
	gap: 18.017px;
	margin: 0;
	padding-top: 4.407px;
	list-style: none;
}

.isp-comparativo__lista li ,
.isp-comparativo__lista .isp-comparativo__item  {
	display: flex;
	align-items: center;
	gap: 13.222px;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 18.017px;
	line-height: 22.037px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
}

.isp-comparativo__card--isp .isp-comparativo__lista li ,
.isp-comparativo__card--isp .isp-comparativo__lista .isp-comparativo__item  {
	line-height: 23.055px;
	color: #ffffff;
}

/* O divisor so existe no card da ISP, entre um item e o seguinte. */
.isp-comparativo__lista li.isp-comparativo__linha,
.isp-comparativo__lista .isp-comparativo__linha {
	display: block;
	height: 1px;
	padding: 0;
	background-color: var(--isp-linha);
}

/* Encaixes da conversao para widgets nativos:
   - todo container do Elementor nasce com 10px de recuo, e nenhuma dessas
     caixas tinha recuo como <div>/<ul>/<li>;
   - largura, altura e flex sao escritos pelo Elementor em ".e-con.e-flex",
     que pesa (0,2,0); o ".e-con" no seletor so empata esse peso;
   - o widget de titulo impoe cor e tipografia do kit, e aqui elas sao do
     proprio item. */
.isp-comparativo.e-con,
.isp-comparativo__card.e-con {
	padding: 0;
}

/* A cabeca e o corpo do card ficam colados, como no arquivo: o vao de 20px
   que o container do Elementor traz de fabrica somava 20 na altura de cada
   card. */
.isp-comparativo__card.e-con {
	gap: 0;
}

.isp-comparativo__card.e-con {
	width: 485px;
	height: 100%;
	flex: 0 0 485px;
}

.isp-comparativo__corpo.e-con {
	flex: 1 1 auto;
}

.isp-comparativo__lista.e-con {
	padding: 4.407px 0 0;
}

.isp-comparativo__item.e-con {
	padding: 0;
}

.isp-comparativo__item .elementor-heading-title {
	font: inherit;
	color: inherit;
}

.isp-comparativo__ico {
	flex: 0 0 27.026px;
	width: 27.026px;
	height: 27.026px;
}

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

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 1100px) {
	.isp-comparativo {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
		height: auto;
	}

	/* Os pares com .e-con desfazem, abaixo de 1100, os empates de peso que
	   a versao de 1440 precisa ter (ver o bloco base): sem eles os cards
	   ficavam presos nos 485px do desktop e a peça saia deitada no
	   celular, com os dois cards estourando a tela. */
	.isp-comparativo.e-con {
		flex-direction: column;
	}

	.isp-comparativo__card.e-con {
		width: 100%;
		height: auto;
		flex: 0 0 auto;
	}

	.isp-comparativo__card,
	.isp-comparativo__card--tradicional,
	.isp-comparativo__card--isp {
		width: 100%;
		max-width: 485px;
		height: auto;
		align-self: center;
		margin-left: 0;
	}
}

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

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

/* =========================================================================
   POR QUE SOMOS DIFERENTES NO CELULAR
   Figma "03 POR QUE SOMOS DIFERENTES" (390x1054)

   Regua: 64 | topo 312 | 20 | painel tradicional 229 | 20 | painel ISP 282
          | 20 | CTA 42,6 | 64

   Os dois paineis sao, no arquivo de 390, o MESMO card do quadro de 1440
   reduzido: 485 de largura viram 342, ou seja 70,5%. Em vez de reescrever
   as vinte medidas internas ja reduzidas (cabeca, icone, entrelinha, fio
   divisor…), o card e desenhado no tamanho de origem e encolhido com zoom
   — que, ao contrario do transform, entra no calculo do arranjo, entao a
   altura do bloco continua certa. E o mesmo que o Figma faz com o clone.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-diferente {
		gap: 20px;
		padding-block: 64px;
	}

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

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

	.isp-diferente__titulo .elementor-heading-title {
		max-width: 100%;
		font-size: 28px;
		line-height: 34px;
	}

	/* O seletor carrega o id de proposito: a regra base tambem o carrega
	   (#isp-diferente-topo .isp-diferente__lead) e uma classe sozinha
	   perderia. No arquivo de 390 este apoio muda de familia — sai a Nata
	   Sans do titulo e entra a Plus Jakarta do corpo. */
	#isp-diferente-topo .isp-diferente__lead {
		max-width: 100%;
		font-family: var(--isp-fonte-corpo);
		font-size: 14px;
		line-height: 22px;
	}

	/* A seção e uma coluna com align-items:center, e por isso os filhos
	   encolhem para o tamanho do conteudo em vez de esticar: o comparativo
	   nascia com 293 em vez dos 342 do arquivo ("a sessão de comparativos
	   esta pequena"). O widget do shortcode precisa esticar junto. */
	#isp-diferente > .elementor-widget,
	#isp-diferente > .elementor-widget > .elementor-widget-container,
	#isp-diferente > .elementor-widget .elementor-shortcode {
		width: 100%;
	}

	/* O botao fica de fora do width:100% acima: a seção centraliza os
	   filhos com align-items, e um filho esticado joga a pilula (que e
	   inline-flex) para a esquerda da caixa. */
	#isp-diferente > .elementor-widget-button {
		width: auto;
	}

	.isp-comparativo {
		gap: 20px;
		width: 100%;
	}

	/* As medidas vao escritas uma a uma, e nao por zoom.
	   O zoom fecha a conta no Chrome, mas no Safari do iPhone ele nao
	   reduz o texto junto com a caixa: o card saia com 342 de largura e a
	   tipografia do desktop dentro, e os itens da lista quebravam em duas
	   linhas por cima do icone. Cada valor abaixo e o do quadro de 1440
	   multiplicado por 0,70515 (485 -> 342), que e a reducao do arquivo. */
	.isp-comparativo__card,
	.isp-comparativo__card--tradicional,
	.isp-comparativo__card--isp {
		width: 100%;
		max-width: none;
		border-radius: 10.32px;
	}

	.isp-comparativo__cabeca {
		padding: 15.88px 15.88px 16.55px;
		border-bottom-width: 0.67px;
	}

	.isp-comparativo__cabeca h3,
	.isp-comparativo__cabeca .elementor-heading-title {
		padding-top: 2.68px;
		font-size: 19.06px;
		line-height: 18.76px;
	}

	.isp-comparativo__corpo {
		padding: 13.4px 21.44px;
	}

	.isp-comparativo__lista {
		gap: 12.7px;
		padding-top: 3.11px;
	}

	.isp-comparativo__lista li ,
	.isp-comparativo__lista .isp-comparativo__item  {
		gap: 9.32px;
		font-size: 12.7px;
		line-height: 15.54px;
	}

	.isp-comparativo__card--isp .isp-comparativo__lista li ,
	.isp-comparativo__card--isp .isp-comparativo__lista .isp-comparativo__item  {
		line-height: 16.26px;
	}

	.isp-comparativo__ico {
		flex: 0 0 19.06px;
		width: 19.06px;
		height: 19.06px;
	}
}