@charset "UTF-8";

/*--------------------------------------------------------------
>>> TABLA DE CONTENIDO:
----------------------------------------------------------------
## Hero
## Proyectos
## PopUp
## Hero interna
## Ubicacion
## Botonera
## Detalles
## List Check
## Masterplan
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Hero
--------------------------------------------------------------*/
.hero {
    /*background-image: url('../../assets/img/landing_hero.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    background-attachment: fixed;*/
/*    height: 564px;*/
}

.imgHero {
    position: absolute;
    top: 64px;
    right: 0;
    z-index: 10;
    width: 800px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.hero .box-content {
/*    margin-top: 140px;*/
}

.hero .box-content h2 {
    font-family: 'conceptbold';
    font-size: 2rem;
    line-height: 2rem;
}

.hero .box-content h1 {
    font-family: 'akira_expandedsuper_bold';
    font-size: 2rem;
    line-height: 2rem;
}

.hero .box-content h1 .cl-amarillo {
    font-size: 1.5rem;
}

.hero .box-content .cta {
    margin: 48px 0;
}

.hero-item p {
    font-size: 0.875rem;
    font-weight: 700;
}

.material-symbols--circle {
  display: inline-block;
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2367b989' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22'/%3E%3C/svg%3E");
}

.image_hero {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 250px;
}

.hero_content_float {
    width: 100%;
    max-width: 1120px;
    padding: 0 12px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding-top: 49px;
}

.hero_content_float .subTitle {
    font-family: 'stolzlmedium';
    font-size: 0.875rem;
    line-height: 1.063rem;
    text-transform: uppercase;
}

.hero_content_float .subTitle .bold {
    font-family: 'stolzlbold';
}

.hero_content_float .title {
    font-family: 'stolzlmedium';
    font-size: 3rem;
    line-height: 3.5rem;
    color: #fff;
}

.hero_content_float .text_large {
    font-family: 'stolzlmedium';
    font-size: 1.5rem;
    line-height: 2rem;
    color: #000;
}

.hero_content_float .text {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.box_arrow {
    display: flex;
    align-items: flex-start;
}

.box_arrow .arrow {
    width: 140px;
}

.box_arrow .hastag {
    font-family: 'stolzlmedium';
    font-size: 1.563rem;
    line-height: 1;
    text-transform: uppercase;
    color: #67b989;
    display: inline-block;
    margin-left: 40px;
    margin-top: 32px;
}

.box_arrow .hastag .font_regular {
    font-family: 'stolzlregular';
}

/*--------------------------------------------------------------
## Proyectos
--------------------------------------------------------------*/
.tns-nav {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    gap: 20px;
}

.tns-nav button {
    width: 8px;
    height: 12px;
    background-color: #e2e2e2;
    border-radius: 50%;
    border: 0;
    display: inline-block;
}

button.tns-nav-active {
    background-color: #67b989;
}

/*--------------------------------------------------------------
## PopUp
--------------------------------------------------------------*/
.popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1155;
    /* display: none; */
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgb(0 0 0 / 90%);
    transition: all .5s ease;
    visibility: hidden;
    opacity: 0;
/*    transform: translateY(100%);*/
}

.popup.active {
    visibility: visible;
    opacity: 1;
/*    transform: translateY(0%);*/
}

.popup_inner {
    position: relative;
    width: auto;
    max-width: 474px;
    margin: auto;
    /* pointer-events: none; */
    margin-top: 24px;
    margin-bottom: 24px;
    min-height: calc(100vh - 48px);
    display: flex;
}

.popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper_form {
    background-color: #fff;
    border-radius: 20px;
    padding: 80px 32px 64px;
    position: relative;
    margin: 0 12px;
}

.popupClose {
    position: absolute;
    top: -144px;
    right: -48px;
    z-index: 5;
}

.logo_flotante {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffefcc;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.logo_flotante .logo_flotante_inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.logo_flotante .logo_flotante_inner .icon_float_wsp {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
}

.popup_head {}
.popup_head p {
    color: #67b989;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

.btn_popup_form {
    background-color: #34D84F;
    color: #232323;
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 44px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-top: 2rem;
    font-weight: 500;
    border: 0;
}

.btn_popup_form i {
    font-size: 20px;
    margin-left: 10px;
}

.btn_popup_form[disabled] {
    border: 1px solid #c1c1c1;
    background-color: #c1c1c1;
}

@media (max-width: 767px) {
    .popupClose {
        right: 0px;
    }
}

@media (max-width: 575px) {
    .logo_flotante .logo_flotante_inner .icon_float_wsp {
        top: -20px;
        right: -20px;
    }
    .btn_popup_form {
        font-size: 0.875rem;
    }
    .logo_flotante {
        top: -40px;
        width: 80px;
        height: 80px;
    }
    .wrapper_form {
        padding: 80px 32px 48px;
    }
}

/*--------------------------------------------------------------
## Hero interna
--------------------------------------------------------------*/
.text_large {
    font-family: 'stolzlmedium';
    font-size: 1.5rem;
    line-height: 2.125rem;
}

.text_small {
    font-family: 'stolzlregular';
}

.slide_gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
}

.slide_image {
    width: 443px;
    height: 355px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.section.seccion_detalles {
    padding: 120px 0 120px;
}

.seccion_detalles .box_content .text_upper {
    font-family: 'stolzlmedium';
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 2.125rem;
}

.detalle_arrow {
    position: absolute;
    bottom: -90px;
    left: 300px;
    width: 140px;
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 2;
}

.seccion_detalles .tns-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.seccion_detalles .tns-nav button {
    background-color: #282828;
}

.seccion_detalles .tns-nav button.tns-nav-active {
    background-color: #67b989;
}

.image_video {
    border-radius: 16px;
}

/*--------------------------------------------------------------
## Ubicacion
--------------------------------------------------------------*/
.section_02 {
    padding: 90px 0;
}

.seccion_ubicacion .box_content {
    position: absolute;
    top: 70px;
    right: 12px;
    z-index: 2;
    max-width: 320px;
}

.seccion_ubicacion .box_content .title {    
    font-family: 'stolzlmedium';
    color: #282828;
    font-size: 3.375rem;
    line-height: 1;
    margin-bottom: 10px;
}

.seccion_ubicacion .box_content .title.title_shape::after {
    content: '';
    width: 64px;
    height: 4px;
    background-color: #282828;
    display: block;
    margin-top: 20px;
}

.seccion_ubicacion .box_content p {
    font-size: 1.625rem;
    line-height: 2.25rem;
    font-weight: 500;
    color: #282828;
}

.google_maps {
    position: relative;
}

.google_maps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.google_maps iframe {
    border-radius: 20px;
}

/*--------------------------------------------------------------
## Botonera
--------------------------------------------------------------*/
.seccion_botonera {
    padding: 10rem 0;
    position: relative;
    z-index: 5;
}

.seccion_botonera .title {
    font-family: 'stolzlmedium';
    color: #282828;
    font-size: 1rem;
    line-height: 1;
}

.botonera_anclas {}
.botonera_anclas .cta {
    padding: 7px 24px;
    color: #000;
    width: 250px;
    transition: all .5s ease;
    font-size: 0.875rem;
    margin-bottom: 6px;
}

.botonera_anclas .cta:hover {
    background-color: #67b989;
    color: #fff;
}

/*--------------------------------------------------------------
## Detalles
--------------------------------------------------------------*/
.seccion_detalles .box_content .title {
    font-family: 'stolzlmedium';
    color: #282828;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 10px;
}

.seccion_detalles .box_content .title.title_shape::after {
    content: '';
    width: 64px;
    height: 4px;
    background-color: #282828;
    display: block;
    margin-top: 20px;
}

/*--------------------------------------------------------------
## List Check
--------------------------------------------------------------*/
.list_check li::before {
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    vertical-align: -0.125em;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%2367b989' stroke='%2367b989' stroke-miterlimit='10' stroke-width='6' d='M48.3 103.45L12.65 67.99a2.2 2.2 0 0 1 0-3.12l9-9.01c.86-.86 2.25-.86 3.11 0l23.47 23.33c.86.86 2.26.85 3.12-.01l51.86-52.36c.86-.87 2.26-.87 3.13-.01l9.01 9.01c.86.86.86 2.25.01 3.11l-56.5 57.01l.01.01l-7.45 7.49c-.86.86-2.26.86-3.12.01z'/%3E%3C/svg%3E");
    float: left;
}

.list_check li .list_inner {
    padding-left: 40px;
}

.list_check li .list_inner h3 {
    font-family: 'stolzlregular';
    font-size: 1.5rem;
    line-height: 1;
    color: #000;
}

.list_check li .list_inner p {
    font-size: 1.063rem;
}

.seccion_detalles .box_content .text {
    font-size: 1.25rem;
}

/*--------------------------------------------------------------
## Masterplan
--------------------------------------------------------------*/
.seccion_masterplan .box_content {
    position: absolute;
    top: 70px;
    right: 12px;
    z-index: 2;
    max-width: 320px;
}
.seccion_masterplan .box_content .title {    
    font-family: 'stolzlmedium';
    color: #282828;
    font-size: 3.375rem;
    line-height: 1;
    margin-bottom: 10px;
}

.seccion_masterplan .box_content .title.title_shape::after {
    content: '';
    width: 64px;
    height: 4px;
    background-color: #282828;
    display: block;
    margin-top: 20px;
}

.seccion_masterplan .box_content p {
    font-size: 1.625rem;
    line-height: 2.25rem;
    font-weight: 500;
    color: #282828;
}

.google_maps {
    position: relative;
}

.google_maps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.google_maps iframe {
    border-radius: 20px;
}