/* ==========================================================================
   Avaliações — Figma 3486:4880 (1440x1474)
   Cabeçalho + mural de três colunas que rolam (letreiros verticais do
   base.js) + botão secundário. Desktop primeiro; @media no fim.
   ========================================================================== */

.vp-testimonials {
	padding: 136px 0;
	background: var(--vp-white);
	overflow: hidden;
}

/* "Testimonials Content" 3486:4881 — coluna centralizada, gap 64. */
.vp-testimonials__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3486:4883: badge e título com gap 32 (o .vp-section-head
   compartilhado usa 24).
   -------------------------------------------------------------------------- */

.vp-testimonials .vp-testimonials__head {
	gap: 32px;
	width: 100%;
}

/* Badge 3486:4884 (237x32). O Chrome mede os textos ~1px mais estreitos
   que o Figma (64.1 x 65, 118.4 x 119), o que encolhe a pílula e a desloca
   do centro: as larguras do Figma entram como mínimo, texto à esquerda como
   no desenho (rótulo a 10px da borda). Na vertical o Figma assenta os
   textos meio pixel abaixo do que o padding consegue (o Chrome arredonda
   o meio pixel): padding de 2 + transform de 0.5 só no texto, pílulas no
   lugar. */
.vp-testimonials .vp-badge__label,
.vp-testimonials .vp-badge__text {
	padding-top: 2px;
}

.vp-testimonials__badge-nudge,
.vp-testimonials .vp-badge__text {
	transform: translateY(0.5px);
}

.vp-testimonials .vp-badge__label {
	justify-content: flex-start;
	min-width: 85px;
}

.vp-testimonials .vp-badge__text {
	min-width: 119px;
}

/* 3486:4885 — .vp-h2 (48, 400, preto) com 800 de largura, em duas linhas.
   O Figma arredonda a entrelinha 52.8 para 53 (caixa de 106) e, com a
   meia-entrelinha ímpar, põe o texto 1px abaixo do que o Chrome põe. */
.vp-testimonials .vp-testimonials__title {
	position: relative;
	top: 1px;
	width: 100%;
	max-width: 800px;
	line-height: 53px;
}

/* --------------------------------------------------------------------------
   Mural — "Testimonials Cards Columns" 3486:4886: 1216x856 com clip.
   Os degradês (3486:5300 em cima, 3486:5486 embaixo) são retângulos de 192
   do branco ao transparente por cima dos cartões.
   -------------------------------------------------------------------------- */

.vp-testimonials__board {
	position: relative;
	width: 100%;
	height: 856px;
	overflow: hidden;
	background: var(--vp-white);
}

.vp-testimonials__board::before,
.vp-testimonials__board::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: 192px;
	pointer-events: none;
}

.vp-testimonials__board::before {
	top: 0;
	background: linear-gradient(to bottom, var(--vp-white), rgba(255, 255, 255, 0));
}

.vp-testimonials__board::after {
	bottom: 0;
	background: linear-gradient(to top, var(--vp-white), rgba(255, 255, 255, 0));
}

/* Com o mouse em cima (ou foco) o mural inteiro para, não só a coluna. */
.vp-testimonials__board:hover .vp-marquee__track,
.vp-testimonials__board:focus-within .vp-marquee__track {
	animation-play-state: paused;
}

/* "Testimonials Cards Wrapper" 3486:4887 — três colunas de 394.67, gap 16. */
.vp-testimonials__cols {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	height: 100%;
}

.vp-testimonials__col {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

/* A coluna 03 (3486:5120) tem 1117 de altura a partir de 281px acima do
   mural: termina 20px antes do fim dele e corta a última linha visível. */
.vp-testimonials__col--3 {
	height: 836px;
}

/* Trilhos (3486:4889, 3486:4899, 3486:5121): cartões com gap 16 começando
   281px acima do mural — o quadro do Figma. O letreiro anda a partir daí.
   Não pôr will-change: com a camada promovida parada, o Chrome arredonda as
   colunas 02/03 (x 522.67 e 933.33) para o pixel inteiro e elas saem meio
   pixel do lugar; rodando, a própria animação promove a camada. */
.vp-testimonials .vp-testimonials__track {
	gap: 16px;
	margin-top: -281px;
}

/* --------------------------------------------------------------------------
   Cartão — "Card / Review" 3209:282: 394 de largura, padding 32, gap 20,
   borda #F8F8F5 de 1px que entra no layout (conteúdo a 33px da borda),
   raio 16. Com 4 linhas de depoimento tem 236; com 5, 261.
   -------------------------------------------------------------------------- */

.vp-testimonials .vp-testimonials__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 394px;
	padding: 32px;
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-white);
}

/* 3486:4893 e 3486:4897: altura FIXA de 261 com 4 linhas — sobra embaixo. */
.vp-testimonials .vp-testimonials__card--tall {
	min-height: 261px;
}

/* Depoimento 18px. O Figma assenta as linhas de 25.2 em 25 (4 linhas =
   100, 5 = 125), e é isso que dá os 236/261 dos cartões. */
