@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Outfit', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height:140%;
     color:#000000;
     background-color: #fff;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}


/*a:focus {text-decoration: none!important;}

a, a:active, a:focus { color: #212339; text-decoration: none;}
a:hover, a:active{color: #65AF64; text-decoration: none; cursor: pointer;}
/*a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

/*footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px!important; line-height: 20px;}*/
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Outfit', sans-serif; letter-spacing: 0;color: #144379;}
/* h1, .h1 {font-size:3rem; line-height:3.5rem; font-weight: 600;} */

h1, .h1 {font-size:1.875rem; line-height:120%; font-weight: 400;}
h2, .h2 {font-size:1.25rem; line-height:120%; font-weight: 400;}
h3, .h3 {font-size:1.3125rem; line-height:120%; font-weight: 400;}
h4, .h4 {font-size:1.125rem; line-height:120%; font-weight: 400;}
h5, .h5 {font-size:1rem; line-height:120%; font-weight: 400;}
h6, .h6 {font-size:0.8125rem; line-height:120%; font-weight: 400;}

p {font-size: 0.875rem;font-weight: 400;line-height:140%;}
.small {font-size: 0.6875rem;font-weight: 500;line-height:120%;}


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {

h1, .h1 {font-size:2.1875rem; line-height:120%; font-weight: 400;}
h2, .h2 {font-size:1.5625rem; line-height:120%; font-weight: 400;}
h3, .h3 {font-size:1.4375rem; line-height:120%; font-weight: 400;}
h4, .h4 {font-size:1.25rem; line-height:120%; font-weight: 400;}
h5, .h5 {font-size:1.125rem; line-height:120%; font-weight: 400;}
h6, .h6 {font-size:0.9375rem; line-height:120%; font-weight: 400;}

p {font-size: 1rem;font-weight: 400;line-height:140%;}
.small {font-size: 0.8125rem;font-weight: 500;line-height:120%;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

h1, .h1 {font-size:2.5rem; line-height:120%; font-weight: 400;}
h2, .h2 {font-size:1.875rem; line-height:120%; font-weight: 400;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


.text-alt{color: #144379;}

/* ===================================
    Background color
====================================== */

.bg-alt{background: #F1F1F1;}
.bg-mas{background: #2E5F97;}
.bg-ok{background: #66AF64;}
.bg-form{background: #E8EDF2;}

.bg-btn-ok{background: #1F4C51!important;}

.bg-degr{background: linear-gradient(180deg, #E8EDF2 0%, rgba(232, 237, 242, 0) 100%);}

.bg-tag-main{background: #144379;}
.bg-tag-venta{background: #2A98D8;}
.bg-tag-renta{background: #3665F1;}
.bg-tag-tipo{background: #FF992E;}
.bg-tag-w{background: #fff;}

.bg-white-card{background: #fff!important;}

/* ===================================
    Covers
====================================== */




/* ===================================
    Button
====================================== */

.btn-main {
  display: inline-block;
  padding: 8px 40px;
  background-color: #FB7C00;
  color: white;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-main::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  transform: skewX(-20deg);
}

.btn-main:hover::after {
  left: 120%;
}

.btn-main:hover {
  box-shadow: 0 6px 15px rgba(255, 121, 0, 0.4);
  color:#fff;
}

.btn-ok{
  background: #1F4C51!important;
}

.btn-ok:hover{
  box-shadow: 0 6px 15px rgba(31, 76, 81, 0.4)!important;
}

/*Link-main*/

.link-main {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  color: #144379;
  gap: 10px;
  transition: all 0.4s ease;
}

.link-main:hover {
  color: #FB7C00;
}

.icon-arrow {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #FB7C00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.icon-arrow-small {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #FB7C00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.icon-arrow svg{
  width: 50%;
}

.icon-arrow-small svg{
  width: 50%;
}

.link-main:hover .icon-arrow{
  background-color: #144379!important;
  transition: all 0.4s ease;
}

.link-main:hover .icon-arrow-small{
  background-color: #144379!important;
  transition: all 0.4s ease;
}


/*Btn cover*/

.content-btn-cover{
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.btn-cover {
  display: inline-block;
  padding: 5px 30px;
  background-color: #FB7C00;
  color: white;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  position: relative;
}

.btn-cover img{width: 30px;}
.btn-cover span{font-size: 14px;}

.btn-cover:hover{
  background: #144379;
  color: #FB7C00;
  transition: all 0.4s ease;
}


.icon-arrow-cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #144379;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: absolute;
  top:-20px;
  right: 0px;
}

.icon-arrow-cover svg{
  width: 50%;
}

.btn-cover:hover .icon-arrow-cover{
  background: #fff;
  transition: all 0.4s ease;
}

.btn-cover:hover .icon-arrow-cover path{
  stroke:#2E5F97;
  transition: all 0.4s ease;
}

/* ===================================
    Galerias
====================================== */


.content-pag{
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.content-btn-nav{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 20px;
}

.swiper-pagination-bullet{
   background:#144379;
   opacity:1;
   margin-right: 5px!important;
   margin-left: 8px!important;
}


.swiper-pagination-bullet-active{
 background: #FB7C00;
 box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.3);
}

/* ===================================
       Call to action
====================================== */

.cta{
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(180deg, #15447A 0%, #386AA3 30%);
    border-radius: 20px;
    min-height: 400px;
}

.cta-alt{
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(180deg, #65AF64 0%, #7DC68E 50%);
    border-radius: 20px;
    min-height: 400px;
}


.card-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
}



.card-image {
position: relative;
}

.figura{
  width: 100%;
height: 60px;
clip-path: ellipse(60% 100% at 50% 0%);
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
position: absolute;
top: -30px;
left: 0px;
background: #386AA3;
z-index: 100;
display: inherit;
}

.figura-alt{
  width: 100%;
height: 60px;
clip-path: ellipse(60% 100% at 50% 0%);
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
position: absolute;
top: -30px;
left: 0px;
background: #7DC68E;
z-index: 100;
display: inherit;
}


.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-top-right-radius:0px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.cta-alt .logo-ok-rentemos{
  width: 60%;
}

/* ===================================
    Lines
====================================== */

.border-bottom-orange{
  border-bottom: 2px solid #FB7C00;
}

/* ===================================
    hover
====================================== */

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 7s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Cards
====================================== */

.tag{
  padding: 5px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tag span{
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  line-height: 120%;
}

/*Card-propiedad-carrusel*/

.card-propiedad-carrusel{
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px #0000001A;
}

.card-propiedad-carrusel .img{
  width: 100%;
  height: 300px;
  position: relative;
}

.card-propiedad-carrusel .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.card-propiedad-carrusel .tags-content{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.tag-carrusel{
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  text-transform: uppercase;
}

.tag-carrusel span{
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 120%;
}

.card-propiedad-carrusel .caracteristicas-content{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap:10px;
}

.tag-caract{
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}

.tag-caract span{
  font-size: 12px;
  font-weight: 400;
  color:#00217C;
  line-height: 120%;
  margin-left: 5px;
}

.tag-caract .icon-tag{
  width: 20px!important;
  height: 20px!important;
}

.card-propiedad-carrusel .price-content{
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap:10px;
}

.card-propiedad-carrusel .inf .description{
  margin-top: 15px;
}

.card-propiedad-carrusel .inf .description p{
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: 'Outfit'!important;
    font-weight: 300;
}

/* ===================================
    Grid
====================================== */

.grid-1fr{grid-template-columns: 1fr;}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}


.grid-inputs{
  display: grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* ===================================
    Alertas
====================================== */

.noti-info{
  background: #e2ad4b;
  color:#fff;
  padding: 15px;
  width: 100%;
  transition: 0.7s ease all;
  border-radius: 5px;
}

/* ===================================
    Inputs
====================================== */

input::placeholder {
  color: #14437980!important;
}

textarea::placeholder {
  color: #14437980!important;
}


/* ===================================
    Paginador
====================================== */

.pagination{
  align-items: center;
}

.page-link{
  background: transparent;
  border: 1px solid #144379;
  color: #144379;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  cursor: pointer;
  border-radius: 3px;
}

.page-link:hover{
  background: #FB7C00;
  color: white;
}

.pagination .active{
width: 35px;
height: 35px;
background: #FB7C00;
border-color:#FB7C00!important;
color: white;
text-decoration: none;
border-radius: 3px;
}
.first .page-link{
  color:#144379;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
}

.pagination .disabled{
  opacity: .35;
cursor: auto;
pointer-events: none;
}



.pagination .disabled:focus{
  border: 0px;
}

.last .page-link{
  color:#144379;
  border-radius: 0px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  margin: 0px;
}

.prev .page-link{
  background: transparent;
  color: #144379;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: 0px;
}

.next .page-link{
  background: transparent;
  color: #144379;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: 0px;
}

.prev .page-link:hover{
  background: #FB7C00;
  color: #fff;
}


.next .page-link:hover{
  background: #FB7C00;
  color: #fff;
}

.last .page-link:hover{
  color: #FB7C00;
  background: transparent !important;

}

.first .page-link:hover{
  color: #FB7C00;
  background: transparent !important;

}


/*Focus*/


.pagination a:focus{
outline: none; box-shadow: none;
}

.next a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}
.prev a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}

.last a:focus{
outline: none; box-shadow: none;
background: transparent;
}

.first a:focus{
outline: none; box-shadow: none;
background: transparent;
}


/* ===================================
    Testimoneos
====================================== */


/*carrusel testimoneos */

.degradado-testimoneo{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  background: #FFF;
  background: linear-gradient(91deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
}

.degradado-testimoneo-nosotros{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  background: #FFF;
  background: linear-gradient(91deg,rgba(241, 241, 241, 1) 0%, rgba(241, 241, 241, 0) 10%, rgba(241, 241, 241, 0) 90%, rgba(241, 241, 241, 1) 100%);
}




.card-testimoneo{
  background: #F4F4F6;
  border: 1px solid #BBBBBB;
  border-radius: 20px;
  padding: 15px;
  position: relative;
}

.card-testimoneo .icon-test{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2E5F97;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:8px;
  right: 8px;
}

.card-testimoneo .icon-test img{
  width: 60%;
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  animation: scroll 30s linear infinite;
}

.carousel-track-right {
  display: flex;
  animation: scroll-right 30s linear infinite;
}


.item {
  min-width: 280px;
  height: auto;
  margin: 0 10px;
}



/* Animación */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 3));
  }
}

@keyframes scroll-right {
  100% {
    transform: translateX(0);
  }
  0% {
    transform: translateX(calc(-300px * 3));
  }
}





/* ===================================
    Responsive
====================================== */
/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.cta-alt .logo-ok-rentemos{width: 150px;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

/*Grid*/
.grid-inputs{grid-template-columns: 50% auto;}

.sm-grid-1fr{grid-template-columns: 1fr;}
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-40{grid-template-columns: 40% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}


.cta-alt .logo-ok-rentemos{width: 200px;}

}
/* md  */ @media (min-width: 768px) {

/*Grid*/
.grid-inputs{grid-template-columns: 50% auto;}

.md-grid-1fr{grid-template-columns: 1fr;}
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}

/*--CTA---*/
.cta{grid-template-columns: 50% auto;background: linear-gradient(90deg, #15447A 0%, #386AA3 100%);}
.cta-alt{grid-template-columns: 50% auto;background: linear-gradient(90deg, #65AF64 0%, #7DC68E 100%);}
.card-image img {
    object-position: left;
    border-top-right-radius:20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0px;
}
.cta-alt .logo-ok-rentemos{width: 250px;}
.figura{display: none;}
.figura-alt{display: none;}
.card-content{padding: 40px;}

.btn-cover {padding: 5px 40px;}
.btn-cover img{width: 40px;}
.btn-cover span{font-size: 16px;}

.tag span{font-size: 15px;}

.icon-arrow-cover {width: 40px;height: 40px;}
.icon-arrow {width: 35px;height: 35px;}

.card-testimoneo .icon-test{width: 40px;height: 40px;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {


/*Grid*/
.grid-inputs{grid-template-columns: 1fr;}

.lg-grid-1fr{grid-template-columns: 1fr;}
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}

/*--------*/



} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.grid-inputs{grid-template-columns: 50% auto;}
.xl-grid-50{grid-template-columns: 1fr 1fr;}


}
/* xxl */ @media (min-width: 1400px) {}