/* O asterisco escolhe TODOS os elementos da página de uma vez */
* {
    margin: 0; /* tira o espaço de fora (margem) padrão de todos os elementos */
    padding: 0; /* tira o espaço de dentro (preenchimento) padrão de todos os elementos */
    box-sizing: border-box; /* faz a largura e a altura já contarem a borda e o espaço de dentro, para os tamanhos não "estourarem" */
} /* fecha o bloco de regras de todos os elementos */
 
/* Regras para o corpo da página (tudo que aparece na tela) */
body {
    background-color: black; /* deixa o fundo da página preto */
    font-family: Georgia, serif; /* usa a letra Georgia; se o computador não tiver, usa outra letra com serifa */
    color: #e8c978; /* deixa a cor das letras em um dourado claro */
} /* fecha as regras do corpo */
 
/* ---------- topo ---------- */
/* Regras para o cabeçalho do topo (logo, menu, título e foto do prato) */
header {
    display: flex; /* ativa o flexbox, que coloca os itens do topo um ao lado do outro, na horizontal */
    justify-content: space-between; /* espalha os itens: o primeiro na esquerda, o último na direita e o do meio com espaço igual */
    align-items: center; /* alinha os itens no meio, na vertical */
    width: 1000px; /* define a largura do cabeçalho em 1000px */
    margin: 0 auto; /* 0 em cima e embaixo, e "auto" nos lados, o que centraliza na tela */
    height: 220px; /* define a altura do cabeçalho em 220px */
} /* fecha as regras do cabeçalho */
 
/* Regras para o logo do topo */
.logo-topo {
    height: 110px; /* define a altura do logo em 110px (a largura se ajusta sozinha) */
    margin-left: 10px; /* dá 10px de espaço à esquerda do logo */
} /* fecha as regras do logo */
 
/* Regras para a caixa do centro do topo (menu, título e subtítulo) */
.centro-topo {
    text-align: center; /* centraliza os textos dessa caixa */
    width: 420px; /* define a largura da caixa em 420px */
} /* fecha as regras da caixa do centro */
 
/* Regras para a barra de navegação */
nav {
    display: flex; /* ativa o flexbox, para os links ficarem um ao lado do outro */
    justify-content: center; /* centraliza os links na horizontal */
    align-items: center; /* alinha os links no meio, na vertical */
    gap: 25px; /* deixa 25px de espaço entre um link e outro */
    margin-bottom: 25px; /* dá 25px de espaço embaixo da barra de navegação */
} /* fecha as regras da barra de navegação */
 
/* Regras para os links dentro da barra de navegação */
nav a {
    color: white; /* deixa a letra dos links branca */
    text-decoration: none; /* tira o sublinhado dos links */
    font-size: 12px; /* define o tamanho da letra em 12px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) nos links */
} /* fecha as regras dos links do menu */
 
/* Regras para quando o mouse passa por cima de um link do menu */
nav a:hover {
    color: #d4a63c; /* a letra muda para dourado */
} /* fecha as regras do mouse em cima do link */
 
/* Regras para o link RESERVAR, que parece um botão */
.botao-menu {
    border: 1px solid #d4a63c; /* desenha uma borda fina e dourada em volta do link */
    padding: 4px 14px; /* espaço de dentro: 4px em cima e embaixo, 14px nos lados */
    color: #d4a63c; /* deixa a letra dourada */
} /* fecha as regras do botão do menu */
 
/* Regras para o título principal (MENU) */
h1 {
    color: #d4a63c; /* deixa o título dourado */
    font-size: 48px; /* define o tamanho da letra em 48px */
    font-weight: normal; /* tira o negrito que o título tem normalmente */
    letter-spacing: 4px; /* aumenta o espaço entre as letras em 4px */
} /* fecha as regras do título */
 
/* Regras para o subtítulo (a frase embaixo do título) */
.sub {
    color: white; /* deixa a letra branca */
    font-size: 16px; /* define o tamanho da letra em 16px */
    line-height: 22px; /* define a altura de cada linha em 22px */
    margin-top: 10px; /* dá 10px de espaço em cima */
    border-top: 1px solid #d4a63c; /* desenha uma linha fina dourada em cima do subtítulo */
    padding-top: 10px; /* dá 10px de espaço entre a linha e o texto */
} /* fecha as regras do subtítulo */
 
