/* ===================================================== */
/* CONFIGURAÇÕES GERAIS                                  */
/* ===================================================== */

* {
    margin: 0;
    /* Remove a margem padrão de todas as tags */

    padding: 0;
    /* Remove o espaçamento padrão */

    box-sizing: border-box;
    /* Faz width e height incluírem padding e bordas */

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Define a fonte principal da página */
}


/* ===================================================== */
/* CORPO DA PÁGINA                                       */
/* ===================================================== */

body {
    background-color: #f1e4b3;
    /* Fundo bege claro em toda a tela */

    width: 100%;
    /* Ocupa 100% da largura do navegador */

    min-height: 100vh;
    /* Ocupa pelo menos toda a altura da janela */
}


/* ===================================================== */
/* PÁGINA PRINCIPAL (LARGURA TOTAL)                      */
/* ===================================================== */

.pagina {
    width: 100%;
    /* Ocupa 100% de toda a largura da tela (sem limite max-width) */

    min-height: 100vh;
    /* Ocupa toda a altura da janela */

    background-color: #f1e4b3;
    /* Fundo bege claro */

    display: flex;
    /* Ativa o Flexbox */

    flex-direction: column;
    /* Coloca o cabeçalho e o conteúdo um abaixo do outro */
}


/* ===================================================== */
/* CABEÇALHO (HEADER)                                     */
/* ===================================================== */

.cabecalho {
    background-color: #431609;
    /* Cor marrom escuro do topo */

    padding: 30px 0px;
    /* Espaçamento interno superior e lateral */

    display: flex;
    /* Ativa o Flexbox */

    flex-direction: column;
    /* Alinha o topo e a barra de pesquisa na vertical */

    gap: 15px;
    /* Espaço entre a logo/botões e a barra de pesquisa */

    width: 100%;
    /* Ocupa toda a largura da tela */

}
.menu {
    width: 100%;
    /* O menu ocupa toda a largura */

    height: 100px;
    /* Altura do menu */

    padding: 20px 30px;
    /* Espaçamento interno */

    display: flex;
    /* Coloca os elementos lado a lado */

    align-items: center;
    /* Centraliza verticalmente */

    justify-content: space-between;
    /* Logo fica à esquerda e botões à direita */

    position: absolute;
    /* Coloca o menu sobre a imagem */

    top: 0;
    /* Encosta o menu no topo */

    left: 0;
    /* Encosta o menu no lado esquerdo */

    z-index: 10;
    /* Faz o menu ficar acima da imagem */
}


/* Logo */
.logo img {
    width: 250px;
    /* Largura do logo */

    height: 300px;
    /* Altura do logo */

    object-fit: contain;
    /* Mantém a proporção da imagem */

    border-radius: 20px;
    /* Arredonda os cantos */

    margin-top: -100px;
    /* Move a imagem para cima */

    margin-left: -65px ;
     /* Move a imagem para a esquerda */
    
}

/* FUNDO AMARELO*/
.logo {
    width: 120px;
    height: 80px;

    /* Fundo amarelo/creme atrás da logo */
    background-color: #f3e7b5;

    /* Cantos arredondados */
    border-radius: 25px;
    
    margin-top: 50px;

   
}

/* Área dos botões */
.menu-direita {
    display: flex;
    /* Coloca os botões lado a lado */

    align-items: center;
    /* Centraliza verticalmente */

    gap: 15px;
    /* Espaço entre os botões */
}


/* Botão Comunidade */
.botao-comunidade {
    background-color: #f3e7b5;
    /* Cor creme do botão */

    color: #171717;
    /* Cor do texto */

    text-decoration: none;
    /* Remove o sublinhado */

    padding: 12px 35px;
    /* Espaçamento interno */

    border-radius: 30px;
    /* Deixa o botão arredondado */

    font-size: 16px;
    /* Tamanho da fonte */

    transition: 0.3s;
    /* Suaviza o efeito ao passar o mouse */
}


