/* Ajustes de la plantilla Nido para castellano.
 *
 * El tema pone `text-transform: capitalize` en varios títulos porque en inglés los títulos se
 * escriben con cada palabra en mayúscula. En castellano no: sólo va mayúscula la primera palabra
 * (y los nombres propios). Sin esto se lee "Detalle De La Propiedad" o "Últimas Publicadas".
 *
 * Va en un archivo aparte y NO tocando nido.css, que es el bundle vendorizado del template: así se
 * puede regenerar el bundle sin perder estos ajustes. Se carga después, en (sitio)/layout.tsx.
 */
.box-title .title,
.single-property-element .title,
.box-service .content .title,
.map-listing-item .content .title,
.flat-blog-item .content-box .title,
.sidebar-blog .recent .recent-post-item .content .title,
.tf-faq .title {
  text-transform: none;
}

/* Tipografía del tema (ver src/lib/sitioPublico/tema.ts).
 *
 * El template usa una sola familia para todo, así que para poder ofrecer PARES (una para títulos y
 * otra para el texto, como pide el spec) hace falta esta regla: el cuerpo lo cambia la variable
 * --nido-fuente, que ya está metida dentro del bundle, y los títulos los cambia ésta. Si la agencia
 * no eligió un par, las dos variables quedan sin definir y manda el diseño original. */
h1, h2, h3, h4, h5, h6, .title, .title-large {
  font-family: var(--nido-fuente-titulo, var(--nido-fuente, Manrope)), sans-serif;
}

/* La pregunta del acordeón, igual que los títulos: el tema la capitaliza palabra por palabra
 * ("¿Qué Papeles Necesito Para Alquilar?"), que en castellano está mal. */
.box-faq .faq-item .faq-header {
  text-transform: none;
}

/* El acordeón del template es un <a>; acá es un <button> para que se pueda usar con el teclado sin
 * inventar roles. Un botón trae fondo, borde y ancho propios del navegador, así que se los sacamos
 * para que quede exactamente como el <a> del tema. */
.box-faq .faq-item button.faq-header {
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
}

/* Video de fondo de la portada (ver src/lib/sitioPublico/familias/nido/Hero.tsx).
 *
 * Va detrás de todo lo de la portada: el overlay del tema y el contenido tienen z-index propio, así
 * que alcanza con mandarlo al fondo y taparlo con el mismo overlay que oscurece la foto.
 *
 * En pantallas chicas se esconde y queda el poster —que es la foto de la portada—: reproducir un
 * video decorativo en un celular es batería y datos a cambio de nada. */
.nido-video-portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 767px) {
  .nido-video-portada {
    display: none;
  }
}

/* Fondo por defecto de la portada.
 *
 * Las fotos de fondo que trae el template son placeholders GRISES: ThemeForest saca del paquete las
 * imágenes con licencia (ver README-build.md). Así que una agencia que todavía no subió su foto
 * veía un rectángulo gris, que es peor que no tener foto.
 *
 * En vez de meter una foto de banco —que hay que licenciar y que igual no le va a quedar bien a
 * todas— el fondo por defecto es un degradado del COLOR DE MARCA de la agencia. Se ve intencional,
 * no necesita licencia de nadie, y cambia solo cuando la agencia cambia su color.
 *
 * Cuando la agencia sube su foto, la sección lleva `.nido-fondo-propio` (abajo) y la foto le gana a
 * esto. */
