/* =========================================================================
   PAGINAS DE SERVICO — acertos de responsivo que precisam vir por ultimo

   Este arquivo existe por ordem de carga, nao por assunto. As regras de
   cada pagina (20-governanca, 21-outsourcing, 22-inteligencia) miram a foto
   de "Para quem e" com id + duas classes, entao um reset escrito em
   13-servico.css — que carrega antes — perde por empate de especificidade.
   Aqui, depois de todos eles, o reset vale para as quatro paginas.

   Enquanto o arquivo do Figma nao tiver quadro de tablet e de celular, tudo
   o que esta aqui e derivado e precisa do aval do designer.
   ========================================================================= */

/* =========================================================================
   "PARA QUEM E" — o card com a foto abaixo de 1340

   No desktop o card e uma coluna estreita e a pessoa sangra de proposito
   para fora dele (cabeca acima, corpo a esquerda), nas coordenadas do
   arquivo. Abaixo de 1340 o card passa a ocupar a fileira inteira, e essas
   mesmas coordenadas jogavam a pessoa para fora da faixa: a cabeca subia
   por cima dos cards de texto e os pes entravam na seção seguinte, ja
   escura. Aqui ela volta para dentro do card, encostada no canto inferior
   esquerdo — que e a leitura da composicao do arquivo.
   ========================================================================= */

@media (max-width: 1340px) {
	.isp-servico #isp-quem-e .isp-cartao-foto {
		overflow: hidden;
	}

	.isp-pg-discovery #isp-quem-e .isp-cartao-foto img,
	.isp-pg-governanca #isp-quem-e .isp-cartao-foto img,
	.isp-pg-outsourcing #isp-quem-e .isp-cartao-foto img,
	.isp-pg-inteligencia-de-mercado #isp-quem-e .isp-cartao-foto img {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: left bottom;
		/* O recorte do desktop e medido em pixels do quadro de 1440. */
		clip-path: none;
	}
}

/* =========================================================================
   "QUEM DEVE CONTRATAR" — a foto no celular

   No arquivo de 390 a foto fecha a seção numa caixa de 342x375 com o canto
   arredondado, e a pessoa aparece inteira, encostada embaixo. O bloco de
   1340 acima mira a foto com id + duas classes e carrega depois de
   13-servico.css, entao o reset de celular precisa vir daqui.
   ========================================================================= */