/* Efeito ao passar o mouse */
.botao-comunidade:hover {
    transform: scale(1.05);
    /* Aumenta levemente o botão */

    background-color: #fff4c7;
    /* Clareia o botão */
}


/* ===================================================== */
/* BOTÃO DO PERFIL / CADASTRO                            */
/* ===================================================== */

.perfil {
    width: 43px;
    height: 43px;

    background-color: #f3e7b5;
    color: #171717;

    text-decoration: none;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    transition: 0.3s;
}


/* Imagem do ícone dentro do círculo */
.perfil img {
    width: 45px;
    height: 45px;

    object-fit: contain;

    display: block;
}


/* Efeito ao passar o mouse */
.perfil:hover {
    transform: scale(1.05);
    background-color: #fff4c7;
}


/* Botão favoritos*/
.favoritos {
    background-color: #f3e7b5;
    /* Cor creme do botão */

    color: #171717;
    /* Cor do texto */

    text-decoration: none;
    /* Remove o sublinhado */

    padding: 12px 35px;
    /* Espaçamento interno */

    border-radius: 30px;
    /* Deixa o botão arredondado */

    font-size: 16px;
    /* Tamanho da fonte */

    transition: 0.3s;
    /* Suaviza o efeito ao passar o mouse */
}

/* Efeito ao passar o mouse */
.favoritos:hover {
    transform: scale(1.05);
    /* Aumenta levemente o botão */

    background-color: #fff4c7;
    /* Clareia o botão */
}


/* BARRA DE PESQUISA */

.caixa-pesquisa {
    background-color: rgba(255, 255, 255, 0.25);
    /* Fundo semitransparente */

    border-radius: 20px;
    /* Arredonda as bordas da barra */

    display: flex;
    /* Ativa o Flexbox */

    align-items: center;
    /* Centraliza o ícone e o campo de texto */

    padding: 10px 18px;
    /* Espaçamento interno */

    gap: 10px;
    /* Espaço entre a lupa e o campo de texto */

    width: 100%;
    /* Ocupa toda a largura disponível */

    margin-top: 100px;
}

.icone-pesquisa {
    color: #ffffff;
    /* Ícone branco */

    font-size: 16px;
    /* Tamanho do ícone de lupa */
}

.caixa-pesquisa input {
    background: transparent;
    /* Fundo transparente */

    border: none;
    /* Remove as bordas do input */

    outline: none;
    /* Remove o contorno ao clicar */

    color: #ffffff;
    /* Cor do texto digitado */

    font-size: 15px;
    /* Tamanho do texto */

    width: 100%;
    /* Expande o input para ocupar todo o espaço */
}

.caixa-pesquisa input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    /* Cor do texto de exemplo (placeholder) */
}


/* ===================================================== */
/* CONTEÚDO PRINCIPAL                                     */
/* ===================================================== */

.conteudo {
    padding: 40px 50px;
    /* Espaçamento interno em relação às bordas da tela */

    display: flex;
    /* Ativa Flexbox */

    flex-direction: column;
    /* Organiza o conteúdo em coluna */

    flex-grow: 1;
    /* Preenche o restante da altura da página */

    width: 100%;
    /* Ocupa toda a largura */
}

h1 {
    color: #1a1a1a;
    /* Cor do título */

    font-size: 36px;
    /* Tamanho da fonte do título */

    font-weight: 600;
    /* Espessura da fonte */

    margin-bottom: 20px;
    /* Margem abaixo do título */
}


/* ===================================================== */
/* CONTAINER MEUS FAVORITOS & HOVER                      */
/* ===================================================== */

.container-favoritos {
    position: relative;
    /* Permite posicionar o menu suspenso em relação a este bloco */

    width: 100%;
    /* Ocupa a largura inteira */

    margin-bottom: 60px;
    /* Margem para distanciar do texto central */
}

