/* Variables CSS */
* {
  box-sizing: border-box;
}


:root {
  --logo-width: 300px;
  --hero-image-width: 600px;
  --hero-image-margin-top: 0;
  --hero-background-height: 100%;
  --hero-gradient-start: rgba(0, 0, 0, 0.8);
  --hero-gradient-end: rgba(0, 0, 0, 0);
  --primary-color: #9b7553;
  --primary-hover-color: #6d4725;
  --secondary-color: #cacaca;
  --back-section-color: #efefef;
  --font-family: 'Poppins', sans-serif;
  --font-size-base: 12px;
  --hero-height: 80vh;
  --swiper-arrow-color: #9b7553;
  --swiper-arrow-size: 45px;
  /* Tamaño predefinido de las flechas */
}

/* Estilos generales */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  margin: 0;
  padding: 0;
  overflow-x: hidden;

}

html {
  max-width: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

.header-container {
  max-width: 1200px;
  /* o el ancho que uses en tu web */
  margin: 0 auto;
  padding: 0 20px;
  /* opcional, para respiro a los lados */
  box-sizing: border-box;
  width: 100%;
}

/* Header */
header {
  background-color: transparent;
  color: rgb(255, 255, 255);
  padding: 20px 40px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;

  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 📌 Cambia el color de fondo del header solo en la página de detalles */
.detalle-page header {
  background-color: #9b7553c9;
  /* Cambia esto al color que prefieras */
}


/* Estilos para el header con fondo semitransparente */
header.scrolled {
  background-color: #132c49ec;
  /* Fondo negro al 50% de opacidad */
  transition: background-color 0.3s ease;
  /* Transición suave */
}

/* Barra de navegación */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1em;
  padding: 8px 12px;
  border-radius: 100px;
  transition: border 0.5s ease;
  border: 2px solid transparent;
  word-break: break-word;
}

nav ul li a:hover {
  border: 2px solid white;
}

nav ul li a.logo {
  padding: 0;
  border: none;
}

nav ul li a.logo img {
  width: var(--logo-width);
  height: var(--logo-height);
  padding-top: 10px;
}





/* Estilos para el Mega Menú */
/* Estilos para el Mega Menú */
.mega-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100vw;
  background: #efefef;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1001;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: visible;

}

.mega-content {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.mega-menu a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 5px 0;
  cursor: pointer;
  color: #1a1a1a;
  border: none;
  /* elimina bordes */

}

.mega-menu a:hover {

  color: #132c49ec;
  border: none;
  /* elimina bordes */
}


.column {
  padding: 10px;
}

.column h3 {
  color: #132c49;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.column p {
  margin: 5px 0;
  font-size: 14px;
  color: black;
}

.column-wide {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Botones en columnas dobles */
.column-wide.botones-container {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}


.column-search {
  padding-left: 20px;
  /* Espaciado para evitar que el texto toque la barra */
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Alinear todo a la izquierda */
  justify-content: flex-start;
  /* Alinear verticalmente al inicio */
  gap: 5px;
  /* Espaciado entre elementos */
  padding-top: 10px;
  /* Ajuste de altura para alinear con los títulos de países */
}







/* Campo de texto dentro de la barra de búsqueda */
.custom-search-bar input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  font-size: 1em;
  background-color: transparent;
  outline: none;
  width: 100%;
}

/* Botón de búsqueda con icono */
.custom-search-bar button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: #132c49;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-search-bar button i {
  color: #132c49;
  /* Asegurar que el ícono sea visible */
}

.custom-search-bar button:hover i {
  color: var(--primary-hover-color);
}

.mega-dropdown:hover .mega-menu {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

/* Estilos para cambiar el fondo del header cuando se despliega el mega menú */
.header-active {
  background: #132c49ec;
  /* Fondo con transparencia */
  transition: background 0.3s ease;
}


.dropdown {
  position: relative;
  width: 100%;
}

/* Aplicar estilos de .pais-btn a los botones desplegables */
.select-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 1em;
  font-weight: 500;
  border: 2px solid #132c49;
  /* 🔵 BORDE AZUL */
  border-radius: 100px;
  background-color: transparent;
  color: #132c49;
  padding: 8px 20px;

  transition: all 0.3s ease;
}

.select-btn .texto {
  margin-right: auto;

}

.select-btn i {
  margin-right: 5px;
  /* separa la flecha del borde */
}

.select-btn:hover {
  background-color: #132c49;
  color: white;
  border-color: #132c49;
  /* o transparente, según prefieras */
}

.select-btn:hover,
.select-btn.active {
  background-color: #132c49;
  color: white;
  border-color: transparent;

}

.select-btn i {
  margin-left: 8px;
  margin-right: 5px;
  /* opcional: para evitar que esté tan pegado al borde derecho */
}

.select-options {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  /* Aparece justo debajo del botón */
  left: 0;
  width: 100%;
  background: white;

  border-radius: 10px;
  overflow: hidden;
  z-index: 1003;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

}

.select-options button {
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: white;

  cursor: pointer;
  font-size: 1em;


}

.select-options button:hover {
  background: #132c49;
  color: white;

}

.select-wrapper {
  position: relative;
  width: 100%;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px;
  /* Espacio para la flecha */
}

.select-wrapper i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #132c49;
  pointer-events: none;
  font-size: 0.9em;
}

.select-wrapper:hover i {
  color: white;
}


.divider {
  width: 1px;
  /* Grosor de la barra */
  background-color: #132c49;
  /* Color azul definido */
  height: 100%;
  /* Ocupar toda la altura del Mega Menú */
  margin: 0 15px;
  /* Espaciado a los lados */
}

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

/*------Venana emergene vender----------------------------------------*/
/* Alinear títulos en la parte superior */
/* Alinear títulos en la parte superior */
.mega-content-vender .column h3 {
  text-align: left;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

/* Alinear todos los textos dentro de cada contenedor a la izquierda */
.mega-content-vender .column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Alinear elementos a la izquierda */
  justify-content: flex-start;
  padding: 15px;
  height: 100%;
  /* Ocupar toda la altura disponible */
}

/* Asegurar que los botones de la sección "Vender" se alineen en la parte inferior y tengan espacio */
.mega-content-vender .column .select-btn {
  margin-top: auto;
  /* Empujar el botón hacia la parte inferior */
  align-self: flex-start;
  /* Asegurar alineación a la izquierda */
  margin-bottom: 20px;
  /* Agregar espacio debajo del botón */
}


/* Sección Hero */
/* Sección Hero */
.hero {
  position: relative;
  padding: 40px 20px;
  padding-top: 100px;
  text-align: center;
  color: white;
  height: var(--hero-height);
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-background-height);
  z-index: -1;
}

.hero::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation:
    scaleAndMove 10s infinite alternate ease-in-out,
    cambiarFondoHero 15s infinite steps(1);
}

.hero::after {
  background: linear-gradient(to bottom,
      var(--hero-gradient-start) 0%,
      var(--hero-gradient-end) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero * {
  position: relative;
  z-index: 1;
}

/* Imagen texto */
.hero-image {
  width: var(--hero-image-width);
  height: auto;
  margin-top: var(--hero-image-margin-top);
  margin-bottom: 1px;
}

/* Animación para el efecto de movimiento y escalado */
@keyframes scaleAndMove {
  0% {
    transform: scale(1) translateY(0);
  }

  100% {
    transform: scale(1.1) translateY(-10px);
  }
}

/* Animación para cambiar entre 3 fondos */
@keyframes cambiarFondoHero {

  0%,
  33.33% {
    background-image: url('../images/back.jpeg');
  }

  33.34%,
  66.66% {
    background-image: url('../images/proto4.jpg');
  }

  66.67%,
  100% {
    background-image: url('../images/proto6.jpg');
  }
}

/* Barra de búsqueda */
.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 1px 0;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
  border: none;
  overflow: hidden;
}

/* Secciones de la barra de búsqueda */
.search-section {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 20px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

/* Separador entre secciones */


/* Estilos comunes para select e input */
.search-section select,
.search-section input[type="text"] {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  background-color: transparent;
  cursor: pointer;
  appearance: none;
}

.search-section select:focus,
.search-section input[type="text"]:focus {
  outline: none;
}

/*buton contacto*/

.btn-contacto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;

  border-radius: 100px;
  background-color: transparent;
  color: #9b7553;
  padding: 8px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}



/* Estilos específicos para el campo de búsqueda */
.search-section input[type="text"] {
  width: 300px;
}

/* Estilos para el botón de búsqueda */
.search-section button {
  padding: 10px 15px;
  /* Espaciado interno */
  background-color: transparent;
  /* Fondo transparente */
  color: #9b7553;
  /* Color inicial del ícono */
  border: none;
  /* Sin borde */
  cursor: pointer;
  /* Cursor de puntero */
  font-size: 1.2em;
  /* Tamaño del ícono */
  transition: color 0.3s ease;
  /* Transición suave del color */
}

.search-section button:hover {
  color: var(--primary-hover-color);
  /* Color al pasar el ratón */
}

/* Estilos específicos para el ícono de lupa */
.search-section button .fa-search {
  color: inherit;
  /* Hereda el color del botón */
}

/* Estilos para el ícono de flecha hacia abajo */
.search-section .fa-chevron-down {
  color: var(--primary-color);
  font-size: 0.9em;
  margin-left: 5px;
}

/* Estilos para el contenedor del select y el ícono */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}



/* Sección de países------------------------------------ */
.paises-section {
  position: relative;
  text-align: center;
  padding: 0 20px 50px 20px;
  /* Ajustar padding: arriba 0, derecha 20px, abajo 50px, izquierda 20px */
  background-color: #ffffff;
  /* Fondo claro para la sección */
  margin-top: 0;
  /* Eliminar margen superior */
}

/* Estilos para la imagen de texto */
.texto-imagen {
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}

/* Contenedor de botones */
.botones-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Espacio entre botones */
  flex-wrap: wrap;
  /* Para que los botones se ajusten en pantallas pequeñas */
}

/* Estilos base para los botones */
.pais-btn {
  padding: 8px 12px;
  /* Mismo padding que los enlaces del header */
  font-size: 1em;
  /* Mismo tamaño de fuente */
  font-family: var(--font-family);
  /* Misma familia de fuentes */
  font-weight: 500;
  /* Mismo grosor de fuente */
  border: 2px solid #132c49;
  /* Borde del color principal */
  border-radius: 100px;
  /* Bordes redondeados */
  background-color: transparent;
  /* Fondo transparente */
  color: #132c49;
  /* Color del texto */
  cursor: pointer;
  transition: all 0.5s ease;
  /* Transición suave */
}

/* Estado activo */
.pais-btn.active {
  background-color: #9b7553;
  color: white;
  border-color: transparent;
}

/* Efecto hover para los botones */
.pais-btn:hover {
  background-color: #132c49;
  /* Fondo sólido del color principal */
  color: white;
  /* Texto blanco */
  border-color: transparent;
  /* Eliminar el borde */
}

/* Estilos para el botón activo */



/* Estilos para la imagen de texto */
.texto-imagen {
  max-width: 100%;
  /* Asegurar que la imagen no exceda el ancho del contenedor */
  width: 300px;
  /* Tamaño personalizado para la imagen */
  height: auto;
  /* Mantener la proporción de la imagen */
  margin-bottom: 30px;
  /* Espacio inferior */
  padding-top: 50px;
  /* Padding superior */
}


/*------------------ventanada zonas-----------------------*/
/* Nueva versión de la ventana emergente */
.ventana-botones-dos {
  position: absolute;
  top: calc(100% + 10px);
  /* Aparece justo debajo de los botones */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1040px;
  /* O el ancho que tú desees */
  z-index: 10;

  margin-top: -40px;
  /* O incluso 0 si lo quieres pegado */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  /* semitransparente blanco */
  backdrop-filter: blur(10px);
  /* efecto de difuminado para estilo glass */
  -webkit-backdrop-filter: blur(10px);
  /* compatibilidad Safari */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* sombra sutil */
  border-radius: 50px;
  color: #132c49;
  text-align: center;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ventana-botones-dos-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  /* 👈 añade espacio entre los botones */
  padding: 10px 0;
  /* 👈 espacio vertical dentro del contenedor */
}

/*---------------------------
ventanas tematicas::after*/
.ventana-botones-dos.fondo-cdmx {
  background-image: url('/images/cdmx.webp');
}

.ventana-botones-dos.fondo-estado {
  background-image: url('/images/estado2.webp');
}

.ventana-botones-dos.fondo-quintana {
  background-image: url('/images/quintana.webp');
}

.ventana-botones-dos.fondo-yucatan {
  background-image: url('/images/yucatan.webp');
}

.ventana-botones-dos.fondo-madrid {
  background-image: url('/images/madrid2.webp');
}

.ventana-botones-dos.fondo-costa {
  background-image: url('/images/costa.webp');
}

.ventana-botones-dos.fondo-cdmx,
.ventana-botones-dos.fondo-estado,
.ventana-botones-dos.fondo-quintana,
.ventana-botones-dos.fondo-yucatan,
.ventana-botones-dos.fondo-madrid,
.ventana-botones-dos.fondo-costa {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fondo-mexico {
  background-image: url('/images/bellas.webp');
  background-size: cover;
  background-position: center;
}

.fondo-espana {
  background-image: url('/images/espanai.webp');
  background-size: cover;
  background-position: center;
}


/* Cuando la ventana está activa */
.ventana-botones-dos.activa {
  max-height: 300px;
  opacity: 1;
  padding: 30px;
}

#filtros-avanzados {

  padding: 15px 20px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}


/* Contenedor para alinear los botones debajo del título */

.ventana-botones-dos-container .pais-btn:hover {
  background-color: #132c49;
  color: white;
  border-color: transparent;
}

