/* =========================================================================
   O PROBLEMA QUE NINGUEM RESOLVE
   Figma: faixa clara y 798–1408 (Frame 428 956:39, 1441x610) +
   foto 956:964 (x -93, y 782, 869x626) + Content 956:50 (x 746, 620 largo).
   ========================================================================= */

#isp-problema {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background-color: var(--isp-branco);
	color: var(--isp-chumbo);
	overflow: hidden;
}

/* ---------- Arte: simbolo azul + foto do gestor ---------- */
/* As pecas sao posicionadas nas coordenadas do quadro de 1440 do Figma,
   entao a camada e um quadro de 1440 centralizado — e nao a largura da
   janela. Assim a foto guarda a mesma relacao com o texto em qualquer tela. */
#isp-problema-arte {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 1440px;
	height: 100%;
	transform: translateX(-50%);
	overflow: hidden;
	pointer-events: none;
}

/* O simbolo entra espelhado na vertical, como esta no arquivo. */
.isp-problema__simbolo {
	position: absolute;
	top: 120px;
	left: 136px;
	width: 529.268px;
	height: 586.569px;
	transform: scaleY(-1);
}

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

/* A foto sangra 93px pela esquerda e comeca 16px acima da faixa. */
.isp-problema__foto {
	position: absolute;
	top: -16px;
	left: -93px;
	width: 869px;
	height: 626px;
	overflow: hidden;
}

/* A imagem nao preenche a moldura: entra deslocada, como no Figma. */
.isp-problema__foto img {
	position: absolute;
	top: 2.49%;
	left: 7.33%;
	width: 96.36%;
	height: 100.32%;
	max-width: none;
	object-fit: contain;
}

/* ---------- Coluna de texto ---------- */
#isp-problema-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: calc(var(--isp-largura) + var(--isp-margem) * 2);
	min-height: 610px;
	margin-inline: auto;
	padding: 0 var(--isp-margem);
}

#isp-problema-conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	align-self: flex-end;
	gap: 40px;
	width: 620px;
	max-width: 100%;
	padding: 0;
	/* No arquivo a coluna comeca em x=746 e termina em 1366 — 6px alem da
	   grade de 1280. O recuo negativo devolve esses 6px. */
	margin-right: -6px;
	/* O bloco fica 14px abaixo do centro exato da faixa. */
	margin-top: 28px;
}

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

.isp-problema__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: rgba(13, 13, 13, 0.6);
}

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

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

/* ---------- Lista com o X azul ---------- */
.isp-lista-x ul,
ul.isp-lista-x {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isp-lista-x li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: rgba(13, 13, 13, 0.8);
}

/* O X vem como fundo em data URI: sem requisicao extra e sem markup a mais
   dentro do editor, entao o cliente edita o texto sem esbarrar no icone. */
.isp-lista-x li::before {
	content: "";
	/* 26 e nao 20: pedido do cliente em 01/09/2026 ("colocar um destaque
	   maior nos X ali"). O desenho e o mesmo — so a caixa cresce, e como o
	   X e um vetor ele engrossa junto. O disco de fundo da o peso que
	   faltava sem escurecer o texto ao lado. */
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background-color: rgba(5, 60, 250, 0.08);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23053CFA' d='M6.6 5.275C6.42228 5.1094 6.18722 5.01925 5.94435 5.02353C5.70147 5.02782 5.46974 5.12621 5.29797 5.29797C5.12621 5.46974 5.02782 5.70147 5.02353 5.94435C5.01925 6.18722 5.1094 6.42228 5.275 6.6L8.675 10L5.275 13.4C5.18289 13.4858 5.10901 13.5893 5.05777 13.7043C5.00653 13.8193 4.97898 13.9435 4.97676 14.0693C4.97454 14.1952 4.9977 14.3203 5.04485 14.437C5.092 14.5537 5.16218 14.6598 5.2512 14.7488C5.34023 14.8378 5.44627 14.908 5.563 14.9552C5.67974 15.0023 5.80477 15.0255 5.93065 15.0232C6.05653 15.021 6.18067 14.9935 6.29567 14.9422C6.41067 14.891 6.51417 14.8171 6.6 14.725L10 11.325L13.4 14.725C13.4858 14.8171 13.5893 14.891 13.7043 14.9422C13.8193 14.9935 13.9435 15.021 14.0693 15.0232C14.1952 15.0255 14.3203 15.0023 14.437 14.9552C14.5537 14.908 14.6598 14.8378 14.7488 14.7488C14.8378 14.6598 14.908 14.5537 14.9552 14.437C15.0023 14.3203 15.0255 14.1952 15.0232 14.0693C15.021 13.9435 14.9935 13.8193 14.9422 13.7043C14.891 13.5893 14.8171 13.4858 14.725 13.4L11.325 10L14.725 6.6C14.8906 6.42228 14.9808 6.18722 14.9765 5.94435C14.9722 5.70147 14.8738 5.46974 14.702 5.29797C14.5303 5.12621 14.2985 5.02782 14.0557 5.02353C13.8128 5.01925 13.5777 5.1094 13.4 5.275L10 8.675L6.6 5.275Z'/%3E%3C/svg%3E");
}

