/* =========================================================================
   O QUE NOSSOS CLIENTES FALAM
   Figma: Group 437 (956:814) — faixa clara y 7493–8423 (930 de altura).
   Bloco interno em x 82 / y 7613, 1308 de largura, gap 60.
   ========================================================================= */

#isp-depoimentos {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
	/* 829, e nao os 930 do retangulo: a secao azul de "Quem somos" comeca
	   em y=8322 e cobre os ultimos 101px desta faixa no arquivo. */
	min-height: 829px;
	padding: 120px 0 0;
	background-color: var(--isp-branco);
	color: #000000;
	overflow: hidden;
}

/* A faixa do arquivo comeca em x=82 e tem 1308 — 2px mais larga que a grade
   de 1280 e deslocada 2px para a direita. */
#isp-depoimentos > .e-con,
#isp-depoimentos > .elementor-widget {
	width: 1308px;
	max-width: calc(100% - var(--isp-margem) * 2);
	margin: 0;
	padding: 0;
}

/* ---------- Cabecalho ---------- */
#isp-depoimentos-topo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 848px;
	max-width: 100%;
	text-align: center;
}

#isp-depoimentos-topo > .elementor-widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

.isp-depo__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	text-transform: uppercase;
	color: #000000;
}

.isp-depo__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	width: 652px;
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--isp-fonte-titulo);
	font-size: 36px;
	line-height: 52px;
	font-weight: 400;
	color: #000000;
}

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

/* ---------- Carrossel ---------- */
.isp-depo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
}

/* ---------- Vitrine: o degrade que suaviza o corte da direita ----------
   Pedido do cliente (26/08/2026). O quarto card aparece cortado de proposito
   (e o que avisa que da para arrastar), mas o corte seco ficava duro demais.
   O degrade e pintado na cor da faixa, entao ele funciona igual na variante
   clara da Home e na escura das paginas de servico — basta a cor mudar. */
.isp-depo__vitrine {
	position: relative;
	width: 100%;
}

.isp-depo__vitrine::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 120px;
	pointer-events: none;
	background-image: linear-gradient(to right, rgba(242, 243, 248, 0) 0%, rgba(242, 243, 248, 0.86) 62%, rgba(242, 243, 248, 1) 100%);
}

/* SO do lado direito, e o motivo esta na geometria: o card da vez encosta na
   borda esquerda da vitrine (o encaixe para sempre num limite de card),
   enquanto na direita sobra sempre um card cortado. Um veu a esquerda nao
   teria corte nenhum para suavizar — ele cairia em cima do depoimento que a
   pessoa esta lendo, comendo o comeco de cada linha. Foi o que aconteceu
   entre 27 e 28/08/2026: o pedido do cliente por "o degrade da esquerda
   tambem" veio de quando a esteira parava no meio de um card, o que a
   esteira infinita (ver assets/isp.js) deixou de fazer. */

/* Nao ha regra de "fim da esteira": desde 27/08/2026 o carrossel e infinito
   (ver assets/isp.js), entao sempre ha card entrando pela direita e o veu
   daquele lado nunca sai de cena. */

/* A esteira desliza por scroll horizontal: o trilho e o proprio contêiner
   rolavel, entao a navegacao funciona no toque sem nenhum JS. */
.isp-depo__trilho {
	display: flex;
	align-items: stretch;
	gap: 15px;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* scroll-behavior herdado transformaria qualquer reposicionamento numa
	   animacao de volta; o clique nos botoes pede o smooth explicitamente. */
	scroll-behavior: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Espaco para a sombra do card nao ser cortada pelo overflow. */
	padding-block: 4px;
}

.isp-depo__trilho::-webkit-scrollbar {
	display: none;
}

.isp-depo__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	flex: 0 0 405px;
	width: 405px;
	margin: 0;
	padding: 32px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 32px;
	background-color: #ffffff;
	scroll-snap-align: start;
	opacity: 0.5;
	transition: opacity 0.35s ease;
}

/* O card da vez fica em opacidade cheia, como no arquivo. */
.isp-depo__card[data-ativo] {
	opacity: 1;
}

/* O ".e-con" e o ".elementor-widget" nos seletores abaixo servem so para
   empatar o peso com o Elementor: ele escreve flex-basis, flex-shrink e
   largura em ".e-con.e-flex" e em ".elementor-element:where(...)" — dois
   nomes, (0,2,0) — e uma classe sozinha do projeto perdia. Sem o empate os
   quatro cards do carrossel se espremiam para caber na vitrine (66px cada)
   e o avatar nascia com largura zero. */
/* Todo container do Elementor nasce com 10px de recuo e 20px de vao. Como
   <div> nao havia nem um nem outro, entao os tres containers da peça
   voltam ao zero. O ".e-con" no seletor e o mesmo empate de peso descrito
   abaixo. */
.isp-depo__vitrine.e-con,
.isp-depo__autor.e-con {
	gap: 0;
	padding: 0;
}

/* A esteira nao quebra linha: como container ela nasce flex-wrap:wrap e os
   quatro depoimentos viravam uma pilha no celular. */
.isp-depo__trilho.e-con {
	flex-wrap: nowrap;
}

.isp-depo__card.e-con {
	flex: 0 0 405px;
	width: 405px;
}

.isp-depo__avatar.elementor-widget {
	width: 57px;
	flex: 0 0 auto;
}

.isp-depo__avatar {
	display: block;
	width: 57px;
	height: 56.387px;
	border-radius: 61.29px;
	overflow: hidden;
	flex: 0 0 auto;
}

