/* ==========================================================================
   COMPONENTES INSTITUCIONAIS
   ==========================================================================
   Arquivo:
   /css/institucional-componentes.css

   Componentes reutilizáveis para:
   - páginas institucionais
   - páginas de autoridade
   - páginas sobre
   - páginas de apresentação
========================================================================== */


/* ==================================================
   GRID DE CARDS
================================================== */

.cards-grid{

	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;

}



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

.info-card{

	background:var(--cor-branco);

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

	border-radius:16px;

	padding:35px;

	height:100%;

	transition:
	transform .25s ease,
	box-shadow .25s ease;

}


.info-card:hover{

	transform:translateY(-8px);

	box-shadow:0 18px 40px rgba(0,0,0,.12);

}


.info-card h3{

	margin:20px 0 15px;

	font-size:1.2rem;

}



.info-card p{

	margin:0;

	line-height:1.7;

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

}



/* ==================================================
   ÍCONE DOS CARDS
================================================== */

.info-card-icon{

	width:60px;

	height:60px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:var(--cor-fundo-secundario);

	color:var(--cor-primaria);

	font-size:1.5rem;

}



/* ==================================================
   GRID DE CARACTERÍSTICAS
================================================== */

.feature-grid{

	display:grid;

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

	gap:25px;

}



.feature-card{

	display:flex;

	align-items:flex-start;

	gap:20px;

	padding:30px;

	background:var(--cor-branco);

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

	border-radius:16px;

	transition:
	transform .25s ease,
	box-shadow .25s ease;

}



.feature-card:hover{

	transform:translateY(-5px);

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

}



.feature-icon{

	flex-shrink:0;

	width:55px;

	height:55px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:var(--cor-fundo-secundario);

	color:var(--cor-primaria);

	font-size:1.35rem;

}



.feature-card h3{

	margin:0 0 12px;

	font-size:1.15rem;

}



.feature-card p{

	margin:0;

	line-height:1.7;

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

}


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

.profile-layout{


	display:grid;


	grid-template-columns:320px 1fr;


	gap:50px;


	align-items:center;


}


.profile-image img{

	width:100%;

	display:block;

	border-radius:18px;

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

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

	object-fit:cover;

}


.profile-content{

	font-size:1.05rem;

	line-height:1.9;

}


.profile-content p{


	margin-bottom:20px;


}



.profile-content p:last-child{


	margin-bottom:0;


}




.profile-content-subtitle{


	font-weight:600;


	color:var(--cor-primaria);


	margin-bottom:20px!important;


}



/* ==================================================
   BLOCO IMAGEM + TEXTO
================================================== */


.media-layout{

	display:grid;

	grid-template-columns:1fr 1fr;

	gap:50px;

	align-items:center;

	padding:45px;

	background:var(--cor-fundo-secundario);

	border-radius:20px;

}


.media-image img{

	width:100%;

	display:block;

	border-radius:18px;

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

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

}



.media-content{

	line-height:1.8;

}



.media-content p{

	margin:0 0 22px;

}



.media-content .botao{

	margin-top:10px;

}



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


.institucional-cta{

	padding:90px 0;

	text-align:center;

	background:var(--cor-primaria);

	color:var(--cor-branco);

}



.institucional-cta h2{

	margin-bottom:20px;

	color:var(--cor-branco);

}



.institucional-cta p{

	max-width:700px;

	margin:0 auto 35px;

	line-height:1.8;

	color:var(--cor-branco);

}



.institucional-cta .botao{

	background:var(--cor-branco);

	color:var(--cor-primaria);

}



.institucional-cta .botao:hover{

	background:var(--cor-fundo);

	color:var(--cor-primaria);

}

/* ==================================================
   BOTÃO GLOBAL
================================================== */

.botao{

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

	padding:14px 30px;

	border-radius:8px;

	background:var(--cor-primaria);

	color:var(--cor-branco);

	text-decoration:none;

	font-weight:600;

	transition:
	background .25s ease,
	transform .25s ease;

}


.botao:hover{

	background:var(--cor-primaria);

	color:var(--cor-branco);

	transform:translateY(-2px);

}

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

@media(max-width:1024px){


	.cards-grid{

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

	}


	.feature-grid{

		grid-template-columns:1fr;

	}


	.profile-layout{

		grid-template-columns:1fr;

		gap:35px;

	}


	.profile-image{

		max-width:320px;

		margin:0 auto;

	}


	.media-layout{

		grid-template-columns:1fr;

		padding:35px;

	}


}


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

@media(max-width:768px){


	.cards-grid{

		grid-template-columns:1fr;
		
		gap:24px;

	}


	.feature-grid{

		grid-template-columns:1fr;

	}


	.feature-card{

		padding:22px;

	}


	.profile-layout{

		gap:25px;

	}


	.media-layout{

		padding:20px;

		border-radius:15px;

	}


	.institucional-section{

		padding:55px 0;

	}


	.institucional-cta{

		padding:60px 0;

	}


	.institucional-cta h2{

		font-size:1.7rem;

	}


	.botao{

		width:100%;

	}


}