@import url("https://use.typekit.net/bjg4qzy.css");

/* VARIAVEIS DE LAYOUT */
:root {
  --cor_texto: #333333;
  --cor_texto-suave: #ccc;
  --cor_principal: #00c2ff;
  --cor_destaque: #ff6b00;

  --altura-maxima: 1500px;
  --texto-tamnaho: 16px;
  /*rem ou em - 30px / 16px = 1,875em*/
  --fonte-menu: paralucent-stencil, sans-serif;
  --fonte-base: neue-has-grotesk-display, sans-serif;
}

/* FIM DAS VARIAVEIS DE LAYOUT */

body {
  font: 300 1em/1.5em var(--fonte-base);
  /*
    font-weight:300;
    font-size:1em;
    line-height:1.5;
    font-family:var(--fonte-base);*/

  color: var(--cor_texto);
}

p {
  margin-bottom: 1em;
  font-family: var(--fonte-base);
}

h1,
h2,
h3,
h4 {
  margin-bottom: 1em;
  font-family: var(--fonte-menu);
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

a {
  color: var(--cor_principal);
  text-decoration: none;
}

img {
  width: 100%;
}

:focus-visible {
  outline: 3px solid var(--cor_destaque);
  /*
    outline-width: 3px;
    outline-style: solid;
    outline-color: var(--cor_destaque)*/

  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--altura-maxima);
  margin: 0 auto;
  /*margin-inline: auto*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 24px;
  gap: 1em;
}

.topo {
  background-color: #fff;
  padding-block: 20px;
}

.topo h1 {
  width: 331px;
  height: 90px;
  background-image: url(../img/logocolorida.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  margin-bottom: 0;
}

.topo nav{
  flex:1;
}

.topo nav ul {
  display: flex;
justify-content: center;
}

.topo nav ul li a {
  color:var(--cor_principal);
  font-size: 1.2em;
  text-transform: uppercase;
  font-family: var(--fonte-menu);
  padding-block: 0.5em;
  padding-inline: 1.2em;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}

.ativo{
  color:var(--cor_destaque) !important;
}

/* Cria a linha embaixo do texto */
.topo nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.2em;
    width: 0%;
    height: 2px;
    background: var(--cor_destaque);
    box-shadow: 0 0 10px var(--cor_destaque);
    transition: width 0.3s 
ease;
}

/* Quando o mouse passa, a linha cresce */
.topo nav ul li a:hover::after {
  width: 100%;
}

/* Cor do texto ao passar o mouse (opcional) */
.topo nav ul li a:hover {
  color:var(--cor_destaque);
 
}

/* Linha fixa no item ativo */
nav ul li a.ativo::after {
  width: 100%;
}
.rede {
  display: flex;
  gap: 1em;
}

.rede li a {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  background-color: #1a1a1a1a;
  border-radius: 50px;
}

.rede a:hover {
  background-color: var(--cor_destaque);
}

.topo .container .mobile-rede{
  display: none;
}

/* ################################ BANNER ###################################*/

.banner .slick-next {
  right: 80px;
}

.banner img {
  
    width: 100%;         /* Faz a imagem ocupar toda a largura */
    height: 450px;       /* Aumenta a altura (pode ajustar o valor) */
    object-fit: cover;   /* Mantém a imagem proporcional sem distorcer */
    display: block;      /* Remove espaçamento indesejado */
}

.banner .slick-prev {
  left: 35px;
  z-index: 5;
}

.banner .slick-prev:before,
.banner .slick-next:before {
  font-size: 60px;
  color: var(--cor_principal);
}

/* ################################ AREA ###################################*/

.area {
  background-color: var(--cor_principal);
  margin: -10px;
}

.area h2 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
  margin-bottom: 0px;
  padding: 58px 0;
  line-height: 1em;
}

/* ################################ SOBRE ###################################*/
/* Inicio sessão sobre  */

.sobre {
  margin: 50px 0;
  /* padding: 50px 0; */
  /* background-color: #0aaf3c; */
}

.imgSobre {
  display: flex;
  gap: 2.5em;
  /* height: 588px; */
}

.txtSobre a:hover {
  background-color: var(--cor_destaque);
  transition: 2s;
}

/* IMG 01  */
.imgSobre img:nth-child(1) {
  width: 480px;
  /* 2.5 * 16 = 40 */
}

.imgSobre div {
  display: flex;
  flex-direction: column;
  /*destaca seu objto em coluna*/
  align-items: center;
}

/* SELO  */
.imgSobre span {
  position: relative;
  top: 32px;
  display: block;
  width: 230px;
  height: 230px;
  background-color: var(--cor_principal);
  border-radius: 50%;
  inline-size: 230px;
  block-size: 230px;
  background-image: url(../img/selo.png);
  background-repeat: no-repeat;
  background-position: center;
  animation: rodar 16s linear infinite;
}