.isp-depo__avatar img {
	display: block;
	width: 108.6%;
	max-width: none;
	height: 148.51%;
	margin-left: -0.05%;
	margin-top: -7.16%;
	object-fit: cover;
}

.isp-depo__citacao {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 27px;
	font-weight: 400;
	color: var(--isp-chumbo);
}

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

/* O widget de texto poe um <p> em volta da citacao; ele nao pode trazer
   margem nem tipografia propria, que e do card. */
.isp-depo__citacao p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.isp-depo__autor {
	display: flex;
	flex-direction: column;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: var(--isp-fonte-corpo);
}

/* O par com .isp-depo__cargo e .isp-depo__nome existe desde que o card virou
   widget nativo: o cargo e o nome sao dois widgets de titulo (<span>), e nao
   mais um <span> e um <strong> dentro de um <figcaption>. Os seletores
   antigos ficam para quem ainda usa a marcacao do shortcode. */
.isp-depo__autor span,
.isp-depo__autor .isp-depo__cargo .elementor-heading-title {
	font-size: 12px;
	line-height: 23px;
	font-weight: 500;
	color: rgba(13, 13, 13, 0.8);
}

.isp-depo__autor strong,
.isp-depo__autor .isp-depo__nome .elementor-heading-title {
	font-size: 16px;
	line-height: 23px;
	font-weight: 700;
	color: #000000;
}

/* ---------- Navegacao ---------- */
.isp-depo__nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.isp-depo__btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--isp-branco);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.isp-depo__btn svg {
	display: block;
	width: 36px;
	height: 36px;
}

.isp-depo__btn--anterior {
	background-color: rgba(13, 13, 13, 0.4);
}

.isp-depo__btn--anterior svg {
	transform: scaleX(-1);
}

.isp-depo__btn--proximo {
	background-color: #000000;
}

.isp-depo__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.isp-depo__btn:not([disabled]):hover {
	background-color: var(--isp-azul);
	color: #ffffff;
}

/* Feedback no clique: o botao afunda em vez de so subir. */
.isp-depo__btn:not([disabled]):active {
	transform: translateY(0) scale(0.94);
	box-shadow: none;
}

.isp-depo__btn:focus-visible {
	outline: 2px solid var(--isp-azul);
	outline-offset: 3px;
}

.isp-depo__btn[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

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

@media (max-width: 1024px) {
	/* O degrade encolhe junto com o card: os 120px do desktop cobriam um
	   terco do card ativo num celular de 390 e escondiam o depoimento. */
	.isp-depo__vitrine::after {
		width: 72px;
	}

	#isp-depoimentos {
		min-height: 0;
		gap: 48px;
		padding: 80px 0;
	}

	.isp-depo {
		gap: 40px;
	}

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

/* =========================================================================
   DEPOIMENTOS NO CELULAR — Figma "07 DEPOIMENTOS" (390x658)

   Regua: 64 | topo 126 | 28 | vitrine 300 | 28 | setas 48 | 64

   O card encolhe de 405 para 300 e o trilho sangra pela direita: o segundo
   depoimento aparece pela metade, com o veu por cima, e e isso que mostra
   que ha carrossel. O recuo de 24 na esquerda vem do trilho, nao da seção
   — a seção nao tem recuo lateral aqui, senao o corte da direita sumiria.
   ========================================================================= */
@media (max-width: 767px) {
	#isp-depoimentos {
		gap: 28px;
		padding: 64px 0;
	}

	#isp-depoimentos > .elementor-widget {
		width: 100%;
	}

	#isp-depoimentos-topo {
		gap: 14px;
		width: 100%;
		padding-inline: var(--isp-margem);
	}

	.isp-depo__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 1.6px;
	}

	.isp-depo__titulo .elementor-heading-title {
		width: 100%;
		font-size: 24px;
		line-height: 32px;
	}

	.isp-depo {
		gap: 28px;
	}

	/* O card comeca 8 abaixo do topo da vitrine e termina 24 acima do pe,
	   como no arquivo (8 + 268 + 24 = 300). */
	.isp-depo__trilho {
		gap: 15px;
		padding: 8px var(--isp-margem) 24px;
	}

	/* O veu do corte encolhe junto com o card. */
	.isp-depo__vitrine::after {
		width: 72px;
	}

	.isp-depo__card {
		flex: 0 0 300px;
		width: 300px;
		gap: 20px;
		padding: 24px;
		border-radius: 24px;
	}

	/* O disco cinza vem do arquivo e serve de base para a foto: enquanto o
	   cliente nao mandar os retratos reais, e ele que aparece. */
	.isp-depo__avatar {
		width: 52px;
		height: 52px;
		background-color: rgba(13, 13, 13, 0.12);
		overflow: hidden;
	}

	.isp-depo__citacao {
		font-size: 14px;
		line-height: 24px;
	}

	/* O vao entre a citacao e a assinatura e 14, e nao os 20 do resto do
	   card; a diferenca entra como recuo negativo. */
	.isp-depo__autor {
		margin-top: -6px;
	}

	.isp-depo__autor span {
		font-size: 12px;
		line-height: 15px;
	}

	.isp-depo__autor strong {
		font-size: 15px;
		line-height: 19px;
	}

	.isp-depo__nav {
		gap: 20px;
	}

	.isp-depo__btn {
		width: 48px;
		height: 48px;
	}

	.isp-depo__btn svg {
		width: 32px;
		height: 32px;
	}
}