/* ==================================================
   PROTOCOLO EDUCATIVO
   SORRISO SEM TRAUMAS
================================================== */
/* ==================================================
   HERO PROTOCOLO
================================================== */

.hero-protocolo{

	padding:80px 0;

	background:var(--cor-fundo);

}


.hero-protocolo .container{

	text-align:center;

}


.hero-protocolo .section-tag{

	display:inline-flex;

	margin-bottom:20px;

}


.hero-protocolo h1{

	font-family:var(--fonte-titulo);
	
	font-size:3rem;

	line-height:1.05;

	text-shadow: 0 3px 8px rgba(0,0,0,.15);
	

}


.hero-protocolo p{

	max-width:800px;

	margin:20px auto 0;

	line-height:1.8;
	
	font-size:1.15rem;

	max-width:850px;

	margin:25px auto 0;

}


/* ==================================================
   SEÇÕES GERAIS
================================================== */


.protocolo-section{

    padding:80px 0;

}



.protocolo-section .section-header{

    max-width:850px;

    margin:0 auto 45px;

    text-align:center;

}



.protocolo-section h2{

    margin-top:15px;

    font-family:var(--fonte-titulo);

    color:var(--cor-texto);

    line-height:1.25;

}



.protocolo-section p{

    line-height:1.8;

    color:var(--cor-texto-claro);

}



/* ==================================================
   CONTEÚDO
================================================== */


.protocolo-conteudo{

    max-width:850px;

    margin:auto;

}



.protocolo-conteudo p{

    text-align:center;

    font-size:1.1rem;

}



/* ==================================================
   BLOCO DE DESTAQUE
================================================== */


.protocolo-destaque{

    background:var(--cor-fundo);

}



.protocolo-destaque p{

    max-width:850px;

    margin:20px auto;

}


/* ==================================================
   PILARES DO PROTOCOLO
================================================== */


.protocolo-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.protocolo-card{

    background:var(--cor-branco);

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

    border-radius:24px;

    padding:35px 25px;

    text-align:center;

    transition:var(--transicao);

    overflow:hidden;

}



.protocolo-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--sombra);

}



/* ==================================================
   ÍCONE DO PILAR
================================================== */


.protocolo-card-icon{

    width:110px;

    height:110px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--cor-fundo);

    color:var(--cor-destaque);

    font-size:3rem;

    transition:var(--transicao);

}



.protocolo-card:hover .protocolo-card-icon{

    background:var(--cor-destaque);

    color:var(--cor-branco);

}



.protocolo-card h3{

    margin-bottom:15px;

    color:var(--cor-texto);

    font-family:var(--fonte-titulo);

    font-size:1.25rem;

}



.protocolo-card p{

    color:var(--cor-texto-claro);

    line-height:1.7;

    font-size:.95rem;

}

/* ==================================================
   BLOCO AUTORIDADE
================================================== */







/* ==================================================
   GRID
================================================== */




/* ==================================================
   CARD
================================================== */




/* ==================================================
   ÍCONE
================================================== */





/* ==================================================
   TÍTULOS
================================================== */




/* ==================================================
   DESTAQUE FINAL
================================================== */


/* ==================================================
   BENEFÍCIOS
================================================== */

.beneficios-grid{

	display:grid;

	grid-template-columns:repeat(3,1fr);

	gap:25px;

}


.beneficio-card{

	display:flex;

	align-items:flex-start;

	gap:18px;

	background:var(--cor-branco);

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

	border-radius:18px;

	padding:25px;

	transition:var(--transicao);

}


.beneficio-card:hover{

	transform:translateY(-5px);

	box-shadow:var(--sombra);

}

.beneficio-icon{

	flex-shrink:0;

	width:42px;

	height:42px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:var(--cor-destaque);

	font-size:1rem;

}


.beneficio-icon i{

	color: var(--cor-branco);

}

.beneficio-card p{

	margin:0;

	line-height:1.7;

	color:var(--cor-texto-claro);

}




/* ==================================================
   AUTORIDADE
================================================== */

