/* ============================================================
   BARNES Buenos Aires — Comprar (listado)
   Fiel a Demo-Comprar.pdf.
   Secciones: Hero+Buscador · Intro · Listado · CTA.
   ============================================================ */

/* Paginación con ancla #listado: scroll INSTANTÁNEO al cargar (no animar desde el top).
   El `scroll-behavior: smooth` global (base.css) hace que al recargar en ?pagina=N#listado
   el browser salte al top y LUEGO scrollee — acá lo desactivamos para que aterrice directo
   en la sección. El smooth puntual (FAB) usa la opción JS `behavior:'smooth'`, no se ve afectado. */
html { scroll-behavior: auto; }

/* ===================== HERO + BUSCADOR ===================== */
/* Spec: foto full-bleed 1980×942 sobre #231f20; título 64px + subtítulo + buscador, centrados.
   Directiva cliente: hero limpio (sin dirección ni logo de propiedad), buscador debajo del título. */
.comprar-hero {
    position: relative;
    min-height: clamp(640px, 49vw, 950px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--c-on-dark);
    background: #231f20;
    overflow: visible;   /* NO hidden: clipearía el dropdown del search-bar al salir del hero. El media es inset:0 + object-fit → no necesita clip. */
    padding: calc(var(--header-h) + 36px) var(--gutter) 60px;
}
.comprar-hero__media { position: absolute; inset: 0; z-index: 0; }
.comprar-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim moderado (más oscuro que solo text-shadow, más claro que el gradient original)
   para legibilidad sin apagar la foto. Se mantiene el text-shadow como refuerzo. */
.comprar-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.44) 100%);
}
.comprar-hero__content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
}
.comprar-hero__title {
    color: var(--c-on-dark);
    font-size: clamp(2.1rem, 4.4vw, 4rem);   /* 64px del comp */
    line-height: var(--lh-hero);
    letter-spacing: .02em;
    text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}
/* Botón "Ver propiedad" del slide (data-driven), bottom-left del hero */
.comprar-hero__verprop {
    position: absolute; left: var(--gutter); bottom: clamp(26px, 4vw, 52px);
    z-index: 3;
    font-family: var(--ff-body); font-weight: 500;
    font-size: var(--fs-nav); letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-on-dark);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.comprar-hero__verprop::after {
    content: ""; display: block;
    width: 92px; height: 1px; margin-top: 10px;
    background: currentColor;
    transition: width .3s var(--ease);
}
.comprar-hero__verprop:hover::after { width: 130px; }

/* Buscador (.search-bar) → components.css (compartido con Otras-Ciudades desde 2026-06-18). */

/* ===================== BLOQUE-INTRO ===================== */
/* Spec: bg #fff, todo centrado. Heading 36px + párrafo 16px. */
.comprar-intro__inner { max-width: 1000px; margin-inline: auto; text-align: center; }
.comprar-intro__title { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--space-6); }
.comprar-intro__text { max-width: 658px; margin-inline: auto; }
.comprar-intro__text p + p { margin-top: var(--space-5); }

/* ===================== BLOQUE-PROPIEDADES (listado) ===================== */
/* Spec: banda cálida #f7f3f2; heading izq; grid 3 col; lead grande (span 2) en pág 1. */
.comprar-listado { background: var(--c-bg-alt); scroll-margin-top: var(--header-h); }
.comprar-listado__title { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--space-7); }
.comprar-listado__empty { font-size: var(--fs-lead); color: var(--c-ink-soft); }

/* Componente del listado (.listing-grid / .listing-card / --lead / badge), paginación (.pager)
   y CTA "Necesitás ayuda" (.cta-help) → components.css (compartidos con Descubrir-Barrio y
   Otras-Ciudades desde 2026-06-18). */

/* ===================== RESPONSIVE ===================== */
/* (Responsive de search-bar / listing-card / grid → components.css, junto a los componentes.) */
@media (max-width: 720px) {
    /* "Ver propiedad" pasa a flujo centrado bajo el contenido (no absoluto) */
    .comprar-hero__verprop { position: static; align-self: center; margin-top: 28px; }
}