/* Estilo para o título "Escolha uma Aplicação" */
#aplicacoes-title {
    font-size: 24px; /* Tamanho da fonte */
    font-weight: 700; /* Peso da fonte */
    text-align: center; /* Centraliza o texto */
    color: #000000; /* Cor do texto */
    margin-bottom: 20px; /* Espaço abaixo do título */
    margin-top: 30px; /* Espaço acima do título */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 1px; /* Espaçamento entre letras */
    font-family: var(--e-global-typography-208fe81-font-family), Sans-serif; /* Tipografia */
}

/* Estilo para o título da categoria */
.categoria-titulo {
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left;
    color: #000000;
    font-family: var(--e-global-typography-208fe81-font-family), Sans-serif;
}

/* Estilo para o container das Aplicações Relacionadas */
#aplicacoes-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 50px; /* Espaçamento entre os itens */
    justify-content: center;
    padding: 0px; /* Remover padding para melhor controle */
    margin-bottom: 100px; /* Espaço entre as aplicações e os produtos */
    margin-top: 65px;
}

/* Estilo para cada item de aplicação */
#aplicacoes-thumbnails .aplicacao-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alinhar o texto abaixo do ícone */
    width: 130px;
    height: 150px; /* Ajuste para incluir espaço para o texto */
    text-align: center;
    padding: 0;
    position: relative; /* Necessário para o fundo extra */
}

/* Segundo fundo para o ícone */
#aplicacoes-thumbnails .aplicacao-thumb::before {
    content: '';
    position: absolute;
    width: 104px; /* Novo tamanho ajustado */
    height: 104px; /* Novo tamanho ajustado */
    background-color: #000000; /* Fundo preto */
    border-radius: 50%; /* Borda circular */
    top: calc(16% - 37.5px); /* Ajuste vertical */
    left: calc(41% - 40px); /* Ajuste horizontal */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
    z-index: 0; /* Coloca o fundo atrás do ícone */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ao redor do fundo */
    transform: scale(1.1);
}

/* Hover para o segundo fundo */
#aplicacoes-thumbnails .aplicacao-thumb:hover::before {
    background-color: #fc0303; /* Fundo vermelho no hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
}

/* Estilo para os ícones das aplicações */
#aplicacoes-thumbnails .aplicacao-thumb img {
    width: 70px; /* Ajuste de largura */
    height: 63px; /* Ajuste de altura */
    border-radius: 0; /* Removendo bordas arredondadas no ícone */
    position: relative; /* Para garantir que fique acima do fundo */
    z-index: 1; /* Garante que o ícone fique acima do fundo */
    transition: transform 0.3s ease;
    margin-top: 6px;
    transform: scale(1);
}

/* Efeito de hover para o ícone */
#aplicacoes-thumbnails .aplicacao-thumb:hover img {
    transform: translateY(-5px); /* Efeito de elevação do ícone */
}

/* Estilo para o título das aplicações */
#aplicacoes-thumbnails .aplicacao-thumb p {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
    line-height: 1.2em; /* Ajusta o espaçamento entre linhas */
    max-height: 2.4em; /* Limita a altura para duas linhas */
    white-space: normal; /* Permite quebra de linha */
    color: #000000; /* Cor do título inicial */
    margin-top: 30px;
    font-family: var(--e-global-typography-208fe81-font-family), Sans-serif; /* Tipografia */
}

/* Efeito de hover para o título */
#aplicacoes-thumbnails .aplicacao-thumb:hover p {
    color: #fc0303; /* Mantém o título sem alterações no hover */
}

/* Layout de produtos em grid */
.produtos-lista {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colunas */
    gap: 20px; /* Espaçamento entre os itens */
    margin-top: 0; /* Remove margem extra, já gerido pelo contêiner de aplicações */
    justify-items: center;
    text-align-last: center;
}

/* Estilo para a frase "Carregando produtos..." */
#loading-message {
    font-size: 30px; /* Tamanho da fonte */
    font-weight: 600; /* Peso da fonte */
    text-align: center; /* Centraliza o texto */
    color: #333; /* Cor do texto */
    margin-top: 20px; /* Espaço acima do texto */
    margin-bottom: 20px; /* Espaço abaixo do texto */
    font-family: var(--e-global-typography-208fe81-font-family), Sans-serif; /* Tipografia */
    animation: fadeIn 3s ease-in-out; /* Efeito de entrada suave */
}

/* Animação de fade-in para o texto */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.produto-item:hover {
    transform: translateY(-5px); /* Elevação ao passar o mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
    cursor: pointer; /* Indica que é clicável */
}