/* ==========================================================================
   Complementos del sitio público
   --------------------------------------------------------------------------
   site.css y tokens.css vienen tal cual del sitio nuevo (sg-crm,
   resources/css/): no se editan acá, así se pueden volver a copiar.

   Este archivo agrega sólo lo que aquel diseño no trae — piezas que en el
   Figma no existen pero que este sitio necesita (La empresa, la ficha de
   emprendimiento, el diálogo de tasación, la paginación "Ver más", mapas
   reales en vez de la imagen estática) — consumiendo los mismos tokens.
   ========================================================================== */

/* ==========================================================================
   Header fijo — rojo traslúcido con el logo blanco, como el sitio original (se
   probó blanco traslúcido con el logo rojo y se volvió al rojo). Arriba, una
   barra fina gris oscura con los teléfonos, los WhatsApp y las redes.

   Queda arriba al hacer scroll y, pasado el primer tramo, se achica: la barra
   se pliega y el logo baja de tamaño (site.js le pone .site-header--compacto).
   Es fixed y no sticky: el body reserva el alto completo, así que achicarlo
   no mueve el contenido ni hace saltar el scroll. En el home el hero sube
   debajo del header y la foto se ve a través de él.
   ========================================================================== */
:root {
    --header-transicion: .25s ease;
    --topbar-height: 34px;
    --header-height: 130px;             /* barra 34 + header 96 */
    --header-height-compacto: 72px;
    --header-fondo: rgba(219, 0, 27, .9);   /* --color-accent al 90 % */
}

body { padding-top: var(--header-height); }

/* Los anclas (#contacto, #mapa) no quedan tapadas por el header. */
html { scroll-padding-top: calc(var(--header-height-compacto) + 16px); }

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    background: var(--header-fondo);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--color-text-on-dark);
    transition: height var(--header-transicion), box-shadow var(--header-transicion);
}

/* --- Barra superior ------------------------------------------------------ */
.site-topbar {
    flex: none;
    height: var(--topbar-height);
    overflow: hidden;
    background: var(--color-text-primary);
    color: var(--color-text-on-dark);
    transition: height var(--header-transicion);
}

.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
}

.site-phones {
    display: flex;
    gap: 32px;
}

.site-phones__oficina {
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-phones__nombre {
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-bold);
}

.site-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-meta);
    white-space: nowrap;
    transition: opacity .15s ease;
}

.site-phone:hover { opacity: .75; }
.site-phone svg { flex: none; width: 13px; height: 13px; }

.site-social {
    gap: 16px;
    margin-left: 0;
}

.site-social__link--instagram svg,
.site-social__link--youtube svg,
.site-social__link--facebook svg { width: 16px; height: 16px; }

/* --- Header ---------------------------------------------------------------- */
.site-header__inner {
    flex: 1;
    height: auto;
    padding-bottom: 0;
    transition: padding var(--header-transicion);
}

.site-header__logo img {
    width: 152px;
    height: 64px;
    transition: width var(--header-transicion), height var(--header-transicion);
}

.site-nav { gap: 4px; }

/* Los anchos fijos del Figma eran para Poppins: con la serif cada ítem mide lo suyo. */
.site-nav__link {
    width: auto;
    height: 40px;
    padding-inline: 12px;
    letter-spacing: 0;
    transition: color .15s ease;
}

.site-nav__link:hover { opacity: .8; }
.site-nav__link.is-active { font-weight: var(--font-weight-bold); }

.site-header--compacto {
    height: var(--header-height-compacto);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08);
}

.site-header--compacto .site-topbar { height: 0; }
.site-header--compacto .site-header__logo img { width: 114px; height: 48px; }

@media (min-width: 1024px) {
    .site-header { height: var(--header-height); }
    .site-header--compacto { height: var(--header-height-compacto); }
}

@media (max-width: 1240px) {
    .site-topbar__inner { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-topbar,
    .site-header__inner,
    .site-header__logo img { transition: none; }
}

/* El mapa del listado se pega debajo del header compacto. */
.listado__mapa { top: calc(var(--header-height-compacto) + 16px); }

/* ==========================================================================
   Hero del home
   --------------------------------------------------------------------------
   Sube debajo del header traslúcido, como en el Figma: el hero vuelve a medir
   734 y el buscador, la pill y los accesos usan las posiciones de site.css.
   ========================================================================== */
@media (min-width: 1024px) {
    .hero { margin-top: calc(-1 * var(--header-height)); }
}

/* --- Botón "Buscar": mismo estilo que la pill "Buscar por código" --------
   Sin el borde por defecto del <button>, con la lupa y 50px de alto (la
   barra mide 59). En mobile la pill es gris; el botón queda rojo porque es
   la acción principal del buscador. */
.search-bar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4.19px;
    width: auto;
    height: var(--hero-pill-height);
    padding: 14px 25px 15px;
    border: 0;
    cursor: pointer;
}

.search-bar__submit .icon {
    flex: none;
    width: var(--icon-size-search);
    height: var(--icon-size-search);
    color: var(--color-icon-on-dark);
}

@media (max-width: 1023px) {
    /* Buscar y "Buscar por código" a todo el ancho, con el margen lateral de 16px. */
    .search-bar__submit {
        align-self: stretch;
        width: auto;
        height: var(--hero-pill-height);
        margin-inline: 16px;
        padding: 14px 9px 15px;
        font-size: var(--font-size-field);
    }

    .hero__code,
    .hero__code--js.hero__code--abierto { width: calc(100% - 32px); }

    /* El <select> cubre toda la fila (también la flecha y los costados), así
       tocar en cualquier parte abre el desplegable. La flecha queda encima
       sin recibir el toque (pointer-events: none). */
    .search-bar__field { padding-inline: 0 66px; }

    .search-bar__select {
        position: absolute;
        inset: 0;
        height: 100%;
        padding: 0 calc(66px + var(--icon-size-arrow) + 8px) 0 66px;
    }
}

/* --- Slider (back/sliders.php): foto o video de fondo ------------------- */
.hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--color-text-primary);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}

.hero-slide.is-activa { opacity: 1; visibility: visible; }

.hero-slide .hero__image { width: 100%; height: 100%; object-fit: cover; }

/* Velo a la izquierda para que el texto se lea sobre cualquier foto. */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

/* Arriba a la izquierda, alineado con el logo y sobre la barra de búsqueda.
   Tipografía del hover de Emprendimientos (99:5016). */
.hero-slide__texto {
    position: absolute;
    z-index: 1;
    top: calc(var(--header-height) + 40px);
    left: max(16px, calc((100% - var(--container-width)) / 2));
    max-width: 520px;
    color: var(--color-text-on-dark);
    line-height: var(--line-height-relaxed);
}

.hero-slide__titulo {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-section);
}

.hero-slide__bajada {
    margin-top: 8px;
    font-size: var(--font-size-field);
    letter-spacing: var(--letter-spacing-md);
}

.hero-slide__ubicacion {
    margin-top: 2px;
    font-size: 15px;
    letter-spacing: 0;
}

.hero-slide__ver {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 0;
    text-decoration: underline;
}

.hero-slide__ver:hover { text-decoration: none; }

/* Controles abajo a la izquierda, a la altura de los accesos circulares. */
.hero-slider__controles {
    position: absolute;
    z-index: 2;
    top: 670px;
    left: max(16px, calc((100% - var(--container-width)) / 2));
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hero-action-size);
}

.hero-slider__flecha {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: var(--color-text-on-dark);
    cursor: pointer;
}

.hero-slider__flecha .icon { width: 6px; height: 11px; }

