/* Os seletores de titulo do bento aparecem em par: "... h3" e
   "... .elementor-heading-title". O widget de titulo do Elementor traz
   ".elementor-widget-heading .elementor-heading-title { color: ... }", que
   pesa (0,2,0) e ganharia de qualquer ".isp-bento__card h3" (0,1,1) — sem o
   par, todo titulo convertido para widget saia na cor do kit, e as medidas
   de 390 perdiam para as de 1440. */

/* =========================================================================
   O QUE VOCE RECEBE — faixa escura com o bento de sete cards
   Figma: Frame 1171275732 (1110:121), y 1871–3613. O bloco tem 1283 de
   largura (x=79) e a area dos cards, 1072 de altura, com cada card numa
   posicao propria — nao e uma grade regular.
   ========================================================================= */

#isp-recebe {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
	/* 118 embaixo, e nao 120: o botao sai 2px mais alto que no arquivo. */
	padding: 120px var(--isp-margem) 118px;
	background-color: var(--isp-preto);
	color: var(--isp-branco);
	overflow: hidden;
}

#isp-recebe > .e-con {
	margin: 0;
	padding: 0;
}

#isp-recebe > .elementor-widget {
	width: 1283px;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#isp-recebe-topo {
	width: 773px;
	gap: 40px;
}

#isp-recebe .isp-servico__titulo .elementor-heading-title {
	color: #ffffff;
}

#isp-recebe .isp-servico__lead {
	max-width: 559px;
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- O bento ---------- */
.isp-bento {
	position: relative;
	width: 1283px;
	height: 1072px;
	max-width: 100%;
}

.isp-bento__card {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding: 40px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 20px;
	transition: background-color 0.25s ease, border-color 0.25s ease,
		transform 0.25s ease, box-shadow 0.25s ease;
}

/* Pedido do cliente (26/08/2026): o card escuro vira claro no hover — o
   mesmo tratamento do card claro que ja existe na grade. Os cards que ja
   nascem claros passam por aqui sem mudar de cor (as cores de hover sao as
   deles), so ganham o mesmo leve deslocamento. */
@media (hover: hover) {
	.isp-bento__card:hover {
		border-color: rgba(13, 13, 13, 0.06);
		background-color: var(--isp-branco);
		transform: translateY(-2px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	}

	.isp-bento__card:hover h3,
	.isp-bento__card:hover .elementor-heading-title {
		color: var(--isp-chumbo);
	}

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

/* Posicoes exatas do arquivo. O primeiro card e claro e mais alto; os
   demais sao so o contorno sobre o preto da seção. */
.isp-bento__card--organograma { left: 0;        top: 0;    width: 410.333px; height: 705.333px; background-color: var(--isp-branco); overflow: hidden; }
.isp-bento__card--processos   { left: 436.33px; top: 0;    width: 410.333px; height: 338.667px; }
.isp-bento__card--gargalos    { left: 872.67px; top: 0;    width: 410.333px; height: 338.667px; }
.isp-bento__card--matriz      { left: 436px;    top: 364px; width: 845px;    height: 338px; }
.isp-bento__card--escopo      { left: -4px;     top: 733px; width: 410.333px; height: 338.667px; }
.isp-bento__card--reuniao     { left: 434px;    top: 733px; width: 410px;    height: 339px; }
.isp-bento__card--relatorio   { left: 871px;    top: 733px; width: 410.333px; height: 338.667px; }

.isp-bento__ico {
	display: block;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	color: var(--isp-azul);
}

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

.isp-bento__card h3,
.isp-bento__card .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	color: var(--isp-branco);
	transition: color 0.25s ease;
}

.isp-bento__card p {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.25s ease;
}

/* O card claro inverte as cores do texto. */
.isp-bento__card--organograma h3,
.isp-bento__card--organograma .elementor-heading-title {
	color: var(--isp-chumbo);
}

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

/* Larguras proprias de alguns paragrafos, como no arquivo. */
.isp-bento__card--processos p { width: 352px; }
.isp-bento__card--gargalos p  { width: 341px; }
.isp-bento__card--matriz h3   { width: 365px; }
.isp-bento__card--matriz p    { width: 481px; }
.isp-bento__card--escopo h3,
.isp-bento__card--escopo .elementor-heading-title,
.isp-bento__card--escopo p    { width: 330px; }

/* ---------- Decoracao do card claro ---------- */
/* As ondas ficam FORA do fluxo. No fluxo elas eram um item de 852px de
   altura inflexivel dentro de um card de 705: como titulo e paragrafo
   encolhem por padrao, os dois eram espremidos ate a altura zero e o card
   aparecia vazio no site (era o que fazia a foto parecer pequena e solta).
   As coordenadas sao as do arquivo: Group 1000000966 em x=40 / y=336. */
.isp-bento__ondas {
	position: absolute;
	left: 40px;
	top: 336px;
	z-index: 0;
	display: block;
	width: 852px;
	height: 852px;
	pointer-events: none;
}

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

/* A foto fica ancorada no rodape do card claro. */
.isp-bento__foto {
	position: absolute;
	top: 278px;
	left: 41px;
	z-index: 1;
	width: 329px;
	height: 427px;
	overflow: hidden;
	pointer-events: none;
}

#isp-recebe .isp-bento__foto img {
	position: absolute;
	top: -0.08%;
	left: -16.53%;
	width: 133.33%;
	min-width: 133.33%;
	max-width: none;
	height: 137.91%;
	object-fit: cover;
}

