/* GENERALES */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500&family=Roboto:ital,wght@0,300;0,400;0,500;0,900;1,300;1,400;1,500;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500&display=swap');
/* font-family: "Roboto", sans-serif; */
/* font-family: "M PLUS Rounded 1c", sans-serif; */

body *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* ------------------------------------------------------MENU Y ASIDE-------------------------------------------------------------------- */

.nav-item.active .nav-link::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px; 
    height: 30px;
    background-image: url('https://138.186.9.47/~knok/wp-content/uploads/2024/06/menu-content.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
}

.menu_mobile{
    display: none;
}
#header{		
    position: fixed;
    right: 0;
    z-index: 2;
}
#header nav{
    background: rgba(0, 0, 0, 0.4);
    height: 70px;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0 80px;
}

#header nav ul li a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-size: 12px;
}
#header nav ul li{
    position: relative;
}

#header nav #drop-down{
    background: transparent !important;
    border: none;
}

#header nav #drop-down .dropdown-item{
    background: rgba(87, 39, 23, 0.9);
    margin: 1px 0;
    border: none;
}

#header nav #drop-down .dropdown-item:hover{
    background: rgba(87, 39, 23, 0.9);
}


#aside {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 16.7%;
    z-index: 3;
    /* overflow: hidden;
    overflow-y: scroll; */
    background: #313336;
}

.cuerpo {
    height: 100vh; 
}
#scroll-cuerpo{
    position: absolute;
    right: 0;
}


#aside_content {
    /* max-width: 75%; */
    /* padding: 20px 0; */
    /* padding: 20px 25px; */
    max-width: 65%;
    padding: 15px 0;
    margin: auto;
}

#aside_content .formulario-info{
    display: flex;
    flex-direction: column;
    align-items: self-start;
}


aside .logo-aside #logo_img{
	max-width: 80%;
}

#aside .locales-font, .medida-font, .parking-font, .ubi-font{
    font-weight: bold;
}

#aside .sidebar-contacto a{
    text-decoration: none;
    color: #9ca1a8;
    margin-left: 20px;
}

aside .locales-font, .parking-font, .ubi-font{
    font-size: 16px;
}
#aside .aside .sidebar-indicadores p{
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 100;
    width: 105px;
    /* margin-left: 20px; */
    /* width: 100px; */
}

#aside::-webkit-scrollbar {
    display: none;
}

#aside .aside #aside_content .sidebar-indicadores{
    padding-bottom: 10%;
}

/* ---------------------------------------------------------------PAGINA DE INICIO---------------------------------------------------------- */
#swiperInicio {
    width: 100%;
    height: 55%;
}

#swiperInicio .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperInicio .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

#sombra{
    -webkit-box-shadow: inset -200px 0px 300px -20px rgba(0,0,0,0.75);
    -moz-box-shadow: inset -200px 0px 300px -20px rgba(0,0,0,0.75);
    box-shadow: inset -200px 0px 300px -20px rgba(0,0,0,0.75);

    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

#swiperInicio .swiper-slide .texto_hero {
    width: 80%;
    height: 80%;
    position: absolute;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    justify-content: end;
    align-items: flex-end;
    z-index: 2;
}

#swiperInicio .swiper-slide .texto_hero h1{
    font-size: 4rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
}

#swiperInicio .swiper-slide .texto_hero p{
    font-size: 1.3rem;
    font-weight: 500;
    font-family: "M PLUS Rounded 1c", sans-serif;
}


#swiperClientes {
    width: 70%;
}

#swiperClientes .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperClientes .swiper-slide img {
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
}

#banner_bajada_inicio{
    background: #313336;
}

#banner_bajada_inicio .titulo-marcas h5{
    color: #0290b7;
    font-family: "Roboto", sans-serif;

}

#video_inicio_banner{
    width: 100%;
    height: 100%;
}

#proximamente_proyectos .contenedor-proximo{
    position: relative;
    border-radius: 0px 0px 70px 0px;
    background: #313336;
    height: 100vh;
}

#proximamente_proyectos .contenedor-proximo img{
    position: absolute;
    right: -15px;
    width: 65%;
    top: -20px;
}

/* #proximamente_proyectos .contenedor-proximo h2{
    transform: rotate(-90deg);
    transform-origin: right;
    position: absolute;
} */

#proximamente_proyectos .contenedor-proximo-mobile{
    background: #313336;
    border-radius: 0px 0px 70px 0px;
    position: relative;
    color: #fff;
    text-align: center;
}

#proximamente_proyectos .prueba_proximo #tarjetas-proyectos .tarjetainicio .direccion {
    position: relative;
} 

#proximamente_proyectos .prueba_proximo #tarjetas-proyectos .tarjetainicio .direccion img{
    position: absolute;
    left: -22px;
} 

#proximamente_proyectos .prueba_proximo #tarjetas-proyectos .tarjetainicio .direccion p{
    color: #0290b7;
} 

#proximamente_proyectos .prueba_proximo #tarjetas-proyectos .tarjetainicio p .font-locales{
    font-size: 21px;
    font-weight: 400;
} 

/* CLASE QUE AGREGAMOS EN EL JS PARA EL GRIS DE LOS WRAP NO SELECCIONADOS */
.grayscale { 
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.75;
    transition: 0.5s ease;
}
.wrap{
    cursor: pointer;
}


