/* ============================================================
   BARNES Buenos Aires — Comprar-Propiedad (ficha interna)
   Fiel a Demo-Comprar-Propiedad.pdf.
   Orden: Hero(slider) · Descripción · Galería · Ficha · Aviso legal · Ubicación · CTA · Relacionadas.
   Depende de comprar.css para el componente .listing-card (relacionadas).
   ============================================================ */

/* ===================== HERO (slider de fotos) ===================== */
/* Spec: foto full-bleed sobre #231f20; barrio 24px + dirección 64px + 3 botones, centrados. */
.prop-hero {
    position: relative;
    min-height: clamp(620px, 48vw, 940px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--c-on-dark);
    background: #231f20;
    overflow: hidden;
    padding: calc(var(--header-h) + 40px) var(--gutter) 70px;
}
.prop-hero__media { position: absolute; inset: 0; z-index: 0; }
.prop-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .6s var(--ease);
}
.prop-hero__img.is-active { opacity: 1; }
.prop-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.5) 100%);
}
.prop-hero__content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center; width: 100%;
}
.prop-hero__hood {
    font-family: var(--ff-display);
    font-size: var(--fs-card-title);      /* 24px */
    letter-spacing: .06em; text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.prop-hero__title {
    font-family: var(--ff-display);
    color: var(--c-on-dark);               /* BLANCO (comp: 64px #fff). Explícito: el h1 de base.css
                                              setea --c-ink y pisaba el blanco heredado del hero. */
    font-size: clamp(2.1rem, 4.4vw, 4rem); /* 64px del comp */
    line-height: var(--lh-hero); letter-spacing: .02em;
    text-transform: uppercase;             /* comp: dirección en mayúsculas en el hero */
    margin-top: 10px;
    text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}
/* Flechas del slider */
.prop-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; color: var(--c-on-dark);
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.4);
    transition: background-color .25s var(--ease);
}
.prop-hero__arrow:hover { background: rgba(0,0,0,.4); }
.prop-hero__arrow--prev { left: clamp(16px, 3vw, 48px); }
.prop-hero__arrow--next { right: clamp(16px, 3vw, 48px); }

/* ---- Fila de botones de acción (hero + galería) ---- */
.prop-actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(12px, 1.4vw, 20px);
    margin-top: clamp(28px, 4vh, 48px);
}
/* Hero: los botones van ABAJO, cerca del borde inferior (comp: y859 sobre hero 943 →
   ~65px del fondo @1920), NO centrados con el título. Posición absoluta sobre la foto. */
.prop-actions--hero {
    position: absolute; left: var(--gutter); right: var(--gutter);
    bottom: clamp(28px, 3.4vw, 64px);
    z-index: 3; margin-top: 0;
}
.prop-btn {
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;                         /* sin el 1.7 heredado del body (engordaba el pill) */
    padding: 11px 26px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    cursor: pointer;
}
.prop-btn--primary { background: var(--c-accent); color: #fff; border: 1px solid var(--c-accent); }
.prop-btn--primary:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); }
.prop-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.65); }
.prop-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* Variante sobre fondo claro (bajo la galería) */
.prop-actions--gallery .prop-btn--ghost { color: var(--c-ink); border-color: var(--c-line); }
.prop-actions--gallery .prop-btn--ghost:hover { background: var(--c-bg-alt); border-color: var(--c-ink); }

/* ===================== DESCRIPCIÓN ===================== */
/* Spec: bg #fff, 2 columnas. Izq info+texto; der grid 2×2 de stat-cards. */
.prop-desc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: start;
}
.prop-desc__hood {
    font-family: var(--ff-display); font-size: var(--fs-body);
    color: var(--c-accent); letter-spacing: .04em; text-transform: uppercase;
}
.prop-desc__title { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 8px; }
.prop-desc__op {
    font-family: var(--ff-display); font-size: var(--fs-lead);
    text-transform: uppercase; margin-top: 18px;
}
.prop-desc__price {
    font-family: var(--ff-display); font-size: var(--fs-card-title);
    margin-top: 2px;
}
/* Línea secundaria de precio (multi-operación, 2026-07-27): discreta, bajo la
   primaria — propiedad con más de 1 operación simultánea (ej. venta+alquiler). */
