/*
 * Fontinha — secção Reviews.
 *
 * Figma: banda 4001:928, 1441x271, fundo #3D3D3C. Conteúdo no "Frame 17"
 * (4002:119), a x=220.5 y=2377.7, 1003.5x96.4:
 *
 *   seta 9.238x19.159  ·  gap 32  ·  três colunas de 267 com gap 60  ·  gap 32  ·  seta
 *   estrelas 8.207x7.722 cada, cinco por coluna
 *   citação  Gill Sans Light 11.923px   #FFF8F0   (4001:930)
 *   nome     Gill Sans Medium 10.088px  #FFF8F0   (4001:938)
 *   rótulo   Gill Sans Medium 17.582px  #FFF8F0   (4001:929)
 *
 * Os tamanhos vão em bruto porque são medições e nenhum está na escala: 11.923,
 * 10.088 e 17.582. Ver "Decisões assumidas" no CLAUDE.md.
 *
 * Mobile first. Abaixo de 1200px o carrossel mostra um cartão de cada vez.
 */

/* Os traços de paginação são só do desenho de mobile — o frame de desktop não
   os tem. */
@media (min-width: 1200px) {
	.reviews .carousel__paginacao {
		display: none;
	}
}

/* A banda sobrepõe-se aos perks em 83.9px, como as outras — ver
   "Sobreposições entre bandas" no CLAUDE.md. Percentagem e não px, pela mesma
   razão dos perks: acompanha a largura. */
.reviews.section {
	position: relative;
	margin-top: -5.826%; /* 83.9 / 1440 */
	padding-block: 0;
	background: var(--s-bg-dark);

	/* 35.2 do topo da banda ao rótulo e 77.6 do fim do conteúdo ao fim da banda;
	   os 96px do --section-y não cabiam numa banda de 271. */
	padding-top: 35.2px;
	padding-bottom: 77.6px;
	color: var(--s-text-paper);
}

/* A arte de linha azul no canto esquerdo — nó 4001:962, 174.2x133.5 a
   (60.2, 2281.6), ou seja 0.9px do topo da banda. Decoração, entra por CSS. */
.reviews.section::before {
	position: absolute;
	top: 0.9px;
	left: 60.2px;
	width: 174.2px;
	height: 133.5px;
	background-image: url("../../img/icons/reviews-onda.svg");
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
}

.reviews__rotulo {
	margin: 0 var(--gutter) 40.8px; /* 97 - 35.2 - 21 = 40.8 até ao carrossel */
	font-family: var(--font-body);
	font-size: 17.582px;
	font-weight: var(--fw-body-strong);
	text-align: right;
	text-transform: uppercase;
}

/* O bloco do carrossel tem a largura do Frame 17 e fica centrado. As setas
   assentam nas pontas, fora das colunas, com 32px de intervalo. */
.reviews .carousel {
	max-width: 1003.5px;
	margin-inline: auto;
}

.reviews .carousel__viewport {
	padding-inline: 41.24px; /* seta 9.238 + gap 32 */
	scroll-padding-inline: 41.24px;
}

.reviews .carousel__track {
	gap: 60px;
}

.review {
	display: flex;

	/* 267px do desenho. O limite por viewport é o mesmo padrão dos destaques:
	   uma largura em % dentro de um track flex é circular. */
	width: 267px;
	max-width: calc(100vw - var(--gutter) * 2);
	flex-direction: column;
	align-items: center;
	gap: 16px; /* 15/16/17 nas três colunas do desenho */
	text-align: center;
}

/* ---------- Estrelas ---------- */

.review__estrelas {
	display: flex;
	gap: 1px; /* passo de 9.16 com estrelas de 8.207 */
	margin: 0;
}

