/* =========================================
   ABADÁ PASSPORT CHALLENGE
   ========================================= */

   .abada-passport-challenge {
	position: relative;

	width: 100%;

	padding: 90px 40px;

	background: #F7F2E8;
	color: #020C3B;

	overflow: hidden;

	box-sizing: border-box;
}


.abada-passport-challenge__inner {
	position: relative;

	width: 100%;
	max-width: 1320px;

	margin: 0 auto;
}


/* =========================================
   INTRO
   ========================================= */

.abada-passport-challenge__intro {
	position: relative;

	max-width: 850px;

	margin: 0 auto 65px;

	text-align: center;
}


/* PASSAPORTE gigante no fundo */
.abada-passport-challenge__ghost {
	position: absolute;

	left: 50%;
	top: -48px;

	transform: translateX(-50%);

	width: 100%;

	color: #020C3B;

	font-size: clamp(70px, 10vw, 145px);
	font-weight: 900;

	line-height: 0.85;

	letter-spacing: -0.06em;

	opacity: 0.055;

	pointer-events: none;

	white-space: nowrap;
}


/* UM JOGO DENTRO DOS JOGOS */
.abada-passport-challenge__eyebrow {
	position: relative;

	margin-bottom: 16px;

	color: #FB8400;

	font-size: 11px;
	font-weight: 900;

	line-height: 1;

	letter-spacing: 0.24em;
	text-transform: uppercase;
}


/* PASSAPORTE DOS JOGOS */
.abada-passport-challenge__title {
	position: relative;

	margin: 0;

	color: inherit;

	font-size: clamp(42px, 5vw, 72px);
	font-weight: 900;

	line-height: 0.95;

	letter-spacing: -0.045em;
	text-transform: uppercase;
}


/* ACEITAS O DESAFIO? */
.abada-passport-challenge__highlight {
	position: relative;

	margin-top: 14px;

	color: #FB8400;

	font-size: clamp(25px, 3vw, 40px);
	font-weight: 900;

	line-height: 1;

	letter-spacing: -0.025em;
	text-transform: uppercase;
}


/* Texto introdutório */
.abada-passport-challenge__description {
	position: relative;

	max-width: 720px;

	margin: 30px auto 0;

	font-size: 15px;
	line-height: 1.7;

	opacity: 0.78;
}


.abada-passport-challenge__description p {
	margin: 0 0 12px;
}


.abada-passport-challenge__description p:last-child {
	margin-bottom: 0;

	font-weight: 700;

	opacity: 1;
}


/* =========================================
   STAMPS GRID
   ========================================= */

.abada-passport-challenge__stamps {
	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap: 18px;

	align-items: stretch;

	margin: 10px auto 85px;

	padding: 16px 10px;

	max-width: 1180px;
}


/* =========================================
   BASE STAMP
   ========================================= */

.abada-passport-stamp {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	aspect-ratio: 1 / 0.88;

	min-height: 145px;

	padding: 20px 12px;

	border: 2px dashed #235FB4;

	background: transparent;

	color: #020C3B;

	text-align: center;

	transform:
		rotate(var(--stamp-rotation, 0deg));

	box-sizing: border-box;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
}


.abada-passport-stamp:hover {
	transform:
		rotate(0deg)
		translateY(-5px);

	box-shadow:
		0 12px 25px
		rgba(2, 12, 59, 0.10);
}


/* Palavra principal */
.abada-passport-stamp__label {
	font-size: clamp(16px, 1.5vw, 22px);
	font-weight: 900;

	line-height: 1;

	letter-spacing: -0.02em;
	text-transform: uppercase;
}


/* Texto pequeno */
.abada-passport-stamp__small {
	margin-top: 9px;

	font-size: 8px;
	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.22em;
	text-transform: uppercase;

	opacity: 0.65;
}


/* =========================================
   OUTLINE STAMP
   ========================================= */

.abada-passport-stamp--outline {
	background:
		rgba(255, 255, 255, 0.22);
}


/* =========================================
   FILLED STAMP
   ========================================= */

.abada-passport-stamp--filled {
	border-style: solid;
	border-color: transparent;

	background-color: #FB8400;

	color: #020C3B;

	box-shadow:
		0 8px 18px
		rgba(251, 132, 0, 0.10);
}


.abada-passport-stamp--filled
.abada-passport-stamp__small {
	opacity: 0.75;
}


/* =========================================
   LOCKED / SECRET STAMP
   ========================================= */

