/* =========================================================================
   OUTSOURCING — o que muda em relacao ao template de servico
   Figma: ISP - Outsourcing (1156:562), 1440 x 9674.

   Faixas do arquivo:
     hero 0–800 · para quem e 800–1871 · o que recebe 1871–3332
     como funciona 3332–4320 · depoimentos 4320–5160 · fale conosco 5160–6168
     e depois 6168–7530 · faq 7530–8596 · cta 8596–9310
   ========================================================================= */

/* =========================================================================
   1. HERO — a coluna de texto e o titulo sao mais largos aqui
   Figma: Content com 674 (1156:632) e titulo com 665 (1156:634).
   ========================================================================= */

.isp-pg-outsourcing #isp-hero-conteudo {
	width: 674px;
}

.isp-pg-outsourcing #isp-hero-conteudo .isp-hero__texto {
	max-width: 674px;
}

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

/* =========================================================================
   2. PARA QUEM E — a foto vai para a coluna DO MEIO
   Figma: cards em x 92 e 937, foto em x 540 (Frame 35739, 1156:712).
   ========================================================================= */

/* O titulo tem 835 no arquivo e transborda a coluna de 773 do cabecalho. */
.isp-pg-outsourcing #isp-quem-e-topo .isp-servico__titulo .elementor-heading-title {
	white-space: nowrap;
}

.isp-pg-outsourcing .isp-cartoes {
	grid-template-columns: 423px 374px 423px;
}

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

/* A pessoa segue a transformacao do preenchimento no arquivo (1244:18):
   left -0,02% · top 0 · width 100,03% · height 120,96% de uma caixa de
   789x711 ancorada em -202/-107 em relacao ao card. O clip-path faz o
   papel do overflow hidden daquela caixa. */
.isp-pg-outsourcing #isp-quem-e .isp-cartao-foto img {
	top: -107px;
	left: -202.16px;
	width: 789.24px;
	min-width: 789.24px;
	height: 860px;
	object-fit: fill;
	object-position: top left;
	clip-path: inset(0 0.08px 149px 0.16px);
}

/* Nesta pagina os icones dos cards claros sao chumbo, nao azuis. */
.isp-pg-outsourcing .isp-cartao__ico {
	color: var(--isp-chumbo);
}

@media (hover: hover) {
	.isp-pg-outsourcing .isp-cartao:hover .isp-cartao__ico,
	.isp-pg-outsourcing .isp-passo:hover .isp-passo__ico {
		color: #ffffff;
	}
}

/* =========================================================================
   3. O QUE VOCE RECEBE — grade regular de seis cards
   Figma: Frame 1171275731 (1156:727), 1283 x 756. O primeiro card e o claro.
   ========================================================================= */

.isp-pg-outsourcing .isp-bento {
	height: 756px;
}

/* O card claro do arquivo perdeu o fundo fixo: aqui ele nao carrega foto
   nem arte (ao contrario do card claro do Discovery e da Governanca), era
   so um destaque de cor — e destaque, desde 26/08/2026, e hover. */
.isp-pg-outsourcing .isp-bento__card--cogestor      { left: 0;        top: 0;     width: 410px;     height: 339px; }
.isp-pg-outsourcing .isp-bento__card--monitoramento { left: 436.33px; top: 0;     width: 410.333px; height: 338.667px; }
.isp-pg-outsourcing .isp-bento__card--okr           { left: 872.67px; top: 0;     width: 410.333px; height: 338.667px; }
.isp-pg-outsourcing .isp-bento__card--desvio        { left: -2px;     top: 367px; width: 412px;     height: 338px; }
.isp-pg-outsourcing .isp-bento__card--relatorio     { left: 436px;    top: 367px; width: 411px;     height: 338px; }
.isp-pg-outsourcing .isp-bento__card--contas        { left: 873px;    top: 367px; width: 408px;     height: 338px; }


/* Larguras proprias de paragrafo, como no arquivo. */
.isp-pg-outsourcing .isp-bento__card--monitoramento p { width: 352px; }
.isp-pg-outsourcing .isp-bento__card--okr p           { width: 341px; }
.isp-pg-outsourcing .isp-bento__card--desvio h3       { width: 365px; }
.isp-pg-outsourcing .isp-bento__card--desvio p        { width: 334px; }
.isp-pg-outsourcing .isp-bento__card--relatorio p     { width: 331px; }
.isp-pg-outsourcing .isp-bento__card--contas p        { width: 328px; }