.meus-favoritos-trigger {
    display: inline-flex;
    /* Alinha o coração e o texto lado a lado */

    align-items: center;
    /* Centraliza na vertical */

    gap: 10px;
    /* Espaço entre o coração e o texto */

    font-size: 22px;
    /* Tamanho da fonte */

    color: #2b2b2b;
    /* Cor do texto */

    font-weight: 500;
    /* Espessura levemente em negrito */

    cursor: pointer;
    /* Transforma o cursor em mãozinha ao passar por cima */

    padding-bottom: 8px;
    /* Espaçamento inferior */

    transition: color 0.3s;
    /* Transição suave de cor */
}

.meus-favoritos-trigger:hover {
    color: #8c4e3a;
    /* Muda a cor ao passar o mouse */
}

.linha-divisoria {
    width: 100%;
    /* Linha contínua de ponta a ponta */

    height: 1.5px;
    /* Espessura da linha */

    background-color: #555555;
    /* Cor da linha */
}


/* ===================================================== */
/* BARRA DE CATEGORIAS (MENU SUSPENSO HOVER)              */
/* ===================================================== */

.menu-categorias {
    position: absolute;
    /* Posiciona logo abaixo do gatilho */

    top: 100%;
    /* Fica posicionado logo abaixo da linha */

    left: 0;
    /* Alinha à esquerda */

    width: 100%;
    /* Ocupa 100% da largura da tela */

    background-color: #8c4e3a;
    /* Fundo marrom avermelhado */

    border-radius: 30px;
    /* Arredonda as pontas da barra de categorias */

    padding: 16px 30px;
    /* Espaçamento interno */

    display: flex;
    /* Ativa o Flexbox */

    justify-content: space-around;
    /* Distribui as opções igualmente ao longo da barra */

    align-items: center;
    /* Centraliza os itens na vertical */

    margin-top: 15px;
    /* Distância entre a linha e o menu */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Sombra suave abaixo da barra */


    /* CONFIGURAÇÕES DE OCULTAÇÃO PADRÃO */

    opacity: 0;
    /* Torna invisível por padrão */

    visibility: hidden;
    /* Desativa a interação por padrão */

    transform: translateY(-10px);
    /* Desloca ligeiramente para cima */

    transition: all 0.3s ease;
    /* Efeito suave de animação na exibição */
}


/* EXIBIÇÃO NO HOVER */

.container-favoritos:hover .menu-categorias {
    opacity: 1;
    /* Torna o menu 100% visível ao passar o mouse */

    visibility: visible;
    /* Permite clicar nos links */

    transform: translateY(0);
    /* Retorna à posição original deslizando suavemente */
}

.menu-categorias a {
    color: #ffffff;
    /* Cor dos links de categorias */

    text-decoration: none;
    /* Remove o sublinhado padrão dos links */

    font-size: 18px;
    /* Tamanho do texto */

    font-weight: 500;
    /* Deixa o texto com bom contraste */

    transition: opacity 0.2s;
    /* Efeito ao passar o mouse no link */
}

.menu-categorias a:hover {
    opacity: 0.8;
    /* Reduz a opacidade levemente ao passar o mouse no link */
}

.separador {
    color: rgba(255, 255, 255, 0.5);
    /* Cor da linha vertical divisória entre opções */

    font-size: 18px;
    /* Tamanho da barra divisória */
}


/* ===================================================== */
/* ESTADO VAZIO (MENSAGEM CENTRAL)                       */
/* ===================================================== */

.estado-vazio {
    display: flex;
    /* Ativa Flexbox */

    flex-direction: column;
    /* Alinha título e subtítulo na vertical */

    align-items: center;
    /* Centraliza horizontalmente */

    justify-content: center;
    /* Centraliza na tela */

    margin-top: 80px;
    /* Distância da barra superior */

    text-align: center;
    /* Centraliza o alinhamento de texto */
}

.estado-vazio h2 {
    color: #000000;
    /* Cor preta para o título de aviso */

    font-size: 26px;
    /* Tamanho do título */

    font-weight: bold;
    /* Em negrito */

    margin-bottom: 12px;
    /* Espaço abaixo do título */
}

.estado-vazio p {
    color: #333333;
    /* Cor do subtítulo de aviso */

    font-size: 20px;
    /* Tamanho do texto */
}