/* 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;
  }
}

/* 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 */
  }
}

/* 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;
  }
}

/* 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;
  }
}