/* Estilos básicos para o corpo da página com fundo de cor sólida */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #e8f5e9; /* Cor de fundo sólida */
}

/* * Estilo do Cabeçalho Flutuante */
.header {
    position: fixed; /* Torna o cabeçalho flutuante */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Altura do cabeçalho */
    background-color: #abe0c1; /* Cor de fundo alterada */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para dar profundidade */
    display: flex;
    justify-content: space-between; /* Alinha a logo à esquerda e o menu à direita */
    align-items: center;
    padding: 0 20px;
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    padding-top: 20px;
    height: 80px; /* Aumenta a altura para compensar o padding */
}

.header .logo {
    width: 600px; /* Define a largura da logo para 300px */
    height: auto;   /* Mantém a proporção da altura */
}

/* * Estilo do Menu de Navegação (Desktop) */
.nav-menu {
    list-style: none; /* Remove os marcadores de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Menu horizontal por padrão */
    gap: 20px;
    margin-right: 30px; /* Adiciona 30px de margem no lado direito */
}

.nav-menu li {
    position: relative; /* Posição para o sub-menu */
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 10px 15px;
    display: block;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #007bff;
}

/* * Estilo do Sub-Menu */
.submenu {
    display: none; /* Inicia o sub-menu escondido */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #abe0c1; /* Cor de fundo alterada */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-menu li.open .submenu {
    display: flex;
    flex-direction: column;
}

.submenu li a {
    padding: 8px 15px;
    white-space: nowrap; /* Impede que o texto quebre a linha */
}

.nav-menu li:hover .submenu {
    display: block; /* Mostra o sub-menu ao passar o mouse sobre o item pai */
}

/* * Estilo do Botão do Menu Hambúrguer (invisível por padrão) */
.menu-toggle {
    display: none; /* Esconde o botão de hambúrguer em telas grandes */
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #333;
    padding: 5px;
    margin-right: 40px; /* Alinha com a margem do cabeçalho */
}

/* * Estilo do Conteúdo Principal (abaixo do cabeçalho) */
.content {
    padding-top: 80px; /* Aumenta o espaço para o cabeçalho flutuante */
}

.content h1 {
    text-align: center;
    color: #333;
    margin: 30px; /* Margem de 20px em todos os lados */
}

.content img {
    width: 100%; /* Garante que a imagem ocupe a largura total */
    height: auto;
    display: block;
}

#poweredby {
    width: 120px; /* Garante que a imagem ocupe a largura total */
    height: auto;
    display: flex;
    margin: 0 auto;
}

/* Estilo do Ícone Flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Alinha o ícone à direita */
    z-index: 1000; /* Garante que o ícone fique acima de outros elementos */
}

.whatsapp-float img {
    width: 60px;
    height: auto;
    border-radius: 50%; /* Deixa o ícone redondo */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma pequena sombra */
}

.whatsapp-float a {
    display: block; /* Faz o link ocupar todo o tamanho da div */
}

