:root {
--spacing-xs: 5px;
--spacing-sm: 10px;
--spacing-md: 15px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--spacing-xxl: 40px;
--section-padding-desktop: 80px 40px;
--section-padding-mobile: 60px 20px;
}
@font-face {
  font-family:'Franklin Gothic';
  src: url('fonts/franklin-gothic-medium.ttf');
  font-weight: normal;
  font-style: normal;
}


*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body, html {
font-family: 'Franklin Gothic' ;
overflow-x: hidden;
scroll-behavior: smooth;
}
/*SETA PARA BAIXO*/
.arrow-down {
width: 30px;
height: 30px;
border-left: 6px solid white;
border-bottom: 6px solid white;
transform: rotate(-45deg);
position: absolute;
bottom: 20px;
animation: bounce 2s infinite;
text-decoration: none;
}


/* foto do lado e texto do outro*/
.container2 {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xxl);
}

.images-cr {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.images-cr img {
  height: auto;
  display: block;
}

.texto2 {
  flex: 1;
  max-width: 90%;
}

@media (max-width: 768px) {
  .container2 {
    flex-direction:column;
    padding: 0 var(--spacing-sm);
    text-align:center;
    /*max-width:100%;
    box-sizing:border-box;*/
  }

  .texto2 {
    max-width: 100%;
  }
}

@media (max-width: 768px){
  .images-cr img {
    margin: 0 auto;
  }
}

/*----------------------------------------------*/
p {
  max-width: 100%;
}
/*-------------------------------------------------------------------*/

.logo img {
margin-top: 40px;
width: 370px;   
margin-left: 20px;
padding: 10px 10px;
}
.logo {
position: absolute;
background-color: #031b3b;
width: 100%;
}

@media (max-width: 768px) {
.logo {
position: static; /* Remove absoluto no mobile */
text-align: center;
background-color: #031b3b;
margin-bottom: 10px;
}
.logo img {
width: 60%;
margin: 10px auto;
}
}



/*-------------------------------------------------------------------*/
/*ORGANIZANDO ÍCONES DE REDES SOCIAIS NO TOPO(HEADER)*/
.redes {
display: flex;
gap: 7px;
position: absolute;
left: 390px;
margin-top: 25px;
}

.redes a img {
max-width: 20px;
}

@media (max-width: 768px) {
.redes {
position: static;
justify-content: center;
margin: 5px 0;
gap: 10px;
order: 2;
}

.redes a img {
width: 30px;
}
}


/*-------------------------------------------------------------------*/
/* FIXANDO CABEÇALHO NO TOPO */
.main-header {  
  position: fixed;
  height: 80px;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #031b3b;
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

}
/* Mobile - header vira coluna */
@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 10px 0;
  }
}
/* MENU-LATERAL */
.menu {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #031b3b;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 200px;
  z-index:999; /* abaixo da logo e redes */
}
.menu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.1rem;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}
.menu a:hover {
  color: #2a4c91; 
}
.menu .close-btn {
  position:absolute;
  top: 150px;
  left: 20px;
  font-size: 1.2rem;
  color: #ffffff;
  cursor: pointer;
}

.open-btn {
  position: fixed;
  top: 40px;
  right: 80px;
  font-size: 1rem;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #031b3b;
  color: #f5f5f5;
  border-radius: 8px; 
  border-color: #ece6e6;
  z-index: 1000;
}

.open-btn:hover {
  background-color: #2a4c91;
}

/* Mobile - botão menu menor e centralizado */
@media (max-width: 768px) {
  .open-btn {
    position: static; /* centraliza junto com os outros */
    order: 3;
    margin-top: 10px;
    font-size: 0.9rem;
    padding: 6px 12px;
  }
}

.banner {
  background-color:#031b3b;
  width: 100%;
  display: flex;
  text-align: center;
  /*margin-top: 80px;*/
}

.banner img {
  width: 80%;
  height: auto;
  /*display: block;*/
  max-width: 100%;
  
}

.banner picture {
  width: 100%;
  display: block;
  height: auto;
}

section {
margin-top: 0;
width: 100%;
display: flex;
align-items:center;
justify-content: center;
line-height: 1.6;
}