/* Regras para a foto do prato no canto direito do topo */
.prato-topo {
    width: 360px; /* define a largura da foto em 360px */
    height: 220px; /* define a altura da foto em 220px */
    object-fit: cover; /* a foto preenche todo o espaço sem ficar esticada, cortando as sobras */
    border-radius: 50% 0 0 50%; /* arredonda só os cantos da esquerda (em cima e embaixo), deixando a foto com a ponta esquerda redonda */
} /* fecha as regras da foto do prato */
 
/* ---------- caixa principal ---------- */
/* Regras para a caixa principal, onde ficam as listas do cardápio */
.caixa {
    width: 1000px; /* define a largura da caixa em 1000px */
    margin: 20px auto 0 auto; /* 20px em cima, auto nos lados (centraliza), 0 embaixo */
    padding: 30px 40px; /* espaço de dentro: 30px em cima e embaixo, 40px nos lados */
    border: 1px solid #d4a63c; /* desenha uma borda fina e dourada em volta da caixa */
} /* fecha as regras da caixa principal */
 
/* Regras para cada seção do cardápio (entradas, pratos principais, etc.) */
.secao {
    margin-bottom: 40px; /* dá 40px de espaço embaixo de cada seção */
} /* fecha as regras das seções */
 
/* Regras para os subtítulos das seções (ENTRADAS, PRATOS PRINCIPAIS, etc.) */
h3 {
    font-size: 15px; /* define o tamanho da letra em 15px */
    font-weight: normal; /* tira o negrito padrão */
    letter-spacing: 2px; /* aumenta o espaço entre as letras em 2px */
    border-bottom: 1px solid #d4a63c; /* desenha uma linha fina dourada embaixo do subtítulo */
    padding-bottom: 8px; /* dá 8px de espaço entre o texto e a linha */
    margin-bottom: 20px; /* dá 20px de espaço embaixo da linha */
} /* fecha as regras dos subtítulos h3 */
 
/* Regras para os subtítulos pequenos (VINHOS, COQUETÉIS, CAFÉS E CHÁS) */
h4 {
    font-size: 13px; /* define o tamanho da letra em 13px */
    font-weight: normal; /* tira o negrito padrão */
    letter-spacing: 1px; /* aumenta o espaço entre as letras em 1px */
    margin: 12px 0 6px 0; /* espaço de fora: 12px em cima, 0 nos lados e 6px embaixo */
} /* fecha as regras dos subtítulos h4 */
 
/* Regras para a caixa que coloca a lista e as fotos lado a lado */
.linha {
    display: flex; /* ativa o flexbox, para a lista e as fotos ficarem na horizontal */
    justify-content: space-between; /* afasta a lista e as fotos: um em cada ponta */
    gap: 30px; /* deixa pelo menos 30px de espaço entre eles */
} /* fecha as regras da linha */
 
/* listas de pratos */
/* Regras para as listas de pratos */
.lista {
    list-style: none; /* tira as bolinhas padrão da lista */
    width: 45%; /* a lista ocupa 45% da largura da caixa onde está */
} /* fecha as regras da lista */
 
/* Regras para cada item das listas de pratos */
.lista li {
    font-size: 15px; /* define o tamanho da letra em 15px */
    margin-bottom: 18px; /* dá 18px de espaço embaixo de cada item */
    padding-left: 15px; /* dá 15px de espaço de dentro à esquerda, onde vai caber a bolinha */
} /* fecha as regras dos itens */
 
/* Regras para um enfeite colocado ANTES do conteúdo de cada item (o ::before cria um conteúdo extra) */
.lista li::before {
    content: "• "; /* escreve uma bolinha seguida de um espaço antes do texto de cada item */
    margin-left: -15px; /* puxa a bolinha 15px para a esquerda, para ela ficar no espaço do padding */
} /* fecha as regras da bolinha */
 
/* Regras para as descrições (os spans) dentro das listas de pratos */
.lista span {
    font-size: 12px; /* letra menor (12px) para as descrições */
    color: #d8b878; /* cor dourada clara e suave */
} /* fecha as regras das descrições */
 
/* fotos */
/* Regras para a caixa das fotos das entradas */
.fotos-entrada {
    display: flex; /* ativa o flexbox, para as fotos ficarem lado a lado */
    gap: 10px; /* deixa 10px de espaço entre uma foto e outra */
} /* fecha as regras da caixa das fotos */
 