.isp-lista-x li p {
	margin: 0;
	max-width: 530px;
}

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

@media (max-width: 1200px) {
	#isp-problema-arte {
		width: 100%;
	}

	.isp-problema__simbolo {
		left: 40px;
	}

	.isp-problema__foto {
		left: -140px;
	}

	#isp-problema-conteudo {
		width: 54%;
		margin-right: 0;
	}
}

@media (max-width: 1024px) {
	#isp-problema {
		padding-block: 0 64px;
	}

	/* A camada precisa voltar ao fluxo aqui: como ela e absoluta no desktop,
	   a foto ficaria por cima do texto na coluna unica do celular. */
	#isp-problema > .isp-camada {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
	}

	#isp-problema-arte {
		position: relative;
		left: 0;
		height: 420px;
		transform: none;
	}

	.isp-problema__foto {
		top: 0;
		left: 50%;
		width: 640px;
		height: 460px;
		transform: translateX(-50%);
	}

	.isp-problema__simbolo {
		top: 40px;
		left: 50%;
		width: 380px;
		height: 421px;
		transform: translateX(-50%) scaleY(-1);
	}

	#isp-problema-wrap {
		min-height: 0;
		align-items: flex-start;
	}

	#isp-problema-conteudo {
		width: 100%;
		align-self: flex-start;
		margin-top: 0;
	}

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

/* =========================================================================
   O PROBLEMA NO CELULAR — Figma "02 O PROBLEMA" (390x780)

   Aqui tambem muda o ARRANJO, nao so a escala. No desktop a foto do gestor
   e uma camada absoluta ATRAS da coluna de texto. Em 390 ela desce: o texto
   vem primeiro e a foto fecha a seção, sangrando de borda a borda. Era o
   defeito mais visivel do celular — a foto subia por cima do titulo e o
   texto ficava ilegivel em cima dela.

   Regua do arquivo: 64 | texto 384 | 32 | foto 300 = 780 (sem recuo no pe).
   ========================================================================= */
