/* FUENTE PARA CABECERA
------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

.fuenteTitulo {
  font-family: "Lobster", cursive;
}

#callsToAction123 .row {
  display: flex;
  flex-wrap: wrap; /* mantiene la adaptación responsive */
}

#callsToAction123 .col-lg-4 {
  display: flex; /* hace que la columna use flex */
  flex-direction: column; /* mantiene apilado vertical */
}

#callsToAction123 .call-to-action {
  flex: 1; /* fuerza a que todas ocupen la misma altura */
  display: flex;
  flex-direction: column; /* contenido interno sigue en columna */
  justify-content: space-between; /* distribuye el contenido */
}

/* CAMBIANDO VIDAS
--------------------------------------- */

/* Texto Cambiando Vidas */
#igou {
  font-size: 6vw; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
  margin-bottom: 20px;
  border-bottom: 5px solid #ffffff;
  color: #ffffff;
  /*text-shadow: 10px 10px 15px rgba(0, 0, 0, 1.5) !important;*/ /* Sombra a la derecha y por debajo */
  position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
}

/* Linea bajo el texto Cambiando Vidas */
#igou::after {
  content: "";
  position: absolute;
  bottom: -5px; /* Ajusta según el grosor de la línea */
  left: 0;
  width: 100%;
  height: 5px; /* Igual al grosor de la línea */
  background-color: #ffffff; /* Color de la línea */
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
}

/* Texto Te Ayudamos A Cambiar De Vida */
#i749 {
  font-size: 2.8vw !important;
  white-space: nowrap !important; /* evita el salto de linea */
}

@media (min-width: 1151px) {
  /* Texto Te Ayudamos A Cambiar De Vida */
  #i749 {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
}

@media (max-width: 600px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 90%; /* linea blanca de debajo del texto */
    font-size: 9vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
  /* Texto Te Ayudamos A Cambiar De Vida */
  #i749 {
    font-size: 3.5vw !important;
  }
}

@media (min-width: 601px) and (max-width: 992px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    font-size: 7.5vw !important; /* Ajuste a un tamaño más razonable */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }

  /* Línea bajo el texto Cambiando Vidas */
  #igou::after {
    content: ""; /* Requerido para pseudo-elementos */
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%; /* Asegura que la línea cubra todo el ancho */
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 993px) and (max-width: 1024px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 100%; /* linea blanca de debajo del texto */
    font-size: 7vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
  /* Texto Te Ayudamos A Cambiar De Vida */
  #i749 {
    font-size: 2.5vw !important;
  }
}

@media (min-width: 1025px) and (max-width: 1421px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 85%; /* linea blanca de debajo del texto */
    font-size: 8vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 1833px) and (max-width: 2040px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 90%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 2041px) and (max-width: 2333px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 108%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 2334px) and (max-width: 2500px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 110%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 2501px) and (max-width: 2710px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 122%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 2711px) and (max-width: 3100px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 135%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

@media (min-width: 3101px) {
  /* Texto Cambiando Vidas */
  #igou {
    width: 150%; /* linea blanca de debajo del texto */
    font-size: 6vw !important; /* Cambia a vw para que se ajuste proporcionalmente al ancho de la pantalla */
    margin-bottom: 20px;
    border-bottom: 5px solid #ffffff;
    color: #ffffff;
    position: relative; /* Necesario para que el ::after se posicione relativo al h1 */
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
  }
  /* Linea bajo el texto Cambiando Vidas */
  #igou::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta según el grosor de la línea */
    left: 0;
    width: 100%;
    height: 5px; /* Igual al grosor de la línea */
    background-color: #ffffff; /* Color de la línea */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); /* Sombra gruesa */
  }
}

/* MANTENER 
---------------------------------------- */

