/* El sitio publico de cada inmobiliaria. Todo el color sale de las variables --pub-* que el
   layout emite desde el tema de Estilos: esta hoja no conoce ningun color en particular. */

body.cuerpoPublico {
    margin: 0;
    background: #fff;
    font-family: "Open Sans", "Segoe UI", sans-serif;
    color: #333;
}

.gtmOculto { display: none; visibility: hidden; }

h1, h2, h3, .tituloDeSeccionPublica { font-family: var(--pub-fuente-titulos); }

/* Los enlaces que son solo un icono -las redes de arriba y del pie, el compartir de cada tarjeta y
   el boton flotante de WhatsApp- no llevan el subrayado que el navegador le pone a todo enlace:
   sin texto al lado, queda una rayita suelta debajo del icono. El sitio de siempre no la tiene. */
.redesSuperior a,
.redesDelPie a,
.compartirTarjeta a,
.whatsappFlotante { text-decoration: none; }

/* ------------------------- barra superior ------------------------- */
.barraSuperior {
    background: var(--pub-barra-fondo);
    color: var(--pub-barra-fuente);
}

/* El logo a la izquierda y todo lo demas apilado a la derecha, como el sitio de siempre. */
.barraSuperiorGrilla {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-top: 15px;
    padding-bottom: 8px;
}

.logoDelSitio { margin-left: 30px; }
.logoDelSitio img { max-height: 150px; max-width: 420px; object-fit: contain; display: block; }

.ladoDerechoSuperior {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 10px;
    text-align: right;
}

/* Los datos de contacto: whatsapp, telefono y celular en negrita en un renglon, y Escribinos
   mas chico y apagado en el siguiente. */
.datosSuperiores {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 14px;
    row-gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
}
.datosSuperiores li { white-space: nowrap; }
.datosSuperiores a { color: inherit; text-decoration: none; }
.datosSuperiores a:hover { text-decoration: underline; }
.datosSuperiores .fa-whatsapp { color: #25d366; font-size: 17px; }
.datosSuperiores .fa-mobile-alt { font-size: 22px; vertical-align: -3px; }
.datosSuperiores .contactoSecundario { flex-basis: 100%; font-size: 13.5px; opacity: .75; }

/* Las redes y el traductor en un mismo renglon. */
.redesEIdioma { display: flex; align-items: flex-start; gap: 10px; }
.redesEIdioma .redesSuperior { margin-top: 1px; }
.redesSuperior { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.redesSuperior li { padding-right: 10px; }
.redesSuperior a { color: var(--pub-barra-fuente); font-size: 20px; }
.redesSuperior a:hover { color: var(--pub-barra-fuente); opacity: .5; }

/* El traductor de Google como la pildora de siempre: borde redondeado del color de la fuente de
   la barra, el icono propio y el texto chico. El widget trae sus colores e icono en estilos en
   linea, por eso los !important. */
#google_translate_element .goog-te-gadget-simple {
    display: inline-flex;
    align-items: center;
    height: 33px;
    background: transparent;
    border: 2px solid var(--pub-barra-fuente);
    border-radius: 20px;
    padding: 0 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
}
#google_translate_element .goog-te-gadget-simple span {
    color: var(--pub-barra-fuente) !important;
    border-color: var(--pub-barra-fuente) !important;
    font-size: 13px;
    font-weight: 400;
}
#google_translate_element .goog-te-gadget-icon {
    width: 27px;
    height: 27px;
    margin-right: 8px;
    background-image: url(https://imagenes.inmobiliaticaweb.com/imagenes-propiedades/Content/Adm/imgs/g-translate.png) !important;
    background-position: 0 0 !important;
    background-size: 27px;
}

/* El logo centrado: la variante de Estilos que parte la barra en tres. */
.barraSuperior.conLogoCentrado .barraSuperiorGrilla { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.barraSuperior.conLogoCentrado .logoDelSitio { grid-column: 2; justify-self: center; margin-left: 0; }
.barraSuperior.conLogoCentrado .ladoDerechoSuperior { display: contents; }
.barraSuperior.conLogoCentrado .datosSuperiores { grid-column: 1; grid-row: 1; justify-content: flex-start; text-align: left; }
.barraSuperior.conLogoCentrado .redesEIdioma { grid-column: 3; justify-self: end; }

/* ------------------------- menu principal ------------------------- */
/* El menu comparte el fondo de la barra superior, como el sitio de siempre. */
.menuPrincipal { background: var(--pub-barra-fondo); }

.listaDelMenu { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.listaDelMenu > .nav-item > .nav-link {
    color: var(--pub-menu-fuente);
    font-weight: 400;
    font-size: 17px;
    line-height: 50px;
    padding: 0 8px;
}
.listaDelMenu > .nav-item > .nav-link:hover, .listaDelMenu > .nav-item > .nav-link:focus {
    color: var(--pub-menu-hover);
    background: var(--pub-menu-hover-fondo);
}
/* La flechita de las opciones con submenu, pegada a la derecha como la de siempre. */
.listaDelMenu > .nav-item > .dropdown-toggle { padding-right: 20px; }
.listaDelMenu > .nav-item > .dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #666;
    border: 0;
    margin: 0;
    position: absolute;
    top: 0;
    right: 6px;
}

.submenuDelSitio {
    background: var(--pub-submenu-fondo);
    border-radius: 0;
    border: 0;
    margin-top: 0;
    padding: 0;
    min-width: 100%;
    font-size: 15px;
}
.submenuDelSitio .dropdown-item { color: var(--pub-submenu-fuente); padding: 0 20px; line-height: 34px; white-space: nowrap; }
.submenuDelSitio .dropdown-item:hover { color: var(--pub-submenu-hover); background: var(--pub-menu-hover-fondo); }

/* En escritorio el submenu abre al pasar el mouse, como siempre. */
@media (min-width: 992px) {
    .listaDelMenu .dropdown:hover > .dropdown-menu { display: block; }
    .botonMenuPublico, .rotuloDelMenuMovil { display: none; }
}

.botonMenuPublico {
    color: var(--pub-boton-fuente);
    border: 0;
    font-weight: 700;
    padding: 12px 16px;
}

/* De 992 para abajo, el menu del celular es el del sitio de siempre: la palabra MENU centrada
   sobre la barra, el boton redondo a la derecha con las tres rayas blancas, y al abrirse las rayas
   se vuelven una cruz en 0.3s. Los items van uno por renglon, centrados y separados por una rayita
   blanca al 50%. Todas las medidas salen de medir www.acamporayasoc.com a 390. */
@media (max-width: 991.98px) {
    .menuPrincipal .navbar { position: relative; min-height: 45px; }
    .rotuloDelMenuMovil {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        line-height: 45px;
        color: var(--pub-boton-fuente);
        font-size: 18px;
        font-weight: 700;
        pointer-events: none;
    }
    .botonMenuPublico {
        position: relative;
        margin-left: auto;
        width: 50px;
        height: 45px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
    }
    .botonMenuPublico:focus { box-shadow: none; }
    /* Las tres rayas: la del medio es el icono y las otras dos sus pseudo-elementos. */
    .iconoDelMenuMovil,
    .iconoDelMenuMovil::before,
    .iconoDelMenuMovil::after {
        position: absolute;
        width: 25px;
        height: 2px;
        border-radius: 4px;
        background: var(--pub-boton-fuente);
    }
    .iconoDelMenuMovil { top: calc(50% - 2px); left: calc(50% - 15px); }
    .iconoDelMenuMovil::before, .iconoDelMenuMovil::after { content: ""; left: 0; }
    .iconoDelMenuMovil::before { bottom: 8px; }
    .iconoDelMenuMovil::after { top: 8px; }
    .iconoDelMenuMovil, .iconoDelMenuMovil::after { transition: all .3s linear; }
    /* Abierto: la del medio gira -45, la de abajo se para y la de arriba se achica hasta nada. */
    .botonMenuPublico[aria-expanded="true"] .iconoDelMenuMovil { width: 30px; height: 5px; transform: rotate(-45deg); }
    .botonMenuPublico[aria-expanded="true"] .iconoDelMenuMovil::after { width: 30px; height: 5px; top: 0; transform: rotate(-270deg); }
    .botonMenuPublico[aria-expanded="true"] .iconoDelMenuMovil::before { transform: scale(0); }

    .listaDelMenu { justify-content: center; }
    .listaDelMenu > .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
    }
    .listaDelMenu > .nav-item > .nav-link { color: var(--pub-boton-fuente); font-size: 20px; line-height: 20px; padding: 10px 15px; }
    .submenuDelSitio { background: transparent; text-align: center; }
    .submenuDelSitio .dropdown-item { color: var(--pub-boton-fuente); }
    /* El traductor va como un item mas al pie de la lista, como alla. */
    .traductorEnElMenu { display: flex; justify-content: center; padding: 8px 0; }
}

/* ------------------------- banner y cuerpo ------------------------- */
.bannerDeSeccion { position: relative; }
.bannerDeSeccion img { width: 100%; max-height: 340px; object-fit: cover; display: block; }

/* ------------------------- el buscador ------------------------- */
/* En las secciones va en una franja con la pestaña "Buscador" asomando arriba; las dos llevan el
   fondo interno del buscador que la inmobiliaria eligio en Estilos (asi lo usaba el sitio de
   siempre). Montado sobre el banner o el hero, el fondo es el traslucido. */
/* Suelto debajo del menu -o sea, en una seccion de una inmobiliaria que no cargo imagen de
   encabezado- la franja arranca pegada al menu, sin nada de blanco en el medio. El margen es
   justo los 30px que la pestaña se sube con su margen negativo: se cancelan y la franja queda a
   la altura exacta del borde de abajo del menu. Con imagen de encabezado no cambia nada, porque
   ahi la franja va montada sobre el banner y este margen no corre. */