@media (max-width: 767px) {
	#isp-problema {
		gap: 32px;
		padding-block: 64px 0;
	}

	/* A camada da arte e o primeiro filho no HTML; no celular ela vai para
	   o fim. Trocar a ordem aqui evita mexer no markup, que e compartilhado
	   com o desktop. */
	#isp-problema-wrap {
		order: 1;
	}

	/* A arte e um CONTAINER desde a conversao das imagens, e nao mais um
	   widget: sem este seletor ela voltou a aparecer antes do texto, que e
	   exatamente o que o arquivo de 390 nao quer. */
	#isp-problema > .elementor-widget,
	#isp-problema > #isp-problema-arte {
		order: 2;
	}

	/* So o invólucro do SIMBOLO precisa ser estatico (mesmo motivo do veu
	   do hero). A foto NAO entra aqui: ela e o widget de imagem e tem as
	   suas proprias coordenadas absolutas — zerar a posicao dela a fazia
	   encolher para o tamanho do conteudo. */
	#isp-problema-arte > .elementor-widget-shortcode,
	#isp-problema-arte .elementor-shortcode {
		position: static;
		width: auto;
		margin: 0;
		padding: 0;
		line-height: 0;
	}

	/* max-width: none — o Elementor limita todo widget a 100% do pai, e a
	   moldura da foto tem 498 de propósito, mais larga que os 390 da tela. */
	/* Com o pai no seletor para vencer o max-width que o Elementor poe em
	   todo widget: a moldura da foto tem 498 de proposito, mais larga que
	   os 390 da tela — e o corte quem faz e a arte, nao ela. */
	#isp-problema-arte > .isp-problema__foto {
		width: 498px;
		max-width: none;
	}

	#isp-problema-arte {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 300px;
		transform: none;
	}

	/* As duas pecas sao as MESMAS do desktop reduzidas a 57%: 869x626 vira
	   498x359 e 529x587 vira 299x331. Por isso o enquadramento interno da
	   foto (as porcentagens do img) fica intocado — mexer nele tira o
	   gestor do centro, que e justamente o que o cliente pediu para
	   manter igual ao desktop. */
	/* ATENCAO: o bloco de 1024 acima centraliza as duas pecas com
	   translateX(-50%). Sem zerar essa transformada aqui, o left em pixels
	   ainda leva mais um recuo de meia largura — foi o que jogou as setas
	   azuis para fora do quadro e escondeu o gestor. */
	/* left:50% + margin-left negativa, e nao um left fixo: o arquivo e de 390,
	   mas o celular do cliente e mais largo, e com pixel fixo toda a arte
	   ficava colada na esquerda com a sobra aparecendo so do lado direito
	   ("o homem nao esta centralizado na seção", 01/09/2026). A margem e o
	   deslocamento da peca dentro da caixa; assim o ponto que precisa ficar no
	   meio continua no meio em qualquer largura. Em 390 o resultado e
	   identico ao de antes. */
	.isp-problema__simbolo {
		top: 14px;
		left: 50%;
		margin-left: -149px;
		width: 299px;
		height: 331px;
		transform: scaleY(-1);
	}

	/* -89, como no arquivo. Cheguei a mover para -67 medindo o "centro de
	   pele" do gestor, mas essa medida e puxada pelas maos e pelo papel:
	   comparando a SILHUETA escura com o render do Figma, o corpo tem os
	   mesmos 278px de largura e o centro dele cai em 194 — ou seja, o
	   arquivo ja esta centrado e o -67 e que jogava tudo 22px para a
	   direita. */
	.isp-problema__foto {
		top: -28px;
		left: 50%;
		margin-left: -284px;
		width: 498px;
		height: 359px;
		transform: none;
	}

	/* A imagem entra com medida absoluta, e nao com as porcentagens +
	   object-fit:contain do desktop. As porcentagens dao o mesmo resultado
	   no Chrome, mas o "contain" depende de comparar a proporcao da imagem
	   com a da caixa, e o Safari do iPhone chegava a um enquadramento
	   diferente — foi o "foto nao ta centralizada" do cliente. Os numeros
	   abaixo saem do proprio recorte do Figma (fill do tipo CROP, matriz
	   [[1.038,0,-0.076],[0,0.997,-0.025]] sobre a caixa de 498x359). */
	.isp-problema__foto img {
		top: 9px;
		left: 36.5px;
		width: 479.8px;
		height: 360.1px;
		object-fit: fill;
	}

	/* ---------- Coluna de texto ---------- */
	#isp-problema-wrap {
		align-items: stretch;
		min-height: 0;
		padding-inline: var(--isp-margem);
	}

	#isp-problema-conteudo {
		align-self: stretch;
		gap: 16px;
		width: 100%;
		margin-right: 0;
		margin-top: 0;
	}

	.isp-problema__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		font-weight: 500;
		letter-spacing: 1.6px;
		color: rgba(13, 13, 13, 0.7);
	}

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

	.isp-lista-x ul,
	ul.isp-lista-x {
		gap: 14px;
	}

	.isp-lista-x li {
		align-items: flex-start;
		gap: 12px;
		font-size: 15px;
		line-height: 24px;
	}

	/* O X acompanha a PRIMEIRA linha do item, e nao o centro do bloco: com
	   align-items:center um item de cinco linhas jogava o icone para o meio
	   do paragrafo. */
	.isp-lista-x li::before {
		margin-top: 0;
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		background-size: 15px 15px;
	}

	.isp-lista-x li p {
		max-width: 100%;
	}
}