.note-editor {
  border: 1px solid #ccc;
}
.form-group textarea {
  width: 100%;
}
.desactivado {
  color: #ccc;
}
#footer p,
.contact_data_footer,
#footer li {
  color: #ffffff !important;
}
a:active,
a:focus {
  outline: none;
  color: inherit;
}
body,
ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none !important;
  padding: 0;
}
ul li {
  margin-bottom: 5px;
}
a {
  text-decoration: none !important;
}
a:hover {
  text-decoration: none !important;
}
.no-separation {
  margin: unset !important;
  padding: unset !important;
}
.btn-primary {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
  --hover: #000000 !important;
  --disabled: #000000 !important;
  --active: #000000 !important;
  --selected: #000000 !important;
}
#header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active {
  background: inherit !important;
}
.feature-box.feature-box-style-2 .feature-box-icon [class*="fa-"],
.feature-box.feature-box-style-2 .feature-box-icon .icons,
.list.list-icons li > [class*="fa-"]:first-child,
.list.list-icons li a:first-child > [class*="fa-"]:first-child,
.list.list-icons li > .icons:first-child,
.list.list-icons li a:first-child > .icons:first-child {
  color: inherit !important;
  background: inherit !important;
  background-color: inherit !important;
}
#header
  .header-nav-main:not(.header-nav-main-mobile-dark)
  nav
  > ul
  > li
  > a.active {
  background: inherit;
}
.logo_header {
  max-height: 30px;
}
.logo_text {
  display: flex;
  margin-top: 2vh;
  font-size: 45px;
  font-weight: bolder;
  margin-left: -12px;
  align-items: center;
}
.container_iconos_mobile {
  display: flex;
}
.logo_text img {
  height: 50px;
}
.logo_pie {
  max-width: 200px;
}
.logo_pie_text {
  margin-top: 2vh;
  font-size: 70px;
  font-weight: bolder;
}
.logo_pie_text span {
  font-size: 80px;
}
.ia_logo {
  max-width: 70px;
}
.hide {
  display: none !important;
}

/* TEMPLATE 2 
--------------------------------- */

.logo_footer {
  max-width: 200px;
}

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

.footer_form button {
  width: 98%;
  margin-top: 10px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

.footer_form button:hover {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
}

.contenedor_botones_form_footer {
  display: flex;
  flex-direction: row;
}

.contenedor_botones_form_footer label {
  color: #ffffff;
}

.contenedor_botones_form_footer div {
  margin: 5px;
  width: 100%;
}

.social-icons {
  text-align: center;
}

/* TEAM SECTION 
-------------------------------------*/

.team_section {
  background-color: #ffffff;
  padding: 50px;
  display: flex;
  justify-content: center;
}

.team_section img {
  max-height: 60vh;
  border-radius: 5px;
  max-width: 80%;
}

.container_texto_equipo {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 30px 0 30px 30px;
  text-align: center;
}

.container_texto_equipo h2 {
  font-size: 30px;
  color: #000000;
}

.container_texto_equipo a {
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

.container_texto_equipo a:hover {
  background-color: #ffffff;
  color: #000000 !important;
  border-color: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", Arial, sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease;
  text-shadow: 2px 2px black;
  font-size: 1.1vw; /* fuente del menu */
  padding-top: 11px; /* camvios v2 en margenes */
}

header.sticky {
  background-color: black; /* Fondo negro al hacer scroll */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para un efecto de elevación */
}

header.sticky nav ul li a {
  color: #ffffff; /* Cambiar el color del texto al hacer scroll */
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el logo y el subtítulo */
}

header.sticky .logo-subtitle {
  color: #ffffff; /* Cambia el color del subtítulo al hacer scroll */
  display: none !important; /* Oculta el subtítulo cuando el header tiene la clase 'sticky' */
}

.logo {
  height: auto; /* Altura ajustable inicialmente */
  overflow: hidden; /* Oculta el contenido desbordado */
}

.logo img {
  height: 5vw;
  transition: transform 0.3s ease; /* Suaviza el cambio de altura o posición */
}

.sticky .logo {
  height: 4vw; /* Ajusta la altura del contenedor para recortar la parte inferior */
}

.sticky .logo img {
  transform: translateY(
    0%
  ); /* Mueve la imagen hacia arriba para ajustar el recorte */
}

.hipoteca_text1 {
  min-height: 88px;
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav {
  display: flex;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  position: relative; /* Necesario para el submenú */
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
  position: relative; /* Necesario para el submenú */
}

.nav-links li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.3
  ); /* Fondo blanco semi-transparente al pasar el mouse */
  border-radius: 5px;
  color: white !important;
}

.sticky .nav-links li a:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.3
  ) !important; /* Fondo gris claro al pasar el mouse cuando es sticky */
}

/* SUBMENU
--------------- */

.has-submenu {
  position: relative; /* Necesario para colocar el submenu debajo */
}

.submenu {
  list-style: none;
  position: absolute;
  top: 100%; /* Justo debajo del elemento principal */
  left: 0;
  padding: 0;
  margin: 0;
  display: none; /* Oculto por defecto */
  min-width: 150px; /* Ancho mi­nimo del submenu */
  z-index: 1000; /* Asegura que el submenu quede por encima de otros elementos */
  background: rgba(0, 0, 0, 0, 0.5);
}

.submenu li {
  margin: 0; /* Resetea el margen */
  width: 100%;
}

.submenu li a {
  color: white;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 5px;
  margin-top: 26px !important;
  margin-bottom: -25px;
}

.submenu li a:hover {
  width: 100%;
  /*background-color: #555 !important;*/
  background-color: #e51d1d !important; /* submenu en hover rojo */
  border-radius: 5px;
  color: white !important;
  text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5) !important;
  margin-top: 26px;
  margin-bottom: -25px;
}