.buscadorPublico { background: var(--pub-buscador-interno); padding: 0 0 15px; margin-top: 30px; }
.bannerDeSeccion .buscadorPublico { margin-top: 0; }
body.conHeroFull .sobreElEncabezado .buscadorPublico { margin-top: 0; }
.buscadorPublico .tituloDelBuscador {
    display: block;
    width: fit-content;
    min-width: 110px;
    height: 30px;
    line-height: 30px;
    margin-top: -30px;
    padding: 0 10px;
    text-align: center;
    font-size: 14px;
    background: var(--pub-buscador-interno);
    color: var(--pub-buscador-fuente);
}

.bannerDeSeccion .buscadorPublico { position: absolute; left: 0; right: 0; bottom: 0; }
.bannerDeSeccion .buscadorPublico, .bannerDeSeccion .tituloDelBuscador { background: var(--pub-buscador-fondo); }

/* Los campos siempre blancos, chicos y en un solo renglon en escritorio, como los de siempre. */
.camposDelBuscador { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.camposDelBuscador .form-select, .camposDelBuscador .form-control {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 5px;
    background-color: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    font-size: 13px;
}
.camposDelBuscador .form-select { appearance: auto; background-image: none; }
.camposDelBuscador .angosto { flex: 0 0 90px; }
.camposDelBuscador ::placeholder { color: #999; opacity: 1; }

.botonDelBuscador {
    flex: 0 0 auto;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    font-size: 17px;
    background: var(--pub-boton-fondo);
    color: var(--pub-boton-fuente);
}
.botonDelBuscador:hover { color: var(--pub-boton-fuente); filter: brightness(1.15); }
#botonBuscar { min-width: 85px; }
.botonMasOpciones, .botonMasOpciones:hover { width: 30px; padding: 0; background: #fff; color: #1f1f1f; }

/* De 992 para abajo el buscador se arma como alla: dos campos por renglon, cada uno a la mitad,
   el boton de mas opciones al lado de Moneda y Buscar ocupando el renglon entero. Medido en
   www.acamporayasoc.com a 390: campos de 153x34 en celdas de 173, y 44 de un renglon al otro. */
@media (max-width: 991.98px) {
    .camposDelBuscador { gap: 10px 7px; }
    .camposDelBuscador .form-select,
    .camposDelBuscador .form-control,
    .camposDelBuscador .angosto { flex: 0 0 calc(50% - 3.5px); }
    .botonMasOpciones, .botonMasOpciones:hover { flex: 0 0 30px; }
    #botonBuscar { flex: 0 0 100%; }
    /* Los campos arrancan a 17 del borde, como alla, no metidos por el relleno del container. */
    .buscadorPublico > .container { padding-left: 17px; padding-right: 17px; }
}
@media (min-width: 1200px) {
    .camposDelBuscador { flex-wrap: nowrap; }
}

.masOpcionesDelBuscador {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 10px;
    background: #fff;
    color: #333;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px 12px;
}
.masOpcionesDelBuscador label { display: flex; align-items: center; gap: 6px; margin: 0; }
.masOpcionesDelBuscador .form-select { max-width: 160px; font-size: 13px; }

@media (max-width: 991.98px) {
    .bannerDeSeccion .buscadorPublico { position: static; background: var(--pub-buscador-interno); }
}

.cuerpoDeSeccion { padding-top: 30px; padding-bottom: 40px; }

/* El titulo de seccion del sitio de siempre: gris, en mayusculas, con las lineas al costado.
   Los 24px son los del viejo, medidos en propiedades destacadas, tasaciones, quienes somos y
   contacto: alla todos estos titulos miden lo mismo, y es tambien el tamaño del titulo de los
   tipos populares, asi que los dos de la portada quedan parejos. */
.tituloDeSeccionPublica {
    display: flex;
    align-items: center;
    /* 20 a cada lado del texto: alla la palabra va sobre la linea, tapandola con un fondo del
       color de la seccion y 20 de relleno. El hueco que queda a la vista es el mismo. */
    gap: 20px;
    /* La linea llega hasta el ancho del contenido, no hasta el borde de la pantalla: en el viejo
       mide 1170 y arranca donde arranca todo lo demas. */
    max-width: 1170px;
    /* 70 arriba y 40 abajo, el aire que el viejo deja entre una seccion y la siguiente. */
    margin: 70px auto 40px;
    padding: 0 15px;
    color: #999;
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
}
.tituloDeSeccionPublica::before, .tituloDeSeccionPublica::after {
    content: "";
    flex: 1;
    border-top: 2px solid #e6e6e6;
}
/* La palabra de la operacion va en negrita y en el mismo gris, como alla: el navegador la pondria
   en 900 sobre el 400 del titulo. */
.tituloDeSeccionPublica b { font-weight: 700; color: inherit; }
/* En el celular el titulo se arma como alla: un bloque centrado con la linea cruzando por detras
   y la palabra tapandola con un fondo del color de la seccion. Medido en www.acamporayasoc.com a
   390: titulo de 18 con renglon de 26 y sin espaciado entre letras, la palabra con 5 y 20 de
   relleno, la linea de 2px #e6e6e6 de punta a punta, y la operacion en 26, en 700 y en
   rgba(0,0,0,0.7), en su propio renglon. */
@media (max-width: 991.98px) {
    .tituloDeSeccionPublica {
        display: block;
        position: relative;
        max-width: none;
        padding: 0;
        /* Alla estos titulos van con la fuente del cuerpo, no con la de titulos del tema. */
        font-family: inherit;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: normal;
    }
    .tituloDeSeccionPublica::before {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 2px solid #e6e6e6;
    }
    .tituloDeSeccionPublica::after { display: none; }
    .tituloDeSeccionPublica > span {
        position: relative;
        display: inline-table;
        background: #fff;
        padding: 5px 20px;
    }
    .tituloDeSeccionPublica b { display: block; font-size: 26px; color: rgba(0, 0, 0, .7); }
    /* Los que van sobre una franja de color llevan ese color detras de la palabra. */
    .tituloSobreFranja > span { background: #f0f0f0; }
    .tituloSobreGris > span { background: #f5f5f5; }
}
.lineaDeTitulo { display: none; }

/* ------------------------- quienes somos ------------------------- */
.imagenQuienesSomos { text-align: center; }
.imagenQuienesSomos img { max-width: 100%; border-radius: 4px; }

.textoQuienesSomos { max-width: 900px; margin: 20px auto; line-height: 1.7; white-space: pre-line; }

.equipoDelSitio { margin: 40px 0; text-align: center; }
.equipoDelSitio h2 { font-size: 26px; }
.equipoDelSitio h4 { font-weight: 400; color: #666; font-size: 17px; margin-bottom: 26px; }

.grillaDeFichas { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

.fichaDePersona {
    background: #e8e8e8;
    border-radius: 10px;
    padding: 18px 22px;
    width: 240px;
    text-align: center;
}
.fichaDePersona img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.fichaDePersona .nombreDePersona { font-weight: 700; margin-top: 10px; }
.fichaDePersona .cargoDePersona { color: #555; font-size: 14px; }
.fichaDePersona .btn {
    display: block;
    margin-top: 8px;
    background: var(--pub-boton-fondo);
    color: var(--pub-boton-fuente);
    font-size: 13px;
}
/* El de WhatsApp va verde, como alla: el mismo #25d366 del icono de la barra de arriba. El de
   Email se queda con el color del tema; alla es un gris #717171. */
.fichaDePersona .botonWhatsappDePersona { background: #25d366; color: #fff; }

/* ------------------------- la portada ------------------------- */
.encabezadoDePortada { position: relative; }
/* Solo las imagenes de LOS SLIDERS: la destacada principal tambien es un carrusel y vive
   adentro del encabezado, con su propio tamano. */
/* El encabezado clasico, el de las inmobiliarias que no usan pantalla completa. Todo esto esta
   medido sobre el sitio de siempre: el slider mide 660, la destacada es una caja ancha y bien
   redondeada apoyada encima, y el buscador es una franja traslucida de ancho completo pegada al
   pie del slider, con la pestaña asomando arriba. */
/* La foto del slider va a su tamaño natural con dos minimos, los del sitio de siempre: 1920 de
   ancho y 484 de alto. El encabezado recorta lo que sobra. Por eso el alto del encabezado no es
   fijo y cambia de una inmobiliaria a otra: lo da la foto que subio cada una. */
.encabezadoDePortada { overflow: hidden; }
.sliderEscritorio .carousel-item img, .sliderMovil .carousel-item img {
    width: 1920px;
    height: auto;
    min-height: 484px;
    display: block;
}
.sliderMovil { display: none; }

.sobreElEncabezado {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* La franja y la pestaña comparten el traslucido que la inmobiliaria eligio en Estilos. El margen
   de 30 compensa el que la pestaña se sube con su margen negativo: sin el, la pestaña se mete
   dentro de la destacada en vez de quedar debajo. */
.sobreElEncabezado .buscadorPublico { background: var(--pub-buscador-fondo); padding: 0 0 15px; margin-top: 30px; }
.sobreElEncabezado .tituloDelBuscador { background: var(--pub-buscador-fondo); }
/* El buscador se alinea con la destacada y con el resto del contenido, no con el container ancho. */
.sobreElEncabezado .buscadorPublico > .container { max-width: 1140px; }

.destacadaPrincipal { max-width: 1140px; margin: 0 auto; width: 100%; }
.tarjetaDestacadaPrincipal {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--pub-destacada-fondo);
    color: var(--pub-destacada-fuente);
    border-radius: 20px;
    padding: 20px 22px;
    text-decoration: none;
}
.tarjetaDestacadaPrincipal img { max-width: 506px; width: 45%; height: 290px; object-fit: cover; border-radius: 20px; }
.textoDestacadaPrincipal h2 { font-size: 30px; font-weight: 500; margin: 0 0 6px; }
/* El texto va un poco apagado respecto del titulo, como alla; se hace con opacidad para no clavar
   un gris que pelee con el color de fuente que eligio la inmobiliaria. */
.textoDestacadaPrincipal h5 { font-weight: 500; font-size: 14px; line-height: 15.4px; opacity: .87; text-align: justify; margin: 10px 0; }
.operacionDestacada { display: inline-block; background: #000; color: #fff; padding: 5px; font-size: 22px; font-weight: 700; }
.precioDestacadaPrincipal { font-size: 30px; margin-top: 10px; font-weight: 500; }

/* ------------------------- grilla de propiedades ------------------------- */
.grillaDePropiedades {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* A lo ancho, los 40 del sitio de siempre. A lo alto, 40 tambien: el viejo deja 25 y se pidio
       mas aire, que ademas le hace falta a la sombra de la tarjeta para respirar. Con estos 40 la
       tarjeta queda en unos 353 de ancho, que es el 350 del viejo. */
    gap: 40px;
    max-width: 1170px;
    margin: 0 auto 30px;
    padding: 0 15px;
}

.tarjetaDePropiedad {
    background: #fff;
    border-radius: 6px;
    /* La sombra del sitio de siempre: mas marcada y azulada, no un gris apenas visible. */
    box-shadow: 0 8px 20px rgba(0, 46, 82, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cuerpoDeTarjeta { color: inherit; text-decoration: none; display: block; flex: 1; }

.fotoDeTarjeta { position: relative; overflow: hidden; }
.fotoDeTarjeta img { width: 100%; height: 230px; object-fit: cover; display: block; }

/* ---- el juego del mouse encima de la foto, el mismo del sitio de siempre ----
   Sube desde abajo un velo negro al 60% con una lupa en el medio, y al mismo tiempo el cartel de
   la operacion se va hacia la izquierda. Los dos tardan 0,35 segundos.
   El velo NO tapa el cartel de estado ni el icono de video: alla tampoco los tapa, por eso quedan
   por encima. */
.veloDeTarjeta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    transform: translateY(100%);
    transition: transform .35s ease-out;
    z-index: 1;
}
.veloDeTarjeta i {
    background: #000;
    color: #fff;
    border-radius: 2px;
    padding: 15px 12px 12px;
    font-size: 14px;
}
.fotoDeTarjeta:hover .veloDeTarjeta { transform: translateY(0); }
.fotoDeTarjeta:hover .operacionDeTarjeta { transform: translateX(calc(-100% - 10px)); }
/* El cartel de estado -RETASADO, A ESTRENAR, DISPONIBLE, OPORTUNIDAD- es una barra de ancho
   completo con el texto centrado y en mayusculas, no una pastilla en la esquina de la foto.
   Va APOYADA sobre la foto y no empujandola hacia abajo: si empujara, la tarjeta con cartel
   arrancaria 30px mas abajo que la vecina sin cartel y las fotos de una misma fila quedarian
   desparejas. Las esquinas las redondea .tarjetaDePropiedad, que recorta con overflow. */
.estadoDeTarjeta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--pub-estado-fondo);
    color: var(--pub-estado-fuente);
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    z-index: 2;
}
.operacionDeTarjeta {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 12px;
    font-size: 14px;
    z-index: 2;
    transition: transform .35s ease-out;
}
.marcasDeTarjeta { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 6px; z-index: 2; }
.marcasDeTarjeta i { background: #000; color: #fff; border-radius: 50%; padding: 10px; }

.datosDeTarjeta { padding: 14px 16px 6px; }
.tituloDeTarjetaPublica { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.codigoDeTarjeta { color: #777; font-size: 13px; display: block; }
.direccionDeTarjeta { color: #555; font-size: 14px; display: block; margin: 2px 0 8px; }

.caracteristicasDeTarjeta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; padding: 0; font-size: 13.5px; color: #555; }

.descripcionDeTarjeta {
    font-size: 13.5px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.pieDeTarjeta { display: flex; align-items: stretch; border-top: 1px solid #eee; margin-top: 10px; }
.compartirTarjeta { display: flex; }
.compartirTarjeta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: #fff;
    background: #3b5998;
}
.compartirTarjeta a:last-child { background: #25d366; }
.precioDeTarjeta {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    background: var(--pub-boton-fondo);
    color: var(--pub-boton-fuente);
    text-decoration: none;
    font-size: 17px;
}
.precioDeTarjeta:hover { color: var(--pub-boton-fuente); filter: brightness(1.12); }

/* ------------------------- pantalla completa y video ------------------------- */
/* La franja de arriba, la misma pieza que usa el sitio de siempre: una banda fija de 130px DETRAS
   del logo y del menu, que arranca con un degradado negro sobre la foto -para que el logo se lea
   igual con una imagen clara- y pasa al color de la barra apenas se scrollea (cabeceraPegada, la
   pone cabecera.js). El degradado y el alto son los del viejo, medidos sobre el sitio en vivo.

   Va en una sola pieza y no pintando el fondo de la barra y del menu por separado: el menu se
   dibuja despues que la barra, asi que su fondo tapaba la mitad de abajo del logo. Detras de todo,
   el logo queda entero. */
body.conHeroFull::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: linear-gradient(to bottom, rgba(5, 1, 1, .5) 0%, rgba(3, 1, 1, .5) 47%, rgba(0, 0, 0, 0) 100%);
    z-index: 19;
    transition: background .4s;
}
body.conHeroFull.cabeceraPegada::before { background: var(--pub-barra-fondo); }
body.conHeroFull .barraSuperior { --pub-barra-fuente: #fff; }
body.conHeroFull .datosSuperiores { display: none; }
body.conHeroFull .listaDelMenu { justify-content: flex-end; }
body.conHeroFull .listaDelMenu > .nav-item > .nav-link { color: #fff; }

/* De 992 para arriba la cabecera flota sobre el hero en UN SOLO renglon, como alla: el logo a la
   izquierda y, a la derecha, las redes con el traductor arriba y el menu abajo. El renglon reparte
   el aire que sobra en tres partes iguales -antes del logo, entre el logo y el bloque derecho, y
   despues-, que es lo que hace el viejo, asi que el logo queda metido hacia adentro.

   Lo importante es que sea una sola grilla: el logo tiene su columna reservada y el menu no puede
   encimarsele nunca. Antes la barra y el menu flotaban cada uno por su cuenta, con su propio
   container centrado, y con un logo ancho el menu le caia encima.

   El logo, las redes y el menu llegan a la grilla porque las cajas del medio -la barra, el header
   y los dos container- se apagan con display:contents. */
@media (min-width: 992px) {
    body.conHeroFull .cabeceraDelSitio {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        height: 130px;
        padding: 10px 15px 0;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 43px 50px;
        justify-content: space-evenly;
        align-content: start;
    }
    body.conHeroFull .barraSuperior,
    body.conHeroFull .barraSuperiorGrilla,
    body.conHeroFull .menuPrincipal,
    body.conHeroFull .menuPrincipal > .navbar { display: contents; }
    body.conHeroFull .logoDelSitio {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        margin: 0;
    }
    body.conHeroFull .ladoDerechoSuperior { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0; }
    body.conHeroFull #menuDelSitio { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* Al scrollear, el fondo lo pone la franja de atras; la barra y el menu siguen transparentes. */
body.cabeceraPegada .listaDelMenu > .nav-item > .nav-link { color: var(--pub-menu-fuente); }

/* Sobre el hero de pantalla completa el buscador es la caja traslucida redondeada de siempre, sin
   pestaña. Va atado a conHeroFull: con el encabezado clasico el buscador es otra cosa -una franja
   de ancho completo al pie del slider- y estas reglas se le estaban aplicando igual. */
body.conHeroFull .tituloDelBuscador { display: none; }
body.conHeroFull .sobreElEncabezado .buscadorPublico { background: transparent; padding: 0; }
body.conHeroFull .sobreElEncabezado .buscadorPublico > .container { background: var(--pub-buscador-fondo); border-radius: 3px; padding: 20px 35px; }
body.conHeroFull .sobreElEncabezado .camposDelBuscador { margin-top: 0; }

/* En pantalla completa la foto se estira a toda la ventana y no vale el minimo de ancho. */
.modoFullPantalla .sliderEscritorio .carousel-item img,
.modoFullPantalla .sliderMovil .carousel-item img { width: 100%; min-width: 0; height: 100vh; object-fit: cover; }
/* El titulo y el buscador arrancan a 300px del borde, como siempre, sin depender del alto. */
.modoFullPantalla .sobreElEncabezado { top: 300px; bottom: auto; }

.tituloDelHero { text-align: center; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .3); margin-bottom: 10px; }
.tituloDelHero h1 { font-family: var(--pub-fuente-titulos); font-size: 60px; font-weight: 800; line-height: 51px; margin: 20px 0 10px; }
.tituloDelHero h4 { font-family: var(--pub-fuente-titulos); font-size: 25px; font-weight: 400; line-height: 51px; margin: 10px 0; }

/* El video del encabezado: el iframe tapa el area como un cover, dibujado 240px mas alto que
   el area para que el titulo y la marca del reproductor queden fuera de la vista. */
.conVideo { min-height: 600px; overflow: hidden; }
.modoFullPantalla.conVideo { min-height: 100vh; }
.videoDeFondo { position: absolute; inset: 0; pointer-events: none; }
.videoDeFondo iframe {
    --altoDelVideo: calc(max(56.25vw, 600px) + 240px);
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--altoDelVideo);
    width: calc(var(--altoDelVideo) * 16 / 9);
    transform: translate(-50%, -50%);
    border: 0;
}
.modoFullPantalla .videoDeFondo iframe { --altoDelVideo: calc(max(56.25vw, 100vh) + 240px); }

@media (max-width: 991.98px) {
    .tituloDelHero h1 { font-size: 34px; line-height: 1.2; }
    /* En el celular no va el titulo ni el subtitulo sobre la foto: alla el hero solo lleva el
       buscador. */
    .modoFullPantalla .tituloDelHero { display: none; }
    /* El bloque va apoyado al pie del hero y POR ENCIMA del video -estaba en position static y el
       video, que va absoluto, lo tapaba entero-, pero sin fondo propio: la franja traslucida es
       solo la del buscador, como alla. */
    .modoFullPantalla .sobreElEncabezado { position: absolute; top: auto; bottom: 0; background: transparent; }
    body.conHeroFull .sobreElEncabezado .buscadorPublico { background: var(--pub-buscador-fondo); padding: 0 0 5px; }
    /* Y el hero mide 600, no toda la pantalla: alla en el celular es 600 y asi el buscador entra
       sin tener que scrollear. */
    .modoFullPantalla, .modoFullPantalla.conVideo { min-height: 600px; }
    /* Y el video se dibuja para ese alto de 600, no para toda la pantalla: si no el telefono
       carga un cuadro mucho mas grande del que se ve y el video se ve peor. */
    .modoFullPantalla .videoDeFondo iframe { --altoDelVideo: calc(max(56.25vw, 600px) + 240px); }
    .modoFullPantalla .sliderEscritorio .carousel-item img,
    .modoFullPantalla .sliderMovil .carousel-item img { height: 600px; }
    body.conHeroFull .sobreElEncabezado .buscadorPublico > .container,
    .sobreElEncabezado .buscadorPublico > .container { background: transparent; border-radius: 0; padding: 8px 17px; }
    /* La pestaña "Buscador" tambien se ve sobre el hero de pantalla completa, como alla. */
    body.conHeroFull .tituloDelBuscador { display: block; }
    /* Aca la cabecera no flota: la grilla del renglon unico solo vive de 992 para arriba, asi que
       la barra y el menu vuelven a ser dos franjas apiladas con su fondo propio, y la franja de
       atras sobraria. */
    body.conHeroFull::before { display: none; }
}

/* ------------------------- populares ------------------------- */
/* Abajo, 50px de aire antes de lo que sigue. El viejo deja 119 y se fue bajando a pedido. Se come
   el margen de arriba del titulo que viene, que es mas chico. */
.popularesDelSitio { max-width: 1170px; margin: 34px auto 50px; padding: 0 15px; }
/* El titulo, como el del sitio de siempre: en mayusculas y en el mismo gris que los demas titulos
   de seccion. Lo que va en negrita -"mas populares"- se distingue solo por el peso, no por el
   color. */
.tituloDePopulares {
    text-align: center;
    text-transform: uppercase;
    color: #999;
    font-size: 24px;
    font-weight: 400;
    line-height: 26px;
    margin: 20px 0 25px;
}
.tituloDePopulares strong { font-weight: 700; }

/* El modo "Bloques" de Estilos: tres columnas con la primera tarjeta ocupando dos, como el mosaico
   del sitio de siempre. La separacion tambien es la de alla -30 a lo ancho y 25 a lo alto-, con lo
   que la tarjeta chica queda en 360 y la grande en 750, que son las medidas del viejo. */
.mosaicoDePopulares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px 30px; }
.mosaicoDePopulares .tarjetaPopular:first-child { grid-column: span 2; }
.mosaicoDePopulares .tarjetaPopular { height: 350px; }

/* El carrusel se sale del ancho del contenido y ocupa el 80% de la ventana, como en el sitio de
   siempre. Alla el ancho lo daba un juego de left y margenes negativos que lo dejaba corrido unos
   pixeles hacia la derecha; aca queda centrado, que es lo que se espera. */
.marcoDePopulares { position: relative; }
.marcoDePopulares.conCarrusel { width: 80vw; margin-left: calc(50% - 40vw); }

/* Cuatro tarjetas a la vez y las demas se alcanzan con las flechas. Se mueve con el scroll de
   siempre en vez de correr la tira a mano: asi el dedo tambien funciona en el telefono. */
.carruselDePopulares {
    display: flex;
    gap: 10px;
    padding: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.carruselDePopulares::-webkit-scrollbar { display: none; }
.carruselDePopulares .tarjetaPopular {
    flex: 0 0 calc((100% - 30px) / 4);
    height: 440px;
    scroll-snap-align: start;
}

.tarjetaPopular {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background-color: #444;
    text-decoration: none;
}

/* La foto, en su propia capa: al pasar por encima se agranda un poco y el texto se queda quieto. */
.fotoPopular {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: transform 0.35s ease-out;
}
.tarjetaPopular:hover .fotoPopular { transform: scale(1.06); }

/* El nombre va en el medio de la tarjeta, no en una esquina. */
.textoPopular {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50.5%);
    text-align: center;
    color: #fff;
    z-index: 2;
}
.textoPopular b { display: block; font-size: 28px; line-height: 36px; font-weight: 700; margin: 10px 0; }
.textoPopular small { display: block; font-size: 14px; line-height: 20px; font-weight: 700; }

/* Las flechas: redondas, negras translucidas y apoyadas sobre los bordes del carrusel. */
.flechaDePopulares {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}
.flechaDePopulares:hover { background: rgba(0, 0, 0, 0.8); }
.flechaDePopulares.atras { left: 0; }
.flechaDePopulares.adelante { right: 0; }

/* En el telefono, una tarjeta por vez y el carrusel un poco mas ancho: el mismo corte que usa el
   sitio de siempre. */
@media (max-width: 575.98px) {
    .marcoDePopulares.conCarrusel { width: 90vw; margin-left: calc(50% - 45vw); }
    .carruselDePopulares .tarjetaPopular { flex: 0 0 100%; }
}

/* ------------------------- mapa y emprendimientos ------------------------- */
.mapaDePortada {
    width: 100%;
    height: 600px;
    /* 50 arriba y 50 abajo, el aire que se pidio entre el mapa y las secciones vecinas. */
    margin: 50px 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 46, 82, 0.2);
    z-index: 0;
}
/* El globo del mapa, el mismo en la portada y en la pantalla de Mapa de Propiedades: 330 de ancho,
   la foto de 120x90 pegada a la izquierda y los datos al lado. Las medidas, los colores y la
   posicion de la cruz son los del viejo. Los !important estan porque la hoja de Leaflet se carga
   despues que esta y gana con la misma especificidad. */
.leaflet-popup-content { margin: 0 !important; padding: 0 !important; width: 330px !important; }
/* La sombra la deja poner Leaflet, que es la que se ve alla; solo se le corrige el relleno y las
   esquinas. */
.leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 4px !important; }
.leaflet-popup-close-button {
    top: 4px !important;
    right: -2px !important;
    font-size: 18px !important;
    color: #444 !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.mapa-popup { display: flex; width: 330px; color: #333; text-decoration: none; }
.mapa-popup img { flex: none; width: 120px; height: 90px; object-fit: cover; }
.mp-datos { padding: 10px 12px; width: 100%; }
.mp-datos .titulo {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    color: #0077cc;
    text-decoration: none;
    margin-bottom: 6px;
}
.mp-datos .titulo:hover { text-decoration: underline; }
.mp-datos .precio { font-size: 15px; font-weight: bold; margin-bottom: 3px; }
.mp-datos .tipo { font-size: 12px; color: #666; }

/* Emprendimientos, como la franja del sitio de siempre: fondo gris de ancho completo, una tarjeta
   grande por vez con la foto de fondo y los datos encima, las vecinas encogidas y apagadas a los
   costados y una flecha redonda en cada punta. Medido alla, a 1440: franja de 500 de alto, tarjeta
   de 760x350 que arranca a 75 del borde de arriba, y textos de 20, 30 y 20.
   Los nombres de las piezas se repiten en el listado de emprendimientos, asi que las de aca van
   colgadas del carrusel para que no se pisen. */
.franjaDeEmprendimientos { background: #f0f0f0; padding: 20px 0 75px; margin-top: 20px; }
/* El titulo va sobre el gris, con su propio gris mas oscuro y sin las lineas a los costados. */
.tituloSobreFranja { color: #666; margin: 0 auto 26px; justify-content: center; }
.tituloSobreFranja::before, .tituloSobreFranja::after { display: none; }

.marcoDeEmprendimientos { position: relative; }
.carruselDeEmprendimientos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* El relleno al costado deja que la primera y la ultima tambien queden centradas. */
    padding: 0 calc(50% - 380px);
}
.carruselDeEmprendimientos::-webkit-scrollbar { display: none; }

.tarjetaDeEmprendimiento {
    position: relative;
    flex: 0 0 760px;
    height: 350px;
    scroll-snap-align: center;
    border-radius: 15px;
    background: #ddd;
    color: #fff;
    text-decoration: none;
    /* Las que no estan en el centro quedan encogidas y apagadas, como alla. El encoger es lo que
       abre el aire entre una y otra: sin el, van pegadas. */
    transform: scale(.926);
    opacity: .33;
    transition: transform .35s ease-out, opacity .35s ease-out;
}
.tarjetaDeEmprendimiento.enElCentro { transform: none; opacity: 1; }
.tarjetaDeEmprendimiento:hover { color: #fff; }
.carruselDeEmprendimientos .fotoDeEmprendimiento {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    /* Alla la foto va apagada para que se lean los textos de encima. */
    filter: brightness(75%);
}
/* Los textos van uno abajo del otro desde arriba a la izquierda, con el hueco grande que alla deja
   el titulo, no repartidos entre las dos puntas. */
.carruselDeEmprendimientos .datosDeEmprendimiento { position: absolute; inset: 0; display: block; padding: 30px 0 0 30px; }
.carruselDeEmprendimientos .estadoDeEmprendimiento { display: block; font-size: 20px; line-height: 1.45; }
.tituloDeEmprendimiento { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: 142px; }
.direccionDeEmprendimiento { display: block; font-size: 20px; line-height: 1.1; margin-top: 10px; }
.detalleDeEmprendimiento {
    display: inline-block;
    margin-top: 10px;
    background: #292929;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.43;
}

.flechaDeEmprendimientos {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #fff;
    border-radius: 50px;
    background: rgba(99, 78, 78, .6);
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.45;
    padding: 5px 17px;
    cursor: pointer;
    z-index: 3;
}
.flechaDeEmprendimientos:hover { background: rgba(99, 78, 78, .85); }
.flechaDeEmprendimientos.atras { left: 30px; }
.flechaDeEmprendimientos.adelante { right: 30px; }

@media (max-width: 767.98px) {
    .mosaicoDePopulares { grid-template-columns: 1fr; }
    .mosaicoDePopulares .tarjetaPopular:first-child { grid-column: auto; }
    .mapaDePortada { height: 420px; }
    /* En el celular el viejo deja la tarjeta de 760 dentro de una franja de 390 y la corta por los
       dos costados: el titulo y el boton quedan afuera de la pantalla. Aca entra entera. */
    .franjaDeEmprendimientos { padding-bottom: 40px; }
    .carruselDeEmprendimientos { padding: 0 16px; gap: 16px; }
    .tarjetaDeEmprendimiento { flex: 0 0 calc(100vw - 48px); height: 300px; transform: none; }
    .carruselDeEmprendimientos .datosDeEmprendimiento { padding: 20px 0 0 20px; }
    .carruselDeEmprendimientos .estadoDeEmprendimiento { font-size: 16px; }
    .tituloDeEmprendimiento { font-size: 22px; margin-top: 110px; }
    .direccionDeEmprendimiento { font-size: 16px; }
    .flechaDeEmprendimientos { font-size: 22px; padding: 3px 12px; }
    .flechaDeEmprendimientos.atras { left: 10px; }
    .flechaDeEmprendimientos.adelante { right: 10px; }
}

/* ------------------------- vistas 2 y 3 de la grilla ------------------------- */
.grillaDePropiedades.vistaDosColumnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grillaDePropiedades.vistaDeFilas { grid-template-columns: 1fr; }

/* La tarjeta de la vista de dos columnas, como la del sitio de siempre: la foto ocupa todo y los
   datos van sobre una banda oscura al pie. La operacion, el titulo y el codigo comparten renglon
   -el codigo pegado a la derecha-, debajo la direccion y el precio, y al final las caracteristicas
   separadas por una linea. El unico boton de compartir es el de Facebook: alla hay tambien uno de
   X y se decidio no llevarlo. */
/* La sombra es la misma que llevan las tarjetas de la vista de tres columnas. Es lo unico de esta
   tarjeta que no viene del viejo: alla la de dos columnas no tiene sombra. Decision de Daniel. */
.tarjetaSobreFoto { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 46, 82, 0.2); }
.cuerpoSobreFoto { display: block; color: inherit; text-decoration: none; }
.tarjetaSobreFoto img { width: 100%; height: 450px; object-fit: cover; display: block; }
/* En esta vista el cartel de estado va centrado arriba, sobre una franja que se oscurece hacia
   arriba: no es la barra negra de la vista de tarjetas. El degradado y el alto son los del sitio
   de siempre, medidos. */
.estadoSobreFoto {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 39px;
    line-height: 23px;
    padding: 8px 14px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
    background: linear-gradient(rgba(5, 1, 1, .5) 0%, rgba(3, 1, 1, .5) 47%, rgba(0, 0, 0, 0) 100%);
}
.datosSobreFoto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    /* La banda mide 160 como en el viejo, y crece si el texto no entra. El degradado es el de alla:
       transparente arriba y negro al 50% desde la mitad para abajo. */
    min-height: 160px;
    color: #fff;
    padding: 40px 16px 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 54%, rgba(0, 0, 0, .5) 100%);
}
/* El primer renglon: operacion y titulo a la izquierda, codigo pegado a la derecha. */
.renglonSobreFoto { display: flex; align-items: center; gap: 8px; }
.chipDeOperacion { background: #435269; padding: 5px; text-transform: uppercase; font-size: 14px; line-height: 1; }
.tituloSobreFoto { font-size: 18px; font-weight: 700; }
.codigoSobreFoto { font-size: 12px; margin-left: auto; white-space: nowrap; }
.direccionSobreFoto { font-size: 14px; }
.precioSobreFoto { font-size: 18px; margin-top: 4px; }

/* Las caracteristicas, separadas del precio por una linea, como en el viejo. */
.caracteristicasSobreFoto {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    font-size: 13.5px;
}

/* Compartir: va fuera del enlace de la tarjeta, apoyado sobre la banda, a la derecha. */
/* A 24 del borde derecho y 85 del de abajo: donde termina el par de botones del viejo, que ahi
   son dos. Asi queda a la altura de la direccion y no encima del codigo. */
.compartirSobreFoto { position: absolute; right: 24px; bottom: 85px; z-index: 2; }
.compartirSobreFoto a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b5998;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

/* La fila ancha, como la del sitio de siempre: la foto a la izquierda y, a la derecha, el titulo
   con el precio enfrentado, la direccion con el codigo, la descripcion, y abajo las
   caracteristicas con los botones de WhatsApp y "Mas Detalle". Medidas y colores tomados de alla;
   los colores salen de los tokens del tema, que es de donde salen tambien alla. */
.filaDePropiedad {
    display: grid;
    grid-template-columns: 292px 1fr;
    background: #fff;
    /* Esquinas de 10 y la sombra azulada, las mismas que la fila del sitio de siempre. */
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 46, 82, 0.2);
    overflow: hidden;
}
.fotoDeFila { position: relative; display: block; min-height: 280px; background-size: cover; background-position: center; }
.datosDeFila { display: flex; flex-direction: column; padding: 0 15px 12px; }
.cuerpoDeFilaLink { color: inherit; text-decoration: none; display: block; }

/* Titulo y direccion a la izquierda, precio a la derecha, en el mismo renglon. */
.encabezadoDeFila { display: flex; align-items: flex-start; gap: 16px; }
.encabezadoDeFila .cuerpoDeFilaLink { flex: 1; min-width: 0; }
.tituloDeFila { font-size: 18px; font-weight: 500; color: #000; margin: 10px 0 0; }
.direccionDeFila { display: block; font-size: 14px; font-weight: 700; color: #888; }
.precioDeFila { font-size: 20px; color: #000; text-align: right; white-space: nowrap; margin-top: 10px; }
.precioDeFila b { font-weight: 700; }

/* La descripcion va entera y se corta por alto, sin puntos suspensivos, como alla. */
.descripcionDeFila {
    font-size: 15px;
    font-weight: 300;
    color: #777;
    line-height: 21.5px;
    max-height: 86px;
    overflow: hidden;
    margin: 8px 0 0;
}

/* Quien atiende la propiedad: la foto redonda de 50, el nombre con el icono de persona y el
   cargo en negrita debajo. Solo sale si el inmueble tiene martillero o productor asignado. */
.martillerosDeFila { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.martilleroDeFila { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.martilleroDeFila img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.martilleroDeFila b { display: block; }
.nombreDeMartillero { display: block; }

.pieDeFila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; }
.pieDeFila .caracteristicasDeTarjeta { margin: 0; }
.botonesDeFila { display: flex; align-items: center; gap: 10px; }
.whatsappDeFila {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #34ae22;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
.detalleDeFila {
    background: var(--pub-boton-fondo);
    color: var(--pub-boton-fuente);
    padding: 6px 12px;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.detalleDeFila:hover { color: var(--pub-boton-fuente); filter: brightness(1.12); }

@media (max-width: 767.98px) {
    .grillaDePropiedades.vistaDosColumnas { grid-template-columns: 1fr; }
    .filaDePropiedad { grid-template-columns: 1fr; }
    .fotoDeFila { min-height: 220px; }
}

/* ------------------------- bienvenida y noticias ------------------------- */
.bienvenidaDelSitio { max-width: 900px; margin: 30px auto; padding: 0 15px; text-align: center; }
.bienvenidaDelSitio h2 { font-size: 26px; }
.textoDeBienvenida { line-height: 1.7; color: #555; white-space: pre-line; }

/* 50 de aire abajo, antes de lo que sigue. */
.grillaDeNoticias { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 1170px; margin: 0 auto 50px; padding: 0 15px; }
.tarjetaDeNoticia { flex: 1 1 380px; max-width: 560px; text-align: center; }
.tarjetaDeNoticia img { max-width: 100%; border-radius: 6px; margin-bottom: 10px; }
.tarjetaDeNoticia h2 { font-size: 22px; }
.resumenDeNoticia { color: #555; line-height: 1.6; }

@media (max-width: 991.98px) {
    .grillaDePropiedades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sliderEscritorio { display: none; }
    .sliderMovil { display: block; }
    .sobreElEncabezado { position: static; background: var(--pub-boton-fondo); padding: 8px 0; }
    .tarjetaDestacadaPrincipal { flex-direction: column; }
    .tarjetaDestacadaPrincipal img { width: 100%; max-width: none; }
}
@media (max-width: 575.98px) {
    .grillaDePropiedades { grid-template-columns: 1fr; }
    .encabezadoDePortada .carousel-item img { height: auto; }
}

/* ------------------------- contacto y noticias completas ------------------------- */
.contactoDelSitio { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.listaDeContacto { list-style: none; margin: 0 0 14px; padding: 0; }
.listaDeContacto li { margin: 6px 0; }
.nombreEnContacto { font-size: 20px; }
.redesDeContacto { display: flex; gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; }
.redesDeContacto a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pub-boton-fondo); color: var(--pub-boton-fuente); font-size: 19px;
    text-decoration: none;
}
.mapaDeContacto { width: 100%; height: 280px; border: 0; border-radius: 6px; }
.formularioDeContacto .form-control { margin-bottom: 12px; }
.campoTrampa { display: none; }
.botonDeContacto { width: 100%; margin-top: 10px; font-size: 17px; }
.estadoDeEnvio { text-align: center; padding: 30px 0; font-size: 18px; }
.estadoDeEnvio .fa-check { color: #2e9b46; font-size: 34px; }
.grillaDeNoticiasCompleta .tarjetaDeNoticia { flex: 1 1 460px; }
.videoDeNoticia { width: 100%; border: 0; border-radius: 6px; }
@media (max-width: 767.98px) { .contactoDelSitio { grid-template-columns: 1fr; } }

/* ------------------------- resultados del buscador ------------------------- */
.encabezadoDeResultados { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 14px; }
.renglonDeResultados { font-size: 20px; margin: 0; flex: 1 1 420px; }
.ordenDeResultados { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ordenDeResultados .form-select { width: auto; }
.sinResultados { text-align: center; font-size: 18px; color: #666; padding: 40px 0; }
/* En los resultados la grilla vive dentro del container del layout. */
.cuerpoDeSeccion .grillaDePropiedades { padding: 0; }

/* ------------------------- pie ------------------------- */
.pieDelSitio { background: var(--pub-pie-fondo); color: var(--pub-pie-fuente); padding: 34px 0 12px; }

.pieGrilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.tituloDelPie { font-size: 18px; font-weight: 700; margin-bottom: 12px; }

.listaDelPie { list-style: none; margin: 0; padding: 0; }
.listaDelPie li { margin: 6px 0; font-size: 14px; }
.listaDelPie a { color: var(--pub-pie-fuente); text-decoration: none; }
.listaDelPie a:hover { text-decoration: underline; }
.listaDelPie .fa, .listaDelPie .fas { margin-right: 6px; }

.pieLogos { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* El logo del pie, con las medidas de alla: hasta 250 de ancho y 150 de alto, y 10 de aire abajo
   antes del logo del Colegio. */
.logoDelPie { max-width: 250px; max-height: 150px; object-fit: contain; padding-bottom: 10px; }
.logoDelColegio { max-height: 70px; }
.logoAfip { max-height: 80px; }

.redesDelPie { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.redesDelPie a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pub-pie-fuente);
    color: var(--pub-pie-fondo);
    font-size: 18px;
}
.redesDelPie a.vacio { display: none; }

.pieSucursales { grid-column: 1 / -1; }
.pieGrillaSucursales { display: flex; flex-wrap: wrap; gap: 24px; }

.piePowered {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 26px;
    padding-top: 12px;
    font-size: 13px;
}
/* Sin subrayado, como alla, en las dos vistas. */
.piePowered a { color: var(--pub-pie-fuente); text-decoration: none; }
.piePowered a:hover { text-decoration: underline; }

/* ------------------------- flotantes ------------------------- */
.whatsappFlotante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.whatsappFlotante:hover { color: #fff; }

.barraFlotanteMovil { display: none; }

@media (max-width: 767.98px) {
    .barraSuperiorGrilla, .barraSuperior.conLogoCentrado .barraSuperiorGrilla { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .barraSuperior.conLogoCentrado .ladoDerechoSuperior { display: flex; }
    .logoDelSitio { margin-left: 0; }
    .logoDelSitio img { max-width: 280px; }
    .ladoDerechoSuperior { align-items: center; text-align: center; padding-top: 0; }
    .datosSuperiores { justify-content: center; }
    .datosSuperiores li { white-space: normal; }
    .pieGrilla { grid-template-columns: 1fr; text-align: center; }
    .pieLogos, .redesDelPie { justify-content: center; }
    .redesDelPie { display: inline-flex; }
    /* El boton flotante no va en el celular: la barra de abajo ya tiene su WhatsApp, como alla. */
    .whatsappFlotante { display: none; }
    /* El Powered va como alla: los dos renglones uno abajo del otro y centrados, cada uno con 20
       de aire arriba, y 60 abajo del bloque -que es ademas lo que deja libre la barra fija. */
    .piePowered { display: block; text-align: center; padding: 0 15px; margin: 20px 0 60px; }
    .piePowered > span { display: block; padding-top: 20px; }

    .barraFlotanteMovil {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 49;
    }
    .barraFlotanteMovil a {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-weight: 700;
        text-decoration: none;
        background: var(--pub-boton-fondo);
        color: var(--pub-boton-fuente);
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }
    .barraFlotanteMovil a:last-child { border-right: 0; }
    /* El de WhatsApp va verde, como alla. */
    .barraFlotanteMovil .accionWhatsapp { background: #2CB13F; color: #fff; }
}

/* ==================================================================== la ficha de propiedad */
.fichaPublica { max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; }

.encabezadoDeFicha {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.tituloDeFicha { font-size: 1.7rem; margin: 0 0 4px; }
.codigoDeFicha { color: #777; font-size: .95rem; }
.tituloDelAviso { font-size: 1.15rem; color: #444; margin-top: 4px; }
.precioDeFicha {
    background: var(--pub-boton-fondo); color: var(--pub-boton-fuente);
    padding: 10px 22px; border-radius: 8px; font-size: 1.35rem; white-space: nowrap;
}
.precioDeFicha small { display: block; font-size: .8rem; text-align: right; }

/* El precio del emprendimiento va como alla: texto suelto, sin caja. El rotulo en 16 apagado y
   el numero en 23 en negrita. El "Hasta" va en el mismo renglon que el "Desde". */
.precioDelEmprendimiento {
    font-size: 23px;
    font-weight: 700;
    line-height: 35px;
    white-space: nowrap;
    /* A la altura del renglon del codigo, no del titulo. Pedido de Daniel: alla va arriba. */
    align-self: flex-end;
}
.rotuloDelPrecio { color: #989898; font-size: 16px; font-weight: 400; padding: 0 12px 0 0; }
/* El bolder del navegador sobre el 700 de la caja lo lleva a 900; alla el numero va en 700. */
.precioDelEmprendimiento b { font-weight: 700; }
.rotuloDelPrecio + b { padding-right: 4px; }
/* En el celular el precio entra en un renglon con la letra mas chica: 18 el numero y 13 el
   rotulo, contra 23 y 16 del escritorio. */
@media (max-width: 991.98px) {
    .precioDelEmprendimiento { font-size: 18px; line-height: 26px; }
    .rotuloDelPrecio { font-size: 13px; }
}
.precioDelEmprendimiento b:last-child { padding-right: 0; }

/* ------------------------------------------------------------------- galeria */
.galeriaDeFicha { margin-bottom: 12px; }
.fotoPrincipalDeFicha { position: relative; overflow: hidden; border-radius: 10px; background: #111; }
.fotoPrincipalDeFicha > img {
    width: 100%; height: 480px; object-fit: contain; display: block; cursor: zoom-in;
    position: relative; z-index: 1;
}
/* Los costados se rellenan con la misma foto difuminada, como en el sitio viejo. */
.fotoPrincipalDeFicha .fondoDeFoto {
    position: absolute; inset: 0; z-index: 0; object-fit: cover; cursor: default;
    filter: blur(18px); transform: scale(1.15); opacity: .65;
}
.flechaDeGaleria {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer; z-index: 3;
}
.flechaDeGaleria:hover { background: rgba(0, 0, 0, .75); }
.fotoPrincipalDeFicha .flechaAnterior, #veloDeGaleria .flechaAnterior { left: 12px; }
.fotoPrincipalDeFicha .flechaSiguiente, #veloDeGaleria .flechaSiguiente { right: 12px; }
.miniaturasDeFicha {
    display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px;
}
.miniaturasDeFicha img {
    width: 96px; height: 68px; object-fit: cover; border-radius: 6px; cursor: pointer;
    opacity: .75; flex: 0 0 auto; border: 2px solid transparent;
}
.miniaturasDeFicha img:hover { opacity: 1; }
.miniaturasDeFicha img.elegida { opacity: 1; border-color: var(--pub-boton-fondo); }

#veloDeGaleria {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
#veloDeGaleria img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.cerrarGaleria {
    position: absolute; top: 14px; right: 18px; border: 0; background: none;
    color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; z-index: 4;
}

/* El cartel de estado sobre la foto, en los diez formatos de siempre (franjas y cintas). */
.carteldeEstado {
    position: absolute; z-index: 2; background: var(--pub-estado-fondo);
    color: var(--pub-estado-fuente); font-weight: bold; text-transform: uppercase;
    text-align: center; font-size: 1.15rem; padding: 8px 0; pointer-events: none;
}
.formatoEstado1 { left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.formatoEstado2 { left: 0; right: 0; bottom: 0; }
.formatoEstado3 { left: 0; right: 0; top: 0; }
/* Los angulos y las esquinas son los del sitio de siempre, medidos uno por uno sobre inmobiliarias
   que usan cada formato: el 4 y el 5 cruzan la foto a 34 grados -no 24- y las cintas 6 y 7 van
   arriba, no abajo. */
.formatoEstado4 { left: -15%; right: -15%; top: 50%; transform: rotate(-34deg); }
.formatoEstado5 { left: -15%; right: -15%; top: 50%; transform: rotate(34deg); }
.formatoEstado6 { width: 300px; right: -80px; top: 60px; transform: rotate(42deg); }
.formatoEstado7 { width: 300px; left: -80px; top: 60px; transform: rotate(-42deg); }
.formatoEstado8 { width: 300px; right: -80px; top: 40px; transform: rotate(44deg); }
.formatoEstado9 { width: 300px; left: -80px; top: 40px; transform: rotate(-44deg); }
.formatoEstado10 { right: 16px; top: 16px; padding: 8px 18px; border-radius: 6px; }

/* ------------------------------------------------------------------- acciones */
.accionesDeFicha {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.compartirFicha { display: flex; align-items: center; gap: 8px; }
.botonCompartir {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #3b5998; font-size: 1.05rem;
}
.botonCompartir:hover { color: #fff; filter: brightness(1.12); }
.botonWhatsapp { background: #00ba54; }
.accionesDerechaFicha { display: flex; gap: 8px; }
.botonDeFicha {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border: 1px solid #ccc; border-radius: 20px; background: #f9f9f9; color: #333;
    font-size: .95rem; cursor: pointer;
}
.botonDeFicha, .botonDeFicha:hover { text-decoration: none; }
.botonDeFicha:hover { background: #efefef; color: #111; }

/* ------------------------------------------------------------------- cuerpo en dos columnas */
.cuerpoDeFicha { display: flex; gap: 28px; align-items: flex-start; }
.columnaPrincipalDeFicha { flex: 1 1 0; min-width: 0; }
.columnaDeContactoFicha { flex: 0 0 340px; position: sticky; top: 16px; }
/* 50 de aire arriba de cada bloque, el mismo que separa las secciones de la portada. Pedido de
   Daniel: el viejo deja 20. */
.tituloDeBloqueFicha {
    font-size: 1.25rem; margin: 50px 0 12px; padding-bottom: 8px;
    border-bottom: 2px solid var(--pub-boton-fondo);
}
.descripcionDeFicha { white-space: pre-line; line-height: 1.6; color: #333; }
.videoDeFicha, .tourDeFicha { width: 100%; height: 400px; border: 0; border-radius: 8px; margin-bottom: 8px; }

.caracteristicasDeFicha {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px;
}
.caracteristicasDeFicha li { padding: 4px 0; border-bottom: 1px dotted #e3e3e3; }
.caracteristicasDeFicha i { color: var(--pub-boton-fondo); margin-right: 8px; }
.caracteristicasDeFicha strong { margin-right: 5px; }

.mapaDeFicha { height: 380px; border-radius: 10px; z-index: 1; }

/* ------------------------------------------------------------------- calendario de ocupacion */
#calendarioDeFicha { max-width: 340px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; }
.cabeceraDeCalendario { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cabeceraDeCalendario button { border: 0; background: none; cursor: pointer; font-size: 1rem; padding: 4px 10px; }
.diasDeCalendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.diasDeCalendario span { padding: 5px 0; border-radius: 4px; font-size: .9rem; }
.diasDeCalendario .nombreDeDia { font-weight: bold; color: #888; }
.diasDeCalendario .diaOcupado, .diaOcupadoMuestra { background: #ee4f2e; color: #fff; }
.leyendaDeCalendario { margin-top: 8px; font-size: .9rem; }
.diaOcupadoMuestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }

/* ------------------------------------------------------------------- contacto y martilleros */
.columnaDeContactoFicha form { display: flex; flex-direction: column; gap: 10px; }
.trampaParaBots { display: none; }
.botonEnviarFicha {
    background: var(--pub-boton-fondo); color: var(--pub-boton-fuente);
    border: 0; border-radius: 6px; padding: 10px; font-size: 1.05rem; cursor: pointer;
}
.botonEnviarFicha:hover { filter: brightness(1.1); }
.botonesDeLlamado { display: flex; gap: 8px; }
.botonesDeLlamado .botonDeFicha { flex: 1; justify-content: center; }
.botonesDeLlamado .botonWhatsapp { background: #00ba54; border-color: #00ba54; color: #fff; }
.estadoDeEnvioFicha { text-align: center; padding: 24px 0; color: #3f9142; font-size: 1.05rem; }
.estadoDeEnvioFicha i { font-size: 2rem; }

.fichaDeMartillero {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 18px;
    border: 1px solid #e5e5e5; border-radius: 10px; padding: 12px; font-size: .95rem;
}
.fichaDeMartillero img { width: 76px; height: 76px; object-fit: cover; border-radius: 12%; }
.fichaDeMartillero a { color: #333; }
.fichaDeMartillero .botonDeFicha { margin-top: 8px; font-size: .9rem; padding: 6px 12px; }

/* El gris de los campos y de la ficha del martillero. Los campos blancos sobre un fondo blanco se
   pierden, asi que en el detalle de la propiedad, en Contacto y en la pagina de Tasaciones van con
   un gris apenas marcado, y la tarjeta del martillero toma el mismo tono de fondo. Pedido de
   Daniel: es lo unico de estos formularios que no viene del viejo.
   La tarjeta del martillero solo aparece en el detalle; en el listado es otra pieza
   -martilleroDeFila- y esa no se toca.
   En la portada los campos de tasacion siguen blancos, porque alla se apoyan sobre la franja
   gris y ya se distinguen solos. */
#formularioDeFicha .form-control,
.formularioDeContacto .form-control,
.paginaDeTasaciones .columnasDeTasacion .form-control { background: #f5f5f5; }
.fichaDeMartillero { background: #f5f5f5; }

#modalDeVisita .modal-body { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 991px) {
    /* Apilado, el cuerpo estira sus columnas a todo el ancho. Con el align-items del renglon la
       columna principal tomaba el ancho de su contenido -la grilla de caracteristicas se abria en
       dos- y la pagina se iba de los costados con scroll horizontal. */
    .cuerpoDeFicha { flex-direction: column; align-items: stretch; }
    .columnaDeContactoFicha { flex: 1 1 auto; position: static; width: 100%; }
    .fotoPrincipalDeFicha > img { height: 320px; }
    .videoDeFicha, .tourDeFicha { height: 260px; }
    /* En el celular la ficha usa casi todo el ancho. El contenido arrancaba a 28 del borde -12
       del container mas 16 propios- y alla arranca a 15, asi que la ficha se queda con 3. */
    .fichaPublica { padding-left: 3px; padding-right: 3px; }
}

/* ------------------------------------------------------------------- version impresa */
@media print {
    .noImprimir, .barraSuperiorPublica, .menuPublico, .piePublico, .whatsappFlotante,
    .barraFlotanteMovil, .miniaturasDeFicha, .flechaDeGaleria, #veloDeGaleria { display: none !important; }
    .cuerpoDeFicha { display: block; }
    .fotoPrincipalDeFicha > img { height: auto; max-height: 420px; cursor: default; }
    .fichaPublica { padding: 0; }
    a { text-decoration: none; color: #000; }
}

/* ==================================================================== tasaciones */
.paginaDeTasaciones { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }

/* En la portada el formulario va sobre una franja gris de ancho completo. El contenido no se
   centra en un ancho fijo: alla la franja deja 342 libres a cada lado y lo que sobra es el
   formulario, asi que en una pantalla ancha el formulario tambien es ancho. Los 342 bajan a 282
   entre 992 y 1199, y a 0 de 991 para abajo. El gris es un neutro y no sale del tema porque alla
   tampoco: es el mismo para todas las inmobiliarias. */
.franjaDeTasaciones { background: #f5f5f5; padding: 52px 342px 0; margin-bottom: 50px; }
/* El titulo va adentro de la franja, con la palabra sobre el gris, y la linea toma el ancho del
   contenido de la franja en lugar de los 1170 del resto. Los 52 de arriba los pone la franja como
   relleno -no como margen del titulo, que se escaparia de la franja- para que la linea caiga a
   los 70 que deja el viejo. */
.tituloSobreGris { max-width: none; margin: 0 0 40px; padding: 5px 0; }

/* Cada columna se lleva la mitad, con 15 de relleno a los costados: entre las dos se ven 30. */
.columnasDeTasacion { display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; }
.columnasDeTasacion > div { flex: 1 1 0; min-width: 0; padding: 0 15px; }
.columnasDeTasacion h2 { font-size: 30px; font-weight: 500; line-height: 33px; margin: 20px 0 10px; }
.columnasDeTasacion h3 { font-size: 24px; font-weight: 500; line-height: 26.4px; margin: 20px 0 10px; }
/* Los dos renglones van pegados, uno abajo del otro, como alla. */
.columnasDeTasacion p { font-size: 14px; line-height: 20px; margin: 0; }
/* Entre el parrafo de arriba y "Datos personales" el viejo deja un renglon en blanco de mas. */
.columnasDeTasacion p + h3 { margin-top: 40px; }
.campoDeTasacion { margin-bottom: 15px; }
/* Los campos son los del viejo: 34 de alto, borde gris claro y esquinas de 4. */
.columnasDeTasacion .form-control {
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* La sombra interna del viejo, que le da hondura al campo. */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.columnasDeTasacion .form-control::placeholder { color: #999; opacity: 1; }
.columnasDeTasacion .botonEnviarFicha {
    width: 100%;
    padding: 0;
    height: 34px;
    line-height: 34px;
    font-size: 17px;
    border-radius: 4px;
    margin-bottom: 20px;
}
@media (max-width: 1199.98px) {
    .franjaDeTasaciones { padding-left: 282px; padding-right: 282px; }
}
/* De 991 para abajo la franja ocupa todo el ancho y las columnas se apilan, como alla. */
@media (max-width: 991.98px) {
    .franjaDeTasaciones { padding-left: 0; padding-right: 0; }
    /* En la pantalla de Tasaciones los campos llegan casi al borde, como en las demas secciones
       del celular: la pagina se queda con 3 sobre los 12 del container y la columna no suma nada. */
    .paginaDeTasaciones { padding-left: 3px; padding-right: 3px; }
    .paginaDeTasaciones .columnasDeTasacion > div { padding-left: 0; padding-right: 0; }
    /* Apiladas, las dos columnas ocupan todo el ancho. El align-items del renglon las dejaba del
       ancho de su contenido y la de Datos del Inmueble quedaba angosta, con el boton igual. */
    .columnasDeTasacion { flex-direction: column; align-items: stretch; }
}
@media (max-width: 767.98px) {
    .franjaDeTasaciones { padding-top: 20px; }
}

/* ==================================================================== emprendimientos */
/* El contenido llega a 1140, el mismo ancho que el resto del sitio. */
.paginaDeEmprendimientos { max-width: 1170px; margin: 0 auto; padding: 0 15px 40px; }
.grillaDeEmprendimientos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px;
}
/* La vista 3 del panel: uno por renglon. */
.grillaDeEmprendimientos.vistaDeFilasEmpren { grid-template-columns: 1fr; }

/* La vista 2 del panel: dos tarjetas grandes por renglon, con la foto entera y los datos encima.
   Medido en www.acamporayasoc.com a 1440: la tarjeta mide 540x450, entre columna y columna se ven
   30 y entre renglon y renglon 42 (alla son un espaciador de 32 y 10 de margen). Adentro, desde el
   borde de arriba del velo: titulo a 20, direccion a 53 y precio a 73. */
.grillaDeEmprendimientos.vistaDosColumnasEmpren {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 30px;
    /* Alla las tarjetas quedan metidas 15 de cada lado del contenido. */
    padding: 0 15px;
}
.tarjetaGrandeEmpren {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    /* La sombra de los demas listados, y el mismo crecer al pasar el mouse que hace alla. */
    box-shadow: 0 8px 20px rgba(0, 46, 82, .2);
    transition: transform .4s;
}
.tarjetaGrandeEmpren:hover { color: #fff; transform: scale(1.03); z-index: 2; }
/* Alla la foto va estirada a 540x450; aca se recorta para no deformarla. */
.tarjetaGrandeEmpren > img { width: 100%; height: 450px; object-fit: cover; display: block; }
.estadoGrandeEmpren {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom, rgba(5, 1, 1, .5) 0%, rgba(3, 1, 1, .5) 47%, rgba(0, 0, 0, 0) 100%);
}
.veloGrandeEmpren {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 54%, rgba(0, 0, 0, .5) 100%);
}
.tituloGrandeEmpren { font-size: 18px; font-weight: 700; line-height: 25.7px; }
.direccionGrandeEmpren { font-size: 14px; font-weight: 700; line-height: 20px; margin-top: 7px; }
.precioGrandeEmpren { font-size: 18px; font-weight: 700; line-height: 25.7px; }
/* El rotulo va mas chico y sin negrita, como alla; el numero queda en 18 y en negrita. */
.rotuloDelPrecioEmpren { font-size: 15px; font-weight: 400; }

@media (max-width: 767.98px) {
    .grillaDeEmprendimientos.vistaDosColumnasEmpren { grid-template-columns: 1fr; gap: 22px; }
    .tarjetaGrandeEmpren > img { height: 300px; }
}
.paginaDeEmprendimientos a { color: inherit; text-decoration: none; }
.paginaDeEmprendimientos a:hover { color: inherit; }
.tarjetaDeEmprendimientoListado {
    border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
}
.fotoDeEmprendimiento { position: relative; display: block; }
.fotoDeEmprendimiento img { width: 100%; height: 220px; object-fit: cover; display: block; }
.fotoDeEmprendimiento .estadoDeEmprendimiento {
    position: absolute; top: 0; left: 0; right: 0; text-align: center;
    background: rgba(0, 0, 0, .55); color: #fff; font-weight: bold; padding: 6px 0;
}
.fotoDeEmprendimiento .marcasDeTarjeta { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 6px; }
.fotoDeEmprendimiento .marcasDeTarjeta i {
    background: rgba(0, 0, 0, .7); color: #fff; border-radius: 50%; padding: 9px; font-size: .85rem;
}
.datosDeEmprendimiento { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.precioDeEmprendimiento {
    margin-top: auto; padding-top: 10px; display: flex; gap: 18px; color: #222; font-size: 1.05rem;
}
.precioDeEmprendimiento span { display: flex; flex-direction: column; }

.infoDeContactoEmprendimiento {
    border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
    white-space: pre-line; font-size: .95rem;
}

/* ------------------------------------------------------------------- tabla de unidades */
.tablaDeUnidades { overflow-x: auto; }
.tablaDeUnidades table { width: 100%; border-collapse: collapse; }
.tablaDeUnidades th {
    background: var(--pub-boton-fondo); color: var(--pub-boton-fuente);
    padding: 8px 10px; text-align: left; white-space: nowrap;
}
.tablaDeUnidades td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.tablaDeUnidades tbody tr:nth-child(odd) { background: #fafafa; }
.tablaDeUnidades td img { width: 90px; height: 68px; object-fit: cover; border-radius: 6px; }
.tablaDeUnidades td i { font-size: 1.3rem; color: var(--pub-boton-fondo); }

/* ==================================================================== mapa de propiedades */
/* El mapa a la izquierda y el listado a la derecha, dentro de una columna que scrollea sola.
   Medido en el viejo a 1440: la columna ocupa el 60% y el mapa el 40%, los dos de 900 de alto. */
.paginaDelMapa {
    display: flex;
    gap: 20px;
    max-width: 1170px;
    margin: 0 auto 50px;
    padding: 0 15px;
}
.mapaDeLaPagina { flex: 0 0 40%; height: 900px; border-radius: 10px; z-index: 1; }
.listadoDelMapa { flex: 1 1 0; min-width: 0; height: 900px; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 0 0; }
.sinPuntosEnElMapa { text-align: center; color: #666; margin: 0 0 50px; }

/* La fila del costado es mas corta que la del listado de inmuebles: foto de 169x118 a la
   izquierda, titulo con la direccion, precio arriba a la derecha, dos renglones de descripcion y
   Mas Detalle al pie. Todas las medidas son las del viejo. */
.filaDelMapa {
    display: grid;
    grid-template-columns: 202px minmax(0, 1fr);
    align-items: start;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 46, 82, .2);
    padding: 11px 10px;
    margin: 0 0 20px;
}
.filaDelMapa .fotoDelMapa img { width: 169px; height: 118px; object-fit: cover; display: block; }
.enlaceDelMapa { display: block; color: inherit; text-decoration: none; }
.enlaceDelMapa:hover { color: inherit; }
.encabezadoDelMapa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tituloDelMapa { font-size: 18px; font-weight: 500; line-height: 19.8px; color: #000; margin: 10px 0; }
.direccionDelMapa { display: block; font-size: 14px; font-weight: 700; line-height: 20px; color: #333; }
.precioDelMapa { font-size: 20px; font-weight: 700; color: #000; white-space: nowrap; padding: 10px 0; }
.descripcionDelMapa {
    font-size: 15px;
    font-weight: 300;
    color: #777;
    line-height: 21.4px;
    /* Los mismos 50 de alto del viejo, pero cortando por renglon: alla la descripcion ya viene
       recortada con puntos suspensivos y nunca asoma medio renglon. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 43px;
    overflow: hidden;
    margin: 1px 0 7px;
}
.pieDelMapa { display: flex; justify-content: flex-end; margin-top: 5px; }

@media (max-width: 991.98px) {
    .paginaDelMapa { flex-direction: column; }
    .mapaDeLaPagina { flex: 0 0 auto; width: 100%; height: 420px; }
    .listadoDelMapa { height: auto; overflow: visible; padding: 0; }
    .filaDelMapa { grid-template-columns: 1fr; }
    .filaDelMapa .fotoDelMapa img { width: 100%; height: 200px; }
}

/* La linea de etapa del emprendimiento: tres hitos con su punto, verde hasta la etapa actual y
   gris de ahi en mas. Medidas y colores del sitio de siempre: punto de 20 con borde blanco, barra
   de 7 y el verde #28a745. */
.lineaDeEtapa { display: flex; justify-content: center; margin-bottom: 40px; }
.barraDeEtapa { display: flex; justify-content: space-between; position: relative; width: 90%; }
.etapa {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    text-align: center;
    width: 33%;
}
.rotuloDeEtapa {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 26px;
    margin-bottom: 7px;
    color: #666;
    font-size: 12px;
    font-weight: 500;
}
.etapa.cumplida .rotuloDeEtapa { color: #28a745; }
.puntoDeEtapa {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: #a8a9aa;
}
.etapa.cumplida .puntoDeEtapa { background: #28a745; box-shadow: 0 0 10px -1px #28a745; }
/* La barra que une un hito con el anterior. */
.etapa:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 39px;
    left: -100%;
    width: 200%;
    height: 7px;
    z-index: 1;
    background: #d7d7d7;
}
.etapa.cumplida::before { background: #28a745; }
/* El primero y el ultimo apoyan su punto contra la punta de la barra. */
.etapa:first-child .rotuloDeEtapa { justify-content: left; }
.etapa:first-child .puntoDeEtapa { left: 0; transform: none; }
.etapa:last-child .rotuloDeEtapa { justify-content: flex-end; }
.etapa:last-child .puntoDeEtapa { left: 100%; transform: translateX(-100%); }
.etapa:last-child::before { left: -50%; width: 149.3%; }

/* ==================================================================== aparicion al scrollear */
/* Las secciones de la portada aparecen cuando entran en pantalla: suben 20 y se funden en 1s con
   ease-out. Es lo mismo que hace el viejo con .fade-in-bottom, incluido el escalonado de 0.1s por
   posicion que le pone el observador.
   El estado inicial -invisible- cuelga de una marca que pone el JS en el body: si el JS no corre
   o el navegador no tiene IntersectionObserver, la portada se ve entera de entrada en lugar de
   quedar en blanco. Alla eso no esta cuidado. */
body.conAparicion .apareceDesdeAbajo {
    opacity: 0;
    transform: translateY(20px);
    animation: apareceDesdeAbajo 1s ease-out forwards;
    animation-play-state: paused;
}
body.conAparicion .apareceDesdeAbajo.aparecio { animation-play-state: running; }
/* Los populares y el listado que les sigue aparecen en la mitad de tiempo: son los dos primeros
   bloques y esperar un segundo entero se hacia largo. Pedido de Daniel. */
body.conAparicion .apareceDesdeAbajo.apareceRapido { animation-duration: .5s; }
@keyframes apareceDesdeAbajo {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* A quien pidio menos movimiento, sin animacion. */
@media (prefers-reduced-motion: reduce) {
    body.conAparicion .apareceDesdeAbajo { opacity: 1; transform: none; animation: none; }
}