@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Secular One", sans-serif;
    }

    html, body {
      height: 100%;
      background-color: #fff;
    }
/*/////////////////////////////*/
    header {
      width: 100%;
      }

    nav#nav-esq {
      width: 100%;
      height: 70px;
      background-color: rgba(2, 2, 2, 0.4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
    }

    #logo {
      max-width: 10vw;
      margin-top: 0%;
    }

    #logo img {
      width: clamp(5px, 7vw, 45px);
    }
/*/////////////////////////////*/
    #icone-menu {
      display: none;
    }

    #icone-menu li {
      list-style: none;
      cursor: pointer;
    }

    #icone-menu ion-icon {
      font-size: 2.5rem;
      color: #fff;
    }

    #menu-principal {
      display: flex;
      gap: 3vw; 
      margin-top: 1%;
    }

    #menu-principal li {
      list-style: none;
           
    }

    #menu-principal li a {
      text-decoration: none;
      color: #fff;
      font-size: 1.2rem;
      padding-bottom: 0.5em;
      transition: 0.3s ease-out;

    }

    #menu-principal li a:hover {
      border-bottom: 1px solid #050404;
      opacity: 0.4;
    }
/*/////////////////////////////*/
 .contador {
  position: absolute; /* Posiciona o elemento de forma absoluta em relação ao ancestral posicionado (geralmente o body ou um container com position: relative) */
  top: 75%; /* Move o elemento 45% do topo do elemento pai */
  left: 70%;/* Move o elemento 70% da esquerda do elemento pai */
  transform: translate(-50%, -50%);/* Centraliza o elemento exatamente no ponto definido por top e left. 
     O -50% move o próprio elemento metade da sua largura e altura para trás, centralizando-o visualmente. */
  padding: 0.1rem;/* Adiciona um pequeno espaçamento interno ao redor do conteúdo */
  background-color: rgba(255, 255, 255, 0.1);/* Cor de fundo branca com 10% de opacidade */
  backdrop-filter: blur(10px); /* Aplica um desfoque ao fundo do elemento, criando um efeito de vidro fosco (glassmorphism) */
  border-radius: 10px;  /* Bordas arredondadas com raio de 10px */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.38); /* Sombra projetada para dar profundidade, com leve desfoque e transparência escura */
  width: clamp(80px, 8.5vw, 170px); /* Define uma largura responsiva que varia de no mínimo 80px até no máximo 130px, baseada em 8.5% da largura da viewport */
  min-height: clamp(65px, 10vh, 70px); /* Altura mínima responsiva entre 65px e 80px, adaptando-se à altura da viewport (10% dela) */
  display: flex;              /* Usa Flexbox para alinhar o conteúdo interno */
  flex-direction: column;    /* Direção vertical dos itens filhos */
  align-items: center;       /* Centraliza horizontalmente os itens filhos */
  justify-content: center;   /* Centraliza verticalmente os itens filhos */
  color: #fff;               /* Define a cor do texto como branco */
  transition: all 0.4s ease; 
  /* Aplica uma transição suave de 0.4 segundos a todas as propriedades que mudarem */
  z-index: 10;               /* Garante que o elemento fique sobre outros elementos com z-index menor */
}


    .estatistica_tela {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
      font-size: clamp(0.9rem, 1.5vw, 1.5rem);
      font-family: "Pacifico", cursive;
    }

    .estatistica_vaga, .estatistica_emp {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-family: "Pacifico", cursive;
      font-weight: bold;
    }

    .texto_vaga, .texto_emp {
      font-size: clamp(0.9rem, 1.6vw, 1.3rem);
      font-style: italic;
      text-align: center;
    }
/*/////////////////////////////*/
    main {
      width: 100%;
  
    }
   img{
      max-width:100%;
    }

/*/////////////////////////////*/
/*/////////////////////////////*/
/* Estilo do botão "voltar ao topo" */

    #topoBtn {
      position: fixed; /* O botão fica fixo na tela */
      bottom: 10px; /* Fica sobre o rodapé */
      right: 30px; /* Distância da lateral direita */
      z-index: 99; /* Garante que o botão fique sobre outros elementos */
      background-color: #111; /* Cor de fundo do botão */
      color: white; /* Cor do ícone */
      border: none; /* Remove a borda do botão */
      outline: none; /* Remove o contorno ao clicar */
      padding: 12px; /* Espaçamento interno do botão */
      border-radius: 50%; /* Faz o botão redondo */
      cursor: pointer; /* Aparece como um botão clicável */
    }

    /* Tamanho do ícone dentro do botão */
    #topoBtn ion-icon {
      font-size: 24px; /* Tamanho do ícone */
    }

    /* Estilo para o rodapé */
    .footer_inicial {
      position: relative; /* Garante que o rodapé tenha um posicionamento relativo */
      padding-top: 50px; /* Espaço para o botão não cobrir o rodapé */
    }

/*//////////////////////////////////////*/

footer.footer_inicial {
  background-color: rgb(37, 37, 41); /* Define a cor de fundo do rodapé como um tom escuro */
  width: 100%; /* O rodapé ocupará toda a largura da página */
  color: white; /* Define a cor do texto como branca */
  padding: 0.9rem 1rem; /* Espaçamento interno: 0.3rem em cima/baixo e 1rem nas laterais */
  font-size: 0.9rem; /* Define o tamanho da fonte para 0.75rem */
}

footer.footer_inicial .rodape_inicial {
  display: flex; /* Ativa o Flexbox para organizar os elementos filhos */
  flex-direction: column; /* Organiza os elementos filhos em coluna (verticalmente) */
  align-items: center; /* Centraliza os elementos filhos horizontalmente */
  justify-content: center; /* Centraliza os elementos filhos verticalmente */
  gap: 0.8rem; /* Espaçamento de 1.2rem entre os elementos filhos */
  text-align: center; /* Centraliza o texto dentro dos elementos */
}