@media (max-width: 767px) {
	/* A janela da foto: 342x375 sem canto, que e o que CORTA. O bloco azul
	   com o anel nao ocupa a janela inteira — no arquivo ele comeca 35
	   abaixo do topo e tem 340 de altura com canto de 16, deixando um
	   respiro claro em cima. Por isso ele vira um ::before, e a janela fica
	   transparente; herdando o background-image, cada pagina continua com
	   o seu proprio anel sem precisar repetir a URL aqui. */
	/* A foto sobe para o topo da seção, antes dos cards de texto (pedido do
	   cliente em 02/09/2026). order:-1 resolve sem mexer no HTML: no
	   celular a grade e uma coluna, e o card da foto, que no arquivo de
	   1440 ocupa a terceira coluna, passa a ser o primeiro item da pilha.

	   O recuo de baixo VOLTA ao normal: ele tinha sido zerado quando a foto
	   era o ultimo elemento e precisava encostar na seção escura. Agora
	   quem fecha a seção sao os cards, e eles precisam da folga. */
	.isp-servico #isp-quem-e .isp-cartao-foto {
		order: -1;
	}

	.isp-servico #isp-quem-e .isp-cartao-foto {
		height: 375px;
		/* Mesmo raio do bloco azul de dentro: a janela que recorta a pessoa
		   passa a ter os 16 do retangulo, entao qualquer coisa que chegue
		   ao canto e cortada com a mesma curva — nada fica com ponta reta
		   ao lado de ponta redonda. */
		border-radius: 16px;
		background-color: transparent;
		/* O Discovery traz o fundo por style INLINE, que ganha de qualquer
		   folha: em vez de tentar apagar a imagem, ela e reduzida a nada e
		   o ::before a herda de volta com o tamanho certo. */
		background-size: 0 0;
		overflow: hidden;
	}

	.isp-servico #isp-quem-e .isp-cartao-foto::before {
		content: "";
		position: absolute;
		top: 35px;
		right: 0;
		bottom: 0;
		left: 0;
		/* height:auto e obrigatorio: sem ele o bloco herda os 375px de
		   altura do card, e como ele comeca 35px abaixo do topo, os 35
		   ultimos pixels — justamente onde estao os cantos arredondados de
		   baixo — ficavam fora da caixa e eram cortados pelo overflow. Na
		   tela isso aparecia como um retangulo azul de pontas retas
		   (apontado pelo cliente em 02/09/2026). Com auto, a altura sai de
		   top/bottom e os quatro cantos ficam dentro. */
		height: auto;
		z-index: 0;
		border-radius: 16px;
		background-color: var(--isp-azul);
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	/* O anel de cada pagina. O Discovery nao tem: la os aneis ja vem
	   desenhados dentro da propria foto. */
	/* Nestas tres o anel e um SVG de 852x852 ancorado em -239/-19; so o
	   Discovery usa a imagem inteira herdada acima. */
	.isp-pg-governanca #isp-quem-e .isp-cartao-foto::before {
		background-image: url(../svg/gov-quem-anel.svg);
		background-position: -239px -19px;
		background-size: 852px 852px;
	}

	.isp-pg-outsourcing #isp-quem-e .isp-cartao-foto::before {
		background-image: url(../svg/out-quem-anel.svg);
		background-position: -239px -19px;
		background-size: 852px 852px;
	}

	.isp-pg-inteligencia-de-mercado #isp-quem-e .isp-cartao-foto::before {
		background-image: url(../svg/int-quem-anel.svg);
		background-position: -239px -19px;
		background-size: 852px 852px;
	}

	.isp-servico #isp-quem-e .isp-cartao-foto img {
		z-index: 1;
	}

	/* O enquadramento de cada pagina sai do recorte do proprio arquivo de
	   390 (fill do tipo CROP sobre a janela de 342x375). Um "object-fit:
	   cover" generico centraliza a foto pelo meio da caixa e nao pelo ponto
	   que o desenho escolheu — foi o "imagem errada" do cliente. Da matriz
	   [[a,0,tx],[0,d,ty]] saem  largura = 342/a,  esquerda = -342*tx/a,
	   altura = 375/d,  topo = -375*ty/d. */
	.isp-servico #isp-quem-e .isp-cartao-foto img {
		position: absolute;
		inset: auto;
		max-width: none;
		object-fit: fill;
	}

	/* [[0.867,0,0],[0,0.714,0]] */
	.isp-pg-discovery #isp-quem-e .isp-cartao-foto img {
		top: 0;
		left: 0;
		width: 394.5px;
		height: 525.2px;
	}

	/* [[1,0,-0.001],[0,0.756,-0.019]] */
	.isp-pg-governanca #isp-quem-e .isp-cartao-foto img {
		top: 9.4px;
		left: 0.3px;
		width: 342px;
		height: 496px;
	}

	/* Aqui a foto ja nasce maior que a janela (412x451 em -35,-38) e a
	   matriz [[0.844,0,0.077],[0,0.848,0.017]] desloca dentro dela. */
	/* -63,6 e nao os -72,6 do arquivo: medindo a silhueta na tela, a moça
	   ficava com o centro em 186 num cartao cujo centro e 195 — os 9px que
	   o cliente viu (02/09/2026). */
	.isp-pg-outsourcing #isp-quem-e .isp-cartao-foto img {
		top: -47px;
		left: -63.6px;
		width: 488.2px;
		height: 531.8px;
	}

	/* Caixa de 404x443 em -31,-34 com [[0.988,0,0.006],[0,1.083,-0.066]] */
	.isp-pg-inteligencia-de-mercado #isp-quem-e .isp-cartao-foto img {
		top: -7px;
		left: -33.5px;
		width: 408.9px;
		height: 409px;
	}
}

/* =========================================================================
   ALTURAS MINIMAS QUE SO VALEM ACIMA DE 768

   Varios arquivos (13, 15, 20 e 21) fixam min-height em blocos de 1439 e
   1340 para segurar o arranjo de desktop e de tablet. No celular essas
   alturas nao fazem sentido — o card do bento nasce com 300 em vez dos 235
   do arquivo, e a foto de "Quem deve contratar" com 420 em vez de 375.
   Como aqueles seletores trazem .isp-pg-<slug> (id + duas classes) e
   carregam antes deste arquivo, o reset precisa morar no fim da fila.
   ========================================================================= */
@media (max-width: 767px) {
	/* min-height em vez de height: onde o texto do site quebra uma linha a
	   mais que o Figma, o card cresce em vez de cortar a frase — e como o
	   trilho estica todos ao mais alto, os sete continuam do mesmo tamanho. */
	.isp-servico .isp-bento__card {
		min-height: 235px;
		height: auto;
	}

	.isp-servico #isp-quem-e .isp-cartao-foto,
	.isp-pg-discovery #isp-quem-e .isp-cartao-foto,
	.isp-pg-governanca #isp-quem-e .isp-cartao-foto,
	.isp-pg-outsourcing #isp-quem-e .isp-cartao-foto,
	.isp-pg-inteligencia-de-mercado #isp-quem-e .isp-cartao-foto {
		min-height: 0;
		height: 375px;
	}
}