.hero-slider__punto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--color-text-on-dark);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hero-slider__punto[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* ==========================================================================
   Animación de entrada de las cards al hacer scroll (site.js: animarAlEntrar).
   La clase .animar la pone el JS: sin JavaScript, o con "reducir movimiento",
   las cards se ven desde el principio.
   ========================================================================== */
.animar {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .55s ease var(--animar-retraso, 0ms),
        transform .55s cubic-bezier(.2, .7, .2, 1) var(--animar-retraso, 0ms);
}

.animar.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Badges de operación ------------------------------------------------
   El Figma los dibuja de ancho fijo para "Venta". "Alquiler temporario" y
   "Venta o alquiler" no entran: el ancho del archivo pasa a ser el mínimo. */
.badge--operacion,
.tarjeta__badge,
.detalle__badge {
    width: auto;
    padding-inline: 14px;
    white-space: nowrap;
}

.badge--operacion { min-width: var(--card-badge-width); }
.tarjeta__badge { min-width: var(--list-badge-width); }
.detalle__badge { min-width: var(--detail-badge-width); }

/* --- Mapa de la ficha: Google Maps embebido en el hueco de la imagen ----- */
.detalle__mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Mapa del listado: Leaflet, un punto por card (site.js) ---------------
   z-index: 0 encierra los z-index de Leaflet (hasta 1000) para que el mapa no
   tape el header fijo ni el panel de filtros. */
.listado__mapa {
    z-index: 0;
    background: var(--color-surface-card);
    font-family: var(--font-base);
}

/* Dirección exacta */
.mapa-pin {
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

.mapa-pin.is-activo {
    transform: scale(1.4);
    background: var(--color-accent-active);
}

/* Zona aproximada (la ficha no publica la dirección) */
.mapa-zona {
    stroke: var(--color-accent);
    stroke-width: 1.5;
    fill: var(--color-accent);
    fill-opacity: 0.14;
    transition: fill-opacity 0.15s ease;
}

.mapa-zona.is-activo {
    stroke-width: 2.5;
    fill-opacity: 0.35;
}

.listado--mapa .tarjeta--en-mapa {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.mapa-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-card);
}

.mapa-popup .leaflet-popup-content {
    margin: 0;
    line-height: 1.35;
}

/* .leaflet-container a pinta los enlaces de azul */
.leaflet-container .mapa-popup__enlace {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.mapa-popup__enlace img {
    width: 100%;
    height: 130px;
    margin-bottom: 8px;
    object-fit: cover;
}

.mapa-popup__enlace strong,
.mapa-popup__enlace span { padding-inline: 12px; }

.mapa-popup__enlace strong { font-size: 14px; }

.mapa-popup__precio {
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

.mapa-popup__lugar {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* --- Envío de los formularios de contacto (site.js, iniciarContacto) ----- */
form[data-contacto][hidden] { display: none; }

/* Campo trampa para bots: .detalle__consulta input le daría ancho y alto. */
form[data-contacto] .campo-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}

/* Botón mientras espera la respuesta: spinner + "Enviando…". */
.btn--cargando,
.btn--cargando:disabled {
    gap: 8px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    cursor: progress;
    opacity: .85;
}

.spinner {
    width: 1em;
    height: 1em;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-giro .7s linear infinite;
}

@keyframes spinner-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 1.6s; }
}

/* Card que reemplaza al formulario con el resultado del envío. */
.form-respuesta {
    --respuesta-color: #15803d;
    --respuesta-fondo: #f0fdf4;
    --respuesta-borde: #86efac;

    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 18px 20px;
    background: var(--respuesta-fondo);
    border: 1px solid var(--respuesta-borde);
    border-left: 4px solid var(--respuesta-color);
    border-radius: var(--radius-field);
    color: var(--color-text-primary);
    text-align: left;
    animation: form-respuesta-entrada .25s ease-out;
}

.form-respuesta--error {
    --respuesta-color: #b91c1c;
    --respuesta-fondo: #fef2f2;
    --respuesta-borde: #fca5a5;
}

.form-respuesta:focus { outline: none; }
.form-respuesta:focus-visible { outline: 2px solid var(--respuesta-color); outline-offset: 2px; }

.form-respuesta__icono {
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--respuesta-color);
}

.form-respuesta__titulo {
    margin: 0 0 4px;
    font-weight: var(--font-weight-bold);
    color: var(--respuesta-color);
}

.form-respuesta__texto {
    margin: 0;
    font-size: var(--font-size-meta);
    line-height: 1.4;
}

.form-respuesta__reintentar {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-bold);
    color: var(--respuesta-color);
    text-decoration: underline;
    cursor: pointer;
}

@keyframes form-respuesta-entrada {
    from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .form-respuesta { animation: none; }
}

/* Botón "Enviar": ancho completo y con ícono (pisa los 125px de site.css). */
.contact-form .contact-form__enviar {
    width: 100%;
    gap: 8px;
}

/* Combo "Sucursal" del formulario de contacto: mismo campo que los inputs, con la
   flecha del buscador en lugar de la nativa. Sin elegir (valor vacío, :invalid por
   ser required) se lee como placeholder. */
/* Selector de sucursal: un botón ancho partido en tres (Castelar | Ambas | Leloir).
   Los radios quedan ocultos y el label hace de segmento. */
.contact-form__sucursal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: var(--color-surface-field);
    overflow: hidden;
}

.contact-form__sucursal label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36.749px;
    padding-inline: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-sm);
    text-align: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.contact-form__sucursal label + input + label { border-left: 1px solid var(--color-divider); }
.contact-form__sucursal label:hover { color: var(--color-text-primary); }

