.meta .precio-propiedad {
    font-weight: bold;
    color: var(--oro) !important;
    font-size: 1.8rem;
}
.iconos-propiedad {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: center;
}

.icono-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.5rem;
    color: var(--negro);
    font-weight: 600;
}

.icono-item i {
    font-size: 1.8rem;
    color: var(--primario-oscuro, #d4a056);
}
.iconos-propiedad i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* necesario para los SOLID icons */
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===============================
   SECCIÓN PREMIUM — VERSIÓN GRANDE
   =============================== */

.propiedad-features-premium {
  margin: 5rem 0;
  padding: 2rem 0;
  background-color: #f4f5f7;
  border-top: 1px solid #e1e4e8;
  border-bottom: 1px solid #e1e4e8;
}

.features-premium-grid-header h2 {
  font-size: 2.4rem;          
  font-weight: 700;
  margin-bottom: 3rem;
  color: #222;
  text-align: center;
  letter-spacing: -0.5px;
}

.features-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* MÁS ANCHO */
  gap: 2.5rem;
}

.feature-premium-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;             /* TARJETAS MÁS GRANDES */
  background: #fff;
  border-radius: 18px;         /* MAYOR REDONDEO */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: all .3s ease;
}

.feature-premium-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ICONOS GRANDES */
.icon-wrapper {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blanco);
  border-radius: 50%;
  margin-right: 1.4rem;
}

.icon-wrapper i {
  font-size: 2rem;         /* ICONO MÁS GRANDE */
  color: var(--oro)
}

/* TEXTO */
.text-wrapper {
  display: flex;
  flex-direction: column;
}

.feature-label {
  font-size: 1.4rem;        /* LABEL MÁS GRANDE */
  color: #666;
  font-weight: 500;
}

.feature-value {
  font-size: 1.5rem;        /* VALOR MUCHO MÁS GRANDE */
  font-weight: 400;
  color: var(--negro);
  margin-top: 0.2rem;
  letter-spacing: -1px;
}

/* Reduce espacio entre hero y detalles de propiedad */
.single-propiedades .layout-blog {
    margin-top: 1rem !important;
    padding-top: 0 !important;
}

/* Asegurar que la sección premium no agregue espacio extra */
.single-propiedades .propiedad-features-premium {
    margin-top: 1rem !important;
    padding-top: 0;
}

/* Opcional: Si el hero tiene margen inferior */
.hero-integrado {
    margin-bottom: 1rem !important;
}

/* Ensanchar contenedor SOLO en las páginas de propiedades */
.propiedad-features-premium.contenedor {
    max-width: 1350px !important;
    width: 95%;
    padding-left: 2rem;
    padding-right: 2rem;
}
/* ================================
   AJUSTE REAL DEL CONTENEDOR MOVIL
   ================================ */
@media (max-width: 768px) {
  .single-propiedades .contenedor {
      width: 92% !important;    /* Más angosto = mejor estética */
      max-width: 92% !important;
      padding-left: 0;
      padding-right: 0;
  }
}

/* ================================
   GRID 2 COLUMNAS EN MOVIL
   ================================ */
@media (max-width: 768px) {
  .features-premium-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 1.2rem !important;
  }
  

  .feature-premium-item {
      padding: 1.3rem !important;
      border-radius: 14px;
      flex-direction: column;
      text-align: center;
      justify-content: center;
  }

  .icon-wrapper {
      margin: 0 0 0.6rem 0;
      width: 55px;
      height: 55px;
  }

  .icon-wrapper i {
      font-size: 1.5rem;
  }

  .text-wrapper {
      align-items: center;
  }

  .feature-label {
      font-size: 0.95rem;
  }

  .feature-value {
      font-size: 1.3rem;
      margin-top: 0.2rem;
  }
}

/* ================================
   PARA TELÉFONOS MUY PEQUEÑOS (iPhone SE)
   ================================ */
