:root{
    --fuentePrincipal: 'Rubik', sans-serif;
    --blanco:#fff;
    --negro:#111111;
    --gris:#343a40;
}


html{
    font-size: 62.5%;
    box-sizing: border-box;
}

*,*:before,*:after{box-sizing: inherit;}

body{
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.8;
}

h1,h2,h3{font-weight: 900;
    margin: 2rem 1rem 4rem 1rem;
}

h1{font-size: 4.8rem;} 
h2{font-size: 5.8rem;
text-align: center;}
h3{font-size: 5rem;}

a{text-decoration: none;}

img{max-width: 100%;
display: block;}


.contenedor{
    max-width: 120rem;
    margin: 0 auto;
    width: 90%;

}

.btn{
    color:burlywood;
    background-color: blueviolet;
    border: 3px solid var(--gris);
    padding: .5rem 2rem;
    transition: background-color .3s;
}

.btn:hover{

    background-color:brown;
    color: chartreuse;
}

.text-center{text-align: center;}

.mt-5{margin-top: 5rem;}

/*header*/

.header{
    min-height: 60rem;
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    padding: 5rem 1rem;
}

@media (min-width:768px){
    .header{padding: 2rem 0;}
}

.contenido-header{
    display: flex;
    flex-direction: column;
    height: calc(60rem - 4rem);
    justify-content: space-between;
    color: var(--blanco);
}
.nombre-sitio{
    font-weight: 400;
    text-align: center;
    font-size: 3rem;
}

@media (min-width:768px){
    .nombre-sitio{
        font-size: 5rem;
    }
}

.nombre-sitio span{font-weight: 900;
color: chartreuse;}

@media(min-width:768px){
    .barra{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

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

@media(min-width:768px){
    .contacto{
        align-items: flex-end;
    }
}

.header a {
    color: #fff;
    font-size: 2rem;
}

.navegacion{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    gap: 2rem;
}

@media(min-width:768px){
    .navegacion{
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

.navegacion a:hover{
    background-color: rgb(255 255 255/ .5);
    color:gold;
}

.navegacion a{
    padding: .5rem;
    transition: background-color .3s;
    width: 100%;
    text-align: center;
}

.telefono{display: flex;}

.telefono::before{
    content: "";
    display: block;
   
    width: 4rem;
    height: 4rem;
    background-image:url(../img/telefono.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 1rem;
}

@media(min-width:768px){
    .naveacion a{
        padding: 1rem 2rem;
    }
}

.slogan {text-align: center;}

.slogan h1{
    font-size: 3rem;
    margin: 0;
}

@media(min-width:768px){
       .slogan{
        text-align: right;
       }
}

@media(min-width:768px){
    .slogan h1{
        font-size: 5rem;
    }

}

.slogan p{
    margin: 0;
    line-height: 1;
}

/*sobre nosotros*/

.nosotros{
    display:grid;
    grid-template-rows:repeat(2,1fr);
    background-image: url(../img/nosotros.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
}

@media (min-width:768px){
    .nosotros{
        grid-template-columns: repeat(3,1fr);
    }
}

.contenido-nosotros{
    background-color: var(--blanco);
    padding: 5rem;
}

.contenido-nosotros h2,
.contenido-nosotros p{
    margin-bottom: 1rem;}

@media (min-width:768px){
    .contenido-nosotros{
        grid-column: 2/4;
    }
}

/*modelos de cabañas*/


.modelo{
    display: grid;
    grid-template-rows: repeat(2,1fr);
    margin-bottom: 5rem;
}

.modelo:last-of-type{margin-bottom: 0;}

@media(min-width:768px){
    .modelo{
        grid-template-columns:repeat(2,1fr);
    }
}

.contenido-modelo{
    padding: 5rem;
    background-color: aliceblue;
}

.basico{
    background-image: url(../img/modelo_basico.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
}
@media(min-width:768px){
    .basico{
        background-position: top-right;
           }

           .basico .contenido-modelo{
            grid-row: 2/3;
            padding: 2rem 2rem 2rem 0;
           }
}

.premier{
    background-image: url(../img/modelo_premier.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
}

@media(min-width:768px){
    .premier{
        background-position: top left;

    }

    .premier .contenido-modelo{
        grid-column: 2/3;
        padding: 2rem;
    }
}

.elite{
    background-image: url(../img/modelo_elite.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
}

@media(min-width:768px){
    .elite{
        background-position: top right;
    }

    .elite .contenido-modelo{
        padding: 2rem 2rem 2rem 0;
    }
}

/*galeria*/

.galeria{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}

.galeria img{
    object-fit: cover;
    height: 100%;
}

@media(min-width:768px){
    .galeria{
        grid-template-columns: repeat(3,1fr);
    }

}



.galeria .imagen:nth-child(2){
    grid-column: 2/3;
    grid-row: 1/3;
}
@media(min-width:768px){
    
.galeria .imagen:nth-child(2){
    grid-column: 1/2;
}
    
}

.galeria .imagen:nth-child(3){
    grid-row: 3/5;
    grid-column: 2/3;
}
@media(min-width:768px){
    .galeria .imagen:nth-child(3){
        grid-column: 2/3;
        grid-row: 1/2;
    }
}

.galeria .imagen:nth-child(6){
    grid-row: 2/4;
}
@media(min-width:768px){
    .galeria .imagen:nth-child(6){
        grid-column: 3/4;
        grid-row: 1/3;
    }
    
}


/*footer*/

.footer{
    height: 50rem;
    background-image: url(../img/footer_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: antiquewhite;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.footer a{
    color: #fff;
    font-size: 2rem;
}

.copyright{
    background-color: coral;
    text-align: center;
    margin: 0;
    font-size: 2rem;
    padding: 1rem;
    color: #343a40;
}