/* ============================================================
   BARNES Buenos Aires — Home
   ============================================================ */

/* ===================== HERO ===================== */
/* Spec: 1980×970 (alto ≈ 49% del ancho), fondo #000000, foto full-bleed.
   Título centrado + 3 links (COMPRAR/ALQUILAR/TASAR) hacia abajo. SIN buscador, SIN dots. */
.hero {
    position: relative;
    min-height: clamp(560px, 49vw, 1000px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--c-on-dark);
    background: var(--c-hero-bg);
    overflow: hidden;
    padding-top: var(--space-10);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img, .hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.hero__video { z-index: 1; opacity: 0; transition: opacity 1s var(--ease); }
.hero__video[data-ready], .hero__video.is-playing { opacity: 1; }
.hero__scrim {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.38) 100%);
}
.hero__content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(48px, 9vh, 120px);
    padding-inline: var(--gutter);
    width: 100%;
}
.hero__title {
    color: var(--c-on-dark);
    font-size: clamp(2.1rem, 4.4vw, 4rem); /* 64px — override del token --fs-hero (72px) solo para el hero del Home (BARNES 2026-06-24) */
    line-height: var(--lh-hero);  /* 1.2 — h1/hero parejo (token) */
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hero__links {
    display: flex; justify-content: center;
    gap: clamp(40px, 7vw, 120px);
}
.hero__links a {
    font-family: var(--ff-body); font-weight: 500;
    font-size: var(--fs-body); letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-on-dark); padding-bottom: 6px; position: relative;
}
.hero__links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: center;
    transition: transform .3s var(--ease);
}
.hero__links a:hover::after { transform: scaleX(1); }

/* ===================== INTRO + MAPA ===================== */
/* Patrón texto|imagen: texto angosto, imagen grande y centrada verticalmente (spec comp). */
.intro__grid {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.intro__title { font-size: var(--fs-h2); margin-bottom: var(--space-6); }
.intro__text p { max-width: 56ch; }
.intro__text p + p { margin-top: var(--space-4); }
.intro__text strong { font-weight: 600; }
.intro__map img { width: 100%; }

/* ===================== SECTION HEAD ===================== */
.section-head { margin-bottom: var(--space-7); }
.section-head__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* ===================== PROPIEDADES DESTACADAS ===================== */
/* Spec: banda cálida #F7F3F2; 4 cards ~445×576 en fila. Carrusel FULL-BLEED: las cards
   sangran los bordes de la página (no recortadas por un container centrado). */
.featured {
    background: var(--c-bg-alt);
    /* margen izq alineado al container central; sirve para alinear cards/nav con el heading */
    --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.featured__head { margin-bottom: var(--space-6); }
.featured__track {
    display: flex;
    align-items: flex-start;          /* sin stretch → respeta el aspect-ratio de la card */
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--edge);
    scroll-behavior: smooth;
    /* left alineado al container; right chico → la 4ª card sangra; vertical = aire para la sombra */
    padding: 30px var(--gutter) 30px var(--edge);
    scrollbar-width: none;
}
.featured__track::-webkit-scrollbar { display: none; }
.featured__item {
    flex: 0 0 clamp(280px, 23vw, 445px);   /* fija → la 4ª card sangra el borde de la página */
    scroll-snap-align: start;
}
.featured__item .property-card__media {
    aspect-ratio: 445 / 576;
    border-radius: 8px;
    box-shadow: 0 4px 22px rgba(0,0,0,.16);   /* suave y pareja, como el diseño */
}
/* Pie: arrows arriba-izquierda (alineados al container) + VER TODO centrado */
.featured__nav { display: flex; gap: var(--space-3); padding-left: var(--edge); margin-top: calc(-1 * var(--space-2)); }
.featured__cta { display: flex; justify-content: center; margin-top: -30px; }
.carousel-nav__btn {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--c-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-ink);
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.carousel-nav__btn:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ===================== EXPLORÁ LOS BARRIOS ===================== */
.barrios__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 96px); align-items: center;
}
.barrios__map {
    position: relative; overflow: hidden;
    /* Acuarela neutra (PNG) como base visual; el SVG solo muestra los polígonos-barrio */
    background: url('../img/barrios-map-bg.png') center / contain no-repeat;
    border-radius: 4px;
    aspect-ratio: 603 / 568;
}
.barrios__map svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; display: block;
}
/* Trama de CABA (resto de barrios): regiones blancas sobre la acuarela (como el diseño),
   con líneas de estructura. Las siluetas-barrio van por encima (reordenadas vía JS). */
.barrios__map svg > path {
    fill: rgba(255, 255, 255, 0.6);
    stroke: #929594;
    stroke-width: 0.8;
}
/* Polígonos de contexto (los 2 pedazos costeros): gris como los 6, sin borde, NO interactivos */
.barrios__map svg polygon:not(.barrio-poly) {
    fill: #d4d7d4;
    stroke: #d4d7d4;
    stroke-width: 0.8;
    pointer-events: none;
}

/* Polígonos de barrios: gris original, rojo sólido en activo/hover */
.barrio-poly {
    fill: #d4d7d4;
    stroke: #d4d7d4;
    stroke-width: 0.6;
    cursor: pointer;
    pointer-events: all;
    transition: fill .22s ease;
}
.barrio-poly.is-active {
    fill: var(--c-accent);
    stroke: var(--c-accent);
}