@media (max-width: 420px) {
  .features-premium-grid {
      grid-template-columns: 1fr 1fr; /* Sigue siendo 2 columnas */
  }
}
/* Móvil: centrar y ajustar ancho solo en esta sección */
@media (max-width: 768px) {
  .propiedad-features-premium.contenedor {
      width: 92% !important;
      max-width: 92% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
}

.card-descripcion-form {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.card-premium {
  width: 100%;
  max-width: 1900px  !important; 
  background: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
}

/* Ensanchar SOLO el layout de propiedades */
.single-propiedades .layout-blog {
    max-width: 1320px !important;
    width: 95% !important;
    margin: 0 auto;
}

/* Y hacer la columna derecha más ancha */
.single-propiedades .layout-blog {
    grid-template-columns: 1.9fr 1.1fr !important;
}


/* Imagen de contacto centrada */
/* Sin márgenes grandes porque ahora va al lado del nombre */
.contact-image-wrapper {
  margin: 0; 
  text-align: left;
}

.contact-image-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 14px; /* opcional, como la demo */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Contenedor flex para imagen + nombre */
.contact-info-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* espacio entre imagen y nombre */
    margin-bottom: 2rem;
}

/* Imagen */
.contact-image-wrapper img {
    width: 80px; /* tamaño como en la demo */
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Nombre del contacto */
.contact-name-wrapper {
    font-size: 1.6rem;
    font-weight: 500;
    color: #7A00AA; /* color secundario */
}

/* === ESTILO HOUZEZ PARA CONTACTO === */

/* Contenedor general de imagen + nombre */
.contact-info-wrapper {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 1.2rem 0 2rem; /* Espaciado idéntico a Houzez */
}

/* Imagen del agente (Houzez usa size ~ 90px) */
.contact-image-wrapper img {
    width: 90px;
    height: 90px;
    border-radius: 8px;       /* no redonda, bordes suaves */
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    display: block;
}

/* Nombre del agente */
.contact-name-wrapper .nombre-contacto {
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    color: #0A1435; /* color de tipografía houzez */
}

/* Ajustar título “Contacto” para que quede cerca */
.titulo-formulario {
    margin-bottom: 1.4rem !important; /* Houzez es muy compacto */
}

/* ----------------------------
   Compactar espacio: Contacto
   ---------------------------- */

/* Reduce margen entre título H2 y bloque imagen+nombre */
.card-premium .features-premium-grid-header {
  margin-bottom: 0.6rem !important;
  padding-bottom: 0 !important;
}

/* Ajusta el bloque imagen+nombre (más compacto) */
.card-premium .contact-info-wrapper {
  margin: 0.4rem 0 0.6rem 0 !important; /* top / bottom */
}

/* Quitar márgenes del título interno "Formulario de Contacto" (h3) */
.card-premium .contact-form-wrapper .titulo-formulario {
  margin: 0 0 0.6rem 0 !important; /* solo un pequeño gap abajo */
  padding: 0 !important;
  font-size: 1.25rem;               /* tamaño más apropiado para un subtítulo */
  line-height: 1.2;
}

/* Forzar que el contenedor wpcf7 no añada espacio extra */
.card-premium .contact-form-wrapper .wpcf7,
.card-premium .contact-form-wrapper .wpcf7-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Campos del form: quitar margen superior y dejar pequeño gap entre campos */
.card-premium .contact-form-wrapper .wpcf7-form p {
  margin: 0 0 0.9rem 0 !important;   /* solo margin-bottom para separar campos */
  padding: 0 !important;
}

/* Botón: quitar margen superior extra si existiera */
.card-premium .contact-form-wrapper .wpcf7-form p:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Si algún estilo global pone padding/margin al primer hijo del card */
.card-premium > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Asegurar que la imagen no añade margen extra */
.card-premium .contact-image-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ajuste final: si queda algún salto, lo forzamos pequeño */
.card-premium .contact-info-wrapper + .contact-form-wrapper {
  margin-top: 0.2rem !important;
}

/*Fijar card de contacto*/
.card-premium {
    position: sticky;
    top: 90px;  /* distancia desde el top cuando se “pega” */
    z-index: 50; 
}

/* Borde de ubicación */
.contacto-wrapper-premium {
    background: transparent;
    padding: 0;
    border-left: 3px solid var(--oro); /* o tu color secundario */
    margin: 1rem 0;
}

/* 3 columnas en escritorio */

@media (min-width: 992px) {
  .features-premium-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Slider */

.hero-slider {
    width: 100%;
    height: 65vh;
    position: relative;
    overflow: hidden;
}

.hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botones más grandes */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.5) !important;

    /* aumenta el área clickable */
    width: 60px !important;
    height: 60px !important;
}

/* esto SÍ agranda el icono */
.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
    font-size: 25px !important; 
}

/* Quitar fondo blanco del bloque donde está el título */
.hero-integrado {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Título limpio, sin card */
.hero-integrado .entrada-titulo-propiedades {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 0rem 0; /* separarlo un poco del slider */
    box-shadow: none !important;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--secundario);

}

.card-categoria-sola {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 1rem;
    position: relative;
}

