/* ===================================================== */
/* 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: #3b3b3b;
    /* Fundo externo da página */

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

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


/* ===================================================== */
/* PÁGINA PRINCIPAL                                      */
/* ===================================================== */

.pagina {
    width: 100%;
    /* Agora ocupa toda a largura da tela */

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

    background-color: #431609;
    /* Fundo marrom da página */

    border-radius: 0;
    /* Remove o formato de cartão pequeno */

    padding: 30px 50px 60px;
    /* Espaçamento interno:
       30px em cima
       50px nas laterais
       60px embaixo */

    display: flex;
    /* Ativa o Flexbox */

    flex-direction: column;
    /* Coloca as seções uma abaixo da outra */

    gap: 25px;
    /* Espaço entre as seções */
}


/* ===================================================== */
/* PARTE SUPERIOR                                        */
/* ===================================================== */

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

    min-height: 350px;
    /* Aumenta a área superior */

    background-color: #ffffff;
    /* Fundo branco */

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

    padding: 40px;
    /* Espaçamento interno */

    position: relative;
    /* Permite posicionar a seta */

    display: flex;
    /* Ativa Flexbox */

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

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


/* ===================================================== */
/* BOTÃO VOLTAR                                          */
/* ===================================================== */

.voltar {
    position: absolute;
    /* Permite posicionar a seta livremente */

    top: 25px;
    /* Distância do topo */

    left: 30px;
    /* Distância da esquerda */

    color: #6b1d2f;
    /* Cor vinho */

    font-size: 35px;
    /* Aumenta a seta */

    font-weight: bold;
    /* Deixa a seta mais forte */

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

    transition: 0.3s;
    /* Cria uma animação suave */
}


.voltar:hover {
    transform: translateX(-5px);
    /* Move a seta para a esquerda ao passar o mouse */
}


/* ===================================================== */
/* FOTO PRINCIPAL                                        */
/* ===================================================== */

.prato {
    width: 300px;
    /* Aumenta a largura da foto */

    height: 300px;
    /* Aumenta a altura da foto */

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

    overflow: hidden;
    /* Esconde partes da imagem que ultrapassarem a borda */
}


/* Imagem do prato */

.prato img {
    width: 100%;
    /* Ocupa toda a largura do container */

    height: 100%;
    /* Ocupa toda a altura do container */

    object-fit: cover;
    /* Preenche o espaço sem deformar a imagem */
}


/* ===================================================== */
/* INGREDIENTES E PREPARO                                */
/* ===================================================== */

.ingredientes,
.preparo {
    width: 100%;
    /* Ocupa toda a largura */

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

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

    padding: 30px;
    /* Aumenta o espaçamento interno */
}


/* ===================================================== */
/* TÍTULOS                                                */
/* ===================================================== */

h2 {
    font-size: 28px;
    /* Aumenta o tamanho dos títulos */

    font-weight: 600;
    /* Deixa o título levemente em negrito */

    color: #431609;
    /* Cor marrom */

    margin-bottom: 25px;
    /* Espaço entre o título e os cards */
}


/* ===================================================== */
/* LISTA DE INGREDIENTES                                 */
/* ===================================================== */

.lista-ingredientes {
    display: grid;
    /* Ativa o CSS Grid */

    grid-template-columns: repeat(6, 1fr);
    /* Coloca os 6 ingredientes na mesma linha */

    gap: 20px;
    /* Espaço entre os cards */
}


/* ===================================================== */
/* CARD DE INGREDIENTE                                   */
/* ===================================================== */

.item {
    background-color: #ffffff;
    /* Fundo branco */

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

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

    display: flex;
    /* Ativa Flexbox */

    flex-direction: column;
    /* Imagem em cima e texto embaixo */

    align-items: center;
    /* Centraliza os elementos */

    justify-content: center;
    /* Centraliza verticalmente */

    min-height: 150px;
    /* Aumenta o tamanho dos cards */

    transition: 0.3s;
    /* Cria animação */
}


/* Efeito ao passar o mouse */

.item:hover {
    transform: scale(1.03);
    /* Aumenta levemente o card */

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


/* ===================================================== */
/* IMAGENS DOS INGREDIENTES                              */
/* ===================================================== */

.item img {
    width: 90px;
    /* Aumenta a imagem */

    height: 80px;
    /* Aumenta a altura */

    object-fit: contain;
    /* Mantém a imagem inteira */
}


/* ===================================================== */
/* TEXTO DOS INGREDIENTES                                */
/* ===================================================== */

.item p {
    font-size: 15px;
    /* Aumenta o texto */

    font-weight: bold;
    /* Deixa o texto em negrito */

    color: #431609;
    /* Cor marrom */

    text-align: center;
    /* Centraliza o texto */

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

    margin-top: 10px;
    /* Espaço entre imagem e texto */
}


/* ===================================================== */
/* LISTA DO MODO DE PREPARO                              */
/* ===================================================== */

.lista-preparo {
    display: grid;
    /* Ativa o Grid */

    grid-template-columns: repeat(3, 1fr);
    /* Cria 3 colunas */

    gap: 20px;
    /* Espaço entre os cards */
}


/* ===================================================== */
/* CARD DO MODO DE PREPARO                               */
/* ===================================================== */

.passo {
    background-color: #ffffff;
    /* Fundo branco */

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

    padding: 25px;
    /* Espaçamento interno */

    display: flex;
    /* Ativa Flexbox */

    flex-direction: column;
    /* Imagem em cima e texto embaixo */

    align-items: center;
    /* Centraliza os elementos */

    justify-content: center;
    /* Centraliza verticalmente */

    min-height: 170px;
    /* Aumenta o tamanho do card */

    text-align: center;
    /* Centraliza o texto */

    transition: 0.3s;
    /* Cria animação */
}


/* Efeito do card */

.passo:hover {
    transform: scale(1.03);
    /* Aumenta levemente */
}


/* ===================================================== */
/* IMAGENS DO PREPARO                                    */
/* ===================================================== */

.passo img {
    width: 70px;
    /* Aumenta o ícone */

    height: 60px;
    /* Define a altura */

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

    margin-bottom: 15px;
    /* Espaço entre imagem e texto */
}


/* ===================================================== */
/* TEXTO DO PREPARO                                      */
/* ===================================================== */

.passo p {
    font-size: 16px;
    /* Tamanho do texto */

    color: #431609;
    /* Cor marrom */

    font-weight: 600;
    /* Deixa o texto mais forte */

    line-height: 1.4;
    /* Espaçamento entre linhas */
}