/* ==========================================================================
   Inmobiliaria Berasueta — Theme "Azul Fresco"
   Re-skin de los componentes DINÁMICOS existentes (filtros, destacados,
   precios, switches, sliders) que NO se pueden renombrar porque su
   HTML/IDs/clases están atados a JS y PHP ya funcionando
   (js/temporada.js, js/filtro*.js, js/destacado.js, auxiliares/destacado.php).

   Este archivo solo cambia color/tipografía/decoración (fondos, bordes,
   sombras, radios). NUNCA cambia layout (width/flex/position/display) —
   ese sigue viniendo de css/main.css y css/seccion.css, que se mantienen
   cargados sin modificar. Cargar ESTE archivo último para que gane la
   cascada sobre esos dos.
   ========================================================================== */

/* ---- fondo del panel de filtro (bannertemp/bannerest/banner24meses/bannerventas) ---- */
.bannertemp, .bannerest, .bannerventas, .banner24meses {
  background-image:
    linear-gradient(120deg, rgba(31,42,92,0.88), rgba(47,143,204,0.55)),
    var(--legacy-banner-img, none);
}

.filtro, #titulo_filtro, .itembusqueda, .liotros {
  font-family: var(--body, 'Inter', sans-serif);
}

/* css/filtro.css (original) trae #titulo_filtro{display:none} a secas -solo
   lo mostraba en mobile (@media max-width:799px), pensado para una nav de
   escritorio que ya no existe en el rediseño. Se muestra siempre.
   Reemplaza el banner celeste de ancho completo (.contenedor__temporada,
   ya quitado del markup) por kicker + viñeta + título + línea de degradé
   bajo el texto -mismo ancho máximo/padding que .search-card y
   .results-count, no de borde a borde. */
#titulo_filtro {
  display: block;
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 0 24px;
  text-align: left;
}
#titulo_filtro .kicker {
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue, #2F8FCC);
  font-weight: 700;
  margin-bottom: 8px;
}
#titulo_filtro h1 {
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 700;
  /* el h1 global (theme.css) trae clamp(36px,4.6vw,56px) + white-space:
     nowrap en desktop -pensado para el hero de la home-, así que acá se
     desbordaba fuera de la caja. Achicado, sin nowrap. */
  font-size: 19px;
  white-space: normal;
  line-height: 1.3;
  color: var(--navy, #1F2A5C);
  text-shadow: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* theme.css trae una regla global "h1 span{background-clip:text;
   color:transparent}" -pensada para la palabra en degradé del hero de la
   home-, que también matchea estos dos <span> (dot/text) por ser hijos de
   un h1. Sin resetear background-clip/color acá, el texto del título queda
   invisible (clip de "texto" contra un gradient-image de 2px de alto). */
#titulo_filtro .dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC));
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
#titulo_filtro .text {
  display: inline-block;
  padding-bottom: 14px;
  color: var(--navy, #1F2A5C);
  background-image: linear-gradient(90deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC), transparent);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
@media (max-width: 800px) {
  #titulo_filtro {
    margin-top: 24px;
  }
}

/* ---- paginación (auxiliares/paginacion.php, compartido por las 4
   secciones -no es .new, así que el HTML que genera no se toca). Reemplaza
   los círculos violeta de css/paginacion.css por el degradé navy→blue del
   mockup (rediseño/titulo-y-paginacion-final.html), pisando color/tamaño
   sobre las mismas clases que ya emite el PHP. gap:8px en el contenedor
   reemplaza el margin:3px por-ítem del original para que el espaciado sea
   exacto y no se duplique.
   !important en las propiedades que también fija css/paginacion.css: ese
   archivo se linkea DESDE DENTRO del HTML que filtro.php inyecta por
   AJAX en #resultado, así que su <link> termina más abajo en el documento
   que este archivo (cargado una sola vez en el <head> inicial) y gana los
   empates de especificidad igual sin importar el orden declarado acá. */
