section { padding: 90px 0px 75px 0px; }

/*SOBRE*/
.sobre { width: 100%; height: auto; position: relative; color: #ffffff; font-family: var(--fonte-padrao); font-size: 14px; line-height: 24px; padding: 50px 0px 0px 0px; text-align: left; font-weight:400; background-color:#ffffff; }
.sobre .destaque { width: 100%; height:auto; position:relative; text-align: center; padding: 25px 0px; z-index: 10; margin: 0px; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.sobre .destaque .avatar { width: 550px; height: 415px; position: relative; overflow: hidden; display:inline-block; overflow:hidden; border-radius:10px; }
.sobre .destaque .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position:relative; display:block; }
.sobre .destaque .avatar:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
.sobre .destaque .chamada { width: -moz-calc(100% - 650px); width: -webkit-calc(100% - 650px); width: -o-calc(100% - 650px); width: calc(100% - 650px); height:auto; position:relative; display:inline-block; vertical-align:top; margin: 0px; color: var(--cor-texto); font-size: 18px; font-family: var(--fonte-padrao); text-align: left; line-height: 26px; font-weight: 400; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin: 0px 0px 0px 70px; }
.sobre .destaque .chamada .titulo_conheca { color: var(--cor-texto); font-size: 32px; letter-spacing: -1px; min-height: 75px; font-family: var(--fonte-padrao); text-align: left; line-height: 32px; font-weight: 700; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; padding: 0px; }
.sobre .destaque .chamada .titulo_conheca img { width: auto; height: auto; max-width: 80px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position:relative; float: left; margin: 20px 40px 0px 0px; }
.sobre .destaque .chamada .titulo_conheca p { font-family: var(--fonte-padrao); letter-spacing: -1px; font-weight:700; font-size: 32px; line-height: 30px; position:relative; display:inline; width: auto; color:var(--cor-primaria); }
.sobre .destaque .chamada .titulo_conheca p::before { position:absolute; height:1px; width:100%; content:''; background-color: var(--cor-secundaria); bottom:0px; }
.sobre .destaque .chamada .titulo_conheca .ponto { color:var(--cor-secundaria); position: relative; font-family: var(--fonte-padrao); font-weight:700; font-size: 32px; line-height: 30px; display:inline-block; vertical-align:top; }
.sobre .destaque .chamada .chamada_final { width: 100%; height:auto; position:relative; display:inline-block; vertical-align:top; color:var(--cor-texto); font-size: 22px; font-family: var(--fonte-padrao); text-align: left; line-height: 24px; font-weight: 600; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin: 50px 0px; }
.sobre .destaque .chamada .chamada_final span { position:relative; float: left; padding: 0px 12px 0px 0px; line-height: 48px; color: var(--cor-secundaria); font-size:50px; }

/*MISSÃO*/
.faixa { width: 100%; height: auto; margin: 0px; padding: 60px 0px 0px 0px; text-align: left; position: relative; display: block }
.faixa .elementos { width: 30%; padding: 0px; margin: 0px; height: auto; position: relative; 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; }
.faixa .elementos.primeiro { margin-right:5%; width: 64%; }
.faixa .elementos.terceiro { margin-right: 0px; width: 100%; }
.faixa .elementos .titulo_elemento { width: 100%; height: auto; position: relative; padding: 0px 0px 10px 0px; text-align: left; color: var(--cor-texto); font-family: var(--fonte-padrao); text-align: left; font-size: 28px; letter-spacing: -1px; font-weight:700; line-height:40px }
.faixa .elementos .titulo_elemento span { color: var(--cor-secundaria); font-weight:800; line-height:40px; font-size:28px; letter-spacing:-2px; }
.faixa .elementos .sobre_elemento { width: 100%; height: auto; position: relative; color: var(--cor-texto); font-family: var(--fonte-padrao); font-size: 16px; line-height: 24px; padding: 20px 0px 50px 0px; text-align: left; }
.faixa .elementos.segundo .sobre_elemento { font-size: 14px; font-weight: 700; line-height:40px }
.faixa .elementos .sobre_elemento a { font-size: 16px; text-decoration: underline; }
.faixa .elementos.segundo .sobre_elemento i { position:relative; display:inline-block; vertical-align:top; font-size: 18px; color: var(--cor-secundaria); line-height:40px; padding-right: 10px; }
.faixa .elementos .sobre_elemento ul { background-color: transparent !important; width: 100% !important; padding: 0px !important; margin: 0px !important; border: inherit !important }
.faixa .elementos .sobre_elemento ul li { display: inline flow-root list-item !important; list-style-type: circle !important; background-color: transparent !important; padding: 0px !important; margin: 0px !important; border: inherit !important; font-size: 16px !important; line-height: 24px !important; color: black !important; list-style-position: inside !important; width: 100%; cursor: default !important; }

/*EQUIPE*/
.equipe { width: 100%; height: auto; position: relative; text-align: center; padding: 0px 0px 30px 0px; }
.equipe ul { width: 100%; height: auto; position: relative; list-style-type: none; text-align: left; }
.equipe ul li { border-radius: 15px; margin: 10px; width: 275px; height: 350px; overflow: hidden; background-color: var(--cor-primaria); background-position: center; position: relative; text-align: center; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; overflow: hidden; display: inline-block; vertical-align: top; vertical-align: top; overflow:hidden; }
.equipe ul li .solucao { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); line-height: 20px; height: auto; position: absolute; z-index: 10; bottom: 0px; padding: 20px; color: #ffffff; font-weight: 700; text-align: left; font-size: 16px; line-height: 16px; font-family: var(--fonte-padrao); -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; }
.equipe ul li .solucao p { width: 100%; line-height: 16px; height: auto; position: relative; color: rgba(255,255,255,0.75); font-weight: 500; text-align: left; font-size: 10px; line-height: 13px; font-family: var(--fonte-padrao); }
.equipe ul li .avatar { width: 100%; height: 100%; margin: 0px; position: relative; overflow: hidden; display: inline-block; vertical-align: top; }
.equipe ul li .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0.5; position: relative; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; display: block; }
.equipe ul li .solucao .contatos { width: 100%; height: auto; position: relative; z-index: 20; text-align: left; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; padding: 10px 0px 0px 0px; }
.equipe ul li .solucao .contatos i { opacity: 0.5; font-size: 14px; border-radius: 7px; line-height: 24px; width: 24px; height: 24px; color: #ffffff; margin: 0px 0px 0px 1px; display: inline-block; vertical-align: top; text-align: center; overflow:hidden; }
.equipe ul li:hover { background-color: var(--cor-principal); background-size: auto; }
.equipe ul li:hover img { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
.equipe ul li .solucao .contatos i:hover { opacity: 1; background-color: var(--cor-secundaria); color: #ffffff }

/*CLIENTES*/
.clientes { width: 100%; height: auto; padding: 50px 0px 25px 0px; margin: 0px; text-align:left; z-index: 100; 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; }
.clientes ul { width: 100%; height: auto; position: relative; text-align: left; display: flex; justify-content: flex-start; flex-wrap: wrap; z-index:5; padding: 20px 0px 0px 0px; }
.clientes ul li { width: 16.5%; box-sizing: border-box; height: 80px; position: relative; 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; text-align: center; margin: 10px 0px; }
.clientes ul li .avatar .desconto { opacity: 0; width: auto; height: auto; position: absolute; z-index: 1; bottom: -12px; padding: 3px 10px; font-size: 10px; left: 50%; transform: translate(-50%,0); background-color: var(--cor-secundaria); color: #ffffff; font-weight: 700; border-radius: 6px; }
.clientes ul li .avatar { width: 150px; height:80px; position:relative; display:inline-block; vertical-align:top; border-radius:10px; }
.clientes ul li .avatar img { filter: grayscale(100%); opacity: 0.7; position:absolute; height:auto; width: auto; max-width: 70%; max-height: 70%; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0px; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.clientes ul li:hover .avatar { background-color: #f4f6f8; }
.clientes ul li:hover .avatar img { filter: grayscale(0%); opacity: 1; }
.clientes ul li:hover .avatar .desconto { opacity: 1; }

/*CERTIFICADOS*/
.certificados { width: 100%; height:auto; position:relative; text-align:left; padding: 30px 0px 50px 0px }
.certificados ul { width:100%; height:auto; position:relative; text-align:left; display: flex; justify-content: space-between; flex-wrap: wrap; z-index:5; gap:0px; }
.certificados ul li { border-radius: 15px; width: 18%; height: auto; position: relative; display: inline-block; text-align: center; list-style-type: none; padding: 20px 0px 50px 0px; -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; }
.certificados ul li .avatar { width: 100%; height:120px; position:relative; display: inline-block; vertical-align: top;  overflow:hidden; margin: 0px; }
.certificados ul li .avatar img { width: auto; height: auto; max-width: 90%; max-height: 90%; margin: 0px; position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); -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;  }
.certificados ul li:hover { background-color: rgba(255, 255, 255, 0.1); }

/*TIMELINE*/
.timeline { width: 100%; height: auto; position: sticky; z-index: 10; left: 0px; top: 70px; background-color: #eaeaea; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.timeline ol { width: 100%; height: auto; position: relative; clear: both; text-align: center; padding: 10px 0px 0px 0px; }
.timeline ol li { width: 34px; height: auto; display: inline-block; font-size: 15px; font-weight: 400; font-family: var(--fonte-padrao); position: relative; overflow: hidden; color: var(--cor-texto); text-align: center; line-height: 22px; padding: 15px; }
.timeline ol li:hover, .timeline ol li#ativo { width: 34px; text-decoration: underline; height: auto; display: inline-block; font-size: 16px; font-weight: 800; font-family: var(--fonte-padrao); position: relative;overflow: hidden; color: var(--cor-primaria); text-align: center; line-height: 22px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.registros{
  width: 100%;
  height: auto;
  position: relative;
  clear: both;
  padding: 50px 0px 30px 0px;
}

.registros ul{
  width: 100%;
  height: auto;
  position: relative;
  clear: both;
  text-align: left;
  margin: 0;
  padding: 0;
}

.registros ul li{
  width: 100%;
  padding: 34px 0;
  display: block;
  position: relative;
  clear: both;
  transition: all 0.3s ease;
  margin: 0;
}

/* ===== Grid base ===== */
.registros ul li .bloco{
  width: 100%;
  float: none;
  margin: 0;
  font-family: var(--fonte-padrao);
  color: var(--cor-texto);

  display: grid;
  gap: 50px;
  align-items: center;
}

/* ÍMPARES: imagem à esquerda (fixa) + texto à direita (flexível) */
.registros ul li:nth-child(odd) .bloco{
  grid-template-columns: 420px minmax(0, 1fr);
}

/* PARES: texto à esquerda (flexível) + imagem à direita (fixa) */
.registros ul li:nth-child(even) .bloco{
  grid-template-columns: minmax(0, 1fr) 420px;
}

/* quando não tem imagem */
.registros ul li .bloco.no-media{
  grid-template-columns: 1fr !important;
}

/* ===== Coluna da imagem ===== */
.registros ul li .timeline-media{
  width: 100%;
  display: flex;
}

/* ÍMPARES: encosta na esquerda */
.registros ul li:nth-child(odd) .timeline-media{
  justify-content: flex-start;
}

/* PARES: encosta na direita */
.registros ul li:nth-child(even) .timeline-media{
  justify-content: flex-end;
}

.registros ul li .timeline-media img{
  width: 380px;
  height: 260px;
  border-radius: 18px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ===== Coluna do conteúdo ===== */
.registros ul li .timeline-content{
  width: 100%;
  max-width: 780px;
}

/* Garante que o texto fique “colado” na sua coluna (não centralize sem querer) */
.registros ul li:nth-child(odd) .timeline-content{ justify-self: start; }
.registros ul li:nth-child(even) .timeline-content{ justify-self: start; }

.registros ul li .timeline-content .ano{
  display: block;
  margin: 0 0 10px 0;
  width: auto;
  height: auto;
  font-size: 46px;
  line-height: 52px;
  font-weight: 900;
  color: var(--cor-secundaria);
  letter-spacing: -2px;
  overflow: visible;
  text-align: left;
}

.registros ul li .timeline-content .titulo_timeline{
  width: 100%;
  height: auto;
  position: relative;
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--cor-texto);
}

.registros ul li .timeline-content p{
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--cor-texto);
}

/* Fallback: se sobrar img dentro do p */
.registros ul li .timeline-content p img{ display:none; }

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  .registros ul li .bloco{ gap: 34px; }

  .registros ul li:nth-child(odd) .bloco{
    grid-template-columns: 360px minmax(0, 1fr);
  }
  .registros ul li:nth-child(even) .bloco{
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .registros ul li .timeline-media img{
    width: 340px;
    height: 240px;
  }
}

@media (max-width: 860px){
  .registros ul li{ padding: 26px 0; }

  .registros ul li .bloco{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

.registros ul li .timeline-media{
    justify-content: flex-start !important;
    order: 1; /* Força a imagem a ser o primeiro elemento na ordem visual */
  }

  .registros ul li .timeline-media img{
    width: 100%;
    height: 260px;
  }

.registros ul li .timeline-content{ 
    max-width: none; 
    order: 2; /* Força o texto a vir logo em seguida */
  }
}



@media screen and (max-width: 1100px) {
	section { padding: 35px 0px 30px 0px; }

	.timeline { width: 94%; float: none; padding: 0px 3%; position: relative; margin: 0px; }
	.timeline .anos { display: none; }

	/*SOBRE*/
	.sobre { text-align: center; background:#f4f6f8; }
	.sobre .destaque { padding-top:0px; }
	.sobre .destaque .avatar { width: 100%;  -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }
	.sobre .destaque .chamada { width: 96%; text-align: center; margin: 20px 2% 0px 2%; }
	.sobre .destaque .chamada .titulo_conheca { text-align:center; width:100%; position:relative; clear:both; }
	.sobre .destaque .chamada .titulo_conheca .ponto { text-align:center; }
	.sobre .destaque .chamada .titulo_conheca span::before { height:0px; }
	.sobre .destaque .chamada .icon { display: inline-block; float:none; margin: 0px; background:#eaeaea; }

	/*MISSÃO*/
	.faixa { width: 94%; padding: 50px 3%; text-align: center; }
	.faixa .elementos { width: 100%; text-align:center; }
	.faixa .elementos.primeiro, .faixa .elementos.terceiro { margin-right: 0px; width: 100%; }
	.faixa .elementos .sobre_elemento { text-align:center; }
	.faixa .elementos .titulo_elemento { text-align:center; }

	/* EQUIPE */
	.equipe ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.equipe ul li { width: -moz-calc(49% - 20px); width: -webkit-calc(49% - 20px); width: -o-calc(49% - 20px); width: calc(49% - 20px); }

	/*SOBRE*/
	.sobre { width: 96%; padding: 25px 2%; text-align: center; }
	.sobre .destaque .avatar { width: 100%; }
	.sobre .destaque .chamada { width: 100%; margin: 0px 0px 0px 0px; }
	.sobre .destaque .chamada .titulo_conheca { text-align:center; padding: 0px 0px 0px 0px; font-size: 24px; line-height: 30px }
	.sobre .destaque .chamada .titulo_conheca span { font-size: 24px; line-height: 30px }
	.sobre .destaque .chamada .titulo_conheca img { display: block; float: none; margin: 20px auto; position: relative; clear: both; }
	.sobre .destaque .chamada .titulo_conheca span::before { height:0px; }
	.sobre .destaque .chamada { text-align: center; }
	.sobre .destaque .chamada .chamada_final { text-align: center; margin: 25px 0px 50px 0px; }

	/*	CLIENTES*/
	.clientes { width: 100%; margin: 0px; text-align: center; }
	.clientes ul li { width: 33%; height: 80px; }

  .timeline ol li { padding:8px; }
}

@media screen and (max-width: 350px) {
	.clientes ul li { width: 50%; height: 80px; }
}