/* Variante clara exclusiva para botones en ventanas con fondo oscuro */
.pais-btn-zona {
  padding: 8px 12px;
  font-size: 1em;
  font-family: var(--font-family);
  font-weight: 500;
  border: 2px solid white;
  border-radius: 100px;
  background-color: transparent;
  color: white;
  cursor: pointer;
  transition: all 0.5s ease;

  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.726);
  /* 👈 sombra negra suave */
}

.pais-btn-zona:hover,
.pais-btn-zona.active {
  background-color: white;
  color: #132c49;
  border-color: transparent;
}

.ventana-botones-dos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.507);
  /* ⚙️ Ajusta la opacidad aquí */
  border-radius: 50px;
  z-index: 0;
  /* ⬅️ Debajo de los botones */
}

/* Asegurar que los botones estén por encima */
.ventana-botones-dos-container {
  position: relative;
  z-index: 1;
}


/*CARDS ESTILOS---------------------*/
/* Contenedor encajonado */
.container {
  max-width: 1100px;
  /* Ancho máximo del contenedor */
  margin: 0 auto;
  /* Centrar el contenedor */
  padding: 0 20px;
  /* Espaciado lateral */
}

/* Contenedor de cards de inmuebles */
.cards-inmuebles-container {

  margin-top: 90px;
  /* o ajusta según la altura del popup */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  justify-content: center;
  /* Centra las cards */
}

/* Estilos para cada card de inmueble */
.card-inmueble {
  flex: 1 1 calc(25% - 20px);
  max-width: calc(25% - 20px);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  height: 300px;
  width: 100%;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* animación de entrada */
  opacity: 0;
  transform: translateY(40px);

  /* ✅ UNA sola transición que cubre entrada + hover */
  transition: opacity 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.card-inmueble.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.card-inmueble:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/*............animacion de cambio de region ------------*/
.card-inmueble.fade-in {
  opacity: 1;
  transform: translateY(0);
}


.card-inmueble:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Imagen de la card (fondo) */
.card-inmueble-imagen {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Contenido superpuesto */
.card-inmueble-contenido {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  color: white;

  text-align: left;
}

/* Locación */
.card-inmueble-locacion {
  font-size: 0.9em;
  margin: 0 0 5px 0;
  color: rgba(255, 255, 255, 0.8);
}

/* Precio */
.card-inmueble-precio {
  font-size: 1.5em;
  margin: 0 0 10px 0;
}

/* Colonia */
.card-inmueble-colonia {
  font-size: 1em;
  margin: 0 0 10px 0;
}

/* Características (metros, habitaciones, baños) */
.card-inmueble-caracteristicas {
  display: flex;
  gap: 15px;
  /* Espacio entre iconos */
  font-size: 0.9em;
}

.caracteristica {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Espacio entre icono y texto */
}

/* Iconos */
.fas {
  font-size: 1em;
  color: white;
}



/*foooterrrr--------------------------------------------------------------------------*/
/* Estilos generales */
/* Estilo base del footer */
/* Estilos generales del footer */
.footer {
  background-color: #a69f91;
  color: #fff;
  padding: 60px 40px 20px;
  font-family: sans-serif;
}

.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.footer-col h4 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ffffff;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
}

/* Logo */
.logo-footer {
  width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Contacto + botón */
.contacto li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-wsp {
  margin-top: 10px;
  background-color: #25d366;
  color: #000;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-wsp:hover {
  background-color: #1ebd5a;
}

/* Segunda sección del footer */
.footer-bottom {
  padding-top: 20px;
}

.footer-bottom-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 20px;
}

/* Col 1-2: derechos */
.footer-left {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #ffffff;
}

/* Col 3-4: redes sociales centradas */
.footer-center {
  grid-column: 3 / span 2;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-center a {
  color: #ccc;
  font-size: 20px;
  transition: color 0.3s ease;
}

.footer-center a:hover {
  color: #fff;
}


/* Col 5-6: idioma */
.footer-right {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  color: #ffffff;
}


/* Bandera */
.icon-flag {
  width: 20px;
  height: auto;
  margin-right: 6px;
  vertical-align: middle;
}

/* Teléfono (puedes usar FontAwesome o SVG como contenido) */
.icon-phone::before {
  content: url('https://www.svgrepo.com/show/532484/phone.svg');
  /* O usa font-awesome */
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}


/* WhatsApp Outline Button */
.btn-wsp-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid #25d366;
  color: #25d366;
  font-size: 14px;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.btn-wsp-outline:hover {
  background-color: #25d366;
  color: #000;
}

.icon-whatsapp::before {
  content: url('https://www.svgrepo.com/show/475689/whatsapp-color.svg');
  /* ícono SVG de WhatsApp */
  display: inline-block;
  width: 18px;
  height: 18px;
}

/*footer rsponsive*/
/* Estilo base de las pestañas */
.footer-dropdown {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  margin-bottom: 20px;
}

.footer-dropdown summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  list-style: none;
}

.footer-dropdown summary::after {
  content: "▼";
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.footer-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.footer-dropdown summary::after {
  content: "▼";
  position: absolute;
  right: 0;
  font-size: 12px;
  transition: transform 0.3s;
}

.footer-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.footer-dropdown ul {
  margin-top: 10px;
  padding-left: 15px;
}

.footer-dropdown ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ccc;
}

.footer-dropdown ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-dropdown ul li a:hover {
  color: #fff;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}


/*----------------------footer---------*/

/* 🔹 Envoltorio del carrusel para que se alinee con el diseño */
.carousel-wrapper {
  margin-left: auto;
  /* Mueve el carrusel completamente a la derecha */
  display: flex;
  justify-content: center;
  /* Centrar el carrusel */
  width: 100%;
  padding: 20px;
  /* Ajuste para que no esté pegado */

  position: relative;
  overflow-x: hidden;
}

/* 🔹 Contenedor del carrusel */
.carousel-container {
  position: relative;
  margin: 40px auto;
  max-width: 1200px;
  padding: 20px;
  overflow: visible !important;
  /* Permite que las flechas y la paginación sean visibles */
  min-height: 400px;
}


/* 🔹 Contenedor del Swiper */
.swiper {
  width: 90%;
  overflow: visible;
  padding-bottom: 80px;
  /* Espacio suficiente para los puntitos de paginación */
}

/* 🔹 Evita que las cards salgan del contenedor */
.swiper-wrapper {
  display: flex;
  align-items: center;
}

/* 🔹 Flechas de navegación (fuera del carrusel) */
.swiper-button-next,
.swiper-button-prev {
  width: 10px !important;
  /* Tamaño de la flecha */
  height: 10px !important;
  border-radius: 50% !important;
  /* Bordes redondeados */
  color: #9b7553 !important;
  /* Color del ícono */
  font-size: 10px !important;
  /* Tamaño del icono */
  transition: transform 0.2s ease, background-color 0.3s ease !important;
}


/* 🔹 Mueve las flechas FUERA del contenedor del carrusel */
.swiper-button-next {
  right: -10px !important;
  /* Antes estaba en -50px */
}

.swiper-button-prev {
  left: -10px !important;
  /* Antes estaba en -50px */
}

/* 🔹 Efecto hover para las flechas */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #6d4725 !important;
  /* Cambio de color en hover */
  transform: scale(1.1) !important;
  /* Efecto de agrandado */
}

/* 🔹 Paginación centrada y con más margen */
.swiper-pagination {
  bottom: -100px;
  /* Ajuste para que no esté encimada */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

}

/* 🔹 Paginación con forma de rectángulo redondeado */
/* 🔹 Paginación con forma de rectángulo redondeado */
.swiper-pagination-bullet {
  width: 20px !important;
  /* Hace que el punto sea más ancho */
  height: 6px !important;
  /* Ajusta la altura */
  border-radius: 10px !important;
  /* Hace que las esquinas sean redondeadas */
  background-color: #9b7553 !important;
  /* Color base */
  opacity: 0.5 !important;
  transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* 🔹 Punto activo más largo */
.swiper-pagination-bullet-active {
  width: 30px !important;
  /* Más ancho para resaltar la posición actual */
  background-color: #6d4725 !important;
  /* Color del punto activo */
  opacity: 1 !important;
}



/* 🔹 Cards bien ajustadas dentro del carrusel */
.cards-inmuebles-carousel .card-inmueble {
  flex: none;
  width: 300px;
  /* Tamaño fijo */
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*Cars de carrusel, metiendose ----------------------------------------*/
.cards-inmuebles-carousel .card-inmueble:hover {
  transform: scale(0.98);
  /* Se reduce un 5% en tamaño */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* Suaviza el efecto */
}

/* 🔹 Estilos generales para separadores */

/* 🔹 Separador centrado */
.separator {
  width: 60%;
  /* Ajusta el ancho, por defecto 50% */
  height: 2px;
  /* Grosor de la línea */
  background-color: #cacaca;
  /* Color gris */
  margin: 30px auto;
  /* Espaciado y centrado */
  border: none;
  /* Elimina el borde por defecto */
}


/* 📌 Estilos de la galería --------------------------------------------------------------------*/
/* 📌 Estilos de la galería */
.galeria {
  display: grid;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  position: relative;
  top: -70px;
  /* Ajusta el valor según cuánto quieras moverlo */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
}



/* 📌 Configuración de las imágenes */
.imagen {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  /* Asegura que el texto de la ubicación quede abajo */
  justify-content: left;
  padding: 20px;
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
  border-radius: 30px;
  /* Ajusta el valor según lo que quieras */
  overflow: hidden;
  /* Evita que la imagen se salga del div al hacer hover */
}

/* 📌 Degradado de negro a transparente */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  z-index: 1;
  transition: background 0.3s ease-in-out;
  /* Suaviza el cambio del gradiente */
}

/* 📌 Posicionamiento de los textos */
.ubicacion,
.propiedades {
  position: absolute;
  z-index: 2;
  /* Para que queden sobre el degradado */
}

.ubicacion {
  bottom: 10px;
  left: 15px;
  font-size: 1.5rem;
  font-weight: bold;
}

.propiedades {
  top: 10px;
  right: 15px;
  font-size: 1rem;
}


/* 📌 Posicionamiento exacto en la cuadrícula */
.imagen1 {

  grid-column: 1 / 3;
  grid-row: 1;

}

.imagen2 {

  grid-column: 3 / 4;
  grid-row: 1;
}

.imagen3 {

  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

.imagen4 {

  grid-column: 1 / 4;
  grid-row: 2;
}

/* 📌 Efecto Hover: Escala la imagen de fondo */
.imagen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.438), transparent);
  transition: transform 0.3s ease-in-out;
  z-index: 0;
}

/* 📌 Asignar la imagen de fondo a ::before */


/* 📌 Efecto de zoom al pasar el mouse */

/* 📌 Opcional: oscurecer más el degradado en hover */

/*SECCION DETALLES DE CADA CARDS---------------------------------------------------------------*/
/* 📌 Estilos generales */



/* 📌 Galería de imágenes */
/* 📌 Nueva clase exclusiva para la imagen de portada */
/* 📌 Distribución de las primeras 4 imágenes en el grid */
.portada-container {
  display: grid;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  margin-top: 90px;
  /* Ajusta este valor según lo que necesites */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
  overflow: hidden;
  /* Evita que la imagen se desborde al hacer hover */
  position: relative;

}

/* Contenedor envolvente por cada imagen */
.portada-img-wrapper {
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: relative;


}

/* Estilo de la imagen con zoom solo en hover */
.portada-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;

}

/* Zoom al pasar el mouse SOLO sobre la imagen */
.portada-img-wrapper:hover .portada-img {
  transform: scale(1.05);

}



/* 📌 Distribución específica de las primeras 4 imágenes */
.portada-container .portada-img-wrapper:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}

.portada-container .portada-img-wrapper:nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 1;
}

.portada-container .portada-img-wrapper:nth-child(3) {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

.portada-container .portada-img-wrapper:nth-child(4) {
  grid-column: 1 / 4;
  grid-row: 2;
}


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

/*boton  galeria ----------------------------------------------------------------------*/
.ver-galeria-wrapper {
  text-align: center;
  margin: 20px 0;
}

.btn-ver-galeria {
  background-color: #132c49;
  margin: 12px;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  transition: transform 0.3s ease, background-color 0.3s ease;


}

.btn-ver-mapa {
  background-color: #132c49;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  transition: transform 0.3s ease, background-color 0.3s ease;


}

.btn-ver-galeria:hover {
  background-color: #9b7553;
  transform: scale(1.05);
  /* Aumenta un 5% */
}

.btn-ver-mapa:hover {
  background-color: #9b7553;
  transform: scale(1.05);
  /* Aumenta un 5% */
}

.galeria-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.8);
  /* <- esto es lo que le faltaba */
  display: flex;
  align-items: center;
  justify-content: center;

}


.popup-overlay {
  position: absolute;
  width: 100%;
  height: 100%;

}

.popup-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  background: #fff;
  padding: 40px 20px 20px 20px;
  border-radius: 10px;
  z-index: 9999;
}



.galeria-popup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.galeria-popup-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/*------mapa popup-----*/
.mapa-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mapa-popup.hidden {
  display: none;
}

.mapa-popup .popup-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  z-index: 9999;
}

#mapa-inmueble {
  width: 100%;
  height: 400px;
  border-radius: 10px;
}

.cerrar-popup {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 50px;
  /* 👈 esquinas sutiles, no redondas */
  z-index: 10000;
}