.contact-form__sucursal input:checked + label {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.contact-form__sucursal input:focus-visible + label {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* ==========================================================================
   Listado
   ========================================================================== */
.listado__mas {
    flex: none;
    align-self: center;
    margin-block: 8px 24px;
}

.listado__mas[aria-busy="true"] { opacity: .6; cursor: progress; }

/* --- Vista del listado -------------------------------------------------
   Por defecto sólo cards, una por fila a todo el ancho de la barra de
   filtros, y la página scrollea entera. Con .listado--mapa (botón "Ver mapa",
   site.js) vuelve el diseño del Figma: columna con scroll propio + mapa.
   Mobile no tiene mapa ni botón: siempre una card por fila. */
.listado__vista-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 24px 0 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-control);
    letter-spacing: var(--letter-spacing-control);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.listado__vista-btn:hover { color: var(--color-accent); }

.listado__vista-btn > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.listado__vista-btn .icon { width: 18px; height: 18px; }

.listado__vista-btn .listado__vista-mapa,
.listado--mapa .listado__vista-btn .listado__vista-cards { display: none; }

.listado--mapa .listado__vista-btn .listado__vista-mapa { display: inline-flex; }

@media (min-width: 1024px) {
    .listado:not(.listado--mapa) {
        padding-bottom: 64px;
    }

    .listado:not(.listado--mapa) .listado__cuerpo {
        left: 0;
        width: var(--filterbar-width);
        max-width: calc(100% - 32px);
        grid-template-columns: minmax(0, 1fr);
    }

    .listado:not(.listado--mapa) .listado__resultados {
        height: auto;
        padding-right: 0;
        overflow: visible;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    /* A todo el ancho la card del Figma (foto de 291) queda vacía: la foto
       crece y los cuatro datos van en una sola fila. */
    .listado:not(.listado--mapa) .tarjeta {
        width: auto;
        grid-template-columns: 460px 1fr;
    }

    .listado:not(.listado--mapa) .tarjeta__cuerpo { padding-inline: 40px; }

    .listado:not(.listado--mapa) .tarjeta__datos {
        grid-template-columns: repeat(4, max-content);
        column-gap: 40px;
        margin-top: 24px;
    }

    .listado:not(.listado--mapa) .listado__mas,
    .listado:not(.listado--mapa) .listado__vacio {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .listado:not(.listado--mapa) .listado__mas { margin-block: 16px 0; }

    .listado:not(.listado--mapa) .listado__mapa { display: none; }
}

/* Volver arriba (site.js, iniciarVolverArriba). En mobile queda a la altura
   del pill de filtros, del otro lado. */
.listado__arriba {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-on-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    cursor: pointer;
    animation: listado-arriba-entra .2s ease;
    transition: background-color .15s ease, transform .15s ease;
}

.listado__arriba[hidden] { display: none; }
.listado__arriba:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.listado__arriba .icon { width: 24px; height: 24px; }

@keyframes listado-arriba-entra {
    from { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 1023px) {
    .listado__arriba {
        right: 13px;
        bottom: 60px;
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .listado__arriba { animation: none; transition: none; }
}

/* Campos numéricos del panel (dormitorios, precio, superficie): el mismo campo
   que "Buscar por ubicación", de a dos por fila. */
.panel-filtros__rango {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.panel-filtros__opciones > .panel-filtros__rango { margin-top: 8px; }

/* Selección múltiple (filtro-checkboxes.php): dos columnas y casilla cuadrada
   en lugar del círculo del Figma (site.css). */
.panel-filtros__columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.panel-filtros__opcion span { min-width: 0; line-height: 1.15; }

.panel-filtros__opcion input[type="checkbox"] { border-radius: 3px; }

.panel-filtros__opcion input[type="checkbox"]:checked {
    background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.panel-filtros__opcion input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.panel-filtros__numero { display: block; }

/* ==========================================================================
   Fichas (propiedad y emprendimiento)
   ========================================================================== */

/* Descripción cargada desde el panel: trae <br>, <p> y listas propias. */
.detalle__html {
    font-size: var(--font-size-detail-body);
    letter-spacing: var(--letter-spacing-detail-body);
    color: var(--color-text-muted);
}

.detalle__html p + p { margin-top: .5em; }
.detalle__html ul { padding-left: 1.2em; list-style: disc; }

.detalle__enlace {
    color: var(--color-accent);
    text-decoration: underline;
}

.detalle__enlace:hover { text-decoration: none; }

@media (min-width: 1024px) {
    /* El Figma sólo dibuja las flechas en mobile; en desktop la galería muestra
       tres fotos y sin flechas no habría forma de ver el resto. */
    .detalle__prev,
    .detalle__next {
        position: absolute;
        top: 50%;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .35);
        color: var(--color-text-on-dark);
        cursor: pointer;
        transition: background-color .15s ease;
    }

    .detalle__prev { left: 20px; }
    .detalle__next { right: 20px; }
    .detalle__prev:hover,
    .detalle__next:hover { background: rgba(0, 0, 0, .55); }
    .detalle__prev .icon,
    .detalle__next .icon { width: 8px; height: 14px; }

    /* La caja de consulta sube 94px y queda a la altura del título: un título
       más largo que el del Figma pasaría por debajo. Se corta antes de ella. */
    .detalle__titulo { max-width: calc(100% - var(--detail-aside-width) - 24px); }

    /* Con una sola foto, la principal ocupa todo el ancho. */
    .detalle__galeria--unica { grid-template-columns: 1fr; }
    .detalle__galeria--unica .detalle__foto-principal { height: 596px; }
}

/* ==========================================================================
   Emprendimientos — hover de la card (Figma 99:5016, ver docs/figma-efectos.md
   en sg-crm): velo degradado a negro con dirección, nombre y "Ver más".
   ========================================================================== */
.emprendimientos__item {
    position: relative;
    display: block;
    color: var(--color-text-on-dark);
}

.emprendimientos__velo {
    position: absolute;
    inset: 3px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 30px 22px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
    line-height: var(--line-height-relaxed);
    opacity: 0;
    transition: opacity .12s ease;
}

.emprendimientos__item:hover .emprendimientos__velo,
.emprendimientos__item:focus-visible .emprendimientos__velo { opacity: 1; }

.emprendimientos__direccion {
    font-size: 15px;
    letter-spacing: 0;
    text-decoration: underline;
}

.emprendimientos__nombre {
    font-size: var(--font-size-card-title);
    letter-spacing: var(--letter-spacing-card);
    line-height: var(--line-height-tight);
}

.emprendimientos__ver {
    font-size: 14px;
    letter-spacing: 0;
    text-decoration: underline;
}

/* Sin mouse no hay hover: el velo queda visible para que se lea qué es cada foto. */
@media (hover: none) {
    .emprendimientos__velo { opacity: 1; }
}

.emprendimientos--otros {
    padding-top: 63px;
    background: var(--color-surface-section);
}

.emprendimientos--otros .featured__title { margin-bottom: 23px; }

/* ==========================================================================
   Tasaciones — secciones con subtítulo e ícono (parciales/seccion-texto),
   listas de "Documentación" y "Conformación del valor" y el diálogo
   "Tasar mi propiedad". Reemplazan al acordeón .accordion-page de site.css.
   ========================================================================== */
.text-page {
    /* El bloque NO está centrado: va de x=124 a x=1324, o sea 4px a la derecha
       del centro del frame de 1440. */
    position: relative;
    left: 4px;
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
    padding: 107px 74.8px 160px 75px;
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.text-page__title {
    margin: 0;
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-section);
    color: var(--color-text-muted);
    /* Línea a todo el ancho del bloque, no sólo bajo el texto. */
    padding-bottom: 8px;
    border-bottom: 2px solid currentColor;
    display: flex;
    align-items: center;
    gap: 16px;
}

.text-page__icon {
    flex: none;
    width: 44px;
    height: 44px;
    color: var(--color-text-muted);
}

.text-page__content {
    padding-top: 28.8px;
    font-size: 18px;
    font-weight: var(--font-weight-regular);
    line-height: 28px;
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-muted);
}

/* La caja del cuerpo es más angosta que el bloque: en el PDF la línea más
   larga mide 801.11px y los cortes se mantienen entre 795 y 860. */
.text-page__content p { max-width: 810px; }

/* Botón "Tasar mi propiedad" — 252×66, texto 20px Bold */
/* "Tasar mi propiedad" — enlace de texto en rojo, no botón */
.text-page__link {
    display: inline-block;
    margin-top: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

.text-page__link:hover { color: var(--color-accent-hover); text-decoration: underline; }

.lista-definiciones { margin: 24px 0 0; max-width: 810px; }

.lista-definiciones dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.lista-definiciones dd {
    margin: 4px 0 24px;
    font-size: var(--font-size-field);
    line-height: 26px;
}

.lista-definiciones a { color: var(--color-accent); text-decoration: underline; }

/* El formulario es el del footer, así que el diálogo toma su fondo. */
.dialogo {
    width: min(449px, calc(100% - 32px));
    padding: 35px 40px 40px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-surface-footer);
    color: var(--color-text-on-dark);
    box-shadow: var(--shadow-card);
}

/* Mismo velo que el panel de filtros del Figma. */
.dialogo::backdrop { background: rgba(0, 0, 0, .251); }

.dialogo__cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.dialogo__cerrar .icon { width: 19px; height: 19px; }

/* ==========================================================================
   La empresa — sin frame en el Figma: tipografía del acordeón de Tasaciones
   y cards con el fondo y el radio de las de propiedad.
   ========================================================================== */
.empresa {
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
    padding-top: 107px;
    padding-bottom: 103px;
}

.empresa__texto {
    max-width: 900px;
    font-size: var(--font-size-card-title);
    line-height: 36px;
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-muted);
}

.empresa__texto p + p { margin-top: 24px; }
.empresa__texto strong { color: var(--color-text-primary); }

.empresa__sucursales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 72px;
}

.empresa__sucursal {
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-card);
}

.empresa__sucursal img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.empresa__sucursal-datos {
    padding: 24px 35px 28px;
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.empresa__sucursal-datos h2 {
    margin-bottom: 8px;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-primary);
}

.empresa__sucursal-datos a { text-decoration: underline; }
.empresa__sucursal-datos a:hover { color: var(--color-accent); }

/* ==========================================================================
   Página simple (ficha no encontrada)
   ========================================================================== */
.pagina-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 120px 16px;
    background: var(--color-surface-section);
    text-align: center;
}

.pagina-simple__titulo {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-section);
}

