/* Bloco texto + foto (index.php e quem-somos.php): mesmas medidas nas duas páginas */
.blocoTextoFoto{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px;
	align-items:start;
	max-width:1000px;
	margin:50px auto 0px auto;
	padding:0px 10px;
	box-sizing:border-box;
	text-align:justify;
}

.fotoMoldura{
	margin:0px;
	padding:5px;
	background:#E5E5E5;
	border-top-left-radius:50px;
	border-bottom-right-radius:50px;
}

.fotoMoldura img{
	display:block;
	width:100%;
	border-top-left-radius:50px;
	border-bottom-right-radius:50px;
}

/* Bloco só de texto logo abaixo, alinhado pelas mesmas bordas */
.blocoTexto{
	max-width:1000px;
	margin:50px auto 0px auto;
	padding:0px 10px;
	box-sizing:border-box;
	text-align:justify;
}

.blocoTexto h3{
	margin:0px 0px 20px 0px;
	font-size:22px;
	font-weight:500;
	text-align:left;
}

@media only screen and (max-width: 800px) {
	.blocoTextoFoto{
		grid-template-columns:1fr;
	}
}

/* Fotos extras da página Empresa (clique amplia), mesmas bordas dos blocos acima */
.gradeFotos{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px;
	max-width:1000px;
	margin:50px auto 0px auto;
	padding:0px 10px;
	box-sizing:border-box;
}

.fotoAmpliar{
	position:relative;
	display:block;
	aspect-ratio:1 / 1;
	overflow:hidden;
	border-radius:10px;
}

.fotoAmpliar .foto{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background-size:cover;
	background-position:center;
}

.fotoAmpliar span{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FFF;
	background:rgba(0,0,0,0.5);
	opacity:0;
	transition:opacity 0.3s;
}

.fotoAmpliar:hover span{
	opacity:1;
}

@media only screen and (max-width: 800px) {
	.gradeFotos{
		grid-template-columns:1fr;
	}
}

/* Celular: mesmo padrão em todas as páginas */
@media only screen and (max-width: 800px) {
	/* uma única margem lateral de 20px, dada pelo #container */
	#container{
		padding-left:20px !important;
		padding-right:20px !important;
		box-sizing:border-box;
	}

	#container .row,
	#container .column,
	#container .columns{
		padding-left:0px !important;
		padding-right:0px !important;
		max-width:100% !important;
	}

	#container .blocoTextoFoto,
	#container .blocoTexto,
	#container .gradeFotos,
	#container .gradeCards{
		padding-left:0px;
		padding-right:0px;
	}

	/* faixa de contato da home ocupa a largura toda, como nas outras páginas */
	#container .faixaContato{
		margin-left:-20px;
		margin-right:-20px;
		width:calc(100% + 40px);
	}

	/* títulos de seção menores e texto sem justificar (evita buracos entre as palavras) */
	#container font[style*="font-size:36px"]{
		font-size:26px !important;
		line-height:1.3;
	}

	#container [align="justify"],
	#container .blocoTextoFoto,
	#container .blocoTexto{
		text-align:left !important;
	}
}

/* Logos da página Clientes: centralizados no cartão, e a última linha também centralizada */
.gradeClientes{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px;
	max-width:1140px;
	margin:50px auto 0px auto;
	padding:0px 20px;
	box-sizing:border-box;
}

.cartaoCliente{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 1 250px;
	height:150px;
	padding:20px;
	box-sizing:border-box;
	border-radius:10px;
	background:linear-gradient(to bottom, #FFFFFF, #EFEFEF);
}

.cartaoCliente img{
	display:block;
	max-width:100%;
	max-height:100%;
}

@media only screen and (max-width: 800px) {
	#container .gradeClientes{
		padding:0px;
		gap:16px;
	}

	.cartaoCliente{
		flex-basis:calc(50% - 8px);
		height:120px;
		padding:14px;
	}
}

/* Margem lateral das páginas internas: o texto nunca encosta na borda, em nenhuma largura */
.conteudoPagina{
	padding:0px 20px;
	box-sizing:border-box;
}

@media only screen and (max-width: 800px) {
	#container .conteudoPagina{
		padding:0px;
	}
}

/* grades que já ficam dentro de .conteudoPagina não somam outra margem lateral */
.conteudoPagina .gradeCards,
.conteudoPagina .gradeClientes{
	padding-left:0px;
	padding-right:0px;
}