.protocolo-autoridade{

	padding:80px 0;

	background:var(--cor-fundo);

}

.protocolo-autoridade .container{

	max-width:1200px;

}

.protocolo-autoridade h2{

	font-family:var(--fonte-titulo);

	margin-bottom:24px;

}

.protocolo-autoridade p{

	line-height:1.8;

	color:var(--cor-texto-claro);

}

.protocolo-autoridade .section-header{

	text-align:center;

	margin-bottom:60px;

}

.protocolo-autoridade .section-tag{

	display:inline-flex;

}


/* ==================================================
   TOPO DA AUTORIDADE
================================================== */

.protocolo-autoridade-topo{

	display:grid;

	grid-template-columns:420px 1fr;

	align-items:center;

	gap:60px;

	margin-bottom:70px;

}

.protocolo-autoridade-imagem{

	position:relative;

	background:var(--cor-branco);

	padding:12px;

	border-radius:28px;

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

	box-shadow:var(--sombra);

	transition:var(--transicao);

}


.protocolo-autoridade-imagem:hover{

	transform:translateY(-8px);

	box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.protocolo-autoridade-imagem img{

	display:block;

	width:100%;

	height:auto;

	border-radius:24px;

	box-shadow:var(--sombra);

	object-fit:cover;

}

.protocolo-autoridade-texto{

	display:flex;

	flex-direction:column;

	justify-content:center;

}

.protocolo-autoridade-texto h2{

	margin:0 0 25px;

	font-size:2rem;

	line-height:1.25;

}

/* ==================================================
   SUBTÍTULO AUTORIDADE
================================================== */

.protocolo-autoridade-subtitulo{

	font-size:1.05rem;

	font-style:italic;

	font-weight:600;

	color:var(--cor-destaque);

	margin-top:-10px;

	margin-bottom:30px;

}

.protocolo-autoridade-texto p{

	margin-bottom:18px;

}

.protocolo-autoridade-texto p:last-child{

	margin-bottom:0;

}

/* ==================================================
   CARDS DA AUTORIDADE
================================================== */

.autoridade-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:24px;

	margin-bottom:60px;

}


.autoridade-card{

	background:var(--cor-branco);

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

	border-radius:22px;

	padding:30px 25px;

	text-align:center;

	transition:var(--transicao);

}


.autoridade-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--sombra);

}


.autoridade-icon{

	width:90px;

	height:90px;

	margin:0 auto 22px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:var(--cor-fundo);

	color:var(--cor-destaque);

	font-size:2.3rem;

	transition:var(--transicao);

}


.autoridade-card:hover .autoridade-icon{

	background:var(--cor-destaque);

	color:var(--cor-branco);

}


.autoridade-card h3{

	margin-bottom:14px;

	font-family:var(--fonte-titulo);

	font-size:1.15rem;

	line-height:1.3;

}


.autoridade-card p{

	margin:0;

	line-height:1.7;

	font-size:.95rem;

}

/* ==================================================
   DESTAQUE FINAL
================================================== */

.autoridade-destaque{

	padding:40px 50px;

	background:var(--cor-branco);

	border-left:6px solid var(--cor-destaque);

	border-radius:22px;

	box-shadow:var(--sombra);

}

.autoridade-destaque p{

	margin:0;

	font-size:1.08rem;

	line-height:1.9;

	text-align:center;

}

.autoridade-destaque strong{

	color:var(--cor-destaque);

}

/* ==================================================
   CTA
================================================== */


.protocolo-cta{

    padding:80px 0;

    text-align:center;

}



.protocolo-cta h2{

    max-width:800px;

    margin:0 auto 35px;

    font-family:var(--fonte-titulo);

    color:var(--cor-texto);

}


/* ==================================================
   CTA FINAL
================================================== */

.protocolo-cta{

	padding:80px 0;

	background:var(--cor-destaque);

	text-align:center;

}


.protocolo-cta h2{

	color:var(--cor-branco);

	font-family:var(--fonte-titulo);

	margin-bottom:35px;

}


