.video-programa-saude {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 120px;

	margin-block: 60px;

	height: 300px;



	iframe {
		box-sizing: border-box;
		padding-block: 20px;

		height: 100%;
		aspect-ratio: 16/9;
	}

	.linha {
		height: 100%;
		width: 2px;
		background-color: var(--blue-light);
	}

	.container-titulo-abertura{
        width: 100%;
		max-width: 533px;
	}
	h2 {
		
		margin: 0;
		font-size: 2.25rem;
		line-height: 3.25rem;
		font-weight: 700;
		color: var(--blue-dark);
		text-align: center;

		width: max-content;
	}

}

.titulo-rede-atencao,
.titulo-linha-cuidado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.botao-navegacao-carrossel {
	top: 50%;
	background-color: white;
	opacity: 1;
	border-radius: 100px;
	width: 80px;
	height: 80px;
	transition: var(--delay-default);
	border: 1px solid rgb(197, 197, 197);

	&:hover,
	&:focus {
		background-color: rgb(197, 197, 197);
	}

	&.anterior {
		transform: translate(-120%, -50%);
	}

	&.proximo {
		transform: translate(120%, -50%);
	}
}

#redeAtencao {
	position: relative;

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

	height: 600px;

	margin-block: 60px;

	&:not(:has(.cartoes-rede-atencao .cartao)) {
		height: 100%;

		.cartoes-rede-atencao {
			height: 100%;
		}
	}

	h2 {
		color: var(--blue-dark);
		text-align: center;

		margin: 0;
		font-size: 2.25rem;
		line-height: 2.25rem;
		font-weight: 700;
	}

	p {
		font-size: 1rem;
		font-weight: 300;
		text-align: center;
		color: var(--gray-dark);

		margin: 0;
		width: 100%;
	}

	/* Remove o hover acidental em dispositivos móveis */
	@media (hover: hover) and (pointer: fine) {
		ul {
			&:has(li a:hover, li a:focus) {
				li {
					min-width: calc(var(--carrossel-item-width) + (var(--carrossel-width) * 0.1));
					max-width: calc(var(--carrossel-item-width) + (var(--carrossel-width) * 0.1));
				}

				li:not(:has(a:hover, a:focus)) {
					min-width: calc(var(--carrossel-item-width) - ((var(--carrossel-width) * 0.1) / (var(--carrossel-itens-visiveis) - 1)));
					max-width: calc(var(--carrossel-item-width) - ((var(--carrossel-width) * 0.1) / (var(--carrossel-itens-visiveis) - 1)));
				}
			}
		}
	}

	.cartoes-rede-atencao {

		&:has(.cartao:hover) {
			.cartao:not(:hover) {
				filter: brightness(0.8);

				.titulo-cartao {
					opacity: 0;
				}
			}
		}

		&:has(.cartao a:focus) {
			.cartao a:not(:focus) {
				filter: brightness(0.8);

				.titulo-cartao {
					opacity: 0;
				}
			}
		}


		.cartao {
			display: flex;
			margin: 0;

			transition: var(--delay-default) ease-in-out;

			&:hover,
			&:has(a:focus) {
				flex-basis: 25vw;

				.titulo-cartao {
					bottom: 50%;
					transform: translateY(50%);
				}
			}

			a {
				position: relative;
				width: 100%;
				height: 100%;

				overflow: hidden;
				border-radius: 18px;
			}

			img {
				position: absolute;
				top: 0;
				left: 0;

				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.titulo-cartao {
				position: absolute;
				left: 5px;
				bottom: 5px;
				z-index: 1;

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

				width: calc(100% - 10px);
				height: 80px;

				background-color: rgba(255, 255, 255, 0.7);
				backdrop-filter: blur(25px);

				border-radius: 13px;

				transition: var(--delay-default) ease;
				opacity: 1;

				font-size: 1.5rem;
				font-weight: 300;
				color: var(--black);
				text-align: center;
				margin: 0;
				letter-spacing: initial;
			}
		}
	}
}