.pagina-simple__texto { color: var(--color-text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   Header mobile — sin la barra superior: los teléfonos van al pie del menú
   desplegado (.site-nav__phones), que es blanco.
   ========================================================================== */
.site-nav__phones { display: none; }

@media (max-width: 1023px) {
    .site-topbar { display: none; }

    .site-header__inner { align-items: center; padding-block: 0; }
    .site-header__logo,
    .site-header--compacto .site-header__logo { padding-top: 0; }
    .site-header__burger,
    .site-header--compacto .site-header__burger {
        align-items: center;
        padding-top: 0;
        height: 48px;
        color: var(--color-text-on-dark);
    }

    /* Con el header compacto, el justify-self: end de desktop dejaba el menú
       desplegado angosto y pegado a la derecha. */
    .site-nav.is-open {
        justify-self: stretch;
        background: var(--color-surface);
        color: var(--color-text-primary);
        backdrop-filter: none;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
    }

    .site-nav.is-open .site-nav__link { border-top: 1px solid var(--color-divider); }
    .site-nav.is-open .site-nav__link.is-active { color: var(--color-accent); }
    .site-nav.is-open .site-nav__cantidad {
        background: var(--color-accent);
        color: var(--color-on-accent);
    }

    .site-nav.is-open .site-nav__phones {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-divider);
        padding-block: 6px;
    }

    .site-nav.is-open .site-phone {
        gap: 10px;
        padding: 12px 15px;
        font-size: var(--font-size-nav);
    }

    .site-nav.is-open .site-phone span { font-weight: var(--font-weight-bold); }
    .site-nav.is-open .site-phone svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   Favoritos — corazón en las cards, acceso en el header y página propia
   --------------------------------------------------------------------------
   Se guardan en el navegador (site.js: iniciarFavoritos). Sin JS o sin
   almacenamiento el corazón queda oculto ([hidden]); en mobile site.css le
   pone display: grid a .tarjeta__fav, por eso el !important.
   ========================================================================== */
.favorito[hidden] { display: none !important; }

.favorito {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: transform .15s ease;
}

.favorito:hover { transform: scale(1.08); }
.favorito:focus-visible { border-radius: 50%; }
.favorito .icon { width: 19px; height: 18px; }
.favorito.is-activo .icon path { fill: currentColor; }

/* Card de la grilla (home, relacionadas): arriba a la derecha de la foto,
   que arranca a 12.95px del tope y termina a 11.817px del borde derecho. */
.property-card-wrap {
    position: relative;
    display: grid;
}

.favorito--grilla {
    position: absolute;
    top: 24.95px;
    right: 23.817px;
    z-index: 1;
}

/* Card del listado. Mobile: el círculo del Figma (site.css, 31.32px).
   Desktop: arriba a la derecha de la foto, que mide 291 con el mapa y 460
   en la vista de sólo cards. */
@media (min-width: 1024px) {
    .tarjeta__fav {
        position: absolute;
        top: 14px;
        left: calc(var(--list-card-image-width) - 38px - 14px);
        z-index: 1;
    }

    .listado:not(.listado--mapa) .tarjeta__fav { left: calc(460px - 38px - 14px); }
}

@media (max-width: 1023px) {
    .favorito.tarjeta__fav { width: 31.32px; height: 31.32px; box-shadow: none; }
    .favorito.tarjeta__fav .icon { width: 17px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .favorito { transition: none; }
    .favorito:hover { transform: none; }
}

/* --- "Mis favoritos" en el menú, con la cantidad guardada ---------------
   Ancho fijo como los demás ítems (para que el bold de la página activa no
   corra el menú), con lugar para la burbuja de la cantidad. */
.site-nav__link--favoritos { gap: 6px; }
.site-nav__link { white-space: nowrap; }

.site-nav__cantidad {
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
}

.site-nav__cantidad[hidden] { display: none; }

/* --- Fecha en que se agregó (sólo en Mis favoritos) --------------------- */
.tarjeta__agregado {
    position: absolute;
    top: 16px;
    right: var(--list-card-body-inset);
    margin: 0;
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

.listado:not(.listado--mapa) .tarjeta__agregado { right: 40px; }

@media (max-width: 1023px) {
    /* Entre el badge y el corazón, centrado en su misma línea (el centro de
       los dos queda a 14.93 + 26.85 / 2 = 28.36px). */
    .tarjeta__agregado,
    .listado:not(.listado--mapa) .tarjeta__agregado {
        top: 28.36px;
        right: 50px;
        transform: translateY(-50%);
        padding: 2px 8px;
        font-size: 12px;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, .9);
        color: var(--color-text-primary);
    }
}

/* --- Página Mis favoritos: la barra lleva título y cantidad -------------- */
.listado--favoritos .listado__barra-filtros {
    flex: 1;
    border-right: 0;
}

.listado__favoritos-titulo {
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-control);
    color: var(--color-text-primary);
}

.listado__favoritos-conteo {
    font-size: var(--font-size-control);
    letter-spacing: var(--letter-spacing-control);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Botón flotante de WhatsApp (home) — uno solo, verde, con selector de
   oficina. Reemplaza los cuatro accesos circulares del hero.
   ========================================================================== */
:root {
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1ebe5b;
}

.wa-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
}

.wa-flotante__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: var(--color-text-on-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    list-style: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.wa-flotante__boton::-webkit-details-marker { display: none; }
.wa-flotante__boton:hover { background: var(--color-whatsapp-hover); transform: scale(1.05); }
.wa-flotante__boton:focus-visible { border-radius: 50%; }
.wa-flotante__boton svg { width: 32px; height: 32px; }

.wa-flotante__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 260px;
    padding: 14px;
    border-radius: var(--radius-field);
    background: var(--color-surface-page);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.wa-flotante__titulo {
    margin-bottom: 6px;
    padding-inline: 10px;
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

.wa-flotante__opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    line-height: 1.35;
    transition: background-color .15s ease;
}

.wa-flotante__opcion:hover { background: rgba(0, 0, 0, .05); }
.wa-flotante__opcion svg { flex: none; width: 22px; height: 22px; color: var(--color-whatsapp); }
.wa-flotante__opcion strong { display: block; }

@media (max-width: 1023px) {
    .wa-flotante { right: 16px; bottom: 16px; }
    .wa-flotante__boton { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .burger-linea { transition: none; }
    .wa-flotante__boton { transition: none; }
    .wa-flotante__boton:hover { transform: none; }
}

@media (max-width: 1023px) {
    /* --- Header fijo mobile: 72px, compacto 56 -------------------------- */
    :root {
        --header-height-mobile: 72px;
        --header-height-compacto-mobile: 56px;
    }

    body { padding-top: var(--header-height-mobile); }
    html { scroll-padding-top: calc(var(--header-height-compacto-mobile) + 16px); }

    .site-header { height: var(--header-height-mobile); }
    .site-header--compacto { height: var(--header-height-compacto-mobile); }

    .site-header__logo img { width: 105px; height: 44px; }
    .site-header--compacto .site-header__inner { display: flex; }
    .site-header--compacto .site-header__logo img { width: 86px; height: 36px; }

    /* Hamburguesa → X con el menú abierto. Las líneas de arriba y abajo bajan
       al centro (y=9 del viewBox 38×18), se acortan y giran ±45°. */
    .site-header__burger svg { overflow: visible; }
    .burger-linea {
        transform-box: view-box;
        transform-origin: 19px 9px;
        transition: transform .25s ease, opacity .2s ease;
    }
    .site-header__burger[aria-expanded="true"] .burger-linea--1 { transform: rotate(45deg) scaleX(.6) translateY(8px); }
    .site-header__burger[aria-expanded="true"] .burger-linea--2 { opacity: 0; transform: scaleX(0); }
    .site-header__burger[aria-expanded="true"] .burger-linea--3 { transform: rotate(-45deg) scaleX(.6) translateY(-8px); }

    /* El menú desplegado cuelga del borde del header, mida lo que mida. */
    .site-nav.is-open { top: 100%; }

    /* --- Slider mobile: la foto del hero sube debajo del header ---------- */
    .hero { margin-top: calc(-1 * var(--header-height-mobile)); }

    .hero-slider {
        position: relative;
        height: var(--hero-height-mobile);
    }

    .hero-slide .hero__image { height: 100%; }
    .hero > .hero__image { height: var(--hero-height-mobile); }

    .hero-slide__texto {
        top: auto;
        bottom: 48px;
        right: 16px;
        max-width: none;
    }

    .hero-slide__titulo { font-size: var(--font-size-card-title); letter-spacing: var(--letter-spacing-card); }
    .hero-slide__bajada { display: none; }

    .hero-slider__controles { top: auto; bottom: 12px; height: auto; }

    /* Mismo cuerpo que .detalle__descripcion p en el frame mobile 99:3512. */
    .detalle__html {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0;
    }

    .detalle__titulo { max-width: none; }

    .empresa { padding: 40px 16px 48px; }

    .empresa__texto {
        font-size: var(--font-size-field);
        line-height: 24px;
    }

    .empresa__sucursales { margin-top: 40px; }

    .lista-definiciones dd { font-size: var(--font-size-body); line-height: 22px; }

    .text-page {
        left: 0;
        width: 100%;
        padding: 40px 16px 64px;
        gap: 40px;
    }

    .text-page__title {
        font-size: var(--font-size-card-title);
        padding-bottom: 6px;
        gap: 12px;
    }

    .text-page__icon { width: 32px; height: 32px; }

    .text-page__content {
        padding-top: 16px;
        font-size: var(--font-size-body);
        line-height: 22px;
    }

    .text-page__content p { max-width: 100%; }

    .text-page__link { margin-top: 16px; }

    .emprendimientos--otros { padding-top: 40px; }
}

@media (max-width: 640px) {
    .empresa__sucursales { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contacto — sin frame en el Figma: el título de Emprendimientos, cards con
   el fondo y el radio de las de propiedad, el mapa de Leaflet del listado y
   el formulario del footer sobre fondo claro.
   ========================================================================== */
.contacto {
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
    padding-top: 107px;
    padding-bottom: 80px;
}

.contacto__bajada {
    max-width: 760px;
    font-size: var(--font-size-field);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.contacto__sucursales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.contacto__sucursal {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-card);
}

.contacto__sucursal-foto {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.contacto__sucursal-datos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px 28px;
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-nav);
    color: var(--color-text-muted);
}

.contacto__sucursal-datos h2 {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-primary);
}

.contacto__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacto__lista li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.contacto__lista .icon {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--color-accent);
}

.contacto__lista a {
    overflow-wrap: anywhere;
    text-decoration: underline;
}

.contacto__lista a:hover { color: var(--color-accent); }

.contacto__horarios {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
}

.contacto__horarios dd { color: var(--color-text-primary); }

.contacto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin-top: auto;
}

.contacto__ver-mapa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-base);
    font-size: var(--font-size-meta);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.contacto__ver-mapa .icon { width: 14px; height: 14px; }

.contacto__ver-mapa:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.contacto__llegar {
    font-size: var(--font-size-meta);
    color: var(--color-text-primary);
    text-decoration: underline;
}

.contacto__llegar:hover { color: var(--color-accent); }

/* z-index: 0 encierra los z-index de Leaflet, como en el listado. */
.contacto__mapa {
    z-index: 0;
    min-height: 460px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-surface-card);
    font-family: var(--font-base);
}