.prop-desc__price-secondary {
    font-family: var(--ff-body); font-size: var(--fs-nav); color: var(--c-ink-soft);
    margin-top: 6px;
}
.prop-desc__divider {
    display: block; height: 1px; width: 100%;
    background: var(--c-line); margin: clamp(24px, 3vw, 36px) 0;
}
.prop-desc__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); }
.prop-desc__cta { margin-top: clamp(28px, 3.4vw, 44px); }

/* Stat-cards (2×2) */
.prop-desc__stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 1.3vw, 22px);
}
.prop-stat {
    border: 1px solid var(--c-line); border-radius: 10px;
    padding: clamp(22px, 1.9vw, 30px) clamp(20px, 1.8vw, 28px);
    min-height: clamp(118px, 8.5vw, 142px);
    /* Contenido anclado ARRIBA: el número queda alto en la card (como el comp), de modo que
       la columna derecha "arranca" arriba y no a la altura del texto descriptivo. */
    display: flex; flex-direction: column; justify-content: flex-start;
}
.prop-stat__n {
    font-family: var(--ff-body); font-size: 2rem; /* 32px — palo seco Raleway (BARNES 2026-06-24) */
    font-weight: 600;
    line-height: 1; color: var(--c-ink);
}
.prop-stat__u {
    font-size: .9rem; margin-left: 4px;
    letter-spacing: .04em; text-transform: uppercase;
}
.prop-stat__label {
    font-family: var(--ff-body); font-size: var(--fs-body);
    color: #818181; margin-top: 12px;
    white-space: nowrap; /* evita que el label baje a 2 líneas (BARNES 2026-06-24) */
}

/* ===================== GALERÍA (collage masonry 2-col) ===================== */
/* Spec: 2 columnas que alternan el lado ancho (7/5 ↔ 5/7), gap ~18px, esquinas redondeadas. */
.prop-gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(230px, 24vw, 340px);
    gap: clamp(12px, 1vw, 18px);
}
.prop-gallery__cell {
    grid-column: span 6;             /* fallback simétrico */
    overflow: hidden; border-radius: 10px;
    isolation: isolate;              /* fuerza el clip de la img escalada (hover) al radio del contenedor */
    cursor: pointer; display: block;
}
/* Patrón alternado por fila (pares): wide-left / wide-right */
.prop-gallery__cell:nth-child(8n+1),
.prop-gallery__cell:nth-child(8n+4),
.prop-gallery__cell:nth-child(8n+5),
.prop-gallery__cell:nth-child(8n)    { grid-column: span 7; }
.prop-gallery__cell:nth-child(8n+2),
.prop-gallery__cell:nth-child(8n+3),
.prop-gallery__cell:nth-child(8n+6),
.prop-gallery__cell:nth-child(8n+7)  { grid-column: span 5; }
.prop-gallery__cell img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: inherit;          /* refuerza el redondeo en el hover-scale */
    transition: transform .6s var(--ease);
}
.prop-gallery__cell:hover img { transform: scale(1.04); }
.prop-gallery .prop-actions { margin-top: clamp(28px, 3vw, 44px); }

/* ===================== FICHA TÉCNICA ===================== */
/* Spec: banda cálida #f7f3f2. Heading + código; grid 4-col label/valor; edificio+amenities+servicios. */
.prop-ficha { background: var(--c-bg-alt); }
.prop-ficha__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-5); flex-wrap: wrap;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--c-line);
}
/* Títulos de ficha/ubicación: mayúsculas + negro sólido (comp: BauerBodoni 24px #000),
   con tracking leve del serif en caja alta. (base.css ya da color --c-ink a hN; se explicita
   acá para que no dependa de la herencia.) */
