@charset "UTF-8";
/* Inpasa - Sostenibilidad (marcador inpasa-sost).
   Carregado por inpasa_css_enqueue() no mu-plugin inpasa-polylang-nav-menu-switch.php.
   Caminhos de imagem sao relativos a este arquivo (../../uploads/...). */
/* Sostenibilidad (layout da pagina 9 do PDF): fundo cinza full-bleed, blocos
   alternados de texto + foto com icone sobreposto no canto superior direito
   da foto (mesmo truque do carrossel de produtos: foto com cantos
   arredondados so em cima-esquerda/embaixo-direita). */
.page-id-4246 .inpasa-page-hero{margin-bottom:0;}
.page-id-4246 .inpasa-breadcrumb{background:#e6e6e6;box-shadow:0 0 0 100vmax #e6e6e6;clip-path:inset(0 -100vmax);margin-bottom:0;padding-top:14px;padding-bottom:14px;}
.page-id-4246 main#content .page-content{padding-bottom:0;}
.inpasa-sost-surface{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#e6e6e6;box-sizing:border-box;padding:40px 0 70px;}
.inpasa-sost-bloco{max-width:1320px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;box-sizing:border-box;}
/* espaco extra: o icone do 2o bloco flutua acima da propria foto (mesma
   altura do icone, ~104px) e brigava com o final do texto do bloco anterior */
.inpasa-sost-bloco + .inpasa-sost-bloco{margin-top:130px;}
.inpasa-sost-bloco--dir{grid-template-areas:"texto foto";}
.inpasa-sost-bloco--dir .inpasa-sost-texto{grid-area:texto;}
.inpasa-sost-bloco--dir .inpasa-sost-foto{grid-area:foto;}
.inpasa-sost-bloco--esq{grid-template-areas:"foto texto";}
.inpasa-sost-bloco--esq .inpasa-sost-foto{grid-area:foto;}
.inpasa-sost-bloco--esq .inpasa-sost-texto{grid-area:texto;}
/* min-width:0 nas duas colunas: por padrao um item de grid nao encolhe
   abaixo do tamanho do seu conteudo (min-width:auto), o que empurrava o
   texto para fora da faixa dele e vazava por baixo/atras da foto. */
.inpasa-sost-texto,.inpasa-sost-foto{min-width:0;}
.inpasa-sost-texto{overflow:hidden;}
.inpasa-sost-texto h3{margin:0 0 14px;color:#1f3a5f;font-size:24px;font-weight:800;}
.inpasa-sost-texto p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#333;}
.inpasa-sost-texto p:last-child{margin-bottom:0;}
.inpasa-sost-foto{position:relative;}
.inpasa-sost-foto > img:first-child{display:block;width:100%;height:auto;border-radius:30px 0;box-shadow:0 10px 26px rgba(0,0,0,.18);}
/* base do icone exatamente onde a foto comeca: top:0 + translateY(-100%)
   encosta a borda de baixo do icone na borda de cima da foto, sem vao e
   sem sobrepor - funciona pra qualquer altura de icone, sem precisar
   acertar um valor de "top" negativo no olho. */
.inpasa-sost-icone{position:absolute;top:0;right:24px;width:104px;height:auto;transform:translateY(calc(-100% + 3px));filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));}
.inpasa-sost-bloco--esq .inpasa-sost-icone{right:auto;left:24px;}
@media(max-width:900px){
	.inpasa-sost-bloco,.inpasa-sost-bloco--dir,.inpasa-sost-bloco--esq{grid-template-columns:1fr;grid-template-areas:"foto" "texto";gap:20px;}
	.inpasa-sost-bloco{padding:0 20px;}
	.inpasa-sost-icone{width:64px;right:16px!important;}
	.inpasa-sost-bloco--esq .inpasa-sost-icone{left:auto!important;right:16px!important;}
	/* no mobile a foto vem antes do titulo (grid-template-areas "foto" "texto"),
	   entao nao sobra espaco acima dela pro icone (que fica todo fora, acima da
	   foto) como no desktop - por isso o padding-top da surface cresce aqui, so
	   pra abrir espaco pro primeiro icone nao encostar no header. */
	.inpasa-sost-surface{padding-top:90px;}
}