/* =========================================================================
   HERO — Figma: Hero 956:113 (1440x800)

   Nota de estrutura, vale para o site inteiro: nesta versao do Elementor,
   container com content_width "full" sai como .e-con-full e NAO cria o
   .e-con-inner — os widgets sao filhos diretos do proprio container.
   Por isso todo alinhamento, gap e padding e escrito no container em si.
   ========================================================================= */

#isp-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background-color: var(--isp-preto);
	overflow: hidden;
}

/* A faixa de 1280 dentro do quadro de 1440, com o hero a 800 de altura. */
/* ATENCAO ao eixo: container do Elementor nasce flex-direction:column.
   Escrever align-items/justify-content sem fixar a direcao alinha nos eixos
   trocados — align passa a valer para a horizontal e justify para a vertical.
   Aqui a coluna e proposital: justify centraliza na altura, align encosta
   o bloco na margem esquerda. */
#isp-hero-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: calc(var(--isp-largura) + var(--isp-margem) * 2);
	min-height: 800px;
	margin-inline: auto;
	padding: 0 var(--isp-margem);
}

/* ---------- Arte de fundo: o anel de neon ---------- */
/* Caixa de 1560x705 ancorada 60px a direita do centro, como no arquivo. */
#isp-hero-arte {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 1560px;
	height: 705px;
	/* 60 e a medida do arquivo, para o quadro de 1440. Acima disso a arte
	   e recuada (ver o bloco de min-width: 1441px): como ela e centrada na
	   tela, em monitor largo ela ia junto com o centro e o anel encostava
	   na borda direita. */
	margin-left: 60px;
	transform: translateX(-50%);
	overflow: hidden;
	pointer-events: none;
}

/* Pedido do cliente (01/09/2026): em tela larga o anel ficava colado na
   direita. Os 120px de recuo tiram ele da borda sem mexer no quadro de
   1440, que e o aprovado. */
@media (min-width: 1441px) {
	#isp-hero-arte {
		margin-left: -60px;
	}

	/* Com a arte recuada, a borda direita da peca passa a cair DENTRO da
	   tela, e ali o brilho do anel termina de uma vez — uma linha reta de
	   luz 40 para preto. Ate 1440 a peca sangra para fora da tela e nao ha
	   emenda a esconder.

	   Isso era feito com mask-image no proprio <video> e no <img>. Funciona
	   no Chrome headless (medi 2,6 tons de degrau), mas NAO no Chrome do
	   cliente: um <video> costuma ir para uma camada propria da GPU, e a
	   mascara da camada e ignorada — no print dele o degrau era de 41 tons,
	   a linha reta bem visivel. Agora quem apaga a borda e uma FAIXA POR
	   CIMA, com degrade ate o preto do hero: pintura comum, sem depender de
	   mascara nem de como o video foi composto.

	   O tamanho (190px) e o mesmo alcance dos 12% que a mascara cobria. A
	   faixa vive dentro de #isp-hero-arte, que tem overflow hidden, entao
	   ela nunca passa da arte; e o z-index 2 a poe sobre o video sem
	   alcancar o texto, que esta noutro nivel. */
	#isp-hero-arte::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 190px;
		height: 100%;
		background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);
		pointer-events: none;
	}
}

/* A foto nao preenche a caixa: entra deslocada, do jeito que esta no Figma. */
/* A imagem do anel e um widget de imagem nativo desde 28/08/2026, para o
   cliente poder troca-la no painel. A classe cai no invólucro do widget;
   as medidas do arquivo vao no <img> de dentro, e o invólucro so precisa
   nao atrapalhar. */
.isp-hero__anel,
.isp-hero__anel .elementor-widget-container {
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* O video do anel ocupa exatamente a caixa da imagem. A imagem continua no
   HTML por dois motivos: ela e o poster (o primeiro quadro aparece na hora,
   sem esperar o download) e e a alternativa para quem pede menos movimento
   no sistema. O video vem por widget de HTML proprio, irmao do widget de
   imagem — por isso o seletor dele nao esta dentro de .isp-hero__anel. */
/* O id no seletor do video e para vencer o "video { width: 100% }" que vem
   do Elementor: sem ele o anel animado saia com a largura inteira da arte
   (1560) em vez dos 83,3% da imagem. */
.isp-hero__anel img,
#isp-hero-arte .isp-hero__anel-video {
	position: absolute;
	top: 0.04%;
	left: 16.78%;
	width: 83.3%;
	height: 99.92%;
	max-width: none;
	object-fit: cover;
}