.imagen-expandida-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.imagen-expandida-wrapper {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-expandida {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.marca-agua {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  /* ajusta según el diseño */
  transform: translate(-50%, -50%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 10;
}

.cerrar-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50px;
  padding: 6px 12px;
  cursor: pointer;
  z-index: 15;
}

.bloqueador {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}



/* caracteristicas -------------------------------------------------*/

.seccion-caracteristicas {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.caracteristicas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 20px;
}

.item-caracteristica {
  background: #f9f9f9;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.item-caracteristica:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.199);
}

.item-caracteristica i {
  font-size: 1.8rem;
  color: #132c49;
  margin-bottom: 10px;
}

.item-caracteristica h4 {
  font-size: 1rem;
  color: #5A382D;
  margin-bottom: 5px;
}

.item-caracteristica span {
  font-size: 1.1rem;
  color: #444;
}

/*popup imagen apliada --------------------------*/

.imagen-ampliada {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.imagen-ampliada img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.cerrar-lightbox {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: white;
  cursor: pointer;
}

/* pop up efecto imagenes ---------*/
.imagen-popup {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imagen-popup:hover {

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.wrapper-galeria-marcaagua {
  position: relative;
  display: flex;
  align-items: center;
  /* centrado vertical */
  justify-content: center;
  /* centrado horizontal */
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.3s ease;
  height: auto;
  aspect-ratio: 4 / 3;
  /* o ajusta según tu preferencia visual */
}


.wrapper-galeria-marcaagua:hover {
  transform: translateY(-5px);
  /* Efecto hover completo */
}

.marca-agua-centro {
  position: absolute;
  max-width: 60%;
  max-height: 60%;
  opacity: 0.2;
  pointer-events: none;
}



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

/* 📌 Información principal */
.detalle-inmueble {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  max-width: 1200px;
  margin: auto;
}

.info-principal h1 {
  font-size: 3rem;
  color: #9b7553;
  /* Color modificable */
  margin-bottom: 5px;
}

.info-principal p {
  font-size: 1.2rem;
  color: #666;
}

.info-derecha {
  text-align: right;
}

.estado {
  background-color: #b48a70;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
}

.precio {
  font-size: 2rem;
  font-weight: bold;
  color: #1a1a1a;
}

/* 📌 Nueva clase para los iconos */
.iconos {
  display: flex;
  justify-content: auto;
  gap: 30px;
  padding: 20px 0;
}

.icono {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  color: #4A4A4A;
  /* Color del texto */
}

.icono i {
  font-size: 1.5rem;
  color: #132c49;
  /* Color de los iconos (puedes cambiarlo) */
}



/*--------------------------
------Flechas laterales
----------------------------*/
.flecha-galeria {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 16px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99999;
  user-select: none;
}

.flecha-izq {
  left: 30px;
}

.flecha-der {
  right: 30px;
}


/* 📌 Descripción */
.descripcion {
  max-width: 1000px;
  margin: auto;
  padding: 0px;
}

.descripcion h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #5A382D;
}

.descripcion p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #444;
  text-align: justify;
  /* Justifica el texto */
}

.iconos,
.boton-pdf,
.descripcion {
  max-width: 1190px;
  margin: 20px auto;
  text-align: left;
  /* Alinear todo a la izquierda */

}

.descripcion p,
.texto-preservar {
  white-space: pre-wrap;
  /* respeta \n, \r\n */
  word-wrap: break-word;
  /* evita desbordes largos */
}

/*disponible para renta o venta*/
.leyenda-operacion {
  margin-top: 10px;
  font-weight: bold;
  color: #132c49;
  font-size: 1rem;
}

/*---------------amenidades-------------------------------*/
/* Contenedor principal de amenidades */
.contenedor-amenidades {
  display: flex;
  gap: 40px;
  justify-content: center;
  padding: 30px;
}

/* Cada columna */
.columna-amenidades {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Amenidad individual */
.amenidad-item {
  font-weight: normal;
  text-align: left;
  position: relative;
  padding-bottom: 10px;
}

/* Línea inferior */
.amenidad-item::after {
  content: '';
  display: block;
  width: 100%;
  height: 0.5px;
  background-color: black;
  margin-top: 5px;
}

/* 🔹 Sección completa de amenidades */
.seccion-amenidades {
  background-color: #f7f7f7;
  padding: 50px 20px;
  border-radius: 30px;
  margin: 60px auto;
  max-width: 1200px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Título de amenidades */
.seccion-amenidades h2 {
  text-align: center;
  font-size: 2rem;
  color: #132c49;
  margin-bottom: 30px;
}

/*------prueba galeria */

/* status -------------------*/

.leyenda-status {


  display: flex;
  justify-content: right;
  margin-top: 10px;
}


.leyenda-status span {
  display: inline-block;
  padding: 8px 18px;
  background-color: #132c49;
  /* Color del "botón" */
  color: white;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
  cursor: default;
}




/*navegacion de cada inmueble por separado---------------*/
/* 📌 Estilos para el breadcrumb */
.breadcrumb-container {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  font-size: 1rem;
  color: #555;
}

.breadcrumb {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.breadcrumb a {
  text-decoration: none;
  color: #2c3e50;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.breadcrumb a:hover {
  color: #007bff;
}

.breadcrumb span {
  color: #777;
  font-weight: 400;
}

/*--------------------+*/
.detalle-layout {
  display: flex;
  max-width: 1200px;
  margin: 60px auto;
  gap: 30px;
  align-items: flex-start;
}

.detalle-columna-izquierda {
  flex: 1 1 75%;
}

.formulario-contacto-lateral {
  flex: 1 1 25%;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 110px;
  /* Ajustado para dejar espacio con el header */
  z-index: 10;
  background-color: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: fit-content;
  max-height: calc(100vh - 120px);
  /* Evita que sea más alto que la pantalla */
  overflow-y: auto;
  /* Scroll interno si el form es muy largo */
}

.formulario-contacto-lateral h2 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #6d4725;
}

.formulario-contacto-lateral input,
.formulario-contacto-lateral select,
.formulario-contacto-lateral textarea {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.formulario-contacto-lateral textarea {
  resize: vertical;
  min-height: 80px;
}

.btn-enviar {
  background-color: #6d4725;
  color: white;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
}

.btn-enviar:hover {
  background-color: #6d4725;
}


/* ===========================
   FIX LAYOUT DETALLE (NO OVERFLOW)
   =========================== */

/* Evita que cualquier cosa “estire” el body */
.detalle-page {
  overflow-x: hidden;
  overflow-y: visible;
  /* Ensure sticky works */
}

/* Layout principal: dos columnas firmes */
.detalle-layout {
  width: 100%;
  max-width: 1200px;
  /* ajusta si ya usas otro max */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: visible;
  /* Ensure sticky works */
}

/* MUY IMPORTANTE: permite que la columna izquierda no empuje el aside */
.detalle-columna-izquierda {
  flex: 1 1 auto;
  min-width: 0;
  /* <-- este es el fix clave en layouts flex */
}

/* Aside estable, no se va a la derecha */
.formulario-contacto-lateral {
  flex: 0 0 320px;
  /* ancho fijo visual como antes */
  max-width: 320px;
}

/* Responsive: abajo del todo */
@media (max-width: 1024px) {
  .detalle-layout {
    flex-direction: column;
  }

  .formulario-contacto-lateral {
    width: 100%;
    max-width: 100%;
  }
}

/* Previene que la columna desaparezca en móviles */
.detalle-columna-izquierda {
  display: block !important;
  min-height: 500px;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Evita que el carrusel empuje el contenido fuera de la pantalla */
.recomendaciones-inmuebles {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  /* ✅ permite que el hover “salga” */
  margin-top: 40px;
  padding: 18px 0 28px;
  /* ✅ aire vertical (arriba/abajo) */
}


/* Si el aside desaparece o se rompe en tablet, esto lo fija */
@media (max-width: 1024px) {
  .detalle-layout {
    display: block !important;
    /* Desactiva flex para evitar errores de cálculo */
  }

  .formulario-contacto-lateral {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
}


/* FORZAR VISIBILIDAD DE LAS CARDS */
/* NO fuerces transform en card-inmueble, porque rompe hover */
.swiper-slide {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Si la imagen está oculta */
.card-inmueble-imagen {
  display: block !important;
  opacity: 1 !important;
}


/* =======================================================
   ESTILOS EXCLUSIVOS PARA RECOMENDACIONES (Aislados)
   ======================================================= */

/* La Tarjeta Nueva */
.reco-card {
  display: block;
  /* Asegura que se comporte como bloque */
  width: 100%;
  /* Ocupa el ancho que le diga el Swiper */
  height: 300px;
  /* Tu altura fija */
  border-radius: 42px;
  /* Tu radio específico */
  overflow: hidden;
  position: relative;
  text-decoration: none;
  /* Quitar subrayado */
  background-color: #333;
  /* Fondo base por si tarda la imagen */

  /* ✅ Visibilidad (sin matar el hover) */
  opacity: 1 !important;
  visibility: visible !important;

  /* ✅ Estado base */
  transform: translateY(0);
  /* importante: NO usar none !important */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* ✅ Transición en el estado base (sube y baja suave) */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.reco-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


/* La Imagen de Fondo */
.reco-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

/* El Degradado y Contenido (Overlay) */
.reco-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  /* Tu degradado exacto */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  color: white;
  text-align: left;
  z-index: 2;
  box-sizing: border-box;
  /* Para que el padding no rompa el ancho */
}

/* Textos */
.reco-title {
  font-size: 0.9em;
  margin: 0 0 4px 0;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.reco-price {
  font-size: 1.5em;
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #fff;
}

.reco-loc {
  font-size: 0.95em;
  margin: 0 0 12px 0;
  font-weight: 400;
  color: #eee;
}

/* Iconos / Características */
.reco-features {
  display: flex;
  gap: 15px;
  font-size: 0.85em;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  /* Línea sutil separadora */
  padding-top: 10px;
}

.reco-feat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.reco-feat-item i {
  color: #d4af37;
  /* Un toque dorado para el icono, o blanco si prefieres */
}

/* =======================================================
   AJUSTES FINALES: PAGINACIÓN E ÍCONOS
   ======================================================= */

/* 1. ARREGLAR PUNTOS DE NAVEGACIÓN (Paginación) */
/* Damos espacio abajo del carrusel para que quepan los puntos */
.recomendaciones-swiper {
  padding-bottom: 64px !important;
  /* ✅ más espacio para bullets */
  position: relative;
}

/* bullets pegados al fondo de ese espacio */
.recomendaciones-swiper .swiper-pagination {
  bottom: 18px !important;
  /* ✅ separa del borde */
  height: 20px;
}

/* ✅ separa todo el bloque del footer */
.recomendaciones-inmuebles {
  margin-bottom: 40px;
  /* ajusta 30–60 a gusto */
}


/* Opcional: Personalizar el color de los puntos para que combine con tu marca */
.swiper-pagination-bullet {
  background: #9b7553 !important;
  /* Color café/dorado de tu marca */
  opacity: 0.5;
  width: 10px;
  height: 10px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #9b7553 !important;
}

/* 2. ÍCONOS BLANCOS */
/* Forzamos el color blanco en los iconos y el texto de características */
.reco-feat-item,
.reco-feat-item i,
.reco-feat-item span {
  color: #ffffff !important;
  /* Blanco puro */
  opacity: 1 !important;
  /* Aseguramos que no tengan transparencia */
}

/* =========================
   AJUSTE DE ANCHO DE CARDS EN CARRUSEL
   ========================= */

/* Controla el ancho REAL del slide */
.recomendaciones-swiper .swiper-slide {
  width: 250px !important;
  /* prueba 300–340 según gusto */
}

/* La card ocupa todo el slide */
.reco-card {
  width: 100%;
  height: 300px;
  /* ya lo tienes, se mantiene */
}

/* Mantén el viewport del carrusel recortando lateralmente */
.recomendaciones-inmuebles .swiper {
  overflow: hidden;
  /* ✅ Swiper se mantiene carrusel */
  padding-top: 16px;
  /* ✅ aire para el hover (arriba) */
  padding-bottom: 54px;
  /* ✅ espacio para bullets */
}

/* OJO: wrapper se queda normal (Swiper lo mueve con transform) */
.recomendaciones-inmuebles .swiper-wrapper {
  overflow: visible;
  /* ✅ permite que la card “suba” dentro del viewport */
}

/* Evita que se corte el hover dentro del slide */
.recomendaciones-inmuebles .swiper-slide {
  overflow: visible;
}

/* Más separación con footer (el bloque completo) */
.recomendaciones-inmuebles {
  margin-bottom: 40px;
}

/* Título de recomendaciones como imagen */
.recomendaciones-titulo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 18px;
}

.recomendaciones-titulo img {
  width: min(320px, 80%);
  height: auto;
  display: block;
}

/* =========================
   RESPONSIVE CARRUSEL RECOMENDACIONES
   ========================= */

/* Base: que el carrusel no se corte y tenga aire para hover + bullets */
.recomendaciones-inmuebles {
  margin-bottom: 40px;
  /* separación del footer */
}

.recomendaciones-inmuebles .recomendaciones-swiper {
  padding-top: 16px;
  /* aire arriba para hover */
  padding-bottom: 64px;
  /* aire abajo para bullets */
}

/* Bullets más abajo, separados del footer */
.recomendaciones-inmuebles .recomendaciones-swiper .swiper-pagination {
  bottom: 18px !important;
}

/* Importante: NO romper el carrusel */
.recomendaciones-inmuebles .swiper {
  overflow: hidden;
}

.recomendaciones-inmuebles .swiper-slide {
  overflow: visible;
  /* permite hover sin recorte */
}

/* === Ancho por default en desktop (ajusta si ya lo pusiste antes) */
.recomendaciones-inmuebles .swiper-slide {
  width: 320px;
  /* desktop */
}

/* ====== Tablet ====== */
@media (max-width: 1024px) {
  .recomendaciones-inmuebles .swiper-slide {
    width: 300px;
    /* un poquito más compacto */
  }
}

/* ====== Móvil ====== */
@media (max-width: 640px) {
  .recomendaciones-inmuebles .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .recomendaciones-inmuebles .recomendaciones-swiper {
    padding-top: 12px;
    padding-bottom: 58px;
  }

  /* 1 card grande, tipo “snap” visual */
  .recomendaciones-inmuebles .swiper-slide {
    width: 86vw;
    /* card grande */
    max-width: 380px;
  }

  /* Botones de flecha estorban en móvil */
  .recomendaciones-inmuebles .swiper-button-prev,
  .recomendaciones-inmuebles .swiper-button-next {
    display: none !important;
  }
}


/*--------------------------------blog------------------------*/
/* 🚀 Hero de la Página del Blog */
/* 🚀 Hero con imagen animada */
.blog-hero {
  text-align: center;
  position: relative;
  height: 40vh;
  /* Ajuste del tamaño del hero */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/proto7.jpg') no-repeat center center/cover;
  transform: scale(1);
  animation: heroAnim 10s infinite alternate ease-in-out;
  z-index: -2;
}

.blog-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: -1;
}

@keyframes heroAnim {
  0% {
    transform: scale(1);
    filter: brightness(0.8);
  }

  100% {
    transform: scale(1.1);
    filter: brightness(1);
  }
}

.blog-hero h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.blog-hero p {
  font-size: 1.2em;
  opacity: 0.8;
  position: relative;
  z-index: 2;
}

/* 🚀 Diseño de Catálogo de Blogs */
.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 50px 20px;
  max-width: 1200px;
  margin: auto;
}

/* 🚀 Cards de Blogs */
.blog-card {
  background: white;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 🚀 Imagen de la Card */
.blog-img {
  height: 200px;
  background-size: cover;
  background-position: center;
}

/* 🚀 Contenido del Blog */
.blog-content {
  padding: 20px;
  font-family: var(--font-family);
}

.blog-content h2 {
  font-size: 1.5em;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.blog-content p {
  font-size: 1em;
  color: #555;
  margin-bottom: 15px;
}

/* 🚀 Enlace de "Leer Más" */
.read-more {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: var(--primary-hover-color);
}



/*Markeing -----------------------------------------------------------------------------*/
/* 🚀 Hero con fondo dinámico */
.marketing-hero {
  position: relative;
  height: 70vh;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.marketing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/proto6.jpg') no-repeat center center/cover;
  transform: scale(1);
  animation: heroAnim 10s infinite alternate ease-in-out;
  z-index: -2;
}

.marketing-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  z-index: -1;
}

@keyframes heroAnim {
  0% {
    transform: scale(1);
    filter: brightness(0.8);
  }

  100% {
    transform: scale(1.1);
    filter: brightness(1);
  }
}

/* 📌 Sección Servicios ----------------*/
/* 📌 Sección Servicios */
.servicios-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 100px auto;
  padding: 50px 20px;
}

.servicios-texto {
  width: 45%;
  text-align: left;
}

.servicios-texto h2 {
  font-size: 2.5em;
  color: #9b7553;
}

.servicios-texto p {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
}

/* 📌 Contenedor de imágenes */
.servicios-imagenes {
  width: 50%;
  display: flex;
  justify-content: center;
  gap: 40px;
}

/* 📌 Cada grupo en una columna vertical */
.servicios-columna {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Ajuste para el desfase de los grupos */
.grupo-1 {
  transform: translateY(-20px);
}

.grupo-2 {
  transform: translateY(20px);
}

/* 📌 Estilos de los contenedores de servicio */
.servicio-item {
  position: relative;
  width: 220px;
  height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Capa negra traslúcida */
.servicio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* Texto blanco encima */
.servicio-item h3 {
  position: relative;
  color: white;
  font-size: 1.4em;
  z-index: 2;
}

/* Efecto hover */
.servicio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.cta-button {
  color: #ffffff;
  /* Color modificable */
  font-family: var(--font-family);
  /* Fuente modificable */

  text-decoration: none;
  /* Quita el subrayado */
  padding: 10px 20px;
  /* Espaciado interno */
  border: 2px solid #ffffff;
  /* Borde del mismo color */
  background: transparent;
  /* Fondo transparente */
  border-radius: 50px;
  /* Bordes redondeados */
  transition: all 0.3s ease-in-out;
  /* Transición suave */
  display: inline-block;
  /* Para que respete el padding */
  text-align: center;
}

.cta-button:hover {
  background-color: #132c49;
  /* Color de fondo al pasar el mouse */
  color: #fff;
  /* Cambia el color del texto en hover */
  transform: scale(1.05);
  /* Efecto de crecimiento */
  border: 2px solid #132c49;
  /* Borde del mismo color */
}

/*imagen texto*/
.marketing-hero {
  display: flex;
  flex-direction: column;
  /* Acomoda los elementos en columna */
  align-items: center;
  /* Centra la imagen y el botón */
  text-align: center;
  padding: 40px 20px;
}

.marketing-image {
  width: 100%;
  /* Ajusta el tamaño por defecto */
  max-width: 600px;
  /* Limita el tamaño máximo */
  height: auto;
  /* Mantiene la proporción */
  margin-bottom: 20px;
  /* Espacio entre la imagen y el botón */
}

/* sección panel intercambiable ------------------------------------*/
/* Sección de Servicios - Panel */
.servicios-panel {
  margin: 100px auto;
  max-width: 1200px;
  text-align: center;
}

/* Ajustes del panel de navegación */
.panel-nav-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Panel de navegación (botones) */
.panel-nav {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  background: #fff;
  padding: 10px;
  border-radius: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: fit-content;
}

/* Estilos de los botones */
.panel-btn {
  border: 2px solid #132c49;
  border-radius: 100px;
  background: transparent;
  color: #132c49;
  padding: 8px 12px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s ease;
}

.panel-btn:hover {
  background-color: #132c49;
  color: white;
  border-color: transparent;
}

.panel-btn.active {
  background-color: #9b7553;
  color: white;
  border-color: transparent;
}

/* Contenedor de contenido de cada sección */
.panel-section-container {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}

/* Ocultar secciones inactivas */
.hidden {
  display: none;
}

/* Estilos de las secciones */
.panel-section {
  text-align: left;
  padding: 20px;
}

/*panel producción audiovisual-----------*/
/* 🔹 Contenedor Principal */
.produccion-audiovisual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 50px auto;
  padding: 40px;


}

/* 🔹 Contenedor Izquierdo (Texto) */
.produccion-texto {
  width: 50%;
  text-align: left;
}

/* 🔹 Estilos del Título */
.titulo-produccion {
  font-size: 2em;
  font-weight: bold;
  color: #9b7553;
  text-align: center;
}

/* 🔹 Descripción */
.descripcion-produccion {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
  text-align: justify;
}

/* 🔹 Lista con Iconos */
.lista-produccion {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.lista-produccion li {
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 10px;
  cursor: pointer;
}

/* 🔹 Icono de flecha */
.lista-produccion li i {
  color: #132c49;
  font-size: 1.2em;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 🔹 Hover en lista */
.lista-produccion li:hover {
  background-color: rgba(155, 117, 83, 0.1);
  transform: translateX(5px);
}

.lista-produccion li:hover i {
  color: #9b7553;
  transform: scale(1.2);
}

/* 🔹 Contenedor Derecho (Imagen) */
.produccion-imagen {
  width: 50%;
  display: flex;
  justify-content: center;
}

.produccion-imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  /* Borde redondeado */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*----------inteligencia arificial ---------------*/
/* 🔹 Contenedor Principal */
.inteligencia-artificial {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 50px auto;
  padding: 40px;
}

/* 🔹 Contenedor Izquierdo (Imagen) */
.inteligencia-imagen {
  width: 50%;
  display: flex;
  justify-content: center;
}

.inteligencia-imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 🔹 Contenedor Derecho (Texto) */
.inteligencia-texto {
  width: 50%;
  text-align: left;
}

/* 🔹 Título */
.titulo-inteligencia {
  font-size: 2em;
  font-weight: bold;
  color: #9b7553;
  text-align: center;
}

/* 🔹 Descripción */
.descripcion-inteligencia {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
  text-align: justify;
}

/* 🔹 Lista con Iconos */
.lista-inteligencia {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.lista-inteligencia li {
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 10px;
  cursor: pointer;
}

/* 🔹 Icono de flecha */
.lista-inteligencia li i {
  color: #132c49;
  font-size: 1.2em;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 🔹 Hover en lista */
.lista-inteligencia li:hover {
  background-color: rgba(155, 117, 83, 0.1);
  transform: translateX(5px);
}

.lista-inteligencia li:hover i {
  color: #9b7553;
  transform: scale(1.2);
}

/*-----------marketing-----------------*/
/* 🔹 Contenedor Principal */
.marketing-digital {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 50px auto;
  padding: 40px;
}

/* 🔹 Contenedor Izquierdo (Texto) */
.marketing-texto {
  width: 50%;
  text-align: left;
}

/* 🔹 Título */
.titulo-marketing {
  font-size: 2em;
  font-weight: bold;
  color: #9b7553;
  text-align: center;
}

/* 🔹 Descripción */
.descripcion-marketing {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
  text-align: justify;
}

/* 🔹 Lista con Iconos */
.lista-marketing {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.lista-marketing li {
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 10px;
  cursor: pointer;
}

/* 🔹 Icono de flecha */
.lista-marketing li i {
  color: #132c49;
  font-size: 1.2em;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 🔹 Hover en lista */
.lista-marketing li:hover {
  background-color: rgba(155, 117, 83, 0.1);
  transform: translateX(5px);
}

.lista-marketing li:hover i {
  color: #9b7553;
  transform: scale(1.2);
}

/* 🔹 Contenedor Derecho (Imagen) */
.marketing-imagen {
  width: 50%;
  display: flex;
  justify-content: center;
}

.marketing-imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*-------------branding---------------*/

/* 🔹 Contenedor Principal */
.branding-diseno {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 50px auto;
  padding: 40px;
}

/* 🔹 Contenedor Izquierdo (Imagen) */
.branding-imagen {
  width: 50%;
  display: flex;
  justify-content: center;
}

.branding-imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 🔹 Contenedor Derecho (Texto) */
.branding-texto {
  width: 50%;
  text-align: left;
}

/* 🔹 Título */
.titulo-branding {
  font-size: 2em;
  font-weight: bold;
  color: #9b7553;
  text-align: center;
}

/* 🔹 Descripción */
.descripcion-branding {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
  text-align: justify;
}

/* 🔹 Lista con Iconos */
.lista-branding {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.lista-branding li {
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: all 0.3s ease;
  border-radius: 10px;
  cursor: pointer;
}

/* 🔹 Icono de flecha */
.lista-branding li i {
  color: #132c49;
  font-size: 1.2em;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 🔹 Hover en lista */
.lista-branding li:hover {
  background-color: rgba(155, 117, 83, 0.1);
  transform: translateX(5px);
}

.lista-branding li:hover i {
  color: #9b7553;
  transform: scale(1.2);
}

/* efecillos------------------*/
/* 🔹 Animación de entrada con desvanecimiento y elevación */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 0.4s ease-in-out;
}

/* 🔹 Animación de salida con desvanecimiento */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 0.3s ease-in-out;
}


/*.--------------------parte de testimoniales------------*/
/* 🔹 Contenedor General de Testimoniales */
.testimonials-container {
  max-width: 900px;
  /* Ancho limitado para no ocupar toda la página */
  margin: 80px auto;
  /* Centrado en la página */
  text-align: center;
  padding: 40px;
  background: #f9f9f9;
  /* Fondo suave */
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 🔹 Título de la Sección */
.testimonials-title {
  font-size: 2em;
  font-weight: bold;
  color: #132c49;
  margin-bottom: 20px;
}

/* 🔹 Contenedor de Testimoniales */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 🔹 Tarjetas de Testimoniales */
.testimonial-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

/* 🔹 Imagen del Cliente */
.testimonial-card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 3px solid #9b7553;
}

/* 🔹 Contenido del Testimonio */
.testimonial-content {
  text-align: left;
}

/* 🔹 Texto del Testimonio */
.testimonial-quote {
  font-size: 1.1em;
  font-style: italic;
  color: #555;
  margin-bottom: 5px;
}

/* 🔹 Autor del Testimonio */
.testimonial-author {
  font-weight: bold;
  color: #9b7553;
}

/* 🔹 Efecto Hover */
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/*contacto-------------------------------------------------------------------------------conacto-*/
/* 🔹 Contenedor General de la Sección */
.cta-section {
  background: linear-gradient(to bottom, #132c49, #a69f91);
  /* Degradado elegante */
  padding: 60px 20px;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 🔹 Contenedor Interno */
.cta-container {
  max-width: 800px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
  /* Capa sutil traslúcida */
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  /* Efecto glassmorphism */
}

/* 🔹 Título Mejorado */
.cta-title {
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* 🔹 Descripción */
.cta-description {
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* 🔹 Botón Mejorado */
.cta-button {
  padding: 12px 25px;
  font-size: 1.1em;
  font-weight: bold;
  background: #fff;
  color: #132c49;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
}

/* 🔹 Hover en Botón */
.cta-button:hover {
  background: #132c49;
  color: white;
  transform: scale(1.05);
}




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

/* 🚀 Galería disruptiva */
.gallery {
  display: grid;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
}

.gallery-item {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.gallery-item:hover::before {
  transform: scale(1.1);
}

/* 🚀 Paneles desplegables */
.accordion {
  max-width: 800px;
  margin: auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-item h3 {
  padding: 15px;
  margin: 0;
  cursor: pointer;
  background: #9b7553;
  color: white;
  text-align: left;
}

.accordion-content {
  display: none;
  padding: 15px;
  background: #f5f5f5;
}

.accordion-item.active .accordion-content {
  display: block;
}

/* ===============================
   📱 MEDIA QUERIES RESPONSIVE
   =============================== */
/* ===============================
   📱 MEDIA QUERIES RESPONSIVE
   =============================== */

/* 🔹 Laptop grande (≤ 1440px) */
/* 🔹 Laptop grande (≤ 1440px) */
/* 🔹 Laptop grande (≤ 1440px) */


@media screen and (max-width: 1440px) {}

/* 🔹 Tablet horizontal (≤ 1024px) */
@media screen and (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .hero {
    padding: 80px 20px 40px;
    height: auto;
  }

  .hero-image {
    width: 80%;
  }

  .search-bar {
    flex-direction: column;
    gap: 10px;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
  }

  .search-section {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
  }

  .search-section input,
  .search-section select {
    font-size: 1em;
    width: 70%;
    text-align: center;
  }

  .select-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    width: 100%;
  }

  .select-wrapper select {
    appearance: none;
    text-align: center;
    padding-right: 25px;
  }

  .cards-inmuebles-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }

  .card-inmueble {
    flex: 1 1 calc(33.333% - 40px);
    max-width: 400px;
  }

  .galeria {
    grid-template-columns: repeat(2, 2fr);

  }

  .imagen1,
  .imagen2,
  .imagen3,
  .imagen4 {
    grid-column: auto;
    grid-row: auto;
  }



  header {
    padding-left: 0;
    padding-right: 0;
  }

  .formulario-contacto-lateral {
    display: none;
  }

  .detalle-layout {
    flex-direction: column;
  }

  .detalle-columna-izquierda {
    flex: 1 1 100%;
  }

}

/* 🔹 Tablet vertical y móviles grandes (≤ 768px) */
@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  nav ul li {
    margin: 5px 0;
  }

  .mega-dropdown .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    display: none !important;
  }

  .card-inmueble {
    flex: 1 1 calc(50% - 30px);
    max-width: 100%;
  }


  .carousel-wrapper {
    padding: 0;
  }

  .galeria {
    grid-template-columns: repeat(2, 2fr);

  }

  .servicios-section,
  .produccion-audiovisual,
  .inteligencia-artificial,
  .marketing-digital,
  .branding-diseno {
    flex-direction: column;
    text-align: center;
  }

  .servicios-texto,
  .produccion-texto,
  .inteligencia-texto,
  .marketing-texto,
  .branding-texto,
  .servicios-imagenes,
  .produccion-imagen,
  .inteligencia-imagen,
  .marketing-imagen,
  .branding-imagen {
    width: 100%;
  }

  .galeria-popup-grid {
    grid-template-columns: 1fr 1fr;
  }

  .caracteristicas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /*detalle de inkueble*/
  .detalle-inmueble {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .info-derecha {
    text-align: center;
  }

  .iconos {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .descripcion,
  .seccion-caracteristicas {
    padding: 20px;
    text-align: center;
  }

  .descripcion p,
  .descripcion h2 {
    text-align: center;
  }

  #status-inmueble {
    display: block;
    margin: 20px auto;
    text-align: center;
    width: fit-content;
  }

  .boton-pdf {
    display: flex;
    justify-content: center;
    margin: 20px auto;
  }

  .precio {
    font-size: 3rem;
    /* Tamaño un poco más grande para móviles y tablets */
  }

  .descripcion p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #444;
    text-align: justify;
    /* Justifica el texto */
  }
}

/* 🔹 Móvil (≤ 480px) */
@media screen and (max-width: 480px) {
  .hero {
    height: 100vh;
    /* O usa 90vh si lo ves mejor */
    padding-top: 120px;
    /* Aumenta espacio si el header se superpone */
  }

  .hero-image {
    width: 90vw;
    /* Escala la imagen a casi todo el ancho de pantalla */
    max-width: 100%;
    margin-top: 20px;
  }


  .search-bar {
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .search-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 5px 0;
    border: none !important;
  }

  .search-section input,
  .search-section select {
    font-size: 1em;
    width: 100%;
    text-align: center;
  }

  .select-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    width: 100%;
  }

  .select-wrapper select {
    appearance: none;
    text-align: center;
    padding-right: 25px;
  }

  .select-wrapper i {
    position: absolute;
    right: 15px;
    pointer-events: none;
  }

  .card-inmueble {
    flex: 1 1 100%;
    /* Ocupar todo el ancho en celular */
    max-width: 100%;
  }

  .cards-inmuebles-carousel .card-inmueble {
    width: 90vw !important;
    /* Ocupa casi toda la pantalla */
    margin: 0 auto;
    /* Centrada */
  }

  .pais-btn {
    font-size: 0.9em;
    padding: 6px 10px;
  }

  .galeria-popup-grid {
    grid-template-columns: 1fr;
  }

  .caracteristicas-grid {
    grid-template-columns: 1fr;
  }

  .cta-title {
    font-size: 1.5em;
  }

  .cta-description {
    font-size: 1em;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .testimonials-container {
    padding: 20px;
  }

  .testimonial-card {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-card img {
    margin: 0 auto 10px;
  }

  /*dealle verion*/
  .ver-galeria-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .btn-ver-galeria,
  .btn-ver-mapa {
    width: 90%;
    max-width: 300px;
  }

  .descripcion p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #444;
    text-align: justify;
    /* Justifica el texto */
  }


}






/*------------------------------Responsive header celular y tablet-----------*/
/* Mobile Header (oculto por defecto) */
.mobile-header {
  display: none;
  background-color: #132c49;
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1001;
}

/* Contenedor de logo e ícono hamburguesa */
.mobile-header-container {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  /* espacio interior a los lados */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.mobile-logo img {
  width: 180px;
  height: auto;
}

/* Ícono hamburguesa */
.hamburger-icon {
  font-size: 1.8em;
  color: white;
  cursor: pointer;
}

/* Menú hamburguesa desplegable */
/* Mobile menu visualmente mejorado */
.mobile-menu {
  background-color: #cacaca;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: absolute;
  width: calc(100% - 40px);
  top: 70px;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.mobile-menu.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

.mobile-menu a {
  color: #132c49ec;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 500;
  transition: color 0.2s ease;
}

.mobile-menu a:hover {
  color: #6d4725;
}


/* Responsive: Ocultar nav normal y mostrar mobile header */
@media screen and (max-width: 1024px) {
  header nav {
    display: none;
  }

  .mobile-header {
    display: block;
  }
}


/*secion inmuebles.html--------------*/
body.inmuebles header {
  background-color: #132c49;
  z-index: 1000;
}


#map {
  height: 400px;
  width: 100%;
  border-radius: 30px;
  margin-top: 60px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.mapa-wrapper {
  max-width: 1200px;
  /* o el ancho que uses en el resto de tu sitio */
  margin: 0 auto;
  padding: 0 1rem;
}

.map-popup {
  max-width: 240px;
  font-family: inherit;
  font-size: 14px;
  color: #132c49;
}

.map-popup img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
}

.map-popup h4 {
  font-size: 15px;
  margin: 0 0 4px;
}

.map-popup a {
  text-decoration: none;
  color: #132c49;
  font-weight: 600;
  display: inline-block;
  margin-top: 6px;
}


.filtro-container {
  margin-top: 100px;
  padding: 1rem 2rem;
  text-align: center;
}

.filtro-container label {
  font-weight: bold;
  font-size: 1rem;
  color: var(--primary-color);
  margin-right: 10px;
}

.filtro-container select {
  border-radius: 50px;
  padding: 10px 16px 10px 20px;
  /* ← Cambié el right (segundo valor) de 20px a 16px */
  font-size: 1rem;
  border: 2px solid var(--primary-color);
  color: #132c49;
  font-family: var(--font-family);
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  /* Asegura que uses el estilo del sistema si luego personalizas flechas */
}

.filtro-container select:hover {
  background-color: #132c49;
  color: white;
  border-color: transparent;
}

/* Etiqueta personalizada del marcador */
.custom-label {
  position: absolute;
  background-color: #132c49;
  /* o #132c49 si quieres forzarlo */
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;

  user-select: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  /* <- asegura que reciba clicks */
  z-index: 999;
}

.custom-label.gold {
  background-color: var(--primary-color);
  /* dorado o el color que definas para premium */
}

/*---seardch bar*/
/* Estilo adaptado al diseño de .custom-search-bar */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem auto;
  max-width: 1200px;
  margin-top: 30px;
  padding: 8px 15px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}

body.inmuebles .search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem auto;
  max-width: 1200px;
  margin-top: 100px;
  padding: 8px 15px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}


/* Secciones individuales */
.search-section {
  display: flex;
  align-items: center;
}

/* Estilo del select */
.select-wrapper {
  position: relative;
}

.select-wrapper select {
  padding: 10px 2rem 10px 1rem;
  font-size: 1em;
  border: none;
  background-color: transparent;
  outline: none;
  appearance: none;
}

/* Icono de flechita */
.select-wrapper i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #132c49;
}

/* Campo de texto */
.search-section input[type="text"] {
  padding: 10px;
  font-size: 1em;
  border: none;
  background-color: transparent;
  outline: none;
  width: 250px;
}

/* Botón de buscar */
.search-section button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: #132c49;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*acutocompletador----------------------------------------*/

/*autocompletado*/
.autocomplete-items {
  position: absolute;
  top: calc(100% + 5px);
  /* debajo del input */
  left: 50%;
  transform: translateX(0%);
  width: 250px;
  /* igual que el input de texto */
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  list-style: none;
}

.autocomplete-items li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.autocomplete-items li:hover {
  background-color: #f5f5f5;
}

/* 🟠 Sección general */
.servicios-marketing {
  padding: 80px 20px;
}

/* 🟠 Grid de cards */
.contenedor-servicios {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

/* 🟠 Card de servicio */
.card-servicio {
  position: relative;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  font-family: 'Poppins', sans-serif;
  background-size: cover;
  background-position: center;
  color: white;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  align-items: flex-end;
}

/* 🟠 Efecto de hover */
.card-servicio:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* 🟠 Degradado suave encima de la imagen */
.card-servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.65));
  z-index: 0;
  transition: background 0.3s ease;
}

/* 🟠 Contenido interno */
.card-servicio .contenido {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

/* 🟠 Título */
.card-servicio h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* 🟠 Descripción */
.card-servicio p {
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 🟠 Botón */

.boton-detalles {
  display: inline-block;
  background-color: #0c2340;
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  transition: background-color 0.3s ease;
}

.boton-detalles:hover {
  background-color: #183c65;
}

.card-servicio button:hover {
  background-color: #183c65;
  transform: scale(1.05);
}

/*imagen markeing*/
.hero-central {
  max-width: 280px;
  /* Tamaño máximo */
  width: 90%;
  /* Adaptable en móviles */
  height: auto;
  /* Mantiene proporciones */
  display: block;
  /* Para aplicar margen auto */
  margin: 10px auto;
  /* Centrado vertical y horizontal */
}

/*imagen markeing*/
.hero-interes {
  max-width: 280px;
  /* Tamaño máximo */
  width: 90%;
  /* Adaptable en móviles */
  height: auto;
  /* Mantiene proporciones */
  display: block;
  /* Para aplicar margen auto */
  margin: 10px auto;
  /* Centrado vertical y horizontal */
}


/* 🟠 Clases para imágenes de fondo */
.fondo1 {
  background-image: url('../images/mk1.png');
}

.fondo2 {
  background-image: url('../images/mk2.png');
}

.fondo3 {
  background-image: url('../images/mk3.png');
}

.fondo4 {
  background-image: url('../images/mk4.png');
}


/*contacto-----------------------------*/
.contacto-grid {
  font-family: var(--font-family);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 200px 0;
}

.info-contacto,
.formulario-contacto {
  flex: 1;
  min-width: 300px;
}

.info-contacto {
  background: #f5f5f5;
  padding: 30px;
  border-radius: 16px;
}

.formulario-contacto {
  background: #fff;

  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.bloque-info {
  margin-bottom: 25px;

}

.bloque-info h3 {
  font-size: 1.1rem;

  margin-bottom: 8px;
  color: var(--primary-color, #132c49);
}

.formulario-contacto input,
.formulario-contacto textarea,
.formulario-contacto select {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 2px solid #ccc;
  border-radius: 20px;
  font-size: 1rem;
  font-family: var(--font-family);
}

.checkbox-label {
  font-size: 0.95rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.checkbox-label input {
  margin-right: 10px;
}

.btn-enviar {
  background-color: var(--primary-color, #132c49);
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-enviar:hover {
  background-color: #9b7553;
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .contacto-grid {
    flex-direction: column;
  }
}

/*-----------------------blog provi-------------------------*/

/* ===============================
   📄 ESTILOS BLOG INDIVIDUAL
   =============================== */

.blog-article {
  max-width: 900px;
  margin: 80px auto;
  padding: 40px 20px;
  font-family: var(--font-family);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  line-height: 1.8;
  color: #333;
}

.blog-header {
  margin-bottom: 30px;
  text-align: center;
}

.blog-title {
  font-size: 2.5em;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.blog-meta {
  font-size: 0.95em;
  color: #666;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.blog-image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.blog-img-inline {
  width: 80%;
  /* 🔄 Ancho completo horizontalmente */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.blog-content h2 {
  font-size: 1.6em;
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 15px;
}

.blog-content p {
  font-size: 1.1em;
  margin-bottom: 15px;
  text-align: justify;
}

.blog-content ul {
  margin-left: 20px;
  margin-bottom: 20px;
  list-style-type: disc;
}

.blog-content ul li {
  margin-bottom: 10px;
  font-size: 1.05em;
}

/* ===============================
     📱 MEDIA QUERIES RESPONSIVE BLOG
     =============================== */

@media screen and (max-width: 768px) {
  .blog-title {
    font-size: 2em;
  }

  .blog-meta {
    font-size: 0.9em;
    flex-direction: column;
    gap: 5px;
  }

  .blog-image-row {
    flex-direction: column;
  }

  .blog-img-inline {
    width: 100%;
  }

  .blog-content h2 {
    font-size: 1.4em;
  }

  .blog-content p,
  .blog-content ul li {
    font-size: 1em;
  }
}

@media screen and (max-width: 480px) {
  .blog-article {
    padding: 20px 15px;
  }

  .blog-title {
    font-size: 1.6em;
  }

  .blog-content h2 {
    font-size: 1.2em;
  }

  .blog-content p,
  .blog-content ul li {
    font-size: 0.95em;
  }
}


/* ===============================
      Filtros avanzados 
     =============================== */
/* Filtros avanzados desplegables */
.filtros-avanzados {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  z-index: 10;
}

.filtro-hover {
  position: relative;
}

.filtro-btn {
  padding: 10px 20px;
  border: 2px solid #132c49;
  background-color: white;
  border-radius: 100px;
  color: #132c49;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 1em;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}

.filtro-btn:hover {
  background-color: #132c49;
  color: white;
}

.filtro-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background-color: white;
  border: 2px solid #132c49;
  border-radius: 20px;
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 180px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.filtro-hover:hover .filtro-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filtro-menu button,
.filtro-menu select {
  padding: 8px 16px;
  border: 2px solid #132c49;
  background-color: white;
  color: #132c49;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.95em;
  transition: background-color 0.3s, color 0.3s;
}

.filtro-menu button:hover,
.filtro-menu select:hover,
.filtro-menu button.active {
  background-color: #132c49;
  color: white;
}

.filtro-menu select {
  border-radius: 10px;
  min-width: 100px;
}

.filtro-dropdown {
  position: relative;
  display: inline-block;
}

.filtro-btn {
  background-color: transparent;
  border: 2px solid #132c49;
  color: #132c49;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.95em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.filtro-btn:hover {
  background-color: #132c49;
  color: white;
}

.filtro-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 2px solid #132c49;
  border-radius: 20px;
  padding: 20px;
  z-index: 1000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  min-width: 260px;
}

.filtro-popup.show {
  display: block;
}

.filtro-precio label {
  font-weight: bold;
  color: #132c49;
  margin-bottom: 8px;
  display: block;
}

.rango-precio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.rango-precio input[type="number"] {
  width: 100px;
  padding: 6px 10px;
  border: 2px solid #132c49;
  border-radius: 100px;
  font-size: 0.9em;
  transition: all 0.3s ease;
}

.rango-precio input:focus {
  outline: none;
  border-color: #9b7553;
}

.btn-aplicar-precio {
  background-color: #132c49;
  color: white;
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-aplicar-precio:hover {
  background-color: #9b7553;
}

/*--------------------
      traducir 

--------------------*/
.btn-traducir-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #1a1a1a;
  color: white;
  padding: 10px 16px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  padding-left: 2rem;
  /* espacio para spinner */
}

.btn-traducir-flotante.loading {
  color: transparent;
  pointer-events: none;
}

.btn-traducir-flotante.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.8rem;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*-------
paginacion inmuebles
---------------------*/
.paginador {
  text-align: center;
  margin: 30px 0;
}

.paginador button {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  margin: 0 5px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.2s;
}

.paginador button.activo {
  background-color: #9b7553;
  color: white;
  border-color: #9b7553;
}

.paginador button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*-------------------
descargar pdf
------------*/
/* Estilo del botón PDF */
.btn-descargar-pdf {
  background-color: #9b7553;
  color: white;
  font-family: var(--font-family);
  font-size: 1rem;
  padding: 10px 16px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease;
  width: auto;
}

.btn-descargar-pdf:hover {
  background-color: #0f2e45;
}

/*----------------
precio aprox*/
/* Estilo para tooltip de precio */
.precio-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.precio-tooltip .tooltip-mxn {
  visibility: hidden;
  background-color: var(--primary-color);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  position: absolute;
  z-index: 10;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.precio-tooltip .tooltip-mxn::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--primary-color) transparent transparent transparent;
}

.precio-tooltip:hover .tooltip-mxn {
  visibility: visible;
  opacity: 1;
}

/*boton compartir*/
.modal-compartir {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-compartir.hidden {
  display: none;
}

.modal-compartir .modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  position: relative;
}

.modal-compartir input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.modal-compartir .cerrar-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.redes-compartir {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.redes-compartir a {
  font-size: 24px;
  color: var(--primary-color);
}

.redes-compartir a:hover {
  color: var(--primary-hover-color);
}

.compartir-fuera {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding-right: 40px;
  /* ajusta según el padding del aside */
}

@media screen and (max-width: 768px) {
  .compartir-fuera {
    justify-content: right;
    padding-right: 0;
  }
}

.btn-compartir-link {
  background-color: #ad9986;
  /* blanco opaco */
  border: 1.5px solid #ccc;
  /* borde gris claro */
  color: #444;
  /* texto gris oscuro */
  font-family: var(--font-family);
  font-size: 1rem;
  padding: 10px 18px;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: left;
  gap: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-compartir-link:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

/*zonas locales tres */


.zonas-destacadas {
  padding: 60px 20px;
  text-align: center;
}

.zonas-destacadas h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

/* Contenedor de los botones (México / España / USA) */
.botones-paises-zonas {
  display: flex;
  justify-content: center;
  /* centrados */
  align-items: center;
  gap: 14px;
  /* 🔹 separación entre botones */
  flex-wrap: wrap;
  /* pasa a varias líneas en móvil */
  margin-bottom: 30px;
  /* conservamos tu separación inferior */
}

/* (Opcional) ajustar la separación en móviles */
@media (max-width: 480px) {
  .botones-paises-zonas {
    gap: 8px;
  }
}

/* (Fallback opcional si alguna versión no respeta gap en flex) */
.botones-paises-zonas .pais-zona-btn {
  margin: 0;
  /* reseteo */
}

.no-flex-gap .botones-paises-zonas .pais-zona-btn {
  margin-right: 12px;
  /* sólo si usas una clase utilitaria para fallback */
}

.no-flex-gap .botones-paises-zonas .pais-zona-btn:last-child {
  margin-right: 0;
}

.pais-zona-btn {
  padding: 8px 12px;
  /* Mismo padding que los enlaces del header */
  font-size: 1em;
  /* Mismo tamaño de fuente */
  font-family: var(--font-family);
  /* Misma familia de fuentes */
  font-weight: 500;
  /* Mismo grosor de fuente */
  border: 2px solid #132c49;
  /* Borde del color principal */
  border-radius: 100px;
  /* Bordes redondeados */
  background-color: transparent;
  /* Fondo transparente */
  color: #132c49;
  /* Color del texto */
  cursor: pointer;
  transition: all 0.5s ease;
  /* Transición suave */
}

.pais-zona-btn.activo {
  background-color: #9b7553;
  color: white;
  border-color: transparent;
}

.pais-zona-btn:hover {
  background-color: #132c49;
  /* Fondo sólido del color principal */
  color: white;
  /* Texto blanco */
  border-color: transparent;
  /* Eliminar el borde */
}

.zonas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}


/* Ya lo tienes: define columnas por layout */
.zonas-grid.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.zonas-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.zonas-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* México / España */
.zonas-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.zonas-grid.grid-1 {
  grid-template-columns: 1fr;
}

/* USA full width */

/* ✅ “Pill” para 3 columnas: más ancho que alto */
.zonas-grid.grid-3 .zona-card {
  aspect-ratio: 2.8 / 1;
  /* alarga horizontalmente */
  border-radius: 22px;
  /* pastilla más marcada */
}

/* Asegurar que la imagen siempre llena */
.zona-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zonas-grid.single {
  grid-template-columns: repeat(3, 1fr);
}

.zonas-grid.single .zona-card {
  grid-column: 2 / 3;
}

@media (max-width: 960px) {
  .zonas-grid.single {
    grid-template-columns: repeat(2, 1fr);
  }

  .zonas-grid.single .zona-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .zonas-grid.single {
    grid-template-columns: 1fr;
  }

  .zonas-grid.single .zona-card {
    grid-column: auto;
  }
}

@media (max-width: 960px) {
  .zonas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 📱 Móvil: siempre 1 columna, sin importar la clase grid-* */
@media (max-width: 640px) {

  .zonas-grid,
  .zonas-grid.grid-6,
  .zonas-grid.grid-4,
  .zonas-grid.grid-3,
  .zonas-grid.grid-2,
  .zonas-grid.grid-1,
  .zonas-grid.single {
    grid-template-columns: 1fr;
  }

  /* Quitar centrado especial en 'single' para que ocupe toda la fila */
  .zonas-grid.single .zona-card {
    grid-column: auto;
  }

  /* (Opcional) Mejora de proporción en móvil para que no quede tan “panorámica” */
  .zonas-grid .zona-card {
    aspect-ratio: 16 / 9;
  }
}


.zona-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 20px;
}

.zona-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.zona-card:hover img {
  transform: scale(1.05);
}

.zona-nombre {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 2;
}


/*cards del blog*/
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-content h3 {
  margin: 0 0 8px;
  font-size: 1.25em;
  color: var(--primary-color);
}

.blog-card-content p {
  flex: 1;
  margin: 0 0 12px;
  color: #555;
  font-size: .95em;
}

.blog-card-meta {
  font-size: .85em;
  color: #888;
}

/* ===========================
   Estilo para imágenes en bloques de blog (detalle)
   =========================== */
.blog-content img {
  display: block;
  /* para centrar bien */
  max-width: 100%;
  /* no se desborde */
  height: auto;
  /* conserva proporción */
  margin: 24px auto;
  /* separación arriba/abajo y centrado */
  border-radius: 12px;
  /* esquinas redondeadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* sombra suave */
}

/*boton detalles tipo de inmueble */
/* Badge tipo de propiedad */
.badge-tipo {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  border: 1px solid #d6dee9;
  color: #0f2a43;
  font-size: .85rem;
  font-weight: 600;
  margin-right: 8px;
  white-space: nowrap;
}

/*inmuebles filro avanzado y eiquetas*/
/* ===== Resumen de filtros (autosize) ===== */
.resumen-filtros {
  /* tamaño */
  width: fit-content;
  /* 👈 se ajusta al contenido */
  max-width: min(1100px, calc(100% - 32px));
  /* box */
  margin: 16px auto 0;
  /* centrado horizontal */
  padding: 10px 14px;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #faf8f6;
  /* layout */
  display: inline-flex;
  /* 👈 ancho según chips */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* 👈 si no cabe, salta de línea */
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03) inset;
}

.resumen-filtros .leyenda {
  margin: 0 6px 0 6px;
  font-size: 14px;
  color: #7c7c7c;
  white-space: nowrap;
}

.resumen-filtros .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e9e5dd;
  font-size: 13px;
  color: #5a4d40;
  border: 1px solid #d8ceb7;
  user-select: none;
  white-space: nowrap;
  /* el chip no se parte */
}

.resumen-filtros .chip i {
  font-size: 12px;
  opacity: .8;
}

/* Mobile: si prefieres que “llene” un poco más */
@media (max-width: 640px) {
  .resumen-filtros {
    max-width: calc(100% - 24px);
  }
}

/* Resetear filtros (igual que otros botones) */
#btn-reset-filtros.filtro-btn {
  background: #f5f2ef;
  border: 1px solid #d8ceb7;
  color: #5a4d40;
}

#btn-reset-filtros.filtro-btn:hover {
  background: #5a4d40;
  color: #ffffffec;
  border: 1px solid #5a4d40;
}

/*inmuebles mapa locacion inmueble */
/* El chip es clicable */
.custom-label {
  cursor: pointer;
}

/* Resaltado breve de la card al hacer clic en el chip del mapa */
.card-inmueble.highlight-card {
  outline: 2px solid #c2b59b;
  box-shadow: 0 0 0 4px rgba(194, 181, 155, 0.25);
  transition: box-shadow .2s ease, outline .2s ease;
}




/*=============================
===========prueba hover======
*/
/* ─────────────────────────────────────────────
   Popover de previsualización de fotos (detalle)
   ───────────────────────────────────────────── */
/* =============================
   Popover de previsualización de fotos (detalle) — adaptable
   ============================= */
.preview-popover {
  position: fixed;
  /* evita recortes */
  z-index: 9999;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
  width: auto;
  /* ← se adapta al contenido */
  max-width: 92vw;
  /* seguridad en pantallas pequeñas */
  pointer-events: none;
  /* no interfiere con el hover */
  overflow: hidden;
  /* redondeos limpios */
}

.preview-grid {
  --cols: 3;
  /* valor por defecto (se sobreescribe desde JS) */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
}

/* miniaturas por defecto (2–3 columnas) */
.preview-grid img {
  width: clamp(120px, 22vw, 160px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 1 sola imagen: que luzca más grande */
.preview-grid.cols-1 img {
  width: clamp(220px, 40vw, 420px);
  aspect-ratio: 16 / 10;
  /* un poco más panorámico */
}

/* 2 imágenes: un poco más anchas que el default */
.preview-grid.cols-2 img {
  width: clamp(160px, 28vw, 260px);
  aspect-ratio: 4 / 3;
}

@media (max-width: 720px) {
  .preview-popover {
    max-width: 96vw;
  }

  /* en móvil dejamos que JS siga mandando --cols,
     pero las miniaturas pueden crecer un poco menos */
  .preview-grid img {
    width: clamp(110px, 42vw, 180px);
  }
}



/*========================================
===============Detalle implementacion mapa 
==============================================*/
/* 🔶 Visor de planos */
.plano-popup.hidden {
  display: none
}

.plano-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.plano-popup .popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}

.plano-dialog {
  position: relative;
  z-index: 1;
  width: 95vw;
  height: 92vh;
  /* casi toda la pantalla */
  margin: 2vh auto;
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.plano-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.plano-titulo {
  font-weight: 600;
  font-size: 1rem
}

.plano-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plano-select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.plano-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #444;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background .2s, color .2s;
}

.plano-close:hover {
  background: #f0f0f0;
  color: #000;
}

/* Layout principal */
.plano-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  /* ← permite encoger en el eje vertical */
}

@media (max-width: 900px) {
  .plano-body {
    grid-template-columns: 1fr;
  }

  .plano-right {
    border-left: none;
    border-top: 1px solid #eee;
    height: 40vh
  }
}

/* Columnas del grid */
.plano-left,
.plano-right {
  min-height: 0;
  /* ← importante para que el contenido no desborde en grid */
  box-sizing: border-box;
  /* ← padding dentro del alto disponible */
}

.plano-left {
  position: relative;
  overflow: auto;
  background: #fff;
}

.plano-right {
  position: relative;
  background: #fff;
  border-left: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mapa */
.plano-stage {
  position: relative;
  display: inline-block;
  margin: 12px;
}

.plano-stage img.map-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* Pines */
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #9b7553;
  color: #fff;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: .8rem;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #9b7553;
}

.pin.link {
  background: #0f766e
}

.pin.link::after {
  border-top-color: #0f766e
}

.pin .badge {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #00000088;
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: .68rem
}

.pin.selected {
  outline: 2px dashed #00000055
}

/* Panel derecho (preview de foto) */
.plano-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  /* ← evita que el padding sume alto extra */
}

.plano-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ← ajusta sin recortar */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.plano-preview-empty {
  color: #666;
  font-size: .95rem
}


/*precio secundario detalles*/
.precio-secundario {
  font-size: 1rem;
  color: #6b7280;
  margin-top: .25rem;
}




/*====================================
============== desarrollos css*/

/* Chips */
/* ====== Chips con estado ====== */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-unidad {
  border: 1px solid #d9c8ba;
  background: #fff;
  color: #6e4e33;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .03s ease, background-color .18s ease, border-color .18s ease;
}

.chip-unidad:hover {
  background: #fbf7f4;
  transform: translateY(-1px);
}

.chip-unidad .chip-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Disponible (verde suave) */
.chip-unidad.is-available {
  border-color: #9ee7d6;
  background: #f1fcf8;
  color: #0f766e;
}

.chip-unidad.is-available .chip-badge {
  background: #d9fbf1;
  border-color: #9ee7d6;
  color: #0f766e;
}

/* Preventa / Reservado (ámbar) */
.chip-unidad.is-pre {
  border-color: #ffd79a;
  background: #fff8ec;
  color: #8a5a14;
}

.chip-unidad.is-pre .chip-badge {
  background: #ffefd4;
  border-color: #ffd79a;
  color: #8a5a14;
}

/* Vendido (gris) */
.chip-unidad.is-sold {
  border-color: #d1d5db;
  background: #f5f6f7;
  color: #6b7280;
  opacity: .9;
}

.chip-unidad.is-sold .chip-badge {
  background: #e9ecef;
  border-color: #d1d5db;
  color: #6b7280;
}

/* Neutro/fallback */
.chip-unidad.is-neutral .chip-badge {
  background: #eee;
  color: #666;
  border-color: #ddd;
}


/*============nuevas chips 

/* contenedores */
.unidades-strip {
  max-width: 1100px;
  margin: 6px auto 24px;
}

.strip-group {
  margin-bottom: 10px;
}

.strip-title {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #6b6b6b;
}

.chips-row {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 6px;
}

/* chip base */
.chip-unidad {
  white-space: nowrap;
  border: 1px solid #eee;
  background: #fff;
  color: #111;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: 500 .92rem/1 "Poppins", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip-unidad:hover {
  background: #f7f3ef
}

/* badge dentro del chip */
.chip-badge {
  font-size: .75rem;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
}

/* colores por estado/categoría */
.is-common .chip-badge {
  /* Áreas comunes → VERDE (antes Disponible) */
  background: #16a34a;
}

.is-available .chip-badge {
  /* Disponible → dorado/marca */
  background: #9b7553;
}

.is-pre .chip-badge {
  /* Preventa */
  background: #f59e0b;
}

.is-sold .chip-badge {
  /* Vendido */
  background: #b91c1c;
}

.is-neutral .chip-badge {
  background: #6b7280;
}

/* ================== Modal ================== */
/* ================== Modal ================== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.show {
  display: flex;
}

.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

/* Contenedor principal del modal */
.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);

  /* Ajuste dinámico */
  height: auto;
  /* crece según el contenido */
  max-height: 90vh;
  /* nunca más alto que la pantalla */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* scroll solo si se excede */
  -webkit-overflow-scrolling: touch;
}

/* Botón cerrar */
.modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  opacity: .85;
}

.modal-close:hover {
  opacity: 1;
}

/* Cuerpo del modal */
.modal-body {
  display: flex;
  gap: 18px;
  padding: 20px;
  font-size: 15.5px;
}

/* Columnas */
.modal-left {
  flex: 1 1 58%;
}

.modal-right {
  flex: 1 1 42%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Imagen adaptada */
.modal-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: transparent;
  object-fit: contain;
}

/* Títulos/textos */
.modal-right .modal-title {
  font-size: 20px;
  font-weight: 700;
  margin: 2px 0;
}

.modal-right .modal-etiqueta {
  color: #666;
}

/* Grid compacto */
.props-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 6px;
}

.prop-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  line-height: 1.2;
}

.prop-item i {
  font-size: 16px;
  color: #9b7553;
}

.prop-item .k {
  font-weight: 600;
  color: #222;
}

.prop-item .v {
  margin-left: 6px;
  font-weight: 700;
  color: #111;
}

/* Botón */
.btn-outline {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #9b7553;
  color: #9b7553;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

.btn-outline:hover {
  background: #f7efe9;
}

/* Responsive */
@media (max-width: 720px) {
  .modal-body {
    flex-direction: column;
  }

  .modal-left {
    order: 1;
    max-height: 60vh;
  }

  .modal-right {
    order: 2;
  }

  .props-grid {
    grid-template-columns: 1fr;
  }

  .modal-dialog {
    max-height: 88vh;
  }
}

/* Solo en la página de detalle */
body.detalle-page .cards-inmuebles-container {
  justify-content: flex-start;
}

/* HERO sección */
.hero-desarrollo {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.hero-desarrollo .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
  z-index: 1;
}

.hero-desarrollo .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
}

.hero-desarrollo .hero-info {
  max-width: 70%;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.hero-sub {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f1f1f1;
}

/* Botones */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-ghost,
.btn-primary {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s ease;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25);
}

.btn-primary {
  background: #9b7553;
  color: #fff;
}

.btn-primary:hover {
  background: #7a5c40;
}

/* Contenedor general consistente con el resto */
.container {
  max-width: 1100px;
  margin: 0 auto;
}


/*================= autocompletador estilo mejor que google ===========*/
/* ====== Autocomplete (Google Places) — Estilos personalizados ====== */
.pac-container.pac-custom {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  overflow: hidden;
  padding: 6px 0;
  backdrop-filter: blur(6px);
  z-index: 9999;
  font-family: inherit;
}

.pac-container.pac-custom:empty {
  display: none;
}

.pac-container.pac-custom .pac-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
}

.pac-container.pac-custom .pac-item:hover {
  background: rgba(143, 132, 110, 0.06);
  /* tono acorde a tu paleta */
}

.pac-container.pac-custom .pac-item .pac-item-query {
  font-weight: 600;
  color: #2b2b2b;
}

.pac-container.pac-custom .pac-matched {
  color: #8f846e;
  /* acento */
}

.pac-container.pac-custom .pac-item span {
  color: #6b6b6b;
  /* subtítulo (ciudad/país) */
}

/* Oculta icono gris por defecto y logo “powered by Google” si quieres más limpio */
.pac-container.pac-custom .pac-icon {
  display: none;
}

.pac-container.pac-custom .pac-logo::after {
  display: none !important;
}

/* Bordes entre items */
.pac-container.pac-custom .pac-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

/* Asegura ancho mínimo y que no “salte” */
.pac-container.pac-custom {
  min-width: 280px;
}

/* Ajusta el "Powered by Google" para que no estorbe visualmente */
.pac-container.pac-custom .pac-logo:after {
  transform: scale(0.8);
  /* más pequeño */
  opacity: 0.6;
  /* menos intenso */
  margin-top: 6px;
  margin-right: 8px;
}


/*=================chips añadidas locaciones================*/
/* === Chips de ubicaciones === */
#chips-ubicaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  /* ⬅️ quitamos espacio extra */
  align-items: center;
  /* ⬅️ centrado vertical */
  transform: translateY(-.5px);
  /* ⬅️ súbelos un poquito (ajusta -2 a -4 según necesites) */
}

#chips-ubicaciones .chip {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
}

#chips-ubicaciones .chip:hover {
  background: #f5f5f5;
  border-color: #999;
}

#chips-ubicaciones .chip i {
  color: #9b7553;
  /* marcador en tono dorado/marrón */
}

#chips-ubicaciones .chip button.chip-x {
  background: none;
  border: none;
  font-size: 14px;
  color: #777;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: color 0.2s;
}

#chips-ubicaciones .chip button.chip-x:hover {
  color: #c00;
}


/* ================chips para inmuebles  de locacion =============*/
.search-section-locs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-section-locs input[type="text"] {
  flex: 1 1 auto;
  min-width: 220px;
}

/* Chips */
#chips-ubicaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  transform: translateY(-2px);
  /* súbelos ligerito */
}

#chips-ubicaciones .chip {
  background: #fff;
  color: #333;
  border: 1px solid #d8d8d8;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
}

#chips-ubicaciones .chip:hover {
  background: #f7f7f7;
  border-color: #bdbdbd;
}

#chips-ubicaciones .chip i {
  color: #9b7553;
}

