/* 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;
}
/* El color, el alto de renglon y el aire de los renglones del submenu. Se habia perdido al
   reescribir la regla de al lado: sin el, Bootstrap pintaba los renglones con SU gris oscuro y su
   propio espaciado, en vez del color que la inmobiliaria eligio. */
.submenuDelSitio .dropdown-item { color: var(--pub-submenu-fuente); padding: 0 20px; line-height: 34px; white-space: nowrap; }
/* Como en el sitio de siempre, al pasar el mouse el submenu solo cambia el color de la letra:
   antes le poniamos el fondo de hover del MENU, que es un color que la inmobiliaria eligio para
   otra cosa. Lo unico que se agrega es que el renglon se oscurezca apenas, pedido de Daniel.

   Se hace con un velo negro al 8% y no con un color propio porque no hay ninguna columna de
   fondo de submenu al pasar: asi anda con el fondo que haya elegido cada una. El fondo de
   Bootstrap se apaga, que si no pinta su gris por encima del color del submenu. */
.submenuDelSitio .dropdown-item:hover {
    color: var(--pub-submenu-hover);
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

/* 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, y al abrirse las rayas se
   vuelven una cruz en 0.3s. Los items van uno por renglon, centrados y separados por una rayita
   al 50%. Las medidas salen de medir www.acamporayasoc.com a 390.

   El color es el de la fuente del menu, el mismo que usan los items en escritorio: antes era la
   fuente del boton del buscador y solo servia para las inmobiliarias con la barra oscura. En una
   barra blanca quedaba blanco sobre blanco y el menu no se veia. */
@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-menu-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-menu-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(128, 128, 128, .4);
        border-bottom-color: color-mix(in srgb, var(--pub-menu-fuente) 50%, transparent);
    }
    .listaDelMenu > .nav-item > .nav-link { color: var(--pub-menu-fuente); font-size: 20px; line-height: 20px; padding: 10px 15px; }
    .submenuDelSitio { background: transparent; text-align: center; }
    .submenuDelSitio .dropdown-item { color: var(--pub-menu-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 foto ampliada ------------------------- */
/* Hacerle clic a la foto de una persona -el equipo, el martillero de la ficha y el de cada
   propiedad en los listados- la abre entera en un popup: en la tarjeta se ve en un circulito de
   100, de 76 en la ficha y de 50 en el listado, y la que sube la inmobiliaria mide bastante mas.
   El popup lo arma ampliar-foto.js la primera vez que se toca una foto. */
/* Al pasar el mouse crece un poco, como las tarjetas de los listados, para que se entienda que
   se puede abrir. */
.fotoQueAmplia { cursor: zoom-in; transition: transform .25s ease-out; }
.fotoQueAmplia:hover { transform: scale(1.08); }
.fotoAmpliada .modal-content { position: relative; background: #fff; border: 0; border-radius: 10px; overflow: hidden; }
.fotoAmpliada .fotoAmpliadaImagen { display: block; width: 100%; height: auto; }
.fotoAmpliada .fotoAmpliadaNombre { padding: 12px 16px; text-align: center; font-weight: 700; }
/* La cruz va sobre la foto, con un velo atras para que se vea sobre cualquier imagen. */
.fotoAmpliada .cerrarFotoAmpliada {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .85);
    opacity: 1;
}

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

    /* Con video pero SIN pantalla completa el bloque de la destacada y el buscador quedaba en el
       flujo, y el video -que va absoluto- lo tapaba entero: en el celular no se veia ni el
       buscador. Ademas el bloque estiraba el encabezado a mas de 1100 de alto, asi que la home
       arrancaba con una pared de video. Queda como alla: el buscador apoyado al pie del video,
       sobre el, y la destacada no se muestra. */
    .conVideo:not(.modoFullPantalla) .sobreElEncabezado {
        position: absolute;
        top: auto;
        bottom: 0;
        background: transparent;
    }
    .conVideo:not(.modoFullPantalla) .destacadaPrincipal { display: none; }
    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);
    /* El mismo crecer al pasar el mouse que hacen las tarjetas grandes de emprendimientos. */
    transition: transform .4s;
}
.tarjetaSobreFoto:hover { transform: scale(1.03); z-index: 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; }
    /* La foto del slider del celular es una foto de celular -las que suben miden 350x600-, no el
       banner de 1920 del escritorio, y con el ancho de 1920 que llevan las dos se dibujaba a
       1920x3291: el encabezado quedaba de 3600 y la foto, recortada al ancho del telefono, se
       veia estirada. Va al ancho de la pantalla y con su proporcion. En pantalla completa no
       corre: alla la foto ya se estira a la ventana con object-fit. */
    .encabezadoDePortada:not(.modoFullPantalla) .sliderMovil .carousel-item img {
        width: 100%;
        min-height: 0;
    }
    .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 ------------------------- */

/* Una raya fina de punta a punta cierra la portada antes del pie, con el mismo gris y el mismo
   grosor que las lineas de los titulos de seccion. Sin texto: es solo el cierre. */
.rayaAntesDelPie { border-top: 2px solid #e6e6e6; margin-top: 40px; }
.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; }
}