:root {
            --primary: #6F4E37; /* Cor primária */
            --secondary: #C4A484; /* Cor secundária mais clara */
            --light: #F5F5DC; /* Cor de fundo clara */
            --dark: #3E2723; /* Cor de texto escura */
            --accent: #D2B48C; /* Cor de destaque */
        }
        
        * {
            margin: 0; /* Remove margens padrão */
            padding: 0; /* Remove preenchimento padrão */
            box-sizing: border-box; /* Inclui bordas e preenchimento no tamanho total */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte padrão */
        }
        
        body {
            background-color: var(--light); /* Cor de fundo do corpo */
            color: var(--dark); /* Cor do texto */
            line-height: 1.6; /* Altura da linha */
        }
        
        header {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                        url('https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d6770de9-ab39-48fd-93ee-ab5f8728355a.png') center/cover; /* Imagem de fundo com gradiente */
            height: 60vh; /* Altura do cabeçalho */
            display: flex; /* Usando flexbox para centralizar conteúdo */
            flex-direction: column; /* Direção da coluna */
            justify-content: center; /* Centraliza verticalmente */
            align-items: center; /* Centraliza horizontalmente */
            text-align: center; /* Centraliza texto */
            color: white; /* Cor do texto no cabeçalho */
            padding: 0 20px; /* Preenchimento lateral */
        }
        
        header h1 {
            font-size: 3.5rem; /* Tamanho da fonte do título */
            margin-bottom: 20px; /* Margem inferior */
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra do texto */
        }
        
        header p {
            font-size: 1.5rem; /* Tamanho da fonte do slogan */
            max-width: 800px; /* Largura máxima do slogan */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra do texto */
        }
        
        .container {
            max-width: 1200px; /* Largura máxima da seção do cardápio */
            margin: 0 auto; /* Centraliza a seção */
            padding: 40px 20px; /* Preenchimento */
        }
        
        .section-title {
            text-align: center; /* Centraliza o título da seção */
            margin-bottom: 40px; /* Margem inferior */
            font-size: 2.5rem; /* Tamanho da fonte do título da seção */
            color: var(--primary); /* Cor do título da seção */
            position: relative; /* Para posicionar o pseudo-elemento */
        }
        
        .section-title::after {
            content: ''; /* Cria um pseudo-elemento */
            display: block;  /* Exibe como bloco */
            width: 100px;  /* Largura do divisor */
            height: 4px;  /* Altura do divisor */
            background-color: var(--accent); /* Cor do divisor */
            margin: 15px auto; /* Margem automática para centralizar */
        }
        
        .filter-buttons {
            display: flex;  /* Usando flexbox para os botões de filtro */
            justify-content: center; /* Centraliza os botões */
            flex-wrap: wrap; /* Permite quebra de linha */
            gap: 15px; /* Espaçamento entre os botões */
            margin-bottom: 30px; /* Margem inferior */
        }
        
        .filter-btn {
            padding: 10px 25px; /* Preenchimento dos botões */
            background-color: var(--secondary); /* Cor de fundo dos botões */
            color: var(--dark); /* Cor do texto dos botões */
            border: none; /* Remove borda */
            border-radius: 30px; /* Bordas arredondadas */
            font-size: 1.1rem; /* Tamanho da fonte dos botões */
            cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
            transition: all 0.3s ease; /* Transição suave para efeitos */
        }
        
        .filter-btn:hover, .filter-btn.active {
            background-color: var(--primary); /* Cor de fundo ao passar o mouse ou ativo */
            color: white; /* Cor do texto ao passar o mouse ou ativo */
        }
        
        .menu-container {
            display: grid; /* Usando grid para os itens do cardápio */
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Colunas responsivas */
            gap: 30px; /* Espaçamento entre os itens */
        }
        
        .menu-item {
            background-color: white; /* Cor de fundo dos itens */
            border-radius: 10px; /* Bordas arredondadas */
            overflow: hidden; /* Esconde conteúdo que ultrapassa o limite */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra dos itens */
            transition: transform 0.3s ease; /* Transição suave para efeito de hover */
        }
        
        .menu-item:hover {
            transform: translateY(-10px); /* Efeito de elevação ao passar o mouse */
        }
        
        .menu-img {
            height: 250px; /* Altura da imagem do item */
            overflow: hidden; /* Esconde parte da imagem que ultrapassa */
        }
        
        .menu-img img {
            width: 100%; /* Largura total da imagem */
            height: 100%; /* Altura total da imagem */
            object-fit: cover; /* Cobre o espaço disponível */
            transition: transform 0.5s ease; /* Transição suave para efeito de zoom */
        }
        
        .menu-item:hover .menu-img img {
            transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
        }
        
        .menu-content {
            padding: 25px; /* Preenchimento do conteúdo do item */
        }
        
        .menu-title {
            display: flex; /* Usando flexbox para título e preço */
            justify-content: space-between; /* Espaço entre título e preço */
            margin-bottom: 10px; /* Margem inferior */
            font-size: 1.3rem; /* Tamanho da fonte do título */
            color: var(--primary); /* Cor do título */
        }
        
        .menu-price {
            color: var(--accent); /* Cor do preço */
            font-weight: bold; /* Negrito para o preço */
        }
        
        .menu-desc {
            color: #666; /* Cor da descrição */
            margin-bottom: 15px; /* Margem inferior */
        }
        
        .divider {
            width: 100px; /* Largura do divisor */
            height: 1px; /* Altura do divisor */
            background-color: #ddd; /* Cor do divisor */
            margin: 20px 0; /* Margem vertical */
        }
        
        footer {
            background-color: var(--dark); /* Cor de fundo do rodapé */
            color: white; /* Cor do texto no rodapé */
            text-align: center; /* Centraliza texto no rodapé */
            padding: 30px 0; /* Preenchimento vertical */
            margin-top: 50px; /* Margem superior */
        }
        
        .footer-info {
            display: flex; /* Usando flexbox para as seções do rodapé */
            justify-content: space-around; /* Espaço entre as seções */
            flex-wrap: wrap; /* Permite quebra de linha */
            max-width: 1200px; /* Largura máxima do rodapé */
            margin: 0 auto 30px; /* Centraliza e margem inferior */
        }
        
        .footer-section {
            flex: 1; /* Cada seção ocupa espaço igual */
            min-width: 300px; /* Largura mínima das seções */
            margin: 20px; /* Margem entre seções */
        }
        
        .footer-section h3 {
            margin-bottom: 15px; /* Margem inferior do título da seção */
            color: var(--secondary); /* Cor do título da seção */
        }
        
        @media (max-width: 768px) {
            header h1 {
                font-size: 2.5rem; /* Tamanho da fonte do título em telas menores */
            }
            
            header p {
                font-size: 1.1rem; /* Tamanho da fonte do slogan em telas menores */
            }
            
            .menu-container {
                grid-template-columns: 1fr; /* Uma coluna em telas menores */
            }
        }