/* =========================================================================
   HEADER
   Figma: HEADER 956:137 — altura 80, faixa sobre o hero, conteudo em 1280.
   ========================================================================= */

/* O header sobrepoe o hero, entao sai do fluxo: o hero comeca em y=0. */
#isp-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	height: 80px;
	/* Fundo e desfoque pedidos pelo cliente (01/09/2026): com 5% de preto o
	   header era praticamente transparente e a arte do hero passava por
	   tras da marca — o logotipo sumia dentro do anel de neon. O desfoque e
	   o mesmo da esteira de numeros (16px), para as duas faixas de vidro do
	   topo terem o mesmo material. */
	background-color: rgba(5, 5, 8, 0.6);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--isp-linha);
	/* Sem os 10px que o container do Elementor traz de fabrica: com eles a
	   faixa interna, que tem a altura cheia do header, comecava 10px abaixo
	   e transbordava por baixo — a marca e o menu ficavam 30px do topo e
	   10px da base, ou seja, fora do centro da barra. */
	padding: 0;
}

/* O container do Elementor nao pode limitar a largura da faixa. */
#isp-header > .e-con-inner,
#isp-header > .elementor-container {
	max-width: none;
	width: 100%;
	height: 100%;
	padding: 0;
}

#isp-header .elementor-widget-shortcode,
#isp-header .elementor-widget-container {
	width: 100%;
	height: 100%;
}

.isp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: calc(var(--isp-largura) + var(--isp-margem) * 2);
	height: 80px;
	margin-inline: auto;
	padding-inline: var(--isp-margem);
}

/* ---------- Logo ---------- */
.isp-logo {
	display: inline-flex;
	align-items: center;
	gap: 6.4px;
	text-decoration: none;
	line-height: 1;
	flex: 0 0 auto;
}

.isp-logo__simbolo {
	display: block;
	width: 21.016px;
	height: 23.291px;
	flex: 0 0 auto;
}

.isp-logo__texto {
	display: inline-flex;
	align-items: center;
	gap: 3.966px;
	font-family: var(--isp-fonte-titulo);
	font-size: 21.603px;
	line-height: 24.341px;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
}

.isp-logo__texto strong {
	font-weight: 700;
}

.isp-logo__texto > span {
	font-weight: 400;
}

/* No header o simbolo e branco; no rodape e no CTA final, azul. */
.isp-logo--header {
	color: #ffffff;
}

.isp-logo--azul {
	color: var(--isp-azul);
}

/* ---------- Navegacao ---------- */
.isp-nav {
	display: flex;
	align-items: center;
}

.isp-nav__lista {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O tracinho depois do ultimo item: 1x24 a 10% de branco. */
.isp-nav__lista::after {
	content: "";
	display: block;
	width: 1px;
	height: 24px;
	background-color: var(--isp-linha);
	flex: 0 0 1px;
}

.isp-nav__lista > li > a {
	display: inline-block;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Item da pagina atual: negrito e off-white, como no Figma. */
.isp-nav__lista > li.current-menu-item > a,
.isp-nav__lista > li.current_page_item > a,
.isp-nav__lista > li > a:hover {
	font-weight: 700;
	color: var(--isp-branco);
}

/* ---------- Submenu de "Solucoes" ----------
   O item ganha filhos no menu do WordPress (Aparencia > Menus) e o
   wp_nav_menu do header ja roda com depth 2. No desktop o painel abre no
   hover e no foco pelo teclado; no celular a lista vira um bloco recuado,
   sempre visivel — sanfona com toque exige um segundo toque so para abrir e
   e o que mais faz o visitante desistir do menu. */
.isp-nav__lista > li {
	position: relative;
}

/* A seta indica que o item abre. */
.isp-nav__lista > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: 2px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.isp-nav__lista > li.menu-item-has-children:hover > a::after,
.isp-nav__lista > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg);
	vertical-align: -1px;
}