.abada-passport-stamp--locked {
	border-style: dashed;

	background:
		repeating-linear-gradient(
			-45deg,
			rgba(35, 95, 180, 0.02),
			rgba(35, 95, 180, 0.02) 8px,
			rgba(35, 95, 180, 0.055) 8px,
			rgba(35, 95, 180, 0.055) 16px
		);
}


.abada-passport-stamp--locked
.abada-passport-stamp__label {
	font-size: 33px;
}


.abada-passport-stamp__lock {
	position: absolute;

	top: 11px;
	right: 12px;

	font-size: 11px;

	opacity: 0.5;
}


/* =========================================
   LITTLE "STAMPED" IMPERFECTIONS
   ========================================= */

.abada-passport-stamp::before {
	content: "";

	position: absolute;

	inset: 4px;

	border: 1px solid currentColor;

	opacity: 0.05;

	pointer-events: none;
}


.abada-passport-stamp:nth-child(3n)::after {
	content: "";

	position: absolute;

	width: 11px;
	height: 11px;

	top: 11px;
	left: 13px;

	border-radius: 50%;

	background: currentColor;

	opacity: 0.06;

	pointer-events: none;
}


/* =========================================
   GOLDEN SEAL SECTION
   ========================================= */

.abada-passport-challenge__gold {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		280px;

	gap: 70px;

	align-items: center;

	margin-top: 15px;

	padding: 58px 65px;

	background-color: #020C3B;

	color: #ffffff;

	border-radius: 28px;

	overflow: hidden;
}


/* grande círculo decorativo */
.abada-passport-challenge__gold::before {
	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	right: -190px;
	top: -210px;

	border-radius: 50%;

	border:
		1px solid
		rgba(211, 175, 55, 0.18);

	pointer-events: none;
}


.abada-passport-challenge__gold::after {
	content: "?";

	position: absolute;

	right: 290px;
	bottom: -80px;

	color: #ffffff;

	font-size: 280px;
	font-weight: 900;

	line-height: 1;

	opacity: 0.025;

	pointer-events: none;
}


/* =========================================
   GOLD COPY
   ========================================= */

.abada-passport-challenge__gold-copy {
	position: relative;

	z-index: 2;

	max-width: 650px;
}


.abada-passport-challenge__gold-eyebrow {
	margin-bottom: 13px;

	font-size: 10px;
	font-weight: 900;

	letter-spacing: 0.22em;
	text-transform: uppercase;

	opacity: 0.58;
}


.abada-passport-challenge__gold-title {
	margin: 0;

	color: #D3AF37;

	font-size: clamp(34px, 4vw, 58px);
	font-weight: 900;

	line-height: 0.98;

	letter-spacing: -0.04em;
	text-transform: uppercase;
}


.abada-passport-challenge__gold-text {
	max-width: 560px;

	margin-top: 21px;

	font-size: 15px;
	line-height: 1.7;

	opacity: 0.72;
}


/* =========================================
   GOLDEN SEAL
   ========================================= */

.abada-passport-challenge__gold-seal {
	position: relative;

	z-index: 3;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 230px;
	height: 230px;

	margin: 0 auto;

	border:
		3px double
		#D3AF37;

	border-radius: 50%;

	color: #D3AF37;

	transform: rotate(-6deg);

	box-shadow:
		0 0 0 8px rgba(211, 175, 55, 0.05),
		0 0 40px rgba(211, 175, 55, 0.10);

	overflow: hidden;
}


/* círculo interno */
.abada-passport-challenge__gold-seal::before {
	content: "";

	position: absolute;

	inset: 16px;

	border:
		1px dashed
		currentColor;

	border-radius: 50%;

	opacity: 0.65;
}


/* brilho subtil */
.abada-passport-challenge__gold-seal::after {
	content: "";

	position: absolute;

	width: 55px;
	height: 320px;

	top: -45px;
	left: -100px;

	background:
		linear-gradient(
			to right,
			transparent,
			rgba(255,255,255,0.19),
			transparent
		);

	transform:
		rotate(30deg);

	animation:
		abadaPassportGoldShine
		5s ease-in-out
		infinite;

	pointer-events: none;
}


@keyframes abadaPassportGoldShine {

	0%,
	68% {
		left: -110px;
	}

	100% {
		left: 300px;
	}
}


.abada-passport-challenge__gold-rays {
	position: relative;

	z-index: 2;

	margin-bottom: 6px;

	font-size: 15px;
}


