section { padding-top: 60px; }

/*MENU PÁGINA*/
.submenu_unidade { width: 100%; height:auto; background:#eaeaea; position: fixed; top: 130px; z-index: 100; padding:  10px 0px; margin: 0px 0px 20px 0px; }
.submenu_unidade ol { width: 100%; height: auto; position: relative; list-style-type: none; text-align: center; padding: 0px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.submenu_unidade ol li { position:relative; font-weight: 400px; font-size:14px; margin-left:10px; line-height: 22px; padding: 3px 12px; color: var(--cor-primaria); letter-spacing:0px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.submenu_unidade ol li:hover, .submenu_unidade ol li.ativado { color:#ffffff; background: var(--cor-primaria); }

.info_unidade { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); height: auto; margin: 0px; text-align:left; display:inline-block; vertical-align:top; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 20px; background-color: #f4f6f8; margin-bottom:20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.info_unidade .quadro_empresa { width: 100%; height: auto; margin: 0px; text-align:left; display:inline-block; vertical-align:top; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.info_unidade .quadro_empresa .avatar { width: 150px; height: auto; position: relative; overflow: hidden; margin: 0px 20px 0px 0px; display:inline-block; vertical-align:top; }
.info_unidade .quadro_empresa .avatar img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; display: block;  overflow:hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.info_unidade .quadro_empresa .sobre_empresa { width: -moz-calc(100% - 175px); width: -webkit-calc(100% - 175px); width: -o-calc(100% - 175px); width: calc(100% - 175px); margin: 0px; color: var(--cor-primaria); line-height: 22px; font-size: 13px; text-align: justify; display:inline-block; vertical-align:top; padding: 0px 0px 30px 0px; }
.info_unidade .quadro_empresa .nome_empresa { width: 100%; color: var(--cor-primaria); font-weight: 700; letter-spacing: -0.5px; line-height: 26px; font-size: 20px; text-align: left; display: inline-block; margin-bottom:15px; }

.info_cliente { width: 100%; height: auto; margin: 0px; text-align:left; padding: 2px 0px; display:inline-block; vertical-align:top; cursor:pointer; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.info_cliente.com_margem { padding-bottom:20px; }
.info_cliente .ico_unidade { text-align: center; width: 20px; padding-right:6px; line-height:18px; position:relative; display:inline-block; vertical-align:top; }
.info_cliente .ico_unidade i { font-size:12px; text-align: center; width: 20px; padding-right:6px; line-height:18px; position:relative; display:inline-block; vertical-align:top; color: var(--cor-destaque); }
.info_cliente .ico_unidade i.fa-link { font-weight: bold }
.info_cliente span {  width: -moz-calc(100% - 28px); width: -webkit-calc(100% - 28px); width: -o-calc(100% - 28px); width: calc(100% - 28px); height: auto; text-align:left; padding: 0px; line-height: 18px; font-size:13px; color: #303030; display:inline-block; vertical-align:top; cursor:pointer; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.info_cliente:hover { text-decoration: underline; }

.detalhes_unidade { width: 100%; padding: 40px 0px; min-height: 400px; display: inline-block; }

.sobre_unidade { width: 100%; margin: 0 auto; color: var(--cor-primaria); line-height: 22px; font-size: 13px; text-align: left; display: inline-block; padding: 30px 0px; }
.sobre_unidade .avatar { width: 30%; height: auto; display: inline-block; vertical-align: top; position: relative; overflow: hidden; margin: 0px 0px 30px 0px; }
.sobre_unidade .avatar img { width: 100%; height: auto; display: block;  overflow:hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;text-align: justify; }
.sobre_unidade .conteudo_evento { width: 65%; height: auto; display: inline-block; vertical-align:top; position:relative; margin: 0px 0px 0px 4%;text-align: justify; }
.sobre_unidade .conteudo_evento p { width: 100%; color: var(--cor-primaria); font-weight: 700; letter-spacing: -0.5px; line-height: 26px; font-size: 20px; text-align: left; display: inline-block; padding-bottom:20px; border-bottom: 1px solid #f4f6f8; margin-bottom:20px; }
.sobre_unidade .conteudo_evento p span { position:relative; font-weight: 400px; font-size:14px; margin-left:10px; line-height: 22px; padding: 3px 12px; color: var(--cor-primaria); letter-spacing:0px; background-color: var(--cor-destaque); float: right; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.sobre_unidade .conteudo_evento p span:hover { color:#ffffff; background: var(--cor-primaria); }
.sobre_unidade .conteudo_evento .frase { width: 100%; color: var(--cor-secundaria); font-weight: 700; letter-spacing: -0.5px; line-height: 26px; font-size: 20px; text-align: justify; display: inline-block; padding-bottom:60px; }
.sobre_unidade .conteudo_evento b { font-weight: 700; line-height: 22px; font-size: 14px; }
.sobre_unidade .conteudo_evento a { font-weight: var(--cor-texto) !important; line-height: 22px; font-size: 13px; }
.sobre_unidade .conteudo_evento a:hover { text-decoration:underline; color: var(--cor-secundaria); }
.sobre_unidade .conteudo_evento .programacao { position: relative; clear: both; display: block; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); padding: 0px 20px 20px 0px; height: auto; font-size: 18px; color: var(--cor-secundaria); text-align: left; margin-top:20px; }
.sobre_unidade .conteudo_evento .programacao span { background: transparent !important; display: block; font-size: 16px; line-height: 18px; color: #d34000; font-weight: 700; text-align: left; letter-spacing: 0; padding:0px !important; font-family: var(--fonte-especial); }
.sobre_unidade .conteudo_evento .programacao span i { font-size: 15px; padding-right:10px; color: var(--cor-secundaria); line-height:18px; display:inline-block; position:relative; font-style:inherit; }
.sobre_unidade .conteudo_evento .programacao p { padding-left: 20px; padding-bottom: 20px; }

/*NOTÍCIAS*/
.noticias { width: 100%; height: auto; position: relative; display: inline-block; vertical-align: text-top; padding: 0px; text-align: left; margin: 0px 0px 50px 0px; }
.noticias ul { width: 100%; height: auto; position: relative; list-style-type: none; padding: 0px; margin-top: 0px; text-align:center; display:inline-block; vertical-align:top; }
.noticias ul li { overflow: hidden; width: 100%; height: auto; margin: 10px 0px; position: relative; display: inline-block; text-align:left; }
.noticias ul li img { width: 180px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; margin: 0px 20px 0px 0px; text-align: center; position: relative; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; overflow:hidden; display:block; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow:hidden; float:left; }
.noticias ul li .infos { width: 520px; max-width: 100%; height: auto; position: absolute; right: 0px; top: 50%; transform:  translate(0, -50%); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 15px; }
.noticias ul li .infos .leia_mais { width: 100%; text-align: left; height: auto; position: relative; text-decoration: underline; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; overflow: hidden; z-index: 101; line-height: 14px; padding: 0px; color: var(--cor-destaque); font-size: 12px; font-weight: 500; }
.noticias ul li .infos .titulo_post { width: 100%; height: auto; position: relative; color: var(--cor-texto); font-size: 18px; line-height: 22px; font-family: var(--fonte-padrao); font-weight: 600; text-align: left; padding: 0px 0px 10px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display:block; }
.noticias ul li .infos .intro_post { width: 100%; height: auto; position: relative; color: var(--cor-texto); font-size: 14px; line-height: 20px; font-family: var(--fonte-padrao); font-weight: 400; text-align: left; padding: 0px 0px 10px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display:block; }
.noticias ul li:hover img { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }

/*AGENDA*/
.agenda { width: 100%; height: auto; position: relative; display: inline-block; vertical-align: top; text-align: left; margin: 0px 0px 50px 0px; }
.agenda ul { width: 100%; height: auto; position: relative; list-style-type: none; padding: 0px; margin-top: 0px; text-align:center; }
.agenda ul li { overflow: hidden; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); height: auto; background-color: var(--cor-primaria); padding: 25px 30px 25px 10px; position: relative; display: inline-block; vertical-align: top; text-align:left; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0px 0px 20px 0px;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.agenda ul li .infos { width: 100%; margin: 0px; height: auto; position: relative; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0px; display:inline-block; vertical-align:top; }
.agenda ul li .infos .qual { width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: -o-calc(100% - 100px); width: calc(100% - 100px); height: auto; position: relative; color: #ffffff; font-size: 16px; line-height: 18px; font-family: var(--fonte-padrao); font-weight: 600; text-align: left; padding: 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;  display:inline-block; vertical-align:top; }
.agenda ul li .infos .qual p { width:100%; letter-spacing: 0px; padding-bottom: 0px; display: block; border-bottom: none; margin-bottom: 0px; height:auto; position:relative; text-align: left; color: #ffffff; font-size: 14px; line-height: 18px; font-family: var(--fonte-padrao); font-weight: 500; padding: 15px 0px 0px 0px; display:inline-block; }
.agenda ul li .infos .data { width: 100px; padding: 0px; height: auto; position: relative; color: #ffffff; font-size: 42px; line-height: 42px; font-family: var(--fonte-especial); font-weight: 700; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display:inline-block; vertical-align:top; text-align:center; }
.agenda ul li .infos .data p { width:100%; letter-spacing: 0px; padding-bottom: 0px; display: block; border-bottom: none; margin-bottom: 0px; height:auto; text-transform: lowercase; position:relative; text-align:center; color: #ffffff; font-size: 13px; line-height: 16px; font-family: var(--fonte-padrao); font-weight: 500; }
.agenda ul li:hover { background: var(--cor-secundaria); }

/* MATERIA */
.materiais { width: 100%; height: auto; position: relative; clear: both; overflow: hidden; }
.materiais ul { width: 100%; height: auto; padding: 0px 0px 30px 0px; position: relative; clear: both; overflow: hidden; text-align: left; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.materiais ul li { width:30%; height: auto; margin: 0px 00px 25px 00px; display: inline-block; vertical-align: top; overflow: hidden; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; overflow: hidden;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; }
.materiais ul li:hover { background-color: #f4f6f8; text-decoration: none; }
.materiais ul li:hover .avatar img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
.materiais ul li .avatar .categoria { width: auto; margin: 5px; background-color: var(--cor-secundaria); font-size: 10px; font-family: var(--fonte-padrao); text-align: center; height: auto; padding: 8px 15px; line-height: 10px; color: #ffffff; position: absolute; z-index: 10; font-weight: 800; right: 0px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; text-transform:uppercase; }
.materiais ul li .avatar { width: 100%; height: auto; position: relative; overflow: hidden; vertical-align: top; display: inline-block; -moz-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; background-color: #f4f6f8;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; }
.materiais ul li .avatar img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center; display: block; -moz-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); }
.materiais ul li .infos { width: 100%; height: auto; margin: 0px; padding: 0px 0px 20px 0px; }
.materiais ul li .infos .tituloo { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); padding: 15px 10px 15px 10px; height: auto; line-height: 20px; color: var(--cor-primaria); font-size: 16px; font-family: var(--fonte-padrao); text-align: center; font-weight: 700; }
.materiais ul li .infos .introducao { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); padding: 15px 10px 10px 10px; height: auto; font-weight: 500; color: var(--cor-texto); font-size: 12px; line-height: 20px; font-family: var(--fonte-padrao); text-align: center; border-top: #eaeaea 1px solid; }
.materiais ul li .infos .cta { cursor: pointer; width: auto; display: inline-block; vertical-align: top; margin-top: 10px; padding: 10px 20px; height: auto; font-family: var(--fonte-padrao); color: #ffffff; font-size: 14px; font-weight: 700; text-align: center; background: var(--cor-primaria); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.materiais ul li:hover .cta { padding: 10px 25px; }

.chama_materiais { width: 100%; height: auto; position: relative; clear: both; text-align: right; }
.categorias_filtros { width: 100%; height:auto; position: relative; margin: 15px 0px 40px 0px; }
.categorias_filtros ul { width: 100%; height: auto; position: relative; list-style-type: none; text-align: left; }
.categorias_filtros ul li { position: relative; display: inline-block; vertical-align: top; font-weight: 500; width: auto; margin: 0px 10px 0px 0px; color: var(--cor-primaria); font-size: 15px; font-family: var(--fonte-padrao); text-align: center; height: auto; padding: 10px 25px; line-height: 25px; background-color: #eaeaea; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; overflow: hidden; }
.categorias_filtros ul li.ativo,.categorias_filtros ul li:hover { background: var(--cor-secundaria); color: #ffffff; font-weight: 700; }

@media screen and (max-width: 1100px) {
	.categorias_filtros { width: 100%; height:auto; position: relative; margin: 20px 0px 10px 0px; }
	.categorias_filtros ul { text-align: center; }
	.categorias_filtros ul li { margin: 3px; }

	.materiais { width: 96%; padding: 0px 2%; }
	.materiais ul { text-align: center; }
	.materiais ul li { width: 600px; height: auto; display: inline-block; float: none; padding-bottom: 30px; margin: 5px 5px 35px 5px; position: relative; }
	.materiais ul li .avatar,
	.materiais ul li .avatar img { width: 100%; height: auto; }

	.materiais ul li .infos .tituloo,
	.materiais ul li .infos .introducao { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); }

	.sobre_unidade .conteudo_evento p { text-align:center; font-size:32px; line-height:38px; }

	.sobre_unidade { width: 94%; padding: 0px 3%; font-size: 14px; float: none; }
	.sobre_unidade img{ float: none; margin: 0px 0px 20px 0px; max-width: 100%; width: auto; }
	.sobre_unidade .programacao { width: auto; }
	.sobre_unidade .avatar { width: 100%; margin: 0px 0px 30px 0px; }
	.sobre_unidade .conteudo_evento { width: 100%;  }
	.sobre_unidade .conteudo_evento .frase, .sobre_unidade .conteudo_evento p{ text-align:center; }
	.sobre_unidade .conteudo_evento p span { width: 100%; display: block; text-align: center; font-size:12px; margin-left:0px; padding: 5px 0px; background-color: transparent; float: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

}
@media screen and (max-width: 600px) {
	.materiais ul li { width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -o-calc(100% - 10px); width: calc(100% - 10px); height: auto; display: inline-block; float: none; padding-bottom: 30px; margin: 5px 5px 35px 5px; position: relative; }
	.materiais ul li .avatar,
	.materiais ul li .avatar img { width: 100%; height: auto; }
}

/* ===== Menu interno da pagina + responsivo geral (mobile) ===== */
@media screen and (max-width: 1100px) {
	/* O submenu ficava preso em top:130px (altura do header desktop), deixando um
	   vao enorme abaixo do header de 60px do mobile e flutuando sobre o conteudo.
	   Aqui ele encosta no header e vira uma barra de abas com rolagem horizontal. */
	.submenu_unidade { top: 60px; margin: 0px; padding: 8px 0px; box-shadow: 0px 6px 12px rgba(0,0,0,0.06); }
	.submenu_unidade .util { box-sizing: border-box; padding: 0px; }
	.submenu_unidade ol { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding: 0px 12px; }
	.submenu_unidade ol li { flex: 0 0 auto; white-space: nowrap; margin-left: 0px; padding: 6px 14px; }

	/* empurra o conteudo para baixo do header (60px) + submenu fixo (~48px) */
	section { padding-top: 116px !important; }

	/* INFO UNIDADE (Case e Opere): empilha imagem e texto */
	.info_unidade { width: 100%; box-sizing: border-box; }
	.info_unidade .quadro_empresa .avatar { width: 100%; max-width: 200px; margin: 0px 0px 15px 0px; display: block; }
	.info_unidade .quadro_empresa .sobre_empresa { width: 100%; }

	/* NOTICIAS: no desktop o texto e absoluto; no mobile empilha imagem + texto */
	.noticias ul li { text-align: center; }
	.noticias ul li img { float: none; display: inline-block; margin: 0px auto 12px auto; }
	.noticias ul li .infos { width: 100%; box-sizing: border-box; position: relative; right: auto; top: auto; transform: none; padding: 10px 0px; text-align: center; }
	.noticias ul li .infos .titulo_post,
	.noticias ul li .infos .intro_post,
	.noticias ul li .infos .leia_mais { text-align: center; }
}