/* =========================================================================
   CTA FINAL — "É para isso que existe o Discovery."
   Figma: Content 956:913 — card de 1280x521.465 em y 10689, dentro da faixa
   escura y 10569–11267.
   ========================================================================= */

#isp-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 120px var(--isp-margem) 57px;
	background-color: var(--isp-preto);
	color: var(--isp-branco);
	overflow: hidden;
}

#isp-cta > .e-con,
#isp-cta > .elementor-widget {
	width: 100%;
	max-width: var(--isp-largura);
	margin: 0;
	padding: 0;
}

#isp-cta-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	width: 100%;
	min-height: 0;
	border: 1px solid var(--isp-linha);
	border-radius: 32px;
	overflow: hidden;
}

/* O :not(.isp-camada) e essencial: este seletor tem especificidade maior que
   a da classe e, sem a excecao, ele sobrescreve o position:absolute da camada.
   Ela vira um bloco de altura zero, a arte de vidro e cortada pelo overflow
   e o card fica preto — sem erro nenhum em lugar nenhum. */
#isp-cta-card > .elementor-widget:not(.isp-camada) {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ---------- Arte de vidro ---------- */
/* A caixa da foto e mais alta que o card e sangra em cima e embaixo. */
.isp-cta__arte {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 1276.433px;
	height: 668px;
	transform: translate(-50%, -50%);
	overflow: hidden;
	pointer-events: none;
}

#isp-cta-card .isp-cta__arte img {
	position: absolute;
	top: -3.34%;
	left: 17.5%;
	width: 100%;
	min-width: 100%;
	max-width: none;
	height: 106.65%;
	object-fit: cover;
}

/* O recuo do card precisa do PAI no seletor: "#isp-cta > .e-con" zera o
   padding de todo filho da seção e, sendo id+classe, ganha de "#isp-cta-card"
   sozinho — era por isso que a marca encostava no topo e o botao no pe.
   Os 120 em cima e embaixo sao o pedido do cliente (01/09/2026). */
#isp-cta > #isp-cta-card {
	padding: 120px 42px;
}

/* Veu radial atras do texto. Ele so existia abaixo de 1024; no quadro de
   1440 o titulo branco cruza o nucleo aceso do cristal e some no meio da
   frase. Aqui ele entra em todas as larguras, mais fraco que o do celular
   (0,55 contra 0,75 no centro), o suficiente para o texto ler sem apagar a
   peca — que continua acesa nas bordas, onde nao ha texto. */
#isp-cta-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(85% 75% at 50% 50%,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.3) 55%,
		rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/* ---------- Conteudo ---------- */
/* O lockup do CTA e maior que o do header e tem o simbolo azul. */
#isp-cta-card .isp-logo {
	gap: 8px;
	justify-content: center;
	width: 100%;
}

#isp-cta-card .isp-logo__simbolo {
	width: 26.27px;
	height: 29.113px;
}

#isp-cta-card .isp-logo__texto {
	font-size: 27.003px;
	line-height: 30.426px;
	gap: 4.958px;
}

.isp-cta__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	width: 407px;
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--isp-fonte-titulo);
	font-size: 42px;
	line-height: 52px;
	font-weight: 400;
	text-align: center;
}

/* Aqui o titulo NAO usa o degrade recortado no texto, e o resto do site usa.
   Neste ponto especifico o Chrome descarta o background-image do elemento:
   o computado volta 'none' mesmo com regra de id no ultimo arquivo, com
   gradiente simples, com o recorte num <span> interno e com inline-block —
   enquanto um background-color no mesmo lugar pinta normalmente. Com a cor
   do texto transparente, isso deixava o titulo invisivel.
   Solucao: cor solida na media medida do degrade no render do Figma
   (rgb(214,214,214) nos pixels do glifo). A diferenca para o degrade
   255->153 e imperceptivel; um titulo invisivel nao e. */
#isp-cta-card .isp-degrade-linha {
	color: rgb(214, 214, 214);
}

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

#isp-cta-card .isp-cta__texto p {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	width: 512px;
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	text-align: center;
	color: var(--isp-txt-claro);
}

.isp-cta__texto p {
	margin: 0;
}

/* O botao nao pode esticar na largura do card. */
#isp-cta-card > .elementor-widget-shortcode:last-child,
#isp-cta-card > .elementor-widget-button:last-child {
	display: flex;
	justify-content: center;
	width: auto;
}

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

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

	#isp-cta-card {
		gap: 32px;
		min-height: 0;
		padding: 40px 24px;
	}

	/* No quadro de 1440 o texto ocupa a metade esquerda e a arte de vidro
	   fica livre na direita. Abaixo disso o card estreita, o texto passa por
	   cima da arte e fica ilegivel — entao ela recua para plano de fundo. */
	.isp-cta__arte {
		width: 140%;
		height: 100%;
		opacity: 0.4;
	}

	#isp-cta-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}

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

/* =========================================================================
   CTA FINAL NO CELULAR — Figma "10 CTA FINAL" (390x522)

   Regua: 64 | card 394,5 | 64
   Card: 342 de largura, raio 24, fio branco a 10%, recuo 36/24 e vao 20 —
   lockup, titulo, texto e botao, todos centralizados.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-cta {
		padding: 64px var(--isp-margem);
	}

	/* Com o pai no seletor: "#isp-cta > .elementor-widget" zera o padding de
	   todo filho e, sendo id+classe, ganha de um id sozinho — o card ficava
	   sem os 36/24 do desenho e fechava 80px mais curto. */
	/* O degrade do card entra explicito: no desktop o brilho vem da arte de
	   vidro (.isp-cta__arte), que e um recorte de 1276x668 feito para o
	   quadro de 1440 e em 390 nao pinta nada util. O arquivo de 390 pede um
	   degrade simples de #10165a a #02030c. O angulo ja vem corrigido pela
	   proporcao do card (342x394,5): 139,5deg. */
	#isp-cta > #isp-cta-card {
		gap: 20px;
		padding: 36px 24px;
		border-radius: 24px;
		background-image: linear-gradient(139.5deg, #10165a 0%, #02030c 100%);
	}

	#isp-cta-card .isp-cta__arte {
		display: none;
	}

	/* No celular o simbolo do lockup e branco, e nao azul. */
	#isp-cta-card .isp-logo--azul {
		color: #ffffff;
	}

	/* E o botao e a pilula clara com disco azul, e nao a pilula azul: sobre
	   o card escuro o azul sobre azul sumia. */
	#isp-cta-card .isp-btn--azul {
		background-color: var(--isp-branco);
		color: #000000;
	}

	#isp-cta-card .isp-btn--azul .isp-btn__ico {
		background-color: var(--isp-azul);
		color: #ffffff;
	}

	#isp-cta-card .isp-btn--azul:hover,
	#isp-cta-card .isp-btn--azul:focus-visible {
		color: #000000;
	}

	#isp-cta-card .isp-logo__simbolo {
		width: 21.016px;
		height: 23.291px;
	}

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

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

	.isp-cta__titulo .elementor-heading-title {
		width: 100%;
		font-size: 28px;
		line-height: 34px;
	}

	#isp-cta-card .isp-cta__texto p {
		width: 100%;
		font-size: 14px;
		line-height: 22px;
	}
}