/* Formulario sobre fondo claro: el del footer va sobre gris oscuro. */
.contacto-vende__form {
    padding: 24px 28px 28px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
}

.contacto-vende__form .contact-form__input,
.contacto-vende__form .contact-form__textarea {
    border: 1px solid var(--color-divider);
}

.contacto-vende__form .contact-form__textarea { height: 110px; }

.mapa-popup__sucursal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    font-size: var(--font-size-meta);
    color: var(--color-text-muted);
}

.mapa-popup__sucursal strong {
    font-size: 14px;
    color: var(--color-text-primary);
}

.leaflet-container .mapa-popup__sucursal a {
    margin-top: 4px;
    color: var(--color-accent);
    text-decoration: underline;
}

/* --- Vendé o alquilá con nosotros --------------------------------------- */
.contacto-vende {
    padding-block: 80px;
    background: var(--color-surface-card);
    scroll-margin-top: var(--header-height-compacto);
}

.contacto-vende__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 64px;
    align-items: center;
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
}

.contacto-vende__titulo {
    margin-bottom: 16px;
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-section);
    color: var(--color-text-primary);
}

.contacto-vende__texto {
    font-size: var(--font-size-field);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.contacto-vende__puntos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block: 24px;
}

.contacto-vende__puntos li {
    position: relative;
    padding-left: 22px;
}

.contacto-vende__puntos li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}

