:root {
    --branco: white;
    --cinza-claro: #F6F6F6;
    --roxo: #612674;
    --ciano: #51DBD2;
    --cinza: #25303E;
    --preto: black;

    width: 100dvw;
}

html {
    font-family: sans-serif;
    width: 100dvw;
}

.header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo{
    margin-top: 1rem;
}

.navegacao{
    display: block;
    width: 100%;
}

.lista-navegacao{
    list-style-type: none;
    padding: 0;
}

.lista-navegacao li a{
    text-decoration: none;
    background-color: var(--roxo);
    color: var(--branco);
    display: block;
    text-align: center;
    padding: 1.2rem;
}

.lista-navegacao li a:hover{
    background-color: color-mix(in srgb, var(--roxo) 90%, var(--branco) 10%);
}

.play{
    display: none;
}

.descubra{
    margin-top: 1rem;
}

.titulo-descubra{
    font-size: 1.7rem;
    text-align: center;
    padding: 0 1rem;
    color: var(--roxo);
}

.slogan-hotel{
    text-align: center;
    padding: 0 1rem;
    color: color-mix(in srgb, var(--roxo) 90%, var(--branco) 10%);
}

.descubra-mais{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ciano);
    height: 3rem;
    margin: 1rem 15%;
    border-radius: 1rem;
    text-decoration: none;
    text-align: center;
    color: var(--branco);
}

.informacoes{
    margin-top: 2rem;
}

.cartao-icone{
    display: block;
    margin: auto;
    height: 4rem;
    width: 4rem;
    --icon-color: red;
    fill: var(--roxo);
}

.cartao-titulo{
    color: var(--roxo);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.6rem;
}

.cartao-paragrafo{
    text-align: center;
    padding: 0 1.5rem;
}

.sobre-hotel{
    margin: 2rem 2rem 0;
}

.sobre-titulo{
    color: var(--roxo);
    text-transform: uppercase;
    font-weight: 50;
    letter-spacing: .3rem;
}

.sobre-detalhes{
    color: var(--preto);
    text-align: justify;
}

.sobre-imagem{
    width: 100%;
}

.localizacao{
    height: 30rem;
}

.pontos-turisticos{
    width: 90%;
    margin: auto;
}

.pontos-titulo{
    text-align: center;
    color: var(--roxo);
}

.ponto-imagem{
    width: 100%;
}

.ponto-titulo{
    color: var(--roxo);
}

.pontos-cartao:not(:nth-of-type(2)) .ponto-titulo{
    margin-bottom: 0;
}

.ponto-descricao{
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--roxo);
    font-weight: 100;
}

.foot{
    background-color: var(--cinza);
    color: var(--branco);
}

.foot p{
    font-size: 1.3rem;
    text-align: center;
    padding: 2rem;
    margin-bottom: 0;
}

.foot p a{
    color: var(--branco);
}