/*BANNER SECCION*/
/*Contenedor de imagen del banner*/
.banner .image{
    padding:                            10px;
    width:                              100%;
    margin-top:                         -105px;
    position:                           relative;
    overflow:                           hidden;
    border-radius:                      40px;
}

/*Background del banner*/
.banner .image .background{ 
    top:                                0;
    left:                               0;
    width:                              100%;
    z-index:                            1;
}

/*Imagen arriba del banner*/
.banner .image .over{
    padding:                            0 10px;
    position:                           absolute;
    top:                                0;
    left:                               0;
    width:                              100%;
    z-index:                            2;
    transform:                          translateY(30%);
    transition:                         all 2s ease;
}

.banner .image .over.active{
    transform:                          translateY(0);
}

.banner .image .birds1,.banner .image .birds2 {
    padding:                            10px;
    position:                           absolute;
    width:                              25%;
    height:                             auto;
    z-index:                            3;
}

.banner .image .birds1 {
    top: 20%;
    left:                               10%;
    transform: scaleX(-1);
}

.banner .image .birds2 {
    top: 10%;
    right:                               10%;
}

.banner .image .logoLifeStyle{
    bottom:                             0;
    left:                               0%;
    position:                           absolute;
    z-index:                            4;
    width:                              280px;
    height:                             280px;
}

.banner .image .logoAlborada{
    top:                                165px;
    left:                               calc(50% - 160px);
    position:                           absolute;
    z-index:                            4;
    width:                              320px;
    height:                             150px;
}

/*Boton brochure del banner*/
.banner .image .brochure{
    bottom:                             70px;
    right:                              0;
    position:                           absolute;
    z-index:                            4;
}

.banner .image .brochure p{
    font-weight:                        500;
}

.banner .image .tag{
    bottom:                             20px;
    right:                              0;
    position:                           absolute;
    z-index:                            4;
    font-size:                          12px;
    color:                              var(--blueColor);
    margin-right:                       30px;
}

.banner .image .tag .circle{
    position:                           relative;
    background-color:                   var(--blueColor);
    width:                              17px;
    height:                             17px;
    border-radius:                      50%;
    margin-left:                        5px;
    border:                             solid 3px #A6ACAD;;
}

.banner .image .tag p{
    position:                           relative;
    background-color:                   #A6ACAD;
    padding:                            5px 10px;
    border-radius:                      10PX;
    margin:                             0;
}

.banner .image .brochure{
    color:                              var(--orangeColor);
    background-color:                   hsla(223, 26%, 27%, 0.7);
    padding:                            20px 25px;
    backdrop-filter:                    blur(10px);
    border-radius:                      20px;
    margin-right:                       30px;
    cursor:                             pointer;
    text-decoration:                    none;
}

.banner .image .brochure p{
    margin:                             0;
    margin-right:                       10px;  
}

.banner .image .brochure .icon{
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    mask-image:                         url("./../images/documentIcon.svg");
    width:                              23px;
    height:                             25px;
    background-color:                   var(--orangeColor);
}