.contenedor_paginacion {
  gap: 8px;
  margin: 32px 0 48px;
}
.paginacion-link {
  margin-top: 0 !important;
}
.div-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  background: var(--gray-100, #F1F3F7) !important;
  transition: background .2s ease, transform .2s ease;
}
.div-num:hover {
  background: rgba(47,143,204,0.15) !important;
  transform: translateY(-2px);
}
.div-num.activo {
  background: linear-gradient(135deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC)) !important;
  box-shadow: 0 6px 16px -4px rgba(47,143,204,0.5);
}
.div-num .paginacion-link {
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.icon-num {
  position: static !important;
  margin: 0 !important;
  font-family: var(--display, 'Sora', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--navy, #1F2A5C) !important;
}
.div-num.activo .icon-num {
  color: #fff !important;
}
.icon-der, .icon-izq {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border-radius: 50%;
  border: 1.5px solid #E2E7F2;
  background: #fff;
  color: var(--blue, #2F8FCC) !important;
  font-size: 1.1em !important;
  transition: all .2s ease;
}
.icon-der:hover, .icon-izq:hover {
  background: var(--blue, #2F8FCC);
  color: #fff !important;
  border-color: transparent;
}

/* ---- hero con foto (estudiantes/ventas, home): mismo componente
   .hero-bg/.hero-title que ya usa Temporario en su home
   (css/buscador-mockup.css, no cargado en estas dos páginas) —
   duplicado acá con los mismos valores en vez de sumar ese archivo entero,
   que redefine .search-card/.field/.chip/etc. con su propia versión y
   pisaría el estilo que ya funciona bien acá (theme.css). Pisa también
   el .hero-bg{position:absolute;inset:0;z-index:-1} genérico de
   theme.css (pensado para el hero de otra página), que si no gana por
   cargar antes que este archivo. Las páginas de resultados (busqueda) NO
   usan esto — siguen con el banner sólido de siempre, igual que la propia
   página de resultados de Temporario. */
.hero-bg{height:300px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0;}
.hero-bg::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,27,61,0.75) 0%, rgba(31,42,92,0.55) 55%, rgba(31,42,92,0.92) 100%);}
.hero-title{position:relative; z-index:2; text-align:center; padding:0 24px; margin-bottom:48px;}
.hero-title .eyebrow{color:#BFD4F0; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; margin-bottom:8px;}
.hero-title h1{font-family:var(--display, 'Sora', sans-serif); font-weight:700; font-size:clamp(24px,3vw,34px); color:#fff; max-width:960px; margin:0 auto; line-height:1.25; white-space:normal;}
/* h3 de bajada: Temporario no tiene una en su hero, pero estudiantes/ventas
   sí traen texto real acá -no lo borro, solo lo saco de la caja azul sólida
   vieja y lo dejo legible sobre la foto. */
.hero-title h3{font-family:var(--body, 'Inter', sans-serif); font-weight:500; font-size:21px; color:rgba(255,255,255,0.85); text-shadow:none; max-width:640px; margin:10px auto 0; line-height:1.5;}
@media(max-width:800px){
  .hero-bg{height:280px;}
  .hero-title h1{font-size:19px;}
  .hero-title h3{font-size:16px;}
}

/* ---- botones buscar / borrar ---- */
.btn-buscar, .btn-borrar {
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(20,27,61,0.35);
  background: transparent;
  font-family: var(--body, 'Inter', sans-serif);
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-buscar:hover, .btn-buscar:active, .btn-borrar:hover, .btn-borrar:active {
  color: var(--navy, #1F2A5C);
  background: #fff;
  filter: none;
  transform: translateY(-1px);
}
.btn-otrafecha:hover {
  color: var(--blue-soft, #A7B8E8);
}

/* ---- switches (Cochera / Wifi / etc.) ---- */
input:checked + .slider-btn {
  background-color: var(--blue, #2F8FCC);
}
input:focus + .slider-btn {
  box-shadow: 0 0 1px var(--blue, #2F8FCC);
}

/* ---- sliders nativos (rangos de fecha/ambientes/etc.) ---- */
input[type=range]::-webkit-slider-thumb {
  background-color: var(--blue, #2F8FCC);
  border: 3px solid var(--navy, #1F2A5C);
}
input[type=range]::-moz-range-thumb {
  background-color: var(--blue, #2F8FCC);
  border: 3px solid var(--navy, #1F2A5C);
}
input[type=range]::-ms-thumb {
  background-color: var(--blue, #2F8FCC);
  border: 3px solid var(--navy, #1F2A5C);
}
input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--blue-soft, #A7B8E8);
}
input[type=range]::-moz-range-track {
  background-color: var(--blue-soft, #A7B8E8);
}
input[type=range]::-ms-track {
  background-color: var(--blue-soft, #A7B8E8);
}

.fechapersonalizada {
  font-family: var(--body, 'Inter', sans-serif);
  border: 1px solid var(--blue, #2F8FCC);
}

.inputtext {
  font-family: var(--body, 'Inter', sans-serif);
  border: 1px solid var(--blue, #2F8FCC);
}

/* ---- destacados (tarjetas de propiedad — auxiliares/destacado.php, compartido por las 4 secciones) ---- */
.destacado_titulo {
  font-family: var(--display, 'Sora', sans-serif);
  background: none;
  color: var(--navy, #1F2A5C);
  margin: 10px auto 6px;
  /* main.css trae padding:5px 5px 8px 5px en esta misma clase (nunca se
     había pisado) — sumaba 5px arriba + 8px abajo de espacio invisible
     alrededor de la caja visible (.linkdestacado.acc-item) sin que se notara
     en el inspector a simple vista. */
  padding: 0;
}
/* mismo ancho/centrado que .contenedor_destacado (fila de tarjetas de abajo)
   y que .search-card (buscador de arriba), en vez de quedar angosto/flotante.
   Solo en escritorio (>900px, mismo corte que el resto del sitio). max-width:none
   pisa el h2{max-width:520px} genérico de theme.css (pensado para los
   títulos de la home), que si no achica este acordeón y le gana al width:85%
   de acá (max-width siempre le gana a width). */
@media (min-width:901px) {
  .destacado_titulo {
    width: 85%;
    max-width: none;
  }
}
.linkdestacado {
  color: var(--navy, #1F2A5C);
}

/* Encabezado "Destacados de alquiler ... de X Ambiente(s)" (rediseño/mockups/
   acordeon-destacados.html): el href y el texto de .linkdestacado NO cambian
   -sigue siendo el mismo link a la página de resultados filtrada por
   ambientes- esto es puro reskin visual del link existente (no hay JS de
   acordeón que preservar, nunca lo hubo).
   Tamaños ~22% más grandes que el mockup original: con el acordeón ocupando
   todo el ancho del contenedor, el contenido se veía muy chico/vacío en el
   medio. Estos son los valores de escritorio; @media(max-width:900px) más
   abajo los vuelve a los tamaños compactos originales para mobile. */
.linkdestacado.acc-item {
  background: var(--white, #fff);
  border: 1px solid #E7EAF2;
  border-radius: 14px;
  /* padding chico a propósito: el alto de la caja lo tiene que marcar el
     alto de línea del texto, no un ícono grande + padding generoso. */
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* la caja visible se achica al contenido (número + texto + flecha) en vez
     de ocupar todo el ancho del marco de 85%; ese marco (.destacado_titulo)
     sigue centrado/alineado con .contenedor_destacado, así que la caja
     arranca en el mismo borde izquierdo que la fila de tarjetas de abajo. */
  width: fit-content;
  max-width: 100%;
}
.linkdestacado.acc-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(20,27,61,0.2);
  border-color: transparent;
  color: var(--navy, #1F2A5C);
}
.acc-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC));
  color: #fff;
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-text {
  flex: 1;
  min-width: 0;
}
.acc-text .title {
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy, #1F2A5C);
  line-height: 1.3;
}
/* Escritorio: título en una sola línea (la caja ya se achica al contenido,
   así que una sola línea no deja espacio vacío). En mobile no se fuerza
   nowrap más abajo: si el texto no entra, pasa a 2 líneas. */
@media (min-width: 901px) {
  .acc-text .title {
    white-space: nowrap;
  }
}
.acc-chev {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-100, #F1F3F7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue, #2F8FCC);
  transition: transform .2s ease, background .2s ease;
}
.acc-chev svg {
  width: 13px;
  height: 13px;
}
.linkdestacado.acc-item:hover .acc-chev {
  background: var(--blue, #2F8FCC);
  color: #fff;
  transform: translateX(3px);
}

/* Mobile: volver a los tamaños compactos originales del mockup (el pedido
   explícito fue "en mobile dejalo como está"). */
@media (max-width:900px) {
  .destacado_titulo {
    width: auto;
    max-width: 520px;
    margin: 10px 0 6px;
  }
  .linkdestacado.acc-item {
    border-radius: 14px;
    padding: 8px 12px;
    gap: 10px;
  }
  .acc-num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12px;
  }
  .acc-text .title {
    font-size: 16.5px;
  }
  .acc-chev {
    width: 22px;
    height: 22px;
  }
  .acc-chev svg {
    width: 12px;
    height: 12px;
  }
}
.boton_ant, .boton_sig {
  width: 34px;
  height: 34px;
  font-size: 16px;
  line-height: 34px;
  /* mismo degradé + blur que la píldora de ambientes/estado de la tarjeta
     (pedido explícito), en vez del color plano de antes. */
  background: linear-gradient(120deg, rgba(31,42,92,0.6), rgba(47,143,204,0.6));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* main.css trae z-index:3000 en esta clase (nunca se había pisado); con
     el header nuevo sticky (z-index:10) eso podía dejar la flecha por
     encima del header al scrollear — mismo bug que .prop-icon más abajo. */
  z-index: 5;
}
.boton_ant { left: 14px; }
.boton_sig { right: 14px; }
.boton_ant:hover, .boton_sig:hover {
  background: linear-gradient(120deg, rgba(47,143,204,0.75), rgba(31,42,92,0.75));
}
/* ocultas en mobile: el slider ya tiene swipe táctil propio
   (js/destacado.js usa .swipe() sobre .slider-destacado), así que las
   flechas no hacen falta y quedaban invadiendo el espacio de las tarjetas
   en pantallas chicas (pedido explícito). */
@media (max-width:900px) {
  .boton_ant, .boton_sig {
    display: none;
  }
}
/* Tarjeta modelo aprobado (rediseño/tarjeta-modelo1.html): reskin puro por CSS
   sobre el HTML/PHP que ya genera auxiliares/destacado.php. No se toca ningún
   link, ningún id/clase que usen favorito.js / envio*.js, ni qué propiedades
   se muestran — solo tamaño, posición y color de lo que ya existe. */
/* align-items:flex-start evita que el flex row estire cada tarjeta al alto
   fijo del carrusel (comportamiento default de flexbox = stretch, que ignora
   aspect-ratio y fuerza la tarjeta a los 350px del row); con flex-start la
   tarjeta vuelve a medir 320x320 (su propio aspect-ratio), igual que en el
   mockup aprobado. */
.slider-destacado{ align-items: flex-start; }

/* Tarjeta cuadrada tal cual el mockup (aspect-ratio:1/1 en la tarjeta, no en
   la foto): con ancho fijo de 320px esto fuerza una altura total de 320px,
   y adentro .destacado-photo (flex:1) se reparte ese alto con el pie de
   dirección/meta — así el total nunca excede los 350px del carrusel. */
.destacado{
  width: 320px;
  aspect-ratio: 1/1;
  margin: 6px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(20,27,61,0.15);
  background: var(--white, #fff);
  transition: transform .25s ease, box-shadow .25s ease;
}
.destacado:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(20,27,61,0.28);
}
.destacado a{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .destacado-photo envuelve SOLO la foto (img + píldoras de ambientes/estado):
   es el positioned ancestor correcto para esas dos píldoras, para que
   "bottom/top" se midan contra el borde de la FOTO y no contra toda la
   tarjeta (que incluye la franja blanca de abajo). El ícono de favorito
   queda fuera de este wrapper, como hijo directo de .destacado, porque
   js/cook.js busca el id de la propiedad en el padre inmediato del ícono.
   flex:1 + min-height:0 (igual que el mockup) hace que la foto ocupe el
   espacio que sobra dentro del cuadrado de 320px una vez descontado el pie
   de dirección/meta, en vez de tener su propio aspect-ratio fijo. */
.destacado-photo{
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* franja degradé arriba de la foto, detrás del ambiente */
.destacado-photo::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(20,27,61,0.75), transparent);
  pointer-events: none;
}

.destacado_imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

/* píldora de ambientes: arriba a la izquierda de la foto */
.destacado_ambientes {
  position: absolute;
  top: 10px; left: 12px; right: auto; bottom: auto;
  transform: none;
  background: linear-gradient(120deg, rgba(31,42,92,0.6), rgba(47,143,204,0.6));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  text-shadow: none;
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 20px;
  padding: 9px 22px;
  border-radius: 100px;
  white-space: nowrap;
}

/* píldora de estado/precio: abajo a la izquierda de la foto, MISMO tamaño
   y forma que la de ambientes (pedido explícito). El contenido (Disponible /
   precio / Consulte / Reservado, según la sección) sigue siendo el mismo
   valor dinámico que ya calculaba destacado.php — acá solo cambia cómo se ve
   la píldora, no qué texto muestra ni cuándo. */
.destacado_situacion {
  position: absolute;
  top: auto; bottom: 10px; left: 12px; right: auto;
  transform: none;
  background: linear-gradient(120deg, rgba(31,42,92,0.6), rgba(47,143,204,0.6));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  text-shadow: none;
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 20px;
  padding: 9px 22px;
  border-radius: 100px;
  white-space: nowrap;
}

/* dirección: texto debajo de la foto, en su propia franja blanca */
.destacado_direccion {
  position: static;
  right: auto;
  transform: none;
  flex-shrink: 0;
  width: auto;
  text-align: left;
  background: none;
  text-shadow: none;
  color: var(--navy, #1F2A5C);
  font-family: var(--display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 16px 0;
  white-space: normal;
}

/* línea secundaria (meta): orientación / adicional destacado / capacidad,
   dato real y dinámico igual que el resto de la tarjeta. display:flex acá
   no cambia nada en las secciones que solo tienen texto plano (temporada/
   estudiantes/24meses) -un único nodo de texto como hijo se comporta igual
   que antes-, pero permite que Ventas agregue las mini-píldoras de
   adicionales/Sup. Total/Expensas al lado de la orientación (ver
   ventas/filtro.php mostrardepto()) envolviendo en varias líneas si no
   entran todas en el ancho de la tarjeta. */
.destacado_meta {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--gray-600, #65707A);
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 13px;
  padding: 4px 16px 18px;
}

/* Mini-píldoras de la tarjeta de resultados (Ventas, ventas/filtro.php
   mostrardepto()) -mismo componente visual que .adic-chip de la ficha
   (propiedad-ficha.css), a tamaño de tarjeta chica en vez del tamaño de
   ficha completa. Se probó un separador " - " entre píldoras y se sacó (no
   gustó cómo quedaba) -el espaciado es solo el gap de .destacado_meta. */
.destacado_meta .mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gray-100, #F1F3F7);
  color: var(--navy, #1F2A5C);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.destacado_meta .mini-chip svg {
  color: var(--blue, #2F8FCC);
  flex-shrink: 0;
}

/* Tarjeta de Ventas (ventas/filtro.php, clase extra .destacado--ventas
   SOLO en esa tarjeta -no toca el carrusel .slider-destacado ni las otras 3
   secciones): con muchas píldoras de adicionales, .destacado_meta podía
   necesitar varias líneas y -como .destacado-photo usaba flex:1- la foto se
   achicaba para compensar, y la tarjeta entera terminaba más alta que las
   demás (grilla desprolija). Se fija con alto explícito en las 3 partes
   (foto+dirección+meta = 320px, la misma altura del cuadrado original) en
   vez de flex:1/aspect-ratio, así la foto NUNCA cambia de tamaño y todas
   las tarjetas quedan siempre a la misma altura -las píldoras que no entran
   en las 2 líneas de .destacado_meta quedan recortadas (overflow:hidden)
   en vez de estirar la tarjeta. */
.destacado--ventas {
  height: 320px;
}
.destacado--ventas .destacado-photo {
  flex: none;
  height: 224px;
}
.destacado--ventas .destacado_direccion {
  height: 34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.destacado--ventas .destacado_meta {
  height: 62px;
  overflow: hidden;
  align-content: flex-start;
}

/* Home (secciones destacado_alq_temp de index.php: acordeón + carrusel
   de "Un/Dos/Tres Ambientes"): tarjeta más chica que la "tarjeta modelo1"
   estándar. Escapado a .slider-destacado para NO afectar las mismas clases
   .destacado en la página de resultados (temporada_busqueda.php /
   filtro.php), que sigue con el tamaño de 320px ya aprobado. */
.slider-destacado {
  /* antes 264px con la tarjeta a 240px+6px+6px de margen = 252px reales:
     sobraban 12px de espacio muerto abajo de cada fila (la fila es un
     bloque de alto fijo, así que ese resto quedaba en blanco entre la
     tarjeta y el acordeón siguiente). Ajustado al alto real de la tarjeta. */
  height: 252px;
  /* main.css trae margin:5px 10px 5px 10px en esta misma clase (no estaba
     pisado) — sumaba 5px arriba y 5px abajo de más. Se mantiene el inset
     horizontal, se saca el vertical. */
  margin: 0 10px;
}
.slider-destacado .destacado {
  width: 240px;
  /* main.css trae .destacado{min-width:312px} sin escapar (pensado para la
     tarjeta de 320px); min-width le gana a width si no se pisa acá, y eso
     hacía que la tarjeta renderizara a 312px real pese al width:240px de
     arriba -> con aspect-ratio:1/1 quedaba más alta que la fila de 264px y
     el pie (dirección/meta) se recortaba por el overflow:hidden heredado. */
  min-width: 240px;
  border-radius: 14px;
}
.slider-destacado .destacado-photo::before {
  height: 52px;
}

/* Carrusel de scroll nativo (piloto: solo "1 Ambiente", marcado con la clase
   .slider-nativo que agrega js/destacado.js SOLO para ese bloque).
   Reemplaza jQuery TouchSwipe + animate(margin-left) — ese mecanismo viejo
   solo detecta el gesto completo y salta a la tarjeta siguiente (no puede
   seguir el dedo/mouse en tiempo real), por eso se sentía "a los saltos". */
.slider-destacado.slider-nativo {
  /* pisa el width:300% de main.css (pensado para el truco viejo de
     margin-left): acá el ancho tiene que ser el normal del contenedor para
     que el overflow real quede afuera, scrolleable. */
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  /* main.css trae touch-action:none en .slider-destacado (pensado para que
     TouchSwipe manejara el gesto a mano); eso bloqueaba CUALQUIER gesto
     táctil, incluido el scroll nativo del navegador — por eso en celular no
     andaba nada. pan-x deja que el navegador scrollee horizontal solo con
     el dedo, sin JS, y no le come el scroll vertical de la página. */
  touch-action: pan-x;
  /* el mecanismo viejo dejaba un margin-left inline al armar el carrusel
     infinito; nos aseguramos de arrancar en 0 en la variante nueva. */
  margin-left: 0;
}
.slider-destacado.slider-nativo::-webkit-scrollbar {
  display: none;
}
.slider-destacado.slider-nativo > .destacado {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.slider-destacado.slider-nativo.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none;
}
.slider-destacado .destacado_ambientes,
.slider-destacado .destacado_situacion {
  font-size: 15px;
  padding: 7px 16px;
}
.slider-destacado .destacado_direccion {
  font-size: 13px;
  padding: 10px 12px 0;
}
.slider-destacado .destacado_meta {
  font-size: 11.5px;
  padding: 3px 12px 14px;
}
.slider-destacado .icon-favorito {
  width: 32px;
  height: 32px;
}
.slider-destacado .icon-favorito svg {
  width: 17px;
  height: 17px;
}
.slider-destacado .envio-iconcss {
  right: 8px;
  top: 8px;
}

/* ícono de favorito: círculo translúcido arriba a la derecha de la foto,
   mismo ícono/hover/estado activo que el botón de favorito de la ficha de
   propiedad (.float-icon.fav en propiedad-ficha.css) — pedido explícito
   de replicar ese diseño acá tal cual, manteniendo el tamaño propio de cada
   tarjeta (42px en grillas de resultados, 32px en el carrusel vía el bloque
   de arriba). El círculo visible ahora es el propio <span class="icon-
   favorito"> (contiene el SVG real), no un pseudo-elemento con contenido
   unicode. .prop-icon sigue siendo solo el contenedor posicionado (hijo
   directo de .destacado, igual que antes) y conserva las mismas clases que
   usa js/cook.js para el toggle (.act) y el click. El ícono de envío se
   sacó de esta tarjeta (pedido explícito); la función de envío/consulta
   sigue intacta en el resto del sitio, esto no la borra. */
.destacado .icon-favorito {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.destacado .icon-favorito:before {
  content: none;
}
/* El SVG viene con width/height="21" hardcodeado en el markup (mismo
   corazón que .float-icon.fav de la ficha) -pedido explícito: apenas más
   grande que el 21px original, sin acercarse al 28px (probado, quedó
   demasiado grande) ni quedarse en el 24px intermedio (todavía un poco
   grande). El override en .slider-destacado .icon-favorito svg (más abajo)
   sigue el mismo criterio a escala del círculo más chico del carrusel
   (32px). */
.destacado .icon-favorito svg {
  width: 22px;
  height: 22px;
}
.destacado .favorito-icon:hover .icon-favorito {
  transform: scale(1.08);
  background: rgba(255,255,255,0.32);
  color: #E0475C;
}
.destacado .favorito-icon.act .icon-favorito {
  background: #E0475C;
  color: #fff;
}
.destacado .favorito-icon.act .icon-favorito svg {
  fill: currentColor;
}
.envio-iconcss { right: 10px; top: 10px; }

/* main.css trae .prop-icon{z-index:2002} (pensado para flotar sobre la
   foto de la tarjeta); con el header nuevo sticky (z-index:10) eso hace que
   el ícono de favorito quede POR ENCIMA del header al scrollear la página,
   en vez de pasar por detrás como el resto del contenido. Se baja para que
   siempre quede debajo del header. Sin escapar a .destacado porque el mismo
   problema aplica a .prop-icon en cualquier página (detalle de propiedad,
   listado de resultados). */
.prop-icon {
  z-index: 3;
}

/* ---- precios ----
   OBSOLETO - sin uso confirmado por grep 2026-07-13, candidato a borrar definitivo:
   ninguna .php/.html carga una sección .precios_* (alquileres/index.php
   y ventas/index.php ya no tienen ese bloque; solo sigue vivo en los .php
   originales, que no cargan este archivo). Ver auditoría CSS legacy 2026-07-13.
.precios_titulo, .precios_descripcion, .precios_txt2 {
  font-family: var(--display, 'Sora', sans-serif);
}
.precios_txt, .precios_detalle {
  font-family: var(--body, 'Inter', sans-serif);
}
.precios_descripcion {
  color: #fff;
  text-shadow: none;
  background: var(--navy, #1F2A5C);
  border-radius: 12px 12px 0 0;
}
.precios_total {
  color: var(--navy, #1F2A5C);
  background: var(--gray-100, #F1F3F7);
}
.precios_concepto {
  color: #fff;
  text-shadow: none;
  background: var(--blue, #2F8FCC);
  border-radius: 0 0 12px 12px;
}
.precios_txt2 {
  color: #fff;
  background: var(--navy, #1F2A5C);
  border-radius: 12px;
}
*/

/* ---- "Sabemos como alquilar/vender su propiedad" ---- */
.extra, .liextra {
  font-family: var(--body, 'Inter', sans-serif);
}

/* ---- link de contacto genérico reusado dentro de contenido legado ---- */
.link_contacto {
  color: var(--navy, #1F2A5C);
}

/* ---- barra de filtros de la página de resultados (temporada_busqueda.php y equivalentes) ---- */
.filtro {
  font-family: var(--body, 'Inter', sans-serif);
}
.navfiltro ul ul {
  background: rgba(31,42,92,0.92);
}
.navfiltro .btn-filtro {
  color: var(--navy, #1F2A5C);
  border: 2px solid var(--blue-soft, #A7B8E8);
}
.navfiltro .btn-filtro:hover {
  border-color: var(--blue, #2F8FCC);
}
.icon-buscar {
  border: 1px solid var(--blue-soft, #A7B8E8);
}
.icon-cerrar:before {
  background: #fff;
  color: var(--navy, #1F2A5C);
}
.icon-cerrar:hover:before {
  background: var(--blue, #2F8FCC);
  color: #fff;
}

/* ---- página de detalle de propiedad (propiedad_*.php) ----
   .columna-propiedad ya trae su width/float/margin de propiedad.css (layout
   intacto); acá solo se agrega fondo/borde/sombra/padding de tarjeta, con
   box-sizing:border-box para que el padding no rompa el 48% de las dos
   columnas. */
.columna-propiedad {
  background: #fff;
  border: 1px solid #ECEFF5;
  border-radius: 16px;
  box-shadow: 0 8px 24px -8px rgba(31,42,92,0.12);
  padding: 22px;
  box-sizing: border-box;
}
/* OBSOLETO - sin uso confirmado por grep 2026-07-13, candidato a borrar definitivo:
   este bloque estilizaba el markup viejo (titulo-propiedad/carac-adi-titulo/
   carac-int-propiedad/titulo-disponibilidad/requisitos) de las fichas de
   propiedad. Verificado contra las 4 fichas .php reales (alquileres,
   estudiantes, ventas, 24meses): las 4 ya tienen el rebuild B2 completo
   (propiedad-ficha.css, clases .caract-, .adic- y .descripcion-txt) y
   ninguna emite estas clases. Solo siguen vivas en los propiedad_*.php
   originales, que no cargan este archivo. Ver auditoría CSS legacy 2026-07-13.
.titulo-propiedad, .titulo_requisitos, .carac-adi-titulo, .titulo-disponibilidad {
  font-family: var(--display, 'Sora', sans-serif);
  text-shadow: none;
  color: var(--navy, #1F2A5C);
}
.titulo-propiedad h2 {
  white-space: normal;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  margin: 0 0 12px;
  max-width: none;
}
.titulo_requisitos {
  font-size: 18px;
  max-width: none;
  margin: 0 0 10px;
}
.carac-int-propiedad h2 {
  font-family: var(--body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 15.5px;
  max-width: none;
  margin: 0 0 6px;
  color: var(--gray-900, #2B2B2E);
}
.carac-adi-titulo h3, .titulo-disponibilidad h3 {
  font-family: var(--display, 'Sora', sans-serif);
  color: var(--navy, #1F2A5C);
  text-shadow: none;
}
.descripcion-propiedad, .carac-int-propiedad, .requisitos {
  font-family: var(--body, 'Inter', sans-serif);
}
*/
.precio {
  background: var(--navy, #1F2A5C);
  text-shadow: none;
  font-family: var(--body, 'Inter', sans-serif);
}
/* OBSOLETO - sin uso confirmado por grep 2026-07-13, candidato a borrar definitivo:
   mismo motivo que el bloque de arriba (ficha de propiedad B2, ver auditoría
   CSS legacy 2026-07-13); .slider_imagen además no tiene NINGÚN uso ni
   siquiera en los .php originales (0 matches en todo el repo).
.icono-adi-propiedad {
  border: 1px solid var(--blue, #2F8FCC);
}
.slider_imagen {
  border: 1px solid var(--blue-soft, #A7B8E8);
  border-radius: 10px;
}
*/
/* OBSOLETO - sin uso confirmado por grep 2026-07-13, candidato a borrar definitivo:
   la fila .favorito_envio (favorito/mail/whatsapp sobre la ficha) fue
   removida por completo del rebuild B2 en las 4 fichas .php (reemplazada
   por los float-icon sobre el collage) - ver auditoría CSS legacy 2026-07-13.
.favorito_envio .prop-icon [class*="icon-"]:before {
  background: linear-gradient(135deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC));
}
.favorito_envio .txt_icono {
  font-family: var(--body, 'Inter', sans-serif);
  color: var(--navy, #1F2A5C);
}
*/
/* OBSOLETO - sin uso confirmado por grep 2026-07-13, candidato a borrar definitivo:
   ícono de WhatsApp de la fila .favorito_envio (ver bloque OBSOLETO de arriba,
   la fila entera fue removida del rebuild B2 en las 4 fichas .php).
.whatsapp-icon .prop-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy, #1F2A5C), var(--blue, #2F8FCC));
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.whatsapp-icon.act .prop-icon-svg {
  color: rgba(255, 255, 0, 0.7);
}
*/

/* ---- calendario de disponibilidad (auxiliares/calendario.php) ---- */
#calendar caption {
  background-color: var(--navy, #1F2A5C);
}
#calendar .ocupado, .ocupado-ref {
  background-color: var(--navy, #1F2A5C);
}
#calendar .senado, .ocupado-sen {
  background-color: var(--blue, #2F8FCC);
}

/* ---- página "Quiénes somos" ---- */
.titulo-quienes {
  font-family: var(--display, 'Sora', sans-serif);
  text-shadow: none;
  color: var(--navy, #1F2A5C);
}
.quienes_descripcion {
  font-family: var(--body, 'Inter', sans-serif);
}
#vero, #ivan, #juan, #gustavo {
  color: var(--blue, #2F8FCC);
  font-weight: 600;
}

/* ---- página de contacto / favoritos-consultas ---- */
.favorita-titulo, .selec-operacion {
  font-family: var(--display, 'Sora', sans-serif);
  color: var(--navy, #1F2A5C);
}
.btn-fav-env {
  border: 2px solid var(--blue, #2F8FCC);
  font-family: var(--body, 'Inter', sans-serif);
}
.btn-fav-env:hover, .btn-fav-env:active {
  background: var(--gray-100, #F1F3F7);
  filter: none;
}

/* ---- estado activo del ítem de menú de la sección actual ---- */
.nav-desktop a.active::after,
.nav-mobile a.active {
  width: 100%;
}
.nav-mobile a.active {
  background: rgba(255,255,255,0.12);
}