.review__estrela {
	width: 8.207px;
	height: 7.722px;
	background-image: url("../../img/icons/estrela.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------- Texto ---------- */

.review__citacao {
	margin: 0;
}

.review__citacao p {
	margin: 0;
	font-size: 11.923px;
	font-style: normal;
}

.review__nome {
	margin: 0;
	font-size: 10.088px;
	font-weight: var(--fw-body-strong);
	text-transform: uppercase;
}

/* ---------- Setas ----------
   Ao contrário dos destaques, esta secção tem setas no desenho: chevrons
   traçados a #FFF8F0, 9.238x19.159, nós 4001:960 e 4001:961. Substituem os
   glifos do componente. */

.reviews .carousel__controls {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	justify-content: space-between;
	pointer-events: none;
	transform: translateY(-50%);
}

.reviews .carousel__btn {
	pointer-events: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9.238px 19.159px;
}

/* O glifo de texto do componente dá lugar ao SVG do desenho. O nome acessível
   continua no .screen-reader-text que está ao lado. */
.reviews .carousel__btn [aria-hidden="true"] {
	display: none;
}

.reviews .carousel__btn--prev {
	background-image: url("../../img/icons/seta-esq.svg");
}

.reviews .carousel__btn--next {
	background-image: url("../../img/icons/seta-dir.svg");
}

/* Três colunas de 267px: 3x267 + 2x60 = 921, que é a largura útil do Frame 17
   depois de tirar as setas e os seus intervalos. Abaixo de 1200px cabem menos e
   o carrossel rola. */

/* ============================================================
   Mobile — até 1199px. Frame Home - mob (4002:171), banda 1426..1618.
   ============================================================

   Composição própria, e mais compacta que a de desktop reduzida que aqui
   estava — 269.30 contra os 192 do desenho. Coordenadas relativas à banda:

     arte de canto  4002:863  ( 12.65,  -1.13)   78.90 x 60.44
     estrelas       4002:857..861  y 30.05, ~15.64 x 14.89 cada
     citação        4002:868  ( 53.49,  60.82)  279.08 x 46.29
     nome           4002:856  (141.15, 122.49)  Gill Sans Medium 13.2px

   **Não há rótulo "CLIENT REVIEWS" em mobile** — o nó não existe nesta banda.

   O corpo da citação é derivado, não lido: o nó 4002:868 vem do Figma como SVG,
   arte de contorno, por isso não tem `font-size`. São três linhas em 46.29, ou
   seja 15.43 de passo, que a leading normal da Gill Sans dá ~13.3px. */

@media (max-width: 1199px) {
	/*
	 * Em mobile as duas bandas praticamente encostam, não se sobrepõem.
	 *
	 * Os 5.826% são a sobreposição de desktop (83.9 em 1440) e a 375 davam
	 * 21.84 — que iam tapar **20.33px da última linha do parágrafo dos perks**,
	 * porque lá o texto acaba a 540.48 da costura. Só apareceu ao medir a
	 * cobertura da textura do fundo dos perks.
	 *
	 * No frame o fundo dos reviews é o nó 4002:855, a começar em y=1424.56, ou
	 * seja **540.56** da costura dos perks — contra os 542 da banda. Sobra
	 * 1.44, que é costura de hairline como as de 3px do desktop, e não uma
	 * sobreposição a sério.
	 */
	.reviews.section {
		margin-top: -0.384%; /* 1.44 / 375 */
		/* Em baixo, o que vai do fim dos traços (168.23) ao fim da banda
		   (192.24). Estavam 53.51, de quando não havia traços. */
		/* O +1.44 em cima põe as estrelas no y do nó (31.49). Da citação para
		   baixo sobra uma deriva de ~1.3, que são os intervalos internos —
		   está na lista de polimento. O 25.33 fecha a banda nos 192.24. */
		padding-block: 31.49px 25.33px;
	}

	/* A arte do canto fica DENTRO da banda: o nó 4002:863 está em y=1424.87 e o
	   fundo 4002:855 começa em 1424.56, logo +0.31. Os -1.13 que aqui estavam
	   punham-na a transbordar para a banda dos perks — vinham de assentar a
	   banda em 1426 em vez de 1424.56. */
	.reviews.section::before {
		top: 0.31px;
		left: 12.65px;
		width: 78.90px;
		height: 60.44px;
	}

	.reviews__rotulo {
		display: none;
	}

	/*
	 * A janela leva o padding do desenho, não a goteira: a citação (4002:868)
	 * vai de 53.49 a 332.57 num frame de 375, ou seja 53.49 à esquerda e 42.43
	 * à direita. Com os 20 da goteira o cartão ficava encostado à esquerda, com
	 * o centro em 159.5 contra os 191..193 do desenho — 30px de desvio — e
	 * ainda espreitava 15.92 do review seguinte, que o desenho não tem.
	 */
	.reviews .carousel__viewport {
		padding-inline: 53.49px 42.43px;
		scroll-padding-inline: 53.49px;
	}

	/*
	 * Os nove traços — nós 4002:1220..1228, 27.65x3.98, de 42.46 a 337.30 com
	 * passo médio de 33.40 (logo 5.75 de intervalo). Brancos, e o activo com o
	 * gradiente dourado ao longo do próprio traço: amostrado no export, de
	 * (168,112,86) a (238,195,147), que são as pontas do --g-gold.
	 *
	 * O `display` e o `line-height` têm de vir da secção — o componente não os
	 * declara, e um <button> herda a linha do texto. Mesma armadilha das FAQs.
	 */
	/* O grupo é CENTRADO e não encostado a 42.46: esse x é o do primeiro dos
	   nove traços do desenho, e com menos traços (temos cinco reviews) encostar
	   a esquerda punha o grupo a 123.05 de centro em vez de 189.88.
	   O centro do grupo no nó é 189.88, ou seja 2.38 à direita do centro do
	   frame — daí o padding de 4.76 sobre um flex centrado. */
	.reviews .carousel__paginacao {
		display: flex;
		justify-content: center;
		gap: 5.75px;
		margin-top: 24.32px; /* 164.25 menos o fim do nome, 139.93 */
		padding: 0 0 0 4.76px;
		line-height: 0;
	}

	.reviews .carousel__paginacao button {
		width: 27.65px;
		height: 3.98px;
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		background: var(--s-text-paper);
	}

	.reviews .carousel__paginacao button::after {
		display: none;
	}

	.reviews .carousel__paginacao button.is-atual {
		background: var(--g-gold);
	}

	.reviews .carousel {
		max-width: none;
	}

	.review {
		/* 279.08 é a caixa da citação; a coluna acompanha-a. */
		width: 279.08px;
		max-width: calc(100vw - var(--gutter) * 2);

		/* 15.92 das estrelas à citação e 15.38 da citação ao nome. */
		gap: 15.65px;
	}

	.review__estrela {
		width: 15.64px;
		height: 14.89px;
	}

	/* A fila mede 89.29 no nó (146.93..236.22) e media 82.13: o intervalo entre
	   estrelas é 2.77 e estava em 0.98. */
	.review__estrelas {
		gap: 2.77px;
	}

	.review__citacao p {
		font-size: 13.3px;
	}

	.review__nome {
		font-size: 13.2px; /* nó 4002:856 */
	}

	/* As setas do desenho de desktop não têm sítio nesta banda. */
	.reviews .carousel__controls {
		display: none;
	}
}