@media screen and (max-width: 767.98px) {
    .banner .col-12 {
        padding:                        0;
    }
    .banner .image {
        padding:                        0;
        aspect-ratio:                   4/5;
        border-radius:                  0;
    }
    .banner .image .background {
        height:                         100%;
        object-fit:                     cover;
    }
    .banner .image .over {
        padding:                        0;
        height:                         100%;
        object-fit:                     cover;
        background-position:            center bottom;
    }
    .banner .image .birds1 {
        top:                            35%;
    }
    .banner .image .birds2 {
        top:                            13%;
    }
    .banner .image .logoAlborada {
        width:                          230px;
        height:                         auto;
        left:                           calc(50% - 115px);
        top:                            150px;
    }
    .banner .image .logoLifeStyle {
        width:                          200px;
        height:                         200px;
    }
    .banner .image .brochure p {
        display:                        none;
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .banner .image .logoAlborada {
        width:                          230px;
        height:                         auto;
        left:                           calc(50% - 115px);
        top:                            150px;
    }
    .banner .image .logoLifeStyle {
        width:                          200px;
        height:                         200px;
    }
}



/*DESCRIPCION SECCION*/
.description{
    margin:                             100px auto;
}

/*Flecha de carousel*/
.description .arrow{
    mask-image:                         url("./../images/hugeArrow.svg");
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    background-color:                   var(--blackColor);
    width:                              290px;
    height:                             100px;
}

/*Triangulo de decoracion*/
.description .triangle{
    mask-image:                         url("./../images/triangleIcon.svg");
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    background-color:                   var(--orangeColor);
    width:                              140px;
    height:                             120px;
    margin-bottom:                      100px;
    margin-left:                        auto;
    margin-right:                       auto;
}

.description .content{
    color:                              #494F89;
}
.description .content p:last-child {
    margin-bottom:                      0;
}
@media screen and (max-width: 991.98px) {
    .description {
        margin:                         60px auto;
    }
    .description .row {
        padding:                        0 23px;
    }
    .description h1 {
        font-size:                      32px;
        letter-spacing:                 .5px;
    }
    .description h1 b {
        font-weight:                    600;
    }
    .description .arrow {
        width:                          208px;
        height:                         70px;
        margin:                         20px 0;
    }
    .description .triangle {
        width:                          95px;
        height:                         80px;
        object-fit:                     contain;
        margin-top:                     40px;
        margin-bottom:                  40px;
    }
}




/*AMENIDADES SECCION*/
.amenidades{
    background-color:                   var(--blueColor);
    padding:                            20px;
    border-radius:                      20px;
    position:                           relative;
    margin-bottom:                      110px;
}

.amenidades .slick-track, .amenidades .slick-list{
    display:                            flex;
}

/*Seccion de contenido de amenidades*/
.amenidades .content{
    display:                            flex;
    align-items:                        center;
}

.amenidades .content .image{
    display:                            flex;
    width:                              60%;
    flex-direction:                     column;
    height:                             100%;
    position:                           relative;
}

.amenidades .content .image .tag{
    position:                           absolute;
    bottom:                             15px;
    left:                               45px;
    border-radius:                      20px;
    padding:                            5px 10px;
    font-size:                          10px;
    background-color:                   rgba(246, 246, 246, 0.65);
    backdrop-filter:                    blur(10px);
}

.amenidades .content .image .tag::after{
    z-index:                            2;
    position:                           absolute;
    content:                            '';
    left:                               -22PX;
    top:                                4px;
    width:                              14px;
    height:                             14px;
    background-color:                   var(--blueColor);
    border-radius:                      50%;
}

.amenidades .content .image .tag::before{
    position:                           absolute;
    content:                            '';
    left:                               -26px;
    top:                                0;
    width:                              22px;
    height:                             22px;
    background-color:                   rgba(246, 246, 246, 0.65);
    z-index:                            1;
    border-radius:                      50%;
}

.amenidades .content .image img{
    border-radius:                      20px;
    width:                              100%;
    height:                             100%;
    object-fit:                         cover;
}

.amenidades .content .text{
    display:                            flex;
    width:                              40%;
    flex-direction:                     column;
    margin:                             auto 20px auto 50px;
    color:                              var(--whiteColor);
}

.amenidades .content .text h2{
    color:                              var(--orangeColor);
}

.amenidades .amenidadesControls {
    position:                           absolute;
    bottom:                             20px;
    right:                              20px;
    width:                              40%;
    margin-left:                        auto;
    display:                            flex;
    gap:                                20px;
    justify-content:                    space-between;
    align-items:                        center;
}
/*Selector de circulo de amenidades*/
.amenidades .amenidadesDots{
    color:                              transparent;
    max-width:                          60%;
}

.amenidades .amenidadesDots ul{
    padding:                            0;
    display:                            flex;
    margin-bottom:                      0;
    flex-wrap:                          wrap;
}

.amenidades .amenidadesDots ul li{
    list-style:                         none;
    margin:                             0 5px;
    width:                              20px;
    height:                             26px;
}

.amenidades .amenidadesDots ul li button{
    border-radius:                      50%;
    width:                              20px;
    height:                             20px;
    background-color:                   transparent;
    color:                              transparent;
    border:                             1px solid white;
    padding:                            0;
}

.amenidades .amenidadesDots ul .slick-active button{
    border:                             1px solid var(--orangeColor);
    background:                         linear-gradient(180deg, #F7A481 0%, #E86E3C 100%);
}

.amenidades .amenidadesArrows{
    max-width:                          40%;
}
.amenidades .amenidadesArrows .slick-prev{
    display:                            none !important;
}

.amenidades .amenidadesArrows .slick-next{
    color:                              transparent;
    background-color:                   transparent;
    border:                             1px solid transparent;
    position:                           relative;
    width:                              125px;
    height:                             70px;
    cursor:                             pointer;
}

.amenidades .amenidadesArrows .slick-next::after{
    position:                           absolute;
    bottom:                             0;
    left:                               0;
    width:                              125px;
    height:                             70px;
    content:                            "";
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    mask-image:                         url("./../images/arrow.svg");
    background-color:                   var(--whiteColor);
}

.amenidades .triangle{
    position:                           absolute;
    top:                                5%;
    right:                              5%;
    width:                              70px;
    height:                             60px;
    mask-image:                         url("./../images/triangleIcon.svg");
    background-color:                   #E48963;
}

@media screen and (max-width: 767.98px) {
    .amenidades {
        position:                       relative;
        padding:                        10px;
        background-image:               url('../images/background-amenidades.svg');
        background-size:                cover;
        background-blend-mode:          multiply;
        margin-bottom:                  80px;
    }
    .amenidades .content {
        flex-direction:                 column;
    }
    .amenidades .content .image {
        width:                          100%;
    }
    .amenidades .content .image img {
        aspect-ratio:                   4/3;
        object-fit:                     cover;
    }
    .amenidades .content .image .tag {
        right:                          15px;
        left:                           unset;
    }
    .amenidades .content .text {
        width:                          100%;
        margin:                         0;
        padding:                        25px;
    }
    .amenidades .content .text h2 {
        font-size:                      32px;
    }
    .amenidades .content .textHeader .icon {
        position:                       relative;
        float:                          right;
        right:                          unset;
        top:                            unset;
        width:                          35px;
        height:                         30px;
        margin-left:                    25px;
    }
    .amenidades .amenidadesControls {
        position:                       relative;
        width:                          100%;
        right:                          0;
        padding:                        0 25px;
    }
    .amenidades .amenidadesArrows {
        position:                       relative;
        float:                          right;
        margin-top:                     30px;
        right:                          0;
    }
    .amenidades .amenidadesDots {
        position:                       relative;
        right:                          unset;
        left:                           0;
        margin-top:                     52px;
        max-width:                      calc(60% - 20px);
    }
    .amenidades .amenidadesDots .slick-dots {
        flex-wrap:                      wrap;
    }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .amenidades .content .text h2 {
        font-size:                      32px;
    }
    .amenidades .content .image img {
        aspect-ratio:                   4/5;
        object-fit:                     cover;
    }
    .amenidades .content .text {
        margin-bottom:                  80px;
    }
    .amenidades .triangle{
        width:                          35px;
        height:                         30px;
    }
}


/*PROPIEDADES SECCION*/
.properties{
    background-color:                   var(--whiteColor);
    padding:                            20px;
    border-radius:                      20px;
    position:                           relative;
    margin-top:                         150px;
    margin-bottom:                      150px;
}

.properties .slick-track, .properties .slick-list{
    display:                            flex;
}

.properties .content{
    display:                            flex;
    align-items:                        center;
}

.properties .content .image{
    display:                            grid;
    width:                              75%;
    height:                             auto;
    grid-template-areas: 
    "a a b"
    "a a c"
    "a a d";     
    position:                           relative;
    gap:                                10px;
}

.properties .content .image .big{
    grid-area:                          a;
    width:                              auto;
    overflow:                           hidden;
    height:                             800px;
    display:                            flex;
    justify-content:                    center;
    align-items:                        center;
    border-radius:                      10px;
    position:                           relative;
}

/*Imagen grande*/
.properties .content .image .big img{
    width:                              100%;
    height:                             100%;
    margin:                             auto;
    object-fit:                         cover;
}

/*magenes chicas*/
.properties .content .image .small1,
.properties .content .image .small2,
.properties .content .image .small3 {
    height:                             100%;
    border-radius:                      10px;
    object-fit:                         cover;
}
.properties .content .image .small1{
    grid-area:                          b;
}
.properties .content .image .small2{
    grid-area:                          c;
}
.properties .content .image .small3{
    grid-area:                          d;
}

.properties .content .image .tag{
    position:                           absolute;
    bottom:                             10px;
    right:                               30px;
    border-radius:                      20px;
    padding:                            5px 10px;
    font-size:                          8px;
    background-color:                   #A6A5A5;
}

.properties .content .image .tag::after{
    z-index:                            2;
    position:                           absolute;
    content:                            '';
    right:                               -22PX;
    top:                                4px;
    width:                              14px;
    height:                             14px;
    background-color:                   var(--blueColor);
    border-radius:                      50%;
}

.properties .content .image .tag::before{
    position:                           absolute;
    content:                            '';
    right:                               -26px;
    top:                                0;
    width:                              22px;
    height:                             22px;
    background-color:                   #A6A5A5;
    z-index:                            1;
    border-radius:                      50%;
}

.properties .content .image img{
    border-radius:                      20px;
    width:                              100%;
    height:                             auto;
}

.properties .content .text{
    display:                            flex;
    width:                              40%;
    flex-direction:                     column;
    margin:                             auto 25px auto 50px;
    color:                              var(--blueColor);
    text-align:                         center;
}

.properties .content .text h1{
    color:                              var(--blueColor);
}

.properties .sketch{
    max-width:                          100%;
    margin-right:                       auto;
    margin-top:                         50px;
    padding:                            8px;
    border:                             2px solid var(--blueColor);
    border-radius:                      20px;
}

/*Cotnenedor de selectores en circulo*/
.properties .propertiesDots{
    position:                           absolute;
    bottom:                             30px;
    left:                               5%;
    color:                              transparent;
}

.properties .propertiesDots ul{
    padding:                            0;
    display:                            flex;
}

.properties .propertiesDots ul li{
    list-style:                         none;
    margin:                             0 5px;
    width:                              20px;
    height:                             26px;
}

.properties .propertiesDots ul li button{
    border-radius:                      50%;
    width:                              20px;
    height:                             20px;
    background-color:                   transparent;
    color:                              transparent;
    border:                             1px solid var(--blueColor);
    padding:                            0;
}

.properties .propertiesDots ul .slick-active button{
    border:                             1px solid var(--blueColor);
    background-color:                   var(--blueColor);
}

.properties .propertiesArrows{
    position:                           absolute;
    bottom:                             30px;
    left:                               25%;
}
.properties .propertiesArrows .slick-prev{
    display:                            none !important;
}

.properties .propertiesArrows .slick-next{
    color:                              transparent;
    background-color:                   transparent;
    border:                             1px solid transparent;
    position:                           relative;
    width:                              105px;
    height:                             60px;
    cursor:                             pointer;
}

.properties .propertiesArrows .slick-next::after{
    position:                           absolute;
    bottom:                             0;
    left:                               0;
    width:                              105px;
    height:                             60px;
    content:                            "";
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    mask-image:                         url("./../images/arrow.svg");
    background-color:                   var(--blueColor);
}

.properties .triangle{
    position:                           absolute;
    top:                                5%;
    left:                               calc(20% - 20px);
    width:                              70px;
    height:                             50px;
    mask-image:                         url("./../images/triangleIcon.svg");
    background-color:                   #E48963;
}

@media screen and (max-width: 767.98px) {
    .properties {
        margin-top:                     80px;
        margin-bottom:                  100px;
        padding-top:                    40px;
        padding-bottom:                 40px;
    }
    .properties .content {
        flex-wrap:                      wrap;
    }
    .properties .carousel {
        padding:                        0 23px;
    }
    .properties .content .text {
        width:                          100%;
        margin:                         0;
    }
    .properties .content .contentTitle {
        font-size:                      48px;
    }
    .properties .content .contentTitle .icon {
        display: none;
        position:                       relative;
        float:                          right;
        right:                          unset;
        left:                           unset;
        top:                            unset;
        width:                          35px;
        height:                         30px;
        margin-left:                    25px;
    }
    .properties .sketch {
        max-width:                      100%;
        width:                          100%;
        margin-top:                     14px;
        margin-bottom:                  30px;
    }
    .properties .content .image {
        display:                        block;
        width:                          100%;
    }
    .properties .content .image .big {
        width:                          100%;
    }
    .properties .content .image .big img {
        aspect-ratio:                   1/1;
        width:                          100%;
        object-fit:                     cover;
    }
    .properties .content .image .small1,
    .properties .content .image .small2,
    .properties .content .image .small3 {
        display:                        none;
    }
    .properties .content .image .tag {
        right:                          unset;
        left:                           15px;
    }
    .properties .propertiesArrows {
        position:                       relative;
        bottom:                         0;
        left:                           0;
        margin:                         30px 23px 0 auto;
        display:                        block;
        width:                          fit-content;
        max-width:                      50%;
    }
    .properties .propertiesDots {
        left:                           40px;
        max-width:                      calc(50% - 40px);
        bottom:                         55px;
    }
    .properties .propertiesDots ul {
        flex-wrap:                      wrap;
        margin-bottom:                  0;
    }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .properties .content .text {
        margin-left:                    20px;
    }
    .properties .content .contentTitle {
        font-size:                      54px;
    }
    .properties .content .image {
        display:                        block;
        width:                          100%;
    }
    .properties .content .image .big {
        width:                          100%;
    }
    .properties .content .image .big img {
        aspect-ratio:                   4/8;
        width:                          100%;
        object-fit:                     cover;
    }
    .properties .content .image .small1,
    .properties .content .image .small2,
    .properties .content .image .small3 {
        display:                        none;
    }
}


/*MODELOS SECCION*/
.models h1{
    font-weight:                        normal;
    color:                              black;
    margin:                             0;
    padding:                            0;
}

/*Seccion de informacion*/
.models .info{
    padding:                            20px;
    position:                           relative;
}

.models .info .element{
    position:                           relative;
}

.models .info .element::after{
    position:                           absolute;
    content:                            '';
    background-color:                   var(--blueColor);
    height:                             80%;
    top:                                10%;
    right:                              calc(0% - 1px);
    width:                              1px;
}

.models .info .element:last-of-type::after{
    display:                            none;
}

.models .info .element h2{
    background:                         linear-gradient(to bottom, #677CB1, #445275); /* Define your gradient */
    -webkit-background-clip:            text; /* Clip the gradient to the text */
    -webkit-text-fill-color:            transparent; /* Make the text transparent so the gradient shows through */
    font-weight:                        bold;
}

.models .info .element span{    
    color:                              var(--blueColor);
}

.models .info::after, .models .info::before{
    position:                           absolute;
    content:                            "";
    height:                             1px;
    width:                              100%;
    background-color:                   var(--blueColor);
    top:                                0;
    left:                               0;
}

.models .info::after{
    bottom:                             1px;
    top:                                unset;
}

/*Lista lateral de cada modelo*/
.models .menuList{
    width:                              fit-content;
    max-width:                          20%;
    margin:                             0 30px 0 0;
}

.models .menuList ul{
    padding:                            0;
}

.models .menuList ul li{
    list-style:                         none;
    color:                              var(--blueColor);
    background-color:                   transparent;
    height:                             fit-content;
    width:                              200px;
    padding:                            15px 35px;
    display:                            flex;
    justify-content:                    start;
    border-radius:                      40px;
    margin:                             10px 0;
    position:                           relative;
    cursor:                             pointer;
    transition:                         all 1s ease;
}

/*Opcion de menu lateral activa*/
.models .menuList ul li.slick-active{
    color:                              var(--orangeColor);
    background-color:                   var(--blueColor);
}

.models .menuList ul li::after{
    position:                           absolute;
    top:                                20px;
    right:                              20px;
    width:                              15px; 
    height:                             15px;
    background-color:                   var(--orangeColor);
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    mask-repeat:                        no-repeat;
    mask-image:                         url("./../images/vectorIcon.svg");
    content:                            '';
    display:                            none;
}

/*Opcion de menu lateral activa*/
.models .menuList ul li.slick-active::after{
    display:                            block;
}

/*Enlista los elementos dle carousel*/
.models .carousel-options{
    min-width:                          1px;
    display:                            flex;
    flex:                               1;
}

.models .carousel-options .sketchRoom{
    width:                              70%;
    padding:                            0 14% 0 10%;
}
.models .carousel-models .slick-slide:nth-child(2) .sketchRoom {
    padding:                            0 4% 0 7%;
}
.models .carousel-models .slick-slide:nth-child(3) .sketchRoom {
    padding:                            0 4% 0 7%;
}

.models .carousel-options .sketchRoom img{
    width:                              100%;
    height:                             auto;
}

.models .sketchRoom [data-polygon-group] {
    opacity:                            0;
}

.models .sketchRoom [data-polygon-group] polygon{
    fill:                               var(--blueStrongColor);
}

.models .carousel-options .sketchRoom{
    width:                              70%;
}

.models .carousel-options .roomList{
    width:                              30%;
    display:                            flex;
    flex-direction:                     column;
    padding-top:                        100px;
}

.models .carousel-options .roomList p{
    position:                           relative;
    padding-left:                       30px;
    width:                              fit-content;
}

.models .carousel-options .roomList p::after{
    position:                           absolute;
    top:                                0px;
    left:                               0px;
    content:                            '';
    width:                              20px;
    height:                             20px;
    mask-image:                         url("./../images/smallTriangle.svg");
    background-color:                   #E97341;
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
}

/*Menu de modelos*/
.models .modelsDots ul{
    padding:                            0;
    display:                            flex;
    align-items:                        center;
    justify-content:                    center;
    margin:                             50px auto;
    border-radius:                      40PX;
    width:                              fit-content;
    height:                             fit-content;
    background-color:                   #E7E8EB;
}

.models .modelsDots ul li{
    list-style:                         none;
    text-align:                         center;
    cursor:                             pointer;
    font-size:                          10px;
    font-weight:                        700;
    color:                              var(--blueColor);
    padding:                            15px 50px;
    border-radius:                      40px;
    background-color:                   transparent;
    transition:                         all 1s ease;
}
.models .modelsDots ul li span {
    letter-spacing: 4px;
}

.models .modelsDots ul li.slick-active{
    color:                              var(--orangeColor);
    background-color:                   var(--blueColor);
}

.models .modelsDots span{
    font-weight:                        bolder;
    font-size:                          16px;
}

/*Seccion de acabados de cada modelo*/
.models .acabados .content{
    padding:                            50px 35px;
    margin:                             0 auto;
    color:                              white;
    background-color:                   var(--blueColor);
    border-radius:                      30px;
    margin-bottom:                      40px;
    margin-right:                       10px;
    margin-left:                        25px;
    width:                              35%;
}

.models .acabados .content h3{
    color:                              var(--orangeColor);
}

.models .acabados .content span, .models .acabados .content p{
    color:                              white;
}

.models .acabados img{
    width:                              55%;
    padding:                            0 15px 40px;
}

/*Boton de brochure*/
.models .brochure{
    padding:                            20px 70px 20px 30px;
    border-radius:                      20px;
    background-color:                   var(--orangeColor);
    color:                              var(--blueColor);
    font-weight:                        bold;
    position:                           relative;
    text-decoration:                    none;
    margin-bottom:                      10px;
}

.models .brochure::after{
    position:                           absolute;
    top:                                17px;
    right:                              20px;
    width:                              30px;
    height:                             30px;
    background-color:                   var(--blueColor);
    content:                            '';
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
    mask-image:                         url("./../images/documentIcon.svg");
}

/*Parte superior (contenedor de menu de modelos)*/
.models .top{
    position:                           relative;
    margin-bottom:                      55px;
}

.models .top::after{
    position:                           absolute;
    width:                              100%;
    height:                             1px;
    bottom:                             -10px;
    background-color:                   var(--blueColor);
    content:                            '';
}

/*Galeria de modelos*/
.models .galeria{
    display:                            flex;

}
.models .galeria .list{
    display:                            flex;
    flex-direction:                     column;
    width:                              120px;
    max-height:                         530px;
    overflow-x:                         hidden;
    overflow-y:                         auto;
    
}

.models .galeria .list img{
    padding:                            10px;
    border-radius:                      20px;
    cursor:                             pointer;
}
.models .galeria .picture{
    min-width:                          1px;
    margin:                             10px;
    display:                            flex;
    height:                             100%;
    border-radius:                      40PX;
    flex-direction:                     column;
    display:                            flex;
    align-items:                        center;
    justify-content:                    center;
    margin-bottom:                      40px;
    flex:                               1;
}
.models .galeria:not(.slick-active) .picture a {
    pointer-events: none;
}
.models .galeria .picture a {
    display:                            block;
    width:                              100%;
}
.models .galeria .picture img{
    display:                            block;
    width:                              auto;
    max-width:                          100%;
    max-height:                         530px;
    margin:                             0 auto;
    border-radius:                      20px;
    cursor:                             zoom-in;
}
.models .ubicacion img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    padding: 60px 60px 0;
}
.models .ubicacion .location-labels {
    padding: 0 60px;
}
.models .carouselModelMobile-accordion .accordion-item {
    background-color:                   transparent;
}
.models .carouselModelMobile-accordion .accordion-item:not(:last-child) {
    margin-bottom:                      20px;
    border:                             none;
}
.models .carouselModelMobile-accordion .accordion-header {
    border-radius:                      40px;
    overflow:                           hidden;
}
.models .carouselModelMobile-accordion .accordion-button {
    --bs-accordion-btn-icon:            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E48963' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon:     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E48963' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-color:                   var(--blueColor);
    color:                              var(--orangeColor);
    padding:                            15px 35px;
    font-size:                          16px;
    letter-spacing:                     .5px;
}
.models .carouselModelMobile-accordion .accordion-button:focus {
    box-shadow:                         none;
}
.models .carouselModelMobile-accordion .accordion-button span {
    font-size:                          18px;
    font-weight:                        700;
    background:                         linear-gradient(to bottom, #F6A27E, #E97342);
    -webkit-background-clip:            text;
    -webkit-text-fill-color:            transparent;
}
.models .carouselModelMobile-accordion .accordion-body {
    padding-left:                       0;
    padding-right:                      0;
}
.models .carouselModelMobile-accordion .accordion-body img {
    max-width:                          100%;
}
.models .carouselModelMobile-accordion .acabadosContent {
    background-color:                   var(--blueColor);
    padding:                            40px 35px;
    border-radius:                      30px;
    margin-top:                         10px;
    color:                             #fff;
}
.models .carouselModelMobile-accordion .acabadosContent h3 {
    font-size:                          32px;
    font-weight:                        500;
    color:                              var(--orangeColor);
    margin-bottom:                      20px;
}
.models .carouselModelMobile-accordion .acabadosContent p:not(:last-child) {
    margin-bottom:                      20px;
}
.models .carouselModelMobile-accordion .accordion-carousel-image {
    padding: 0 25px;
}
.models .carouselModelMobile-accordion .accordion-carousel-image img {
    display:                            block;
    aspect-ratio:                       4/4;
    width:                              100%;
    border-radius:                      20px;
    object-fit:                         cover;
}
.models .carouselModelMobile-accordion .slick-dots {
    padding:                            0;
    display:                            flex;
    flex-wrap:                          wrap;
    list-style:                         none;
    margin:                             15px 0 0;
    justify-content:                    center;
}
.models .carouselModelMobile-accordion .slick-dots li {
    margin:                             5px;
    width:                              20px;
    height:                             26px;
}
.models .carouselModelMobile-accordion .slick-dots li button {
    border-radius:                      50%;
    width:                              20px;
    height:                             20px;
    background-color:                   transparent;
    color:                              transparent;
    border:                             1px solid var(--blueColor);
    padding:                            0;
}
.models .carouselModelMobile-accordion .slick-dots .slick-active button {
    border:                             1px solid var(--orangeColor);
    background:                         linear-gradient(180deg, #F7A481 0%, #E86E3C 100%);
}
.models .carouselModelMobile-accordion .location-image {
    height: auto;
}
.models .location-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 30px;
    justify-content: center;
}
.models .location-label {
    width: calc(50% - 3px);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
}
.models .location-label__mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(to bottom, #677CB1, #445275);
}
.models .location-label.second .location-label__mark {
    background-image: linear-gradient(to bottom, #F6A27E, #E97342);
}
.models .location-label__legend {
    background: linear-gradient(to bottom, #677CB1, #445275);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.models .location-label__desc {
    color: #323C56;
    font-size: .785rem;
}
.models .location-pagination {
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    gap: 1rem;
    margin-top: 20px;
}
.models .location-pagination button {
    appearance: none;
    border: none;
    background: #323C5633;
    text-indent: -999999px;
    width: 60px;
    height: 8px;
}
.models .location-pagination button.active {
    appearance: none;
    border: none;
    background: linear-gradient(180deg, #6E84BC 0%, #323C56 100%);
    text-indent: -999999px;
    width: 60px;
    height: 8px;
}
@media screen and (max-width: 767.98px) {
    .models .modelsDots {
        margin-bottom:                  20px;
    }
    .models .modelsDots .slick-dots {
        display:                        flex;
        flex-wrap:                      nowrap;
        overflow-x:                     auto;
        justify-content:                flex-start;
        width:                          100%;
        margin:                         0 calc(50% - 50vw);
        width:                          100vw;
        max-width:                      100vw;
        border-radius:                  0;
        background:                     linear-gradient(90deg, #fff 10%, #E7E8EB 10%);
        background-attachment:          local;
    }
    .models .modelsDots .slick-dots li {
        width:                          fit-content;
        white-space:                    nowrap;
        background-color:               #E7E8EB;
        letter-spacing:                 4px;
    }
    .models .modelsDots .slick-dots li:first-child {
        margin-left:                    16px;
    }
    .models .modelsDots .slick-dots li:last-child {
        margin-right:                   16px;
    }

    .models .carousel-models {
        margin-left: -35px;
        margin-right: -35px;
        width: calc(100% + 70px);
        max-width: 100vw;
    }

    .models .carousel-models .has-overflow {
        overflow-x: scroll;
    }
    .models .carouselModelMobile-plano,
    .models .carouselModelMobile-datasheet,
    .models .carouselModelMobile-accordion .accordion-header,
    .models .carouselModelMobile-accordion .location-labels {
        margin-left:35px !important;
        margin-right: 35px !important;
    }
    .models .carouselModelMobile-accordion .location-image {
        width: 180%;
        max-width: 180% !important;
        margin-bottom: 20px;
        padding: 0 1rem;
    }
    .models .carouselModelMobile-accordion .location-label {
        width: 100%;
    }
}
@media screen and (max-width: 991.98px) {
    .models .row {
        padding:                        0 23px;
    }
    .models .modelsTitle {
        font-size:                      32px;
        letter-spacing:                 .5px;
        font-weight:                    500;
        margin-bottom:                  20px;
    }
    .models .top {
        margin-bottom:                  0;
        margin-top:                     50px;
    }
    .models .top::after {
        display:                        none;
    }
    .models .brochure {
        margin-bottom:                  0;
    }

    .models .carouselModelMobile-plano img {
        display:                        block;
        margin:                         0 auto;
        max-width:                      100%;
        height:                         auto;
    }
    .models .carouselModelMobile-plano .roomList {
        margin-top:                     20px;
        margin:                         20px 35px 30px;
    }
    .models .carouselModelMobile-plano .roomList p {
        padding-left:                   30px;
        position:                       relative;
        margin-bottom:                  30px;
        font-weight:                    700;
    }
    .models .carouselModelMobile-plano .roomList p:last-child {
        margin-bottom:                  0;
    }
    .models .carouselModelMobile-plano .roomList p::before {
        position:                       absolute;
        top:                            0;
        left:                           0;
        content:                        '';
        width:                          20px;
        height:                         20px;
        mask-image:                     url(./../images/triangleIcon.svg);
        background-color:              #E97341;
        mask-size:                      contain;
        mask-repeat:                    no-repeat;
        mask-position:                  center;
    }
    .models .carouselModelMobile-datasheet {
        display:                        flex;
        flex-wrap:                      wrap;
        border-bottom:                  1px solid var(--blueColor);
        margin:                         30px 0;
    }
    .models .carouselModelMobile-datasheet .element {
        width:                          50%;
        border-top:                     1px solid var(--blueColor);
        padding:                        30px 15px;
        position:                       relative;
    }
    .models .carouselModelMobile-datasheet .element:nth-child(odd)::after {
        content:                        '';
        position:                       absolute;
        top:                            15px;
        bottom:                         15px;
        right:                          0;
        width:                          1px;
        height:                         calc(100% - 30px);
        background-color:               var(--blueColor);
    }
    .models .carouselModelMobile-datasheet .element span {
        color:                          var(--blueColor);
        letter-spacing:                 .5px;
    }
    .models .carouselModelMobile-datasheet .element .elementNumber {
        background:                     linear-gradient(to bottom, #677CB1, #445275);
        -webkit-background-clip:        text;
        -webkit-text-fill-color:        transparent;
        font-weight:                    bold;
        font-size:                      30px;
        margin-bottom:                  0;
        line-height:                    1.1;
    }
}

.location .locationContent {
    padding:                            0 50px;
}
.location .locationContent .triangle {
    display: block;
    width:                              58px;
    height:                             50px;
    mask-image:                         url("./../images/smallTriangle.svg");
    background-color:                   #E48963;
    margin-bottom:                      30px;
}
.location .locationContent h2 {
    font-weight:                        400;
}
.location .locationList {
    list-style:                         none;
    margin-top:                         30px;
}
.location .locationListItem {
    position:                           relative;
    margin-bottom:                      24px;
}
.location .locationListItem:last-child {
    margin-bottom:                      0;
}
.location .locationListItem::before {
    position:                           absolute;
    top:                                0px;
    left:                               -2rem;
    content:                            '';
    width:                              20px;
    height:                             20px;
    mask-image:                         url(./../images/smallTriangle.svg);
    background-color:                  #E97341;
    mask-size:                          contain;
    mask-repeat:                        no-repeat;
    mask-position:                      center;
}
.location .locationMapContainer {
    margin-left:                        calc((100vw - 1320px + 24px) / 2 * -1);
    border-style:                       solid;
    border-color:                     #E48963;
    border-width:                       1px 1px 1px 0;
    border-top-right-radius:            20px;
    border-bottom-right-radius:         20px;
    overflow:                           hidden;
}
.location .locationMap {
    width:                              100%;
    height:                             800px;
}
.location .locationMap .mainMarker {
    background-image:                   url('../images/mainLocation.svg');
    background-size:                    contain;
    background-position:                center;
    background-repeat:                  no-repeat;
    width:                              70px;
    height:                             85px;
    position:                           relative;
}
.location .locationMap .mainMarker::after {
    content:                            '';
    position:                           absolute;
    top:                                10px;
    left:                               11px;
    display:                            block;
    background-color:                 #fff;
    border-radius:                      50%;
    width:                              50px;
    height:                             50px;
    background-image:                   url('../images/smallTriangle.svg');
    background-size:                    30px 25px;
    background-repeat:                  no-repeat;
    background-position:                center;
}
.location .locationMap .markerWrap {
    display:                            flex;
    align-items:                        flex-end;
}
.location .locationMap .markerWrap span {
    line-height:                        1;
    max-width:                          110px;
    background:                       rgba(255, 255, 255, .8);
    padding:                            3px 0;
}
.location .locationMap .marker {
    background-image:                   url('../images/locationIconSprites.svg');
    background-size:                    58px 35px;
    background-position:                0 0;
    background-repeat:                  no-repeat;
    width:                              29px;
    height:                             35px;
}
.location .locationMap .is-highlighted .marker {
    background-position:                -29px 0;
}
.location .openApp {
    padding:                            20px 30px;
    border-radius:                      20px;
    background-color:                   var(--orangeColor);
    color:                              var(--blueColor);
    font-weight:                        bold;
    position:                           relative;
    text-decoration:                    none;
    display:                            flex;
    align-items:                        center;
    margin:                             30px auto 0;
    width:                              fit-content;
}
.location .openApp::after {
    content:                            '';
    display:                            inline-block;
    width:                              25px;
    height:                             25px;
    background-image:                   url('../images/openApp.svg');
    background-size:                    contain;
    background-position:                center;
    background-repeat:                  no-repeat;
    margin-left:                        15px;
}
@media screen and (max-width: 991.98px) {
    .location {
        margin:                         100px 0;
    }
    .location .locationContent {
        margin-bottom:                  30px;
        padding:                        0 35px;
    }
    .location .locationContent .triangle {
        float:                          right;
        margin-bottom:                  0;
        margin-left:                    15px;
        width:                          35px;
        height:                         30px;
    }
    .location .locationContent h2 {
        font-size:                      48px;
    }
    .location .locationMapContainer {
        margin-left:                    calc(50% - 50vw);
        margin-right:                   calc(50% - 50vw);
        border-radius:                  20px;
    }
    .location .locationMap {
        height:                         550px;
    }
    .location .locationList {
        margin-bottom:                  30px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .location .locationMapContainer {
        margin-left:                    calc((100vw - 960px + 24px) / 2 * -1);
    }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    .location .locationMapContainer {
        margin-left:                    calc((100vw - 1140px + 24px) / 2 * -1);
    }
}

/* Lotification */
.lotification {
    margin-top: 50px;
    margin-bottom: 50px;
}
.lotification-tag {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
}
.lotification-title {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .05em;
}

.lotification-image-wrap {
    position: relative;
    margin-top: 30px;
}
.lotification-image-sketch {
    max-width: 100%;
    visibility: hidden;
}
.lotification-image-sketch.active {
    visibility: visible;
}
.lotification-image-sketch:not(:first-child) {
    position: absolute;
    top: 0;
    left: calc(var(--bs-gutter-x)* .5);
    max-width: calc(100% - var(--bs-gutter-x));
}
.lotification-pagination {
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    gap: 1rem;
    margin-top: 20px;
}
.lotification .lotification-pagination button {
    appearance: none;
    border: none;
    background: #323C5633;
    text-indent: -999999px;
    width: 60px;
    height: 8px;
}
.lotification .lotification-pagination button.active {
    appearance: none;
    border: none;
    background: linear-gradient(180deg, #6E84BC 0%, #323C56 100%);
    text-indent: -999999px;
    width: 60px;
    height: 8px;
}

.lotification-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 50px;
}
.lotification-selector-btn {
    padding: 15px 10px;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 20px;
    background-color: #fff;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}
.lotification-selector-btn.active {
    border-color: var(--blueColor);
}
.lotification-selector-color {
    width: 20px;
    height: 20px;
}
.lotification-selector-btn-title {
    background: linear-gradient(to bottom, #677CB1, #445275);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .lotification-tag {
        font-size: 23px;
    }
    .lotification-title {
        font-size: 75px;
    }
}
@media screen and (max-width: 991.98px) {
    .lotification-image-wrap {
        overflow-x: auto;
    }
    .lotification-image-sketch,
    .lotification-image-sketch:not(:first-child) {
        max-width: none;
    }
}
@media screen and (min-width: 992px) {
    .lotification {
        margin-top: 150px;
        margin-bottom: 150px;
    }
    .lotification .lotification-pagination {
        display: none;
    }
    .lotification-selector {
        flex-direction: row;
        gap: 24px;
        flex-wrap: wrap;
    }
    .lotification-selector-btn {
        margin-left: 0;
        margin-right: 0;
        width: auto;
        flex-grow: 1;
        flex-direction: column;
        gap: 15px;
        padding: 20px 15px;
    }
}