@keyframes rodar {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* IMG2  */
.imgSobre img:nth-child(2) {
  width: 320px;
  border-radius: 0px 6.25em 0px 6.25em;
  /*100 / 16 = 6,25*/
  /* padding: 20px; */
}

.sobre div {
  align-items: stretch;
}

.txtSobre {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.txtSobre h2 {
  font-family: var(--fonte-menu);
  font-size: 2.5em;
  text-transform: uppercase;
  margin-bottom: 0.7em;
}

.txtSobre h3 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
  line-height: 1em;
  margin-bottom: 0.7em;
}

.txtSobre p {
  text-indent: 2em;
  line-height: 1.8em;
  margin-block-end: 1.5em;
  margin-bottom: 0;
}

.txtSobre a {
  display: inline-flex;
  justify-content: center;
  font-family: var(--fonte-base);
  align-items: center;
  width: 250px;
  height: 50px;
  background-color: var(--cor_principal);
  color: var(--cor_texto-suave);
  display: inline-flex;
  border-radius: 20px;
  margin-top: 2.5em;
}

/* Fim sessão sobre  */


/* ########################## INICO SESSÃO MISÃO   ######################################## */
.misao {

  display: flex;
  justify-content: center; /* Centraliza o conteúdo na tela */
  align-items: center;
  padding: 60px 20px;
  background-color:var(--cor_principal); /* opcional */
  margin: 50px;
}

.container {
  max-width: var(--altura-maxima);

}

.conteudo-misao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* espaço entre imagem e texto */
}

.conteudo-misao img {
  width: 40%; /* imagem ocupa 40% da largura */
  max-width: 400px;
  height: auto;
}

.conteudo-misao h2 {
  width: 60%; /* texto ocupa o restante */
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
}

/* ########################## FIM SESSÃO MISÃO   ######################################## */




/* ########################## INICO SESSÃO VISÃO   ######################################## */
 
.visao {
 
  display: flex;
  justify-content: center; /* Centraliza o conteúdo na tela */
  align-items: center;
  padding: 60px 20px;
  background-color:var(--cor_principal); /* opcional */
  margin: 50px;

}

.container {
  max-width: var(--altura-maxima);
  
}


  
.conteudo-visao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-direction: row-reverse; /* 👈 ISSO INVERTE a ordem da imagem e do texto */

}

.conteudo-visao img {
  width: 40%; /* imagem ocupa 40% da largura */
  max-width: 400px;
  height: auto;
 
}

.conteudo-visao h2 {
  width: 60%; /* texto ocupa o restante */
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
}
/* ########################## FIM  SESSÃO VISÃO   ######################################## */




/* ########################## INICO SESSÃO VALORES  ######################################## */

/* INICIO DA MINHA SESSÃO VALORES  */

.valores {
 
  display: flex;
  justify-content: center; /* Centraliza o conteúdo na tela */
  align-items: center;
  padding: 60px 20px;
  background-color:var(--cor_principal); /* opcional */
  margin: 50px;

}

.container {
  max-width: var(--altura-maxima);

}

.conteudo-valores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* espaço entre imagem e texto */
}

.conteudo-valores img {
  width: 40%; /* imagem ocupa 40% da largura */
  max-width: 400px;
  height: auto;
}

.conteudo-valores h2 {
  width: 60%; /* texto ocupa o restante */
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
}

/* FIM DA MINHA SESSÃO VALORES  */

/* ########################## FIM SESSÃO VALORES  ######################################## */


/*####################SESSÃO FERRAMENTAS ##############################*/

 /* INICIO SESSÃO FERRAMENTAS  */
 
.ferramentas {
  background-color: var(--cor_principal);
  padding: 50px 0;
}

.ferramentas > div {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  text-align: center;
}

.ferramentas .slick-slide {
  margin: 50px;
}
/* .ferramentas div div img{
  width: 150px !important; */
/* } */

.ferramentas img {
  display: inline-block;
  width: 90px !important;
}


.ferramentas img {
  display: inline-block;
}


.ferramentas div div {
  width: var(--largura-maxima);
}

.ferramentas .slick-prev:before,
.ferramentas .slick-next:before {
  font-size: 60px;
  color: var(--cor_destaque);
}

/* FIM DA MINHA SESSÃO FERRAMENTAS */


/*-----------------------------SESSÃO SERVIÇOS---------------------*/

/* INICIO DA MINHA SESSÃO SERVIÇOS  */
.servicos {
  padding: 50px 0;
}

.servicos .container {
  align-items: start;
  flex-direction: column;
}

.img-servico img {
    width: 100%;         /* Faz a imagem ocupar toda a largura */
    height: 350px;       /* Aumenta a altura (pode ajustar o valor) */
    object-fit: cover;   /* Mantém a imagem proporcional sem distorcer */
    display: block;      /* Remove espaçamento indesejado */
}

.servicos h2 {
  margin-bottom: 1.25em;
  font-family: var(--fonte-menu);
  font-size: 2.5em;
  
}

.servicos h3 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
}

.listaServico {
  display: flex;
  justify-content: space-between;
}

.painelServico {
  width: 56%;
  /*840 /1500 = 56%*/
  background-color: var(--cor_principal);
  padding: 1.25em;
}

.painelServico h4 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
  margin-bottom: 1.25em;
}

.painelServico p {
  font-size: 1.25em;
  text-indent: 2em;
  font-weight: bold;
  line-height: 1.875em;
}

.painelServico a {
  display: inline-flex;
  justify-content: center;
  font-family: var(--fonte-menu);
  align-items: center;
  width: 250px;
  height: 50px;
  background-color: var(--cor_destaque);
  color: var(--cor_texto-suave);
  border-radius: 25px;
  margin-top: 2.5em;
  font-size: 1.25em;
  text-transform: uppercase;
  transition: filter 0.2s;
}

.painelServico a:hover {
  /* color:var(--cor_principal); */
  filter: brightness(0.9);
}

