/* 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: #d9d9d9; /* deixa o fundo da página cinza claro */
    font-family: Georgia, serif; /* usa a letra Georgia; se o computador não tiver, usa outra letra com serifa */
    color: #222; /* deixa a cor das letras em um cinza bem escuro, quase preto */
} /* fecha as regras do corpo */
 
/* ---------- menu ---------- */
/* Regras para o cabeçalho do topo (onde fica o menu) */
header {
    background-color: #1a1a1a; /* fundo cinza muito escuro */
    padding: 15px 40px; /* espaço de dentro: 15px 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: 13px; /* define o tamanho da letra em 13px */
    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 RESERVAR, que parece um botão */
.botao-menu {
    border: 1px solid #b8864b; /* desenha uma borda fina em marrom dourado em volta do link */
    padding: 6px 18px; /* espaço de dentro: 6px em cima e embaixo, 18px nos lados */
    color: #b8864b; /* deixa a letra em marrom dourado */
} /* fecha as regras do botão do menu */
 
/* ---------- conteudo ---------- */
/* Regras para a parte principal da página */
main {
    width: 900px; /* define a largura da parte principal em 900px */
    margin: 0 auto; /* 0 em cima e embaixo, e "auto" nos lados, o que centraliza na tela */
    padding: 30px 0; /* espaço de dentro: 30px 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: 1px solid #333; /* desenha uma borda fina cinza-escura 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: 28px; /* ajusta a altura da linha para a setinha ficar centralizada na vertical */
    text-decoration: none; /* tira o sublinhado padrão dos links */
    color: #333; /* deixa a cor da setinha cinza-escura */
} /* fecha as regras da setinha */
 
/* Regras para a seção de introdução */
.intro {
    text-align: center; /* centraliza todos os textos da introdução */
    margin: 30px 0; /* dá 30px de espaço em cima e embaixo */
} /* fecha as regras da introdução */
 
/* Regras para o título que está dentro da introdução */
.intro h1 {
    color: #b8864b; /* deixa o título em marrom dourado */
    font-size: 26px; /* define o tamanho da letra em 26px */
    font-weight: normal; /* tira o negrito que o título tem normalmente */
    margin-bottom: 15px; /* dá 15px de espaço embaixo do título */
} /* fecha as regras do título da introdução */
 
/* Regras para o parágrafo que está dentro da introdução */
.intro p {
    width: 600px; /* limita a largura do parágrafo em 600px */
    margin: 0 auto; /* centraliza o parágrafo (0 em cima e embaixo, auto nos lados) */
    font-size: 16px; /* define o tamanho da letra em 16px */
    line-height: 24px; /* define a altura de cada linha em 24px, deixando o texto mais arejado */
} /* fecha as regras do parágrafo da introdução */
 
/* Regras para a linha horizontal */
hr {
    border: none; /* tira a borda padrão da linha */
    border-top: 1px solid #555; /* desenha só a borda de cima, fina, sólida e cinza, que vira a linha */
    margin: 40px 0; /* dá 40px de espaço em cima e embaixo da linha */
} /* fecha as regras da linha */
 
/* ---------- salas ---------- */
/* Regras para cada sala (a foto de um lado e o texto do outro) */
.sala {
    display: flex; /* ativa o flexbox, para a foto e o texto ficarem lado a lado */
    gap: 40px; /* deixa 40px de espaço entre a foto e o texto */
    align-items: flex-start; /* alinha a foto e o texto pelo topo, em vez de esticar um deles */
} /* fecha as regras da sala */
 
/* Regras para a caixa da foto (a foto e a lista de comodidades) */
.foto {
    width: 55%; /* ocupa 55% da largura da sala */
} /* fecha as regras da caixa da foto */
 
/* Regras para a imagem dentro da caixa da foto */
.foto img {
    width: 100%; /* a imagem ocupa 100% da largura da caixa */
    height: 280px; /* define a altura da imagem em 280px */
    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 da imagem */
 
/* Regras para a lista de comodidades embaixo da foto */
.foto ul {
    list-style: none; /* tira as bolinhas padrão da lista */
    margin-top: 15px; /* dá 15px de espaço em cima da lista */
} /* fecha as regras da lista */
 
/* Regras para cada item da lista de comodidades */
.foto li {
    font-size: 13px; /* define o tamanho da letra em 13px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) */
    margin-bottom: 8px; /* dá 8px de espaço embaixo de cada item */
} /* fecha as regras dos itens */
 
/* Regras para a caixa do texto da sala */
.texto {
    width: 45%; /* ocupa 45% da largura da sala (55% da foto + 45% do texto = 100%) */
} /* fecha as regras da caixa do texto */
 
/* Regras para o nome da sala */
.texto h2 {
    color: #b8864b; /* deixa o nome em marrom dourado */
    font-size: 22px; /* define o tamanho da letra em 22px */
    font-weight: normal; /* tira o negrito padrão */
    margin-bottom: 12px; /* dá 12px de espaço embaixo do nome */
} /* fecha as regras do nome da sala */
 
/* Regras para os parágrafos dentro da caixa de texto */
.texto p {
    font-size: 15px; /* define o tamanho da letra em 15px */
    line-height: 22px; /* define a altura de cada linha em 22px */
    margin-bottom: 20px; /* dá 20px de espaço embaixo de cada parágrafo */
} /* fecha as regras dos parágrafos */
 
/* Regras para o subtítulo pequeno "IDEAL PARA:" */
.texto h4 {
    font-size: 12px; /* define o tamanho da letra em 12px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) */
    border-top: 1px solid #555; /* desenha uma linha fina cinza em cima do subtítulo */
    padding-top: 10px; /* dá 10px de espaço entre a linha e o texto */
    margin-bottom: 8px; /* dá 8px de espaço embaixo do subtítulo */
} /* fecha as regras do subtítulo */
 
/* Regras para o parágrafo que diz para quem a sala é ideal */
.texto .ideal {
    font-size: 13px; /* letra menor (13px), que ganha da regra de 15px dos parágrafos por ser mais específica */
} /* fecha as regras do parágrafo ideal */
 
/* Regras para o botão RESERVAR */
.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: 8px 25px; /* espaço de dentro: 8px em cima e embaixo, 25px nos lados */
    font-size: 12px; /* define o tamanho da letra em 12px */
    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 {
    background-color: #b8864b; /* deixa o fundo do rodapé em marrom dourado */
    text-align: center; /* centraliza o conteúdo do rodapé */
    padding: 25px; /* dá 25px de espaço de dentro em todos os lados */
    margin-top: 40px; /* dá 40px de espaço em cima do rodapé */
} /* 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é */