.sticky .submenu li a:hover {
  width: 100%;
  /*background-color: #555 !important;*/
  background-color: #e51d1d !important; /* submenu en hover rojo */
  border-radius: 5px;
  color: white !important;
  text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5) !important;
  margin-top: 26px;
  margin-bottom: -25px;
}

/* Mostrar el submenu al pasar el raton */
.nav-links li:hover .submenu {
  display: block; /* Muestra el submenu */
}

/* Estilos iniciales para la hamburguesa */
.hamburger {
  display: none; /* oculto por defecto en pantallas grandes */
  flex-direction: column;
  cursor: pointer;
}

/* Anula el margin-top cuando aparece la clase sticky */
.sticky .hamburger {
  margin-top: 0 !important; /* Anula el margen cuando esta sticky */
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: white;
  margin: 4px;
  transition: 0.3s;
}

/* Efectos para animar el i­cono de la hamburguesa */
.hamburger.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* ESTADISTICAS
------------------------ */

.statistics-container {
  width: 80%;
  margin: 60px auto; /* Centra el contenedor */
  text-align: center;
}

.statistics-header,
.reviews-header {
  margin-bottom: 20px;
  display: inline-block;
}

.statistics-header h2,
.reviews-header h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  background-color: hsla(240, 7%, 62%, 1);
  padding: 8px;
  border-radius: 5px;
  color: #ffffff;
}

.statistics-header p,
.reviews-header p {
  font-size: 1.2em;
  color: #555;
}

.statistics-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Imagen de fondo con superposicion de color blanco */
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("/Plantillas/A10/assets/fotoCiudad.jpg");
  background-size: cover;
  background-position: center;
}

.stat {
  width: 30%;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}

.stat h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.stat p {
  font-size: 1.2em;
}

.statistics-button {
  margin-top: 20px; /* Espacio encima del boton */
}

.btn-discover {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
}

.btn-discover:hover {
  background-color: #333; /* Un gris mas claro al pasar el mouse */
}

/* REVIEWS
------------------ */

.reviews-section {
  width: 80%;
  margin: 60px auto;
  text-align: center;
}

.reviews-content {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 20px;
}

.reviews-content p {
  margin: 0;
  font-size: 1.2em;
  color: #555;
}

.review-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.review-image {
  width: 50%; /* La imagen ocupa el 50% del ancho del contenedor */
  height: auto; /* Mantiene la proporcion de la imagen */
  display: block; /* Hace que la imagen sea un bloque para poder centrarla */
  margin-left: auto; /* Centra la imagen horizontalmente */
  margin-right: auto; /* Centra la imagen horizontalmente */
}

.review-text {
  flex: 1;
  text-align: left;
}

.review-text h3 {
  margin: 0 0 10px;
  font-size: 1.5em;
}

.review-text p {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #555;
}

.btn-read-more {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.btn-read-more:hover {
  background-color: #0ccc2c; /* no usado */
}

#btn-read-more-resena {
  background-color: red;
  color: white;
  border: 2px solid red;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 15px; /* Bordes redondeados */
}

#btn-read-more-resena:hover {
  background-color: transparent !important;
  color: red;
  border: 2px solid red;
  border-radius: 15px; /* Asegura que el hover mantenga los bordes redondeados */
}

.reviews-header h2,
.statistics-header h2 {
  display: inline-block;
  padding: 10px 100px; /* Espacio alrededor del texto */
  border-radius: 5px; /* Esquinas redondeadas */
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
}

/* SLIDE DE RESENAS
--------------------------------------*/

/* Estilos generales de la seccion */

.reviews-slider-section {
  width: 100%;
  background-color: #ffffff !important;
  padding: 50px 0;
  text-align: center;
  position: relative;
}

.slider-title {
  font-size: 2em;
  margin-bottom: 20px;
  color: white; /* Texto del título en blanco */
}

.slider-container {
  margin-top: -6em !important; /* prueba */
  margin-bottom: -3em !important; /* prueba */
  width: 75% !important; /* Ajusta según sea necesario */
  min-height: 100% !important; /* Permite que crezca con el contenido */
  margin: 0 auto;
  border: 2px solid #ffffff !important;
  border-radius: 5px;
  background-color: #ffffff !important;
  position: relative;
  padding: 50px !important;
  overflow: hidden !important; /* Evita cualquier desbordamiento */
  height: 250% !important; /* Permite que la altura se ajuste automáticamente */
}

/* @media especial para que no se vean flechas cortadas entre estas dimensiones */

