/* ============================================================
   BARNES Buenos Aires — Región (2026-07)
   Template region.php?r=<slug>. 5 destinos del carrusel "Recorré otras ciudades"
   del Home (Mendoza, Salta, Patagonia, Buenos Aires, Punta del Este).
   Reusa otras-ciudades.css (.otras-listado / .otras-empty / .cta-help--otras) para
   el bloque de propiedades + CTA; este archivo cubre SOLO el hero propio + el 404.
   Hero banners del zip: 1980×980 (ratio 0.4949).
   ============================================================ */

html { scroll-behavior: auto; } /* paginación con ancla #listado, igual que Otras-Ciudades */

/* ===================== HERO ===================== */
.region-hero {
    position: relative;
    min-height: clamp(420px, 33vw, 640px);
    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);
}
.region-hero__media { position: absolute; inset: 0; z-index: 0; }
.region-hero__img { width: 100%; height: 100%; object-fit: cover; }
.region-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.42) 100%);
}
.region-hero__content { position: relative; z-index: 2; }
.region-hero__title {
    color: var(--c-on-dark);              /* gotcha: base.css pone h1 en negro → forzar blanco */
    font-size: clamp(2.3rem, 3.8vw, 4.5rem); /* 72px 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);
}
.region-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);
}
.region-hero__crumbs span[aria-hidden] { opacity: .7; }
.region-hero__crumbs a { opacity: .92; transition: opacity .2s var(--ease); }
.region-hero__crumbs a:hover { opacity: 1; text-decoration: underline; }
.region-hero__crumbs [aria-current] { opacity: .8; }

/* ===================== 404 ===================== */
.region-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);
}
.region-404 { padding-block: clamp(120px, 16vw, 220px); }
.region-404__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.region-404__text { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); }