/* O simbolo de vidro, dentro do card largo. */
.isp-bento__cristal {
	position: absolute;
	top: 424px;
	left: 986px;
	z-index: 1;
	width: 195px;
	height: 195px;
	pointer-events: none;
}

#isp-recebe .isp-bento__cristal img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Chips e botao ---------- */
#isp-recebe-fecho {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 976px;
	max-width: 100%;
}

/* O botao encolhe para o proprio tamanho; a linha de selos precisa da
   largura inteira, senao ela encolhe abaixo do conteudo e quebra em duas. */
#isp-recebe-fecho > .elementor-widget {
	width: auto;
	margin: 0;
	padding: 0;
}

#isp-recebe-fecho > .elementor-widget:first-child {
	width: 100%;
}

/* No arquivo os tres selos preenchem exatamente os 976 da faixa. Qualquer
   diferenca minima de metrica da fonte joga o terceiro para a linha de
   baixo, entao no desktop a linha nao quebra. */
.isp-chips {
	display: flex;
	/* row explicito: como <div> o padrao ja era esse, mas o container do
	   Elementor nasce em coluna e os tres selos viravam uma pilha. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
	width: 976px;
	max-width: 100%;
	/* O container do Elementor nasce com 10px de recuo em volta
	   (--container-default-padding). Como <div> nao havia recuo nenhum, e
	   os 20px a mais de altura empurravam a seção inteira. */
	padding: 0;
}

.isp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 24 de entrelinha + 5 de recuo de cada lado + 1 de contorno = 36, a
	   altura do selo no arquivo. Com os 12 de recuo do desenho o selo sai
	   com 50 — aqui o recuo vertical e o que sobra depois da entrelinha,
	   porque text-box-trim nao vale para caixa inline-flex. */
	padding: 5px 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 80px;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--isp-txt-claro);
	white-space: nowrap;
}

/* O selo virou widget de titulo (com header_size "span") para o texto ser
   editavel no Elementor. Duas correcoes de encaixe:
   - o .elementor-widget-container entre o selo e o texto sai do layout, senao
     o inline-flex do selo mede o div e nao o texto;
   - o widget de titulo impoe cor e tipografia do kit, entao aqui ele volta a
     herdar do selo, que e quem tem o desenho. */
.isp-chip > .elementor-widget-container {
	display: contents;
}