.flat-slider.home-1,
.flat-slider.home-3,
.flat-slider.home-5 {
  background-image: linear-gradient(135deg, var(--nido-primario, #1563df) 0%, #161e2d 100%);
}

/* La foto propia de la portada, en su versión web (SUP-323): la de 1920 en pantallas grandes y la de
 * 1280 en el celular. Las dos URLs vienen como variables en el estilo de la sección (ver
 * `fondoPropio` en heroes.tsx); va después del degradado de arriba para ganarle con la misma
 * especificidad. */
.flat-slider.nido-fondo-propio {
  background-image: var(--fondo-portada);
}

@media (max-width: 767px) {
  .flat-slider.nido-fondo-propio {
    background-image: var(--fondo-portada-chico);
  }
}


/* Títulos con la etiqueta que les toca por jerarquía y el tamaño de la que tenían (SUP-321 y
 * SUP-112). Para Google, el título de una página es su H1 y los bloques son H2; el template, en
 * cambio, elegía la etiqueta por el tamaño: el título del listado era un h3, el de la ficha también,
 * y los bloques de la ficha h5 y h6. Estas clases repiten lo que el bundle les da a h3, h5 y h6 (lo
 * demás —peso, color, márgenes— es igual para todos los títulos), así que cambiar la etiqueta no
 * cambia nada de lo que se ve. Las clases de Bootstrap (.h3, .h5) no sirven: son otros tamaños. */
.como-h3 {
  font-size: 36px;
  line-height: 44px;
}
.como-h5 {
  font-size: 24px;
  line-height: 30px;
}
.como-h6 {
  font-size: 18px;
  line-height: 25.2px;
}
@media only screen and (max-width: 991px) {
  .como-h3 {
    font-size: 26px;
    line-height: 34px;
  }
  .como-h5 {
    font-size: 18px;
    line-height: 22px;
  }
  .como-h6 {
    font-size: 16px;
    line-height: 23.2px;
  }
}

/* Migas de la ficha (Inicio / Venta / Casas / Gualeguaychú). El bundle centra .breadcrumb porque en
 * el template va dentro de un banner; acá va arriba del título, alineada con él. */
.breadcrumb.migas-ficha {
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 21px;
}
.breadcrumb.migas-ficha a {
  color: #5c6368; /* el de .text-variant-1 del bundle */
}
.breadcrumb.migas-ficha a:hover {
  color: var(--nido-primario, #1563df);
}

/* La franja "¿Hablamos?" después de una sección con fondo (SUP-431). La franja va con `pt-0`: el
 * template cuenta con que la sección de arriba sea blanca y ponga el aire con su relleno de abajo.
 * Como cada sección del Inicio se muestra sólo si tiene datos, a veces la de arriba es "Buscá por
 * tipo", con fondo celeste: el aire queda adentro del celeste y la tarjeta, del mismo color, arranca
 * justo en el borde. Ahí la franja recupera el relleno de arriba de toda `.flat-section`. */
.bg-primary-new + .flat-section.pt-0 {
  padding-top: 100px !important;
}
@media only screen and (max-width: 991px) {
  .bg-primary-new + .flat-section.pt-0 {
    padding-top: 60px !important;
  }
}

/* El cartel de una propiedad señada (SUP-312), en la tarjeta y en la ficha. Ámbar oscuro con letra
 * blanca (5:1, AA) y no el color de marca, que es el de "Destacada": no se tienen que confundir. Sin el
 * cambio de color al pasar el mouse que el bundle le pone a todo .flag-tag. */
.flag-tag.cartel-reservada,
.flag-tag.cartel-reservada:hover {
  background-color: #b45309;
  color: #fff;
  cursor: default;
}
.aviso-reservada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  color: #5c6368;
}

/* El botón "Escribime por WhatsApp" (SUP-425), en la ficha y en Contacto: el logo al lado del texto,
 * del color del texto (el SVG va con `fill: currentColor`). En la ficha, los 30 px de arriba que el
 * template le da a lo que sigue al contacto (`.single-property-contact .contact-form{margin-top:30px}`):
 * estaba pegado al mail. */
.tf-btn.boton-whatsapp {
  gap: 8px;
}
.tf-btn.boton-whatsapp .icon {
  flex-shrink: 0;
}
.single-property-contact .boton-whatsapp.despues-del-contacto {
  margin-top: 30px;
}

/* LA FOTO DE LA FICHA, EN UN MARCO DE ALTO FIJO (SUP-426), en las galerías Carrusel y Banner (`FotoEncuadrada`
 * en Galerias.tsx). El template dibujaba la foto con su alto natural: una vertical de celular tapaba toda la
 * primera pantalla. El marco tiene la proporción del template (la pone el componente) y un tope de alto (la mitad
 * de la pantalla: en una de 1366 × 768 entra entero debajo del título), para
 * que se vea el comienzo de lo que sigue. La foto va entera (`contain`), y lo que sobra lo llena la misma foto
 * desenfocada. `div.` y `img.` para ganarle a `.swiper-slide .box-img-detail img{object-fit:cover}` del bundle. */
div.foto-encuadrada {
  position: relative;
  width: 100%;
  max-height: min(560px, 50vh);
  overflow: hidden;
  background-color: #f2f4f7;
}
div.foto-encuadrada > img.foto-fondo,
div.foto-encuadrada > img.foto-frente {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
div.foto-encuadrada > img.foto-fondo {
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.15);
  opacity: 0.55;
}
div.foto-encuadrada > img.foto-frente {
  object-fit: contain;
}

/* Las miniaturas del Carrusel, todas de la misma medida (SUP-426): con el alto natural, la de una foto vertical
 * medía 148 × 197 al lado de una apaisada de 148 × 93. En la miniatura sí se recorta: es para elegir, y al
 * elegirla se ve entera arriba. 148 × 111 es la medida que pide el template.
 *
 * El ancho va en la diapositiva y no se saca de la foto: el template la deja en `width: auto` (toma el ancho de lo
 * que tiene adentro), y con la foto al 100 % de ella quedaban las dos en 0 (pasó en producción, SUP-426). Donde el
 * carrusel muestra tres por vez (de 375 a 499 px) el ancho lo pone él, en línea, y le gana a éste. */
.thumbs-sw-pagi .swiper-slide {
  width: 148px;
}
.thumbs-sw-pagi .img-thumb-pagi {
  aspect-ratio: 148 / 111;
}
.thumbs-sw-pagi .img-thumb-pagi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las galerías Fila y Mosaico, con el mismo tope de alto (SUP-426). Con el alto natural, una foto vertical
 * hacía la fila de 424 × 565 y la foto grande del mosaico de 776 × 943. Acá sí se recorta (`cover`, como ya lo
 * hace el template): son varias fotos juntas, y tocar una la abre entera. */
.flat-slider-detail-v1 .box-img-detail {
  aspect-ratio: 627 / 694;
  max-height: min(560px, 50vh);
}
.flat-gallery-single .box-img {
  min-height: 0;
}
.flat-gallery-single .box-img > a {
  display: block;
}
/* Desde 992 px el mosaico son dos filas iguales: la grilla tiene el alto del tope y la foto grande ocupa las dos.
 * En el celular el template lo pasa a cuatro filas (la grande arriba), y ahí cada foto lleva su proporción. */
@media (min-width: 992px) {
  .flat-gallery-single {
    height: min(560px, 50vh);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .flat-gallery-single .item1 {
    aspect-ratio: 960 / 680;
  }
  .flat-gallery-single .item2,
  .flat-gallery-single .item3,
  .flat-gallery-single .item4,
  .flat-gallery-single .item5 {
    aspect-ratio: 660 / 495;
  }
}

/* LA FICHA EN UNA NOTEBOOK (SUP-836). En una de 14" o 15", con Chrome y la barra de Windows, quedan entre 560 y 710 px
 * de ventana, y el encabezado de la ficha ocupaba 355 px antes de la galería: la foto se veía por la mitad.
 *
 * Desde 992 px el precio va a la derecha del título, como lo dibuja el template (`justify-content-between`): con un
 * título largo —«Departamento en venta de 1 dormitorio en Gualeguaychú» mide 1068 px— no le quedaba lugar en la fila y
 * `.content-top`, que tiene `flex-wrap: wrap`, lo bajaba a una fila propia. Ahora el título se achica y, si no entra,
 * se parte en dos renglones; el precio no se achica nunca. Abajo de 992 el precio sigue debajo, como siempre.
 *
 * Y en una ventana baja (hasta 900 px de alto) el encabezado se compacta —menos aire arriba, abajo y alrededor de la
 * raya, y el título a 30 px— y la foto mide lo que queda: de los 300 px de arriba, 78 son el menú, unos 200 el
 * encabezado (migas, título y datos, cada uno en un renglón) y 21 de aire, para que se vea dónde termina. Así entra
 * entera en 1280 × 560 (260 px de alto), 1366 × 650 (350) y 1536 × 710 (410), con las miniaturas asomando debajo. Con
 * un título de dos renglones o dos precios la foto pierde unos 20 o 40 px de abajo, pero se sigue viendo casi entera.
 * Con más de 900 px de alto ya entraba con el tope de siempre (SUP-426).
 *
 * El título lleva la transición de `.link` del bundle (`all .3s`): al achicar la ventana, el cambio de tamaño se anima. */
@media (min-width: 992px) {
  .header-property-detail .content-top {
    flex-wrap: nowrap;
  }
  .header-property-detail .content-top > h1 {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-property-detail .content-top > :not(h1) {
    flex-shrink: 0;
  }
}
@media (min-width: 992px) and (max-height: 900px) {
  .flat-section-v4.encabezado-ficha {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .encabezado-ficha .breadcrumb.migas-ficha {
    margin-bottom: 8px;
  }
  .encabezado-ficha .header-property-detail .content-top {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .encabezado-ficha .header-property-detail .content-top > h1.como-h3 {
    font-size: 30px;
    line-height: 38px;
  }
  .encabezado-ficha .header-property-detail .content-bottom .info-box .label {
    margin-bottom: 6px;
  }
  div.foto-encuadrada,
  .flat-slider-detail-v1 .box-img-detail {
    max-height: clamp(240px, calc(100vh - 300px), 560px);
  }
  .flat-gallery-single {
    height: clamp(240px, calc(100vh - 300px), 560px);
  }
}

/* EL BOTÓN «COMPARTIR» DE LA FICHA (SUP-837, `Compartir.tsx`), en la fila de íconos del template (`.icon-box`), que
 * ya trae el cuadrado de 40 px con borde, el fondo del color de marca al pasar el mouse y el trazo blanco del ícono.
 * Acá el cuadrado se estira para llevar la palabra y, como es un <button> y no un <a>, se le saca lo que le pone el
 * navegador. Con el menú abierto queda pintado como al pasar el mouse. La fuente del sitio se repite en
 * `.compartir-ficha`: el bundle le da la de los íconos a todo lo que tenga una clase que empiece con `icon-`
 * (`[class^="icon-"]`), y `.icon-box` cae ahí; en el template sólo llevaba SVG, pero acá la palabra salía con
 * letra de imprenta.
 *
 * La fila va siempre a la derecha (`margin-left: auto`), también cuando en el celular baja a un renglón propio: así
 * el menú, que se abre hacia la izquierda desde el borde derecho del botón, nunca se sale de la pantalla.
 *
 * El menú cae sobre la galería, y las flechas del carrusel del template llevan `z-index: 123`: con menos, la derecha
 * tapaba «Copiar enlace» (pasó en producción). 200 le gana a las flechas y queda debajo del menú fijo de arriba (999)
 * y de la burbuja del chat (1050). */
.header-property-detail .content-bottom .icon-box {
  margin-left: auto;
}
.header-property-detail .content-bottom .icon-box .item.compartir {
  width: auto;
  gap: 8px;
  padding: 0 16px;
  background-color: transparent;
  color: #161e2d;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.header-property-detail .content-bottom .icon-box .item.compartir:hover,
.header-property-detail .content-bottom .icon-box .item.compartir[aria-expanded="true"] {
  background-color: var(--nido-primario, #1563df);
  color: #fff;
}
.header-property-detail .content-bottom .icon-box .item.compartir[aria-expanded="true"] .icon path {
  stroke: #fff;
}
.compartir-ficha {
  position: relative;
  font-family: var(--nido-fuente, Manrope), sans-serif;
}
.compartir-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(22, 30, 45, 0.12);
}
.compartir-menu a,
.compartir-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #161e2d;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.compartir-menu a:hover,
.compartir-menu a:focus-visible,
.compartir-menu button:hover,
.compartir-menu button:focus-visible {
  background-color: #f3f5f8;
}
.compartir-menu .icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 18px;
  color: #5c6368;
}

/* EL VISOR DE FOTOS DE LA FICHA (SUP-841, `VisorFotos.tsx`). Un <dialog> modal a pantalla completa: arriba cuál
 * es de cuántas y la X, en el medio la foto entera (lo más grande que entre, sin recortar) con las flechas a los
 * costados, y abajo las miniaturas. Mientras está abierto, la página de atrás no se mueve. En el celular las
 * flechas van sobre la foto, y con el celular acostado (poco alto) las miniaturas no entran y se esconden: se
 * pasa deslizando.
 *
 * Lo que abre el visor lleva el cursor de la lupa. «Ver las N fotos» va sobre la galería, abajo a la derecha,
 * en la Fila y el Mosaico cuando tienen más fotos de las que muestran. */
[data-visor] {
  cursor: zoom-in;
}
.flat-gallery-single {
  position: relative;
}
button.ver-todas-las-fotos {
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background-color: #fff;
  color: #161e2d;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(22, 30, 45, 0.18);
  cursor: pointer;
}
button.ver-todas-las-fotos:hover {
  background-color: #f3f5f8;
}
html:has(dialog.visor-fotos[open]) {
  overflow: hidden;
}
dialog.visor-fotos {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: #0b0d12;
  color: #fff;
  font-family: var(--nido-fuente, Manrope), sans-serif;
}
dialog.visor-fotos[open] {
  display: flex;
  flex-direction: column;
}
dialog.visor-fotos:focus {
  outline: none;
}
dialog.visor-fotos::backdrop {
  background-color: #0b0d12;
}
.visor-fotos button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.visor-fotos button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.visor-barra {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 20px;
}
.visor-cuenta {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.visor-fotos .visor-cerrar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.visor-fotos .visor-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.visor-escenario {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.visor-escenario > img {
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 160px);
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
.visor-fotos .visor-flecha {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
}
.visor-fotos .visor-flecha:hover {
  background-color: rgba(255, 255, 255, 0.24);
}
.visor-flecha.anterior {
  left: 16px;
}
.visor-flecha.siguiente {
  right: 16px;
}
.visor-miniaturas {
  display: flex;
  flex-shrink: 0;
  justify-content: safe center;
  gap: 8px;
  padding: 12px 16px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.visor-fotos .visor-miniaturas button {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
}
.visor-fotos .visor-miniaturas button:hover,
.visor-fotos .visor-miniaturas button[aria-current="true"] {
  opacity: 1;
}
.visor-fotos .visor-miniaturas button[aria-current="true"] {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.visor-miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .visor-escenario > img {
    left: 0;
    width: 100%;
  }
  .visor-fotos .visor-flecha {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.45);
  }
  .visor-flecha.anterior {
    left: 8px;
  }
  .visor-flecha.siguiente {
    right: 8px;
  }
  .visor-miniaturas {
    padding: 8px 12px 12px;
  }
  .visor-fotos .visor-miniaturas button {
    width: 64px;
    height: 48px;
  }
}
@media (max-height: 500px) {
  .visor-miniaturas {
    display: none;
  }
}

/* LAS TARJETAS DE PROPIEDADES, PAREJAS (SUP-538), en la portada, el listado y el 404 (`TarjetaPropiedad`). El
 * template dibuja la foto con su alto natural: una vertical de celular estiraba la tarjeta y la grilla quedaba
 * despareja. El marco tiene medida fija —4:3, la de una foto apaisada de celular— y la foto se recorta al centro;
 * sin foto, el mismo lugar en gris. En la vista de lista el template ya recorta la foto al alto de la tarjeta: ahí
 * sólo se saca la foto del cálculo del alto, para que una vertical no la estire. */
.homelengo-box:not(.list-style-1) .images-style {
  aspect-ratio: 4 / 3;
}
.homelengo-box .images-style > img,
.homelengo-box .images-style > .sin-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.homelengo-box .images-style > img {
  object-fit: cover;
  object-position: center;
}
.homelengo-box .images-style > .sin-foto {
  background-color: #f2f4f7;
}
/* En el celular la lista se apila (el template la pasa a `display: block`) y la foto ya no tiene de dónde sacar
 * el alto: lleva el mismo marco que en la grilla. */
@media only screen and (max-width: 575px) {
  .homelengo-box.list-style-1 .images-style {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* En la grilla, las de una misma fila tienen el mismo alto (la columna es `d-flex`), y la línea de arriba del
 * precio queda a la misma altura en todas: una sin dormitorios ni precio ya no queda más baja que sus vecinas. */
.homelengo-box:not(.list-style-1) {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.homelengo-box:not(.list-style-1) .archive-bottom {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.homelengo-box:not(.list-style-1) .content-top {
  flex-grow: 1;
}

/* "Buscá por tipo" (SUP-538): separación entre filas, que el template no trae (lo pensó para una sola fila), y
 * todas las cajas iguales. El nombre de un tipo ocupa una o dos líneas ("Local comercial", "Depósito o galpón"):
 * se le reservan siempre dos, con el nombre centrado, y la caja llena su columna. */
.flat-categories .row {
  row-gap: 24px;
}
.flat-categories .row > * {
  display: flex;
}
.flat-categories .homelengo-categories {
  width: 100%;
}
.flat-categories .homelengo-categories .content h6 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50.4px; /* dos líneas de h6 del bundle: 18 px de 25,2 */
}
@media only screen and (max-width: 991px) {
  .flat-categories .homelengo-categories .content h6 {
    min-height: 46.4px; /* 16 px de 23,2 */
  }
}

/* "Buscá por zona" (SUP-759): de 992 px para arriba la fila se pasaba 5 px de cada lado, y la página se corría de
 * costado con una barra horizontal abajo. El template pisa a Bootstrap con filas de -15 px de margen y columnas de
 * 15 px de relleno (el `g-2` no cambia nada), pensadas para un contenedor de 15 px; esta sección tiene 10 (`px-10`,
 * el relleno de su carrusel en el template), y sólo en el celular le da 15. Lo que se pasa es el relleno vacío de
 * las columnas de las puntas: se recorta, y las tarjetas quedan donde estaban, a 10 px del borde. Achicar el margen
 * de la fila las corría. `clip` y no `hidden`: no la vuelve una caja con scroll. */
.flat-location {
  overflow-x: clip;
}

/* El orden del listado ("Destacadas primero", SUP-538): el template le da 18 px de relleno a la derecha y la flecha
 * va justo ahí, encima del final del texto. */
.box-title-listing .box-filter-tab .nice-select {
  padding-right: 44px;
}

/* EL PIE, DEL COLOR DE LA INMOBILIARIA (SUP-540). El template lo deja en su azul oscuro (#161e2d) aunque la
 * inmobiliaria haya elegido su color. `--nido-pie` es ese color, oscurecido sólo lo necesario para que el gris
 * del pie se lea (`fondoDelPie` en tema.ts); sin color elegido no se define y queda el del template. Al pasar el
 * mouse, los enlaces y las redes del pie se pintaban del color de marca: sobre un pie de ese mismo color no se
 * verían, así que pasan a blanco. */
.footer {
  background-color: var(--nido-pie, #161e2d);
}
.footer .navigation-menu-footer li a:hover,
.footer .content-footer-bottom .menu-bottom a:hover {
  color: #fff;
}
.footer .navigation-menu-footer li a:after {
  background: #fff;
}
.footer .box-icon.social:hover {
  background-color: #fff;
  border-color: #fff;
}
.footer .box-icon.social:hover .icon {
  color: var(--nido-pie, #161e2d);
}

/* LA PORTADA «MAPA» CON PESTAÑAS (SUP-540). En el template la caja de búsqueda (una píldora) sube 48 px y queda
 * montada sobre el borde del mapa. Acá lleva arriba las pestañas Alquiler / Venta (56 px), que se comían esa subida:
 * la caja quedaba debajo del mapa, separada, y las pestañas arrancaban en la esquina, por fuera de la curva.
 *
 * Desde 1200 px, donde la caja es una píldora, sube los 48 del template más las pestañas, que arrancan donde
 * termina la curva. Ahí la caja tapa la franja de abajo del mapa, que es donde Google pone su logo y sus términos, y
 * Google no deja taparlos: se suben por encima de la caja. Esos dos bloques no tienen clase; son los únicos hijos de
 * segundo nivel de `.gm-style` pegados abajo. Si Google cambia ese armado, vuelven a quedar debajo de la caja, como
 * en el template. El zoom lo saca de la esquina `MapaListado` (`tapadoAbajo`).
 *
 * Abajo de 1200 px la caja es una tarjeta del ancho de la pantalla y montarla taparía el logo con las pestañas: va
 * pegada al borde del mapa, sin subirse. */
.flat-map .flat-tab-form .nav-tab-form.style-2 {
  padding-left: 20px;
}
@media (min-width: 1200px) {
  .flat-map .wrap-filter-search {
    margin-top: -104px;
  }
  .flat-map .flat-tab-form .nav-tab-form.style-2 {
    padding-left: 48px;
  }
  .flat-map .top-map .gm-style > div > div[style*="bottom: 0px"] {
    bottom: 56px !important;
  }
}
@media (max-width: 1199px) {
  .flat-map .wrap-filter-search {
    margin-top: 0;
  }
}

/* EL ALTO DEL MAPA DE LA PORTADA «MAPA» Y DEL LISTADO «MAPA ARRIBA» (SUP-756). El template le da 800 px fijos (500
 * abajo de 992 px), y con el menú (78 px) hacen falta 900 px de ventana para ver lo que sigue: en una notebook de 14"
 * el mapa llenaba la pantalla, y el buscador de la portada o la lista del listado quedaban abajo, sin verse. Ahora el
 * mapa mide lo que deja la ventana después del menú y de lo que tiene que asomar debajo, y nunca más que en el
 * template. La primera línea de cada regla es para los navegadores sin `svh`.
 *
 * En el listado, desde 992 px, asoman 172 px: los 100 de relleno de la sección y el título de los resultados. En el
 * celular, la caja de la portada es más alta que lo que sobra: tienen que verse las pestañas y el primer campo (140), y
 * así queda lugar para bajar por la página con el dedo, que sobre el mapa lo mueve (SUP-541).
 *
 * En la portada, desde 992 px, la caja entera termina por encima de la burbuja del chat (SUP-758), que va fija abajo a
 * la derecha (24 px del borde, 56 de alto desde SUP-762, ver chat-del-sitio.tsx): si no, la burbuja le tapa el botón
 * «Buscar». Se reservan 96 px abajo: la burbuja, 12 de aire y 4 de sobra. El aviso de que contestaron (SUP-762) sí tapa
 * la caja un rato: se cierra con su cruz. Vale aunque el sitio no tenga chat: la burbuja aparece recién cuando el
 * navegador sabe que hay asistente, y el mapa no puede cambiar de alto después de cargar. Entre 992 y 1199 la caja va
 * debajo del mapa (148 a 1100 px; a 1024 se arma más alta y entra como en el celular). Desde 1200 sube 104 de sus 148 a
 * 157 (según hayan cargado las fuentes) y asoma hasta 53 debajo del mapa. */
.flat-map .top-map {
  height: clamp(280px, calc(100vh - 218px), 500px);
  height: clamp(280px, calc(100svh - 218px), 500px);
}
@media (min-width: 992px) {
  .flat-map .top-map {
    height: clamp(320px, calc(100vh - 250px), 800px);
    height: clamp(320px, calc(100svh - 250px), 800px);
  }
  .flat-map:has(.wrap-filter-search) .top-map {
    height: clamp(320px, calc(100vh - 322px), 800px);
    height: clamp(320px, calc(100svh - 322px), 800px);
  }
}
@media (min-width: 1200px) {
  .flat-map:has(.wrap-filter-search) .top-map {
    height: clamp(360px, calc(100vh - 230px), 800px);
    height: clamp(360px, calc(100svh - 230px), 800px);
  }
}

/* LA FICHITA DE UNA PROPIEDAD EN EL MAPA (SUP-541), al tocar su pin en la portada «Mapa» o en un listado con mapa
 * (`fichaEnElMapa` en Mapa.tsx). Es la `.map-listing-item` del template: foto cuadrada a la izquierda, ubicación,
 * título, datos y precio; el bundle recortado no la trae. Va adentro de la burbuja de Google, que ya pone el fondo
 * blanco, el borde redondeado y la cruz de cerrar: acá no se repiten. */
.ficha-mapa {
  display: flex;
  gap: 14px;
  width: min(340px, 68vw);
  font-family: var(--nido-fuente, Manrope), sans-serif;
  color: #161e2d;
}
.ficha-mapa-foto {
  flex-shrink: 0;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f2f4f7;
}
.ficha-mapa-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ficha-mapa-texto {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ficha-mapa-ubicacion {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #5c6368;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ficha-mapa-titulo {
  font-family: var(--nido-fuente-titulo, var(--nido-fuente, Manrope)), sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: #161e2d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ficha-mapa-titulo:hover {
  color: var(--nido-primario, #1563df);
}
.ficha-mapa-datos {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #5c6368;
}
.ficha-mapa-pie {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #e4e4e4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ficha-mapa-operacion {
  font-size: 13px;
  color: #5c6368;
}
.ficha-mapa-precio {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .ficha-mapa-foto {
    width: 128px;
    height: 128px;
  }
}
/* En el celular Google angosta la burbuja (en 375 px, 249 de ancho con 219 para el contenido): la foto va arriba y la
 * ficha ocupa lo que queda, sin scroll de costado adentro de la burbuja. */
@media (max-width: 575px) {
  .ficha-mapa {
    flex-direction: column;
    gap: 10px;
    width: min(300px, calc(100vw - 160px));
  }
  .ficha-mapa-foto {
    width: 100%;
    height: 110px;
  }
}

/* La tarjeta del listado cuya propiedad se tocó en el mapa (SUP-541): un borde del color de la inmobiliaria. */
.homelengo-box.resaltada {
  box-shadow: 0 0 0 3px var(--nido-primario, #1563df);
  transition: box-shadow 0.3s ease;
}

/* El aviso del buscador de la portada cuando la pestaña elegida no tiene propiedades (SUP-542): va en el lugar de
 * los campos, del mismo alto, centrado y con la letra de los valores de los campos. */
.wd-find-select .inner-group.buscador-sin-propiedades {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-grow: 1;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #161e2d;
}

/* Los filtros que trae "Ver las 85" del chatbot y el panel no tiene (SUP-551): una calle, "cerca de", una
 * superficie, características. Debajo del total del listado, como etiquetas que se sacan con un toque. */
.box-title-listing .filtros-del-chat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.box-title-listing .filtro-del-chat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--nido-primario, #1563df);
  border-radius: 999px;
  color: var(--nido-primario, #1563df);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
}
.box-title-listing .filtro-del-chat:hover {
  background: var(--nido-primario, #1563df);
  color: var(--nido-primario-texto, #fff);
}

/* «Más filtros» de la barra del listado «Mapa al costado» (SUP-695), el desplegable de Properties1. El template
 * separa los renglones de comodidades con un `mt-16` salteado (cuenta con una lista fija de 24); acá son las que
 * tenga la inmobiliaria, así que el espacio va en la grilla. Y el precio lleva moneda, desde y hasta en un renglón:
 * en tres columnas iguales «Cualquier moneda» no entra. */
.flat-filter-search-v2 .wd-search-form .group-amenities {
  gap: 12px 20px;
}
.flat-filter-search-v2 .wd-search-form .group-select.grid-3 {
  grid-template-columns: minmax(170px, 1.6fr) 1fr 1fr;
  gap: 12px;
}

/* Las pestañas de esa barra en el celular (SUP-695): el template les da un mínimo de 115 px, y tres no entran en
 * 375 px (la última quedaba cortada). Se reparten el ancho, y si hay cuatro (con Temporada) bajan a otro renglón. */
@media (max-width: 575px) {
  .flat-filter-search-v2 .flat-tab-form .nav-tab-form {
    flex-wrap: wrap;
  }
  .flat-filter-search-v2 .flat-tab-form .nav-tab-form .nav-tab-item {
    flex: 1 1 auto;
  }
  .flat-filter-search-v2 .flat-tab-form .nav-tab-form .nav-link-item {
    display: block;
    min-width: 0;
    padding: 14px 16px;
    text-align: center;
  }
  /* La moneda arriba, y desde y hasta abajo, a medias: en un renglón no entraban ni dos cifras. */
  .flat-filter-search-v2 .wd-search-form .group-select.grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .flat-filter-search-v2 .wd-search-form .group-select.grid-3 > :first-child {
    grid-column: 1 / -1;
  }
}

/* Las mismas pestañas en una notebook (SUP-879): entre 1301 y 1440 px van en un renglón con el formulario, y
 * encogían debajo de su mínimo con `overflow: hidden` («Venta» quedaba cortada). No se achican: se acomoda el formulario, que baja de
 * renglón. */
.flat-filter-search-v2 .flat-tab-form .nav-tab-form {
  flex-shrink: 0;
}

/* La lista y el mapa del listado «Mapa al costado» (SUP-879). El template los pone lado a lado recién desde 1441 px,
 * con la lista bajando por dentro de su columna y el mapa fijo a la ventana, así que no había lugar para el pie. Más
 * angosto —cualquier notebook— apilaba la lista a todo el ancho y el mapa al final, después de todas las propiedades.
 * Ahora la página baja entera, como las demás, y termina con el pie:
 *   - desde 1200 px el mapa va al costado y se queda a la vista mientras se baja: `sticky` debajo del encabezado,
 *     que mide 78 px y también es `sticky`;
 *   - más angosto va arriba de la lista, del alto del de «Mapa arriba» (`.flat-map .top-map`, más arriba), salvo en
 *     el celular.
 * Las columnas de las tarjetas van en `listados.tsx`. */
.wrapper-layout.layout-2 {
  display: flex;
  flex-direction: column;
}
.wrapper-layout.layout-2 .wrap-left {
  width: 100% !important;
  height: auto !important;
  overflow: visible;
}
.wrapper-layout.layout-2 .wrap-right {
  order: -1;
  position: relative;
  width: 100% !important;
  /* En el celular, más bajo que el de «Mapa arriba»: abajo del buscador, uno de 500 px dejaba la primera
   * propiedad a más de una pantalla y media. */
  height: clamp(240px, 40svh, 340px) !important;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .wrapper-layout.layout-2 .wrap-right {
    height: clamp(280px, -218px + 100svh, 500px) !important;
  }
}
@media (min-width: 992px) {
  .wrapper-layout.layout-2 .wrap-right {
    height: clamp(320px, -250px + 100svh, 800px) !important;
  }
}
@media (min-width: 1200px) {
  .wrapper-layout.layout-2 {
    flex-direction: row;
    align-items: flex-start;
  }
  .wrapper-layout.layout-2 .wrap-left {
    width: 55% !important;
    padding-bottom: 60px;
  }
  /* Sin propiedades con coordenadas no hay mapa (`hayMapa`): la lista ocupa todo. */
  .wrapper-layout.layout-2 .wrap-left:only-child {
    width: 100% !important;
  }
  /* Las tarjetas son `col-md-6 col-lg-4` (tres por renglón con el mapa arriba): al lado del mapa, dos. */
  .wrapper-layout.layout-2 .wrap-left:not(:only-child) .row > .col-lg-4 {
    width: 50%;
  }
  .wrapper-layout.layout-2 .wrap-right {
    order: 0;
    position: sticky;
    top: 78px;
    bottom: auto;
    width: 45% !important;
    height: calc(100svh - 78px) !important;
    margin-bottom: 0;
  }
}
@media (min-width: 1441px) {
  .wrapper-layout.layout-2 .wrap-left {
    width: 46% !important;
  }
  .wrapper-layout.layout-2 .wrap-right {
    width: 54% !important;
  }
  /* Sin mapa, a todo el ancho de una pantalla grande, de a cuatro. */
  .wrapper-layout.layout-2 .wrap-left:only-child .row > .col-lg-4 {
    width: 25%;
  }
}

/* "Esta inmobiliaria utiliza El Supremo", en la barra de abajo del pie (SUP-828): con la letra y el gris del
 * copyright, y la marca en blanco, que es su tinta sobre fondo oscuro. Chico: no le compite al logo de la agencia. */
.footer .content-footer-bottom .credito-el-supremo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a3abb0;
  font-size: 14px;
  line-height: 22px;
}
.footer .content-footer-bottom .credito-el-supremo a {
  display: inline-flex;
}
.footer .content-footer-bottom .credito-el-supremo a:hover {
  opacity: 0.8;
}

/* El Tipo de los dos buscadores deja tildar varios (SUP-919): la casilla al lado de cada opción, no encima,
 * y sin la negrita de "elegida" del combo de uno solo, que con varias tildadas confunde más que ayuda. */
.nice-select.nice-select-multiple .option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nice-select.nice-select-multiple .option .tf-checkbox {
  flex: none;
  margin: 0;
  pointer-events: none;
}
.nice-select.nice-select-multiple .option.selected {
  font-weight: 500;
}
.nice-select.nice-select-multiple .current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