/* Regras para cada foto das entradas */
.fotos-entrada img {
    width: 120px; /* define a largura da foto em 120px */
    height: 170px; /* define a altura da foto em 170px */
    object-fit: cover; /* a foto preenche todo o espaço sem ficar esticada, cortando as sobras */
} /* fecha as regras das fotos das entradas */
 
/* Regras para a foto grande dos pratos principais */
.foto-principal {
    width: 480px; /* define a largura da foto em 480px */
    height: 280px; /* define a altura da foto em 280px */
    object-fit: cover; /* a foto preenche todo o espaço sem ficar esticada, cortando as sobras */
} /* fecha as regras da foto principal */
 
/* ---------- sobremesas e bebidas ---------- */
/* Regras para a caixa que coloca sobremesas e bebidas lado a lado */
.duas-colunas {
    display: flex; /* ativa o flexbox, para as duas seções ficarem na horizontal */
    gap: 40px; /* deixa 40px de espaço entre as duas colunas */
} /* fecha as regras das duas colunas */
 
/* Regras para cada coluna (sobremesas e bebidas) */
.coluna {
    width: 50%; /* cada coluna ocupa 50% da largura */
    margin-bottom: 0; /* tira o espaço de baixo que a class "secao" colocava */
} /* fecha as regras das colunas */
 
/* Regras para a caixa das fotos das sobremesas */
.fotos-sobremesa {
    display: flex; /* ativa o flexbox, para as fotos ficarem lado a lado */
    flex-wrap: wrap; /* deixa as fotos que não couberem passarem para a linha de baixo */
    gap: 6px; /* deixa 6px de espaço entre as fotos */
    width: 180px; /* define a largura da caixa em 180px, o que dá 2 fotos por linha */
} /* fecha as regras da caixa das fotos de sobremesa */
 
/* Regras para cada foto de sobremesa */
.fotos-sobremesa img {
    width: 85px; /* define a largura da foto em 85px */
    height: 90px; /* define a altura da foto em 90px */
    object-fit: cover; /* a foto preenche todo o espaço sem ficar esticada, cortando as sobras */
} /* fecha as regras das fotos de sobremesa */
 
/* Regras para a lista de pratos quando está dentro de uma coluna (sobremesas) */
.coluna .lista {
    width: 55%; /* aqui a lista ocupa 55% da largura (em vez dos 45% de antes) */
} /* fecha as regras da lista dentro da coluna */
 
/* Regras para os itens da lista dentro de uma coluna */
.coluna .lista li {
    font-size: 13px; /* aqui a letra fica menor (13px em vez dos 15px de antes) */
} /* fecha as regras dos itens dentro da coluna */
 
/* Regras para a caixa das bebidas (listas + foto do vinho) */
.bebidas {
    display: flex; /* ativa o flexbox, para as listas e a foto ficarem lado a lado */
    justify-content: space-between; /* afasta as listas e a foto: um em cada ponta */
} /* fecha as regras das bebidas */
 
/* Regras para as listas dentro da caixa das bebidas */
.bebidas ul {
    list-style: none; /* tira as bolinhas padrão da lista */
} /* fecha as regras das listas de bebidas */
 
/* Regras para os itens das listas de bebidas */
.bebidas li {
    font-size: 13px; /* define o tamanho da letra em 13px */
    margin-bottom: 4px; /* dá 4px de espaço embaixo de cada item */
} /* fecha as regras dos itens de bebidas */
 
/* Regras para a foto do vinho */
.foto-vinho {
    height: 150px; /* define a altura da foto em 150px (a largura se ajusta sozinha) */
    align-self: center; /* centraliza a foto na vertical, em relação às listas */
} /* fecha as regras da foto do vinho */
 
/* ---------- rodape ---------- */
/* Regras para o rodapé (a parte de baixo da página) */
footer {
    text-align: center; /* centraliza o conteúdo do rodapé */
    padding: 30px; /* dá 30px de espaço de dentro em todos os lados */
} /* fecha as regras do rodapé */
 
/* Regras para a imagem dentro do rodapé */
footer img {
    height: 60px; /* define a altura do logo em 60px (a largura se ajusta sozinha) */
} /* fecha as regras da imagem do rodapé */