.oculto {
  display: none;
}

.tabPainel {
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.tabPainel a {
  font-size: 1.875em;
  align-items: center;
  padding-left: 22%;
  display: inline-flex;
  color: var(--cor_texto);
  font-family: var(--fonte-menu);
  height: 50px;
}

.tabPainel a:hover {
  background: linear-gradient(to right,
      var(--cor_principal) 0%,
      var(--cor_destaque) 100%);
}

.tabPainel .tabAtivo {
  background: linear-gradient(to right,
      var(--cor_principal) 0%,
      var(--cor_destaque) 100%);
}

/* FIM DA MINHA SESSÃO SERVIÇO */


/* AQUI COMEÇA MINHA SESSÃO EQUIPE  */

/* container Pai  */
.equipe {
  padding: 50px 0;
  background-color: var(--cor_principal);
}

.equipe>div {
  display: block;
}

/* .equipe h2 {
  font-family: var(--fonte-menu);
  font-size: 2.8em;
  margin-bottom: 1.25em;
  text-align: center;
} */

.equipe div .verde {
  display: flex;
  justify-content: space-evenly;
align-items: center;
}

.equipe .amarelo,
.equipe .vermelho {
  width: 20%;
  flex-direction: column;
  align-items: center;
}




img {
  width: 100%;
}

.equipe a img {
   background-color: var(--cor_destaque); 
  border-radius: 100px;

}

.equipe a img:hover {
  background-color: var(--cor_texto);
}

.equipe ul {
  display: flex;
  gap: 4em;
  margin-top: -84px;
  margin-bottom: 19px;
}

.equipe h2 {
  text-align: center;
    font-size: 2em;
} 

.equipe h3 {
  text-align: center;
  font-size: 1.875em;
  margin-bottom: 0.1em;
}

.equipe h4 {
  text-align: center;
  font-size: 1.5em;
  font-family: var(--fonte-base);
}
/* FIM DA MINHA SESSÃO EQUIPE  */

/*------------------------------SESSÃO PQ NOS ESCOLHER----------------------*/

/* INICIO SESSÃO PORQUE NOS ESCOLHER  */

.pqEscolher {
  padding: 50px;
}

.pqEscolher>div {
  width: var(--altura-maxima);
  margin: 0 auto;
  align-items: center;
  display: flex;
  gap: 2em;
}

.pqEscolher h2 {
  font-family: var(--fonte-menu);
  font-size: 2.5em;
  margin-bottom: 50px;
}

.pqEscolher h3 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
  margin-bottom: 50px;
}

.pqEscolher div div div:nth-child(2) {
  display: flex;
}

.pqEscolher div div div:nth-child(2) div {
  flex: 1;
}


.pqEscolher div div div div {
  flex-direction: column;
}

.pqEscolher div div div div div {
  height: 150px;
  text-align: center;
  padding: 1.25em;
}

.pqEscolher div div div div:nth-child(1) div:nth-child(1) {
  background-color: var(--cor_destaque);

  color: var(--cor_texto-suave);
}

.pqEscolher div div div div:nth-child(1) div:nth-child(2) {
  background-color: var(--cor_principal);

}

.pqEscolher div div div div:nth-child(2) div:nth-child(2) {
  background-color: var(--cor_destaque);

  color: var(--cor_texto-suave);
}

.pqEscolher div div div div:nth-child(2) div:nth-child(1) {
  background-color: var(--cor_principal);


}

.pqEscolher h4 {
  font-family: var(--fonte-menu);
  font-size: 1.875em;
  margin-bottom: .3em;

}

.pqEscolher p {
  text-indent: 2em;
  text-align: justify;
  font-size: 1.25em;
  line-height: 1em;
  /* padding: 1.25em; */
}

/* FIM SESSÃO PORQUE NOS ESCOLHER  */


/*----------------------------------SESSÃO VIDEO-----------------------*/


/* INICIO SESSÃO VIDEO DO SITE  */

.video {
  background-image: url(../img/Video.png);
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video a {
  transition: transform 0.5s ease-in-out;
}

.video a:hover {
  transform: scale(0.9);

}

.video img {
  width: 100px;


}

/* FIM SESSÃO VIDEO DO SITE  */


/*-------------------------------SESSÃO DEPOIMENTO-----------------------*/
 /* INICIO SESSÃO DE DEPOIMENTOS  */


/*  
  .depoimento {
     padding: 50px 0;
  } */

  .pg-servico{
    width: 100%;
  }

  .depoimento .container {
    flex-direction: column;
  }

  .boxDepo {
    display: flex;
    gap: 2em
  }

  .borda {
    background: linear-gradient(90deg, var(--cor_destaque), var(--cor_principal),
        var(--cor_destaque));
    width: 30%;
    border-radius: 1em;
    padding: 0.3em;
    background-size: 200% 200%;
    animation: bordaAnimada 5s linear infinite;
  }

  @keyframes bordaAnimada {

    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 100% 50%;
    }
  }

  .borda>div {
    background-color: #fff;
    border-radius: inherit;
    padding: 2em;
    height: 500px;
  }

  .boxDepo img {
    display: block;
    margin: 0 auto 2em auto;
    width: auto;
    height: 150px;
  }

  .borda div img {
    display: flex;
    align-items: center;

  }


  .boxDepo ul {
    display: flex;
    justify-content: center;
    gap: 1em
  }


  .boxDepo ul img {
    display: block;
    margin: 0 auto 2em auto;
    width: auto;
    height: 40px;
  }

  .boxTitulo {
    display: flex;
    justify-content: space-between;
  }

  .boxTitulo h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.875em;
    margin-bottom: 0.5em;
  }

  .boxTitulo p {
    text-indent: 2em;
    font-size: 1.25em;
    line-height: 1.5em;
  }

 /* FIM SESSÃO DE DEPOIMENTOS  */



