/*Variables*/
:root{
    --blanco: #FFF;
    --negro: #111;
    --gris:#343A40;

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

/*Border sizing y conversión a rems*/
html{
    font-size:62.5%;
    box-sizing: border-box;
}

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

/*Fuentes y medidas*/
body{
    font-family:  var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height:1.8rem;
}

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

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

/*Estilos globales*/
*{
    text-decoration: none;
}
img{
    max-width: 100%;
    display: block;
}

/*utilidades*/
.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}
.btn{
    color: var(--gris);
    background-color: var(--blanco);
    border:1px solid var(--gris);
    padding: .5rem 2rem;
    transition-property: background-color color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}
.btn:hover{
    background-color: var(--gris);
    color: var(--blanco);
}

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


/*Inicio...*/
  /*Header*/

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

  }
  @media(min-width: 768px){ 
    .header{
        padding: 3rem 0;
    }
  }
  .contenido-header{
    display: flex;
    flex-direction: column;
    color: var(--blanco);
    min-height: 60rem;
    justify-content: space-between;
  }
  .contenido-header a{
    color: var(--blanco);
  }
  
  @media(min-width: 900px){ 
    .barra{
        display: flex;
        justify-content: space-between;
      }
  }

  .contacto{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
  }
  .contacto nav{
    display: flex;
    flex-direction:column;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
  }
 .navegacion a{
  padding: 2rem 1rem;
  width: 100%;
  text-align: center;
  transition: background-color .2s ease-in-out;
 }

