:root{
	--blanco:#fff;
	--negro:#111111;
	--gris:#343A40;

	--fuentePrincipal: "Raleway", sans-serif;
}

html{
	font-size:62.5%;
	box-sizing: inherit;
}
*, *: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: 1rem 0 4rem 0;
	line-height: 1.2;
}

h1{
	font-size: 4.8rem;
}
h2{
	font-size: 5.8rem;
}
h3{
	font-size: 5rem;
}
a{
	text-decoration: none;
}
img{
	max-width: 100%;
	display:block;
}
.contenedor{ /*Es un standart*/
	max-width: 120rem; /*Tamaño maximo pero si la pantalla es mas angosta:*/
	margin: 0 auto;
	width:90%; /*Ocupa el 90%*/
}
.btn{
	color:var(--gris);
	background-color: var(--blanco);
	border:1px solid var(--gris);
	padding: .5rem 2rem;
	transition: background-color .5s;
}
.btn:hover{
	background-color:var(--gris);
	color: var(--blanco);
}

/*UTILIDADES*/
.text-center{
	text-align: center;
}
.mt-5{
	margin-top:5rem;
}

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

.contenedor-header{
	color: var(--blanco);
	display: flex;
	flex-direction: column;
	height: calc(60rem - 4rem);
	justify-content: space-between;
}
.nombre-sitio{
	font-weight: 300;
	text-align: center;
	font-size: 3rem;
}
@media (min-width:768px){
	.nombre-sitio{
	font-size: 5rem;
}
}
.nombre-sitio span{
	font-weight: 900;
}

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

.contacto{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.navegacion{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 1rem;
}

.navegacion a{
	padding: .5rem;
	transition: background-color 300ms;
	border-radius: 1rem;
	width: 100%;
	text-align: center;
}
@media (min-width:769px){
	.navegacion a{
		padding: 1rem 2rem;
	}
}
@media (min-width:769px){
	.contacto{
		align-items: flex-end;

	}
	.navegacion{
		flex-direction: row;
	}
}
.telefono{
	display: flex;
}
.telefono::before{
	content:'';
	width: 4rem;
	height: 4rem;
	background-image:url(../img/telefono.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 1rem;
}
.header a{
	color:var(--blanco);
	font-size: 2rem;
}


.navegacion a:hover{
	background-color: rgb(255 255 255 / .5);
	border-radius: 1rem;
}

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

	}
}
.slogan h1{
	font-size: 3rem;
	margin:0;
}
@media (min-width:768px){
	.slogan h1{
		font-size: 5rem;
	}
}
.slogan p{
	margin: 0;
	line-height: 1;
}

/*NOSOTROS*/
.nosotros{
	display: grid;
	grid-template-rows: repeat(2,1fr);
	background-image: url(../img/nosotros.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
}
@media (min-width:992px){
	.nosotros{
		grid-template-columns: repeat(3,1fr);
	}
}

.contenido-nosotros{
	background-color: var(--blanco);
	padding: 5rem;
}
@media (min-width:992px){
	.contenido-nosotros{
		grid-column:2/4;
	}
}
.contenido-nosotros h2,
.contenido-nosotros p{
	margin-bottom: 1rem;
}

/* MODELOS */

.modelo{
	display:grid;
	grid-template-rows: repeat(2, 1fr);
	background-repeat: no-repeat;
	background-position: bottom center;
	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: var(--blanco);
}


.basico{
	background-image:url(../img/modelo_basico.jpg);
}
@media(min-width: 768px){
	.basico .contenido-modelo{
		grid-row: 2/3;
		padding: 2rem 2rem 2rem 0;
	}
	.basico{
		background-position: top right;
	}
}
.premium{
	background-image:url(../img/modelo_premier.jpg);
}
@media(min-width: 768px){
	.premium .contenido-modelo{
		grid-column: 2/3;
		padding: 2rem 0rem 2rem 2rem;
	}
	.premium{
		background-position: top left;
	}
}
.elite{
	background-image:url(../img/modelo_elite.jpg);
}
@media(min-width: 768px){
	.elite .contenido-modelo{
		grid-row: 1/2;
		padding: 2rem 2rem 2rem 0;
	}
	.elite{
		background-position: bottom right;
	}
}

/* GALERIA */

.galeria{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}
.galeria img{
	object-fit: cover;
	height: 100%;
}
.galeria .imagen:nth-child(2){
	grid-column: 2/3;
	grid-row: 1/3;
}
.galeria .imagen:nth-child(6){
	grid-row: 2/4;
}
.galeria .imagen:nth-child(3){
	grid-column: 2/3;
	grid-row: 3/5;
}

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

/* FOOTER */

.footer{
	height: 40rem;
	background-image: url(../img/footer_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--blanco);
}

.footer a{
	color:var(--blanco);
	font-size: 2rem;
}

.copyright{
	background-color: var(--negro);
	text-align: center;
	margin: 5rem 0 0 0;
	font-size: 2rem;
	padding: 1rem;
}