/* animacoes */

@keyframes scale-up-noticia {
	from {
		scale: 0.8;
	}

	to {
		scale: 1;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(217, 0, 0, .5);
	}

	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 18px rgba(217, 0, 0, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(217, 0, 0, 0);
	}
}

/* FIM animacoes END */



section {
	margin-block: 60px;
}


/* Alerta */

#containerAlerta {
	margin-top: 0;
}

/* FIM Alerta END */



h2.titulo-principal {
	font-family: 'Newsreader';
	font-size: 3rem;
	font-weight: 300;
	margin: 10px;
	text-align: center;
}


/* Anuncio */

#containerBanner {
	margin-top: 0;

	a {
		position: relative;

		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		width: 100%;
		aspect-ratio: 4 / 1;
		min-height: 300px;
		box-sizing: border-box;

		border-radius: 40px;
		padding: 30px;

		overflow: hidden;

		/* A imagem original fica como fallback caso o JS demore a carregar */
		background-color: #111;
		/* background-image: url('../img/clouds.avif'); */
		background-size: cover;
		background-position: center;

		color: white;
		text-decoration: unset;

		/* --- NOVO: Estilização do Canvas de Chuva --- */
		#rainCanvas {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;

			width: 100%;
			height: 100%;

			opacity: 0.6;

			/* Fica no fundo */
			pointer-events: none;
			/* Permite que o usuário clique no banner através do canvas */
		}

		/* --- NOVO: Elevação do conteúdo acima do Canvas --- */
		.container-banner,
		span {
			position: relative;
			z-index: 1;
			/* Fica acima da chuva */
		}

		.container-banner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;
		}

		h2 {
			font-size: clamp(3rem, 5vw, 5rem);
			font-weight: 600;
			line-height: clamp(3rem, 5vw, 5rem);
			margin: 0;

			width: max-content;

			background: linear-gradient(182deg, #ffffff 0%, #a0b6e7 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		img {
			width: max-content;
			object-fit: cover;
		}

		span {
			padding: 4px 12px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(8px);
			font-size: 1rem;
			font-weight: 500;
			white-space: nowrap;
		}

		.logo-criciuma {
			height: 10%;
			opacity: 0.999;
		}

		.botao-acompanhar {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;

			padding: 14px 28px;
			border-radius: 50px;
			border: none;

			width: max-content;

			font-family: "Inter", sans-serif;
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			text-decoration: none;

			transition: .3s ease;
			animation: pulse 1.5s infinite;
			box-shadow: 0 0 0 rgba(217, 0, 0, .6);
			background: #d90000;

			&:hover {
				scale: 1.1;
			}

			&:active {
				scale: 0.9;
			}
		}
	}
}

/* FIM Anuncio END */



/* Noticias */

#containerNoticiaRelacionada {
	font-family: "Newsreader", serif !important;

	.titulo-noticias-relacionadas {
		text-align: center;
		margin-bottom: 30px;
	}

	.lista-noticias-relacionadas {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;

		list-style: none;
		padding: 0;
		margin: 0;

		li {
			min-width: 280px;
			width: 100%;
			max-width: 320px;

			padding: 0;
		}

		.noticias-relacionadas {
			color: #313131;

			text-decoration: none;

			&:hover .titulo-noticia {
				background-position-x: left;
				background-size: 100% 1px;
			}

			.imagem-noticia-relacionada {
				width: 100%;
				height: max-content;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				margin-bottom: 10px;
			}

			.titulo-noticia {
				font-size: 1.2rem;
				font-weight: 400;
				color: var(--cor-fonte);

				display: inline;

				--reversed-link-gap: min(100%, 1.35em);
				background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
				background-position-x: right;
				transition: background-size .5s cubic-bezier(.3, 1, .3, 1);
			}

			.assunto-noticia,
			.detalhes-noticia,
			p {
				font-size: 0.75rem;
				color: var(--cor-fonte);
				opacity: 0.6;
				text-decoration: none;
				line-height: normal;
				margin: 0;
			}

			.assunto-noticia {
				margin-bottom: 15px;
			}

			.detalhes-noticia {
				margin-top: 15px;
				margin-bottom: 10px;
			}

			hr {
				width: 100%;
				margin-block: 20px;

				border: none;
				border-top: 1px solid var(--cor-fonte);
				opacity: 0.2;
			}
		}
	}
}

/* FIM Noticias END */



/* Páginas */

