/* =========================================================================
   QUEM SOMOS
   Figma: Content 956:852 — faixa azul y 8322–9455 (1133 de altura).
   Bloco interno centralizado, 913.885 de largura, gap 60.
   ========================================================================= */

#isp-quem-somos {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 60px;
	min-height: 1133px;
	padding: 60px var(--isp-margem);
	background-color: var(--isp-azul);
	color: #ffffff;
	overflow: hidden;
}

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

/* Pedido do cliente (26/08/2026): o botao "Conheca a ISP Leaders" fica no
   centro. Ele e um filho direto da seção e herdava a largura de 913,885 do
   bloco; sendo inline-flex, ficava encostado na esquerda dessa caixa. */
#isp-quem-somos > .elementor-widget-button,
#isp-quem-somos > .elementor-widget-shortcode:last-child,
#isp-quem-somos > .elementor-widget-button:last-child {
	display: flex;
	justify-content: center;
	text-align: center;
}

/* ---------- Cabecalho ---------- */
#isp-quem-somos-topo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	width: 832px;
	max-width: 100%;
	text-align: center;
}

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

.isp-quem__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;
	text-transform: uppercase;
	color: var(--isp-branco);
}

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

#isp-quem-somos-topo .isp-quem__lead {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

.isp-quem__lead p {
	margin: 0;
}

/* ---------- Video ---------- */
/* O quadro esta 0,1 grau fora do prumo no arquivo — e de proposito. */
#isp-quem-video {
	position: relative;
	display: block;
	width: 912.095px;
	max-width: 100%;
	aspect-ratio: 912.095 / 533.043;
	margin-inline: auto;
	padding: 0;
	border: 1.481px solid rgba(255, 255, 255, 0.37);
	border-radius: 22.21px;
	background: none;
	overflow: hidden;
	transform: rotate(-0.1deg);
	cursor: pointer;
}

/* A foto entra em corte, deslocada — nao preenche o quadro.
   Seletor com o id da seção de proposito: o reset de imagem do tema
   (img{max-width:100%;height:auto}) sobrescreveria a largura e a altura,
   e a capa apareceria menor que o quadro, com o canto vazio. */
/* O invólucro do widget de imagem precisa ser ESTATICO: o Elementor deixa
   .elementor-widget com position:relative, e ai a capa — que e absoluta —
   passa a medir as porcentagens contra ele em vez de contra a moldura do
   video. Como o invólucro tem altura automatica (e o unico filho e
   absoluto), a altura de 136,94% virava 1px. */
/* O invólucro do widget de imagem vira a moldura interna, e a capa so
   preenche. A capa e um widget de IMAGEM nativo desde 28/08/2026, para o
   cliente troca-la pelo painel; so o veu e o disco do play continuam vindo
   por shortcode, porque nao ha nada para editar neles. */
#isp-quem-video > .elementor-element,
#isp-quem-video .elementor-shortcode {
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}

#isp-quem-video > .isp-video__capa {
	position: absolute;
	inset: 0;
}

#isp-quem-somos .isp-video__capa img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

#isp-quem-somos .isp-video__capa--velho {
	position: absolute;
	top: -22.6%;
	left: -17.96%;
	width: 144.33%;
	min-width: 144.33%;
	max-width: none;
	height: 136.94%;
	object-fit: cover;
}

.isp-video__veu {
	position: absolute;
	inset: 0;
	background-color: rgba(20, 20, 49, 0.72);
}

.isp-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 107.938px;
	height: 107.938px;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}

#isp-quem-video:hover .isp-video__play {
	transform: translate(-50%, -50%) scale(1.06);
}

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

/* Quando o visitante clica, o <iframe> do vídeo substitui a capa. */
.isp-video__quadro {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

@media (max-width: 1024px) {
	#isp-quem-somos {
		min-height: 0;
		gap: 48px;
		padding-block: 80px;
	}

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

/* =========================================================================
   QUEM SOMOS NO CELULAR — Figma "08 QUEM SOMOS" (390x648)

   Regua: 64 | eyebrow 16 | 24 | titulo 99 | 24 | apoio 66 | 24 |
          video 200 | 24 | CTA 42,6 | 64

   O video passa de 912x533 para 342x200 — a proporcao muda (1,71 contra
   1,71 e quase a mesma, mas o recorte da capa e ancorado em porcentagem,
   entao ele acompanha sozinho). O disco do play cai de 108 para 60.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-quem-somos {
		gap: 24px;
		padding-block: 64px;
	}

	#isp-quem-somos > .elementor-widget {
		width: 100%;
	}

	#isp-quem-somos-topo {
		gap: 24px;
		width: 100%;
	}

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

	.isp-quem__titulo .elementor-heading-title {
		font-size: 26px;
		line-height: 33px;
	}

	#isp-quem-somos-topo .isp-quem__lead {
		font-size: 14px;
		line-height: 22px;
	}

	#isp-quem-video {
		width: 100%;
		aspect-ratio: 342 / 200;
		border-radius: 16px;
	}

	.isp-video__play {
		width: 60px;
		height: 60px;
	}

	/* No arquivo de 390 o disco deste botao e AZUL, e nao preto: a seção
	   inteira ja e azul e o preto so aparece no hero. */
	#isp-quem-somos .isp-btn--contraste .isp-btn__ico {
		background-color: var(--isp-azul);
		color: #ffffff;
	}
}