#nepshu {
	position: relative;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 130px;

	background-image: url('../../img/banner-nepshu.jpg');
	background-size: cover;
	width: 100%;
	height: 60vh;
	max-height: 540px;

	&::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #16A6FFcc 0%, #004F99cc 100%);
		z-index: 0;
	}

	.logo-nepshu {
		width: 300px;
		height: auto;
		z-index: 1;
	}

	.botao-nepshu {
		position: relative;

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

		background-color: white;
		border-radius: 60px;
		border: 2px solid white;

		color: #222061;
		font-weight: 300;
		font-size: 2.25rem;

		width: 400px;
		height: 100px;

		text-decoration: none;
		z-index: 1;
		overflow: hidden;

		transition: color calc(2*var(--delay-default)), background-color calc(5*var(--delay-default));

		span {
			margin-left: 10px;
			font-weight: 700;
			font-style: italic;
		}


		&::before {
			position: absolute;
			z-index: -1;
			content: '';
			width: 0;
			height: 0;

			clip-path: circle(50% at 50% 50%);
			transform: rotate(90deg);
			background-color: var(--banner-blue);
			transition: var(--delay-default);

		}

		&:hover::before,
		&:focus::before {
			width: 420px;
			height: 420px;
		}

		&:hover,
		&:focus {
			color: rgb(255, 255, 255);
		}
	}

	.elemento-mais-saude {
		position: absolute;

		top: 0;
		right: 0;

		width: max-content;
		height: 100%;
		z-index: 1;

		pointer-events: none;
	}
}

#linhaCuidado {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;

	height: 100%;
	max-height: 100vh;

	margin-block: 60px;



	h2 {
		color: var(--blue-dark);
		text-align: center;

		margin: 0;
		font-size: 2.25rem;
		line-height: 2.25rem;
		font-weight: 700;
	}

	p {
		font-size: 1rem;
		font-weight: 300;
		text-align: center;
		color: var(--gray-dark);

		margin: 0;
		width: 100%;
	}

	.cartoes-linha-cuidado {
		height: unset;

		&:has(.cartao:hover) {
			.cartao:not(:hover) {
				filter: brightness(0.8);

				.titulo-cartao {
					opacity: 0;
				}
			}
		}

		&:has(.cartao a:focus) {
			.cartao a:not(:focus) {
				filter: brightness(0.8);

				.titulo-cartao {
					opacity: 0;
				}
			}
		}

		.cartao {
			display: flex;
			margin: 0;
			aspect-ratio: 1 / 1;

			transition: var(--delay-default) ease-in-out;

			a {
				position: relative;
				width: 100%;
				height: 100%;

				overflow: hidden;
				border-radius: 18px;
			}

			.titulo-cartao {
				position: absolute;
				left: 5px;
				bottom: 5px;
				z-index: 1;

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

				width: calc(100% - 10px);
				height: 80px;

				background-color: rgba(255, 255, 255, 0.7);
				backdrop-filter: blur(25px);

				border-radius: 13px;

				transition: var(--delay-default) ease;
				opacity: 1;

				font-size: 1.5rem;
				font-weight: 300;
				color: var(--black);
				text-align: center;
				margin: 0;
				letter-spacing: initial;
			}

			img {
				position: absolute;
				top: 0;
				left: 0;

				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

#cenarioPratica {
	position: relative;

	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 10px;

	height: min-content;

	::selection {
		background-color: black;
		color: white;
	}

	.banner-titulo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;

		h3 {
			color: var(--banner-blue);
			font-size: 4rem;
			font-weight: 700;
			font-style: italic;
			text-align: center;
			margin: 0;
		}

		.botao-abrir-formulario {
			position: relative;

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

			padding-inline: 40px;

			border: 1px solid var(--banner-blue);

			width: calc(100% + 30px);
			height: 100px;
			border-radius: 50px;
			background-color: var(--white);

			font-size: 2rem;
			font-weight: 600;
			color: var(--banner-blue);

			text-decoration: none;
			overflow: hidden;

			span {
				z-index: 2;

				svg {
					width: 2rem;
					height: 2rem;
					margin-left: -10px;
					fill: transparent;
					transition: var(--delay-default);
				}
			}

			&:hover,
			&:focus {
				color: white;

				svg {
					fill: white;
					margin-left: 10px;
				}
			}

			&::before {
				position: absolute;
				z-index: 0;
				right: 20px;

				content: '';

				height: 60px;
				width: 60px;
				aspect-ratio: 1/1;

				background-color: var(--banner-blue);


				clip-path: circle(50% at 50% 50%);
				transition: var(--delay-default);

				transform: scale(1);

			}

			&:hover::before,
			&:focus::before {
				transform: scale(20.4);
			}
		}
	}
}

#podcasts {

	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-block: 60px;

	.titulo {
		display: flex;
		justify-content: space-between;
		align-items: end;
		border-bottom: 1px solid var(--blue-dark);

		h2 {
			color: var(--blue-dark);
			font-size: 2.25rem;
			font-weight: 700;
			margin: 0;
		}

		.botao-ver-mais {
			color: var(--gray-dark);
			font-weight: 700;
			font-size: 1.5rem;
			text-decoration: none;
			transition: var(--delay-default);

			&:hover {
				color: var(--blue-light);
			}
		}
	}

	.lista-podcast {
		display: flex;
		flex-wrap: nowrap;
		align-items: start;
		gap: 20px;


		width: 100%;
		height: 100%;

		padding: 0;
		margin: 0;

		list-style: none;

		&::-webkit-scrollbar {
			width: 8px;
			/* Largura da barra vertical */
			height: 8px;
			/* Largura da barra vertical */
		}

		&::-webkit-scrollbar-track {
			background: #f0f0f000;
			/* Cor do fundo da barra */
			border-radius: 4px;
			margin-left: 5px;
			/* cria espaço visual no topo e embaixo */
		}

		&::-webkit-scrollbar-thumb {
			background: #888;
			/* Cor da "alça" da barra */
			border-radius: 4px;
		}

		li {

			flex: 1 1 0;
			min-width: 140px;
			margin: 0;

			transition: var(--delay-default);

			&:hover {
				transform: translateY(-10px);
			}
		}

		a {
			display: flex;
			flex-direction: column;
			gap: 5px;

			width: 100%;
			height: 100%;
			text-decoration: none;

			img {
				width: 100%;
				height: 100%;
				aspect-ratio: 1/1;
				object-fit: cover;
			}

			p {
				font-size: 1rem;
				font-weight: 500;
				color: var(--gray-dark);
				margin: 0;
			}
		}
	}
}

