@charset "UTF-8";

html, body{
  height: 100%;
  width: 100%;
  --metropolis:Metropolis-Regular-1,Metropolis-Regular-2, arial;
  --metropolisbold:Metropolis-Bold-1,Metropolis-Bold-2, arial;
  --guinda:#be1c47;
  --azul:#2f7287;
  --naranja:#ee944a;
  --verde:#8a8a50;
  --gris:#363636;
  --gris2:#e6e6e6;
  --gris3:#575757;
}

button{
  outline: none !important;
}


a, button{
  transition: 0.2s linear all;
  -webkit-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -ms-transition: 0.2s linear all;
}

a:hover{
  text-decoration: none;
  /*transform: translateY(3px);*/
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--metropolis);
}

h1, h2, h3, h4, h5, h6, a, p {
  font-weight: normal;
  line-height: 1;
  padding: 0;
  margin: 0;
}


p, li, a{
  font-family: var(--metropolis);
  font-size: 17px;
  line-height: 21px;
}

figure{
  margin: 0 !important;
}

strong{
  font-family: var(--metropolisbold);
}

.bg-azul{
  background: var(--azul);
}

.bg-naranja{
  background: var(--naranja);
}

.bg-verde{
  background: var(--verde);
}

.carousel-control-prev i, .carousel-control-next i{
  font-size: 40px;
  color: var(--gris);
}

/*:::::: MAQUETADO :::::::*/



.encabezado{
  position: fixed;
  top: 0;
  z-index: 4;
  background: white;
  padding: 20px 0 20px 40px;
}

.menu{
  margin-top: 15px;
}

.menu li a{
  color: #606060;
  font-size: 15px;
  border-bottom: 2px solid white;
}

.menu li a.redes{
  background: var(--guinda);
  color: white;
  font-size: 16px;
  border-bottom: none;
}

.instagram{
  margin-left: 10px;
  border-radius:0 0 0 25px;
}

.menu li a.redes i{
  width: 20px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  background: white;
  color: var(--guinda);
  padding-top: 2px;
  transition: 0.2s linear all;
  -webkit-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -ms-transition: 0.2s linear all;
}

.menu li a:hover{
  color: var(--guinda);
  border-bottom: 2px solid var(--guinda);
}

.menu li a.btn-proyectos:hover{
  color: var(--azul);
  border-bottom: 2px solid var(--azul);
}

.menu li a.btn-comercial:hover{
  color: var(--naranja);
  border-bottom: 2px solid var(--naranja);
}

.menu li a.btn-inmobiliaria:hover{
  color: var(--verde);
  border-bottom: 2px solid var(--verde);
}

.menu li a.redes:hover{
  border-bottom: none;
}

.menu li a.redes:hover i{
  transform: scale(1.2);
}

.navbar-light .navbar-toggler{
  background: var(--guinda);
  border-radius: 0;
  text-align: center;
  color: #fff !important;
  border: 1px solid #fff !important;
  width: 45px;
  height: 45px;
}

.menu-resp{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 20px;
  z-index: 10;
}

.menu-resp ul{
  background: rgba(190,28,71,.9);
  padding-top: 10px;
}

.menu-resp li a{
  font-family: var(--stagmedium);
  z-index: 10000;
  color: #fff !important;
}

.carousel-item .bloq{
  background-size: 100% auto !important;
}

.carousel-item .bloq-der img{
  margin-right: 20px;
  margin-bottom: 20px;
}


.indicadores-slider{
  position: absolute;
  display: flex;
  top: 0;
  right: 10px;
  width: 20px;
  height: 100%;
  z-index: 2;
  align-items: center;
}

.carousel-indicators li{
  width: 15px;
  height: 15px;
  border-radius: 1000px;
}


.unid-neg{
  /*padding-top: 80px;
  padding-bottom: 80px;*/
  height: 80%;
  background: var(--gris2);
}

.titulo h1{
  margin-bottom: 50px;
}

.unid-neg .caja a{
  transform: translateY(0px);
}

.unid-neg .caja .bloq{
  overflow: hidden;
  padding: 20px;
  position: relative;
}