/* Sem z-index: com 1 o video subia ACIMA do veu, e o degrade que funde a
   arte no preto da seção deixava de aparecer — no celular isso virava um
   corte reto no pe da faixa. Sem z-index ele continua na frente da imagem
   (que vem antes no HTML) e atras do veu (que vem depois). */
.isp-hero__anel-video {
	pointer-events: none;
}

/* O iPhone desenha um botao de play por cima de todo <video> que ainda nao
   comecou — mesmo sem "controls", e mesmo quando o autoplay vai disparar um
   instante depois. Como aqui o video e enfeite de fundo, e nao um player, o
   botao e ruido: some, e o que fica no lugar e o poster, que e a mesma arte
   parada. */
.isp-hero__anel-video::-webkit-media-controls,
.isp-hero__anel-video::-webkit-media-controls-start-playback-button,
.isp-hero__anel-video::-webkit-media-controls-panel,
.isp-hero__anel-video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.isp-hero__anel-video {
		display: none;
	}
}

/* Os filhos da arte precisam ser ESTATICOS. Desde que a arte virou um
   container do Elementor (para a imagem do anel ser um widget nativo), o
   invólucro de cada filho nasce position:relative com altura zero — e o
   veu, que e absoluto com inset:0, colapsava para 0 de altura. Foi assim
   que o degrade sumiu do hero. */
#isp-hero-arte > .elementor-element,
#isp-hero-arte .elementor-shortcode {
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.isp-hero__veu {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(253.00857029050368deg, rgba(0, 0, 0, 0.25) 58.502%, rgba(0, 0, 0, 0.5) 63.112%);
}

/* ---------- Conteudo ---------- */
/* O bloco fica 7px acima do centro exato do hero (top: calc(50% - 7px)). */
#isp-hero-conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	/* O pai e uma coluna: o eixo cruzado e a horizontal. */
	align-self: flex-start;
	gap: 40px;
	width: 688px;
	max-width: 100%;
	padding: 0;
	margin-bottom: 14px;
}

/* Sem o padding padrao do widget o texto encosta na margem, como no Figma. */
#isp-hero-conteudo > .elementor-widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

.isp-hero__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 5.12px;
	text-transform: uppercase;
	color: var(--isp-txt-claro);
	margin: 0;
}

/* Titulo com o degrade de branco para cinza recortado no texto. */
.isp-hero__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	max-width: 688px;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 48px;
	line-height: 53px;
	font-weight: 400;
	/* O degrade recortado vem da classe .isp-degrade, na base. */
}

#isp-hero-conteudo .isp-hero__texto {
	max-width: 647px;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--isp-txt-claro);
}