#noticias {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-block: 60px;

	.titulo {
		display: flex;
		justify-content: space-between;
		align-items: end;
		border-bottom: 1px solid var(--blue-dark);

		h2 {
			color: var(--blue-dark);
			font-size: 2.25rem;
			font-weight: 700;
			margin: 0;
		}

		.botao-ver-mais {
			color: var(--gray-dark);
			font-weight: 700;
			font-size: 1.5rem;
			text-decoration: none;
			transition: var(--delay-default);

			&:hover {
				color: var(--blue-light);
			}
		}
	}

	.lista-noticia {
		display: flex;
		flex-wrap: nowrap;
		align-items: start;
		gap: 20px;

		width: 100%;
		height: 100%;

		padding: 0;
		margin: 0;

		list-style: none;
		overflow-x: scroll;

		&::-webkit-scrollbar {
			width: 8px;
			/* Largura da barra vertical */
			height: 8px;
			/* Largura da barra vertical */
		}

		&::-webkit-scrollbar-track {
			background: #f0f0f000;
			/* Cor do fundo da barra */
			border-radius: 4px;
			margin-left: 5px;
			/* cria espaço visual no topo e embaixo */
		}

		&::-webkit-scrollbar-thumb {
			background: #888;
			/* Cor da "alça" da barra */
			border-radius: 4px;
		}
	}

	li {
		min-width: 160px;
		flex: 1 1 0;
		margin: 0;
		transition: var(--delay-default);

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

	.link-noticia {
		text-transform: capitalize;
		color: var(--gray-dark);
		font-size: 1rem;
		font-weight: 400;
		text-decoration: none;

		color: inherit;

		--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);
	}
}

#bannerFormulario {
	position: relative;

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

	background: url('../../img/formulario.png');
	background-size: cover;
	height: 500px;

	::selection {
		background-color: black;
		color: white;
	}

	.banner-titulo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;

		h3 {
			color: var(--white);
			font-size: 4rem;
			font-weight: 700;
			font-style: italic;
			margin: 0;
		}

		.botao-abrir-formulario {
			position: relative;

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

			padding-inline: 40px;

			border: 1px solid white;

			width: 400px;
			height: 100px;
			border-radius: 50px;
			background-color: var(--white);

			font-size: 2rem;
			font-weight: 600;
			color: var(--banner-blue);

			text-decoration: none;
			overflow: hidden;

			span {
				z-index: 2;

				svg {
					width: 2rem;
					height: 2rem;
					margin-left: -10px;
					fill: transparent;
					transition: var(--delay-default);
				}
			}

			&:hover,
			&:focus {
				color: white;

				svg {
					fill: white;
					margin-left: 10px;
				}
			}

			&::before {
				position: absolute;
				z-index: 0;
				right: 20px;

				content: '';

				height: 60px;
				width: 60px;
				aspect-ratio: 1/1;

				background-color: var(--banner-blue);


				clip-path: circle(50% at 50% 50%);
				transition: var(--delay-default);

				transform: scale(1);

			}

			&:hover::before,
			&:focus::before {
				transform: scale(12);
			}
		}
	}

	.banner-texto {

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

		.banner-texto-principal {
			padding-inline: 15px;
			width: max-content;
			background-color: black;
			font-size: 3rem;
			font-weight: 800;
			color: var(--white);
			text-align: center;
		}

		.banner-texto-secundario {
			font-size: 1.5rem;
			font-weight: 400;
			color: var(--white);
			text-align: center;

		}
	}
}