.unid-neg .caja .bloq .delay{
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  border: 1px solid gray;
  margin: 0;
  transform: scale(1.3);
  transition: 0.3s linear all;
  -webkit-transition: 0.3s linear all;
  -o-transition: 0.3s linear all;
  -moz-transition: 0.3s linear all;
  -ms-transition: 0.3s linear all;
}

.unid-neg .caja .bloq:hover .delay{
  opacity: 1;
  transform: scale(1);
}


.est-proy{
  padding-bottom: 80px;
  background: var(--gris2);
}

.est-proy .container{
  padding-top: 80px;
  border-top: 1px solid var(--gris3);
}

.est-proy .titulo h1{

}

.est-proy .caja .bloq{
  padding: 20px;
}

.est-proy .caja a .bloq img{
  transition: 0.2s linear all;
  -webkit-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -ms-transition: 0.2s linear all;
}

.est-proy .caja a:hover .bloq img{
  transform: scale(1.05);
}

.est-proy h2{
  font-size: 21px;
  color: white;
  background: black;
  padding: 20px;
}


.n-serv{
  padding-top: 80px;
  padding-bottom: 80px;
  background: url(../imagenes/fondo-n-serv.png) no-repeat bottom center fixed #404040;
  background-size: 100% auto;
}

.n-serv .titulo h1{
  color: white;
}

.n-serv .caja .bloq{
  padding: 20px;
}

.n-serv .caja .bloq img{
  margin-bottom: 30px;
}

.n-serv .caja .bloq h2{
  font-size: 16px;
  line-height: 20px;
  color: white;
  margin-bottom: 30px;
}

.n-serv .caja .bloq h2 strong{
  font-size: 18px;
}

.n-serv .caja .bloq p{
  color: white;
  font-size: 14px;
  line-height: 16px;
}


.n-clientes{
  padding-top: 80px;
  padding-bottom: 80px;
  background: #ededed;
}

.pie{
  padding: 80px 40px;
  background: #363636;
}

.pie .logo{
  padding-bottom: 20px;
  border-bottom: 1px solid white;
  margin-bottom: 20px;
}

.pie p{
  color: white;
  font-size: 12px;
}



.pie  i{
  font-size: 14px;
  width: 18px;
  height: 18px;
  background: white;
  color: #363636;
  text-align: center;
  line-height: 18px;
  margin-right: 10px;
  border-radius: 3px;
  transition: 0.2s linear all;
  -webkit-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -ms-transition: 0.2s linear all;
  margin-bottom: 1rem;
}

.pie p a:hover i{
  transform: scale(1.2);
}

.pie h2{
  color: white;
}



.banner{
  background: url('../imagenes/fondo-estudio.jpg') #353535 no-repeat center center fixed;
  background-size: 100% auto;
  margin-top: 120px;
  padding-top: 10px;
  height: 80%;
}

.banner-estudio{
    background-image: url('../imagenes/fondo-estudio-2.png');
    background-size: auto auto !important !important;
}

.banner h1{
  font-family: var(--metropolisbold);
  color: var(--guinda);
  font-size: 46px;
}

.banner p{
  color: white;
  font-size: 16px;
  line-height: 22px;
  white-space: pre-line;
}

.equipo{
  background: var(--gris2);
  padding-top: 80px;
  padding-bottom: 80px;
}

.equipo h1{
  margin-bottom: 50px;
}

.equipo .bloq{
  position: relative;
  overflow: hidden;
}

.equipo .bloq:hover .delay{
  opacity: 1;
  transform: scale(1);
}

.equipo .bloq .delay{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  opacity: 0;
  background: rgba(190,28,71,.9);
  padding: 10px;
  transform: scale(1.3);
  transition: 0.5s ease all;
  -webkit-transition: 0.5s ease all;
  -o-transition: 0.5s ease all;
  -moz-transition: 0.5s ease all;
  -ms-transition: 0.5s ease all;
}

.equipo .bloq .delay h2, .equipo .bloq .info h2{
  font-family: var(--metropolis);
  font-size: 20px;
  color: white;
}

.equipo .bloq .delay h3, .equipo .bloq .info h3{
  font-family: var(--metropolisbold);
  font-size: 18px;
  color: white;
}