.protocolo-cta .botao{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:14px 32px;

	background:var(--cor-branco);

	color:var(--cor-destaque);

	border-radius:50px;

	border:2px solid var(--cor-branco);

	font-family:var(--fonte-titulo);

	font-weight:600;

	text-decoration:none;

	transition:var(--transicao);

}


.protocolo-cta .botao:hover{

	background:transparent;

	color:var(--cor-branco);

	transform:translateY(-3px);

}


/* ==================================================
   RESPONSIVO
================================================== */


@media(max-width:1024px){


    .protocolo-grid{

        grid-template-columns:repeat(2,1fr);

    }
	

	.protocolo-autoridade-imagem{

		max-width:420px;

		margin:0 auto;

	}
	
	.beneficios-grid{

		grid-template-columns:repeat(2,1fr);

	}
		
/* ==================================================
   AUTORIDADE - TABLET
================================================== */

	.protocolo-autoridade{

		padding:70px 0;

	}

	.protocolo-autoridade-topo{

		grid-template-columns:1fr;

		gap:45px;

		margin-bottom:55px;

	}

	.protocolo-autoridade-imagem{

		max-width:420px;

		margin:0 auto;
		
		padding:10px;

		border-radius:22px;


	}

	.protocolo-autoridade-texto{

		text-align:center;

	}

	.protocolo-autoridade-texto h2{

		font-size:1.8rem;

	}

	.autoridade-grid{

		grid-template-columns:repeat(2,1fr);

		gap:20px;

	}

	.autoridade-destaque{

		padding:35px;

	}	


}



@media(max-width:768px){


    .hero-protocolo{

        padding:60px 0;

    }



    .protocolo-section{

        padding:60px 0;

    }



    .hero-protocolo p{

        font-size:1rem;

    }



    .protocolo-grid{

        grid-template-columns:1fr;

    }



	.protocolo-card{

		background:var(--cor-branco);

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

		border-radius:18px;

		padding:30px 20px;

		text-align:center;

		transition:var(--transicao);

	}




	.protocolo-card-icon{

		width:90px;

		height:90px;

		margin:0 auto 25px;

		display:flex;

		align-items:center;

		justify-content:center;

		border-radius:50%;

		background:var(--cor-fundo);

		color:var(--cor-destaque);

		font-size:2.2rem;

		transition:var(--transicao);

	}



	.protocolo-card:hover .protocolo-card-icon{

		background:var(--cor-destaque);

		color:var(--cor-branco);

	}



	.protocolo-card h3{

		font-family:var(--fonte-titulo);

		margin-bottom:15px;

	}



	.protocolo-card p{

		line-height:1.7;

	}


	.beneficios-grid{

		grid-template-columns:1fr;

	}


	.beneficio-card{

		padding:22px;

	}

/* ==================================================
   AUTORIDADE - MOBILE
================================================== */

	.protocolo-autoridade{

		padding:60px 0;

	}

	.protocolo-autoridade .section-header{

		margin-bottom:40px;

	}

	.protocolo-autoridade-topo{

		grid-template-columns:1fr;

		gap:35px;

		margin-bottom:45px;

	}

	.protocolo-autoridade-imagem{

		max-width:300px;

		margin:0 auto;

	}

	.protocolo-autoridade-texto{

		text-align:left;

	}

	.protocolo-autoridade-texto h2{

		font-size:1.55rem;

		margin-bottom:18px;

	}

	.protocolo-autoridade-texto p{

		font-size:.95rem;

		line-height:1.7;

	}

	.autoridade-grid{

		grid-template-columns:1fr;

		gap:18px;

		margin-bottom:40px;

	}

	.autoridade-card{

		padding:25px 20px;

	}

	.autoridade-icon{

		width:75px;

		height:75px;

		font-size:1.9rem;

		margin-bottom:18px;

	}

	.autoridade-card h3{

		font-size:1.05rem;

	}

	.autoridade-destaque{

		padding:25px;

		border-left-width:4px;

	}

	.autoridade-destaque p{

		font-size:1rem;

		text-align:left;

	}


}