.contacto-vende__enlace {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

@media (max-width: 1240px) {
    .contacto,
    .contacto-vende__inner { padding-inline: 24px; }
}

@media (max-width: 1023px) {
    .contacto { padding: 40px 16px 48px; }

    .contacto__sucursales,
    .contacto-vende__inner { grid-template-columns: 1fr; }

    .contacto__sucursales { margin-top: 32px; }

    .contacto__mapa { min-height: 320px; }

    .contacto-vende { padding-block: 48px; }

    .contacto-vende__inner {
        gap: 32px;
        padding-inline: 16px;
    }

    .contacto-vende__titulo { font-size: var(--font-size-card-title); }
}

@media (max-width: 640px) {
    .contacto__sucursal { grid-template-columns: 1fr; }

    .contacto__sucursal-foto {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .contacto-vende__form { padding: 20px 16px 24px; }
}

/* ==========================================================================
   Carrusel de propiedades — "Más propiedades como esta" de la ficha
   (parciales/carrusel-propiedades.php, site.js: iniciarCarruseles).
   Misma card y medidas que .featured__grid, en una fila con scroll-snap:
   tres cards en desktop, dos en tablet, una con la siguiente asomando en
   mobile. El padding vertical de la pista deja ver la sombra de las cards,
   que overflow-x recortaría.
   ========================================================================== */
/* "Más propiedades como esta" ocupa dos líneas en mobile: el alto fijo del
   título de .featured lo haría pisar las cards. */
.carrusel .featured__title { height: auto; min-height: 44px; }

.carrusel__marco { position: relative; }

.carrusel__pista {
    --carrusel-visibles: 3;
    display: flex;
    gap: var(--space-grid-column);
    margin-block: -16px;
    padding-block: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.carrusel__item {
    flex: 0 0 calc((100% - (var(--carrusel-visibles) - 1) * var(--space-grid-column)) / var(--carrusel-visibles));
    min-width: 0;
    scroll-snap-align: start;
}

.carrusel__item > .property-card-wrap { height: 100%; }

.carrusel__flecha {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: color .15s ease, opacity .15s ease;
}

.carrusel__flecha[hidden] { display: none; }
.carrusel__flecha:hover { color: var(--color-accent); }
.carrusel__flecha .icon { width: 8px; height: 14px; }
.carrusel__flecha--prev { left: -22px; }
.carrusel__flecha--next { right: -22px; }

@media (max-width: 1240px) {
    /* El contenedor ya no tiene aire afuera: las flechas entran sobre las cards. */
    .carrusel__flecha--prev { left: 4px; }
    .carrusel__flecha--next { right: 4px; }
}

@media (max-width: 1023px) {
    .carrusel__pista { --carrusel-visibles: 2; }
}

@media (max-width: 640px) {
    /* Una card y un poco de la siguiente: el swipe se descubre solo y las
       flechas sobran. La pista llega al borde de la pantalla y el snap
       respeta el margen del contenedor. */
    .carrusel__pista {
        --carrusel-visibles: 1.15;
        margin-inline: -16px;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }

    .carrusel__flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .carrusel__pista { scroll-behavior: auto; }
}

/* --- Chips de la barra del listado --------------------------------------
   Con los filtros de precio, baños, cochera y antigüedad pueden ser muchos
   más que los tres del Figma: se deslizan en su franja, con un fundido a la
   derecha, en lugar de estirar la barra y la página. */
.listado__barra-filtros { min-width: 0; }

.listado__chips {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 100%;
    margin-left: 21px;                          /* separador → primer chip, como el Figma */
    padding-right: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.listado__chips::-webkit-scrollbar { display: none; }
.listado__chips .chip { flex: none; margin-left: 0; }
.listado__vista-btn { flex: none; padding-left: 16px; }

/* ==========================================================================
   Card del listado — toda la card lleva a la ficha, resumen y "Consultar"
   --------------------------------------------------------------------------
   El enlace del título se estira sobre la card; corazón, flechas y "Consultar" quedan por encima para seguir siendo clickeables.
   ========================================================================== */
.tarjeta { cursor: pointer; }

.tarjeta__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-card);
}

.tarjeta__titulo a:focus-visible { outline: none; }
.tarjeta__titulo a:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.tarjeta__fav,
.tarjeta__prev,
.tarjeta__next,
.tarjeta__consultar {
    position: relative;
    z-index: 2;
}

/* Los de la foto ya van con position: absolute (site.css y Favoritos). */
.tarjeta__prev,
.tarjeta__next,
.tarjeta__fav { position: absolute; }

/* Tres renglones de la descripción, el resto con "…". */
.tarjeta__resumen {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: 18px;
    font-size: var(--font-size-meta);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.tarjeta__resumen + .tarjeta__precio { margin-top: 18px; }

.tarjeta__consultar {
    display: block;
    width: fit-content;
    text-decoration: none;
}

.tarjeta__consultar:hover { text-decoration: underline; }

/* La card mobile es texto sobre la foto, de alto fijo: no entra el resumen. */
@media (max-width: 1023px) {
    .tarjeta__resumen { display: none; }
    .tarjeta__resumen + .tarjeta__precio { margin-top: 4px; }

    /* Dirección pegada al título, abajo, en vez de arriba de la foto. */
    .tarjeta__cuerpo { justify-content: flex-end; }
    .tarjeta__direccion { margin-bottom: 4px; }

    /* Arriba queda la operación a la izquierda y el corazón a la derecha,
       centrados en la misma línea y al mismo margen que el costado. */
    .tarjeta__badge { top: 14.93px; }

    /* El código como etiqueta, contra el borde derecho; si la dirección es
       larga y lo empuja al renglón de abajo, sigue a la derecha. */
    .tarjeta__direccion {
        max-width: none;
        align-items: center;
    }

    .tarjeta__codigo {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, .9);
        color: var(--color-text-primary);
        font-size: 12px;
        white-space: nowrap;
    }

    /* Título más chico y a todo el ancho para que entre en dos renglones;
       si igual no entra, corta con "…". */
    .tarjeta__titulo {
        max-width: none;
        font-size: 22px;
        line-height: 25px;
        letter-spacing: 0;                 /* -3% de 22 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .tarjeta__fav { top: 12.69px; }              /* 14.93 + (26.85 - 31.32) / 2 */
}

/* Expensas al lado del precio, más chicas y sin el bold del precio
   (card del listado y ficha). Sólo aparecen si la ficha publica precio. */
.precio__expensas {
    margin-left: 2px;
    font-size: .5em;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    white-space: nowrap;
}

/* --- Listado: "169 Propiedades" sobre la barra ---------------------------
   Mismo título que Emprendimientos y Contacto. Sólo desktop: en mobile el
   encabezado es listado__resumen (site.css). */
.listado__encabezado {
    width: var(--filterbar-width);
    max-width: calc(100% - 32px);
    margin: 0 auto 24px;
}

.listado__encabezado-titulo.emprendimientos__title {
    height: auto;
    margin-bottom: 0;
}

@media (max-width: 1023px) {
    .listado__encabezado { display: none; }
}

/* --- Desplegable con checkbox (Ubicación en el panel de filtros) ---------
   Un <details> con la forma del campo "Buscar por ubicación"; la lista se abre
   encima del resto del panel, con scroll propio. JS: iniciarDesplegables(). */
.desplegable { position: relative; }

/* "summary" de sección del panel (site.css) le pone padding, borde y título en
   negrita: acá vuelve a ser el campo. */
.panel-filtros__seccion .desplegable__boton,
.desplegable__boton {
    padding: 0 16px;
    border: 1px solid var(--color-divider);
    font-size: var(--font-size-filter-option);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-filter-option);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.desplegable__boton::-webkit-details-marker { display: none; }

.desplegable__boton span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desplegable__flecha {
    flex: none;
    width: 14px;
    height: 8px;
    color: var(--color-icon-muted);
    transition: transform .15s ease;
}

.desplegable[open] .desplegable__flecha { transform: rotate(180deg); }

.desplegable__lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-control);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

@media (prefers-reduced-motion: reduce) {
    .desplegable__flecha { transition: none; }
}

/* --- Panel de filtros: filas de una línea (Ambientes | Dormitorios, Precio) */
.panel-filtros__fila {
    display: grid;
    grid-template-columns: 110px repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
}

.panel-filtros__fila + .panel-filtros__fila { margin-top: 10px; }

.panel-filtros__fila--precio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel-filtros__fila-etiqueta {
    font-size: var(--font-size-filter-option);
    letter-spacing: var(--letter-spacing-filter-option);
    color: var(--color-text-primary);
}

/* Moneda: el mismo campo, con la flecha del resto del sitio. */
.panel-filtros__select {
    appearance: none;
    padding-right: 36px;
    background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px 7px no-repeat;
    cursor: pointer;
}

.panel-filtros__titulo-corto { display: none; }

@media (max-width: 1023px) {
    .panel-filtros__titulo-largo { display: none; }
    .panel-filtros__titulo-corto { display: inline; }
    .panel-filtros__fila { grid-template-columns: 92px repeat(2, minmax(0, 1fr)); gap: 8px; }
    .panel-filtros__fila--precio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Campos numéricos sin las flechitas del navegador (todo el sitio). */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Listado: orden y "Ver mapa" debajo de la barra, a la derecha --------
   La barra queda para "Filtros" y los chips, a todo el ancho. Mobile tiene su
   propio orden (listado__orden-mobile) y no tiene mapa. */
.listado:not(.listado--favoritos) .listado__barra-filtros {
    flex: 1;
    border-right: 0;
}

.listado__vista {
    width: var(--filterbar-width);
    max-width: calc(100% - 32px);
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.listado__vista .listado__vista-btn {
    margin-left: 0;
    padding: 0;
    font-size: 18px;
}

.listado__vista-orden { padding-right: 20px; }

.listado__vista-orden {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    letter-spacing: var(--letter-spacing-control);
}

.listado__orden-etiqueta {
    color: var(--color-text-primary);
    cursor: pointer;
}

/* El select mide lo que su texto más largo; el ícono va adelante, fuera del select. */
.listado__vista-orden .listado__orden {
    width: auto;
    padding: 0;
    font-size: inherit;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

.listado__vista-orden:hover .listado__orden,
.listado__vista-orden:hover .listado__orden-icono { color: var(--color-accent); }

.listado__orden-icono {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}

@media (max-width: 1023px) {
    .listado__vista { display: none; }
}

/* --- Panel de filtros: "Aplicar" y "Limpiar filtros" lado a lado, con ícono */
.panel-filtros__acciones { gap: 12px; }

.panel-filtros__aplicar,
.panel-filtros__limpiar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-badge);
    font-family: var(--font-campo);
    font-size: var(--font-size-filter-option);
    white-space: nowrap;
}

.panel-filtros__aplicar .icon,
.panel-filtros__limpiar .icon { width: 15px; height: 15px; }

.panel-filtros__limpiar {
    border: 1px solid var(--color-border-chip);
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
}

.panel-filtros__limpiar:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Sin filtros activos no hay nada que limpiar: se ve apagado. */
.panel-filtros__limpiar.is-inactivo { color: var(--color-text-muted); }

@media (max-width: 1023px) {
    .panel-filtros__aplicar,
    .panel-filtros__limpiar { flex: 1; padding: 0 12px; }
}

/* Card del listado: líneas finas que separan datos, resumen y precio (el gris
   de los chips: el divisor común casi no se ve sobre el fondo de la card). El
   resumen no lleva borde propio: con line-clamp, el padding inferior dejaría
   asomar el cuarto renglón. Sólo desktop (en mobile no hay datos ni resumen). */
@media (min-width: 1024px) {
    .tarjeta__cuerpo { padding-bottom: 28px; }

    .tarjeta__datos {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--color-border-chip);
    }

    .tarjeta__resumen { margin-top: 14px; }

    .tarjeta__resumen + .tarjeta__precio {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--color-border-chip);
    }
}

/* --- Card del listado: inclinación hacia el mouse (iniciarInclinacionCards)
   Va al final para ganarle a ".animar.is-visible { transform: none }", que
   tiene la misma especificidad. Al salir el mouse vuelve a 0 con transición. */
.tarjeta.is-inclinada {
    transform: perspective(1400px) rotateX(var(--inclinar-x, 0deg)) rotateY(var(--inclinar-y, 0deg));
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
    will-change: transform;
}

.tarjeta.is-inclinada:hover {
    transition: transform .12s ease-out, box-shadow .3s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta.is-inclinada { transform: none; }
}

/* --- Ficha de propiedad: columna principal + consulta fija ----------------
   Título, operación con precio y expensas, medidas y descripción van en una
   columna a todo el ancho; la caja "Pedinos más info" queda al costado y
   acompaña el scroll (sticky, debajo del header compacto). En mobile la caja
   vuelve al final: fija taparía la pantalla. La ficha de emprendimiento usa
   la misma grilla, sin .detalle__datos. */
.detalle__ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--detail-aside-width);
    column-gap: 48px;
    align-items: start;
}

/* La línea gris va con el título y no con los datos: el emprendimiento no
   tiene bloque de precio y la lleva igual. */
.detalle__ficha .detalle__titulo::after {
    content: "";
    display: block;
    margin-top: 8px;
    border-top: 1px solid var(--color-divider);
}

.detalle__ficha .detalle__titulo {
    max-width: none;
    font-size: var(--font-size-detail-title);
}

.detalle__ficha .detalle__consulta {
    position: sticky;
    top: calc(var(--header-height-compacto) + 24px);
    margin-top: 34px;                           /* a la altura de la dirección */
}

.detalle__datos { margin-top: 20px; }

.detalle__valor {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    color: var(--color-accent);
}

.detalle__operacion {
    font-size: var(--font-size-detail-body);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-detail-body);
    color: var(--color-text-primary);
}

.detalle__valor .detalle__precio {
    font-size: var(--font-size-detail-price);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-detail-price);
}

.detalle__expensas {
    font-size: var(--font-size-detail-body);
    letter-spacing: var(--letter-spacing-detail-body);
    white-space: nowrap;
}

.detalle__medidas {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: var(--font-size-detail-body);
    letter-spacing: var(--letter-spacing-detail-body);
    color: var(--color-text-muted);
}

/* El punto va al final de cada medida: si la línea corta, no arranca la siguiente. */
.detalle__medidas li:not(:last-child)::after {
    content: "·";
    margin-inline: 10px;
}

.detalle__ficha .detalle__descripcion {
    width: auto;
    margin-top: 40px;
}