/* ---------------------------------------------------------------PAGINA DE NOSOTROS---------------------------------------------------------- */

#swiperNosotros {
    width: 100%;
    height: 55%;
    /* height: 80%; */
}

#swiperNosotros .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperNosotros .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

#swiperClientesN .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperClientesN .swiper-slide img {
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.bajada-nosotros .contenedor-nosotros{
    position: relative; 
    border-radius: 0px 0px 60px 0px; 
    height: 90vh; 
    width: 12%;
    background: #313336;
}

.bajada-nosotros .contenedor-nosotros h2{
    color: #868789;
    font-family: "M PLUS Rounded 1c", sans-serif;
}

.bajada-nosotros .contenedor-nosotros img{
    position: absolute;
    right: -30px;
    height: -webkit-fill-available;
}

.bajada-nosotros .titulo-marcas-nosotros h5{
    color: #e76e47;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
}

.bajada-nosotros .titulo-marcas-nosotros h5{
    color: #e76e47;
    font-family: "Roboto", sans-serif;
}

#cuerponosotros p{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: #868789;
}

/* -------------------------------------------- PROYECTOS ------------------------------------------------------------------------  */

#swiperProyecto {
    width: 100%;
    height: 80vh;
}

#swiperProyecto .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperProyecto .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

#cuerpoproyecto .contenedor-proyectos{
    position: relative; 
    border-radius: 0px 0px 40px 0px; 
    height: auto; 
    background: #313336;
}

#cuerpoproyecto {
    font-family: "M PLUS Rounded 1c", sans-serif;
}

#cuerpoproyecto p{
    /* font-weight: 600; */
    font-weight: 500;
    color: #7b7f83;
}

#info-cercanias p{
    font-weight: 500;
}

#swiperProyectos {
    width: 100%;
    height: 5rem;
    margin: 1rem;
    margin-top: 3rem;
  }

#swiperProyectos  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

#swiperProyectos  .swiper-slide img {
    display: block;
    width: 70%;
    height: 100%;
    object-fit: contain;
  }


#bajadaproyecto .img-proyecto img{
    width: 85%;
}

#bajadaproyecto .texto-bajada-proyecto{
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
}

#bajadaproyecto .texto-bajada-proyecto p{
    font-weight: 500;
}

#clientesproyectos h5{
    font-family: "Roboto", sans-serif;
}

#video_inicio_banner_mobile{
    display: none;
}


#video_header_strip_mobile{
    display: none;
}

#map-box-proyectos{
    width: 100%; 
    height: 100vh; 
    position: relative;
}
.marker {
    background-image: url('https://knok.betatester.cl/wp-content/uploads/2024/05/logo-mapbox-marbella.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 160px;
    height: 80px;
    cursor: pointer;
}
.mapboxgl-popup {
    max-width: 200px;
}

.mapboxgl-popup-content {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}
#map .mapboxgl-ctrl-logo{
    display: none;
}
#rrss-proyecto {
    position: absolute;
    width: 120px;
    left: 60px;
    bottom: 20px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
#map .mapboxgl-ctrl-attrib-inner{
    display: none;
}

/* ---------------------------------------------- ARRIENDA CON NOSOTROS ESTILOS ---------------------------------------------------------------------- */

#swiperProyectoArrienda {
    width: 100%;
    height: 70vh;
}

#swiperProyectoArrienda .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperProyectoArrienda .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

#logosArriendo{
    width: 100%;
    height: 100%;
  }

#logosArriendo  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

#logosArriendo  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


/* CSS Formulario */
#knok-form-contacto {
    width: 100%;
}
#knok-form-contacto .wpcf7-form-control-wrap {
    width: 100%;
}
#knok-form-contacto .form-separation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#knok-form-contacto .form-separation .wpcf7-form-control-wrap {
    width: 49%;
}

#clientesarrienda .texto-arrienda p{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    color: #868789;
}



/* ---------------------------------------------- INVERSIONISTAS ESTILOS ---------------------------------------------------------------------- */

#swiperProyectoInversionista {
    width: 100%;
    height: 70vh;
}

#swiperProyectoInversionista .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#swiperProyectoInversionista .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}


/* CSS Formulario */
#form-inversionistas {
    width: 100%;
}
#form-inversionistas .wpcf7-form-control-wrap {
    width: 100%;
}
#form-inversionistas .form-separation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#form-inversionistas .form-separation .wpcf7-form-control-wrap {
    width: 49%;
}

#cuerpoInversionistas .contenedorinversionistas{
    position: relative;
    border-radius: 0px 0px 60px 0px;
    background: #313336;
}

#cuerpoInversionistas .contenedorinversionistas h2{
    font-size: 30px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #868789;
    margin: 0;
}

#cuerpoInversionistas .cuerpo-inversionistas {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    color: #868789;
}



/* --------------------------------------------FOOTER------------------------------------------------------------------------  */
#footer{
    background: #000;
}

.legal .legal-footer p{
    font-size: 10px;
    color: #979797;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
}

#footer-img{
    width: 20%;
}

#footer p{
    font-size: 20px;
    font-weight: 500;
    padding-right: 20px;
}

/* -------------------------------------------- ELEMENTOS OCULTOS ------------------------------------------------------------------------    */

#aside .sidebar-contacto{
    display: none;
}
#proximamente_proyectos{
    display: none;
}

.legal .legal-footer{
    display: none;
}