/* INICIO MINHA SESSÃO DO FORMULARIO DE CONTATO  */

  .formContato{
    padding: 50px 0;
    color:#333333;
  }
  
  .formContato .container{
    flex-direction: column;
    text-align: center;
    align-items: normal;
    gap:1.2em;
  }
  
  .formContato h2{
    font-size: 2.5em;
    font-family: var(--fonte-menu);
  }
  
  
  .formContato h3{
    font-size: 1.875em;
    font-family: var(--fonte-menu);
  }
  
  .formContato form{
    background-color: var(--cor_destaque);
    padding: 50px 30px;
    display: flex;
    justify-content: center;
    gap:3em;
  }
  
  .form-esquerda{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:2.2em;
  }
  
  .form-esquerda input, .form-esquerda select{
    height: 46px;
    padding-left: 1em;
    border:1.5px solid #1a1a1a1a;
    border-radius: 8px;
    font-size: 1.25em;
    outline: none;
    
  }
  
  .formContato select{
    color:#9f9f9f;
  }
  
  .form-direita{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:1em;
  }
  
  .form-direita textarea{
    height: 280px;
    padding-left: 1em;
    padding-top: 1em;
    border:1.5px solid #1a1a1a1a;
    border-radius: 8px;
    font-size: 1.25em;
    resize: none;
    outline: none;
  }
  
  .botoes{
    display: flex;
    gap:2em;
  }
  
  .botoes button{
    background-color: var(--cor_principal);
    color:#1a1a1a;
    border: none;
    border-radius: 15px;
    width: 250px;
    height: 50px;
    cursor:pointer;
    font-size: 1em;
    transition: 0.2s ease;
  }
  
  .botoes button:hover{
    background-color: #1a1a1a;
    color: var(--cor_principal);
  }
  
  .sucesso {
    color: green;
    font-weight: bold;
  }
  
  .erro {
    color: red;
    font-weight: bold;
  }

/* FIM MINHA SESSÃO DO FORMULARIO DE CONTATO  */



/* INICIO DA MINHA PAG-SERVIÇOS  */

  .pg-servico{
    padding: 50px 0;
  }
  
  .pg-servico .container{
    flex-direction: column;
    text-align: center;
  }
  
  .topo{
    background-color: #fff;
    padding-block: 20px;
  }
  
  .pg-servico h2{
    font-size: 2.5em;
    font-family: var(--font-menu);
  }
  .pg-servico h3{
    font-size: 1.875em;
    font-family: var(--font-menu);
  }
  
  .pg-servico ul{
    display: flex;
    flex-wrap: wrap;
    gap:4em;
  }
  
  .pg-servico ul li{
    width: 45%;
  }
  
  
  /* Efeito hover — opcional mas bonito */
  .pg-servico ul li:hover {
    transform: translateY(-6px);
    box-shadow: 0px 0px 25px rgba(0,0,0,0.5);
    
  }
  
  
  
  .pg-servico ul > li > a{
    display: flex;
    border-radius: 1em;
    box-shadow: 0 2px 5px var(--cor_destaque);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
  }
  
  .pg-servico figure{
    flex: 0 0 300px;
    aspect-ratio: 1 / 1;
    background: #f2f2f2;
    overflow: hidden;
  }
  
  img{
    width: 100%;
    
  }
  
  .lista-conteudo{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .pg-servico ul h3{
    font-family: var(--fonte-menu);
    font-size: 1.5em;
    margin-top: 15px;
  }
  
  .pg-servico ul p{
    padding: 0 15px;
    color:#1a1a1a;
    line-height: 1.5em;
  }

  .pg-servico ul span{
    display: flex;
    justify-content: center;
    color:#1a1a1a;
    padding: 0.5em 1em;
    background-color: var(--cor_principal);
  }

/* FIM DA MINHA PAG-SEVIÇOS  */


/* INICIO SESSÃO PAGINA DE CLIENTES  */
  
  /* INICO SESSÃO PAGINA DE CLIENTES  */
  .cliente {
    padding: 60px 0;
  }
  
   .cliente .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  } 
  

 
   /* FIM DA MINHA PAG-SERVIÇOS  */

.cliente-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.cliente-item img {
  width: 100%;
  display: block;
  transition: .4s ease;
}

.cliente-item a {
  position: absolute;
  inset: 0;
  background: rgba(255, 140, 0, 0.75); /* Laranja */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  color: #fff;
  text-align: center;
  padding: 20px;
  transition: .4s ease;
}

.cliente-item a .conteudo span{
  font-size:1.5em;
  opacity: 0.8;
}

.cliente-item a .conteudo h4 {
    font-size: 1.2em;
    margin-top: 5px;
    letter-spacing: 0.3em;
}

.cliente-item a .conteudo {
  transform: translateY(20px);
  opacity: 0;
  transition: .4s ease;
}

.cliente-item a i {
  margin-top: 10px;
  font-size: 22px;
  transform: translateX(-15px);
  opacity: 0;
  transition: .4s ease;
}

