/*Comissões*/
.cpa{
	.abertura{
		padding: 80px 10%;
		& p{
			font-size: 1rem;
			line-height: 1.6;
			margin: 15px 0;
			text-wrap: pretty;
		}
		& strong{
			color: var(--azul2);
		}
		ul, ol{
			list-style-position: inside;
			margin: 15px 0;
			li{
				margin: 10px 0;
				&::marker{
					color: var(--azul2);
					font-weight: 700;
				}
			}
		}
		& a{
			color: var(--azul2);
			transition: .3s;
			&:hover{
				color: var(--azul1)
			}
		}
		& .video{
			margin: 15px 0;
			position: sticky;
			top: 120px;
			iframe{
				border-radius: 15px;
			}
		}
	}
	.conteudo{
		padding: 80px 10%;
		background: #f9f9f9;
		& p{
			font-size: 1rem;
			line-height: 1.6;
			margin: 15px 0;
			text-wrap: pretty;
		}
		& strong{
			color: var(--azul2);
		}
		ul, ol{
			list-style-position: inside;
			margin: 15px 0;
			li{
				margin: 10px 0;
				&::marker{
					color: var(--azul2);
					font-weight: 700;
				}
			}
		}
		& a{
			color: var(--azul2);
			transition: .3s;
			&:hover{
				color: var(--azul1)
			}
		}	
		.membro-item {
			background: var(--cinza3);
			padding: 20px;
			display: flex;
			width: 100%;
			height: 350px;
			flex-direction: column;
			gap: 8px;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 10px;
			img{
				border-radius: 50%;
				aspect-ratio: 1/1;
				object-fit: cover;
				width: 80%;
				height: auto;
				display: block;
				background: var(--azul3);
			}
			h4{
				color: var(--azul2);
				font-size: 1rem; 
				line-height: 1.1;
				margin: 0;
				font-weight: 600;
			}
			p{
				font-size: .85rem;
				margin: 0;
				padding: 0;
			}
		}
		.card {
			border: 0px;
			margin-bottom: 15px !important;
		}
		a.botao {
			background: var(--azul2);
			padding: 10px 20px;
			color: #fff !important;
			border-radius: 10px;
			transition: .3s;
			&:hover{
				background: var(--azul1);
				color: #fff !important;
			}
		}		

		.card-header {
			cursor: pointer;
			background-color: var(--azul2) !important;
			color: #fff !important;
			text-decoration: none !important;
			padding: 20px 20px !important;
			border-radius: 8px !important;
			border: solid 1px var(--azul2) !important;
			transition: .3s !important;
			text-align: left !important;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.card-header:hover {
			background-color: var(--azul1) !important;
			color: #fff !important;
		}

		.card-header:focus {
			background-color: var(--azul1) !important;
			color: #00d9ff !important;
		}

		.card-header:focus[aria-expanded="false"] {
			background-color: transparent !important;
			color: var(--azul2) !important;
		}

		.card-header .accordion-title {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.card-header .accordion-title img {
			width: 32px;
			height: auto;
			filter: contrast(0) brightness(3.5);
			aspect-ratio: 1 / 1;
			object-fit: contain;			
		}

		.card-header i {
			color: #00d9ff !important;
			margin-right: 0px !important;
			transition: transform .3s ease;
		}

		.card-header[aria-expanded="true"] i {
			transform: rotate(180deg);
		}

		.card p {
			margin-bottom: 0px !important;
		}

		.card button:focus {
			outline: 0px auto -webkit-focus-ring-color !important;
		}
		.lateral{
			position: sticky; top: 120px;
			.atendimento{
				background: #f1f1f1; 
				padding: 30px; 
				border-radius: 8px;
				h3{
					font-weight: 700; 
					font-size:1.2rem; 
					margin: 0 0 15px; 
					color: var(--azul2);
				}
				p{
					margin-bottom: 0px;
				}
			}
			.questionario {
				width: 100%;
				padding: 20px;
				color: #Fff;
				background: var(--azul2); 
				transition: .3s; 
				border-radius: 8px; 
				text-align: center;
				font-weight: 600;
				margin: 15px 0px 0px;
				display: block;
				&:hover{
					background: var(--azul1);
				}
				i{
					color: #00d9ff;
				}
			}			
		}
	}

	@media (max-width: 1600px){
		.abertura, .conteudo{
			padding: 50px;
		}
		& .conteudo {
			.membro-item {
				height: 300px;
			}
		}
	}
	@media (max-width: 1024px){
		& .conteudo {
			.lateral {	
				margin-top: 30px;
			}
		}
	}
	@media (max-width: 480px) {
		.abertura, .conteudo{
			padding: 30px;
		}		
	}
}