/* COR DE FUNDO NAS SESSÕES DE CONTEÚDO TEXTUAIS */
.empresa {background:#F8F9FA;}
.equipe { background:#E9ECEF; }
.compromisso {background:#DEE2E6;}
.missao {background:#CED4DA;}
.visao {background:#E9ECEF;}
.servico {background:#dce1e6;}

section,
#empresa,
#compromisso,
#servico,
#servicos,
#lista-servico,
#clientes,
#parceiros,
#local,
#missao,
#visao {
/*Altura do header fixo */
scroll-margin-top: 80px;
}

/* tela inteira na rolagem*/
/*.tela {
min-height: 108vh;
}*/
.tela {
  min-height: 105vh;
  /* A solução para a ancoragem está aqui! */
 /* Adicionado para a rolagem parar abaixo do header fixo */
}


.empresa, .compromisso, .registros {
  font-size: 1.21rem;
}
.empresa {
min-height: calc(100vh - 80px); /* Garante que a seção ocupe a altura total da viewport */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* Para empilhar conteúdo dentro da seção */
}

.compromisso {
min-height: calc(100vh - 80px); /* Garante que a seção ocupe a altura total da viewport */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* Para empilhar conteúdo dentro da seção */
}
.visao {
min-height: calc(100vh - 80px); /* Garante que a seção ocupe a altura total da viewport */
/*padding:0 ;*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* Para empilhar conteúdo dentro da seção */
}

/*textos das sessões*/
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-xxl); /* Padding lateral */
}
@media (max-width: 768px) {
    .container {
      text-align: center;
    }
  }
/*blocos em movimento */
.topico, .topico1 {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 10px;
margin-top: 117px;
/*flex-wrap: wrap;*/
color: #ece6e6;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
height: auto;
}

.topico img, .topico1 img {
/*flex-shrink: initial;*/
width: 150px;
height: 150px;
border-radius:100px;
object-fit:cover;
/*max-width: 100%;
height: auto;*/
}
.texto {
max-width: 90%;
}
.texto h2 {
margin: 0 0 0.5rem;
}
.texto p {
margin: 0;
}
.item {
display: flex;
align-items: center;
gap: 20px;
background-color: #031b3b;
border: 1px solid #000000;
border-radius: 10px;
color: #ece6e6;
padding: 10px;
flex-direction: row; /* padrão */
}
.item.reverse {
flex-direction: row-reverse;
}
/* Responsivo */
@media (max-width: 768px) {
  .item.reverse, .item {
    flex-direction: column !important; /* força imagem e texto um abaixo do outro */
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .item.reverse > * {
    width: 100%; /* cada filho ocupa toda a largura */
  }

  .item.reverse img {
    max-width: 150px;/* controla tamanho da imagem no mobile */
    /*max-height: auto;*/
    border-radius: 100%;
    margin-bottom: 15px;
  }
  .texto {
    width: 100%;
    padding: 0 10px;
    font-size: 1.2rem;
  }
  .texto h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
}

/*
@media (max-width: 768px) {
  .slide-left,
  .slide-right {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .item,
  .item.reverse {
    flex-direction: column !important;
    text-align: center;
  }

  .item img,
  .item.reverse img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 100px;
  }

  .texto {
    max-width: 100%;
  }
}*/
/*@media (max-width: 768px) {
.item,
.item.reverse {
flex-direction: column;
text-align: center;
}
.item img, 
.item.reverse img {
width: 100%;
max-width: 200px;
max-inline-size: 200px;
}
}*/

.slide-left {
flex-direction: row;
animation-name: slideInLeft;
background-color: #031b3b;
border: 1px solid #918d8d;      /* espessura, tipo e cor da borda */
border-radius: 20px;
color: #ece6e6;
padding: 18px;   
/* Espaço entre a borda e o conteúdo */  
}
.slide-right{
flex-direction: row-reverse;
animation-name: slideInRight;
background-color: #031b3b;
border: 1px solid #918d8d;      /* espessura, tipo e cor da borda */
border-radius: 20px;
color: #ece6e6;
padding: 18px;           /* Espaço entre a borda e o conteúdo */  
}
/* Animações */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/*fim dos blocos me movimento*/

/*lista de serviço/produtos*/
.servicos {
min-height: calc(100vh - 8px);
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 20px;
background-color: #f9f9f9;
text-align: center;

}

.titulo {
margin-bottom: 30px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));
gap: 10px;
justify-content: center;
padding:5px;
color: #E9ECEF;
}

/*NOVNO CÓDIGO ADICIONADO PARA SEMPRE APARECER NA ROLAGEM 15/07/25*/

.animar-entrada {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.7s ease;
}

.animar-entrada.aparecer {
  opacity: 1;
  transform: translateY(0);
}



.box {
background: #031b3b;
padding: 20px;
text-align: center;
border-radius: 8px;
opacity: 0;
transform: translateX(0); /* estado inicial neutro */
transition: opacity 0.7s, transform 0.7s;
/*atualização */
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;

}

@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr; /* Mobile: 1 por linha */
}
}

/* Keyframes */
@keyframes slideInLeftZoom {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInRightZoom {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}


/* Colunas da esquerda (1 e 2) */
.box.in-view:nth-child(4n+1),
.box.in-view:nth-child(4n+2) {
  animation: slideInLeftZoom 1s ease-out forwards;
}

/* Colunas da direita (3 e 4) */
.box.in-view:nth-child(4n+3),
.box.in-view:nth-child(4n+4) {
  animation: slideInRightZoom 1s ease-out forwards;
}

/*delay nos efeitos*/
.box.in-view:nth-child(4n+1) { animation-delay: 0s; }
.box.in-view:nth-child(4n+2) { animation-delay: 0.1s; }
.box.in-view:nth-child(4n+3) { animation-delay: 0.2s; }
.box.in-view:nth-child(4n+4) { animation-delay: 0.3s; }


/*galeria de fotoso - clientes*/
/*.gallery-clientes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap:15px;
padding: 20px;
max-width: 1200px;
margin: auto;
text-align: center;
flex-direction: column;
}

.gallery-container {
overflow: hidden;
}*/
.gallery-container img {
max-width: 350px;
object-fit: contain;
object-position: center;
background: #fff;
}
/*
.tela {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}*/

.service {
  margin-bottom: 40px;
}

#clientes, #parceiros {
  font-size: 2.0rem;
  color: #222;
  font-weight: 400;
  margin-bottom: 10px;
}