.card-categoria-sola .post-categories {
    position: absolute;
    top: 1rem;
    left: 0;
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.card-categoria-sola .post-categories li {
    background-color: var(--negro);
    padding: .5rem 1rem;
    border-radius: .5rem;
}

.card-categoria-sola .post-categories a {
    color: var(--primario);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estado-propiedad {
  display: inline-block;
  background: var(--negro);
  color: #fff;
  padding: 6px 14px;
  font-size: 1.4rem;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Subtitulos */
.titulo-subinfo { display:flex; gap:1.5rem; align-items:center; color:#555; }
.titulo-subinfo .ubicacion a { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:.5rem; }
.titulo-subinfo .ubicacion i { color:#e74c3c; font-size:1.05rem; }
.titulo-subinfo .price { font-weight:700; color: var(--oro); }

/* SOLO agrega espacio entre el bloque del título y el slider */
.hero-integrado + .hero-integrado {
    margin-top: 15px !important;
}


/* Botón/Enlace */
.map-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;             /* espacio entre icono y texto */
    color: var(--oro);
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease, transform 0.5s ease, box-shadow 0.5s ease;
    position: relative;
    padding: 0.4rem 0.8rem;
}

/* Hover opcional */
.map-link-btn:hover {
    color: #fff;
    background: var(--oro);
    border-radius: 6px;
    transform: translateY(-3px) scale(1.05); /* efecto flotante */
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.4);
}

/* Animación de movimiento suave (flotando) */
@keyframes flotante {
    0% { transform: translateY(0) }
    50% { transform: translateY(-4px) }
    100% { transform: translateY(0) }
}

/* Aplicar animación al enlace */
.map-link-btn {
    animation: flotante 2.5s ease-in-out infinite;
}

/* Opcional: icono con ligero “brillo” en hover */
.map-link-btn i {
    transition: transform 0.5s ease, color 0.5s ease;
}

.map-link-btn:hover i {
    transform: rotate(20deg) scale(1.2);
    color: #fff;
}
@keyframes pulso {
    0%, 100% { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 12px rgba(255,215,0,0.4); }
    50% { transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 18px rgba(255,215,0,0.5); }
}

.map-link-btn {
    animation: flotante 2.5s ease-in-out infinite, pulso 4s ease-in-out infinite;
}

/* Carrusel -Imagenes miniaturas */

.slider-principal {
  position: relative;
  width: 100%;
  height: 65vh;
  margin-bottom: 15px;
  overflow: hidden;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

.slider-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: opacity 0.6s ease;
}

.slider-principal button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  background: rgba(0,0,0,0.3);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 6px;
  user-select: none;
}

.slider-principal .prev { left: 10px; }
.slider-principal .next { right: 10px; }

.miniaturas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.miniatura {
  flex: 0 0 auto;
  width: 100px;
  height: 70px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  opacity: 0.6;
  transition: all 0.3s;
}

.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura:hover,
.miniatura.miniatura-activa {
  opacity: 1;
  border: 2px solid #007bff;
}

.miniatura.mas-restantes {
  flex: 0 0 auto;
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
  color: #333;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 6px;
}

/* Reducir solo la altura de las miniaturas */
.hero-thumbs .swiper-slide {
    height: 85px !important; /* Ajusta a tu gusto: 60, 65, 70px... */
    opacity: 0.6;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

/* Mantener bien ajustada la imagen */
.hero-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #f4be0f;
}

/* ==================================================
   INPUTS / SELECT / BUTTON – BASE UNIFICADA (AJUSTADO)
================================================== */
.propiedades-filtros-horizontal input,
.propiedades-filtros-horizontal select,
.propiedades-filtros-horizontal button {
  height: 38px;                 /* ↓ un poco */
  padding: .55rem .7rem;        /* ↓ un poco */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13.5px;            /* ↓ leve */
  box-sizing: border-box;
  background-color: #fff;
  font-weight: 500;
  color: #333;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================================================
   SELECT – RESET + FLECHA PERSONALIZADA
================================================== */
.propiedades-filtros-horizontal select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 14px;

  padding-right: 2rem;
  cursor: pointer;

  min-width: 105px;
  max-width: 150px;
  flex: 1 1 auto;
}

/* Placeholder visual */
.propiedades-filtros-horizontal select option[value=""] {
  color: #999;
}

/* ==================================================
   INPUTS ESPECÍFICOS (AJUSTADOS PARA SUBIR TODO)
================================================== */
/* Habitaciones – más ancho para que no se corte */
.propiedades-filtros-horizontal input[name="habitaciones_ui"] {
  max-width: 115px; /* antes ~110px */
}
.propiedades-filtros-horizontal input[name="banos_ui" ] {
    max-width: 80px; /* antes ~110px */
}
.propiedades-filtros-horizontal input[name="parqueadero_ui"] {
  max-width: 115px;
}

.propiedades-filtros-horizontal input[name="precio_rango_ui"] {
  max-width: 145px;
}

.propiedades-filtros-horizontal input[name="codigo_ui"] {
  max-width: 80px; /* 🔑 ESTE ERA EL QUE BAJABA */
}

/* ==================================================
   BOTÓN
================================================== */
.propiedades-filtros-horizontal button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* BOTÓN FILTRAR – COLOR PRINCIPAL */
.propiedades-filtros-horizontal button[type="submit"] {
  background-color: var(--negro);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, transform .15s ease;
  display: none;
}


/* ==================================================
   CONTENEDOR – ESPACIADO CONTROLADO
================================================== */
.propiedades-filtros-horizontal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;   /* ↓ clave para que no baje */
}

/* ==================================================
   FOCUS UNIFICADO
================================================== */
.propiedades-filtros-horizontal input:focus,
.propiedades-filtros-horizontal select:focus {
  outline: none;
  border-color: #0073e6;
  box-shadow: 0 0 0 2px rgba(0,115,230,.15);
}

/* ==================================================
   PLACEHOLDER – TEXTO MÁS PEQUEÑO
================================================== */

/* Inputs */
.propiedades-filtros-horizontal input::placeholder {
  font-size: 12px;       /* ↓ más pequeño */
  color: #888;
}

/* Selects (opción vacía visible como placeholder) */
.propiedades-filtros-horizontal select {
  font-size: 13px;       /* texto normal */
}

.propiedades-filtros-horizontal select option[value=""] {
  font-size: 12px;       /* ↓ solo placeholder */
  color: #888;
}

/* ==================================================
   RESPONSIVE – MÓVIL (SIN AFECTAR ESCRITORIO)
================================================== */
@media (max-width: 768px) {

  /* Contenedor general */
  .propiedades-filtros-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: .6rem;
    margin-bottom: 1.2rem; /* 🔑 separa del grid */
    position: relative;
    z-index: 2;
  }

  /* Inputs y selects ocupan su columna */
  .propiedades-filtros-horizontal input,
  .propiedades-filtros-horizontal select {
    width: 100%;
    max-width: 100% !important; /* anula límites de escritorio */
  }

  /* Código NO baja solo */
  .propiedades-filtros-horizontal input[name="codigo_ui"] {
    grid-column: span 2; /* ocupa toda la fila */
  }

  /* Botón abajo y ancho completo */
  .propiedades-filtros-horizontal button {
    grid-column: span 2;
    width: 100%;
    margin-top: .4rem;
  }
}