@media (min-width: 601px) and (max-width: 635px) {
  .slider-container {
    margin-top: -6em !important; /* prueba */
    margin-bottom: auto !important; /* prueba */
    /*width: 77% !important;*/ /* Ajusta según sea necesario */
    width: 100% !important; /* Ajusta según sea necesario */
    min-height: 100% !important; /* Permite que crezca con el contenido */
    margin: 0 auto;
    border: 2px solid #ffffff !important;
    border-radius: 5px;
    background-color: #ffffff !important;
    position: relative;
    padding: 50px !important;
    overflow: hidden !important; /* Evita cualquier desbordamiento */
    height: 250% !important; /* Permite que la altura se ajuste automáticamente */
  }
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  align-items: stretch !important; /* Asegura que todos los slides tengan la misma altura */
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  min-height: auto; /* Permite que crezca segun el contenido */
}

.slide p {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.slide h3 {
  font-size: 1.5em;
  color: #555;
}

.quote {
  font-size: 0.8em !important;
  line-height: 1.5;
}

.autor {
  font-size: 1em !important;
  color: #555;
}

/* Estilos para los botones */

.prev-slide,
.next-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333 !important;
  color: white;
  border: none;
  padding: 0px;
  cursor: pointer;
  font-size: 1.5em;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
}

.prev-slide {
  left: 10% !important; /* Mueve el boton a la izquierda del slider */
}

.next-slide {
  right: 10% !important; /* Mueve el boton a la derecha del slider */
}

.prev-slide:hover,
.next-slide:hover {
  background-color: #333;
}

/* Para pantallas grandes (HD) */
@media (min-width: 1024px) {
  .slider-wrapper {
    width: 33.3%;
  }
}

/* Para pantallas medianas (laptop) */
@media (max-width: 1023px) {
  .slider-wrapper {
    width: 50%;
  }
  .quote {
    font-size: 0.9em !important;
    line-height: 1.5;
  }
  .autor {
    font-size: 1.2em !important;
    color: #555;
  }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
  .slider-wrapper {
    width: 100%;
  }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
  .slider-container {
    margin-top: -7em !important; /* prueba */
    margin-bottom: auto !important; /* prueba */
  }
}

/* Estilos para dispositivos menores a 769px */
@media (max-width: 768px) {
  .prev-slide,
  .next-slide {
    width: 30px; /* Ajusta el tamaño de los botones */
    height: 30px; /* Ajusta el tamaño de los botones */
    font-size: 1.5em; /* Ajusta el tamaño de la fuente */
    top: 45% !important; /* Ajusta este valor según lo que necesites en pantallas pequeñas */
  }
  .prev-slide {
    left: 2% !important; /* Mueve el botón más cerca del borde izquierdo */
  }
  .next-slide {
    right: 2% !important; /* Mueve el botón más cerca del borde derecho */
  }
}

/* Estilos para las estrellas de resenas */
.stars {
  display: flex;
  justify-content: center;
  margin: 10px 0; /* Espacio entre la imagen y el texto */
}

.star {
  font-size: 1.5em; /* Tamaño de las estrellas */
  color: #333333; /* Color gris oscuro */
  margin: 0 2px; /* Espacio entre las estrellas */
  margin-top: -1em !important;
  margin-bottom: -1em !important;
}

/* Estilos generales de la sección del equipo */
.team-section {
  width: 100%;
  background-color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
  position: relative;
}

/* Animacion para que team-section entre desde la derecha */
.empleadosFX {
  opacity: 0; /* Oculta la sección inicialmente */
  transform: translateX(-100px); /* Desplaza la sección a la izquierda */
  transition: opacity 2s ease-out, transform 2s ease-out; /* Ajusta la duración de la transición */
}

.empleadosFX.visible {
  opacity: 1; /* Hace la sección visible */
  transform: translateX(0); /* Lleva la sección a su posición inicial */
}

.team-title {
  font-size: 2em;
  background-color: #e0e0e0; /* Fondo gris */
  padding: 10px 20px;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 5px;
}

.team-info {
  font-size: 1.2em;
  color: #555;
  margin-bottom: 30px;
}

.team-slider-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.team-slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.team-card {
  min-width: 25%; /* 4 tarjetas visibles a la vez */
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

.team-card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.team-card h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.team-card p {
  font-size: 1em;
  color: #777;
}

/* Botones de navegacion del slider */
.prev-team-slide,
.next-team-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
  color: white;
  border: none;
  padding: 0px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.5em;
  width: 40px;
  height: 40px;
  z-index: 10; /* Asegura que los botones estan por encima del contenido */
  opacity: 0.8; /* Opcional: ligeramente transparente */
}

.prev-team-slide {
  left: 5% !important; /* Posiciona el boton a la izquierda fuera del slider */
}

.next-team-slide {
  right: 5% !important; /* Posiciona el boton a la derecha fuera del slider */
}