/* HOVER EFEITO */
.cliente-item:hover img {
  transform: scale(1.1);
  filter: brightness(100%);
  
}

.cliente-item:hover a {
  opacity: 1;
}

.cliente-item:hover a .conteudo {
  opacity: 1;
  transform: translateY(0);
}

 /* FIM SESSÃO PAGINA DE CLIENTES  */


/* INICIO DA MINHA SESSAO FOOTER  */
  /* .rodape {
    padding-top: 50px;
  }
   */
  
  .rodape>div:nth-child(1) {
    background-color: var(--cor_principal);
    padding: 70px 0;
  }
  
  .rodape .container {
    gap: 1em;
  }
  
  
  /* logo 400 - 26% / menu: 300 - 20% / end: 350 - 23% / inscreva: 450 - 31%  */
  
  
  
  /* BLOCO 01  */
  .rodape .logo {
    width: 22%;
  
  }
  
  
  .rodape .logo h2 {
    font-size: 1.25em;
    font-family: var(--fonte-menu);
  }
  
  .rodape>div:nth-child(2) {
    background-color: #D2691E;
  }
  
  
  .rodape .logo h2 span {
    display: block;
    text-align: right;
  
  }
  
  .rodape .logo ul {
    display: flex;
    justify-content: space-around;
  
  
  }
  
  .rodape .logo a {
    inline-size: 50px;
    block-size: 50px;
    color: #1a1a1a;
    border-radius: 50px;
    display: grid;
    transition: filter 0.2s ease;
  }
  
  .rodape .logo a:hover {
    filter: brightness(1.2);
    background-color: var(--cor_destaque);
  }
  
  .rodape .menu li:last-child {
    margin-bottom: 0;
  }
  
  .rodape .menu li {
    margin-bottom: 20px;
  }
  
  .rodape .menu a:hover {
  color: var(--cor_destaque);
  }
  
  .rodape .menu {
    text-align: center;
    width: 20%;
  }
  
  .rodape .menu a {
    color: #1a1a1a;
    font-size: 1.25em;
    font-family: var(--fonte-menu);
  
  }
  
  .rodape .end {
    width: 23%;
    text-align: center;
    font-family: 1.25em;
  
  }
  
  
  .rodape .end h2 {
    font-family: 1.875em;
    font-family: var(--fonte-menu);
    margin-bottom: 38px;
  
  }
  
  .rodape .end a {
    display: block;
    color: #1a1a1a;
  }
  
  .rodape .end a:hover {
    color: var(--cor_destaque);
  }
  
  .rodape .end address {
    line-height: 2.3em;
  }
  
  
  /* BLOCO 04  */
  .rodape .inscreva {
    width: 30%;
  
  }
  
  .rodape .inscreva h2 {
  
    font-family: 1.5em;
    font-family: var(--fonte-menu);
    margin-bottom: 38px;
    text-align: center;
  
  }
  
  .rodape .inscreva form {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
  }
  
  .rodape .inscreva input[type="email"] {
    height: 40px;
    border: 1px solid #1a1a1a;
    border-radius: 25px;
    padding: 0 12px;
    outline: none;
    width: 82%;
  }
  
  .rodape > div:nth-child(2)
  .container{
    justify-content: space-around;
  }
  .rodape > div:nth-child(2) h2{
    font-size: 0.95em;
    font-family: var(--font-menu);
    margin-bottom: 0;
    padding: 5px 0;
    text-align: center;
    color:#fff;
  }
  
  
  .rodape .inscreva input[type="submit"] {
    background: transparent url(../img/seta.png);
     inline-size: 30px;
     background-size: contain;
    block-size: 30px;
    margin-top: 5px;
    margin-right: 20px;
    float: right;
    border: 0;
    cursor: pointer;
  }
  
  
  .rodape .inscreva label{
    display: flex;
    align-items: center;
    gap:2em;
    cursor: pointer;
  }
  
  .rodape .inscreva input[type="checkbox"] {
    appearance: none; 
    border-radius: 50%;
    /* -webkit-apperance:none ; */
    height: 20px;
    width: 20px;
    position: relative;
    border: 1px solid #1a1a1a ;
    background-color: #fff;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .rodape .inscreva input[type="checkbox"]:checked::before {
   content:"";
   position:absolute;
   top: 2px;
   left:5px;
   width: 4px;
   height: 8px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   transform:rotate(45deg);
   
  }
  
/*
######################################################################
######################################################################
#######################    LAYOUT MOBILE     #########################
######################################################################
######################################################################

Até 4 telas - Notebook, Tablet, Celulares

Notebooks - 993 até 1200
Tablet - 768 até 992
Celulares - 0 - 768

*/