/* =========================================
   FIX DEFINITIVO: separación real del form
========================================= */
.propiedades-filtros-horizontal {
  margin-bottom: 1.5rem;
}

/* En móvil un poco más */
@media (max-width: 768px) {
  .propiedades-filtros-horizontal {
    margin-bottom: 2.2rem;
  }
}

/* =====================================
   FIX DEFINITIVO – el grid NO invade
===================================== */
.listado-wrapper {
  position: relative;
  clear: both;
  margin-top: 1.5rem;
}

/* El bloque de filtros debe crear su propio contexto */
.propiedades-filtros-horizontal,
.filtros-activos {
  position: relative;
  z-index: 2;
}

.listado-grid {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .listado-grid {
    margin-top: 0 !important;
  }
}


/* Ocultar campo ACF precio_num */
.acf-field.acf-hidden {
    display: none !important;
}

.filtros-activos {
  margin: 1rem 0 2rem;
}

.filtros-titulo {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}

.filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filtro-chip {
  background: #eef2f7;
  color: #333;
  padding: .4rem .7rem;
  border-radius: 20px;
  font-size: 13px;
  text-decoration: none;
  transition: background .2s;
}

.filtro-chip:hover {
  background: #dce3ee;
}

.borrar-todo {
  display: inline-block;
  margin-top: .8rem;
  font-size: 13px;
  color: #0073e6;
  text-decoration: none;
}

.listado-grid {
  position: relative;
  transition: opacity 0.25s ease;
}

.listado-grid.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

/* ==================================================
   CONTEXTO DEL LISTADO
================================================== */
.listado-wrapper {
  position: relative;
}

/* ==================================================
   OVERLAY SUAVE (opcional, estilo premium)
================================================== */
.listado-wrapper.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.45);
  z-index: 5;
}