.prop-ficha__title {
    font-size: var(--fs-card-title);   /* 24px */
    line-height: var(--lh-card-title);
    color: var(--c-ink);
    text-transform: uppercase; letter-spacing: .03em;
}
.prop-ficha__code {
    font-family: var(--ff-body); font-size: var(--fs-nav);
    letter-spacing: .1em; color: #818181;
}
.prop-ficha__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 2.2vw, 38px) clamp(20px, 2vw, 40px);
    margin-top: clamp(34px, 3.4vw, 52px);
}
.prop-ficha__item dt {
    font-family: var(--ff-body); font-size: var(--fs-body);
    color: #818181;
}
.prop-ficha__item dd {
    font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body);
    color: #5b5b5b; margin-top: 6px;
}
.prop-ficha__subtitle {
    font-size: var(--fs-card-title);
    line-height: var(--lh-card-title);
    color: var(--c-ink);
    text-transform: uppercase; letter-spacing: .03em;
    margin: clamp(48px, 5vw, 80px) 0 var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--c-line);
}
.prop-ficha__cols {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 56px);
    margin-top: clamp(28px, 2.6vw, 40px);
}
.prop-ficha__col .prop-ficha__item + .prop-ficha__item { margin-top: clamp(20px, 1.8vw, 30px); }
.prop-ficha__col-title {
    font-family: var(--ff-body); font-size: var(--fs-body);
    color: #818181; margin-bottom: var(--space-4);
}
.prop-ficha__list {
    font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body);
    color: #5b5b5b;
}
.prop-ficha__list li + li { margin-top: 10px; }

/* Acciones (descargar / compartir) */
.prop-ficha__actions {
    display: flex; gap: clamp(28px, 3vw, 48px); flex-wrap: wrap;
    margin-top: clamp(40px, 4vw, 64px);
    padding-top: clamp(24px, 2.4vw, 36px);
    border-top: 1px solid var(--c-line);
}
.prop-iconbtn {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-nav); letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-ink); cursor: pointer; background: none;
}
.prop-iconbtn__icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-ink); color: var(--c-bg);
    transition: background-color .25s var(--ease);
}
.prop-iconbtn:hover .prop-iconbtn__icon { background: var(--c-accent); }

/* ===================== AVISO LEGAL (2026-07-29) ===================== */
/* Bloque chico y gris discreto al pie de la ficha técnica — visible sin interacción, no
   collapsible (pedido cliente). Mismo tono/tamaño que el legal del footer global
   (.site-footer__legal p en components.css): --fs-nav + --c-muted, peso liviano. */
.prop-legal { padding-top: 0; }
.prop-legal__title {
    font-size: var(--fs-card-title);
    line-height: var(--lh-card-title);
    color: var(--c-ink);
    text-transform: uppercase; letter-spacing: .03em;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--c-line);
}
.prop-legal__text {
    max-width: 900px;
    margin-top: clamp(20px, 2vw, 30px);
}
.prop-legal__text p {
    font-family: var(--ff-body); font-weight: 300;
    font-size: var(--fs-nav); line-height: 1.7;
    color: var(--c-muted);
}
.prop-legal__text p + p { margin-top: 1em; }

/* ===================== UBICACIÓN ===================== */
/* Spec: banda cálida #f7f3f2; heading + mapa con pin (geo). */
.prop-ubi { background: var(--c-bg-alt); padding-top: 0; }
.prop-ubi__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.prop-ubi__title {
    font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--c-ink);
    text-transform: uppercase; letter-spacing: .03em;
}
.prop-ubi__gmaps {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-nav); letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-accent);
    transition: color .2s var(--ease);
}
.prop-ubi__gmaps:hover { color: var(--c-accent-d); }
.prop-ubi__map {
    position: relative;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    aspect-ratio: 1253 / 533;          /* panorámico, como el comp */
    background: #e9e6e2;
}
.prop-ubi__map .leaflet-map { position: absolute; inset: 0; }
/* Tiles en grayscale (el marker rojo queda a color, en otro pane) */
.prop-ubi__map .leaflet-tile-pane { filter: grayscale(1) contrast(.95); }
/* Pin rojo (divIcon) */
.prop-ubi__pin { color: var(--c-accent); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.prop-ubi__pin svg { width: 100%; height: 100%; display: block; }

/* ===================== CTA ===================== */
/* Spec: foto full-bleed + card blanca centrada. */
.prop-cta {
    position: relative;
    display: grid; place-items: center;
    min-height: clamp(420px, 36vw, 700px);
    padding: clamp(60px, 7vw, 120px) var(--gutter);
    overflow: hidden;
}
.prop-cta__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center; background-color: #231f20;
}
.prop-cta__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.12); }
.prop-cta__card {
    position: relative; z-index: 2;
    width: min(570px, 90vw);
    background: #fff; text-align: center;
    padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 60px);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.prop-cta__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.prop-cta__text {
    font-family: var(--ff-display); font-size: var(--fs-card-title);
    line-height: 1.3; margin: 16px 0 28px;
}