.gallery-clientes {
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 30px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  align-items: center;

}

.gallery-item {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.gallery-parceiros , .gallery-container {
display: block;
width: 100%;
text-align: center;
padding: 60px 20px;
align-items: center;
/*background-color: #f2f2f2;*/
}
/*
.produtos {
font-size: 25px;
display: block;
width: 100%;
text-align: center;
padding: 60px 20px;
align-items: center;

}*/
/*
.gallery-paceiros h2,
.gallery-clientes h2 {
display: block;
width: 100%;
margin-bottom: 20px;
font-size: 2rem;
font-weight: 700;
color: #031b3b;
}*/
/*
.service {
text-align: center;
font-size: 1rem;
}*/

.gallery-item {
width:220px;
height: 130px;
border: 2px solid #FFF;
box-shadow: 5px 5px 5px #0006;
flex-grow: 1;
transition: transform .5s linear;
object-position: center;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;

}

.gallery-item:hover{
transform: scale(1.3);
}

/*GALERIA PARCEIROS */
.gallery-paceiros {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1rem;
padding: 1rem;
background-color: #f8f8f8;

}
.gallery-paceiros h2 {
text-align: center;
font-size: 1rem;
margin-bottom: 2rem;
color: #031b3b;
}


.gallery-paceiros img,
.gallery-clientes img {
flex: 0 0 auto;
max-width: 300px;
scroll-snap-align: start;
border: 2px solid #FFF;
box-shadow: 2px 2px 5px #0006;
transition: transform 0.5s;
}

.gallery-paceiros img:hover {
transform: scale(1.05);
}

.gallery-paceiros .service {
    display: block;
width: 100%;
margin-bottom: 20px;
font-size: 1rem;
font-weight: 700;
color: #031b3b;
}




.grade-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 30px;
align-items: center;
justify-items: center;
}

.grade-logos img {
max-width: 100px;
height: auto;
opacity: 0.8;
transition: transform 0.4s, opacity 0.4s;
}

.grade-logos img:hover {
transform: scale(1.1);
opacity: 1;
}



/* local - endereços */
.enderecos {
display: flex;
flex-wrap: wrap;
gap: 40px;
padding: 60px 20px;
justify-content: center;
background-color: #f2f2f2;
width: 100%;
}

.local {
flex: 1 1 400px;
max-width: 500px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
text-align: center;
}

.local h3 {
margin-bottom: 10px;
color: #333;
}
.local p {
/*font-size: 16px;*/
margin-bottom: 15px;
color: #555;
}
.local iframe {
width: 100%;
height: 250px;
border: 0;
border-radius: 6px;
}

  /* Responsivo */ 
@media (max-width: 768px) {
.enderecos {
flex-direction: column;
align-items: center;
}
}
.escritorio {
flex: 1 1 100%;  /* Força ocupar toda largura no flex container */
max-width: 100%; /* Garante que ocupe 100% */
margin-bottom: 30px; /* Espaço abaixo do título */
text-align: center;
font-size: 1.6rem;
}
/*rodapé*/
.footer {
background-color: #031b3b;
color: white;
padding: 20px;
text-align: center;   
}
.footer a {
  color: #E9ECEF;
}
.contador {
display: flex;
gap: 20px; 
background-color:#031b3b;
width: 1200px;
border: 1px solid #000000;
border-radius: 10px;
color: #ece6e6;
justify-content: center;
height: 150px;
}
.contador-item {
  display: flex;
  align-items: center;
  gap: 20px; /* espaço entre imagem e título */
}
.contador-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.titulo-cont {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f2f3f3;
}
#licencas, #condicionantes {
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: 10px;
  color: #5f8be2;
}
/*
@media (max-width: 768px) {
  .section,
  .item,
  .item.reverse,
  .slide-left,
  .slide-right {
    max-width: 95% ;
    /*width: 94vw;*/               /* ocupa 94% da largura da tela real */
    /*margin: 0 auto;             /* centraliza */
   /* padding: 20px 10px;         /* reduz o padding interno */
  /*  border-radius: 10px;
    box-sizing: border-box;
    flex-direction: column !important;
    text-align: center;
    align-items: center;
  }
  .item img, .item.reverse {
    width: 150px;
    height: 150px;*/
    /*max-width: auto;*//*
    margin-bottom: 10px;
    border-radius: 100%;
  }
  .texto {
    width: 100%;
    padding: 0 10px;
    font-size: 1.2rem;
  }
  .texto h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
}
 /* NOVCOS TESTES ABAIXO  */

 /* Ajuste para ícones de redes sociais no mobile */