.equipo .bloq .delay p, .equipo .bloq .info p{
  color: white;
  font-size: 14px;
  line-height: 18px;
}


.equipo .bloq .info{
  background: var(--guinda);
  padding: 15px 10px;
}

.grupal .caja{
  padding: 0;
}

.grupal img{
  display: block;
  width: 100%;
  height: auto;
}

.banner-unid-neg{
  padding-top: 90px;
  padding-bottom: 60px;
}

.banner-unid-neg .caja{
  width: 120%;
  background: white;
  border-radius: 0 0 60px 0;
  padding: 50px;
}

.banner-unid-neg .bloq-izq{
  z-index: 2;
}

.banner-unid-neg .bloq-der{
  z-index: 1;
}

.banner-unid-neg .caja p{
  color: var(--gris);
  font-size: 14px;
  line-height: 18px;
}

.banner-unid-neg .bloq-der img{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
}


.banner-des-proy{
  margin-top: 120px;
  padding-top: 40px;
  background: var(--gris2);
}

.banner-des-proy .container{
  max-width: 900px;
  background: white;
  padding: 30px;
}

.banner-des-proy .principal{
  max-width: 120%;
  float: right;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 0 0 60px 0;
}

.banner-des-proy .bloq-izq h2{
  font-size: 14px;
  color: #606060 !important;
}

.banner-des-proy .bloq-izq .simbolos{
  padding: 0;
}

.banner-des-proy .bloq-izq .simbolos img{

}

.banner-des-proy .bloq-der h2{
  font-size: 16px;
  font-family: var(--metropolisbold);
  color: var(--gris);
}

.banner-des-proy .bloq-der h2 span{
  font-family: var(--metropolis);
  color: white;
  background: var(--naranja);
  padding: 10px;
  padding-bottom: 7px;
  margin-right: 10px;
}

.banner-des-proy .bloq-der p{
  color: var(--gris);
  font-size: 14px;
  line-height: 18px;
}

.gallery a img{
  transition: 0.2s linear all;
  -webkit-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -ms-transition: 0.2s linear all;
}

.gallery a:hover img{
  transform: scale(1.2);
}

.fancybox-next span, .fancybox-prev span{
  visibility: visible !important;
}

.banner-contacto{
  background: none;
  background: var(--gris2) !important;
}

.banner-contacto .caja{
  background: var(--guinda);
  padding:70px;
}

.banner-contacto .caja h1{
  width: 100%;
  display: inline-block;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid white;
  margin-bottom: 30px;
  font-family: var(--metropolis);
  font-size: 28px;
}

.banner-contacto .caja .bloq a img{
  transition: 0.2s linear all;
    -webkit-transition: 0.2s linear all;
    -o-transition: 0.2s linear all;
    -moz-transition: 0.2s linear all;
    -ms-transition: 0.2s linear all;
}

.banner-contacto .caja .bloq a img:hover{
  transform: translateY(3px);
  transform: scale(1.08);
}

.banner-contacto .caja .bloq a i{
  color: white;
  font-size: 50px;
  line-height: 100px;
  margin-bottom: -15px;
}

.banner-contacto .caja .bloq a p{
  color: white;
}

.banner-contacto .p2 a p{
  font-size: 18px;
  line-height: 18px;
  margin-top: 45px;
}


.formulario{
  background: var(--gris2) !important;
}

.formulario .caja{
  padding: 15px;
}

.formulario .form-control{
  height: 30px;
}

.formulario textarea{
  height: 80px !important; 
}

.formulario form{
  padding-top: 30px;
}

.formulario input, .formulario textarea{
  margin-bottom: 15px;
  border:none;
  border-bottom: 1px solid var(--gris);
}

.formulario .btn-sent{
  border: none;
  background: var(--guinda);
  font-family: var(--metropolisbold);
  font-size: 20px;
  padding: 10px 30px;
  color: white;
  border-radius: 20px;
}

.formulario h2{
  font-size: 12px;
  padding: 10px;
  background: #757575;
  color: #fff;
  border-radius: 10px;
  float: left;
  margin-right: 5px;
}


.estado{
  margin-top: 100px;
}

