/* ============================================================
   BARNES Buenos Aires — Descubrir-Barrio
   Template ?b=<slug>. Fiel a Demo-Descubrir_Barrio-Parque_v2.pdf.
   Secciones: Hero · Intro · Bloque-Venta · Bloque-Alquiler · Footer global.
   Artboard 1980pt ≈ 1:1 con 1920px. Reusa el componente listing-card (components.css)
   y tokens globales (line-heights 1.5/1.0 — NO redefinir).
   ============================================================ */

/* Anclas in-page (#venta/#alquiler) sin que el header fijo tape el inicio del bloque. */
html { scroll-behavior: auto; }

/* ===================== HERO ===================== */
/* Banda #231f20 + foto editorial del barrio full-bleed; H1 (nombre) + breadcrumb, centrados.
   Alto ≈ 484pt → 24.4vw (hero compacto, igual a Descubrir). */
.barrio-hero {
    position: relative;
    min-height: clamp(420px, 24.4vw, 484px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--c-hero-bg);
    overflow: hidden;
    padding: calc(var(--header-h) + 28px) var(--gutter) clamp(34px, 4vw, 60px);
}
.barrio-hero__media { position: absolute; inset: 0; z-index: 0; }
.barrio-hero__img { width: 100%; height: 100%; object-fit: cover; }
.barrio-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.42) 100%);
}
.barrio-hero__content { position: relative; z-index: 2; }
.barrio-hero__title {
    color: var(--c-on-dark);              /* gotcha: base.css pone h1 en negro → forzar blanco */
    font-size: clamp(2.1rem, 3.4vw, 4rem); /* 64px del comp */
    line-height: var(--lh-hero);
    letter-spacing: .015em;
    text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}
.barrio-hero__crumbs {
    margin-top: clamp(18px, 2.2vw, 30px);
    display: flex; justify-content: center; align-items: center;
    gap: 10px;
    font-family: var(--ff-body); font-size: var(--fs-body);
    color: var(--c-on-dark);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.barrio-hero__crumbs span[aria-hidden] { opacity: .7; }
.barrio-hero__crumbs a { opacity: .92; transition: opacity .2s var(--ease); }
.barrio-hero__crumbs a:hover { opacity: 1; text-decoration: underline; }
.barrio-hero__crumbs [aria-current] { opacity: .8; }

/* ===================== INTRO ===================== */
/* 2-col: H2 izq (+ tabs) / copy editorial der. bg #fff. */
.barrio-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 460px) 1fr;
    gap: clamp(40px, 10vw, 160px);
    align-items: start;
}
.barrio-intro__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);            /* 48 / 1.0 */
    color: var(--c-ink);
}
.barrio-intro__copy {
    font-size: var(--fs-body);
    line-height: var(--lh-body);          /* token global 1.5 — NO redefinir por página */
    color: var(--c-ink);
    max-width: 600px;
}

/* Tabs COMPRAR / ALQUILER (anclas in-page). COMPRAR activo = subrayado + tinta plena. */
.barrio-tabs {
    display: flex; gap: clamp(28px, 3vw, 44px);
    margin-top: clamp(30px, 3.4vw, 50px);
}
.barrio-tabs__tab {
    font-family: var(--ff-body); font-weight: 500;
    font-size: var(--fs-body);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-ink-soft);
    padding-bottom: 7px;
    position: relative;
    transition: color .2s var(--ease);
}
.barrio-tabs__tab::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.barrio-tabs__tab:hover { color: var(--c-ink); }
.barrio-tabs__tab.is-active { color: var(--c-ink); }
.barrio-tabs__tab.is-active::after,
.barrio-tabs__tab:hover::after { transform: scaleX(1); }

/* ===================== BLOQUES DE PROPIEDADES (Venta / Alquiler) ===================== */
.barrio-block {
    padding-block: var(--section-y);
    scroll-margin-top: var(--header-h);
}
.barrio-block--venta    { background: var(--c-bg-alt); }  /* banda cálida #f7f3f2 */
.barrio-block--alquiler { background: var(--c-bg); }      /* blanco */

/* Encabezado del bloque: H2 + lead centrados (como comprar-intro). */
.barrio-block__head { max-width: 1000px; margin-inline: auto; text-align: center; }
.barrio-block__title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-ink); }
.barrio-block__lead {
    max-width: 770px; margin: clamp(20px, 2vw, 30px) auto 0;
    font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink);
}
/* "Propiedades destacadas" — sub-título a la IZQUIERDA, sobre el grid. */
.barrio-block__subtitle {
    font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-ink);
    margin-top: clamp(48px, 6vw, 90px);
    margin-bottom: clamp(28px, 3vw, 44px);
}
/* Bloque con UNA sola propiedad: el listado se centra (.listing-grid--center) → el subtítulo
   también, para que quede coherente con el head centrado de arriba y la card centrada de abajo. */
.barrio-block__subtitle--center { text-align: center; }
.barrio-block__cta {
    display: flex; justify-content: center;
    margin-top: clamp(40px, 4.6vw, 64px);
}
/* El botón "Ver todo" puede ser ancho (nombre largo en mayúscula) → no forzar min-width chico. */
.barrio-block__cta .btn { padding-inline: 26px; letter-spacing: .14em; }

/* ===================== EMPTY-STATE / 404 ===================== */
.barrio-empty__inner,
.barrio-404__inner {
    max-width: 640px; margin-inline: auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 32px);
}
.barrio-empty__text { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); }
.barrio-404 { padding-block: clamp(120px, 16vw, 220px); }
.barrio-404__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.barrio-404__text { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 920px) {
    .barrio-intro__inner { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 44px); }
    .barrio-intro__copy { max-width: none; }
    .barrio-tabs { margin-top: clamp(22px, 4vw, 34px); }
}