/* =========================================================================
   GOVERNANCA — o que muda em relacao ao template de servico
   Figma: ISP - Governanca (1156:48), 1440 x 9954.

   As faixas sao as mesmas do Discovery, entao os ajustes de altura de
   19-servico-ajustes.css valem aqui tambem. O que muda e o ARRANJO de duas
   seções e a cor dos icones — a Governanca usa icone chumbo nos cards
   claros, enquanto o Discovery usa azul.
   ========================================================================= */

/* =========================================================================
   1. HERO — a caixa do titulo e mais larga que a coluna de texto
   Figma: Content com 579 (1156:118) mas o titulo com 593 (1156:120). Com
   579 ele quebra em quatro linhas em vez de tres.
   ========================================================================= */

.isp-pg-governanca .isp-hero__titulo .elementor-heading-title {
	width: 593px;
	max-width: none;
}

/* =========================================================================
   2. PARA QUEM E — a foto vai para a PRIMEIRA coluna
   Figma: foto em x 80 (Frame 35739) e a grade de cards em x 492
   (Frame 1171275733). No Discovery e o contrario.
   ========================================================================= */

.isp-pg-governanca .isp-cartoes {
	/* 80 -> 1362 no arquivo: 374 + 14 + 24 + 423 + 24 + 423. O respiro de
	   14px entre a foto e a primeira coluna de cards e do arquivo. */
	grid-template-columns: 374px 423px 423px;
	width: 1282px;
	max-width: none;
	margin-inline: auto;
}

.isp-pg-governanca .isp-cartao-foto {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-right: 14px;
	/* O grupo de aneis (852x852) fica em -239/-19 dentro do card. */
	background-color: var(--isp-azul);
	background-image: url(../svg/gov-quem-anel.svg);
	background-repeat: no-repeat;
	background-position: -239px -19px;
	background-size: 852px 852px;
}

/* A pessoa entra recortada, na posicao do arquivo: a caixa dela e 28px mais
   a esquerda e 115px acima da caixa do card.
   Pedido do cliente (26/08/2026): ela so pode transbordar pela ESQUERDA. O
   clip-path ja cortava a direita da imagem, mas o que sobrava (467px) ainda
   passava 64px da borda do card e entrava por cima da coluna de cards. O
   corte da direita agora para exatamente na borda do card. */
/* A foto INTEIRA dentro do card azul (pedido do cliente em 01/09/2026:
   "ela tem que ta dentro do retangulo azul"). Antes ela era enquadrada em
   pixel do quadro de 1440 e sangrava para fora — e como esta imagem vem
   recortada na origem (o braco encosta na borda do arquivo), o corte
   aparecia solto sobre o fundo claro.

   Com "contain" ancorado no pe a esquerda, o gestor cabe inteiro na altura
   do card e nada e cortado. */
.isp-pg-governanca #isp-quem-e .isp-cartao-foto img {
	position: absolute;
	inset: auto auto 0 0;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}

/* No arquivo o titulo tem 819 e transborda a coluna de 773 do cabecalho;
   deixar quebrar acrescentaria 52px e empurraria a pagina inteira. */
.isp-pg-governanca #isp-quem-e-topo .isp-servico__titulo .elementor-heading-title {
	white-space: nowrap;
}

/* Nos cards claros desta pagina o icone e chumbo, nao azul. */
.isp-pg-governanca .isp-cartao__ico,
.isp-pg-governanca .isp-passo__ico {
	color: var(--isp-chumbo);
}

/* E volta a branco quando o card fica azul no hover. */
@media (hover: hover) {
	.isp-pg-governanca .isp-cartao:hover .isp-cartao__ico,
	.isp-pg-governanca .isp-passo:hover .isp-passo__ico {
		color: #ffffff;
	}

	/* No bento e o contrario: o card escura vira claro, entao o icone escurece. */
	.isp-pg-governanca .isp-bento__card:hover .isp-bento__ico {
		color: var(--isp-chumbo);
	}
}

/* =========================================================================
   3. O QUE VOCE RECEBE — outro desenho de bento
   Figma: Frame 1171275731 (1156:213), 1283 x 1072. O card claro fica EM PE
   na terceira coluna, ocupando as duas ultimas linhas, e o card largo de
   baixo e que leva o simbolo de vidro.
   ========================================================================= */

.isp-pg-governanca .isp-bento__card--mapeamento   { left: 0;        top: 0;    width: 410px;     height: 339px; }
.isp-pg-governanca .isp-bento__card--fluxos       { left: 436.33px; top: 0;    width: 410.333px; height: 338.667px; }
.isp-pg-governanca .isp-bento__card--automacoes   { left: 872.67px; top: 0;    width: 410.333px; height: 338.667px; }
.isp-pg-governanca .isp-bento__card--documentados { left: 1px;      top: 364px; width: 409px;    height: 338px; }
.isp-pg-governanca .isp-bento__card--dashboard    { left: 434px;    top: 364px; width: 410px;    height: 338px; }
.isp-pg-governanca .isp-bento__card--treinamento  { left: 1px;      top: 733px; width: 843px;    height: 339px; }