/* Notebooks - 993 - 1050 -  1200 */
@media (max-width: 1200px) {
  .container {
    padding-inline: 0;
  }

  /* ############################# TOPO ############################ */
  .topo .container {
    gap: 1em;
  }
  .topo h1 {
    width: 250px;
  }
  .topo nav ul {
    justify-content: space-evenly;
  }
  .topo nav ul li a {
    padding-inline: 0.8em;
  }
  .redes {
    gap: 0.5em;
  }

  /* ############################# AREA ############################ */
  .area .container {
    justify-content: space-evenly;
  }
  .area h2 {
    font-size: 1.2em;
  }

  /* ############################# SOBRE ############################ */
  .sobre .container {
    flex-direction: column;
    align-items: center;
  }
  .imgSobre img:nth-child(1) {
    width: 480px;
  }
  .imgSobre img:nth-child(2) {
    width: 320px;
    border-radius: 0 6.25em 0 6.25em;
  }
  .txtSobre {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .txtSobre span {
    margin-left: 10%;
  }
  .txtSobre div {
    width: 80%;
    margin: 0 auto;
  }
  .txtSobre a {
    margin-left: 10%;
  }

  /* ############################# SERVIÇO ############################ */
  .painelServico {
    padding: 1em;
  }
  .painelServico h4 {
    font-size: 1.2em;
    margin-bottom: 1em;
  }
  .painelServico p {
    text-indent: 2em;
    line-height: 2em;
  }
  .tabPainel {
    gap: 0.5em;
  }
  .tabPainel a {
    font-size: 1.2em;
    padding-left:12%;
  }

  /* ############################# PQ NOS ESCOLHER  ############################ */
  .pqEscolher > div {
    width: 100%;
  }
  .pqEscolher img {
    display: none;
  }

  /*############################## DEPOIMENTO ##################################*/
  .borda > div {
    height: 400px;
  }
  .boxDepo img {
    height: 100px;
  }

} /* FIM do Notebooks - 993 até 1200 */



/* Tablet - 768 - 800 -  992 */
@media (max-width: 992px) {
  .banner {
    display: block;
  }
} /* FIM do Tablet - 768 até 992 */



@media not all and (max-width:768px){
  .abrir-menu,
  .fechar-menu{
    display: none;
  }
  
}

/* Celulares - 0 - 400 - 768 */
@media (max-width: 768px) {

  .topo h1{
    width: 350px;
  }

.topo nav{
  background-color: rgba(51,207,255,0.8);
  height: 100%;
  position: fixed;
  top:0;
  max-width: 400px;
  width: 50%;
  z-index: 100;
  right: -200px;
  transition: right 1s ease-in-out;
}

.menu-ativo .topo nav{
  right:0;
}

.topo nav ul {
  flex-direction: column;
}

.topo h1{
    width: 350px;
  }

.topo nav{
  background-color:var(--cor_texto);
  height: 50%;
  position: fixed;
  top:0;
  max-width: 400px;
  width: 45%;
  z-index: 100;
  right: -100%;
  transition: right 1s ease-in-out;
 
}



.rede{
  display: block;
}

.topo .container .mobile-rede{
  display: flex;
  flex-direction: row;
  margin: 20px 0px;
  
  
}


.menu-ativo .topo nav{
  right:0;
}

.topo nav .mobile-menu {
  flex-direction: column;
}

    .topo nav .mobile-rede img {
        width: 32px;
        margin-right: 10px;
        padding-right: 10px;
    }

  
/*
######################################################################
######################################################################
#######################    LAYOUT MOBILE     #########################
######################################################################
######################################################################

Até 4 telas - Notebook, Tablet, Celulares

Notebooks - 993 até 1200
Tablet - 768 até 992
Celulares - 0 - 768

*/

/* Notebooks - 993 - 1050 -  1200 */
@media (max-width: 1200px) {
  
  .container {
    padding-inline: 0;
  }
  
   


  /* ############################# TOPO ############################ */
  .topo .container {
    gap: 1em;
  }
  .topo h1 {
    width: 250px;
  }
  .topo nav ul {
    justify-content: space-evenly;
  }
  .topo nav ul li a {
    padding-inline: 0.8em;
  }
  .redes {
    gap: 0.5em;
  }

  /* ############################# AREA ############################ */
  .area .container {
    justify-content: space-evenly;
  }
  .area h2 {
    font-size: 1.2em;
  }

  /* ############################# SOBRE ############################ */
  .sobre .container {
    flex-direction: column;
    align-items: center;
  }
  .imgSobre img:nth-child(1) {
    width: 480px;
  }
  .imgSobre img:nth-child(2) {
    width: 320px;
    border-radius: 0 6.25em 0 6.25em;
  }
  .txtSobre {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .txtSobre span {
    margin-left: 10%;
  }
  .txtSobre div {
    width: 80%;
    margin: 0 auto;
  }
  .txtSobre a {
    margin-left: 10%;
  }

  /* ############################# SERVIÇO ############################ */
  .painelServico {
    padding: 1em;
  }
  .painelServico h4 {
    font-size: 1.2em;
    margin-bottom: 1em;
  }
  .painelServico p {
    text-indent: 2em;
    line-height: 2em;
  }
  .tabPainel {
    gap: 0.5em;
  }
  .tabPainel a {
    font-size: 1.2em;
    padding-left:12%;
  }

  /* ############################# PQ NOS ESCOLHER  ############################ */
  .pqEscolher > div {
    width: 100%;
  }
  .pqEscolher img {
    display: none;
  }

  /*############################## DEPOIMENTO ##################################*/
  .borda > div {
    height: 400px;
  }
  .boxDepo img {
    height: 100px;
  }

  .boxTitulo h3{
    font-family: var(--font-menu);
    font-size: 1.2em !important;
    font-weight: 500;

  }
  .boxTitulo h2{
    font-size: 1.1em !important;
    font-weight: 500;
    color:red;
  }

  p{
    margin-bottom: 1em;
    font-family: var(--fonte-base);
    font-size: 0.9em;
}


} /* FIM do Notebooks - 993 até 1200 */



/* Tablet - 768 - 800 -  992 */
@media (max-width: 992px) {

  .banner {
    display: block;
  }

} /* FIM do Tablet - 768 até 992 */



@media not all and (max-width:768px){
  .abrir-menu,
  .fechar-menu{
    display: none;
  }
  

  
}


/* Celulares - 0 - 400 - 768 */
@media (max-width: 768px) {

  .menu-ativo .rede{
    display: none;
  }
  
  .topo h1{
    width: 350px;
  }

.topo nav{
  background-color:var(--cor_texto);
  height: 50%;
  position: fixed;
  top:0;
  height: auto;
  max-width: 400px;
  max-width: 50%;
  z-index: 100;
  right: -200px;
  transition: right 1s ease-in-out;
}


.rede{
  display: block;
}



.menu-ativo .topo nav{
  right:0;
}

.topo nav ul {
  flex-direction: column;
}

/* ===== RESPONSIVO 0 a 400px ===== */
@media (max-width: 400px) {
  .mobile-rede {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 0; /* sem espaço */
  }

  .mobile-rede li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-rede li img {
    display: block;
    width: 20px; /* mantém o tamanho */
  }
}





/*##################MENU MOBILE##############*/
.abrir-menu{
  background-image: url(../img/abrir-menu.png);
  background-size: cover;
  padding:20px;
  border:0;
  display: block;
  margin-right:10px;
}
.fechar-menu{
  background-image: url(../img/fechar-menu.png);
  background-size: cover;
  padding:20px;
  border:0;
  display: block;
  margin-right:10px;

}



.rede {
  display: none; /* some no desktop */
}

.menu-ativo nav .rede {
    display: flex;          /* agora fica em linha */
    justify-content: center;
    flex-direction: row;
    gap: 2px; 
    padding: 10px;             /* espaço entre os ícones (ajuste se quiser) */
    margin-top: 2px;
}

    .menu-ativo nav .rede img {
        width: 30px;
        height: 32px;
        padding: 0;
        /* margin-left: -26px; */
    }

.menu-ativo nav .rede img:hover {
    transform: scale(1.15);
    transition: 0.2s ease;
}


.topo  li a {

    position: relative;
    /* transition: color 0.3s ease, transform 0.3s ease; */
    width: 30px;
    height: 30px;
}

.cliente-item a .conteudo span{
  font-size:0.9em;
  opacity: 0.8;
}

.cliente-item a .conteudo h4 {
    font-size: 11px;
    margin-top: 5px;
    letter-spacing: 0.3em;
}




/* .banner{
  display: none;
} */

.area{
  display: none;
}
.sobre div{
  align-items: center;
}

.imgSobre{
  display: none;
}

.txtSobre h2{
  font-size: 1.8em;
}
.txtSobre h3{
  font-size: 1.5em;
}
.txtSobre h2:hover{
color: var(--cor_principal);
}
.txtSobre h3:hover{
color: var(--cor_destaque);
}

.txtSobre div p{
    text-align: justify;
}

.ferramentas{
  padding: 10px 0;
}

.ferramentas h2{
  font-size: 1.5em;
  margin-bottom: 10px;
}

.servicos {
    text-align: center;
  }

  .servico{
    width: 100%;
  }

  .painelServico {
    width: 100%;
    padding: 1.25em;
    text-align: center;
  }

  .tabPainel {
    display: none;
  }

  .servicos div h2{
    text-align: center;
    font-size:1.8em ;
    color: var(--cor_destaque);
  }
  .servicos div h3{
    margin-left: 50px;
    text-align: center;
    font-size:1.2em ;
    /* white-space: nowrap; */
  }

  .servico .container{
    width: 100%;
  }

  .painelServico p{
  text-align: justify;
  opacity: 0.3;            /* texto começa quase invisível */
  transition: opacity .4s ease-in-out;   /* suavidade */
  }
  
  .painelServico p:hover{
  color:var(--cor_texto);
  cursor:pointer ;
  opacity: 2;    
  }

  .equipe {
    padding: 20px;
    background-color: #fff;
  }
  .equipe div div div {
    width: 45%;
  }

  .equipe ul {
    gap: 1em;
    margin-top: -35px;
  }

  .equipe a {
    inline-size: 30px;
    block-size: 30px;
  }

   .equipe h2 {
    text-align: center;
    font-size: 1.5em;

    
  } 
  .equipe h2:hover {
    cursor: pointer;
    color:var(--cor_destaque);
     opacity: 2;
  transform: translateY(0);

  }

  .equipe .container{
    width: 100%;
  }

  /* SESSÃO EQUIPE CLAUDIO  */
  .verde .amarelo img{
    position: relative;
    width: 190%;
    right: 30px;
    
  }

  .video{
    width: 100%;
    height: 50%;
  }



.verde .amarelo h3{
  align-items: center;
  text-align: center;
    font-size: 1.25em; 
  }

   .verde .amarelo h4{
    position: relative;
    right: 30px;
    font-size: .7em;
     white-space: nowrap;
  }


  .verde .amarelo ul li a{
    width: 190%;
    margin-left:15px;
  }

  .verde .vermelho img{
    position: relative;
    width: 190%;
    right: 20px;
  }
  .verde .vermelho h3{
  align-items: center;
  text-align: center;
  font-size: 1.25em; 
  }

/* SESSÃO EQUIPE PEDRO */
  .verde .vermelho h4{
    right: 40px;
    font-size: .7em;
     white-space: nowrap;
    position: relative;
    right: 20px
  }

.verde .vermelho ul li a{
    width: 190%;
    margin-left:15px;
  }

  .equipe h4 {
    font-size: 0.9em;
  }

  /* FIM DA SESSÃO EQUIPE */

  .pqEscolher {
    display: none;
  }

  .boxDepo {
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding: 30px;
  }

  .boxTitulo h3 {
    font-size: 0.9em;
  }
  .boxTitulo h2 {
    font-size: 0.9em;
  }

  .boxTitulo div p{
    font-size: 0.9em;
  }

  .borda div ul li{
    font-size: 1em;
  }


  .borda {
    width: 90%;
  }

  .rodape > div:nth-child(1) {
    padding: 10px 0;
  }
  .rodape .logo,
  .rodape .menu {
    display: none;
  }

  .rodape .container {
    flex-direction: column;
    gap: 0;
  }
  .rodape .end {
    width: 100%;
  }

  .rodape .end h2 {
    margin-bottom: 5px;
  } 

  .rodape .end address {
    /* line-height: 1em; */
     margin-bottom: 20px;
     letter-spacing: 1px;
  }

  .rodape .inscreva {
    width: 80%;
  }

  .rodape .inscreva input[type="submit"] {
    margin-top: 5px;
    margin-right: -13px;
  }

  .rodape > div:nth-child(2) h2 {
    font-size: 0.8em;
    padding: 0;
  }

  .banner img{
    width: 50%;
    height: 50%;
  }

  /* CONTEUDO MISSÃO VISSÃO E VALOR  */

  .misao{
    display:flex;
    flex-direction: column;
    padding: 20px 0;
    height: 30%;
    padding: 20px;
  }

  .conteudo-misao,
  .conteudo-visao,
  .conteudo-valores {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  .conteudo-misao img,
  .conteudo-visao img,
  .conteudo-valores img {
   margin: 10px;
    width: 120px;  /* diminui a imagem */
  }

  .conteudo-misao {
    gap: 0px;
}

  .conteudo-misao h2,
.conteudo-visao h2,
.conteudo-valores h2 {
  
  width: 100%;
  margin-top: 5px;

  text-align: justify;
  margin-top: 0;
  padding-top: 0; /* garante ZERO espaço */
  line-height: 1; /* opcional, deixa as linhas mais próximas */
  font-size: 0.9em;
  }

  .visao{
    padding: 20px;
    height: 30%;
  }

  .conteudo-visao,
  .conteudo-visao,
  .conteudo-visao {
    flex-direction: column;
    text-align: center;
  }
  .conteudo-visao img,
  .conteudo-visao img,
  .conteudo-visao img {
   margin: 10px;
    width: 120px;  /* diminui a imagem */
  }

  .conteudo-visao {
    gap: 0px;
}

  .conteudo-visao h2,
.conteudo-visao h2,
.conteudo-visao h2 {
  margin-top: 0;
  padding-top: 0; /* garante ZERO espaço */
  line-height: 1.2; /* opcional, deixa as linhas mais próximas */
  font-size: 0.9em;
  }

  .valores{
    padding: 20px;
    height: 30%;
  }

  .conteudo-valores,
  .conteudo-valores,
  .conteudo-valores {
    flex-direction: column;
    text-align: center;
  }
  .conteudo-valores img,
  .conteudo-valore img,
  .conteudo-valores img {
   margin: 10px;
    width: 120px;  /* diminui a imagem */
  }

  .conteudo-valores {
    gap: 0px;
}

  .conteudo-valores h2,
.conteudo-valores h2,
.conteudo-valores h2 {
  margin-top: 0;
  padding-top: 0; /* garante ZERO espaço */
  line-height: 1.2; /* opcional, deixa as linhas mais próximas */
  font-size: 0.9em;
  }


/****************############RESPONCIVO SESSÃO SERVICO##############*/
.pg-servico ul li {
  width: 100%;
  gap:1em;
}


.pg-servico ul > li > a {
    display: flex;
    flex-direction: column;
    border-radius: 1em;
    width: 95%;
    margin-left: 10px;
    box-shadow: 0 2px 5px var(--cor_destaque);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease
}

.pg-servico h2 {
  display: inline-block;
  transition: color 0.3s ease;
}

.pg-servico h2:hover {
  animation: bounce 0.4s ease forwards;
  color: var(--cor_destaque);
   cursor:pointer ;
}

@keyframes bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}

.pg-servico h3 {
  font-size: 1.25em;
  display: inline-block;
  transition: color 0.3s ease;
}

.pg-servico h3:hover {
  animation: bounce 0.4s ease forwards;
  color: var(--cor_principal);
  cursor:pointer ;
}

@keyframes bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}


/****************############INICIO RESPONCIVO SESSÃO VIDEO##############*/
    .video {
        width: 100%;
        height: 50%;
        margin: 20px 0;
        padding: 30px;
    }

/****************############FIM RESPONCIVO SESSÃO VIDEO##############*/



/****************############INICIO RESPONCIVO SESSÃO FORMULARIO##############*/

.formContato form {
    background-color: var(--cor_destaque);
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    width: 85%;
    justify-content: center;
    gap: 3em;
}

/****************############FIM RESPONCIVO SESSÃO FORMULARIO##############*/

 /* FIM do Celulares - 0 - 768 */
}

}