.prev-team-slide:hover,
.next-team-slide:hover {
  background-color: #333;
  opacity: 1; /* Restablece la opacidad al hacer hover */
}

.team-button,
.porperty-button {
  margin-top: 20px;
}

.btn-team-page {
  display: inline-block;
  padding: 10px 20px;
  background-color: white;
  color: black;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
  border: 2px solid black;
}

.btn-porperty-page {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
  border: 1px solid white;
}

.btn-team-page:hover,
.btn-porperty-page:hover {
  background-color: #333;
  color: #ffffff;
}

/* ¿CUANTO VALE MI CASA?
------------------------------------------*/

.home-value-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-value-image {
  width: 100%;
  height: 33vh !important;
  object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
  transition: transform 0.3s ease; /* Transición suave para el efecto */
}

@media (max-width: 412px) {
  .home-value-image {
    width: 100%;
    height: 35vh !important;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
    transition: transform 0.3s ease; /* Transición suave para el efecto */
  }
}

@media (min-width: 666px) and (max-width: 767px) {
  .home-value-image {
    width: 100%;
    height: 50vh !important;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
    transition: transform 0.3s ease; /* Transición suave para el efecto */
  }
}

.home-value-section:hover .home-value-image {
  transform: scale(1.1); /* Aplica un pequeño zoom al pasar el mouse */
  filter: brightness(1.2); /* Incrementa el brillo de la imagen */
}

.home-value-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra el botón */
  padding: 15px 30px;
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 1.5em;
  border-radius: 5px;
  border: 2px solid white; /* Borde blanco alrededor del botón */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.home-value-button:hover {
  background-color: #333; /* Cambia el fondo al pasar el mouse */
  border-color: #f0f0f0; /* Cambia el color del borde al pasar el mouse */
}

/* PREMIOS
-------------------------------------------*/

.awards-section {
  width: 100%;
  padding: 40px 0;
  text-align: center;
  background-color: #f9f9f9; /* Fondo claro */
  margin: 0 auto;
}

.awards-section {
  color: black !important; /* Color de texto negro para toda la sección */
}

.awards-caption {
  color: black; /* Asegúrate de que el texto del pie de foto sea negro */
}

.awards-list {
  list-style-type: none; /* Elimina los puntos de la lista */
  padding: 0; /* Elimina el padding de la lista */
}

.awards-list li {
  color: black; /* Color de texto negro para cada premio en la lista */
  margin-bottom: 10px; /* Espaciado entre los elementos de la lista */
}

.award-rank {
  font-weight: bold; /* Hace que el rango del premio sea mas destacado */
}

/* Animacion de awards-section */
.awards-section {
  opacity: 0; /* Oculta la seccion inicialmente */
  transform: translateX(100px); /* Desplaza la sección a la derecha */
  transition: opacity 2s ease-out, transform 2s ease-out; /* Suaviza la transición */
}

/* Clase para activar la animacion */
.awards-section.visible {
  opacity: 1; /* Hace la sección visible */
  transform: translateX(0); /* Lleva la sección a su posición inicial */
}

.awards-description {
  font-size: 1.2em;
  color: #555;
  margin: 0 auto 40px;
  width: 60%; /* Centrado y margen inferior */
}

.awards-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* Espacio entre columnas */
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap; /* Asegura que sea responsivo */
}

.awards-left,
.awards-right {
  flex: 1; /* Ambas columnas ocupan el mismo espacio */
  max-width: 50%; /* Ambas columnas no exceden el 50% del contenedor */
  box-sizing: border-box; /* Incluye padding y border en el width */
  text-align: center; /* Centra el contenido */
}

.awards-left {
  padding: 10px;
}

.award-image {
  width: 100%; /* La imagen ocupa todo el ancho del contenedor */
  height: auto;
  border-radius: 5px; /* Bordes redondeados */
}

.award-caption {
  font-size: 1em;
  color: #555;
  margin-top: 10px;
}

.botonDescubre {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap; /* Para que los botones se ajusten en varias filas si es necesario */
}

@media (max-width: 480px) {
  .review-image {
    width: 90%; /* Para pantallas muy pequeñas, la imagen ocupará el 90% del ancho */
  }
}