.abada-passport-challenge__gold-question {
	position: relative;

	z-index: 2;

	font-size: 76px;
	font-weight: 900;

	line-height: 0.9;
}


.abada-passport-challenge__gold-label {
	position: relative;

	z-index: 2;

	margin-top: 13px;

	font-size: 9px;
	font-weight: 900;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}


/* =========================================
   FINAL CLUE
   ========================================= */

.abada-passport-challenge__footer {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 12px;

	margin-top: 32px;

	padding-top: 28px;

	border-top:
		1px solid
		rgba(2, 12, 59, 0.10);

	font-size: 10px;
	font-weight: 900;

	line-height: 1.4;

	letter-spacing: 0.18em;
	text-transform: uppercase;

	text-align: center;
}


.abada-passport-challenge__footer-mark {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	flex: 0 0 32px;

	border: 1px solid currentColor;
	border-radius: 50%;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

	.abada-passport-challenge {
		padding:
			75px
			30px;
	}


	.abada-passport-challenge__stamps {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		max-width: 800px;
	}


	.abada-passport-challenge__gold {
		grid-template-columns:
			minmax(0, 1fr)
			210px;

		gap: 40px;

		padding:
			48px
			45px;
	}


	.abada-passport-challenge__gold-seal {
		width: 190px;
		height: 190px;
	}


	.abada-passport-challenge__gold-question {
		font-size: 62px;
	}

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

	.abada-passport-challenge {
		padding:
			65px
			18px;
	}


	.abada-passport-challenge__intro {
		margin-bottom: 42px;
	}


	.abada-passport-challenge__ghost {
		top: -25px;

		font-size: 70px;
	}


	.abada-passport-challenge__eyebrow {
		font-size: 9px;

		letter-spacing: 0.18em;
	}


	.abada-passport-challenge__title {
		font-size: 42px;
	}


	.abada-passport-challenge__highlight {
		font-size: 25px;
	}


	.abada-passport-challenge__description {
		margin-top: 24px;

		font-size: 14px;
		line-height: 1.65;
	}


	/* 2 stamps por fila */
	.abada-passport-challenge__stamps {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 13px;

		margin-bottom: 55px;

		padding:
			10px
			2px;
	}


	.abada-passport-stamp {
		min-height: 125px;

		padding: 14px 8px;
	}


	.abada-passport-stamp__label {
		font-size: 16px;
	}


	.abada-passport-stamp__small {
		font-size: 7px;
	}


	/*
	 * O último selo fica sozinho ao centro
	 * quando o número de elementos é ímpar.
	 */
	.abada-passport-stamp:last-child:nth-child(odd) {
		grid-column:
			1 / -1;

		width: calc(50% - 7px);

		justify-self: center;
	}


	/* GOLD */
	.abada-passport-challenge__gold {
		display: flex;
		flex-direction: column;

		gap: 38px;

		padding:
			38px
			24px;

		border-radius: 22px;

		text-align: center;
	}


	.abada-passport-challenge__gold-copy {
		max-width: 100%;
	}


	.abada-passport-challenge__gold-title {
		font-size: 34px;
	}


	.abada-passport-challenge__gold-text {
		font-size: 14px;
		line-height: 1.6;
	}


	.abada-passport-challenge__gold-seal {
		width: 185px;
		height: 185px;

		transform: rotate(-5deg);
	}


	.abada-passport-challenge__gold-question {
		font-size: 58px;
	}


	.abada-passport-challenge__footer {
	align-items: center;

	font-size: 13px;

	letter-spacing: 0.05em;
}

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

	.abada-passport-challenge__gold-seal::after {
		animation: none;
	}


	.abada-passport-stamp {
		transition: none;
	}

}

/* =========================================
   FINAL CLUE
========================================= */

.abada-passport-challenge__footer {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 16px;

	margin-top: 32px;
	padding-top: 28px;

	border-top:
		1px solid
		rgba(2, 12, 59, 0.10);

	font-size: 14px;
	font-weight: 900;

	line-height: 1.4;

	letter-spacing: 0.06em;
	text-transform: uppercase;

	text-align: center;
}


.abada-passport-challenge__footer-mark {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	flex: 0 0 38px;

	border: 1px solid currentColor;
	border-radius: 50%;
}
/* MOBILE — CENTRAR SETA FINAL CLUE */

@media (max-width: 767px) {

	.abada-passport-challenge__footer-mark {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 38px;
		height: 38px;
		flex: 0 0 38px;

		padding: 0;
		line-height: 1;
		text-align: center;
	}

}