/* ============================================================
   BARNES Buenos Aires — Otras Ciudades
   Fiel a Demo-Otras_v2.pdf.
   Orden visual: Hero (collage + buscador) · Bloque-Propiedades · CTA · Footer.
   Reusa componentes compartidos (search-bar / listing-card / pager / cta-help → components.css).
   ============================================================ */

/* Paginación con ancla #listado: scroll INSTANTÁNEO al cargar (no animar desde el top),
   igual que Comprar (el smooth global de base.css saltaría al top y luego scrollearía). */
html { scroll-behavior: auto; }

/* ===================== HERO ===================== */
/* Spec: collage full-bleed 1980×980 sobre #221f1f; H1 "Otras Ciudades" 72px + buscador, CENTRADOS. */
.otras-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: #221f1f;
    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;
}
.otras-hero__media { position: absolute; inset: 0; z-index: 0; }
.otras-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim moderado para legibilidad sobre el collage (mismo patrón que el hero de Comprar). */
.otras-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 46%, rgba(0,0,0,.42) 100%);
}
.otras-hero__content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
}
.otras-hero__title {
    color: var(--c-on-dark);
    font-size: var(--fs-hero);            /* 72px 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);
}

/* ===================== BLOQUE-PROPIEDADES ===================== */
/* Spec: banda cálida #f7f3f1; título 36px CENTRADO; grid (lead + 3-col) + paginación. */
.otras-listado { background: var(--c-bg-alt); scroll-margin-top: var(--header-h); }
.otras-listado__title {
    font-size: var(--fs-h3); line-height: var(--lh-h3);
    text-align: center;
    margin-bottom: var(--space-7);
}

/* Empty-state (sin propiedades fuera de BA) — centrado, igual tono que el listado. */
.otras-empty {
    max-width: 620px; margin-inline: auto; text-align: center;
    padding-block: clamp(24px, 4vw, 56px);
}
.otras-empty__text {
    font-size: var(--fs-lead); line-height: var(--lh-body);
    color: var(--c-ink-soft); margin-bottom: var(--space-6);
}

/* ===================== CTA ===================== */
/* El banner acuarela de Otras es más ancho que el de Comprar (1463×657, ar 2.227 vs 1194/672). */
.cta-help--otras {
    --cta-bg-w: 1463px;
    --cta-bg-ar: 1463 / 657;
}