#chips-ubicaciones .chip button.chip-x {
  background: none;
  border: none;
  font-size: 14px;
  color: #777;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  line-height: 1;
}

#chips-ubicaciones .chip button.chip-x:hover {
  color: #c00;
}

/* === Plano: pines y cono (viewer) === */
#plano-stage {
  position: relative;
}

#plano-stage .map-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px
}

#plano-stage .pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #9b7553;
  color: #fff;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: .8rem;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  cursor: pointer;
}

#plano-stage .pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #9b7553;
}

#plano-stage .pin.selected {
  outline: 2px dashed #00000055
}

/* Colores reutilizables */
:root {
  --fov: #34d399;
  /* verde del cono */
  --fov-dark: #279f75;
  /* verde un poco más oscuro (flecha) */
}

/* Cono (por defecto “hacia abajo”; la rotación real viene de --ang) */
#plano-stage .pin .cone {
  position: absolute;
  left: 50%;
  top: 100%;
  /* ⤴️ Compensación: +90° para mantener la orientación original del cono */
  transform: translate(-50%, 6px) rotate(calc(var(--ang, 0deg) + 90deg));
  transform-origin: 50% 0%;
  /* vértice = punta del pin */

  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 28px solid var(--fov);

  pointer-events: none;
  opacity: .9;
  z-index: 0;
  /* por debajo del globo “Pin” */
  filter: drop-shadow(0 0 0.3px rgba(0, 0, 0, .15));
}