.isp-chip .elementor-heading-title {
	font: inherit;
	color: inherit;
}

.isp-chip--destaque {
	border-color: transparent;
	background-color: var(--isp-azul);
	color: #ffffff;
}

/* =========================================================================
   RESPONSIVO
   Abaixo de 1440 o bento vira uma pilha: as posicoes absolutas so fazem
   sentido na largura do arquivo.
   ========================================================================= */

@media (max-width: 1439px) {
	.isp-bento {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		width: 100%;
		height: auto;
	}

	.isp-bento__card,
	.isp-bento__card--organograma,
	.isp-bento__card--processos,
	.isp-bento__card--gargalos,
	.isp-bento__card--matriz,
	.isp-bento__card--escopo,
	.isp-bento__card--reuniao,
	.isp-bento__card--relatorio {
		position: static;
		width: auto;
		height: auto;
		min-height: 300px;
	}

	.isp-bento__card--organograma {
		grid-row: span 2;
	}

	.isp-bento__card p,
	.isp-bento__card h3,
	.isp-bento__card .elementor-heading-title {
		width: auto !important;
	}

	.isp-bento__ondas,
	.isp-bento__foto,
	.isp-bento__cristal {
		display: none;
	}
}

@media (max-width: 1024px) {
	#isp-recebe {
		gap: 48px;
		padding-block: 80px;
	}

	#isp-recebe-topo {
		width: 100%;
	}

	.isp-chips {
		flex-wrap: wrap;
		gap: 16px;
	}

	.isp-chip {
		white-space: normal;
	}
}

/* =========================================================================
   O QUE VOCE RECEBE NO CELULAR — Figma "03 O QUE VOCÊ RECEBE" (390x887)

   Regua: 64 | topo 174 | 16 | respiro 8 | 16 | vitrine 235 | 16 | setas 56
          | 16 | selos 132 | 16 | respiro 20 | 16 | botao 38 | 64

   No desktop os sete cards formam um bento absoluto de 1283x1072, com a
   foto e o cristal por cima. Em 390 isso vira um CARROSSEL de sete cards
   de 300x235 — pedido do cliente ("transforma essa sessão em carrossel"),
   e o unico arranjo em que os sete cabem sem virar uma coluna de 2000px.
   A vitrine e as setas sao montadas por isp.js; aqui vem so a aparencia.

   A foto e o cristal saem: eles sao peças da composicao do bento e nao
   existem no arquivo de 390.
   ========================================================================= */
