/* ======================= // Estilos Font Page \\ ======================= */
/* agregar estilos a la clase main-header */
.main-header {
  /* background: url(../img/landingPage/barrio.jpeg); */
  background: url(../img/landingPage/abstrac4.jpg);
  /* background-color: #14213d; */
  /* tamaño completo de pantalla */
  background-size: cover;
  /* Atributo para superponer el color de la capa overlay en todo el contenedor */
  position: relative;
  min-height: 467px;
  margin-top: 66px;
  border-bottom: 1px solid var(--primary-color);
}

/* Agregar estilos a la capa de contraste del fondo y el color del contenido */
.background-overlay {
  /* copia el color de la pagina https://flatuicolors.com/palette en formato rgba; y modifica las tonalidades del color */
  background: rgba(47, 54, 64, .5);
  /* el grado de intencidad se modifica con e ultimo valor */
  /* atributos para que el overlay ocupe todo el contenedor en cualquier tamaño de pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Atributo para superponer el color de la capa overlay en todo el contenedor */
  position: absolute;
}

#carouselFrontPage .carousel-caption {
  color: var(--basic-color);
}

.carousel-overlay {
  height: auto;
}


/* ======================= // Estilos Portafolio \\ ======================= */
/* ------------------------------- */
/* ------ HEADER ------ */
/* ------------------------------- */
.headerDS {
  padding: 40px 0;
}

.headerDS form {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.headerDS .barra-busqueda {
  width: 70%;
  height: 40px;
  line-height: 40px;
  background: var(--basic-color);
  padding: 0 20px;
  border-radius: 100px;
  border: none;
  text-align: center;
  font-size: 16px;
}

.headerDS .categorias {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.headerDS .categorias a {
  color: var(--tertiary-color);
  margin: 10px 20px;
  font-size: 18px;
  font-weight: 500;
}

.headerDS .categorias a.activo {
  color: var(--primary-color);
  font-weight: bold;
}


/* ------------------------------- */
/* ------ GRID ------ */
/* ------------------------------- */
article.grid {
  position: relative;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s linear 1s;
}

article.grid.imagenes-cargadas {
  opacity: 1;
}

article.grid .item {
  position: absolute;
  display: block;
  padding: 0;
  margin: 10px;
  width: calc(33.333333% - 20px);
}

article.grid .item-contenido {
  position: relative;
}

article.grid .item img {
  width: 100%;
  cursor: pointer;
  vertical-align: top;
}

.overlay-services {
  cursor: pointer;
  color: var(--basic-color);
  text-align: center;
}

.titleServicesCard {
  font-family: GillSansBold;
}

.txtCardServices {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}

.modalTitle {
  text-align: center;
}

.listadoServices {
  list-style: none;
}

.listadoServices i {
  margin-right: 5px;
}
.bodyServicesLP p {
  text-align: justify;
}


/* ===================== STYLES - SECTION PROPERTIES ===================== */
.tabContentInmueblesNovedades {
  min-height: 200px;
}

.navTabInmueblesNovedades.nav-tabs .nav-item, .navTabInmueblesNovedades.nav-tabs .nav-item .nav-link {
  color: var(--basic-color);
}

.navTabInmueblesNovedades.nav-tabs.clTertiaryColor .nav-item, .navTabInmueblesNovedades.nav-tabs.clTertiaryColor .nav-item .nav-link {
  color: var(--tertiary-color);
}

.navTabInmueblesNovedades.nav-tabs .nav-link.active, .navTabInmueblesNovedades.nav-tabs .nav-item.show .nav-link {
  color: var(--primary-color);
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 3px solid var(--primary-color);
}

.sectionBtnList {
  width: 100%;
  display: block;
  align-items: end;
  justify-content: end;
  margin-top: 80px;
  text-decoration: none;
}

.tarjetaInmuebleLP {
  font-family: GillSans;
  cursor: pointer;
}

.tarjetaInmuebleLP h4 {
  color: var(--primary-color);
  font-family: GillSansBold;
  text-align: center;
}

.tarjetaInmuebleLP p {
  margin: 5px auto;
  font-size: 13px;
}

.tarjetaInmuebleLP i {
  margin-right: 4px;
}


/* ===================== STYLES - SECTION NOTICES ===================== */
.noticeViewMore {
  float: inline-end;
  color: var(--tertiary-color);
  cursor: pointer;
}

.publicationDateNotice {
  display: inline;
  color: var(--tertiary-color);
  font-family: GillSannsBoldItalic;
  font-weight: bold;
  font-size: 14px;
}

.parrafosLimited {
  text-align: justify;
}

/* ===================== STYLES - ABOUT US ===================== */
main.mainAboutUs article {
  box-shadow: 1px 1px 5px 1px gray;
}

.servicesPersonalizados {
  background-color: var(--base-color);
  padding: 40px 0 50px 0;
  text-align: center;
}

.servicesPersonalizados .row .col-md-2:hover {
  transform: scale(1.04);
  transition: .3s;
}

.iconosCharacteristic i {
  font-size: 75px;
  color: var(--base-color);
}

.iconosCharacteristic i:hover, .iconosCharacteristic i.active {
  transform: scale(1.15);
  transition: .5s;
  color: var(--primary-color);
}

.iconosCharacteristic p {
  margin: 0;
}

.hitosAboutUs strong {
  cursor: pointer;
}

.hitosAboutUs i.active {
  color: var(--primary-color);
  font-weight: bold;
  transform: scale(1.15);
  transition: .5s;
}

.text-print-slider {
  color: var(--basic-color);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}





/* ////////////////////////////////////// RESPONSIVE ////////////////////////////////////// */
/* Portafolio servicios */
@media (max-width: 768px) {
  .txtCardServices p {
    display: none; /* Oculta todos los elementos dentro del contenedor */
  }
  
  .txtCardServices h3 {
    display: block; /* Muestra solo los h1 dentro del contenedor */
    font-size: 12.5px; /* Reduce el tamaño de los h1 */
  }
  .img-certificated-footer {
    width: 30%;
  }
}

















































































/* --- Botón en diamante */
button.btnDiamante {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition: 0.1s;
  background-color: transparent;
  border: none;
  font-size: 12px;
  font-weight: bold;
  color: var(--basic-color);
}

#clip {
  color: var(--primary-color);
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 5px double var(--color);
  box-shadow: inset 0px 0px 15px var(--tertiary-color);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
  position: absolute;
  transition: 0.2s;
  background-color: var(--primary-color);
  top: 35%;
  width: 11%;
  height: 30%;
}

#leftArrow {
  left: -13.5%;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
  clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

button.btnDiamante:hover #rightArrow {
  background-color: #27c39f;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

button.btnDiamante:hover #leftArrow {
  background-color: #27c39f;
  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: var(--primary-color);
  box-shadow: inset 1px 1px 8px var(--primary-color);
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3.0em;
}