/* ==================================================
   LOADING BAR SUPERIOR (PRO)
================================================== */
.listado-wrapper.is-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 40%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: loading-bar 1.2s ease-in-out infinite;
  z-index: 6;
}

/* ==================================================
   ANIMACIÓN
================================================== */
@keyframes loading-bar {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


/* ==================================================
   CHIPS – ANIMACIÓN SUAVE (PREMIUM)
================================================== */

.filtros-activos {
  display: block;
  flex-wrap: wrap;
  gap: 8px;
}

/* Estado inicial (cuando llegan por AJAX) */
.filtros-activos .filtro-chip {
  opacity: 0;
  transform: translateY(-6px);
  animation: chipIn 0.35s ease forwards;
}

/* Hover sutil */
.filtros-activos .filtro-chip:hover {
  transform: translateY(-1px);
}

/* Keyframes entrada */
@keyframes chipIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Salida del chip */
.filtro-chip.is-removing {
  animation: chipOut 0.25s ease forwards;
  pointer-events: none;
}

@keyframes chipOut {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
  }
}

.filtro-chip {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.filtro-chip:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.filtros-activos .borrar-todo {
  opacity: 0;
  transform: translateY(-6px);
  animation: chipIn 0.35s ease forwards;
}

.filtros-activos .borrar-todo:hover {
  transform: translateY(-1px);
}

.borrar-todo.is-removing {
  animation: chipOut 0.25s ease forwards;
  pointer-events: none;
}

/* ==================================================
   TÍTULO – ANIMACIÓN SUAVE AL ACTUALIZARSE
================================================== */
.filtros-titulo {
  display: inline-block;
}

.filtros-titulo.is-animating {
  animation: tituloIn .35s ease;
}

@keyframes tituloIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos de sección de filtros en front */
/* =========================
   BUSCADOR – BASE
   ========================= */

.buscador-propiedades-home {
  margin-top: -4rem; /* Desktop */
  padding: 0 2rem;
  position: relative;
  z-index: 5;
  
}


/* =========================
   MÓVIL
   ========================= */

@media (max-width: 767px) {

  .buscador-propiedades-home {
    margin-top: 2rem; /* Quitamos el negativo */
    padding: 0 1.5rem;
  }

}


/* =========================
   TABLET (iPad Mini)
   ========================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .buscador-propiedades-home {
    margin-top: -2rem; /* Menos agresivo */
    padding: 0 3rem;
  }

}
@media (max-width: 767px) {

  .buscador-propiedades-home .contenedor {
    border-radius: 1.2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 2rem;
  }

}

/* =========================
   DESKTOP GRANDE
   ========================= */

@media (min-width: 1400px) {
  .buscador-propiedades-home {
    /* Subimos más el buscador para que sea protagonista */
    margin-top: -16rem; 
  }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  .buscador-propiedades-home {
    margin-top: -8rem;
  }
}.buscador-card {
  max-width: 1200px;
  margin: auto;
  background: #fff;
padding: 4.5rem 5.5rem; /* Más espacio arriba y abajo */
    /* Un borde sutil ayuda a que se note la separación con el fondo blanco de abajo */
    border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1.5rem;
  display: grid;
  /* Cambio: 1 columna por defecto (móvil) */
  grid-template-columns: 1fr; 
  gap: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* Tablet: 2 columnas */
@media (min-width: 600px) {
  .buscador-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 4 columnas */
@media (min-width: 1024px) {
  .buscador-card {
    grid-template-columns: repeat(4, 1fr);
  }
}
.buscador-card .campo label {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  margin-bottom: .4rem;
  display: block;
}



/* Estilo para los selects dentro del buscador */
.buscador-card select {
  width: 100%;
  padding: 1rem;
  border: 1px solid #e1e1e1;
  border-radius: 0.8rem;
  background-color: #f9f9f9;
  color: #333;
  font-size: 1.4rem;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.buscador-card select:focus {
  outline: none;
  border-color: var(--primario); /* Resalta el campo activo */
  background-color: #fff;
}
.buscador-card .boton {
  display: flex;
  align-items: flex-end;
}

.btn-buscar {
  width: 100%;
  background: var(--negro);
  color: #fff;
  padding: 1rem;
  border-radius: .7rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.btn-buscar:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.buscador-card .campo {
  display: flex;
  flex-direction: column;
}
.buscador-card select:focus {
  outline: none;
  border-color: var(--negro);
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.buscador-card select:hover {
  border-color: #bbb;
}



/* Responsive */
@media (max-width: 900px) {
  .buscador-card {
    grid-template-columns: 1fr;
  }
}