/* Ocultar el menu en dispositivos moviles */
@media (max-width: 768px) {
  .statistics-container {
    width: 100%;
  }
  .statistics-section {
    width: 100%;
  }
  .stat {
    width: 100%;
  }
  .banner .container {
    width: 100%;
  }
  .reviews-section {
    width: 100%;
  }
  .review-item {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .review-image {
    width: 70%; /* Cambia el ancho de la imagen al 70% para pantallas más pequeñas */
    margin-bottom: 15px;
  }
  .review-text {
    text-align: center;
  }
  .slider-container {
    width: 90%; /* 100% en móviles */
    padding: 18px;
  }
  .prev-slide,
  .next-slide {
    top: 90%;
  }
  .reviews-header h2,
  .statistics-header h2 {
    padding: 10px 10px;
  }
  .team-card {
    min-width: 100%; /* Mostrar una tarjeta a la vez en móviles */
  }
  .team-slider-container {
    width: 100%;
  }
  .awards-title {
    width: 100%; /* Ocupa todo el ancho en móviles */
  }
  .awards-description {
    width: 90%; /* Aumenta el ancho del párrafo en móviles */
  }
  .awards-content {
    flex-direction: column; /* Las columnas se apilan en pantallas pequeñas */
    width: 100%; /* Ocupa todo el ancho en móviles */
  }
  .awards-left,
  .awards-right {
    max-width: 100%; /* Cada columna ocupa el 100% del ancho disponible */
  }
}

@media (max-width: 768px) {
  .logo {
    height: auto; /* Altura ajustable inicialmente */
    overflow: hidden; /* Oculta el contenido desbordado */
  }
  .logo img {
    height: 9vw;
    transition: transform 0.3s ease; /* Suaviza el cambio de altura o posición */
  }
  .sticky .logo {
    height: 8vw; /* Ajusta la altura del contenedor para recortar la parte inferior */
  }
  .sticky .logo img {
    transform: translateY(
      0%
    ); /* Mueve la imagen hacia arriba para ajustar el recorte */
  }
  nav {
    flex-direction: column; /* Cambiar a columna */
    align-items: flex-start; /* Alinear elementos al inicio */
  }
  .nav-links {
    height: 100vh;
    flex-direction: column; /* Cambiar a columna */
    width: 100%; /* Asegura que el menú ocupe el ancho completo */
    max-height: 100vh;
    font-size: 3.2vw;
    background-color: black !important;
    display: none;
    position: absolute;
    top: 0; /* Colocar en la parte superior */
    left: 0; /* Colocar en el lado izquierdo */
    z-index: 999; /* Asegura que esté sobre otros elementos */
    padding-top: 15vw; /* espacio entre opciones del menu y logo/burger */
    overflow-y: scroll; /* Permite el desplazamiento */
    -ms-overflow-style: none; /* Para Internet Explorer y Edge */
    scrollbar-width: none; /* Para Firefox */
  }
  .nav-links::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari y Opera */
  }
  .nav-links.active {
    display: flex; /* Muestra el menú cuando se activa */
  }
  .nav-links li {
    margin-left: 0; /* Eliminar el margen izquierdo */
    margin-top: 10px; /* Agregar espacio entre elementos */
    width: 100%; /* Asegura que los enlaces ocupen todo el ancho */
  }
  .nav-links li a {
    border-radius: 0px !important;
    display: block; /* Asegurar que el enlace ocupe todo el espacio */
    padding: 15px; /* Ajustar el padding para mayor clicabilidad */
    text-align: center; /* Centrar texto en enlaces */
  }
  .submenu {
    position: static; /* Cambiar a posicion estatica para submenus */
    display: none; /* Mantener oculto por defecto */
  }
  .submenu li a {
    /*background-color: #fff !important;*/
    background-color: #4d4d4d !important;
    color: #000 !important;
    text-shadow: none;
    padding: 0.8em !important;
    margin: 0 !important;
  }
  .submenu li a:hover {
    /*background-color: #4D4D4D !important;*/
    background-color: #e51d1d !important; /* submenu en hover rojo */
    color: #ffffff !important;
    padding: 0.8em !important;
    margin: 0 !important;
  }
  .nav-links li:hover .submenu {
    display: block; /* Mostrar submenu al pasar el raton */
  }
  .hamburger {
    z-index: 1000; /* Asegurar que el menu hamburguesa esta visible */
    display: flex;
    cursor: pointer; /* Cambiar el cursor a puntero en el menu mv para indicar que los elementos son clicables */
  }
  header.sticky .hamburger span {
    background: #ffffff;
  }
  .logo {
    z-index: 1000;
  }
}

/* Valores en header y logos para dispositivos pequenos.
--------------------------------------------------------- */

@media (max-width: 800px) {
  #header {
    height: 60px !important;
  }
  .header-superior {
    display: none !important;
  }
  .logo_mobile_container {
    display: flex;
    align-items: center;
  }
  .logo-mobile {
    display: flex;
  }
  .logo-mobile img {
    color: #ffffff !important;
  }
  .team_section {
    flex-direction: column;
  }
}