/* ▸ Flecha vertical dentro del cono (palito + cabeza) */
/* (hereda la rotación del padre, NO añadir rotate aquí) */
#plano-stage .pin .cone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  /* dentro del cono, cerca del vértice */
  transform: translate(-50%, 0);
  width: 2px;
  /* grosor del palito */
  height: 8px;
  /* altura del palito (ajusta aquí para hacerlo más bajo/alto) */
  background: var(--fov-dark);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  /* por ENCIMA del cono */
}

#plano-stage .pin .cone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  /* justo después del palito */
  transform: translate(-50%, 0) rotate(180deg);
  /* ← gira 180° */
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  /* ancho de la cabeza */
  border-right: 6px solid transparent;
  /* ancho de la cabeza */
  border-bottom: 9px solid var(--fov-dark);
  /* altura de la cabeza (apunta hacia abajo) */
  pointer-events: none;
  z-index: 2;
  /* por ENCIMA del cono */
}

/* Vista derecha (preview) */
.plano-preview img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

.plano-preview-empty {
  color: #6b7280;
  font-size: .9rem;
}


/*==============================
================================
========== mapa inmuebles=======
===============================*/

/* ===== Barra de filtros: izquierda (3 pills) / derecha (resto) ===== */
.filters-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.filters-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  align-items: center;
}