/* A faixa de selos aqui tem 1143. */
.isp-pg-outsourcing #isp-recebe-fecho,
.isp-pg-outsourcing .isp-chips {
	width: 1143px;
}

.isp-pg-outsourcing #isp-recebe .isp-servico__lead {
	max-width: 645px;
}

/* A faixa da seção tem 1461 (y 1871–3332). */
.isp-pg-outsourcing #isp-recebe {
	padding-block: 120px 125px;
}

/* =========================================================================
   4. COMO FUNCIONA — a caixa do titulo e mais larga
   Figma: titulo com 494 (1156:975); a abertura mantem os 492 do padrao.
   ========================================================================= */

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

/* A faixa desta seção tem 988 (y 3332–4320). */
.isp-pg-outsourcing #isp-como {
	padding-block: 111px;
}

/* =========================================================================
   5. DEPOIMENTOS — a faixa aqui tem 840, e nao os 849 das outras paginas
   Figma: Frame 469 (1156:832) em y 4433, faixa 4320–5160.
   ========================================================================= */

.isp-pg-outsourcing #isp-depoimentos {
	/* Quem manda na altura e o min-height de 16-servico-depoimentos.css;
	   so mexer no recuo nao muda nada. */
	min-height: 840px;
	padding-block: 74px;
}

/* =========================================================================
   7. E DEPOIS — a trilha ja vem inteira e a abertura tem largura propria
   ========================================================================= */

.isp-pg-outsourcing #isp-depois .isp-servico__lead {
	max-width: 827px;
}

.isp-pg-outsourcing #isp-depois .isp-servico__lead p + p {
	margin-top: 28px;
}

/* No arquivo a caixa de texto da abertura tem uma linha vazia no fim: o
   bloco mede 319 enquanto o texto visivel para em 290. Aqui esse resto vira
   espacamento, para nao carregar paragrafo vazio no conteudo. */
.isp-pg-outsourcing #isp-depois-topo {
	padding-bottom: 29px;
}

/* A faixa tem 1362 (y 6168–7530). */
.isp-pg-outsourcing #isp-depois {
	padding-block: 45px 118px;
}

/* =========================================================================
   9. CTA FINAL — larguras proprias do arquivo
   Figma: titulo com 712 (1156:923) e texto com 512 (1156:924).
   ========================================================================= */

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

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

/* O card e a arte de fundo tem enquadramento proprio em cada pagina.
   Figma (1156:914 / 1156:915): card com 456,8 de altura e a imagem
   deslocada 22,37% para a direita e -0,12% para cima dentro da caixa. */
.isp-pg-outsourcing #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-outsourcing #isp-cta {
	padding-block: 151px 104px;
}

.isp-pg-outsourcing #isp-cta-card .isp-cta__arte img {
	top: -0.12%;
	left: 22.37%;
}

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

@media (max-width: 1439px) {
	.isp-pg-outsourcing .isp-bento {
		height: auto;
	}

	.isp-pg-outsourcing .isp-bento__card--cogestor,
	.isp-pg-outsourcing .isp-bento__card--monitoramento,
	.isp-pg-outsourcing .isp-bento__card--okr,
	.isp-pg-outsourcing .isp-bento__card--desvio,
	.isp-pg-outsourcing .isp-bento__card--relatorio,
	.isp-pg-outsourcing .isp-bento__card--contas {
		position: static;
		width: auto;
		height: auto;
		min-height: 300px;
	}

	.isp-pg-outsourcing .isp-bento__card p,
	.isp-pg-outsourcing .isp-bento__card h3 {
		width: auto;
	}

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

	.isp-pg-outsourcing #isp-hero-conteudo,
	.isp-pg-outsourcing .isp-hero__titulo .elementor-heading-title,
	.isp-pg-outsourcing .isp-cta__titulo .elementor-heading-title {
		width: 100%;
	}
}

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

	.isp-pg-outsourcing .isp-cartao-foto {
		grid-column: 1 / -1;
		grid-row: auto;
		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-outsourcing #isp-como .isp-servico__titulo .elementor-heading-title {
		width: 100%;
		max-width: 100%;
	}

	.isp-pg-outsourcing #isp-quem-e-topo .isp-servico__titulo .elementor-heading-title {
		white-space: normal;
	}

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

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

	.isp-pg-outsourcing #isp-depoimentos {
		min-height: 0;
	}

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

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

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

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