.swiper.slider_principal{
     height: calc(100vh - 49px) !important;
}
.slider_principals .slick-slide{
     height: calc(100vh - 49px) !important;
}
 .img-mm{
     width: 100%;
     max-width: 100%;
}
 .grid__flex__box{
     display: grid;
     grid-template-columns: 40% 59%;
     gap: 1%;
     align-items: center;
     padding-bottom: 112px;
     padding-top: 90px;
}
 .flex__items{
     padding-bottom: 112px;
     padding-top: 90px;
}
 @media (max-width: 764px){
     .flex__items{
         padding-bottom: 55px;
    }
}
 .flex__box{
     padding: 20px;
     position: relative;
}
 .flex__box2{
     padding: 10px 10px 30px 45px;
     position: relative;
}
 .card__flex{
     padding: 0;
     max-width: 335px;
}
 .flex__items h3{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 24px;
     font-style: normal;
     font-weight: bold;
     line-height: normal;
     margin: 32px 0;
}
 .flex__items p{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
     margin-bottom: 60px;
}
 .ico1{
     width: 88px;
     height: 81px;
     object-fit: contain;
     display: block;
     margin-left: auto;
     text-align: right;
}
 .ico2{
     width: 57px;
     height: 57px;
     object-fit: contain;
}
 @media (max-width: 993px){
     .grid__flex__box{
         display: none;
    }
}
.flex__position{
    position: absolute;
    bottom: 0;
    left: auto;
    margin-left: -10px;
    z-index: 10;
    cursor: pointer;
}
.flex__position img{
    background-color: white;
    padding-bottom: 10px;
}
.flex__position.is-fixed{
    position: fixed;
    left: inherit;
    margin-bottom: 50px;
}
 .card__blue{
     padding: 35px 0 35px;
     background: #00327E;
}
 .card__blue h2{
     color: rgba(255, 255, 255, 0.20);
     font-family: 'F37 Gruffy';
     font-size: 68px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin: 5px 0;
     text-align: left;
}
 .card__blue h2.text-blanco{
     color: rgba(255, 255, 255, 1);
}
 .card__blue p{
     color: #FEFEFF;
     font-family: 'F37 Gruffy';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 156.25% */
     margin-bottom: 0;
     text-align: right;
}
 @media (max-width: 993px){
     .card__blue h2{
         font-size: 40px;
         margin: 10px 0;
    }
     .card__blue{
        /*padding: 30px 20px 30px;
        */
    }
     .card__blue p{
         text-align: left;
    }
}
 .soluciones__flexibles h3{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: 10.8px;
}
 .soluciones__flexibles h4{
     color: #00327E !important;
     font-family:'F37 Gruffy';
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     letter-spacing: 9.6px;
     text-decoration: none !important;
}
 .soluciones__flexibles h4 img{
     display: none !important;
}
 .soluciones__flexibles a{
     text-decoration: none !important;
}
 .cajas__items h5{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 38px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin-bottom: 30px !important;
}
@media (min-width: 764px){
     .cajas__items h5{
         max-width: 217px;
    }
}
 .cajas__items p{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 138.889% */
     max-width: 280px;
}
.soluciones__flexibles .grid__cajas__all:nth-child(3) .grid__cajas{
    grid-template-columns: 1fr 62%;
}
.soluciones__flexibles .grid__cajas__all:nth-child(3) .grid__cajas .soluciones__box{
    margin: 0;
    grid-row-start: 1;
}
.soluciones__flexibles .grid__cajas__all:nth-child(3) .grid__cajas .soluciones_box_img2{
    left: -2rem;
    position: relative;
    text-align: right;
    z-index: 2;
}
.caja1{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: end;
     justify-content: end;
     padding: 80px 25px 30px 76px;
}
 .caja2{
     padding: 80px 60px 30px 25px;
}
 .soluciones_box_img2{
     display: block;
}
 .soluciones_box_img1{
     display: none;
}
 .soluciones__box{
     width: 100%;
     max-width: 414px;
     margin-left: -2rem;
}
 .grid__cajas__all{
     padding: 40px 0;
}
 .grid__cajas__all .grid__cajas{
     padding: 40px 0;
     display: grid;
     grid-template-columns: 62% 1fr;
}
 @media (max-width: 764px){
     .grid__cajas__all{
         padding: 0 0;
    }
     .grid__cajas__all .grid__cajas{
         padding: 20px 0.8rem;
         display: block;
    }
    .soluciones__box{
        margin-left: 0;
        margin-top: -7rem;
    }
    .soluciones__flexibles .grid__cajas__all:nth-child(3) .grid__cajas .soluciones_box_img2{
        left: 0;
    }
    .soluciones__flexibles .grid__cajas__all:nth-child(3) .grid__cajas .soluciones__box{
        margin-top: -7rem;
    }
     .soluciones_box_img1{
         display: block;
    }
     .soluciones__flexibles h3{
         font-size: 16px;
         line-height: 21px;
         letter-spacing: 9.6px;
    }
     .grid__cajas2{
         display: flex;
         flex-direction: column-reverse;
    }
     .caja1{
         justify-content: flex-start;
         padding: 120px 20px 20px;
         align-items: flex-end;
    }
     .soluciones__flexibles h4{
         font-size: 12px;
         line-height: normal;
         letter-spacing: 7.2px;
    }
     .cajas__items h5{
         font-size: 35px;
    }
     .cajas__items p{
         line-height: normal;
    }
     .img-border{
         min-height: 521px;
         display: block;
         margin: 0 auto;
    }
     .imagen__grid__cajas{
         display: block;
         max-width: 100%;
         margin-left: auto;
         margin-right: auto;
         z-index: 2;
         position: relative;
         min-height: 305px;
    }
    .soluciones_box_img1{
        margin-bottom: -100px !important;
    }
}
 .grid__cajas button{
     padding: 0;
}
 button, a{
     box-shadow: none !important;
}
 .card__modal{
     display: grid;
     grid-template-columns: auto 345px;
     max-width: 953px;
     margin: 0 auto;
     padding: 3rem 0;
    /* position: absolute;
     top: 0;
     left: 0;
    */
}
 .card__modal .card__modal__info h2{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     letter-spacing: 7.2px;
}
 .card__modal .card__modal__info h1{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 38px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .card__modal .card__modal__info ul{
     padding-left: 0;
     list-style: none;
}
 .card__modal .card__modal__info ul li{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 178.571% */
     margin: 2px 0;
}
 .card__modal .card__modal__info p{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 178.571% */
     margin: 2px 0;
}
 .grid__modal{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .grid__modal .swiper-slide img{
     width: auto;
     height: auto;
}
 @media (min-width: 800px){
     .card__modal__info{
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
    }
     .card__modal__info__box{
         padding-top: 25px;
         margin-left: -1px;
    }
}
 @media (max-width: 993px){
     .card__modal {
         grid-template-columns: 52% 48%;
    }
}
 @media (max-width: 800px){
     .card__modal {
         grid-template-columns: repeat(1, 1fr);
    }
     .card__modal__info{
         padding: 30px 0 !important;
         border: 1px solid #00327E;
         border-top: 0 !important;
    }
     .card__modal__img__box .imgmodal{
         min-height: 400px;
    }
     .grid__modal .swiper-slide .imgmodal{
         width: 100%;
    }
}
 @media (min-width: 764px) and (max-width: 993px){
     .card__modal__info__box {
         padding-top: 0;
    }
     .grid__modal .swiper-slide .imgmodal{
         height: 100% !important;
         object-position: left;
         padding-top: 8px;
    }
     .card__modal__info{
         max-width: 347px;
    }
}
 @media (max-width: 600px){
     .card__modal_img img{
         max-height: 298px;
    }
}
 .card__modal__img__box{
     display: flex;
     align-items: end;
    /*justify-content: end;
    */
}
.h3__title{
     color: #0A322D;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: 12px !important;
}
 .zonas__comunes h3{
     color: #0A322D;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: 12px;
     margin-bottom: 35px;
}
 .zonas__comunes h4{
     color: #BC6E3C;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     letter-spacing: 7.2px;
     margin: 8px 0 0;
}
 .zonas__comunes h1{
     color: #0A322D;
     font-family: 'F37 Gruffy';
     font-size: 28px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin: 27px 0 17px;
}
 .zonas__comunes p{
     color: #0A322D;
     font-family: 'F37 Gruffy';
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 138.889% */
     padding-right: 15px;
}
 @media (max-width: 764px){
     .zonas__comunes h3{
         font-size: 16px;
         line-height: normal;
         letter-spacing: 9.6px;
         margin-bottom: 15px;
    }
     .h3__title{
         font-size: 16px;
         line-height: normal;
         letter-spacing: 9.6px !important;
    }
     .zonas__comunes h4{
         display: none;
    }
     .zonas__comunes h1{
         font-size: 25px;
         line-height: normal;
         margin: 22px 0 17px;
    }
     .zonas__comunes p{
         font-size: 16px;
         line-height: normal;
         padding-right: 0;
    }
    .zonas__comunes .zonas__comunes__list .swiper-slide{
        width: 78%;
    }
}
.zonas__comunes .zonas__comunes__list .swiper-slide picture{
    display: block;
}
 .zonas__comunes{
     background: #F0EAE0;
}
 .zonas__comunes .swiper-button-next:after, .zonas__comunes .swiper-button-prev:after, .swiper-button-wrapper-nuevo .swiper-button-next:after, .swiper-button-wrapper-nuevo .swiper-button-prev:after{
     display: none;
}
 .zonas__comunes .swiper-button-next, .zonas__comunes .swiper-button-prev, .swiper-button-wrapper-nuevo .swiper-button-next, .swiper-button-wrapper-nuevo .swiper-button-prev{
     position: relative !important;
     left: inherit;
     right: inherit;
     top: inherit;
     bottom: inherit;
}
.zonas__comunes .swiper-button-next, .zonas__comunes .swiper-button-prev {
    margin-top: 0.5rem;
}
/* .servicios{
     background: #5A96D7;
}
 */
 .servicios h2{
     color: rgba(255, 255, 255, 0.50);
     font-family: 'F37 Gruffy';
     font-size: 60px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin: 5px 0;
}
 .servicios h2.grande{
     font-size: 68px;
     color: #fff;
}
 .servicios img{
     display: none;
}
 .servicios img.active{
     display: block;
}
/*.servicio:hover h2{
     font-size: 68px;
     color: #fff;
     cursor: pointer;
}
*/
 .ubicacion ul{
     list-style: none;
}
 .ubicacion ul li{
     display: flex;
     align-items: center;
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 208.333% */
     margin-bottom: 5px;
}
 .ubicacion h3{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: 9.6px;
}
 .ubicacion h2{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 28px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .ubicacion p{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
    /* 138.889% */
}
 .box-ubicacion{
     margin-left: auto;
     max-width: 355px;
}
 @media (max-width: 764px){
     .box-ubicacion{
         max-width: 100%;
         padding-top: 2rem;
    }
     .ubicacion ul{
         padding-left: 0;
    }
}
 @media (max-width: 480px){
     .ubicacion h2{
         font-size: 25px;
         line-height: normal;
    }
     .ubicacion p{
         font-size: 16px;
         line-height: normal;
    }
}
 .reserva{
     background: #fff;
}
 @media (min-width: 993px){
     .reserva_oficina{
         min-height: 500px;
    }
}
 .reserva_oficina h1{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 60px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 .reserva_oficina p{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
}
 form .form-group .form-control{
     border: none;
     border-bottom: 1px solid #fff;
     padding-left: 10px;
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 0;
     background: transparent;
     box-shadow: none !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
 form .form-group select.form-control{
     border: none;
     padding-left: 2px;
     color: #FFF;
     font-family: 'F37 Gruffy';
     background: #00327E !important;
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     margin-bottom: 0;
     line-height: normal;
     box-shadow: none !important;
     padding-top: 10px;
     padding-bottom: 10px;
}
 form .form-group{
     margin-top: 15px;
}
 form .form-group .form-control::placeholder{
     color: #fff ;
}
 form label{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 form .box__check{
     padding: 20px;
     border: 1px solid #fff;
     height: 200px;
     display: flex;
}
 form .box__check .form-check-input{
     float: right;
}
 form .box__check .form-check{
     padding-left: 0;
     margin-bottom: 15px;
}
 form .box__check label{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .form-selects{
     position: relative;
}
 .svg-selects{
     position: absolute;
     top: 8px;
     right: 0;
    /*transform: translateY(-50%);
    */
     pointer-events: none;
}
 .grid__form{
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-column-gap: 70px;
}
 .grid__form1{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 70px;
}
 .grid__form22{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 70px;
}
 .grid__form__box{
     display: grid;
     grid-template-columns: 75% 25%;
     align-items: stretch;
}
 @media (max-width: 993px){
     .grid__form__box{
         grid-template-columns: repeat(1, 1fr);
         grid-column-gap: 3%;
    }
     .reserva_oficina h1{
         font-size: 35px;
         line-height: normal;
    }
     .reserva_oficina p{
         font-size: 18px;
    }
}
 @media (max-width: 764px){
     .grid__form{
         grid-template-columns: repeat(1, 1fr);
    }
     .grid__form1{
         grid-template-columns: repeat(1, 1fr);
         grid-column-gap: 3%;
    }
     .grid__form22{
         grid-template-columns: repeat(1, 1fr);
         grid-column-gap: 3%;
    }
     .box__check{
         order: -1;
         margin: 18px 0;
    }
     form .box__check label, form .form-group select.form-control, form .form-group .form-control{
         font-size: 18px;
    }
}
 .btn-oficina{
     padding: 0;
     background: transparent !important;
     border: none !important;
}
 .btn-oficina svg path:nth-child(2){
     opacity: 0;
}
 .btn-oficina.active svg path:nth-child(2){
     opacity: 1;
}
 .grid__form__box .row, .ubicacion .row{
     padding: 1rem;
}
 .btn{
     padding: 0 !important;
}
 .p-footer-inferior{
     color: #fff !important;
     font-family: 'F37 Gruffy';
     font-size: 8px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .footer{
     background: #00327E;
     color: #fff;
}
 .grid__footer{
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
}
 .grid__footer p{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .grid__footer a{
     text-decoration: none;
}
 .grid__footer__enlaces{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
}
 .grid__footer__enlaces ul{
     list-style: none;
     padding: 0 0;
}
 .grid__footer__enlaces ul li a{
     color: #FFF;
     font-family: 'F37 Gruffy';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-decoration: none;
}
 .logo__footer{
     width: 94.7px;
}
 @media (max-width: 993px){
     .grid__footer{
         grid-template-columns: 1fr;
    }
     .grid__footer__enlaces{
         grid-template-columns: repeat(3, 1fr);
    }
}
 @media (max-width: 570px){
     .grid__footer{
         grid-template-columns: 1fr;
    }
     .grid__footer__enlaces{
         grid-template-columns:186px;
         align-items: center;
         justify-content: center;
         padding-left: 50px;
    }
     .logo__footer{
         width: 162.064px;
    }
     .grid__footer__enlaces ul li a{
         font-size: 14px;
    }
     .grid__footer__enlaces ul li,.grid__footer__enlaces p{
         margin-bottom: 10px !important;
    }
     .footer-inferior{
         padding-top: 1rem !important;
         padding-bottom: 1rem !important;
         margin-top: 1rem;
         border-top: 1px solid rgba(255, 255, 255, 0.30);
        ;
    }
     .p-footer-inferior{
         font-size: 14px;
    }
     .grid__footer__logo{
         text-align: center;
    }
}
 .slider_principal__wrapper p{
     color: #FFF;
     font-family: 'F37 Gruff'y;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     padding-right: 37px;
     margin-bottom: 30px;
}
 .slick-slider .slick-dots li button{
     width: 20px !important;
}
 .slider_principals .swiper-slide img{
     object-fit: cover;
}

 .slider_principals .swiper-button-next:after, .slider_principals .swiper-button-prev:after{
     color: #fff;
}
 .slider_principals .slider_principal__wrapper{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .slider_principals .slick-slider .slick-dots{
     color: #fff;
}
 .slider_principals .slick-slider .slick-dots li button:before{
     display: none;
     background-color: transparent;
}
 .slider_principals .slick-slider .slick-dots li button{
     background-color: transparent;
     background: transparent;
     color: #fff;
     text-indent: 0;
}
.slider_principal__wrapper a {
    z-index: 9;
}
/*
 .slider_principals .slick-slider .slick-dots li#slick-slide00 button{
     padding-right: 20px;
}
 .slider_principals .slick-slider .slick-dots li.slick-active button::before{
     background-color: transparent !important;
}
 .slider_principals .slick-slider .slick-dots li#slick-slide00 button:before{
     display: block;
     content: '/';
     background-color: transparent !important;
     background: transparent !important;
     width: auto;
     height: auto;
     left: inherit;
     right: 0;
     z-index: 2;
}*/
 .slick-slider .slick-dots{
     justify-content: end;
     max-width: 1100px;
     padding: 0 1rem;
     bottom: 85px !important;
     margin: 0 auto;
}
 .theme_urbanova .zones_resources{
     background: #fff;
     padding: 1rem 0 3.6rem;
}
 .theme_urbanova .zones_resources__title{
     margin: 0;
     font-family: 'F37 Gruffy';
     font-size: 38px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     color: #00327E;
     padding-bottom: 0.6rem;
}
 .theme_urbanova .zones_resources__subtitle{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 25px;
     margin: 0;
     padding-bottom: 1.4rem;
}
.theme_urbanova .zones_resources__list .swiper-slide{
     width: 76%;
}
.theme_urbanova .zones_resources__list .swiper-slide picture{
    display: block;
}
 .theme_urbanova .zones_resources__list .swiper-slide .title{
     margin: 0;
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     padding: 1rem 0;
}
 .theme_urbanova .zones_resources__list .swiper-slide .list{
     margin: 0;
     padding: 0;
     list-style: inherit;
     display: flex;
     flex-flow: column;
     gap: 0.6rem;
}
 .theme_urbanova .zones_resources__list .swiper-slide .list li{
     margin: 0;
     display: flex;
     gap: 0.6rem;
     align-items: center;
}
 .theme_urbanova .zones_resources__list .swiper-slide .list li .icon{
     max-width: 40px;
}
 .theme_urbanova .zones_resources__list .swiper-slide .list li span{
     color: #00327E;
     font-family: 'F37 Gruffy';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 1;
}
 .theme_urbanova .zones_resources__list .swiper-slide .list li span small{
     font-size: 9px;
     font-weight: 400;
}
 @media (min-width: 992px){
     .theme_urbanova .zones_resources {
         padding: 2rem 0 4rem;
    }
     .theme_urbanova .zones_resources__title{
         font-size: 65px;
         padding-right: 4rem;
         padding-bottom: 0.9rem;
    }
     .theme_urbanova .zones_resources__subtitle{
         padding-bottom: 1.8rem;
    }
     .theme_urbanova .zones_resources__list .swiper-slide .title{
         font-size: 24px;
         padding-top: 1.4rem;
         padding-bottom: 1.3rem;
    }
}

.animate-square {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-square.active{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0px);
}
.animate-square.animating{
    animation-delay: 250ms;
    animation-name: float;
    animation-duration: 2s;
    transition-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
.animateText {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 0.9s ease, delay 0ms;
}
.containerBgGrid{
    background-color: #d8e8fa; /* Color inicial del contenedor */
    transition: background-color 0.3s ease;
}

.clipPloygon{
    clip-path: polygon(0% 0px, 0px 0px, 0px 0%);
    transition: all ease 700ms;
}
.clipPloygon.visible{
    clip-path: polygon(200% 0px, 0px 0px, 0px 200%);
}

.swal_alert p {
    color: #FFF;
    text-align: center;
    font-family: 'F37 Gruffy';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 1.3rem;
    margin-top: 0.7rem;
}

.swal_alert .swal2-close {
    background: #fff !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 2.5rem !important;
    color: #00327E !important;
    font-family: 'F37 Gruffy';
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    border-radius: 0;
}

.swal_alert .swal2-popup {
    border-radius: 0 !important;
}

/* Actualizacion Page 18/09/24 */

.slider_principals {
    h2 {
        color: #fff;
        display: flex;
        height: 100%;
        position: absolute;
        top: 0;
        align-items: center;
        color: #fff;
        font-size: 30px;
        margin: 0;
    }
    
    @media(min-width: 768px) {
        h2 {
            font-size: 45px;
        }
    }
    
    @media(min-width: 992px) {
        h2 {
            font-size: 64px;
        }
    }
}

.sp-select {
    border-bottom: 1px solid #fff;
    padding: 7px 0 7px 10px;
    position: relative;
    width: 100%;

    &::after {
        background-color: transparent;
        content: '';
        display: block;
        margin-top: -6px;
        position: absolute;
        right: 5px;
        top: 50%;
        border: solid $blue;
        border-width: 0 2px 2px 0;
        padding: 3px;
        transition: transform .3s ease;
        transform: rotate(45deg);
    }

    .sp-select__select {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #fff;
        font-size: 14px;
        outline: none;
        position: relative;
        z-index: 1;
        width: 100%;
        
        &.SumoUnder {
            position: absolute;
        }
    }
    
    .SumoSelect {
        width: 100%;
        
        .sp-select__select {
            border: 0;
            box-shadow: none;
            padding: 0;
        }
        
        .CaptionCont {
            position: absolute;
            top: 0;
            z-index: 0;
            
            @media only screen and (min-width: 768px) {
                position: relative;
                z-index: 1;
            }
            
            span {
                color: #fff;
                cursor: pointer;
                font-style: normal;
                white-space: normal;
            }
            
            label {
                background-color: #BC6E3C;
                cursor: pointer;
                height: 30px;
                
                &:after {
                    bottom: 0;
                    content: '';
                    width: 0;
                    height: 0;
                    border: 5px solid transparent;
                    border-left: 30px solid #00327E;
                    border-bottom: 0;
                    position: absolute;
                }
                
                i {
                    background: none;
                    border-color: #fff;
                    border-style: solid;
                    border-width: 0 0 2px 2px;
                    height: 10px;
                    margin-top: -8px;
                    top: 50%;
                    transform: rotate(-45deg);
                    width: 10px;
                }
            }
        }
        
        .optWrapper {
            background-color: #00327E;
            border-radius: 0;
            border: 1px solid #fff;
            top: 31px;
            
            .options {
                li {
                    color: #fff;
                    border-radius: 0;
                    border: 0;
                    padding: 10px 20px;
                    position: relative;
                    
                    &::before,
                    &::after {
                        border-left: 8px solid transparent;
                        border-right: 0;
                        border-top: 0;
                        content: '';
                        height: 0;
                        position: absolute;
                        top: 50%;
                    }
                    
                    &::before {
                        background-color: #00327E;
                        border-bottom: 22px solid #fff;
                        margin-top: -11px;
                        transform: rotate(-90deg);
                        right: 10px;
                        width: 22px;
                    }
                    
                    &::after {
                        background-color: transparent;
                        border-bottom: 20px solid #00327E;
                        margin-top: -10px;
                        transform: rotate(-90deg);
                        right: 11px;
                        width: 20px;
                    }
                    
                    label {
                        &::after {
                            background-color: transparent;
                            border-left: 6px solid transparent;
                            border-bottom: 13px solid #fff;
                            border-right: 0;
                            border-top: 0;
                            content: '';
                            height: 0;
                            margin-top: -7px;
                            opacity: 0;
                            position: absolute;
                            right: 14px;
                            transform: rotate(-90deg);
                            top: 50%;
                            width: 13px;
                            z-index: 2;
                        }
                    }
                    
                    &:hover {
                        background-color: #00327E;
                        
                        label {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                    
                    &.selected {
                        label {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                    
                    &.disabled {
                        display:none;
                    }
                }
            }
        }
    }
    
    &--error {
        border-bottom-color: $error;
    }

    &--success {
        border-bottom-color: $blue;
    }
}

.reserva{
    .container_urbanova {
        .reserva__logo {
            h3 {
                font-size: 24px;
                font-weight: bold;
                line-height: normal;
            }
        }
        
        .reserva__form {
            margin-top: 40px;
            
            .reserva__box {
                background-color: #00327E;
                padding: 25px;
            }
            
            h1 {
                color: #fff;
            }
            
            /*form .form-group .form-control {
                font-size: 14px;
                font-weight: normal;
            }
            
            form .form-group .form-group__chk{
                display: flex;
                flex-wrap: wrap;
                padding-left: 30px;
                position: relative;
                
                input {
                    left: 0;
                    position: absolute;
                }
                
                .invalid-feedback {
                    font-size: 12px;
                }
            }
            
            .form-group-add {
                .sp-select {
                    padding-bottom: 24px;
                }
            }
            
            .form-group--hide {
                display: none;
            }*/
        }
    }
    
    @media (min-width: 768px){
        .container_urbanova {
            display: flex;
            flex-wrap: nowrap;

            .reserva__logo {
                width: 50%;
            }

            .reserva__form {
                padding-left: 15px;
                padding-right: 15px;
                width: 50%;
                
/*                .form-group-add {
                    .sp-select {
                        padding-bottom: 7px;
                    }
                }*/
            }
        }
    }
    
    @media (min-width: 992px){
        .container_urbanova {
            .reserva__logo {
                width: 40%;
            }

            .reserva__form {
                width: 60%;

                .reserva__box {
                    margin-left: auto;
                    margin-right: auto;
                    width: 379px;
                }
                
                h1 {
                    font-size: 24px;
                }
            }
        }
    }
}

.cintillo {
    background: linear-gradient(90deg, rgba(90,150,215,1) 50%, rgba(188,110,60,1) 50%);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    
    .cintillo__box {
        padding: 12px 10px;
        
        a {
            align-items: center;
            display: flex;
            color: #fff;
            font-size: 12px;
            height: 100%;
            justify-content: space-around;
            text-align: center;
        }
    }
    
    .cintillo__box__1 {
        background-color: #5A96D7;
        
        a {
            text-decoration: none;
            font-size: 10px;
        }
    }
    
    .cintillo__box__2 {
        background-color: #BC6E3C;
    }
    
    @media (min-width: 768px){
        .cintillo__box__1 {
            a {
                font-size: 12px;
            }
        }
    }
}

.comunidad {
    background-color: #5A96D7;
    
    .row {
        align-items: center;
    }
    
    h2 {
        color: #fff;
        font-family: 'F37 Gruffy';
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 10px;
        margin-bottom: 30px;
        margin-top: 0;
        text-align: center;
    }
    
    .comunidad__info {
        
        i {
            background-color: transparent;
            border-top: 0;
            display: block;
            height: 0;
            position: relative;
            
            &.comunidad__info__ico__1 {
                border-bottom: 40px solid #F0EAE0;
                border-left: 0;
                border-right: 10px solid transparent;
                margin-left: auto;
                transform: rotate(-180deg);
                width: 40px;
            }
            
            &.comunidad__info__ico__2 {
                border-bottom: 30px solid #00327E;
                border-left: 8px solid transparent;
                border-right: 0;
                transform: rotate(-90deg);
                width: 30px;
                
                &:before {
                    background-color: transparent;
                    border-bottom: 28px solid #5A96D7;
                    border-left: 7px solid transparent;
                    border-right: 0;
                    border-top: 0;
                    content:'';
                    height: 0;
                    left: -7px;
                    position: absolute;
                    top: 1px;
                    width: 28px;
                }
            }
        }
        
        .comunidad__info__box {
            margin-bottom: 30px;
            
            img {
                margin-bottom: 15px;
            }
            
            p {
                color: #fff;
                
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }
    
    .comunidad__video {
        margin-top: 30px;
    }
    
    .comunidad__btn {
        margin-top: 30px;

        a {
            background-color: #00327E;
            color: #fff;
            display: inline-block;
            font-family: 'F37 Gruffy';
            font-size: 12px;
            text-decoration: none;
            padding: 16px 18px 20px 18px;
            position: relative;
            
            &:before {
                background-color: #5A96D7;
                content: '';
                height: 25px;
                left: -5px;
                position: absolute;
                transform: rotate(3deg);
                top: 48px;
                width: 250px;
            }
            
            span {
                position: relative;
            }
        }
    }
    
    @media (min-width: 992px){
        h2 {
            margin-bottom: 60px;
        }
    
        .row {
            margin-left: -28px;
            margin-right: -28px;
            
            .col-lg-5,
            .col-lg-7{
                padding-left: 28px;
                padding-right: 28px;
            }
        }
        
        .comunidad__info {
        
            i {
                &.comunidad__info__ico__1 {
                    border-bottom: 80px solid #F0EAE0;
                    border-right: 30px solid transparent;
                    width: 80px;
                }

                &.comunidad__info__ico__2 {
                    border-bottom: 60px solid #00327E;
                    border-left: 22px solid transparent;
                    width: 60px;

                    &:before {
                        border-bottom: 58px solid #5A96D7;
                        border-left: 22px solid transparent;
                        left: -21px;
                        width: 58px;
                    }
                }
            }

            .comunidad__info__box {
                margin-bottom: 60px;

                img {
                    margin-bottom: 30px;
                }
            }
        }
        
        .comunidad__video {
            margin-top: 0;
        }
        
        .comunidad__btn {
            margin-top: 50px;
        }
    }
}


@media (min-width: 992px){
    [data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos]{
        transition-duration: .25s;
    }
}