/* O card claro, em pe na direita. */
.isp-pg-governanca .isp-bento__card--indicadores {
	left: 871px;
	top: 363px;
	width: 410px;
	height: 709px;
	background-color: var(--isp-branco);
	overflow: hidden;
}

.isp-pg-governanca .isp-bento__card--indicadores h3 {
	color: var(--isp-chumbo);
}

.isp-pg-governanca .isp-bento__card--indicadores p {
	color: rgba(13, 13, 13, 0.6);
}

.isp-pg-governanca .isp-bento__card--indicadores .isp-bento__ico {
	color: var(--isp-chumbo);
}

/* Larguras proprias de paragrafo, como no arquivo. */
.isp-pg-governanca .isp-bento__card--fluxos p      { width: 352px; }
.isp-pg-governanca .isp-bento__card--automacoes p  { width: 319px; }
.isp-pg-governanca .isp-bento__card--treinamento p { width: 406px; }
/* Pedido do cliente (26/08/2026): neste card o titulo passava por cima do
   simbolo de vidro. Sem largura ele esticava pelos 763px uteis do card;
   no arquivo (1156:257) a caixa tem 330 e o texto quebra em duas linhas. */
.isp-pg-governanca .isp-bento__card--treinamento h3 { width: 330px; }
.isp-pg-governanca .isp-bento__card--gargalos p,
.isp-pg-governanca .isp-bento__card--processos p   { width: auto; }
.isp-pg-governanca .isp-bento__card--matriz h3,
.isp-pg-governanca .isp-bento__card--matriz .elementor-heading-title,
.isp-pg-governanca .isp-bento__card--matriz p,
.isp-pg-governanca .isp-bento__card--escopo h3,
.isp-pg-governanca .isp-bento__card--escopo .elementor-heading-title,
.isp-pg-governanca .isp-bento__card--escopo p      { width: auto; }

/* ---------- Aneis e foto, dentro do card claro ----------
   As duas pecas sao irmas dos cards no arquivo, entao cada uma ganha aqui
   uma caixa de recorte com o retangulo exato do card. */
.isp-pg-governanca .isp-bento__anel,
.isp-pg-governanca .isp-bento__foto {
	position: absolute;
	left: 871px;
	top: 363px;
	z-index: 1;
	width: 410px;
	height: 709px;
	border-radius: 20px;
	overflow: hidden;
	pointer-events: none;
}

.isp-pg-governanca #isp-recebe .isp-bento__anel svg {
	position: absolute;
	left: 2px;
	top: 313px;
	width: 807px;
	height: 852px;
}

.isp-pg-governanca #isp-recebe .isp-bento__foto img {
	position: absolute;
	left: -139px;
	top: 273px;
	width: 654px;
	min-width: 654px;
	max-width: none;
	height: 436px;
	object-fit: cover;
}

/* O simbolo de vidro fica dentro do card largo de baixo. */
/* O export traz a sombra do simbolo, entao a caixa e 34px maior que o no
   do arquivo — 17 de folga de cada lado. */
.isp-pg-governanca .isp-bento__cristal {
	left: 517px;
	top: 779px;
	width: 247px;
	height: 247px;
}

/* A faixa de selos aqui tem 1029, e nao os 976 do Discovery. */
.isp-pg-governanca #isp-recebe-fecho,
.isp-pg-governanca .isp-chips {
	width: 1029px;
}

/* O texto de abertura desta seção e mais estreito. */
.isp-pg-governanca #isp-recebe .isp-servico__lead {
	max-width: 511px;
}

/* =========================================================================
   4. COMO FUNCIONA — as caixas de texto do cabecalho sao mais largas
   Figma: titulo com 620 (Frame 35731, 1156:461) e abertura com 628. No
   Discovery sao 398 e 492, e com aqueles valores o titulo quebra em tres
   linhas e a abertura em quatro.
   ========================================================================= */

.isp-pg-governanca #isp-como .isp-servico__titulo .elementor-heading-title {
	width: 620px;
}

.isp-pg-governanca #isp-como .isp-servico__lead {
	max-width: 628px;
}

/* A faixa desta seção tem 988 (y 3613–4601) e o cabecalho aqui e mais baixo
   que o do Discovery: o recuo fecha a diferenca. */
.isp-pg-governanca #isp-como {
	padding-block: 111px;
}

/* =========================================================================
   7. E DEPOIS — a trilha ja vem inteira
   Aqui a imagem e o recorte da faixa toda (cards, cotovelos e pontas de
   seta), entao nao ha pecas por cima.
   ========================================================================= */

.isp-trilha--inteira .isp-trilha__fio,
.isp-trilha--inteira .isp-trilha__seta {
	display: none;
}

/* No arquivo a abertura desta seção tem 873 de largura (quatro linhas); com
   os 1281 do bloco ela sairia em tres e a seção encolheria 57px. */
.isp-pg-governanca #isp-depois .isp-servico__lead {
	max-width: 873px;
}