/* Dimensiones del menu para tablets, ordenadores y dispositivos grandes.
------------------------------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1044px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.7em !important;
  }
}

@media (min-width: 1045px) and (max-width: 1088px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.8em !important;
  }
}

@media (min-width: 1089px) and (max-width: 1117px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1118px) and (max-width: 1147px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1148px) and (max-width: 1180px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1181px) and (max-width: 1214px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0em !important;
  }
}

@media (min-width: 1215px) and (max-width: 1250px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1251px) and (max-width: 1289px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1290px) and (max-width: 1354px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1355px) and (max-width: 1399px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 1400px) and (max-width: 1400px) {
  nav {
    margin-top: -1.9em !important;
  }
  .sticky nav {
    margin-top: 0em !important;
  }
}

@media (min-width: 1401px) and (max-width: 1450px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1451px) and (max-width: 1475px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1476px) and (max-width: 1500px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1501px) and (max-width: 1529px) {
  nav {
    margin-top: 0em !important; /* es la unica que no se coloca bn */
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1530px) and (max-width: 1530px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1531px) and (max-width: 1532px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1533px) and (max-width: 1537px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1538px) and (max-width: 1542px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1543px) and (max-width: 1556px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1557px) and (max-width: 1623px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1624px) and (max-width: 1697px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1698px) and (max-width: 1701px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1702px) and (max-width: 1713px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1714px) and (max-width: 1750px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1751px) and (max-width: 1900px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 1901px) and (max-width: 2000px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 2001px) and (max-width: 2250px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 2251px) and (max-width: 2449px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 2450px) and (max-width: 2549px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 1em !important;
  }
}