@media (max-width: 767px) {
	/* Dois ids de proposito: o "#isp-recebe > .e-con { padding: 0 }" do
	   desktop pesa (1,1,0) e ganha de um id sozinho, entao o recuo do
	   celular era descartado e o texto encostava na borda. */
	#isp-recebe > #isp-recebe-topo,
	#isp-recebe > #isp-recebe-fecho {
		padding-inline: var(--isp-margem);
	}

	#isp-recebe {
		gap: 16px;
		padding: 64px 0;
	}

	#isp-recebe > .elementor-widget,
	#isp-recebe > .e-con {
		width: 100%;
	}

	#isp-recebe-topo {
		padding-inline: var(--isp-margem);
	}

	/* A grade absoluta vira o trilho do carrossel. */
	.isp-bento {
		width: auto;
		height: auto;
	}

	.isp-bento__card,
	.isp-bento__card--organograma,
	.isp-bento__card--processos,
	.isp-bento__card--gargalos,
	.isp-bento__card--matriz,
	.isp-bento__card--escopo,
	.isp-bento__card--reuniao,
	.isp-bento__card--relatorio {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 300px;
		width: 300px;
	}

	/* O ".e-con" empata o peso com ".e-con.e-flex", que e onde o Elementor
	   escreve flex-basis e largura do container. A lista de modificadores
	   acima so cobria os slugs da Discovery — na Governança e no
	   Outsourcing o card ficava com a largura do texto (750px) e a esteira
	   virava uma linha unica ilegivel. */
	.isp-bento__card.e-con {
		flex: 0 0 300px;
		width: 300px;
		height: 235px;
		gap: 12px;
		padding: 20px;
		border-radius: 18px;
	}

	.isp-bento__ico {
		width: 30px;
		height: 30px;
		flex: 0 0 30px;
	}

	.isp-bento__card h3,
	.isp-bento__card .elementor-heading-title {
		font-size: 18px;
		line-height: 25px;
	}

	.isp-bento__card p,
	.isp-bento__card--processos p,
	.isp-bento__card--gargalos p,
	.isp-bento__card--matriz h3,
	.isp-bento__card--matriz .elementor-heading-title,
	.isp-bento__card--matriz p,
	.isp-bento__card--escopo p {
		width: auto;
		font-size: 14px;
		line-height: 22px;
	}

	/* No carrossel o card CLARO acompanha a seta: quem esta na vez fica
	   branco, e os outros voltam ao vidro escuro. Antes o claro era fixo no
	   "organograma" (o destaque do quadro de 1440), entao ao avancar o
	   carrossel o branco ficava para tras. Quem marca a vez e o
	   data-ativo posto pelo carrossel em assets/isp.js. */
	.isp-bento__card--organograma {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.isp-bento__card--organograma h3,
	.isp-bento__card--organograma .elementor-heading-title {
		color: var(--isp-branco);
	}

	.isp-bento__card--organograma p {
		color: rgba(255, 255, 255, 0.6);
	}

	/* Sem JavaScript — e o editor do Elementor NAO roda o nosso JS — o
	   data-ativo nunca e posto. Sem este padrao o primeiro card ficava
	   claro pelo estilo antigo e o texto continuava branco: branco no
	   branco, ilegivel no painel. Aqui o primeiro card ja nasce claro, e
	   quando o carrossel entra em cena o data-ativo assume. */
	.isp-bento__card:first-child,
	.isp-bento__card[data-ativo] {
		border-color: rgba(13, 13, 13, 0.06);
		background-color: var(--isp-branco);
	}

	.isp-bento__card:first-child h3,
	.isp-bento__card:first-child .elementor-heading-title,
	.isp-bento__card[data-ativo] h3,
	.isp-bento__card[data-ativo] .elementor-heading-title {
		color: var(--isp-chumbo);
	}

	.isp-bento__card:first-child p,
	.isp-bento__card[data-ativo] p {
		color: rgba(13, 13, 13, 0.6);
	}

	/* O icone acompanha: azul sobre o card claro, como no arquivo. */
	.isp-bento__card:first-child .isp-bento__ico,
	.isp-bento__card[data-ativo] .isp-bento__ico {
		color: var(--isp-azul);
	}

	/* As ondas, a foto e o cristal sao da composicao do bento de 1283 e
	   nao entram no carrossel. */
	.isp-bento__ondas,
	.isp-bento__foto,
	.isp-bento__cristal {
		display: none;
	}

	/* ---------- Selos e botao ---------- */
	#isp-recebe-fecho {
		gap: 20px;
		width: 100%;
		padding-inline: var(--isp-margem);
	}

	/* No arquivo os tres selos ficam um por linha, centralizados, cada um
	   do tamanho do seu texto. Em fileira unica eles nao cabem em 342. */
	.isp-chips {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding-top: 20px;
	}

	/* Os tres selos sao iguais no arquivo de 390: vidro claro com fio. O
	   azul do primeiro e coisa do quadro de 1440. */
	.isp-chip,
	.isp-chip--destaque {
		padding: 7px 14px;
		border: 1px solid rgba(255, 255, 255, 0.14);
		background-color: rgba(255, 255, 255, 0.06);
		font-size: 12px;
		line-height: 18px;
		color: rgba(255, 255, 255, 0.85);
	}
}