/*hover de color fondo a nav el slash es la transparencia*/
  .navegacion a:hover{
    background-color: rgb(255 255 255/.5);
    color: var(--negro)
  }

  .contacto a[href="tel:+51945356916"]{
    font-family: var(--fuentePrincipal);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contacto a[href="tel:+51945356916"] img{
   margin-right: 1rem;
  }

@media(min-width: 900px){ 
    .contacto nav{
      flex-direction: row;
    }
    .contacto a[href="tel:+51945356916"]{
      margin-left: auto;
      justify-content: flex-end;
    }
}
.slogan{
    text-align: start;
    padding: 0 2rem;
   
}
.slogan h1{
  line-height: 1.5;
}

.slogan p{
  font-size: 1.8rem;
}
 
  @media(min-width: 900px){ 
    .slogan{
      text-align: end;
    }
  }

  /*nombre del sitio web*/
  .nombre-sitio{
    font-weight: 300;
    font-size: 3rem;
    text-align: center;
  }
  .nombre-sitio span{
   font-weight: 900;
  }

  @media(min-width: 900px){ 
    .logo{
      display: flex;
      align-items: center;
    }
    .nombre-sitio{
        font-size: 5rem;
    }
  }
  
/*BEFORE PARA EL TELEFONO*/
    /*Crea elementos en el HTML*/
    /*Estos elementos no pueden ser seleccionados*/
    /*Before: coloca antes de un elemento*/
    /*After: coloca después de un elemento*/

.telefono{
      display: flex;
}
.telefono::before{
  content:'';  /*Cremos un cuadro contenedor, tiene display inline por defecto*/
  width: 4rem; /*Le aplicamos ancho al contenedor*/
  height: 4rem;/*Le aplicamos alto al contenedor*/
  display: block;/*Asignamos display block para que el width y height hagan efecto*/
  background-image: url(../img/telefono.png);
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 1rem;
}

  /*Nosotros*/
  .nosotros{
    display: grid;
     grid-template-rows: repeat(2,1fr);
    background-image: linear-gradient(to bottom, white  50%,transparent 50% ),
    url(../img/nosotros.jpg);
    background-repeat: no-repeat;
     background-position: center bottom;
     background-size: 100%,90rem;
    
  }  
  .contenido-nosotros{
    padding: 5rem;
    line-height: 1;
 }
 .contenido-nosotros p{
   line-height: 1.5;
 }
  .contenido-nosotros h2{
    margin-bottom: 1rem;
  }
 
 @media(min-width:992px ){ 

  .nosotros{
    grid-template-columns: repeat(3,1fr);
    background-image: linear-gradient(to bottom, transparent  50%,transparent 50% ),
    url(../img/nosotros.jpg);
    background-size: 100%,75rem;
  }
  .contenido-nosotros{
    background-color: var(--blanco);
    grid-column: 2/4;
  }
 }

 /*modelos*/
 .modelos{
   max-width: 110rem;
   margin: 5rem auto;
   padding:2rem;
 }
 .modelos h2,.modelo h3{
  line-height: 1;
 }

 .modelo-texto a{
  border: 1px solid gainsboro;
  padding: .5rem 2rem;
  transition: background-color .3s ease-in-out;
  max-width: 60%;
  text-align: center;
 }

 .modelo-texto a:hover{
  background-color: rgb(240, 234, 234);
 }


.modelo-texto h3{
  line-height: 1;
  font-size: 3.5rem;
  margin: 3rem 0 3rem 0;
}

.modelos h2{
  font-size: 4.5rem;
}
.modelo-texto{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media(min-width: 768px){ 
  .modelos h2{
    font-size: 5rem;
    padding-left: unset;
  }
}

.modelo1,
.modelo2,
.modelo3{
  display:grid;
  grid-template-rows:repeat(2,24rem);
  background-size: 100%, cover;
  background-repeat: no-repeat;
  background-position: center center ;
}
.modelo-texto{
  grid-row: 1/2;
}
.modelo1{
  background-image: linear-gradient(to bottom,  var(--blanco) 50%, transparent 50%),
  url(../img/modelo_basico.jpg);
}
.modelo2{
  background-image: linear-gradient(to bottom,  var(--blanco) 50%, transparent 50%),
  url(../img/modelo_premier.jpg);
}
.modelo3{
  background-image: linear-gradient(to bottom,  var(--blanco) 50%, transparent 50%),
  url(../img/modelo_elite.jpg);
}


@media(min-width: 768px){ 
  .modelo1,
  .modelo2,
  .modelo3{
    grid-template-rows:unset;
    margin-bottom: 5rem;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: repeat(2,1fr);
    background-repeat: no-repeat;
  }
  .modelo1{
    background-image: linear-gradient(to right, transparent 50%, transparent 50%),
    url(../img/modelo_basico.jpg);  
    background-position: right bottom;
    background-size: 100%,70rem 55rem;
   }
   .modelo1 .modelo-texto{
     background-color: var(--blanco);
     grid-row: 2/3;
     padding: 2rem;
   }
  
  
   .modelo2{
    background-image: linear-gradient(to right, transparent 50%, transparent 50%),
    url(../img/modelo_premier.jpg); 
    background-position: left top;
    background-size: 100%,70rem 44rem;
   }
   .modelo2 .modelo-texto{
    background-color: var(--blanco);
    grid-column: 2/3;
    padding: 2rem;
   }
  
   .modelo3{
     background-image: linear-gradient(to right, transparent 50%,transparent 50%),
     url(../img/modelo_elite.jpg);
     background-position: right center;
     background-size: 100%,70rem 60rem;
   }
   .modelo3 .modelo-texto{
    background-color: var(--blanco);
    padding: 2rem;
   }
 
}

/*GALERIA*/
.galeria{
  margin-bottom: 5rem;
  padding: 0 2rem;
}
.listado-galeria{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:2rem;
}
.listado-galeria img{
  height: 100%;
  object-fit: cover;
}

.listado-galeria img:nth-child(2){
 grid-row:1/3;
 grid-column: 2/3;
}
.listado-galeria img:nth-child(6){
  grid-row:2/4;
  grid-column: 1/2; 
 }
 .listado-galeria img:nth-child(3){
  grid-row:3/5;
  grid-column:2/3;
 }

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

 /*Footer*/
  .footer{
    background-image: url('../img/footer_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 60rem;
    background-position: center center;
    padding: 5rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .footer a{
    color: var(--blanco);
  }
 .footer-contenido{
  display: flex;
  flex-direction: column;
  color: var(--blanco);
  justify-content: space-between;
 }
 .footer .slogan{
  padding: 0 0;
 }
 .footer p{
  color: var(--blanco);
  text-align: center;
  margin:1rem 0 0 0;
  background-color: var(--negro);
  padding: 2rem 0;
 }


 @media(min-width: 900px){ 
  .footer{
      justify-content: flex-end;
  }
 }