.isp-hero__texto p {
	margin: 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

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

/* =========================================================================
   ESTEIRA DE NUMEROS — Figma 956:128
   Os seis itens somam 1910px num quadro de 1440: no arquivo eles aparecem
   cortados nas pontas. Aqui viram uma esteira infinita de verdade.
   ========================================================================= */

.isp-numeros {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	/* Escrito nos quatro lados: como container do Elementor, os 10px de
	   fabrica entrariam nas laterais e a esteira ganharia recuo. */
	padding: 42px 0;
	background-color: var(--isp-preto);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	overflow: hidden;
}

.isp-numeros__trilho {
	display: flex;
	/* A esteira e uma fila unica por definicao: como container do Elementor
	   ela herda flex-wrap:wrap e os dois grupos clonados pelo isp.js caiam
	   um embaixo do outro — a faixa dobrava de altura no celular. */
	flex-wrap: nowrap;
	width: max-content;
	padding: 0;
	animation: isp-esteira var(--isp-esteira-dur, 40s) linear infinite;
	will-change: transform;
}

.isp-numeros__grupo {
	display: flex;
	align-items: center;
	gap: 52px;
	flex: 0 0 auto;
	/* 26 de cada lado fecha 52 tambem na emenda entre um grupo e o seguinte. */
	margin: 0;
	padding: 0 26px;
	list-style: none;
}

.isp-numeros__grupo li,
.isp-numeros__grupo .isp-numeros__item {
	font-family: var(--isp-fonte-titulo);
	font-size: 16px;
	line-height: 26px;
	text-transform: uppercase;
	color: var(--isp-txt-claro);
	white-space: nowrap;
}

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

/* O item e um widget de titulo; a tipografia e a cor sao da esteira. */
.isp-numeros__item .elementor-heading-title {
	font: inherit;
	color: inherit;
}

.isp-numeros__grupo span {
	font-weight: 400;
}

@keyframes isp-esteira {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.isp-numeros__trilho {
		animation: none;
	}
}

/* =========================================================================
   RESPONSIVO
   O Figma so tem o quadro de 1440. Abaixo disso o hero recompoe:
   o anel perde forca e o texto ocupa a largura toda.
   ========================================================================= */

@media (max-width: 1200px) {
	#isp-hero-arte {
		width: 130%;
		height: auto;
		aspect-ratio: 1560 / 705;
		margin-left: 0;
		opacity: 0.7;
	}

	.isp-hero__anel img {
		position: static;
		width: 100%;
		height: auto;
	}
}

@media (max-width: 1024px) {
	#isp-hero-wrap {
		min-height: 0;
		padding-block: 160px 170px;
	}

	#isp-hero-conteudo {
		width: 100%;
		margin-bottom: 0;
	}

	.isp-hero__titulo .elementor-heading-title {
		font-size: 40px;
		line-height: 46px;
	}
}

/* =========================================================================
   HERO NO CELULAR — Figma "01 HERO" (390x900)

   A mudanca de arranjo, e nao so de tamanho: no desktop o anel de neon fica
   ATRAS do texto; em 390 ele vira uma faixa propria de 330 logo abaixo do
   header, e o texto comeca depois dela. Era isso que quebrava o hero — com
   a arte por tras, o titulo caia dentro do anel e nao se lia.

   A regua do arquivo, de cima para baixo:
     header 64 | arte 330 | 34 | eyebrow 16 | 12 | titulo 114 |
     20 | texto 144 | 24 | botao 42,6 | 31,4 | esteira 68  = 900
   ========================================================================= */
