*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-image: url(./assets/fundoVitrini.webp);
  background-size: auto;
  background-position: top;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #282828;
}

.conteudoCentral h1{
  font-family: 'inter';
  color: white;
  font-weight: 300;
  font-size: 26px;
  margin-left: 20px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);

}

main {
    display: flex;           /* Ativa o flexbox */
    flex-direction: column;  /* Empilha um item em cima do outro (vertical) */
    min-height: 100vh;       /* Garante que o main tenha no MÍNIMO a altura total da tela */
    padding: 20px;           /* Um respiro nas bordas */
    box-sizing: border-box;  /* Para o padding não aumentar o tamanho da tela */
}

.logoPrincipal{
  width: 80%;
}

.conteudoCentral {
    /* Se você quiser que o "Em Construção" fique bem no meio da área livre: */
    flex: 1;                 /* Faz essa div crescer para ocupar todo o espaço vazio */
    display: flex;           /* Flexbox dentro dele também */
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center;     /* Centraliza horizontalmente */
    text-align: center;
    animation: subirComFade2 3.5s forwards;
    gap: 10px;
}

/* 4. A mágica para os logos ficarem no final */
.logos {
    /* Não precisa de muito aqui se usar o flex: 1 no item de cima.
       Mas, para garantir centralização dos ícones: */
    display: flex;
    justify-content: center; /* Ícones lado a lado centralizados */
    gap: 20px;               /* Espaço entre os ícones */
    margin-bottom: 20px;     /* Um espacinho do fundo da tela */
    animation: subirComFade 2s forwards;
}

.logos img:hover{
  transform: scale(1.02);
  transition: 1s;
  
}



@keyframes subirComFade {
            from {
                opacity: 0;
                /* Começa deslocado 30px para baixo (positivo é para baixo) */
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                /* Termina na posição original (0) */
                transform: translateY(0);
            }
        }

        @keyframes subirComFade2 {
            from {
                opacity: 0;
                /* Começa deslocado 30px para baixo (positivo é para baixo) */
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                /* Termina na posição original (0) */
                transform: translateY(0);
            }
        }