.isp-nav__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 232px;
	margin: 0;
	padding: 10px;
	list-style: none;
	border: 1px solid var(--isp-linha);
	border-radius: 16px;
	background-color: rgba(4, 4, 4, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translate(-50%, -6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* A ponte de 12px cobre o vao entre o item e o painel: sem ela o painel
   fecha quando o ponteiro atravessa o espaco vazio. */
.isp-nav__lista > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}

.isp-nav__lista > li:hover > .sub-menu,
.isp-nav__lista > li:focus-within > .sub-menu {
	opacity: 1;
	transform: translate(-50%, 12px);
	pointer-events: auto;
}

.isp-nav__lista .sub-menu > li > a {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	font-family: var(--isp-fonte-corpo);
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.isp-nav__lista .sub-menu > li > a:hover,
.isp-nav__lista .sub-menu > li.current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.isp-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* O tema Hello Elementor pinta TODO <button> de rosa no hover e no foco —
   ninguem escreveu isso no projeto, vem do reset dele. Sem estas linhas o
   hamburguer virava um retangulo rosa ao ser tocado. */
.isp-nav__toggle:hover,
.isp-nav__toggle:focus,
.isp-nav__toggle:focus-visible,
.isp-nav__toggle:active {
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	outline: none;
}

.isp-nav__toggle:focus-visible .isp-nav__barra {
	/* O foco continua visivel para quem navega pelo teclado, so que no
	   tracinho, e nao num retangulo colorido. */
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.isp-nav__barra {
	display: block;
	width: 22px;
	height: 2px;
	margin-inline: auto;
	background-color: #ffffff;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* =========================================================================
   HEADER E RODAPE NO RESPONSIVO
   O Figma so tem o quadro de 1440; daqui para baixo o arranjo e derivado.
   ========================================================================= */

@media (max-width: 1024px) {
	/* O header GRUDA no topo daqui para baixo.
	   Ele nasce absoluto para sobrepor o hero, o que no desktop e certo: a
	   pagina tem 1440 de largura e o menu inteiro esta na tela. No celular
	   a pagina tem 15.000px de altura e o unico jeito de abrir o menu era
	   voltar ate o topo — o botao do hamburguer ia embora com a rolagem.
	   Era isto o "os links do menu nao funcionam": nao dava nem para
	   alcancar o menu. Fixo, ele acompanha a leitura. */
	#isp-header {
		position: fixed;
	}

	/* Como o header passa a flutuar, toda ancora precisa parar ABAIXO dele,
	   senao o titulo da seção fica escondido atras da faixa. */
	:target,
	[id^="isp-"] {
		scroll-margin-top: 88px;
	}

	.isp-nav__toggle {
		display: flex;
		position: relative;
		z-index: 2;
	}

	/* A lista vira um painel que desce sob a faixa do header. */
	.isp-nav__lista {
		position: fixed;
		top: 80px;
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 20px var(--isp-margem) 28px;
		background-color: rgba(4, 4, 4, 0.98);
		border-bottom: 1px solid var(--isp-linha);
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		/* O visibility e a trava de verdade: com ele o painel fechado sai do
		   teste de acerto inteiro, e nenhuma regra de filho consegue
		   reativar o clique por engano. A transicao segura a saida ate a
		   opacidade terminar. */
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.isp-nav.is-aberto .isp-nav__lista {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		visibility: visible;
		transition-delay: 0s;
	}

	/* O tracinho do fim so faz sentido com a lista na horizontal. */
	.isp-nav__lista::after {
		display: none;
	}

	.isp-nav__lista > li {
		width: 100%;
	}

	.isp-nav__lista > li > a {
		display: block;
		width: 100%;
		padding-block: 10px;
		font-size: 18px;
		line-height: 28px;
	}

	/* No painel do celular o submenu deixa de ser flutuante: vira uma lista
	   recuada logo abaixo do item, sempre aberta. */
	.isp-nav__lista .sub-menu {
		position: static;
		gap: 0;
		min-width: 0;
		margin: 2px 0 8px;
		padding: 0 0 0 14px;
		border: 0;
		border-left: 1px solid var(--isp-linha);
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
		opacity: 1;
		transform: none;
		/* inherit, e NAO auto: com "auto" os links do submenu continuavam
		   clicaveis mesmo com o painel fechado. Como o painel e fixed e
		   cobre os ~400px de cima da tela, tocar num card de "Para quem e"
		   ou numa pergunta do FAQ acertava um link invisivel e a pagina
		   pulava para /governanca/ sozinha (relato do cliente, 28/08/2026).
		   Herdando, o submenu so aceita toque quando o painel aceita. */
		pointer-events: inherit;
	}

	.isp-nav__lista > li:hover > .sub-menu,
	.isp-nav__lista > li:focus-within > .sub-menu {
		transform: none;
	}

	.isp-nav__lista .sub-menu > li > a {
		padding: 7px 10px;
		font-size: 16px;
	}

	/* A seta do item pai nao tem funcao com a lista sempre aberta. */
	.isp-nav__lista > li.menu-item-has-children > a::after {
		display: none;
	}

	.isp-nav__lista > li.menu-item-has-children::after {
		display: none;
	}

	/* Com o menu aberto a pagina nao rola atras do painel. */
	body.isp-menu-aberto {
		overflow: hidden;
	}

	/* As duas barras viram um X. */
	.isp-nav.is-aberto .isp-nav__barra:first-child {
		transform: translateY(3.5px) rotate(45deg);
	}

	.isp-nav.is-aberto .isp-nav__barra:nth-child(2) {
		transform: translateY(-3.5px) rotate(-45deg);
	}
}

/* =========================================================================
   RODAPE
   Figma: Frame 35739 1024:152 — py 59, gap 73, colunas com gap 121.188.
   ========================================================================= */

#isp-rodape {
	position: relative;
	background-color: var(--isp-preto);
	/* Nos quatro lados: com "padding-block" so o eixo vertical era escrito,
	   e o horizontal caia nos 10px de fabrica do container do Elementor —
	   o rodape ficava 10px mais para dentro que todas as outras seções. */
	padding: 59px 0 0;
	overflow: hidden;
}

#isp-rodape > .e-con-inner,
#isp-rodape > .elementor-container {
	max-width: none;
	width: 100%;
	padding: 0;
}

.isp-rodape__inner {
	display: flex;
	align-items: flex-start;
	gap: 121.188px;
	width: 100%;
	max-width: calc(var(--isp-largura) + var(--isp-margem) * 2);
	margin-inline: auto;
	padding-inline: var(--isp-margem);
}

.isp-rodape__marca {
	display: flex;
	flex-direction: column;
	gap: 41.048px;
	flex: 0 0 182.76px;
}

/* O lockup do rodape e maior que o do header. */
#isp-rodape .isp-logo__simbolo {
	width: 25.674px;
	height: 28.453px;
}

#isp-rodape .isp-logo {
	gap: 7.819px;
}

