/* Granbel Valores
 * Paleta: #45444A  #3B7A75  #013F3E  #BDDBD4  #89AFA7  |  Fonte: Montserrat
 *
 * O título usa as mesmas medidas do plugin "Diretoria" (e do "Gestores").
 * Para ajustar: mude as variáveis --gv-titulo-* e --gv-video abaixo.
 */

.granbel-valores {
	--gv-texto: #45444A;
	--gv-verde: #3B7A75;
	--gv-escuro: #013F3E;

	/* título (mesmas medidas do plugin Diretoria) */
	--gv-titulo-bg: #3B7A75;
	--gv-titulo-cor: #fff;
	--gv-titulo-w: 235px;
	--gv-titulo-h: 59px;
	--gv-titulo-fs: 26px;
	--gv-titulo-radius: 22px;

	/* tamanho do quadro do vídeo (o ícone ocupa cerca de metade) */
	--gv-video: 190px;
	--gv-video-cima: 34px;   /* quanto o quadro "sobe" (espaço vazio acima do ícone) */
	--gv-video-baixo: 26px;  /* quanto do quadro fica sob o título (essa parte é cortada) */

	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px 40px;
	color: var(--gv-texto);
}

.granbel-valores *,
.granbel-valores *::before,
.granbel-valores *::after {
	box-sizing: border-box;
}

/* Título */
.granbel-valores .granbel-valores__titulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: var(--gv-titulo-w);
	min-height: var(--gv-titulo-h);
	max-width: 100%;
	margin: 0 auto 52px;
	padding: 10px 56px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: var(--gv-titulo-fs);
	line-height: 1.2;
	color: var(--gv-titulo-cor);
	text-align: center;
	background: var(--gv-titulo-bg);
	border: 0;
	border-radius: var(--gv-titulo-radius);
}

/* Colunas: larguras diferentes (--peso) */
.granbel-valores .granbel-valores__lista {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.granbel-valores .granbel-valores__item {
	flex: var(--peso, 1) 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Vídeo do ícone (fundo branco: "multiply" some com o branco) */
.granbel-valores .granbel-valores__video {
	display: block;
	width: var(--gv-video);
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: calc(var(--gv-video-cima) * -1) 0 calc(var(--gv-video-baixo) * -1) calc(50% - (var(--gv-video) / 2));
	/* os elementos que entram voando pela borda de baixo aparecem a partir do corte, sem passar por trás do título */
	clip-path: inset(0 0 var(--gv-video-baixo) 0);
	padding: 0;
	border: 0;
	background: transparent;
	object-fit: contain;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.granbel-valores .granbel-valores__nome {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--gv-verde);
	text-transform: none;
	letter-spacing: normal;
}

.granbel-valores .granbel-valores__texto {
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--gv-texto);
	text-wrap: balance;
}

/* Animação de entrada: sobe de baixo e aparece (só quando o JavaScript está ativo) */
.granbel-valores.granbel-valores--pronto .granbel-valores__item {
	opacity: 0;
	transform: translateY(48px);
}

/* a transição só é ligada depois que o estado inicial já está aplicado (evita "piscar" ao carregar) */
.granbel-valores.granbel-valores--anim .granbel-valores__item {
	transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--i, 0) * 140ms);
}

.granbel-valores.granbel-valores--pronto .granbel-valores__item.is-visible {
	opacity: 1;
	transform: none;
}

/* Tablet: 3 + 2 colunas */
@media (max-width: 1000px) {
	.granbel-valores .granbel-valores__lista {
		flex-wrap: wrap;
		row-gap: 36px;
	}
	.granbel-valores .granbel-valores__item {
		flex: 0 0 calc(33.333% - 18px);
	}
}

/* Celular: uma coluna */
@media (max-width: 640px) {
	.granbel-valores {
		--gv-video: 170px;
	}
	.granbel-valores .granbel-valores__titulo {
		min-width: 0;
		padding: 10px 40px;
		margin-bottom: 36px;
	}
	.granbel-valores .granbel-valores__lista {
		flex-direction: column;
		align-items: center;
		row-gap: 28px;
	}
	.granbel-valores .granbel-valores__item {
		flex: 0 0 auto;
		width: 100%;
		max-width: 360px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.granbel-valores.granbel-valores--pronto .granbel-valores__item,
	.granbel-valores.granbel-valores--anim .granbel-valores__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}