.estado ul{
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.estado ul li a{
  display: block;
  font-family: var(--metropolis);
  font-size: 18px;
  color: var(--gris);
  padding:5px 0px;
  padding-right: 20px;
}

.estado ul li a:hover{
  color: var(--guinda);
}


/*:::::: TIPOGRAGÍAS :::::::*/
@font-face{
  font-family:Metropolis-Regular-1;
  src:url(../tipografia/Metropolis-Regular.ttf);
}
@font-face{
  font-family:Metropolis-Regular-2;
  src:url(../tipografia/Metropolis-Regular.eot);
}

@font-face{
  font-family:Metropolis-Bold-1;
  src:url(../tipografia/Metropolis-Bold.ttf);
}
@font-face{
  font-family:Metropolis-Bold-2;
  src:url(../tipografia/Metropolis-Bold.eot);
}









/*:::::: RESPONSIVE :::::::*/


@media screen and (max-width:1400px){
}

@media screen and (max-width:1200px){

  .carousel-item .bloq{
    background-size: auto 100% !important;
  }

  .banner{
    margin-top: 145px;
    background-size: auto;
  }
}

@media screen and (max-width:1034px){
}

@media screen and (max-width:991px){

  .banner{
    padding-top: 40px;
    height: auto;
  }

  .banner img{
    margin-top: 30px;
  }

  .banner-unid-neg .caja{
    width: 100%;
    margin-bottom: -80px;
  }

  .banner-unid-neg .caja img{
    margin-top: 0;
  }

  .banner-des-proy .principal{
    max-width: 100%;
    float: none;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .banner-des-proy .bloq-izq{
    margin-bottom: 20px;
  }

}

@media screen and (max-width:768px){
  .encabezado img{
    max-width: 200px;
  }

  .carousel-item .bloq-izq img{
    margin-top: 120px;
  }

  .carousel-item .bloq-der .col-12{
    background: rgba(0,0,0,.6);
  }

  .carousel-item .bloq-der img{
    margin-right: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .unid-neg, .est-proy, .n-serv{
    padding-bottom: 50px;
  }
  .unid-neg{
    padding-top: 50px;
    padding-bottom: 50px;
    height: auto;
  }

  .unid-neg .caja a, .unid-neg .caja a, .est-proy .caja a, .n-serv .caja a{
    margin-bottom: 30px;
  }

  .n-serv{
    background: url(../imagenes/fondo-n-serv-resp.png) no-repeat top center fixed #404040;
    background-size:  auto 100% ;
  }

  .banner, .banner-des-proy{
    margin-top: 87px;
  }

  .banner p{
    font-size: 14px;
    line-height: 20px;
  }


  .estado ul {
    width: 100%;
  }
  .estado ul li{
    float: left;
  }

  .estado ul li a{
    margin-bottom: 20px;
    font-size: 16px;
  }

  .equipo .bloq{
    padding: 5px 20px;
  }
  
  .equipo .proygal{
      padding:0;
  }
  
  .equipo .proygal .delay{
    width: 60%;
    height: 30%;
    top: auto;
    bottom: 0;
    left:0;
    opacity:1;
    transform: scale(1);
  }

  .equipo .bloq .delay h2, .equipo .bloq .info h2{
    font-size: 18px;
  }
  .equipo .bloq .delay h3, .equipo .bloq .info h3{
    font-size: 16px;
  }
  .equipo .bloq .delay p, .equipo .bloq .info p{
    font-size: 12px;
    line-height: 16px;
  }

  .equipo .bloq .delay br, .equipo .bloq .info br{
    display: none !important;
  }

}

@media screen and (max-width:620px){

}

@media screen and (max-width:576px){
}

@media screen and (max-width:480px){

  .banner-des-proy .bloq-izq .simbolos img{
    width: 15px;
    height: auto;
  }

  .banner-des-proy .bloq-izq .simbolos h2{
    font-size: 12px;
  }

  .banner-contacto .caja h1{
    font-size: 30px;
  }

  .banner-contacto .caja .bloq a{
    width: 110px;
    height: 110px;
  }

  .banner-contacto .caja .bloq a i{
    font-size: 40px;
    line-height: 80px;
    margin-bottom: -10px;
  }

}

@media screen and (max-width:440px){
}

@media screen and (max-height:360px){
}