/* =========================================================================
   DEPOIMENTOS nas paginas de servico — variante escura
   Figma: Frame 469 (1010:734), faixa y 4601–5450. Mesma estrutura da Home,
   com o fundo preto, os cards inativos em vidro escuro e a seta anterior azul.
   ========================================================================= */

/* justify-content:center: a faixa tem altura minima de 849 e o conteudo de
   algumas paginas (a Inteligencia, por exemplo) e mais baixo que isso — com
   flex-start o bloco ficava colado no topo e sobrava um vao embaixo. */
.isp-servico #isp-depoimentos {
	min-height: 849px;
	padding: 121px 0 120px;
	justify-content: center;
	background-color: var(--isp-preto);
	color: var(--isp-branco);
}

/* Na variante escura o degrade da direita e preto. */
.isp-servico .isp-depo__vitrine::after {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.86) 62%, rgba(0, 0, 0, 1) 100%);
}

/* Aqui a faixa tem 1280, e nao os 1308 da Home. */
.isp-servico #isp-depoimentos > .e-con,
.isp-servico #isp-depoimentos > .elementor-widget {
	width: var(--isp-largura);
}

.isp-servico .isp-depo__eyebrow .elementor-heading-title,
.isp-servico .isp-depo__titulo .elementor-heading-title {
	color: var(--isp-branco);
}

/* Aqui o titulo ocupa os 848 do bloco (na Home ele e travado em 652), e por
   isso cabe em duas linhas em vez de tres. */
.isp-servico .isp-depo__titulo .elementor-heading-title {
	width: 100%;
	max-width: 848px;
}

/* O card da vez segue branco; os outros viram vidro escuro. */
/* No arquivo o carrossel sangra ate a borda da pagina: o quarto card aparece
   pela metade em x 1339–1440, que e o que avisa que da para arrastar. A
   trilha ganha os 80px do recuo da direita; quem corta e o overflow da
   propria seção, entao nao nasce rolagem lateral. */
@media (min-width: 1440px) {
	.isp-servico .isp-depo__vitrine {
		/* align-self e obrigatorio: o .isp-depo centraliza os filhos, e sem
		   ele a vitrine mais larga sai 40px para a esquerda em vez de sangrar
		   so pela direita. */
		align-self: flex-start;
		width: calc(100% + 80px);
	}
}

.isp-servico .isp-depo__card {
	background-color: rgba(249, 249, 249, 0.2);
}

.isp-servico .isp-depo__card[data-ativo] {
	background-color: #ffffff;
}

/* Cinza-esbranquicado, e nao o marrom do arquivo: pedido do cliente em
   01/09/2026 ("deixar os textos brancos ali meio opacos dos demais
   depoimentos"). O card da vez segue com o texto escuro sobre branco. */
.isp-servico .isp-depo__citacao {
	color: rgba(255, 255, 255, 0.45);
}

.isp-servico .isp-depo__card[data-ativo] .isp-depo__citacao {
	color: var(--isp-chumbo);
}

.isp-servico .isp-depo__autor .isp-depo__cargo,
.isp-servico .isp-depo__autor span {
	color: rgba(255, 255, 255, 0.4);
}

/* O par com .isp-depo__nome: depois da conversao para widget o nome nao e
   mais um <strong>, e sim um titulo com essa classe. */
.isp-servico .isp-depo__autor .isp-depo__nome,
.isp-servico .isp-depo__autor strong {
	color: rgba(255, 255, 255, 0.65);
}

.isp-servico .isp-depo__card[data-ativo] .isp-depo__autor .isp-depo__cargo,
.isp-servico .isp-depo__card[data-ativo] .isp-depo__autor span {
	color: rgba(13, 13, 13, 0.8);
}

.isp-servico .isp-depo__card[data-ativo] .isp-depo__autor .isp-depo__nome,
.isp-servico .isp-depo__card[data-ativo] .isp-depo__autor strong {
	color: #000000;
}

/* A seta de voltar e azul nesta variante; a de avancar, escura. */
.isp-servico .isp-depo__btn--anterior {
	background-color: var(--isp-azul);
}

.isp-servico .isp-depo__btn--proximo {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--isp-linha);
}

@media (max-width: 1024px) {
	.isp-servico #isp-depoimentos {
		min-height: 0;
		padding-block: 80px;
	}
}