.barrios__title { font-size: var(--fs-h2); margin-bottom: var(--space-5); }
.barrios__lead { max-width: 48ch; color: var(--c-ink-soft); margin-bottom: var(--space-6); }
.barrios__list { margin-bottom: var(--space-7); }
.barrios__row a {
    display: block;
    font-family: var(--ff-display); font-size: var(--fs-card-title); line-height: var(--lh-card-title);
    padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line);
    color: var(--c-ink); transition: color .2s var(--ease);
}
.barrios__row.is-active a { color: var(--c-accent); font-weight: 700; }
.barrios__count { font-size: var(--fs-lead); }

/* ===================== RECORRÉ OTRAS CIUDADES (carrusel) ===================== */
/* Fiel a Demo-Home-Bloque-Otras.pdf: head centrado (título+lead+CTA) + carrusel full-bleed de
   5 fichas retrato debajo, MISMO mecanismo que "Propiedades destacadas" (.featured, arriba).
   Fondo blanco (sección NO usa --c-bg-alt, a diferencia de Destacadas). */
.otras {
    --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.otras__head {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: var(--space-7);
}
.otras__title { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--space-5); }
.otras__lead { max-width: 560px; color: var(--c-ink-soft); margin-bottom: var(--space-6); }
.otras__track {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--edge);
    scroll-behavior: smooth;
    padding: 4px var(--gutter) 30px var(--edge);
    scrollbar-width: none;
}
.otras__track::-webkit-scrollbar { display: none; }
.otras__item {
    position: relative;
    flex: 0 0 clamp(210px, 18.3vw, 380px);   /* fija → la 5ª ficha sangra el borde (spec despiece) */
    aspect-ratio: 753 / 961;                  /* ratio medido del comp (retrato) */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,.16);
    scroll-snap-align: start;
    display: block;
}
.otras__item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--ease);
}
.otras__item:hover img { transform: scale(1.04); }
/* Scrim inferior + nombre de región SIEMPRE visible (mobile no tiene hover) —
   mismo patrón que .property-card__media::after + .property-card__title. */
.otras__item::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 48%);
    opacity: .72;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}
.otras__item:hover::after { opacity: 1; }
.otras__label {
    position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 2;
    font-family: var(--ff-display); color: var(--c-on-dark);
    font-size: var(--fs-lead); line-height: 1.15;
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    pointer-events: none;
}
.otras__nav { display: flex; gap: var(--space-3); padding-left: var(--edge); }

/* ===================== VIDEO / REVISTA ===================== */
/* Spec: deco acuarela rosa (1629×917) + video centrado 943×537 (16:9) encima, play center. */
.video-feature {
    position: relative;
    padding-block: var(--section-y);
    display: grid; place-items: center;
    overflow: hidden;   /* la deco acuarela sangra y se recorta acá */
}
.video-feature__deco {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(1629px, 92vw); aspect-ratio: 1629 / 917;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    z-index: 0; pointer-events: none;
}
.video-feature__screen {
    position: relative; z-index: 1;
    width: min(943px, 62vw); aspect-ratio: 943 / 537;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    overflow: hidden;
}
.video-feature__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-feature__play {
    position: absolute; inset: 0; margin: auto;
    width: 78px; height: 78px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); color: var(--c-accent);
    transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.video-feature__play:hover { transform: scale(1.06); background: #fff; }
.video-feature__play.is-hidden { display: none; }

/* ===================== 30 AÑOS ===================== */
.experience__grid {
    display: grid; grid-template-columns: 0.78fr 1fr;
    gap: clamp(32px, 5vw, 80px); align-items: center;
}
.experience__title { font-size: var(--fs-h2); margin-bottom: var(--space-5); }
.experience__title em { font-style: italic; }
.experience__text { max-width: 48ch; margin-bottom: var(--space-6); }
.experience__text p + p { margin-top: var(--space-4); }
.experience__art img { width: 100%; }

/* ===================== CTA FINAL (acuarela full-bleed) ===================== */
/* Diferencia con .cta-help (Comprar/Otras): el fondo del comp CUBRE toda la sección (no es un
   "banner" recortado centrado) — override de .cta-help__bg a inset:0 + cover. Mismo card blanco. */
.cta-help--home {
    min-height: clamp(360px, 36vw, 713px);   /* ratio medido 712.6/1980 = 0.36 (SPEC.md) */
}
.cta-help--home .cta-help__bg {
    inset: 0; left: 0; top: 0; transform: none;
    width: 100%; height: 100%;
    background-size: cover;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
    .intro__grid,
    .barrios__grid,
    .experience__grid { grid-template-columns: 1fr; }
    .intro__map, .experience__art { order: -1; max-width: 560px; }
    .barrios__map { max-width: 520px; margin-inline: auto; aspect-ratio: 603 / 568; }
    .video-feature__screen { width: min(943px, 86vw); }
    .video-feature__deco { width: min(1629px, 110vw); }
}
@media (max-width: 560px) {
    .featured__item { flex-basis: 82%; }
    .otras__item { flex-basis: 62%; }
    .hero__links { gap: 28px; }
}