/* Grupos */
.filters-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Pills “botón” para los 3 controles principales */
.control-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e6e3df;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.control-pill .chevron {
  margin-left: 4px;
  font-size: 12px;
  color: #9b7553;
}

.control-pill i {
  color: #9b7553;
}

/* Select con apariencia de botón (sin romper IDs) */
.pill-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  outline: none;
  padding-right: 18px;
  font: inherit;
  color: #333;
  cursor: pointer;
}

/* Buscador */
.pill-search {
  flex: 1;
  min-width: 260px;
}

.pill-search #chips-ubicaciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pill-search input[type="text"] {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  font: inherit;
  color: #333;
  background: transparent;
  padding-right: 8px;
}

.pill-icon-btn {
  border: none;
  background: #f3f0ec;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pill-icon-btn i {
  color: #24364d;
}

/* Responsive filtros */
@media (max-width: 1024px) {
  .filters-inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filters-right {
    justify-content: flex-start;
  }
}

/* ============================
   MAPA_INMUEBLES – panel derecho (2 columnas, 3 filas máx)
   ============================ */

/* Contenedor de cards dentro del panel derecho */
body.mapa-inmuebles .list-col .cards-inmuebles-container {
  margin-top: 0;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  /* ✅ 2 columnas */
  gap: 16px;
  justify-content: stretch;
  padding: 14px 0;

  /* ✅ 3 filas visibles (altura card + gaps entre filas) */
  max-height: calc((300px * 3) + (16px * 2));
  overflow-y: auto;
}