@media (min-width: 2550px) and (max-width: 2732px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 2733px) and (max-width: 2752px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 2753px) and (max-width: 2800px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 2801px) and (max-width: 2948px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 2948px) and (max-width: 3840px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 3841px) and (max-width: 4500px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

@media (min-width: 4501px) and (max-width: 5500px) {
  nav {
    margin-top: 0em !important;
  }
  .sticky nav {
    margin-top: 0.9em !important;
  }
}

/* Arreglos especiales para reseñas de gooogle 
---------------------------------------------------- */

@media (min-width: 636px) and (max-width: 723px) {
  .prev-slide {
    left: 12% !important; /* Mueve el botón a la izquierda del slider */
  }
  .next-slide {
    right: 12% !important; /* Mueve el botón a la derecha del slider */
  }
  .slider-wrapper {
    width: 50% !important; /* Ajusta el ancho para que se reste el margen */
  }
  .autor {
    font-size: 0.928em !important;
  }
  .star {
    font-size: 1.4em !important; /* Tamaño de las estrellas */
  }
}

@media (max-width: 414px) {
  .slider-container {
    width: 100% !important;
  }
}

@media (min-width: 728px) and (max-width: 746px) {
  .autor {
    font-size: 0.9em !important;
  }
}

@media (min-width: 668px) and (max-width: 727px) {
  .autor {
    font-size: 0.8em !important;
  }
}

@media (min-width: 660px) and (max-width: 667px) {
  .autor {
    font-size: 0.9em !important;
  }
  .star {
    font-size: 1em !important; /* Tamaño de las estrellas */
  }
}

@media (min-width: 620px) and (max-width: 640px) {
  .autor {
    font-size: 0.8em !important;
  }
}

/* BLOG 
---------------------------*/

@media (max-width: 500px) {
  .hipoteca_text1 {
    min-height: 88px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 501px) and (max-width: 1000px) {
  .hipoteca_text1 {
    min-height: 88px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 1001px) and (max-width: 1499px) {
  .hipoteca_text1 {
    min-height: 88px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 1500px) and (max-width: 1799px) {
  .hipoteca_text1 {
    min-height: 88px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 1800px) {
  .hipoteca_text1 {
    min-height: 88px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* ARREGLOS PARA PAGINA CONTACTO
---------------------------------------- */

/* Asegura que los enlaces dentro del submenu tengan color blanco */
.nav-links .submenu li a {
  color: #ffffff !important; /* Establece el color blanco para los enlaces del submenu */
  text-shadow: 2px 2px black;
}

/* ARREGLOS DE MARGEN NEGRO EN PAGINAS
---------------------------------------- */

.blog-header {
  background-color: black !important;
}

.venderPisoNavarra-header {
  background-color: black !important;
}

.contacto-header {
  background-color: black !important;
}

.category-header {
  background-color: black !important;
}

/* Margenes para blog y contacto */

@media (min-width: 769px) and (max-width: 1199px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 1em;
  }
}

@media (min-width: 1200px) and (max-width: 1385px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 2em;
  }
}

@media (min-width: 1385px) and (max-width: 2252px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 5em;
  }
}

@media (min-width: 2253px) and (max-width: 3000px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 8em;
  }
}

@media (min-width: 3001px) and (max-width: 4500px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 13em;
  }
}

@media (min-width: 4501px) {
  .container.py-4,
  .row.py-4 {
    margin-top: 18em;
  }
}

/* Special: Arreglo para que se muestre el fondo negro en el menu de los post que vienen de blog
   pero no llevan la etiqueta '/category/...' . Ej: /piso-exterior-y-muy-luminoso  */

.special-header {
  background-color: black !important;
}

/* POSICIONAMIENTOS DEL SUBMENU 
------------------------------------------- */

/* General */
.nav-links .submenu li:first-child a {
  margin-top: 1.6vw !important; /* Solo el primer enlace tendrá el margen */
}

/* Blog */
.blog-header .nav-links .submenu li:first-child a {
  margin-top: 2.65vw !important; /* Solo el primer enlace tendrá el margen */
}

.sticky.blog-header .nav-links .submenu li:first-child a {
  margin-top: 1.6vw !important; /* Solo el primer enlace tendrá el margen */
}

/* Contacto */
.contacto-header .nav-links .submenu li:first-child a {
  margin-top: 2.65vw !important; /* Solo el primer enlace tendrá el margen */
}

.sticky.contacto-header .nav-links .submenu li:first-child a {
  margin-top: 1.6vw !important; /* Solo el primer enlace tendrá el margen */
}

/* Category */
.category-header .nav-links .submenu li:first-child a {
  margin-top: 2.65vw !important; /* Solo el primer enlace tendrá el margen */
}

.sticky.category-header .nav-links .submenu li:first-child a {
  margin-top: 1.6vw !important; /* Solo el primer enlace tendrá el margen */
}

/* Special: Se usa en el menu de los post que vienen de blog
   pero no llevan la etiqueta '/category/...' . Ej: /piso-exterior-y-muy-luminoso*/
.special-header .nav-links .submenu li:first-child a {
  margin-top: 2.65vw !important; /* Solo el primer enlace tendrá el margen */
}

.sticky.special-header .nav-links .submenu li:first-child a {
  margin-top: 1.6vw !important; /* Solo el primer enlace tendrá el margen */
}

@media (min-width: 769px) and (max-width: 1366px) {
  /* General */
  .nav-links .submenu li:first-child a {
    margin-top: 1.7vw !important; /* Solo el primer enlace tendrá el margen */
  }

  /* Blog */
  .blog-header .nav-links .submenu li:first-child a {
    margin-top: 2.75vw !important; /* Solo el primer enlace tendrá el margen */
  }

  .sticky.blog-header .nav-links .submenu li:first-child a {
    margin-top: 1.7vw !important; /* Solo el primer enlace tendrá el margen */
  }

  /* Contacto */
  .contacto-header .nav-links .submenu li:first-child a {
    margin-top: 2.75vw !important; /* Solo el primer enlace tendrá el margen */
  }

  .sticky.contacto-header .nav-links .submenu li:first-child a {
    margin-top: 1.7vw !important; /* Solo el primer enlace tendrá el margen */
  }

  /* Category */
  .category-header .nav-links .submenu li:first-child a {
    margin-top: 2.75vw !important; /* Solo el primer enlace tendrá el margen */
  }

  .sticky.category-header .nav-links .submenu li:first-child a {
    margin-top: 1.7vw !important; /* Solo el primer enlace tendrá el margen */
  }

  /* Special: Se usa en el menu de los post que vienen de blog
    pero no llevan la etiqueta '/category/...' . Ej: /piso-exterior-y-muy-luminoso*/
  .special-header .nav-links .submenu li:first-child a {
    margin-top: 2.75vw !important; /* Solo el primer enlace tendrá el margen */
  }

  .sticky.special-header .nav-links .submenu li:first-child a {
    margin-top: 1.7vw !important; /* Solo el primer enlace tendrá el margen */
  }
}

/* Arreglo de margen negro en imagenes vender y ser franquiciado (tienen una linea negra que viene de las imagenes) 
-------------------------------------------------------------------------------------------------------------------*/

.portada_background {
  margin-top: -0.2em;
  width: 101% !important;
}

.card__content a:hover {
  color: #e51d1d !important; /* hover de enlace Nuestro Equipo cambiado a rojo (estaba en azul) */
}

/* Arreglo en Franquicia para el texto 10INMOBILIARIA La mas recomendada (pisa el menu en pantallas menores) */
.portada_text {
  padding-top: 3.7em !important;
}

/* Arreglo CSS para Mapa Qualis Optima iframe
-----------------------------------------------*/
#ixhl {
  margin-top: -800px;
  padding: 0;
  /*border:0px solid #000000;*/
}

@media (max-width: 769px) {
  #ixhl {
    margin-top: -960px;
    padding: 0;
    /*border:0px solid #000000;*/
  }
}