.container:not(.navegacao) {
	max-width: 900px;
}

.fases-do-enos {
	border-radius: 20px;
	padding-bottom: 30px;
	background: white;
}


.acesso-rapido {

	.lista-acesso-rapido {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		gap: 5px;

		overflow: auto;
		padding-block: 10px;

		.os-scrollbar {
			--os-padding-axis: 20px;
			--os-padding-perpendicular: 1px;
		}

		&>[data-overlayscrollbars-viewport] {
			display: flex;
			gap: 5px;
		}

		.card {
			position: relative;
			top: 0;

			flex: 0 0 auto;

			width: 100%;
			aspect-ratio: 1 / 1;
			box-sizing: border-box;

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

			border-radius: 20px;

			transition: var(--delay-default);

			overflow: hidden;

			&:hover {
				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);
					}
				}
			}
		}
	}
}

.enos-container {
	display: flex;
	flex-direction: row;
	justify-content: center;

	padding: 0;
	max-width: 100%;
	margin-block: 60px 0px;

	.enos-flex {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		min-width: 0;
		gap: 10px;
		height: auto;

		.enos {
			width: 100%;
			height: 270px;
		}

		.aviso-atencao {
			height: 100%;
			border-radius: 10px;

			h4 {
				font-size: 1.5rem;
				text-indent: 0;
			}

			p {
				text-indent: 0;
				text-align: left;
			}

			&.lanina-enos {
				border: 2px solid #002a4c96 !important;
				background-color: #0072ff08 !important;

				h4 {
					color: #000e1f;
				}
			}

			&.neutro-enos {
				border: 2px solid #0a760059 !important;
				background-color: #27ff0008 !important;

				h4 {
					color: #002a0b;
				}
			}

			&.elnino-enos {
				border: 2px solid #ff01013d !important;
				background-color: #ff000008 !important;

				h4 {
					color: #660000;
				}
			}

			@media (prefers-color-scheme: dark) {

				&.lanina-enos {
					border: 2px solid #018dff26 !important;
					background-color: #aebfd708 !important;

					h4 {
						color: #f3f8ff;
					}
				}

				&.neutro-enos {
					border: 2px solid #16ff0126 !important;
					background-color: #b2ff9908 !important;

					h4 {
						color: #f3fff4;
					}
				}

				&.elnino-enos {
					border: 2px solid #ff01013d !important;
					background-color: #ff000008 !important;

					h4 {
						color: #ffefef;
					}
				}
			}
		}
	}
}

.botao-explorar-animacoes {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;

	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	color: #fff;

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

	border: none;
	border-radius: 10rem;
	padding: 0.75rem;
	padding-right: 20px;

	width: max-content;

	background-color: var(--cor-azul);

	transition: 0.3s;

	.icone-container {
		position: relative;
		display: grid;
		place-items: center;
		flex-shrink: 0;

		width: 25px;
		height: 25px;

		color: var(--cor-azul);
		background-color: #fff;
		border-radius: 50%;
		overflow: hidden;
	}

	.svg--copy {
		position: absolute;
		transform: translate(-150%, 150%);
	}

	&:hover {
		background-color: #000;

		.icone-container {
			color: #000;
		}

		.svg:first-child {
			transition: transform 0.3s ease-in-out;
			transform: translate(150%, -150%);
		}

		.svg--copy {
			transition: transform 0.3s ease-in-out 0.1s;
			transform: translate(0);
		}
	}
}

.flash-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 0;
}

.botao-abrir-modal {
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 20px;
	}
}

#modalImagem {

	.container-modal {
		max-width: calc(100% - 140px);
		width: unset;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;

			border-radius: 10px;
		}
	}
}

.modal-customizada {
	position: fixed;
	top: 0;
	z-index: 2147483646;

	display: none;

	width: 100vw;
	height: 100vh;

	opacity: 0;

	&.modal-aberto {
		display: flex;
		justify-content: center;
		align-items: center;

		animation: aparecer-modal calc(var(--delay-default)) forwards;

		.container-modal {
			position: relative;

			display: flex;
			flex-direction: column;

			width: calc(100% - 20px);
			max-width: 760px;
			height: max-content;
			max-height: calc(100% - 20px);

			margin: auto;
			border: none;
			border-radius: 30px;

			/* background: var(--cor-fundo); */

			animation: descer-modal calc(var(--delay-default)) cubic-bezier(0, 0, 0.04, 1.02) forwards;

			.botao-fechar-modal {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 5;
				transform: translateX(calc(100% + 10px));

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

				width: 50px;
				height: 50px;

				color: var(--cor-fonte);

				border-radius: 50%;
				background-color: var(--cor-fundo-contraste);
				transition: var(--delay-default);

				border: none;
				outline: none;
				cursor: pointer;

				svg {
					width: 40px;
					height: 40px;
				}

				&:hover,
				&:focus {
					background-color: var(--cor-fundo-contraste);
					opacity: 0.8;
					backdrop-filter: blur(10px);
				}

				&:focus-visible {
					outline: -webkit-focus-ring-color auto 1px;
				}
			}

			.modal-header {
				border-color: var(--cor-borda-contraste);
				padding: 1.5rem 1.5rem 0.75rem 1.5rem;
				border-bottom: 1px solid var(--cor-borda-contraste);

				border: none;
				box-sizing: border-box;

				h4 {
					width: calc(100% - 55px);
					margin: 0;
				}
			}

			.modal-body {
				height: 100%;
				padding: 0.75rem 1.5rem 1.5rem 1.5rem;
				overflow-y: auto;

				/* Espaçamento (railpadding) */
				.os-scrollbar-vertical {
					padding: 0px 0px 25px 2px !important;
				}
			}
		}
	}

	&.modal-aberto.fechar-modal {
		animation: desaparecer-modal calc(var(--delay-default)) forwards;

		.container-modal {
			animation: subir-modal calc(var(--delay-default));
		}
	}
}

@media (max-width: 500px) {
	#modalImagem.modal-customizada {
		&.modal-aberto {
			& .container-modal {
				width: 90vw;
				max-width: calc(100% - 10px);

				.botao-fechar-modal {
					top: 10px;
					right: 10px;
					transform: translateY(0);
				}

				.modal-header {
					position: relative;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.enos-container {
		flex-direction: column;

		.enos-flex {
			.aviso-atencao {
				width: 70vw;
			}

			.enos {
				width: 70vw;
			}
		}
	}

	.flash-container {
		display: none;
	}
}

@media (max-width: 575px) {
	.acesso-rapido {

		.lista-acesso-rapido {
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		}
	}

	.enos-container {
		.enos-flex {
			.aviso-atencao {
				width: 80vw;
				margin: 0;
			}

			.enos {
				width: 80vw;
			}
		}
	}
}