/* Card adaptada al ancho de su columna en el panel */
body.mapa-inmuebles .list-col .card-inmueble {
  flex: initial;
  max-width: 100%;
  width: 100%;
  height: 300px;
  /* tu altura deseada */
  border-radius: 40px;
  /* tu radio deseado */
}

/* Scroll estilizado dentro del panel */
body.mapa-inmuebles .list-col .cards-inmuebles-container::-webkit-scrollbar {
  width: 8px;
}

body.mapa-inmuebles .list-col .cards-inmuebles-container::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

body.mapa-inmuebles .list-col .cards-inmuebles-container::-webkit-scrollbar-track {
  background: transparent;
}



/*================================
===================================
==========etiquetas detalles==*/

/* Pins dentro del visor de planos */
#plano-stage {
  position: relative;
}

#plano-stage .map-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Estilo del pin (simple y visible) */
#plano-stage .pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #9b7553;
  color: #fff;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: .8rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  z-index: 3;
}

#plano-stage .pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #9b7553;
}

#plano-stage .pin.selected {
  outline: 2px dashed rgba(0, 0, 0, .35);
}

#plano-stage .pin.link {
  background: #0f766e;
}

#plano-stage .pin.link::after {
  border-top-color: #0f766e;
}

/* Cono de visión (usa --ang; ya lo pones desde JS) */
#plano-stage .pin .cone {
  position: absolute;
  left: 50%;
  top: 100%;
  transform-origin: 50% 0%;
  transform: translate(-50%, 6px) rotate(calc(var(--ang, 0deg) + 90deg));
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 28px solid rgba(16, 185, 129, .55);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 0.3px rgba(0, 0, 0, .15));
}

