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


/* Remove as configurações padrão do navegador */
* {
    margin: 0; /* Remove margem padrão */
    padding: 0; /* Remove espaçamento padrão */
    box-sizing: border-box; /* Faz largura e altura incluírem padding e borda */
}


/* Configuração geral do corpo da página */
body {
    font-family: Georgia, 'Times New Roman', serif;
    /* Define a fonte principal */

    background-color: #222222;
    /* Fundo geral escuro */

    color: #ffffff;
    /* Cor padrão dos textos */

    overflow-x: hidden;
    /* Impede que apareça uma barra horizontal */
}


/* ===================================================== */
/* PRIMEIRA PARTE - IMAGEM DE FUNDO                      */
/* ===================================================== */


.hero {
    width: 100%;
    /* Faz a seção ocupar toda a largura */

    min-height: 100vh;
    /* 
       100vh significa 100% da altura da tela.
       Portanto, a primeira parte ocupará a tela inteira.
    */

    position: relative;
    /* Permite posicionar elementos dentro dela */

    background-image: url("../imagens/fundo.jpg");
    /* Coloca a imagem dos alimentos como fundo */

    background-size: cover;
    /*
       Faz a imagem preencher toda a área.
       Ela aumenta ou diminui automaticamente.
    */

    background-position: center;
    /*
       Mantém a parte central da imagem posicionada
       no centro da tela.
    */

    background-repeat: no-repeat;
    /* Impede que a imagem se repita */
}


/* ===================================================== */
/* MENU                                                   */
/* ===================================================== */


.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 */
}

/* ===================================================== */
/* SEGUNDA PARTE                                          */
/* ===================================================== */


.receitas {
    width: 100%;
    /* Ocupa toda a largura */

    min-height: 620px;
    /* Define uma altura mínima */

    background-color: #57220d;
    /*
       Fundo marrom semelhante ao da imagem.
    */

    padding: 60px 5% 80px;
    /*
       Espaçamento:
       60px em cima
       5% nas laterais
       80px embaixo
    */

    text-align: center;
    /* Centraliza os textos */
}


/* ===================================================== */
/* CATEGORIAS                                             */
/* ===================================================== */


.categorias {
    display: flex;
    /* Coloca as categorias lado a lado */

    justify-content: center;
    /* Centraliza as categorias */

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

    gap: 140px;
    /* Espaço entre as categorias */

    margin-bottom: 50px;
    /* Espaço abaixo das categorias */
}


/* Cada categoria */
.categoria {
    display: flex;
    /* Permite organizar os elementos */

    flex-direction: column;
    /* Ícone fica em cima do texto */

    align-items: center;
    /* Centraliza o conteúdo */

    color: #f3e7b5;
    /* Cor creme */

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


/* Ícone */
.categoria-icone {
    font-size: 32px;
    /* Aumenta o tamanho do ícone */

    margin-bottom: 8px;
    /* Espaço entre ícone e texto */
}


/* ===================================================== */
/* TÍTULO                                                  */
/* ===================================================== */


.receitas h1 {
    font-size: 42px;
    /* Tamanho do título */

    font-weight: normal;
    /* Não deixa a fonte em negrito */

    margin-bottom: 45px;
    /* Espaço entre título e imagens */

    color: #ffffff;
    /* Título branco */
}


/* ===================================================== */
/* CONTAINER DAS RECEITAS                                 */
/* ===================================================== */


.receitas-container {
    width: 100%;
    /* Ocupa toda a largura disponível */

    max-width: 1400px;
    /* Impede que fique exageradamente largo */

    margin: 0 auto;
    /* Centraliza o container */

    display: grid;
    /* Ativa o sistema de grid */

    grid-template-columns: repeat(4, 1fr);
    /*
       Cria 4 colunas de mesmo tamanho.
    */

    gap: 80px;
    /* Espaço entre as imagens */

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


/* ===================================================== */
/* CARDS                                                   */
/* ===================================================== */


.card-receita {
    display: flex;
    /* Ativa flexbox */

    justify-content: center;
    /* Centraliza a imagem */

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


/* Imagens das receitas */
.card-receita img {
    width: 180px;
    /* Largura da imagem */

    height: 180px;
    /* Altura da imagem */

    object-fit: cover;
    /*
       Faz a imagem preencher o quadrado
       sem deformar.
    */

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

    display: block;
    /* Evita espaços indesejados */

    transition: 0.3s;
    /* Suaviza o efeito */
}


/* Efeito quando passar o mouse */
.card-receita img:hover {
    transform: scale(1.06);
    /* Aumenta um pouco a imagem */

    cursor: pointer;
    /* Mostra que pode clicar */
}


/* ===================================================== */
/* RODAPÉ                                                  */
/* ===================================================== */


.rodape {
    width: 100%;
    /* Ocupa toda a largura */

    background-color: #f3e7b5;
    /* Fundo creme */

    color: #222222;
    /* Texto escuro */

    padding: 20px 5px;
    /* Espaçamento interno */
}


/* Logo do rodapé */
.rodape-logo img {
    width: 70px;
    /* Tamanho do logo */

    margin-left: 20px;
    /* Distância da esquerda */

    margin-bottom: 10px;
    /* Espaço abaixo */
}


/* Linha e conteúdo do rodapé */
.rodape-conteudo {
    border-top: 1px solid #555;
    /* Cria a linha horizontal */

    padding: 15px 20px 0;
    /* Espaçamento interno */

    display: grid;
    /* Ativa grid */

    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    /*
       Cria cinco colunas.
       A primeira fica maior porque contém
       mais texto.
    */

    gap: 30px;
    /* Espaço entre as colunas */
}


/* Títulos do rodapé */
.coluna h3 {
    font-size: 16px;
    /* Tamanho dos títulos */

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


/* Textos do rodapé */
.coluna p {
    font-size: 14px;
    /* Tamanho do texto */

    line-height: 1.5;
    /* Espaçamento entre as linhas */

    margin-bottom: 3px;
    /* Pequeno espaço entre os textos */
}


/* Copyright */
.copyright {
    font-size: 14px;
    /* Tamanho do copyright */

    line-height: 1.5;
    /* Espaçamento das linhas */
}