.vp-testimonials .vp-testimonials__quote {
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

.vp-testimonials .vp-testimonials__quote--strong {
	font-weight: 600;
}

/* "Reviewer Info" — linha de 50: avatar + nome/estrelas/data, gap 12.
   Mínimo (não fixo) para a data que desce de linha em tela estreita não
   vazar para o padding do cartão. */
.vp-testimonials__reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
}

/* Moldura 50x50 redonda com degradê cinza a 6% e a foto 48x48 (pad 1). */
.vp-testimonials__avatar {
	flex: none;
	width: 50px;
	height: 50px;
	padding: 1px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(157, 157, 157, 0.06), rgba(0, 0, 0, 0.06));
}

.vp-testimonials .vp-testimonials__avatar-img {
	width: 48px;
	height: 48px;
}

/* "Reviewer Details" — nome (25) + 4 + estrelas (14) = 43, centrado nos 50
   (y 3.5). O Chrome arredonda o meio pixel para baixo ao pintar (top não
   resolve: vira o pixel inteiro de cima); o transform, aplicado depois do
   arredondamento, devolve nome e estrelas à linha do Figma. */
.vp-testimonials__who {
	transform: translateY(-0.5px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.vp-testimonials .vp-testimonials__name {
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

/* "Rating Row" — estrelas 86x14 + data, gap 12, altura 14. Em cartão
   estreito a data desce para a linha de baixo em vez de ser cortada. */
.vp-testimonials__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	min-height: 14px;
}

.vp-testimonials .vp-testimonials__stars {
	flex: none;
	width: 86px;
	height: 14px;
}

/* Data 18px: no Figma a caixa é cortada na altura das maiúsculas (12) e
   centrada nos 14 da linha, então a linha de base cai ~1px abaixo da base
   das estrelas. Com entrelinha 14 o Chrome a põe 2.5px mais acima (medido
   contra o @2x), daí o deslocamento. */
.vp-testimonials__date {
	position: relative;
	top: 2.5px;
	color: var(--vp-text);
	font-size: 18px;
	line-height: 14px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Botão "Conversar no WhatsApp" — .vp-btn--secondary do DS (3582:2131),
   cores e estados do base.css. O Figma mede o rótulo 1px mais largo que o
   Chrome: a largura do desenho (216) entra como mínimo.
   -------------------------------------------------------------------------- */

.vp-testimonials .vp-testimonials__cta {
	min-width: 216px;
}

/* --------------------------------------------------------------------------
   Desktop estreito (1200–1279): três colunas continuam, com menos respiro
   dentro do cartão para o depoimento não virar uma tira estreita.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.vp-testimonials .vp-testimonials__card {
		padding: 24px;
	}
}

/* --------------------------------------------------------------------------
   Abaixo de 1200 três colunas ficam estreitas demais (256px a 1024): duas
   colunas (a 03 sai) com o respiro do desenho. O deslocamento do trilho
   repete o do Figma — 1º cartão escondido, 2º entrando cortado sob o
   degradê.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.vp-testimonials__col--3 {
		display: none;
	}

	.vp-testimonials .vp-testimonials__card {
		max-width: none;
		padding: 32px;
	}

	.vp-testimonials .vp-testimonials__track {
		margin-top: -300px;
	}
}

/* Tablet (768–1023): margem 48 do DS, seção com 96 e mural mais baixo. */
@media (max-width: 1023px) {
	.vp-testimonials {
		padding: 96px 0;
	}

	.vp-testimonials__board {
		height: 760px;
	}
}

/* --------------------------------------------------------------------------
   Mobile (≤767), como o cabeçalho mobile de referência (FAQ 3456:3549:
   padding 64, gap 40, badge a 32 do título): uma coluna rolando, altura
   contida e degradês menores; título 40/44 (.vp-h2) sem a quebra forçada;
   botão na largura toda.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-testimonials {
		padding: 64px 0;
	}

	.vp-testimonials__inner {
		gap: 40px;
	}

	.vp-testimonials .vp-testimonials__title {
		top: 0;
		line-height: 44px;
		text-wrap: balance;
	}

	.vp-testimonials__board {
		height: 560px;
	}

	.vp-testimonials__board::before,
	.vp-testimonials__board::after {
		height: 120px;
	}

	.vp-testimonials__col--2 {
		display: none;
	}

	.vp-testimonials .vp-testimonials__track {
		margin-top: -250px;
	}

	.vp-testimonials .vp-testimonials__card {
		padding: 24px;
	}
}

/* Movimento reduzido: sem animação nenhuma. O base.css só a encurta para
   0.01ms, e nesse instante a coluna 02 (invertida) fica no -50% do trilho
   ainda sem as cópias — o primeiro quadro pode sair com outros cartões. */
@media (prefers-reduced-motion: reduce) {
	.vp-testimonials .vp-marquee .vp-testimonials__track {
		animation: none;
	}
}