/* Vista previa derecha con etiqueta */
.plano-preview .preview-fig {
  position: relative;
  margin: 0;
}

.plano-preview .preview-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Badges sobre la imagen */
.plano-preview .preview-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(17, 17, 17, .80);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  z-index: 2;
}

/* Caption debajo */
.plano-preview .preview-caption {
  margin-top: 8px;
  font-size: .9rem;
  color: #444;
}

/* Centrar imagen de encabezado en sección Destacadas */
.texto-imagen--center {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}


/*agente =============
*/
/* Faja blanca al fondo del chat (ajusta height si hace falta) */
#flowise-chat::after {
  content: "";
  position: fixed;
  right: 20px;
  /* mismo right del chat */
  bottom: 24px;
  /* justo encima del borde inferior del chat */
  width: 360px;
  /* aprox. ancho del panel; ajusta si cambias tamaño */
  height: 22px;
  /* altura que tapa el "Powered by" */
  background: #fff;
  border-radius: 0 0 12px 12px;
  pointer-events: none;
  z-index: 100000;
}

@media (max-width: 420px) {
  #flowise-chat::after {
    width: calc(100vw - 40px);
  }

  /* móvil */
}

/*ASIDE DE DETALLE PARA AGENDAR VISITAS*/

.tabs-container {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-btn {
  flex: 1;
  padding: 12px;
  background: #f9f9f9;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}

.tab-btn.active {
  background: #132c49;
  color: #fff;
}

.tab-content {
  display: none;
  padding: 15px;
}

.tab-content.active {
  display: block;
}

/* ==== Reajuste visual del bloque de horarios ==== */
.resultados-horarios {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
  max-height: 220px;
  /* altura máxima */
  overflow-y: auto;
  /* scroll vertical si hay demasiados */
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  scroll-behavior: smooth;
}

/* Estilo de cada horario */
.horario {
  background: #f2f6fb;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.25s ease;
}

.horario:hover {
  background: #132c49;
  color: #fff;
  transform: scale(1.05);
}

.horario.ocupado {
  background: #ccc;
  pointer-events: none;
}

/* Scrollbar minimalista */
.resultados-horarios::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.resultados-horarios::-webkit-scrollbar-thumb {
  background: #132c49;
  border-radius: 6px;
}


/*========================================
=========================================
=====panel de usuarios=================*/
/*anera*/
/* =========================================================
   PANEL ANERA · HOME
   ========================================================= */
.anera-home-panel {
  width: 100%;
  padding: 32px 16px 40px;
  background: radial-gradient(circle at top left, #f8f3ee 0, #f5efe8 28%, #f3eee8 60%, #f0ebe5 100%);
}

.anera-home-panel-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.anera-home-panel-text h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 10px 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.anera-home-panel-text p {
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 540px;
  color: #444;
  margin-bottom: 20px;
}

/* Pill "Nuevo desarrollo" */
.anera-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(155, 117, 83, 0.08);
  color: #8b6a47;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Botones */
.anera-home-panel-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.anera-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.anera-btn-primary {
  background: #9b7553;
  color: #fff;
  border-color: #9b7553;
}

.anera-btn-primary:hover {
  background: #825f41;
  border-color: #825f41;
  transform: translateY(-1px);
}

.anera-btn-secondary {
  background: transparent;
  color: #9b7553;
  border-color: rgba(155, 117, 83, 0.4);
}

.anera-btn-secondary:hover {
  background: rgba(155, 117, 83, 0.06);
  border-color: #9b7553;
  transform: translateY(-1px);
}

/* Imagen */
.anera-home-panel-image {
  position: relative;
}

.anera-home-panel-image img {
  width: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

/* Glow suave detrás de la imagen */
.anera-home-panel-image::before {
  content: "";
  position: absolute;
  inset: auto 12% -14% 12%;
  height: 40%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.25), transparent 60%);
  filter: blur(12px);
  z-index: -1;
}

/* Responsive */
@media (max-width: 900px) {
  .anera-home-panel-inner {
    grid-template-columns: 1fr;
  }

  .anera-home-panel {
    padding: 24px 16px 32px;
  }

  .anera-home-panel-text h2 {
    font-size: 1.6rem;
  }

  .anera-home-panel-image {
    order: -1;
    /* Imagen arriba en móvil (cámbialo si la quieres abajo) */
  }
}





/*=====================================================================
adiciones para despues quitar de DETALLES
======================================================================*/
/* =========================================
   DETALLE: PORTADA SOLO MÓVIL (Carrusel)
   - PC/Tablet mantiene el grid original
   ========================================= */

/* Por default: el carrusel NO se ve */
.portada-swiper {
  display: none;
}

/* SOLO CELULAR */
@media (max-width: 640px) {

  /* Oculta el grid bonito de PC */
  .portada-container {
    display: none !important;
  }

  /* Muestra el carrusel (FULL WIDTH + padding, NO centrado con auto) */
  .portada-swiper {
    display: block !important;

    width: 100%;
    max-width: 100%;

    /* en vez de margin:auto que centra y “cambia el peso visual” */
    margin: 90px 0 0 0;

    /* espacio lateral controlado */
    padding: 0 16px;
    box-sizing: border-box;
  }

  .portada-swiper__swiper {
    border-radius: 14px;
    overflow: hidden;
  }

  .portada-swiper .swiper-slide {
    height: 320px;
  }

  .portada-swiper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* bullets */
  .portada-swiper .swiper-pagination-bullet {
    opacity: 0.5;
  }

  .portada-swiper .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/* =========================================
   DETALLE - BOTONES PORTADA (2 ARRIBA + 1 ABAJO)
   SOLO MÓVIL
   ========================================= */
@media (max-width: 640px) {

  .ver-galeria-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    /* MISMA LÓGICA: full width + padding, NO 90% + auto */
    width: 100%;
    margin: 16px 0 10px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* botones base */
  .ver-galeria-wrapper button,
  .ver-galeria-wrapper a {
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    border-radius: 999px;
    text-align: center;
    box-sizing: border-box;
  }

  /* el tercero ocupa toda la fila */
  .ver-galeria-wrapper button:nth-child(3),
  .ver-galeria-wrapper a:nth-child(3) {
    grid-column: 1 / -1;
  }
}

.ver-galeria-wrapper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ver-galeria-wrapper button i {
  font-size: 0.95em;
  line-height: 1;
}

.ver-galeria-wrapper button span {
  line-height: 1;
}

/* Centrar SOLO el botón de plano */
.ver-galeria-wrapper #btn-ver-plano {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   DETALLE - TÍTULO Y CHIPS
   AJUSTES SOLO CELULAR
   ========================================= */
@media (max-width: 640px) {

  /* 🔹 Título del inmueble */
  .detalle-inmueble h1,
  .detalle-inmueble #titulo {
    font-size: 1.6rem;
    /* antes estaba muy grande */
    line-height: 1.2;
    text-align: center;
    margin-bottom: 8px;
  }

  /* 🔹 Contenedor de chips */
  .detalle-inmueble .leyenda-operacion,
  .detalle-inmueble .chips-container {
    display: flex;
    flex-wrap: nowrap;
    /* una sola fila */
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }

  /* 🔹 Chips individuales */
  .detalle-inmueble .leyenda-operacion span,
  .detalle-inmueble .chip,
  .detalle-inmueble .badge,
  .detalle-inmueble .estado {
    font-size: 0.65rem;
    /* más pequeños */
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    /* no se rompen */
  }

}

@media (max-width: 1024px) {

  /* Ocultar chip de ubicación (ej. Guerrero) en móvil */
  .detalle-inmueble .chip-ubicacion,
  .detalle-inmueble .badge-ubicacion,
  .detalle-inmueble .estado {
    display: none !important;
  }

}

/* =========================================
   DETALLE - COMPACTAR ESPACIADO VERTICAL
   SOLO CELULAR
   ========================================= */
@media (max-width: 1024px) {

  /* Chips (Departamento / En venta) */
  .detalle-inmueble .leyenda-operacion {
    margin-bottom: 6px;
  }

  /* Precio */
  .detalle-inmueble .precio {
    margin-top: 6px;
    margin-bottom: 8px;
  }

  /* Botón de estado (Disponible) */
  .detalle-inmueble .leyenda-status,
  .detalle-inmueble .estado {
    margin-top: 6px;
    margin-bottom: 10px;
  }

  /* Iconos (Hab / Baños / Piso) */
  .iconos {
    margin-top: 6px;
    gap: 10px;
  }

}

/* =========================================
   DETALLE - ICONOS (HAB / BAÑOS / PISO)
   UNA SOLA FILA
   CELULAR + TABLET
   ========================================= */
@media (max-width: 1024px) {

  .iconos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    /* un poco más aire en tablet */
    margin-top: 6px;
  }

  .iconos .icono {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .iconos .icono i {
    font-size: 0.9rem;
  }

}

/* =========================================
   DETALLE - ESPACIADO BOTÓN PLANO
   TABLET + DESKTOP
   ========================================= */
@media (min-width: 641px) {

  /* separa el botón de plano cuando existe */
  .ver-galeria-wrapper #btn-ver-plano {
    margin-left: 10px;
  }

}

/* =========================================
   DETALLE - DESCRIPCIÓN COLAPSABLE
   SOLO TABLET + MÓVIL
   ========================================= */
@media (max-width: 1024px) {

  /* El contenedor del texto (tu #descripcion) */
  #descripcion.desc-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    /* ✅ ajusta: 5-8 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
  }

  /* Degradado suave al final cuando está colapsado */
  #descripcion.desc-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  }

  /* El link Ver más / Ver menos */
  .desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    opacity: 0.85;
  }

  .desc-toggle:hover {
    opacity: 1;
  }

  .desc-toggle i {
    font-size: 0.9em;
    line-height: 1;
  }
}

/* =========================================
   DETALLE - CARACTERÍSTICAS (2x2 en móvil)
   ========================================= */
@media (max-width: 640px) {

  .caracteristicas-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* ✅ 2 por fila */
    gap: 10px;
    padding: 0 14px;
    margin-top: 10px;
  }

  .item-caracteristica {
    padding: 12px 10px;
    /* ✅ más compacta */
    border-radius: 14px;
    min-height: 86px;
    /* evita que se vean muy altas */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .item-caracteristica i {
    font-size: 18px;
    /* ✅ icono más pequeño */
    margin-bottom: 6px;
  }

  .item-caracteristica h4 {
    font-size: 0.78rem;
    /* ✅ título más chico */
    margin: 0 0 4px 0;
    line-height: 1.1;
  }

  .item-caracteristica span {
    font-size: 0.86rem;
    /* ✅ valor más chico */
    line-height: 1.1;
  }
}

/* =========================================
   DETALLE - AJUSTE ESPACIO
   CARACTERÍSTICAS → AMENIDADES
   SOLO CELULAR
   ========================================= */
@media (max-width: 640px) {

  /* Grid de características (última card hacia abajo) */
  .caracteristicas-grid,
  .grid-caracteristicas {
    margin-bottom: 12px;
    /* antes era muy grande */
  }

  /* Título "Amenidades" */
  .descripcion h2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  /* Contenedor de amenidades */
  .seccion-amenidades {
    margin-top: 0;
    padding-top: 0;
  }
}

/* =========================================
   DETALLE - AMENIDADES
   2 COLUMNAS EN CELULAR
   ========================================= */
@media (max-width: 640px) {

  .contenedor-amenidades,
  .amenidades-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* ✅ 2 por fila */
    gap: 10px 12px;
  }

  .amenidad,
  .item-amenidad {
    font-size: 0.8rem;
    /* un poco más compacto */
    line-height: 1.2;
  }
}

/* =========================================
   RECOMENDACIONES
   MÓVIL = LISTA VERTICAL (NO CARRUSEL)
   ========================================= */
@media (max-width: 640px) {

  /* quita layout swiper */
  #reco-swiper .swiper-wrapper {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
  }

  #reco-swiper .swiper-slide {
    width: 100% !important;
    height: auto !important;
  }

  /* oculta controles del carrusel */
  #reco-swiper .swiper-pagination,
  #reco-swiper .swiper-button-next,
  #reco-swiper .swiper-button-prev {
    display: none !important;
  }
}

/* =========================================
   RECOMENDACIONES – FIX CORTE IZQUIERDO (SOLO MÓVIL)
   ========================================= */
@media (max-width: 640px) {

  /* El contenedor visible del carrusel/lista */
  .recomendaciones-inmuebles {
    overflow: visible;
    /* evita que muerda sombras/bordes */
  }

  /* Swiper container (si existe) */
  #reco-swiper,
  .recomendaciones-inmuebles .swiper {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Track */
  .recomendaciones-inmuebles .swiper-wrapper {
    align-items: stretch;
  }

  /* Cada slide/card no debe pegarse al borde */
  .recomendaciones-inmuebles .swiper-slide {
    width: auto;
    /* respeta el slidesPerView */
  }

  /* Por si tu card tiene sombra y se recorta */
  .reco-card {
    overflow: hidden;
    /* mantiene bordes redondeados */
  }
}