/* Estilo da Tabela - Borda removida */
.table-section {
    display: flex;
    justify-content: center; /* Centraliza a tabela horizontalmente */
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

table {
    border-collapse: collapse;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto; /* Centraliza a tabela dentro da seção */
}

td {
    padding: 15px;
    text-align: center; /* Centraliza o conteúdo da célula */
}

.cell-content {
    display: flex;
    flex-direction: column; /* Organiza a imagem e o texto verticalmente */
    align-items: center; /* Centraliza os itens horizontalmente */
}

.cell-content img {
    max-width: 100px;
    height: auto;
    display: block;
    margin-bottom: 10px; /* Adiciona espaço entre a imagem e o texto */
}

.cell-content p {
    margin-top: 0;
    font-size: 0.9em;
    color: #555;
}

/* ************************************** */
/* MEDIA QUERIES PARA RESPONSIVIDADE (CELULAR) */
/* ************************************** */
@media (max-width: 768px) { /* Por exemplo, para telas menores que 768px */
    .header {
        height: 60px; /* Altura menor para o cabeçalho em celular */
        padding-top: 0; /* Remove o padding-top em celular */
        padding: 0 15px; /* Ajusta o padding lateral */
    }

    .header .logo {
        width: 300px; /* Reduz a largura da logo em celular */
    }

    .nav-menu {
        /* Estilos para o menu "pop-down" */
        display: none; /* Oculta o menu horizontal por padrão em celular */
        flex-direction: column; /* Itens do menu empilhados verticalmente */
        position: absolute;
        top: 60px; /* Posição abaixo do cabeçalho */
        left: 0;
        width: 100%;
        background-color: #abe0c1; /* Cor de fundo alterada */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-right: 0; /* Remove a margem direita */
        padding-bottom: 10px;
    }

    .nav-menu.pop-down { /* Classe para mostrar o menu pop-down */
        display: flex; /* Mostra o menu quando a classe 'pop-down' é adicionada */
    }

    .nav-menu.pop-down .submenu {
        display: flex; /* Garante que o submenu apareça como coluna */
        flex-direction: column;
    }

    .nav-menu li {
        width: 100%; /* Itens de menu ocupam a largura total */
        / * text-align: center; Centraliza submenu */
    }

    .nav-menu a {
        padding: 15px 0; /* Aumenta o padding para facilitar o clique */
        border-bottom: 1px solid #eee; /* Linha divisória entre os itens */
    }
    .nav-menu li:last-child a {
        border-bottom: none; /* Remove a linha do último item */
    }

    .submenu {
        position: static; /* Remove o posicionamento absoluto do sub-menu */
        background-color: #abe0c1; /* Cor de fundo alterada */
        box-shadow: none; /* Remove a sombra do sub-menu */
        padding: 5px 0;
    }
    .nav-menu li:hover .submenu {
        display: flex; /* Garante que o sub-menu apareça como coluna */
        flex-direction: column;
    }

    /* Garante que os itens do Menu (incluindo o sub-menu) fiquem à direita */
    /* e adiciona o recuo de 10px da margem direita do container */
    .nav-menu.pop-down li, 
    .nav-menu.pop-down .submenu li {
        text-align: left; /* Alinha o texto à direita */
    }

    .nav-menu.pop-down a {
        /* Adiciona um preenchimento (padding) à direita de 10px em todos os links */
        /* Isso afasta o texto da borda do menu. */
        padding-left: 10px;
    }

    /* Regra para garantir que os links do sub-menu também tenham o afastamento */
    .nav-menu.pop-down .submenu a {
        padding-left: 60px; /* Podemos até colocar um valor maior para um recuo extra no sub-menu */
    }

    /* 1. Remove a borda inferior (linha) dos links dentro de QUALQUER SUBMENU. */
    /* Isso garante que os itens "BalStar", "ReaderStar", etc. não tenham linha entre si. */
    .nav-menu.pop-down .submenu a {
        border-bottom: none; /* 'important' para garantir a prioridade */
        /* Mantemos o resto do seu estilo (padding-left: 60px) aqui... */
        padding: 8px 15px 8px 60px;
    }

    /* 2. Garante que todos os links de PRIMEIRO NÍVEL TENHAM a borda. */
    /* Isso inclui o link que vem logo após um submenu, resolvendo o problema. */
    .nav-menu.pop-down > li > a {
        border-bottom: 1px solid #eee; /* Linha divisória */
    }

    #li-home, #li-downloads, #li-login {
        border-top: 1px solid #eee; /* Linha divisória */
    }
    .menu-toggle {
        display: block; /* Mostra o botão de hambúrguer em telas pequenas */
    }

    .content {
        padding-top: 60px; /* Ajusta o padding do conteúdo principal */
    }

    .table-section {
        padding: 0 10px; /* Adiciona padding lateral para a tabela em telas pequenas */
    }

    table {
        width: 100%; /* Tabela ocupa 100% da largura em celular */
    }

    td {
        padding: 10px; /* Reduz o padding das células */
    }

    .content h1 {
        font-size: 1.0em; /* Reduz o tamanho do título para celular */
        margin: 15px;
    }

    .whatsapp-float {
        bottom: 15px;
        right: 15px;
        z-index: 1001; /* Garante que o whatsapp fique acima do menu pop-down */
    }
    .whatsapp-float img {
        width: 50px; /* Ícone menor em celular */
    }
}