/* ===================================
   NAVBAR / HEADER
   =================================== */
.top {
	display: flex;
	align-items: center;
	background-color: var(--primary-color);
	justify-content: space-between;
	padding: 10px 70px;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: var(--shadow-sm);
}

.ul-menu-1 ul {
	display: flex;
	align-items: center;
	list-style: none;
	gap: var(--spacing-md);
}

.li-menu-1 {
	transition: var(--transition-fast);
}

.li-menu-1 a {
	color: var(--secondary-color);
	font-weight: 600;
}

.li-menu-1:hover a {
	color: var(--bg-light);
	text-shadow: 1px 1px 3px var(--secondary-color);
}

/* Botões de Ação no Topo */
.bnt-top,
.bnt-top2 {
	display: inline-block;
	border: 2px solid var(--secondary-color);
	background-color: var(--secondary-color);
	color: var(--text-white) !important;
	border-radius: var(--radius-full);
	padding: 6px 18px;
	cursor: pointer;
	transition: var(--transition-normal);
	box-shadow: var(--shadow-sm);
}

.bnt-top:hover,
.bnt-top2:hover {
	background-color: var(--bg-light);
	color: var(--secondary-color) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.bnt-top2 {
	display: none;
}

.mobile-menu {
	cursor: pointer;
	display: none;
}

.mobile-menu div {
	width: 32px;
	height: 4px;
	background: #fff;
	margin: 6px;
	transition: 0.3s;
	border-radius: 5px;
}

/* ===================================
   FOOTER
   =================================== */
.footerA {
	background-color: var(--primary-color);
	padding-top: var(--spacing-lg);
}

.footerB {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--spacing-md) 70px;
	gap: var(--spacing-xl);
}

.ul-menu-2 {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.li-menu-2 {
	transition: var(--transition-fast);
}

.li-menu-2 a {
	color: var(--secondary-color);
	font-weight: 500;
}

.li-menu-2:hover a {
	color: var(--bg-light);
	text-decoration: underline;
}

.bo {
	flex: 1;
	max-width: 400px;
	text-align: center;
}

.bntbo {
	background-color: var(--danger-color);
	color: var(--text-white);
	border-radius: var(--radius-full);
	padding: 10px 20px;
	margin-top: var(--spacing-sm);
	transition: var(--transition-normal);
	box-shadow: var(--shadow-md);
}

.bntbo:hover {
	background-color: var(--bg-light);
	color: var(--danger-color);
	transform: scale(1.02);
}

.ul-menu-2-redes {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.li-menu-2-redes {
	transition: var(--transition-fast);
}

.li-menu-2-redes a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--secondary-color);
}

.li-menu-2-redes:hover a {
	color: var(--bg-light);
}

.menu-2-redes {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.info {
	text-align: center;
	padding: 0px 30px 30px 30px;
}

/* ===================================
   RESPONSIVIDADE (MENU/FOOTER)
   =================================== */
@media (max-width: 999px) {
	.mobile-menu {
		display: block;
	}
	.bnt-top2 {
		display: inline;
	}
	.ul-menu-1 ul {
		position: absolute;
		top: 4.5rem;
		right: 0;
		width: 250px;
		background-color: var(--primary-color);
		flex-direction: column;
		padding: var(--spacing-lg) var(--spacing-md);
		gap: var(--spacing-sm);
		transform: translateX(100%);
		transition: transform 0.4s ease-out;
		border-radius: 30px 0px 0px 30px;
		box-shadow: var(--shadow-lg);
	}
	.ul-menu-1.active ul {
		transform: translateX(0);
	}
	.li-menu-1 {
		opacity: 0;
		margin: 0;
		/* Adiciona transição para a opacidade */
		transition: opacity 0.3s ease-out;
	}
	/* Torna os itens da lista visíveis quando o menu está ativo */
	.ul-menu-1.active .li-menu-1 {
		opacity: 1;
	}
	/* Adiciona um atraso para um efeito de aparecimento escalonado */
	.ul-menu-1.active .li-menu-1:nth-child(1) {
		transition-delay: 0.1s;
	}
	.ul-menu-1.active .li-menu-1:nth-child(2) {
		transition-delay: 0.2s;
	}
	.ul-menu-1.active .li-menu-1:nth-child(3) {
		transition-delay: 0.3s;
	}
	.ul-menu-1.active .li-menu-1:nth-child(4) {
		transition-delay: 0.4s;
	}
	.ul-menu-1.active .li-menu-1:nth-child(5) {
		transition-delay: 0.5s;
	}
	.ul-menu-1.active .li-menu-1:nth-child(6) {
		transition-delay: 0.6s;
	}
	.li-menu-1:last-child {
		display: none;
	}
	.mobile-menu.active .line-1 {
		transform: rotate(-45deg) translate(-8px, 8px);
	}
	.mobile-menu.active .line-2 {
		opacity: 0;
	}
	.mobile-menu.active .line-3 {
		transform: rotate(45deg) translate(-5px, -7px);
	}
}

@media (max-width: 768px) {
	.top {
		padding: 8px 20px;
	}
	.footerB {
		flex-direction: column;
		padding: 10px 30px;
	}
	.bo {
		max-width: 100%;
	}
	.ul-menu-2-redes {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
	}
}