#pagina {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	margin-block: 30px;

	.container-paginas {
		position: relative;

		display: flex;
		flex-direction: column;

		width: 100%;

		.todos-cards {
			position: relative;

			display: flex;
			flex-wrap: wrap;

			width: 100%;

			padding-top: 10px;
			box-sizing: content-box;
			overflow-y: hidden;

			transition: calc(2 * var(--delay-default));

			#paginasContainer {
				position: relative;

				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
				gap: 10px;
				justify-content: start;
				align-items: center;

				width: 100%;

				.card {
					position: relative;
					top: 0;

					aspect-ratio: 1 / 1;

					border: 1px solid var(--cor-borda-contraste);
					background: var(--cor-fundo);

					border-radius: 20px;

					transition: var(--delay-default);

					overflow: hidden;

					&:hover {
						top: -4px;
						background: var(--cor-fundo-contraste);
					}

					.faixa-novo {
						pointer-events: none;
						width: 100px;
						height: 40px;

						position: absolute;
						top: 2px;
						left: -25px;
						display: flex;
						justify-content: center;
						align-items: center;

						color: #fefefe;
						background-color: var(--vermelho);

						clip-path: inset(15% 0 15% 0);

						transform: rotate(315deg);

						p {
							font-size: 1rem;
							margin: 0;
						}
					}

					a {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;

						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding: 15px 10px;

						color: var(--cor-fonte);
						font-weight: bold;
						text-decoration: none;

						transition: var(--delay-default);


						&::first-letter {
							text-transform: uppercase;
						}

						h3 {
							font-size: 1rem;
							width: 100%;
							text-align: center;
							margin: 0;
						}

						i {
							font-size: 2rem;
						}

						.imagem-icone {
							width: 2rem;
							height: 2rem;
							transition: var(--delay-default);

							filter: grayscale(1) brightness(0) invert(0.2);
						}

						.icone-link-externo {
							position: absolute;
							top: 35px;
							right: 25px;

							font-size: 1.2rem;

							width: 10px;
							opacity: 0;

							transition: var(--delay-default);
						}

						img {
							width: 50px;
							object-fit: contain;
						}

						&:hover,
						&:focus,
						&:focus-visible {
							.icone-link-externo {
								margin-left: 10px;
								opacity: 1;
								top: 15px;
							}

							.imagem-icone {
								filter: grayscale(0) brightness(1) invert(0);
							}
						}
					}
				}
			}

			.mensagem-nenhum-card {
				width: 100%;
				text-align: center;
				font-size: 1.25rem;
				color: #6C757D;
				margin-block: 60px;
			}
		}
	}

	.elemento-grafico {
		position: absolute;
		bottom: -500px;
		left: -100px;
		z-index: 0;

		display: block;

		background-color: #007eff0d;

		width: 40vw;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		filter: blur(70px);
		pointer-events: none;
	}
}

/* FIM Páginas END */



/* FAQ */

#faq.perguntas-frequentes {
	display: flex;
	align-items: center;

	margin-top: 60px;
	border: 1px solid var(--cor-borda-contraste);
	border-radius: 20px;
	padding: 0;
	overflow: hidden;

	height: min-content;

	h2 {
		display: flex;
		align-items: center;
		justify-content: center;

		font-size: 1rem;
		writing-mode: sideways-lr;

		margin: 0;
		background: var(--vermelho);
		color: white;

		padding: 15px;
		text-transform: uppercase;
		height: 80px;
		box-sizing: border-box;
	}

	.caixa-faq {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 20px;

		width: 100%;
		padding: 20px;

		p {
			font-size: 0.875rem;
			margin: 0;
		}

		.botao-faq {
			position: relative;

			display: inline-flex;
			justify-content: center;
			align-items: center;

			border: 1px solid var(--cor-borda-contraste);
			border-radius: 16px;
			padding: 12px 20px;
			margin-left: 20px;

			width: max-content;

			text-decoration: none;
			line-height: 14px;

			overflow: hidden;
			transition: var(--delay-default);

			&::before {
				content: '';
				position: absolute;
				width: 0px;
				aspect-ratio: 1 / 1;
				background-color: transparent;
				clip-path: circle(50% at 50% 50%);
				z-index: 0;
				transition: calc(2 * var(--delay-default));
			}

			span {
				position: relative;
				z-index: 1;

				font-size: 0.875rem;
				color: var(--cor-fonte);
				transition: var(--delay-default);
			}

			&:hover {

				span {
					color: white;
				}

				&::before {
					width: calc(100% + 4px);
					background-color: var(--vermelho);
				}
			}
		}
	}
}

/* FIM FAQ END */



/* Responsividade */

@media (max-width: 1200px) {
	#faq {
		.perguntas-frequentes {
			height: 150px;
		}
	}
}

@media (max-width: 991px) {
	#faq.perguntas-frequentes {
		h2 {
			height: 124px;
		}
	}
}

@media (max-width: 768px) {
	#faq.perguntas-frequentes {
		h2 {
			height: 148px;
		}
	}
}

@media (max-width: 575px) {
	#containerAlerta {
		margin-top: 0;
		margin-bottom: 60px;
	}

	#faq {
		margin-inline: 15px;
		width: calc(100% - 30px);
	}
}

@media (max-width: 470px) {
	section {
		margin-block: 120px;
	}

	#containerBanner {

		a {
			border-radius: 25px;
		}
	}


	#pagina {
		margin-block: 120px;

		.container-paginas {
			.todos-cards {
				#paginasContainer {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;

					max-height: 60vh;

					overflow-x: auto;
					scroll-snap-type: x mandatory;
					scrollbar-width: auto;

					.card {

						width: calc(50% - 15px);
						scroll-snap-align: start;

						&:nth-child(odd) {
							scroll-snap-stop: always
						}
					}
				}
			}
		}
	}

	#faq.perguntas-frequentes {
		.caixa-faq {
			.botao-faq {
				margin-left: 0px;
			}
		}

		h2 {
			height: 186px;
		}
	}
}

@media (max-width: 512px) {
	#containerBanner {
		a {
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
	}
}