/**
 * Estilos da Seção Brinquedômetro
 * Baseado no design do Figma node-id: 19282-504
 */

.brinquedometro-section {
	position: relative;
	padding: 32px 0;
	min-height: 100vh;
	overflow: hidden;
}

/* Background com gradiente verde */
.brinquedometro-section__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.brinquedometro-section__gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #41a151 0%, #31713b 100%);
	z-index: 0;
}

.brinquedometro-section__bg-image {
	position: absolute;
	bottom: 0;
	left: -9.44%;
	width: 115.31%;
	height: 55.72%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}

/* Imagem de fundo fixada ao bottom (seção 2) */
.brinquedometro-section__bg-section2 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: bottom;
	z-index: 1;
	pointer-events: none;
}

/* Container */
.brinquedometro-section .container {
	position: relative;
	z-index: 1;
	max-width: 1216px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header: Título e Descrição */
.brinquedometro-section__header {
	text-align: center;
	margin-bottom: 64px;
	color: #ffffff;
}

.brinquedometro-section__title {
	font-family: var(--font-family-headings); /* Bricolage Grotesque */
	font-size: 4rem; /* 64px */
	font-weight: var(--font-weight-extrabold); /* 800 */
	line-height: 1;
	margin-bottom: 24px;
	color: #ffffff;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.brinquedometro-section__description {
	font-family: var(--font-family-body); /* Globotipo Rounded */
	font-size: 1rem;
	font-weight: var(--font-weight-normal);
	/* line-height: 1; */
	color: #ffffff;
	max-width: 100%;
	margin: 0 auto;
}

.brinquedometro-section__description p {
	line-height: 1.5;
	margin: 0;
}

/* Conteúdo: Brinquedômetro + Cards */
.brinquedometro-section__content {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 48px;
}

/* Brinquedômetro (Esquerda) */
.brinquedometro-section__meter-wrapper {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 300px;
	max-width: 50%;
}

.brinquedometro-section__meter {
	position: relative;
	width: 100%;
	max-width: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.brinquedometro-section__meter-img {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
	object-fit: contain;
}

/* SVG do Brinquedômetro */
.brinquedometro-svg {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
}

/* Texto de pontos no SVG - oculto inicialmente para animação */
.brinquedometro-points-text {
	font-family: var(--font-family-headings) !important;
	font-size: 24px !important;
	font-weight: var(--font-weight-extrabold) !important;
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: none !important;
	opacity: 0; /* Oculto inicialmente até a animação começar */
	transition: opacity 0.3s ease;
}

/* Visível após animação começar */
.brinquedometro-points-text[data-animated="true"] {
	opacity: 1;
}

/* Círculos de progresso preenchidos */
.brinquedometro-progress-filled {
	opacity: 1;
	/* Mantém as cores originais do SVG, apenas garante que estão visíveis */
}

/* Círculos de progresso vazios (não alcançados) */
.brinquedometro-progress-empty {
	opacity: 0.4;
	fill: #000000 !important;
	color: #000000 !important;
	stroke: #fff !important;
	/* Reduz opacidade para círculos não alcançados */
}

/* Seta do brinquedômetro - animável */
.brinquedometro-arrow {
	transform-origin: center;
	transition: transform 0.3s ease;
	/* Permite animação GSAP */
}

/* Display de pontos sobreposto na imagem do brinquedômetro */
/* Nota: O posicionamento exato pode precisar ser ajustado baseado na imagem real */
.brinquedometro-section__meter-points-display {
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	background: #5a3e2a;
	color: #ffffff;
	opacity: 0; /* Oculto inicialmente até a animação começar */
	transition: opacity 0.3s ease;
	padding: 8px 16px;
	border-radius: 8px;
	font-family: var(--font-family-headings);
	font-size: 1.5rem; /* 24px */
	font-weight: var(--font-weight-extrabold);
	white-space: nowrap;
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Fallback do Brinquedômetro (se imagem não disponível) */
.brinquedometro-section__meter-fallback {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.5;
	background: linear-gradient(180deg, #8b6f47 0%, #6b5435 100%);
	border-radius: 20px;
	padding: 40px 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.brinquedometro-section__meter-bell {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	background: #ff8c42;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.brinquedometro-section__meter-display {
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	background: #5a3e2a;
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	font-family: var(--font-family-headings);
	font-size: 1.5rem;
	font-weight: var(--font-weight-extrabold);
	white-space: nowrap;
}

.brinquedometro-section__meter-progress {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.brinquedometro-section__meter-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #5a3e2a;
	transition: background-color 0.3s ease;
}

.brinquedometro-section__meter-dot.is-filled {
	background: #ff6b35;
	border-color: #ff6b35;
}

/* Cards de Recompensas (Direita) */
.brinquedometro-section__rewards {
	flex: 1 1 500px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 600px;
	min-width: 0; /* Permite que o flex shrink funcione corretamente */
}

/* Card de Recompensa */
.reward-card {
	background: #ffffff;
	border-radius: 24px;
	padding: 24px 40px;
	display: flex;
	gap: 24px;
	align-items: center;
	box-shadow: 16px 16px 2px 0px rgba(0, 0, 0, 0.25), 10px 10px 0px 0px #0c7003;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-decoration: none; /* Remove decoração quando for link */
	color: inherit; /* Herda cor do texto */
}

/* Quando o card é um link (desbloqueado com URL) */
.reward-card[href] {
	cursor: pointer;
}

.reward-card:hover {
	transform: translateY(-2px);
	box-shadow: 18px 18px 4px 0px rgba(0, 0, 0, 0.3), 12px 12px 0px 0px #0c7003;
}

.reward-card--upcoming:hover {
	transform: none;
	box-shadow: 16px 16px 2px 0px rgba(0, 0, 0, 0.25), 10px 10px 0px 0px #0c7003;
}

.reward-card--unlocked {
	background: #e9477e;
	color: #ffffff;
}

.reward-card--locked {
	background: #ffffff;
	color: #e9477e;
}

.reward-card--upcoming {
	background: #f5f5f5;
	color: #666666;
	opacity: 0.8;
	cursor: default;
}

/* Ícone da Recompensa */
.reward-card__icon {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reward-card__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.reward-card__icon-fallback {
	font-size: 3rem;
	line-height: 1;
}

/* Conteúdo do Card */
.reward-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.reward-card__points {
	font-family: var(--font-family-headings);
	font-size: 1rem; /* 16px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
}

.reward-card--unlocked .reward-card__points {
	color: #ffffff;
}

.reward-card--locked .reward-card__points {
	color: #e9477e;
}

.reward-card__points--upcoming {
	font-family: var(--font-family-headings);
	font-size: 1rem; /* 16px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	color: #999999;
	font-style: italic;
}

.reward-card__title {
	font-family: var(--font-family-headings);
	font-size: 2rem; /* 32px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	margin: 0;
}

.reward-card--unlocked .reward-card__title {
	color: #ffffff;
}

.reward-card--locked .reward-card__title {
	color: #e9477e;
}

.reward-card--upcoming .reward-card__title {
	color: #666666;
}

.reward-card__description {
	font-family: var(--font-family-body);
	font-size: 1rem; /* 16px */
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
	margin: 0;
}

.reward-card--unlocked .reward-card__description {
	color: #ffffff;
}

.reward-card--locked .reward-card__description {
	color: #333333;
}

.reward-card--upcoming .reward-card__description {
	color: #666666;
}

/* Ícone de Ação */
.reward-card__action {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reward-card__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.reward-card__action-icon svg {
	width: 100%;
	height: 100%;
}

.reward-card__action-icon--unlocked {
	color: #ffc436; /* Amarelo */
}

.reward-card__action-icon--locked {
	color: #e6e6e6; /* Cinza claro */
}

.reward-card__action-icon--upcoming {
	color: #999999; /* Cinza médio */
}

/* Responsividade */

/* Breakpoint para notebooks de tela pequena (1366x768) */
@media (max-width: 1366px) {
	.brinquedometro-section {
		padding: 60px 80px;
	}

	.brinquedometro-section__content {
		padding: 0 40px;
		gap: 48px;
	}
}

@media (max-width: 991.98px) {
	.brinquedometro-section__content {
		flex-direction: column;
		align-items: center;
		padding: 0 24px;
	}

	.brinquedometro-section__meter-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.brinquedometro-section__rewards {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767.98px) {
	.brinquedometro-section {
		padding: 24px 0;
	}

	.brinquedometro-section__title {
		font-size: 2.0rem; /* 40px */
		margin-bottom: 20px;
	}

	.brinquedometro-section__description {
		font-size: 1.125rem; /* 18px */
	}

	.brinquedometro-section__content {
		gap: 32px;
	}

	.reward-card {
		padding: 20px 24px;
		gap: 20px;
	}

	.reward-card__icon {
		display: none; /* Oculta o ícone no mobile para melhorar a visualização */
	}

	.reward-card__title {
		font-size: 1.5rem; /* 24px */
	}

	.reward-card__points {
		font-size: 0.875rem; /* 14px */
	}

	.reward-card__description {
		font-size: 0.875rem; /* 14px */
	}
}