/* ============================================================
   BARNES Buenos Aires — Descubrir (editorial de barrios)
   Fiel a Demo-Descubrir_v4.pdf.
   Secciones: Hero · Descripción · 7 bloques de barrio · Footer global.
   Artboard 1980pt ≈ 1:1 con 1920px (alturas de banda en vw de 1980).
   ============================================================ */

/* ===================== HERO ===================== */
/* Spec: banda #231f20 + foto full-bleed (Floralis), H1 64px blanco centrado.
   Alto ≈ 484pt → 24.4vw (hero compacto, más bajo que Comprar). */
.descubrir-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);
}
.descubrir-hero__media { position: absolute; inset: 0; z-index: 0; }
.descubrir-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim moderado para legibilidad del título sobre la foto (patrón Comprar). */
.descubrir-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.40) 100%);
}
.descubrir-hero__title {
    position: relative; z-index: 2;
    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);
}

/* ===================== DESCRIPCIÓN ===================== */
/* 2-col: texto (H2 + 2 párrafos) izq / sketch acuarela der. bg #fff. */
.descubrir-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: clamp(40px, 12vw, 220px);
    align-items: start;
}
.descubrir-intro__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);            /* 48 / 1.0 */
    color: var(--c-ink);
}
.descubrir-intro__lead {
    max-width: 432px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);          /* token global 1.5 (medido del .ai) — NO redefinir por página */
    color: var(--c-ink);
}
.descubrir-intro__title + .descubrir-intro__lead { margin-top: clamp(40px, 5vw, 62px); }
.descubrir-intro__lead  + .descubrir-intro__lead { margin-top: 1.5em; }
.descubrir-intro__art { justify-self: end; max-width: 587px; }
.descubrir-intro__art img { width: 100%; height: auto; display: block; }

/* ===================== BLOQUES DE BARRIO ===================== */
/* Banda cálida #f7f3f2. Foto full-bleed media-página (50%) + card blanco flotante
   que solapa el centro (~81px). El card alterna lado por índice (par=foto der). */
.descubrir-barrios { background: var(--c-bg-alt); }

.barrio {
    /* La foto DOMINA (más ancha que la mitad) y la card se MONTA encima por el borde
       (directiva 2026-06-18). Un overlap de ~80px sobre foliage claro + sombra
       sólo vertical leía como "adyacente"; se refuerza Δx + sombra para que flote. */
    --media-w: 54%;
    --overlap: clamp(48px, 6.4vw, 124px);
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(560px, 41.8vw, 802px);  /* 827pt / 1980 = 41.77vw */
}
.barrio__media { position: relative; align-self: stretch; overflow: hidden; min-height: 320px; }
.barrio__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.barrio__text { position: relative; z-index: 2; display: flex; }
.barrio__card {
    width: min(604px, 100%);
    background: #fff;
    padding: clamp(38px, 3.2vw, 54px) clamp(40px, 4vw, 76px) clamp(40px, 3.4vw, 56px);
    /* sombra de "tarjeta flotando sobre la foto" (mucho más marcada que la vertical previa) */
    box-shadow: 0 26px 64px -14px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.10);
}

/* Alternancia: índice par → foto a la DERECHA (más ancha) / card a la izquierda montándola.
   grid-row:1 explícito en AMBOS items: sin él, poner una columna menor en el item
   posterior del DOM (text=col1 tras media=col2) lo empuja a una fila nueva (sparse
   auto-flow) → layout escalonado de media-altura. Fijar la fila los mantiene lado a lado. */
.barrio--img-right { grid-template-columns: 1fr var(--media-w); }
.barrio--img-right .barrio__media { grid-column: 2; grid-row: 1; }
.barrio--img-right .barrio__text  { grid-column: 1; grid-row: 1; justify-content: flex-end; }
.barrio--img-right .barrio__card  { margin-right: calc(var(--overlap) * -1); }
/* Índice impar → foto a la IZQUIERDA (más ancha) / card a la derecha montándola */
.barrio--img-left { grid-template-columns: var(--media-w) 1fr; }
.barrio--img-left .barrio__media  { grid-column: 1; grid-row: 1; }
.barrio--img-left .barrio__text   { grid-column: 2; grid-row: 1; justify-content: flex-start; }
.barrio--img-left .barrio__card   { margin-left: calc(var(--overlap) * -1); }

.barrio__title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-ink); }
.barrio__copy {
    margin-top: clamp(20px, 1.8vw, 30px);
    font-size: var(--fs-body);
    line-height: var(--lh-body);          /* token global 1.5 (medido del .ai) — NO redefinir por página */
    color: var(--c-ink);
}
.barrio__btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: clamp(26px, 2.4vw, 38px);
    height: 35px; padding-inline: 22px;
    background: var(--c-accent); color: #fff;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    transition: background-color .25s var(--ease), transform .2s var(--ease);
}
.barrio__btn:hover { background: var(--c-accent-d); }
.barrio__btn:active { transform: translateY(1px); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 920px) {
    /* Descripción apila: texto, luego sketch. */
    .descubrir-intro__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
    .descubrir-intro__art { justify-self: start; }

    /* Barrio apila en bloque (no grid): foto full-width arriba, card debajo solapando
       levemente. Block evita que el min-height del grid estire la altura de la foto y
       que aspect-ratio derive un ancho > viewport (overflow). */
    .barrio { display: block; min-height: 0; --overlap: 0px; }
    .barrio__media {
        width: 100%; aspect-ratio: 16 / 10; min-height: 0;
        grid-column: auto !important; grid-row: auto !important;
    }
    .barrio__text { display: block; padding: 0 var(--gutter); }
    .barrio__card {
        width: min(604px, 100%);
        margin: clamp(-72px, -8vw, -40px) auto 0 !important;  /* leve solape vertical sobre la foto */
        position: relative; z-index: 2;
    }
}
@media (max-width: 560px) {
    .barrio__card { margin-top: 0 !important; }
    .barrio__media { aspect-ratio: 4 / 3; }
}