/* Mapa → "Más propiedades como esta" / "Otros emprendimientos": menos aire
   (eran 150px) y una línea divisoria del ancho del mapa. */
.detalle:has(+ .carrusel, + .emprendimientos--otros) { padding-bottom: 40px; }
.detalle:has(+ .carrusel, + .emprendimientos--otros)::after {
    content: "";
    display: block;
    width: var(--detail-map-width);
    max-width: calc(100% - 32px);
    margin: 40px auto 0;
    border-top: 1px solid var(--color-divider);
}
.detalle + .carrusel,
.detalle + .emprendimientos--otros { padding-top: 0; }

/* Consulta de la ficha: un botón ancho partido en dos (Enviar email | Enviar
   WhatsApp), como el selector de sucursal del formulario de contacto. */
.detalle__envio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-top: 12px;
    border-radius: var(--radius-field);
    overflow: hidden;
}

.detalle__envio button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 8px;
    border: 0;
    color: var(--color-on-accent);
    font: inherit;
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    cursor: pointer;
    transition: background-color .15s;
}

.detalle__envio .icon { flex: none; width: 16px; height: 16px; }

.detalle__envio-email { background: var(--color-accent); }
.detalle__envio-email:hover { background: var(--color-accent-hover); }
.detalle__envio-whatsapp { background: var(--color-whatsapp); }
.detalle__envio-whatsapp:hover { background: var(--color-whatsapp-hover); }

.detalle__envio button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -4px;
}

/* Mapa de la ficha (propiedad o emprendimiento) dentro de la columna del texto,
   del mismo ancho. */
.detalle__principal .detalle__mapa {
    width: auto;
    height: 420px;
    margin: 40px 0 0;
}

@media (max-width: 1023px) {
    .detalle__ficha { display: block; }

    .detalle__ficha .detalle__titulo { font-size: 30px; }

    .detalle__datos,
    .detalle__ficha .detalle__descripcion { padding-inline: 16px; }

    .detalle__datos { margin: 14px 16px 0; padding: 0; }
    .detalle__valor { column-gap: 10px; }
    .detalle__operacion,
    .detalle__expensas,
    .detalle__medidas { font-size: 14px; letter-spacing: 0; }
    .detalle__valor .detalle__precio { font-size: 24px; letter-spacing: 0; }
    .detalle__medidas li:not(:last-child)::after { margin-inline: 6px; }

    .detalle__ficha .detalle__descripcion { margin-top: 24px; }

    .detalle__principal .detalle__mapa { height: 267px; margin: 29px 16px 0; }

    .detalle__ficha .detalle__consulta {
        position: static;
        width: auto;
        margin: 32px 16px 0;
    }
}

/* --- Ficha: menú de compartir (WhatsApp y copiar enlace) -----------------
   Mismo panel que .wa-flotante__menu, pero se despliega hacia abajo desde el
   ícono. Los selectores llevan .compartir delante para ganarle a
   ".detalle__acciones button" y ".detalle__acciones .icon" de site.css. */
.compartir { position: relative; }

.compartir__boton {
    display: block;
    list-style: none;
    cursor: pointer;
}

.compartir__boton::-webkit-details-marker { display: none; }
.compartir__boton:hover,
.compartir[open] .compartir__boton { color: var(--color-accent); }

.compartir .compartir__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 5;
    width: 210px;
    padding: 8px;
    border-radius: var(--radius-field);
    background: var(--color-surface-page);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.compartir .compartir__opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font: inherit;
    font-size: var(--font-size-meta);
    color: var(--color-text-primary);
    text-align: left;
    transition: background-color .15s ease;
}

.compartir .compartir__opcion:hover { background: rgba(0, 0, 0, .05); }
.compartir .compartir__opcion .icon { flex: none; width: 20px; height: 20px; }
.compartir .compartir__icono--whatsapp { color: var(--color-whatsapp); }
.compartir .compartir__opcion.is-copiado { color: var(--color-whatsapp); }

/* Corazón de la ficha, al lado de compartir: mismo trazo que el ícono de
   compartir, sin el círculo blanco de las cards (va sobre el fondo gris). */
.detalle__acciones .favorito--ficha {
    width: 26px;
    height: 26px;
    background: none;
    box-shadow: none;
}

.detalle__acciones .favorito--ficha .icon { width: 26px; height: 24px; }

/* Galería: fundido cruzado al cambiar de foto (principal, laterales de la
   ficha y fotos de las cards). site.js (cambiarFoto) pone la foto nueva
   encima de la actual y la hace aparecer; queda debajo del badge, las
   flechas y el velo porque va justo después de la imagen. */
.detalle__foto { position: relative; }

.galeria__entrante {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}

.galeria__entrante.is-visible { opacity: 1; }

/* Mobile: compartir y favorito también, al costado de la dirección (el Figma
   mobile no los dibuja y site.css los ocultaba). Íconos de 22 en vez de 26. */
@media (max-width: 1023px) {
    .detalle__cabecera { gap: 12px; }

    .detalle__acciones {
        display: flex;
        flex: none;
        gap: 14px;
        margin: 0;
    }

    .detalle__acciones .icon,
    .detalle__acciones .favorito--ficha { width: 22px; height: 22px; }
    .detalle__acciones .favorito--ficha .icon { width: 22px; height: 20px; }
}

/* --- Listado mobile: "Filtros de búsqueda" debajo de "Ordenar por" -------
   El Figma lo tenía flotando sobre las cards; acá queda en el encabezado, a
   todo el ancho, y "Volver arriba" lleva hasta él. */
@media (max-width: 1023px) {
    .listado__pill {
        position: static;
        width: 100%;
        margin-top: 12px;
    }
}

/* --- Galerías con el dedo -------------------------------------------------
   El deslizamiento horizontal lo maneja site.js (iniciarGalerias); el
   navegador sólo se queda con el vertical, para seguir scrolleando. */
[data-galeria] { touch-action: pan-y; }

/* --- Fichas mobile: sin barra de contexto ---------------------------------
   Propiedad y emprendimiento ya no llevan la barra de filtros + grilla/mapa:
   la galería queda primera y no necesita el margen que la separaba. */
@media (max-width: 1023px) {
    .detalle__contenido > .detalle__galeria:first-child { margin-top: 0; }
}

/* --- Favoritos mobile: aire entre la última card y el footer --------------
   En el listado lo da "Ver más"; acá no hay botón y la card quedaba pegada.
   En desktop ya lo pone .listado:not(.listado--mapa). */
@media (max-width: 1023px) {
    .listado--favoritos { padding-bottom: 40px; }
}

/* --- Ficha mobile: badge de la operación como el de la card --------------
   Mismo tamaño que en el listado (71×27, 15px) y más pegado a la esquina. */
@media (max-width: 1023px) {
    .detalle__badge {
        left: 12px;
        top: 12px;
        min-width: 71.07px;
        width: auto;
        height: 26.85px;
        padding-inline: 12px;
        font-size: 15px;
        letter-spacing: 0;                 /* -3% de 15 */
    }
}

/* ==========================================================================
   Tipografía — corrección del cliente
   --------------------------------------------------------------------------
   Serif en todo el sitio (pidieron Tisa Offc Serif Pro, que es paga: se usa
   Merriweather, de la misma familia de diseño; cambiarla es tocar
   --font-base y el <link> de base.php) y una sola escala de tamaños para
   títulos, subtítulos y bajadas en todas las secciones, más chica que la del
   Figma. Los tokens de tokens.css se redefinen acá apuntando a la escala.
   Sin tracking negativo: en una serif amontona las letras.
   ========================================================================== */