@media (max-width: 1400px) {

	.video-programa-saude {
		gap: 60px;

		margin-block: 60px;

		height: 250px;

		.linha {
			height: 100%;
			width: 2px;
			background-color: var(--blue-light);
		}
	}

	#nepshu {

		.logo-nepshu {
			width: 200px;
			height: 200px;
		}

		.botao-nepshu {
			width: 300px;
			height: 80px;
			font-size: 1.8rem;
		}
	}

	#linhaCuidado {

		.cartoes-linha-cuidado {
			width: 100%;

			.cartao {

				.titulo-cartao {
					height: 60px;
					font-size: 1.2rem;
				}
			}
		}
	}

}

@media (max-width: 1100px) {

	.video-programa-saude {
		justify-content: unset;
		flex-direction: column-reverse;
		gap: 15px;

		margin-block: 60px;

		height: min-content;

		h2 {
			font-size: 1.5rem;
			line-height: 2.25rem;
			height: min-content;
			margin: auto;
		}

		iframe {
			padding-block: 0px;

			height: 50%;
			aspect-ratio: unset;
		}

		.linha {
			display: none;
		}
	}

	#redeAtencao {
		max-width: unset;

		.botao-navegacao-carrossel {
			display: none;
		}
	}

	#linhaCuidado {

		.botao-navegacao-carrossel {
			display: none;
		}
	}
}

@media(min-width: 1025px) {
	#linhaCuidado {
		.carrossel-customizado-container {
			--carrossel-itens-visiveis: 3;
		}
	}
}

@media(max-width: 1024px) {
	#linhaCuidado {
		.carrossel-customizado-container {
			--carrossel-itens-visiveis: 3.2;
		}
	}
}

@media (max-width: 991px) {
	

	#cenarioPratica {
		flex-direction: column-reverse;

		.banner-titulo {
			h3 {
				font-size: 2.5rem;
			}

			.botao-abrir-formulario {
				justify-content: center;

				width: 100%;
				height: 80px;

				font-size: 1rem;
				font-weight: 600;

				span {
					z-index: 2;

					svg {
						width: 1.5rem;
						height: 1.5rem;
						margin-left: 10px;
						fill: var(--banner-blue);
						transition: var(--delay-default);
					}
				}

				&:hover,
				&:focus {
					color: var(--banner-blue);
					
					svg {
						fill: var(--banner-blue);
					}
				}

				&::before {
					display: none;
				}
			}
		}

		.banner-texto {
			img{
				width: 200px;
			}
		}
	}

	#redeAtencao {
		justify-content: left;
	}

	#podcasts {

		.lista-podcast {

			overflow-x: scroll;
		}
	}
}

@media (max-width: 768px) {
	#linhaCuidado {
		.carrossel-customizado-container {
			--carrossel-itens-visiveis: 2.2;
		}
	}

	#bannerFormulario {
		flex-direction: column-reverse;
		height: 400px;


		.banner-titulo {
			h3 {
				font-size: 2.5rem;
			}

			.botao-abrir-formulario {
				justify-content: center;

				width: 300px;
				height: 80px;

				font-size: 1.5rem;
				font-weight: 600;

				span {
					z-index: 2;

					svg {
						width: 1.5rem;
						height: 1.5rem;
						margin-left: 10px;
						fill: var(--banner-blue);
						transition: var(--delay-default);
					}
				}

				&:hover,
				&:focus {
					color: var(--banner-blue);

					svg {
						fill: var(--banner-blue);
					}
				}

				&::before {
					display: none;
				}
			}
		}

		.banner-texto {
			.banner-texto-principal {
				font-size: 2rem;
			}

			.banner-texto-secundario {
				font-size: 1.2rem;
			}
		}
	}

	#nepshu {
		flex-direction: column;
		gap: 30px;

		height: 400px;

		.logo-nepshu {
			width: 200px;
			height: 200px;
		}

		.botao-nepshu {
			width: 300px;
			height: 80px;
			font-size: 1.8rem;
		}
	}

}

@media (max-width: 425px) {
	#redeAtencao {
		.carrossel-customizado-container {
			--carrossel-itens-visiveis: 1.2;
			--carrossel-height: 400px;
		}
	}

	#linhaCuidado {
		.carrossel-customizado-container {
			--carrossel-itens-visiveis: 1.2;
		}
	}
}

@media (max-width: 320px) {
		#cenarioPratica {

		.banner-titulo {

			.botao-abrir-formulario {
				padding-inline: 14px;
				height: 50px;
			}
		}
	}

}