#isp-rodape .isp-logo__texto {
	font-size: 26.391px;
	line-height: 29.737px;
	gap: 4.846px;
}

.isp-rodape__redes {
	display: flex;
	align-items: center;
	gap: 23.456px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isp-rodape__redes a {
	display: grid;
	place-items: center;
	width: 23.456px;
	height: 23.456px;
	color: var(--isp-branco);
	transition: opacity 0.2s ease;
}

/* Instagram e LinkedIn nascem a 50% no arquivo; o YouTube, cheio. */
.isp-rodape__redes li:not(:first-child) a {
	opacity: 0.5;
}

.isp-rodape__redes a:hover {
	opacity: 1;
}

.isp-icone {
	display: block;
	width: 13.6825px;
	height: 13.6825px;
	overflow: visible;
}

.isp-icone--youtube {
	width: 15.6372px;
	height: 11.2392px;
}

.isp-rodape__coluna {
	flex: 0 0 183.737px;
}

.isp-rodape__lista {
	display: flex;
	flex-direction: column;
	gap: 17.592px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isp-rodape__lista a {
	font-family: var(--isp-fonte-titulo);
	font-size: 15.637px;
	line-height: 25.41px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.isp-rodape__lista li.is-destaque a {
	color: var(--isp-txt-claro);
}

.isp-rodape__lista a:hover {
	color: #ffffff;
}

.isp-rodape__legal {
	flex: 0 0 363.565px;
}

.isp-rodape__legal p {
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 15.637px;
	line-height: 25.41px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
}

.isp-rodape__legal strong {
	font-weight: 800;
}

/* Marca d'agua: "ISPLEADERS" gigante, esmaecendo de cima para baixo. */
/* A marca d'agua acompanha a largura da tela em vez de ficar presa aos
   243,6px do quadro de 1440: com tamanho fixo ela encostava na borda
   esquerda e deixava o resto da faixa vazio em qualquer tela mais larga.
   16,9vw e exatamente a proporcao que ela tem no arquivo (243,604/1440),
   entao em 1440 o desenho continua identico. */
.isp-rodape__marca-dagua {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5.07vw;
	font-family: var(--isp-fonte-titulo);
	font-size: 16.9vw;
	line-height: 1.1268;
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0.179%, rgba(255, 255, 255, 0) 100.18%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =========================================================================
   RODAPE NO RESPONSIVO
   Estas regras precisam vir DEPOIS das regras base acima: o
   .isp-rodape__inner base declara display:flex, e uma media query escrita
   antes dele perdia — a grade nao chegava a valer e as colunas seguiam em
   flex, saindo pela borda no celular.
   ========================================================================= */

@media (max-width: 1024px) {
	/* As quatro colunas viram duas. Grade em vez de flex-wrap: com wrap, as
	   bases fixas de cada coluna deixavam cada uma numa fileira propria e o
	   rodape abria buracos de mais de 150px. */
	.isp-rodape__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 40px;
	}

	.isp-rodape__marca,
	.isp-rodape__coluna,
	.isp-rodape__legal {
		flex: none;
	}

	.isp-rodape__legal {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   HEADER NO CELULAR — Figma "ISP - Home MOBILE 390", HEADER de 390x64

   A faixa encolhe de 80 para 64. O lockup e o mesmo do desktop (simbolo de
   21x23,3 e texto de 21,6) — o arquivo de 390 nao reduz a marca. O
   hamburguer e de 24x24 com duas barras de 22x2 separadas por 5.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-header {
		height: 64px;
	}

	.isp-header__inner {
		height: 64px;
		gap: 16px;
	}

	/* A ancora precisa parar abaixo da faixa de 64, com 16 de respiro. */
	:target,
	[id^="isp-"] {
		scroll-margin-top: 80px;
	}

	.isp-nav__toggle {
		width: 24px;
		height: 24px;
		gap: 5px;
	}

	/* O painel do menu encosta na faixa nova. */
	.isp-nav__lista {
		top: 64px;
	}
}

/* =========================================================================
   RODAPE NO CELULAR — Figma "11 RODAPÉ" (390x609)

   Recuo 48 em cima, 24 nas laterais, nada embaixo; vao de 32 entre os
   blocos. As duas colunas viram uma pilha unica, cada link com 15/22 e 12
   de vao. O primeiro item de cada coluna e o titulo, em branco cheio.

   A linha de redes sociais NAO esta no arquivo de 390 — ela existe so no
   quadro de 1440. Fica escondida aqui para o celular bater com o desenho
   aprovado; devolver e so apagar esta regra.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-rodape {
		padding: 48px 0 0;
	}

	.isp-rodape__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.isp-rodape__marca {
		gap: 24px;
	}

	/* No celular o lockup do rodape volta ao tamanho do header. */
	#isp-rodape .isp-logo__simbolo {
		width: 21.016px;
		height: 23.291px;
	}

	#isp-rodape .isp-logo {
		gap: 6.4px;
	}

	#isp-rodape .isp-logo__texto {
		font-size: 21.603px;
		line-height: 24.341px;
		gap: 3.966px;
	}

	.isp-rodape__redes {
		display: none;
	}

	/* No celular o simbolo do rodape e branco, como o do header. */
	#isp-rodape .isp-logo--azul {
		color: #ffffff;
	}

	/* O primeiro item de cada coluna e o titulo dela, em branco cheio. No
	   desktop so a primeira coluna tem a marca is-destaque no HTML; aqui a
	   regra vale para as duas, como no arquivo. */
	.isp-rodape__lista li:first-child a {
		color: #ffffff;
	}

	.isp-rodape__lista {
		gap: 12px;
	}

	/* A entrelinha precisa estar tambem no <li>: o <a> e inline e quem
	   define a altura da caixa de linha e o item da lista. */
	.isp-rodape__lista li {
		line-height: 22px;
	}

	.isp-rodape__lista a {
		font-family: var(--isp-fonte-corpo);
		font-size: 15px;
		line-height: 22px;
		color: rgba(255, 255, 255, 0.6);
		white-space: normal;
	}

	.isp-rodape__legal p {
		font-family: var(--isp-fonte-corpo);
		font-size: 12px;
		line-height: 20px;
		color: rgba(255, 255, 255, 0.45);
	}

	/* No arquivo de 390 a marca d'agua tem 44px e -1 de entreletra, e nao a
	   proporcao de 16,9vw do quadro de 1440 (que daria 66 e estouraria). */
	.isp-rodape__marca-dagua {
		margin-top: 32px;
		font-size: 44px;
		line-height: 1.3;
		letter-spacing: -1px;
	}
}




/* Assinatura da agencia no rodape: vira link para o site da Sales Check
   (pedido do cliente em 01/09/2026). Herda a cor do paragrafo para nao
   virar um azul solto no meio do texto legal; o sublinhado so aparece no
   ponteiro. */
.isp-rodape__autor {
	color: inherit;
	text-decoration: none;
}

.isp-rodape__autor:hover,
.isp-rodape__autor:focus-visible {
	text-decoration: underline;
}