:root {
    --font-base: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-campo: var(--font-base);
    --font-weight-extralight: 300;

    /* Escala */
    --texto-titulo-pagina: 36px;        /* h1: ficha, listado, secciones */
    --texto-titulo-seccion: 28px;       /* h2: "Inmuebles destacados", hero */
    --texto-subtitulo: 20px;            /* h3: cards, subtítulos de bloque */
    --texto-bajada: 16px;               /* párrafos destacados, descripciones */
    --texto-cuerpo: 15px;
    --texto-chico: 14px;                /* direcciones, medidas, opciones */
    --texto-mini: 12px;                 /* metadatos, etiquetas de código */

    --font-size-nav: var(--texto-chico);
    --font-size-body: var(--texto-cuerpo);
    --font-size-section-title: var(--texto-titulo-seccion);
    --font-size-card-title: var(--texto-subtitulo);
    --font-size-price: 18px;
    --font-size-badge: var(--texto-chico);
    --font-size-field: var(--texto-cuerpo);
    --font-size-button: var(--texto-cuerpo);
    --font-size-button-search: 13px;
    --font-size-meta: var(--texto-mini);

    --font-size-filter: 18px;
    --font-size-control: var(--texto-cuerpo);
    --font-size-list-address: var(--texto-chico);
    --font-size-list-meta: var(--texto-chico);
    --font-size-list-title: 22px;
    --font-size-list-price: 22px;
    --font-size-filter-title: var(--texto-bajada);
    --font-size-filter-option: var(--texto-chico);

    --font-size-detail-address: var(--texto-cuerpo);
    --font-size-detail-body: var(--texto-bajada);
    --font-size-detail-price: 26px;
    --font-size-detail-title: var(--texto-titulo-pagina);

    --line-height-tight: 1.25;

    --letter-spacing-nav: 0;
    --letter-spacing-section: 0;
    --letter-spacing-card: 0;
    --letter-spacing-lg: 0;
    --letter-spacing-md: 0;
    --letter-spacing-sm: 0;
    --letter-spacing-filter: 0;
    --letter-spacing-control: 0;
    --letter-spacing-list-address: 0;
    --letter-spacing-list-meta: 0;
    --letter-spacing-list-title: 0;
    --letter-spacing-list-price: 0;
    --letter-spacing-filter-title: 0;
    --letter-spacing-filter-option: 0;
    --letter-spacing-detail-address: 0;
    --letter-spacing-detail-body: 0;
    --letter-spacing-detail-price: 0;
    --letter-spacing-detail-title: 0;
}

/* Tamaños fijos de site.css que no pasan por los tokens. */
.emprendimientos__title {
    height: auto;
    font-size: var(--texto-titulo-pagina);
    letter-spacing: 0;
}

.text-page__content { font-size: var(--texto-bajada); line-height: 1.7; }

.listado__vista .listado__vista-btn,
.listado__vista-orden { font-size: var(--texto-cuerpo); }

@media (max-width: 1023px) {
    :root {
        --texto-titulo-pagina: 26px;
        --texto-titulo-seccion: 22px;
        --texto-subtitulo: 18px;
        --texto-bajada: 15px;
        --texto-cuerpo: 14px;
        --font-size-detail-price: 22px;
    }

    .emprendimientos__title,
    .listado__titulo,
    .detalle__titulo,
    .detalle__ficha .detalle__titulo { font-size: var(--texto-titulo-pagina); letter-spacing: 0; }

    .tarjeta__titulo { font-size: var(--texto-subtitulo); letter-spacing: 0; }
    .tarjeta__precio,
    .detalle__resumen .detalle__precio,
    .detalle__valor .detalle__precio { font-size: 20px; letter-spacing: 0; }
    .tarjeta__badge,
    .detalle__badge { font-size: 13px; letter-spacing: 0; }
    .detalle__descripcion p { font-size: var(--texto-cuerpo); letter-spacing: 0; }
}

/* --- Dirección en negrita en vez del código (corrección del cliente) ----- */
.tarjeta__direccion,
.detalle__direccion {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.tarjeta__codigo {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

.tarjeta__resumen { font-size: 13px; line-height: 1.6; }
.detalle__codigo { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }

/* --- Buscador del hero: el combo abre tocando cualquier parte del campo --
   Corrección del cliente: en desktop sólo abría sobre el texto. Como en
   mobile, el <select> cubre todo el campo (flecha y pin incluidos, que no
   reciben el clic). Sin elección el texto va en el gris oscuro del sitio:
   el muted se perdía sobre el blanco. */
@media (min-width: 1024px) {
    .search-bar__field { align-self: stretch; }

    .search-bar__select {
        position: absolute;
        inset: 0;
        height: 100%;
        padding: 0 calc(var(--icon-size-arrow) + 8px) 0 0;
    }

    .search-bar__field--ubicacion .search-bar__select { padding-left: calc(var(--icon-size-pin) + 11px); }
}

.search-bar__select { cursor: pointer; }
.search-bar__pin { pointer-events: none; color: var(--color-text-primary); }
.search-bar__select--vacio { color: var(--color-text-primary); }

/* --- Filtros del listado: se abren tocando toda la barra, no sólo el texto
   (corrección del cliente). Lo mismo "Ordenar por": el <select> cubre todo
   el formulario, invisible, y el valor se ve en .orden__valor. */
.listado__barra-filtros { cursor: pointer; }
.listado__barra-filtros .chip { cursor: default; }

.listado__vista-orden,
.listado__orden-mobile { position: relative; }

.orden__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}


.listado__orden-mobile .orden__valor { color: var(--color-accent); }

/* --- Ficha: "Compartir" y "Guardar" como botones visibles, con texto ------
   Corrección del cliente: los íconos sueltos no se veían como acciones. */
.detalle__acciones { gap: 10px; margin-top: 0; margin-right: 0; }

.detalle__acciones .compartir__boton,
.detalle__acciones .favorito--ficha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: none;
    color: var(--color-text-primary);
    font-size: var(--texto-chico);
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.detalle__acciones .compartir__boton:hover,
.detalle__acciones .compartir[open] .compartir__boton,
.detalle__acciones .favorito--ficha:hover { border-color: var(--color-accent); color: var(--color-accent); transform: none; }

.detalle__acciones .compartir__boton .icon,
.detalle__acciones .favorito--ficha .icon { width: 18px; height: 18px; }
.detalle__acciones .favorito--ficha .icon { color: var(--color-accent); }
.detalle__acciones .favorito--ficha.is-activo { border-color: var(--color-accent); }

@media (max-width: 1023px) {
    .detalle__cabecera { flex-wrap: wrap; }
    .detalle__acciones { order: 2; width: 100%; margin-bottom: 8px; }
    /* Acá el botón queda contra el borde izquierdo: el menú alineado a su
       derecha (210px) se salía de la pantalla. Se abre hacia la derecha. */
    .detalle__acciones .compartir__menu { left: 0; right: auto; }
    .detalle__acciones .compartir__boton,
    .detalle__acciones .favorito--ficha { height: 34px; padding: 0 14px; }
    .detalle__acciones .compartir__boton .icon,
    .detalle__acciones .favorito--ficha .icon { width: 16px; height: 16px; }
}

/* --- Selects sin el borde rojo de foco y con la flecha que gira al abrir --
   Pedido del cliente. El navegador no avisa cuándo se abre la lista nativa:
   site.js (iniciarSelectsAbiertos) pone .is-abierto al tocar el select y lo
   saca al elegir, al salir o con Escape. */
.search-bar__select:focus-visible,
.orden__select:focus-visible,
.panel-filtros__select:focus-visible,
.desplegable__boton:focus-visible { outline: none; }

.search-bar__arrow,
.listado__orden-icono { transition: transform .25s ease; }

.search-bar__field.is-abierto .search-bar__arrow,
.is-abierto > .listado__orden-icono { transform: rotate(180deg); }

.panel-filtros__select { transition: background-image .25s ease; }
.panel-filtros__select.is-abierto {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 7l6-6 6 6' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.desplegable__flecha { transition: transform .25s ease; }

@media (prefers-reduced-motion: reduce) {
    .search-bar__arrow,
    .listado__orden-icono,
    .desplegable__flecha { transition: none; }
}


/* --- Visor de fotos de la ficha (corrección del cliente: que la foto se
   agrande al tocarla). <dialog> a pantalla completa sobre fondo oscuro. */
.detalle__foto-principal [data-galeria-foto],
[data-galeria-lateral] { cursor: zoom-in; }

.visor {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(15, 15, 15, .92); }

.visor__foto {
    max-width: calc(100vw - 160px);
    max-height: calc(100dvh - 120px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.visor__contador {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: var(--texto-chico);
}

.visor__cerrar,
.visor__paso {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.visor__cerrar:hover,
.visor__paso:hover { background: rgba(255, 255, 255, .25); }

.visor__cerrar { top: 20px; right: 20px; }
.visor__paso { top: 50%; transform: translateY(-50%); }
.visor__paso--prev { left: 24px; }
.visor__paso--next { right: 24px; }
.visor .icon { width: 22px; height: 22px; }

@media (max-width: 1023px) {
    .visor__foto { max-width: 100vw; max-height: calc(100dvh - 140px); border-radius: 0; }
    .visor__paso { top: auto; bottom: 12px; transform: none; width: 44px; height: 44px; }
    .visor__paso--prev { left: 16px; }
    .visor__paso--next { right: 16px; }
    .visor__contador { bottom: 26px; }
    .visor__cerrar { top: 12px; right: 12px; }
}