footer.footer_inicial img {
  max-height: 45px; /* Define a altura máxima da imagem como 24 pixels */
  height: auto; /* Permite que a altura da imagem seja ajustada proporcionalmente */
}

footer.footer_inicial .rodape_texto p {
  margin: 0; /* Remove qualquer margem padrão dos parágrafos */
  line-height: 1.7; /* Define a altura da linha como 1.1 para melhor legibilidade */
}


 /* Tablets: Centralizar contador na parte inferior do header */
@media (max-width: 1024px) {
  header {
    position: relative; /* permite que .contador se posicione em relação a ele */
  }

 .contador {
    
    width: 80%;
    max-width: 200px;
    min-height: 80px;
    padding: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .estatistica_tela {
    font-size: 1.2rem;
  }

  .estatistica_vaga, .estatistica_emp {
    font-size: 1.8rem;
  }

  .texto_vaga, .texto_emp {
    font-size: 1.1rem;
  }

}


/*///////////////////*/
/* Menu hamburguer //*/
    
@media (max-width: 768px) {

  #logo {
        max-width: 20vw;
        top: 1%;
  }
  nav#nav-esq {
    background-color: transparent;
    }
  #icone-menu {
        display: flex;
        gap: 1rem;
  }

  #menu-principal {
        position: fixed;
        top: 85px;
        right: -100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
        transition: right 0.5s ease-in-out;
        z-index: 99;
        height: 100vh;
  }

  #menu-principal.slide-in {
        right: 0;
  }

  #menu-principal li a {
        font-size: 1.2rem;
        color: #fff;
  }

  .contador {
    display:none;
    position: absolute;
    top: auto; /* Remove o posicionamento vertical original */
    bottom: 10%; /* Posiciona o contador próximo à base do header */
    left: 70%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Corrige centralização com base na largura */
    width: 75%; /* Ocupa 85% da largura da tela */
    max-width: 75px; /* Limita o tamanho máximo */
    min-height: 20px; /* Define uma altura mínima razoável */
    padding: 0.05rem; /* Espaçamento interno */
    background-color: rgba(255, 255, 255, 0.1); /* Fundo semitransparente */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.38); /* Sombra ao redor */
    display: flex; /* Flexbox para alinhar conteúdo */
    flex-direction: column; /* Coloca elementos um abaixo do outro */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    z-index: 10; /* Garante que fique acima de outros elementos */
  }

  .estatistica_tela {
    font-size: 1rem; /* Tamanho de fonte reduzido para melhor encaixe */
    gap: 0.01rem; /* Espaço mínimo entre elementos */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .estatistica_vaga, .estatistica_emp {
    font-size: 0.9rem; /* Tamanho intermediário para destaque */
    font-weight: bold; /* Negrito */
    font-family: "Pacifico", cursive; /* Fonte decorativa */
  }

  .texto_vaga, .texto_emp {
    font-size: 0.55rem; /* Fonte menor para texto complementar */
    font-style: italic; /* Estilo itálico */
    text-align: center; /* Alinha texto ao centro */
  }


  .footer_inicial {
    width: 100%;

}
  .rodape_inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.1rem;
    font-size: 0.6rem; /* reduz o tamanho da fonte proporcionalmente */
    text-align: center;
  }

  .rodape_inicial img {
    width: 25px; /* reduz o tamanho da imagem proporcionalmente */
    margin-bottom: 0.1rem;
  }

  footer.footer_inicial {
    padding: 0.8rem 0;
  }

    /* Estilo do botão "voltar ao topo" */
    #topoBtn {
     display: none;
    }

    /* Tamanho do ícone dentro do botão */
    #topoBtn ion-icon {
     display: none;
    }



}
/*////////////////////////////////////*/
/*////// Telas de Celular ////////////*/

  @media (max-width: 500px) {

  
  #logo {
        max-width: 5vw;
      }
    
  nav#nav-esq {
    background-color: transparent;
    }
 .contador {
    display: none;
  }

  /* Oculta estatísticas de tela */
  .estatistica_tela {
    display: none;
  }

  /* Oculta estatísticas de vagas e empregos */
  .estatistica_vaga,
  .estatistica_emp {
    display: none;
  }

  /* Oculta textos de vagas e empregos */
  .texto_vaga,
  .texto_emp {
    display: none;
  }
  /* Ajuste geral do footer para mobile */
  footer.footer_inicial {
    font-size: 0.7rem; /* Tamanho da fonte um pouco menor */
    padding: 0.6rem 0.8rem; /* Espaçamento interno ajustado */
    margin: 0;
  }

  /* Ajustes do container interno em mobile */
  footer.footer_inicial .rodape_inicial {
    gap: 0.4rem; /* Espaçamento reduzido entre elementos */
    padding: 0.1rem 0; /* Padding vertical menor */
  }

  /* Ajuste da imagem em telas pequenas */
  footer.footer_inicial img {
    max-height: 20px; /* Reduz altura da imagem */
  }
    /* Estilo do botão "voltar ao topo" */
    #topoBtn {
     display: none;
    }

    /* Tamanho do ícone dentro do botão */
    #topoBtn ion-icon {
     display: none;
    }

}


@media (max-width: 360px) {
  /* Ajustes para celulares bem pequenos */
     .contador {
   display:none;  }

  .estatistica_tela {
    display:none;
  }

  .estatistica_vaga, .estatistica_emp {
    display:none;
  }

  .texto_vaga, .texto_emp {
    display:none;
  }

}