@media (max-width: 767px) {
	/* As duas camadas do hero (a arte e a esteira de numeros) nascem
	   position:absolute com inset:0 — e o que as poe ATRAS do texto no
	   desktop. Em 390 as duas entram no fluxo, entao a camada volta a ser
	   estatica; sem isto a arte continua por tras do titulo e a esteira
	   sobe para o topo, em cima do header. */
	#isp-hero > .isp-camada {
		position: static;
		overflow: visible;
	}

	/* A arte sai do absoluto e entra no fluxo, logo abaixo da faixa fixa. */
	#isp-hero-arte {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 330px;
		margin-top: 64px;
		margin-left: 0;
		aspect-ratio: auto;
		opacity: 1;
		transform: none;
	}

	/* O anel entra deslocado, nas medidas do arquivo de 390.
	   ATENCAO: a caixa do Figma tem 936x423 em -424,-57, mas o
	   preenchimento e do tipo CROP com a matriz [[1.201,0,-0.201],[0,1.001,0]]
	   — ou seja, a imagem NAO ocupa a caixa inteira: ela vai de 16,74% a
	   100% da largura dela. Em pixels isso da 779x423 comecando em -267.
	   Com object-fit:cover na caixa cheia a imagem caia 78px a esquerda, e
	   foi o "foto tem que ser centralizada" do cliente. */
	/* O recuo centra o SIMBOLO na tela, e nao a imagem. Centrar a imagem
	   (-204,5, que e a conta (779-370)/2) joga o simbolo 70px para a
	   direita, porque o anel nao esta no meio do arquivo: o brilho forte
	   fica de um lado so. O simbolo esta a 58,9% da largura da arte, entao
	   10 + left + 0,589 x 779 = 195. A caixa nao recorta (a camada do hero
	   fica overflow:visible em 390), quem recorta e a propria tela. */
	.isp-home .isp-hero__anel img,
	.isp-home #isp-hero-arte .isp-hero__anel-video {
		position: absolute;
		top: -57px;
		left: 50%;
		margin-left: -459px;
		width: 779px;
		height: 423px;
		max-width: none;
		object-fit: cover;
	}

	/* O video tem outra proporcao que a imagem (2,04 contra 1,84), e com
	   object-fit:cover o recorte muda: o simbolo esta a 66,5% da largura do
	   video e a 58,9% da largura da imagem. Com a margem da imagem ele
	   sobrava 73px a direita do meio da tela — foi o "video na ponta
	   direita" do cliente. A conta: a caixa mostra 863,6px do video
	   (779 / 0,6295), o simbolo cai a 532px da borda esquerda da caixa,
	   entao a caixa recua exatamente esses 532. */
	.isp-home #isp-hero-arte .isp-hero__anel-video {
		margin-left: -557px;
	}

	/* O veu cobre a faixa inteira e faz duas coisas ao mesmo tempo, como no
	   arquivo: escurece a arte (no Figma isso e um degrade preto de 50% a
	   100% de alfa, com 50% de opacidade na camada) e funde os ultimos
	   130px no preto da seção. Sem o escurecimento a arte saia bem mais
	   saturada que o desenho. */
	.isp-hero__veu {
		top: 0;
		bottom: 0;
		height: auto;
		/* O preto cheio chega aos 96%, e nao so no 100%: a arte e cortada
		   pelo overflow da caixa, e quando um arco aceso do video caia
		   justo na ultima fileira de pixels ele aparecia como um fio claro
		   atravessando a tela. Com os ultimos 4% ja pretos, o corte
		   acontece dentro do preto e nao se ve. */
		background-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.38) 55%,
			rgba(0, 0, 0, 0.9) 84%,
			#000000 96%);
	}

	/* Sem a arte por tras, o veu que escurecia o hero inteiro sai de cena. */
	.isp-home #isp-hero::after {
		content: none;
	}

	#isp-hero-wrap {
		min-height: 0;
		padding-block: 34px 31.4px;
	}

	#isp-hero-conteudo {
		gap: 12px;
		width: 100%;
		margin-bottom: 0;
	}

	.isp-hero__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 2.4px;
		color: rgba(255, 255, 255, 0.7);
	}

	.isp-hero__titulo .elementor-heading-title {
		max-width: 100%;
		font-size: 32px;
		line-height: 38px;
		color: #ffffff;
	}

	/* Os vaos do arquivo nao sao iguais (12 / 20 / 24); o gap cobre o menor
	   e cada bloco acrescenta a diferenca. */
	#isp-hero-conteudo .isp-hero__texto {
		max-width: 100%;
		margin-top: 8px;
		/* 14/22 em vez de 15/24 (pedido do cliente, 02/09/2026): o apoio
		   estava competindo com o titulo. */
		font-size: 14px;
		line-height: 22px;
	}

	#isp-hero-conteudo > .elementor-widget-shortcode,
	#isp-hero-conteudo > .elementor-widget-button {
		margin-top: 12px;
	}

	/* A esteira sai do rodape absoluto e fecha a seção no fluxo. */
	.isp-numeros {
		position: relative;
		bottom: auto;
		padding-block: 26px;
		background-color: #050508;
	}

	.isp-numeros__grupo {
		gap: 34px;
		padding: 0 17px;
	}

	/* No arquivo de 390 a esteira nao e em caixa alta — "+5 ANOS exclusivos
	   com ISPs" mantem a caixa do texto. */
	.isp-numeros__grupo li,
	.isp-numeros__grupo .isp-numeros__item {
		font-size: 13px;
		line-height: 16px;
		letter-spacing: 0.5px;
		text-transform: none;
	}
}