/* 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: white; /* deixa a cor das letras branca */
} /* fecha as regras do corpo */
 
/* ---------- menu ---------- */
/* Regras para o cabeçalho do topo (onde fica o menu) */
header {
    padding: 20px 40px; /* espaço de dentro: 20px em cima e embaixo, 40px nos lados */
} /* fecha as regras do cabeçalho */
 
/* Regras para a barra de navegação */
nav {
    display: flex; /* ativa o flexbox, que coloca os links um ao lado do outro, na horizontal */
    justify-content: center; /* centraliza os links na horizontal */
    align-items: center; /* alinha os links no meio, na vertical */
    gap: 40px; /* deixa 40px de espaço entre um link e outro */
} /* 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: #b8864b; /* a letra muda para um tom de marrom dourado */
} /* fecha as regras do mouse em cima do link */
 
/* Regras para o link que tem a class "ativo" (a página atual) */
nav .ativo {
    color: #d4a63c; /* deixa o link ativo dourado, para se destacar dos outros */
} /* fecha as regras do link ativo */
 
/* 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: 5px 15px; /* espaço de dentro: 5px em cima e embaixo, 15px nos lados */
    color: #d4a63c; /* deixa a letra dourada */
} /* fecha as regras do botão do menu */
 
/* ---------- conteudo ---------- */
/* Regras para a parte principal da página */
main {
    width: 700px; /* define a largura da parte principal em 700px */
    margin: 0 auto; /* 0 em cima e embaixo, e "auto" nos lados, o que centraliza na tela */
    padding: 20px 0; /* espaço de dentro: 20px em cima e embaixo, 0 nos lados */
} /* fecha as regras da parte principal */
 
/* Regras para a setinha de voltar */
.voltar {
    display: inline-block; /* faz o link se comportar como um bloco que fica na linha, aceitando largura e altura */
    width: 30px; /* define a largura da setinha em 30px */
    height: 30px; /* define a altura da setinha em 30px (igual à largura, para ficar um quadrado) */
    border: 2px solid white; /* desenha uma borda branca de 2px em volta */
    border-radius: 50%; /* arredonda os cantos em 50%, transformando o quadrado em uma bolinha */
    text-align: center; /* centraliza a setinha na horizontal dentro da bolinha */
    line-height: 26px; /* ajusta a altura da linha para a setinha ficar centralizada na vertical */
    text-decoration: none; /* tira o sublinhado padrão dos links */
    color: white; /* deixa a cor da setinha branca */
} /* fecha as regras da setinha */
 
/* Regras para o título principal */
h1 {
    text-align: center; /* centraliza o título */
    font-size: 24px; /* define o tamanho da letra em 24px */
    font-weight: normal; /* tira o negrito que o título tem normalmente */
    margin-bottom: 20px; /* dá 20px de espaço embaixo do título */
} /* fecha as regras do título */
 
/* Regras para a imagem do banner (a faixa grande) */
.banner {
    width: 100%; /* a imagem ocupa 100% da largura da parte principal */
    height: 90px; /* define a altura da imagem em 90px */
    object-fit: cover; /* a imagem preenche todo o espaço sem ficar esticada, cortando as sobras */
    background-color: #3a2a1a; /* cor quando a imagem nao carrega */
    display: block; /* faz a imagem se comportar como um bloco, tirando um pequeno espaço vazio embaixo dela */
} /* fecha as regras do banner */
 
/* Regras para a linha horizontal */
hr {
    border: none; /* tira a borda padrão da linha */
    border-top: 1px solid #aaa; /* desenha só a borda de cima, fina, sólida e cinza-clara, que vira a linha */
    margin: 30px 0; /* dá 30px de espaço em cima e embaixo da linha */
} /* fecha as regras da linha */
 
/* ---------- formulario ---------- */
/* Regras para o formulário */
form {
    width: 480px; /* define a largura do formulário em 480px */
    margin: 0 auto; /* centraliza o formulário (0 em cima e embaixo, auto nos lados) */
} /* fecha as regras do formulário */
 
/* Regras para os textos que explicam cada campo */
label {
    display: block; /* faz o texto ocupar a linha toda, para o campo ficar embaixo dele */
    font-size: 16px; /* define o tamanho da letra em 16px */
    margin-top: 30px; /* dá 30px de espaço em cima */
    margin-bottom: 8px; /* dá 8px de espaço embaixo, entre o texto e o campo */
} /* fecha as regras do label */
 
/* Regras para o asterisco (o span dentro do label) */
label span {
    color: red; /* deixa o asterisco vermelho, para mostrar que o campo é obrigatório */
} /* fecha as regras do asterisco */
 
/* Regras para as caixas de seleção (select) e os campos de digitar (input) ao mesmo tempo */
select, input {
    width: 100%; /* o campo ocupa toda a largura do formulário */
    padding: 6px; /* espaço de dentro de 6px, para o texto não colar na borda */
    font-size: 13px; /* define o tamanho da letra em 13px */
    font-family: Georgia, serif; /* usa a letra Georgia nos campos */
    background-color: #f5efe6; /* fundo bege claro */
    border: 2px solid #8a6234; /* borda de 2px em marrom */
    color: #333; /* cor do texto dentro do campo: cinza-escuro */
} /* fecha as regras dos campos */
 
/* ---------- botao ---------- */
/* Regras para a caixa que guarda o botão */
.area-botao {
    text-align: center; /* centraliza o botão */
    margin-top: 40px; /* dá 40px de espaço em cima */
} /* fecha as regras da caixa do botão */
 
/* Regras para o botão (AVANÇAR ou CONCLUÍDO) */
.botao {
    display: inline-block; /* faz o link se comportar como um bloco que fica na linha, aceitando tamanho e espaços */
    background-color: #b8864b; /* deixa o fundo do botão em marrom dourado */
    color: white; /* deixa a letra do botão branca */
    text-decoration: none; /* tira o sublinhado do link */
    padding: 10px 40px; /* espaço de dentro: 10px em cima e embaixo, 40px nos lados */
    font-size: 14px; /* define o tamanho da letra em 14px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) no botão */
} /* fecha as regras do botão */
 
/* Regras para quando o mouse passa por cima do botão */
.botao:hover {
    background-color: #8a6234; /* o fundo do botão fica mais escuro */
} /* fecha as regras do mouse em cima do botão */
 
/* ---------- 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: 50px; /* define a altura do logo em 50px (a largura se ajusta sozinha) */
} /* fecha as regras da imagem do rodapé */