/* ===================== RELACIONADAS ===================== */
/* Spec: bg #fff, heading centrado, 3 cards estándar (componente .listing-card de comprar.css). */
.prop-related__title { font-size: var(--fs-h3); line-height: var(--lh-h3); text-align: center; margin-bottom: clamp(40px, 4vw, 64px); }

/* ===================== LIGHTBOX (galería completa) ===================== */
.prop-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,8,8,.94);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.prop-lightbox.is-open { opacity: 1; pointer-events: auto; }
.prop-lightbox__stage {
    max-width: min(1200px, 92vw); max-height: 86vh;
    display: flex; flex-direction: column; align-items: center;
}
.prop-lightbox__stage img {
    max-width: 100%; max-height: 80vh; object-fit: contain;
    border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* Planos en iframe (PDF/imagen) — fondo blanco para el visor de PDF */
.prop-lightbox__stage iframe {
    width: min(1000px, 90vw); height: 80vh; border: 0;
    background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.prop-lightbox__cap {
    display: flex; align-items: center; gap: 20px;
    margin-top: 16px;
}
.prop-lightbox__count {
    color: rgba(255,255,255,.75); font-family: var(--ff-body);
    font-size: var(--fs-small); letter-spacing: .12em;
}
.prop-lightbox__download {
    display: inline-flex; align-items: center;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase;
    color: #fff; padding: 8px 18px; border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius-pill); transition: background-color .2s var(--ease);
}
.prop-lightbox__download:hover { background: rgba(255,255,255,.15); }
.prop-lightbox__close {
    position: absolute; top: clamp(16px, 2.4vw, 34px); right: clamp(16px, 2.4vw, 38px);
    color: #fff; font-size: 2.4rem; line-height: 1; z-index: 2;
}
.prop-lightbox__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #fff; width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); transition: background-color .25s var(--ease);
}
.prop-lightbox__arrow:hover { background: rgba(255,255,255,.22); }
.prop-lightbox__arrow--prev { left: clamp(10px, 2.4vw, 40px); }
.prop-lightbox__arrow--next { right: clamp(10px, 2.4vw, 40px); }

/* ===================== 404 ===================== */
.prop-404 {
    min-height: 70vh; display: grid; place-items: center;
    padding: calc(var(--header-h) + 60px) var(--gutter) var(--space-10);
    text-align: center;
}
.prop-404__kicker {
    font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-nav);
    letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent);
}
.prop-404__title { font-size: var(--fs-h2); margin: var(--space-4) 0 var(--space-5); line-height: var(--lh-hero); }
.prop-404__text { max-width: 520px; margin: 0 auto var(--space-7); color: var(--c-ink-soft); font-size: var(--fs-lead); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .prop-desc__grid { grid-template-columns: 1fr; }
    .prop-desc__stats { max-width: 520px; }
    .prop-ficha__grid { grid-template-columns: repeat(2, 1fr); }
    .prop-ficha__cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    /* Galería: collage colapsa a 1 columna (cada celda full-width) */
    .prop-gallery__grid { grid-auto-rows: clamp(200px, 60vw, 280px); }
    .prop-gallery__cell,
    .prop-gallery__cell:nth-child(n) { grid-column: span 12; }
    .prop-ficha__grid { grid-template-columns: 1fr; }
    .prop-hero__arrow { width: 42px; height: 42px; }

    /* Orden mobile: texto/descripción primero; mapa y galería al final (BARNES 2026-06-24) */
    .prop-desc__grid { display: flex; flex-direction: column; }
    .prop-desc__main { order: 1; }
    .prop-desc__stats { order: 2; }
    /* La galería (.prop-gallery) y el mapa (.prop-ubi) son secciones independientes
       que ya siguen al texto en el DOM — el orden visual es correcto sin order adicional.
       Si en el futuro se reordena el DOM, añadir order en section level aquí. */
}