#leftBottom {
  top: 2.10em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

button.btnDiamante:hover #leftTop {
  animation: 0.1s ease-in-out 0.05s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

button.btnDiamante:hover #rightTop {
  animation: 0.1s ease-in-out 0.15s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

button.btnDiamante:hover #rightBottom {
  animation: 0.1s ease-in-out 0.25s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

button.btnDiamante:hover #leftBottom {
  animation: 0.1s ease-in-out 0.35s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

button.btnDiamante:hover .corner {
  transform: scale(1.25) rotate(45deg);
}

button.btnDiamante:hover #clip {
  animation: 0.2s ease-in-out 0.55s both greenLight8;
  --color: #27c39f;
}

@keyframes changeColor8 {
  from {
    background-color: var(--primary-color);
  }

  to {
    background-color: #27c39f;
  }
}

@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }

  to {
    box-shadow: 0 0 2px #27c39f;
  }
}

@keyframes greenLight8 {
  from {}

  to {
    box-shadow: inset 0px 0px 32px #27c39f;
  }
}

@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(-10px);
  }
}


/* ---- Botón Premium */
/* inspired from this svgbackgrounds.com/ */
button.btnPremium {
  width: fit-content;
  display: flex;
  padding: 0.8em 1.1em;
  gap: 0.4rem;
  border: none;
  font-weight: bold;
  border-radius: 30px;
  cursor: no-drop;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
  background: linear-gradient(15deg,
      #880088,
      #aa2068,
      #cc3f47,
      #de6f3d,
      #f09f33,
      #de6f3d,
      #cc3f47,
      #aa2068,
      #880088) no-repeat;
  background-size: 300%;
  background-position: left center;
  transition: background 0.3s ease;
  color: #fff;
}

button.btnPremium:hover {
  background-size: 320%;
  background-position: right center;
}

button.btnPremium:hover svg {
  fill: #fff;
}

button.btnPremium svg {
  width: 23px;
  fill: #f09f33;
  transition: 0.3s ease;
}