/* No arquivo os dois paragrafos sao separados por uma linha em branco. */
.isp-pg-governanca #isp-depois .isp-servico__lead p + p {
	margin-top: 28px;
}

/* A faixa tem 1362 (y 6458–7820). Recuo simetrico desde 26/08/2026, a
   pedido do cliente: mesma soma, conteudo centralizado. */
.isp-pg-governanca #isp-depois {
	padding-block: 96px;
}

/* =========================================================================
   9. CTA FINAL — larguras proprias do arquivo
   Figma: titulo com 572 (1156:409) e texto com 512 (1156:410).
   ========================================================================= */

.isp-pg-governanca .isp-cta__titulo .elementor-heading-title {
	width: 572px;
	max-width: none;
}

.isp-pg-governanca .isp-cta__texto {
	max-width: 512px;
}

/* O card e a arte de fundo tem enquadramento proprio em cada pagina.
   Figma (1156:400 / 1156:401): card com 430,8 de altura e a imagem
   deslocada 19,86% para a direita e -3,41% para cima dentro da caixa. */
.isp-pg-governanca #isp-cta-card {
	/* Sem piso de altura: pedido do cliente em 01/09/2026 ("ajustar altura
	   do banners"). O numero vinha do quadro de 1440 do Figma; agora o card
	   fecha na altura do proprio conteudo, que e mais baixo. A arte de
	   vidro e fundo recortado pelo card, entao ela acompanha. */
	min-height: 0;
}

.isp-pg-governanca #isp-cta {
	padding-block: 164px 117px;
}

.isp-pg-governanca #isp-cta-card .isp-cta__arte img {
	top: -3.41%;
	left: 19.86%;
}

/* =========================================================================
   RESPONSIVO
   Abaixo de 1440 o bento vira pilha (regra de 15-servico-recebe.css) e as
   posicoes absolutas desta pagina precisam sair junto.
   ========================================================================= */

@media (max-width: 1439px) {
	.isp-pg-governanca .isp-bento__card--mapeamento,
	.isp-pg-governanca .isp-bento__card--fluxos,
	.isp-pg-governanca .isp-bento__card--automacoes,
	.isp-pg-governanca .isp-bento__card--documentados,
	.isp-pg-governanca .isp-bento__card--dashboard,
	.isp-pg-governanca .isp-bento__card--treinamento,
	.isp-pg-governanca .isp-bento__card--indicadores {
		position: static;
		width: auto;
		height: auto;
		min-height: 300px;
	}

	.isp-pg-governanca .isp-bento__card--indicadores {
		grid-row: span 2;
	}

	.isp-pg-governanca .isp-bento__card p {
		width: auto;
	}

	.isp-pg-governanca .isp-bento__anel {
		display: none;
	}

	.isp-pg-governanca #isp-recebe-fecho,
	.isp-pg-governanca .isp-chips {
		width: 100%;
	}
}

@media (max-width: 1340px) {
	.isp-pg-governanca .isp-cartoes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		max-width: 100%;
	}

	.isp-pg-governanca .isp-bento__card--treinamento h3 {
		width: auto;
	}

	.isp-pg-governanca .isp-cartao-foto {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-right: 0;
		min-height: 420px;
	}
}

/* =========================================================================
   RESET DO RESPONSIVO
   Todas as regras acima com largura ou recuo em pixel valem SO no quadro de
   1440 do arquivo. Sem este bloco elas continuam valendo num celular, e o
   resultado e titulo cortado na borda e recuo de 150px sobrando.
   ========================================================================= */

@media (max-width: 1439px) {
	.isp-pg-governanca .isp-hero__titulo .elementor-heading-title,
	.isp-pg-governanca #isp-como .isp-servico__titulo .elementor-heading-title,
	.isp-pg-governanca .isp-cta__titulo .elementor-heading-title {
		width: 100%;
		max-width: 100%;
	}

	/* O titulo de "Para quem e" so fica em linha unica no quadro de 1440. */
	.isp-pg-governanca #isp-quem-e-topo .isp-servico__titulo .elementor-heading-title {
		white-space: normal;
	}

	.isp-pg-governanca #isp-recebe .isp-servico__lead,
	.isp-pg-governanca #isp-como .isp-servico__lead,
	.isp-pg-governanca #isp-depois .isp-servico__lead,
	.isp-pg-governanca .isp-cta__texto {
		max-width: 100%;
	}

	.isp-pg-governanca #isp-como,
	.isp-pg-governanca #isp-depois,
	.isp-pg-governanca #isp-cta {
		padding-block: 80px;
	}

	.isp-pg-governanca #isp-depois-topo {
		padding-bottom: 0;
	}

	.isp-pg-governanca #isp-cta-card {
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.isp-pg-governanca .isp-cartoes {
		grid-template-columns: minmax(0, 1fr);
	}

	.isp-pg-governanca #isp-como,
	.isp-pg-governanca #isp-depois,
	.isp-pg-governanca #isp-cta {
		padding-block: 64px;
	}
}