/* ============================================================
   BARNES Buenos Aires — Componentes globales
   Header (2 niveles), nav drawer, footer, property-card.
   ============================================================ */

/* ===================== HEADER ===================== */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    color: var(--c-ink);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.site-header--overlay {
    position: fixed;            /* siempre fijo → sin salto absolute→fixed al scrollear */
    color: var(--c-on-dark);
    background: transparent;
    border-bottom-color: transparent;
}
/* Etapa 1 (primer scroll): SOLO achica, sigue transparente sobre el hero. (.is-compact en main.js)
   Etapa 2 (segundo scroll): además vuelve sólido con color. (.is-solid en main.js) */
.site-header.is-solid {
    color: var(--c-ink);
    background: var(--c-bg);
    border-bottom-color: var(--c-line);
    box-shadow: 0 6px 30px rgba(0,0,0,.06);
}

.site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
    max-width: calc(var(--container-wide) + var(--gutter) * 2);
    margin-inline: auto;
    padding: var(--space-5) var(--gutter);
    transition: padding .3s var(--ease);
}
/* Sticky compacto: al scrollear el header ocupa menos alto (etapa 1) */
.site-header.is-compact .site-header__bar { padding-block: var(--space-2); }
.site-header.is-compact .site-nav__list { padding-block: var(--space-2); }

/* Hamburguesa — SOLO mobile (≤1024). En desktop oculta; el site-nav es la navegación. */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px; height: 22px;
    justify-self: start;
}
.hamburger span {
    display: block; height: 1.5px; width: 100%;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* Marca / logo central */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    grid-column: 2;          /* siempre la columna central, aunque el hamburger esté oculto */
    justify-self: center;
    color: currentColor;
}
/* Logo como imagen (lockup completo "BARNES INTERNATIONAL REALTY | Buenos Aires",
   provisto por el cliente 2026-07-14). Tamaño ajustado 2026-07-14 (feedback cliente): "como el tamaño del
   brand original" — spec medida sobre el comp = ~353px de ancho @1920. El SVG provisto
   mide 394.778x71.167 (ratio 5.547) → height:64px da ~355px de ancho renderizado (±10 del target).
   >1024px: 64px normal / ~54px en .is-compact (sticky). <=1024px: ~44px (proporcional, drawer incl.). */
.brand__logo { display: block; height: 64px; width: auto; transition: height .3s var(--ease); }
.site-header.is-compact .brand__logo { height: 54px; }

/* Dos variantes (light=blanca / dark=negra) apiladas en el mismo <a class="brand">, toggle por
   estado del header vía display (sin JS nuevo). Default (fondo blanco) y header sólido (.is-solid)
   → dark visible. Header overlay transparente sobre el hero (SIN .is-solid) → light visible.
   Ojo: .is-solid lo agrega main.js al MISMO elemento que .site-header--overlay, por eso el toggle
   se resuelve con :not(.is-solid) en vez de reglas separadas para .is-solid. */
.brand__logo--light { display: none; }
.site-header--overlay:not(.is-solid) .brand__logo--light { display: block; }
.site-header--overlay:not(.is-solid) .brand__logo--dark { display: none; }

/* Acciones derechas */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    grid-column: 3;          /* siempre la columna derecha */
    justify-self: end;
}
.pill-link {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 22px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.site-header--overlay .pill-link:hover { background: rgba(255,255,255,.14); }
.site-header:not(.site-header--overlay) .pill-link:hover,
.site-header.is-solid .pill-link:hover { background: var(--c-ink); color: var(--c-bg); }
.pill-link--dark { border-color: var(--c-ink); color: var(--c-ink); }

.mini-select {
    font-family: var(--ff-body);
    font-size: var(--fs-small);
    letter-spacing: .08em;
    display: inline-flex; align-items: center; gap: 4px;
}
.mini-select span { font-size: .6rem; }
/* .site-header__sep / .icon-btn removidos (FIX 5, Ronda visual 28-jul 1/2): eran el
   separador + botón del ícono de cuenta, sacado del header (desktop y drawer) — "nunca se va a
   aplicar esa lógica". Sin más consumidores en el HTML (grep verificado antes de borrar). */

/* Nav principal (nivel 2) */
.site-nav { border-top: 1px solid rgba(255,255,255,.18); }
.site-header:not(.site-header--overlay) .site-nav,
.site-header.is-solid .site-nav { border-top-color: var(--c-line); }
.site-nav__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(var(--space-5), 2.2vw, var(--space-7));
    padding: var(--space-4) var(--gutter);
    transition: padding .3s var(--ease);
}
.site-nav__list a {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-nav);
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}
.site-nav__list a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav__list a:hover::after { transform: scaleX(1); }

/* Dropdown "Acerca de Barnes" (2026-07-23; trigger→link real): <a> con
   href real a /acerca.php (página principal, viva) + panel con las 4 subs
   'viva' (nav_acerca_dropdown_items(), nav-acerca.php). Abre por :hover/:focus-within
   (mouse/teclado) — al ser un link real, click SIEMPRE navega (desktop Y touch); el panel
   sigue disponible en hover/focus sin bloquear la navegación. */
.site-nav__item { position: relative; }
.site-nav__trigger {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-nav);
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; color: inherit; cursor: pointer;
}
.site-nav__trigger::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav__trigger-chev { transition: transform .25s var(--ease); }
.site-nav__item.is-open .site-nav__trigger::after,
.site-nav__item:hover .site-nav__trigger::after,
.site-nav__item:focus-within .site-nav__trigger::after { transform: scaleX(1); }
.site-nav__item.is-open .site-nav__trigger-chev,
.site-nav__item:hover .site-nav__trigger-chev,
.site-nav__item:focus-within .site-nav__trigger-chev { transform: rotate(180deg); }

.site-nav__dropdown {
    /* top:100% SIN gap (ni margin ni translateY): el hit-box de :hover tiene que ser continuo
       entre el trigger y el panel — un gap (aunque sea de unos pocos px) es zona muerta donde
       el mouse puede "salir" del :hover del padre y cerrar el panel a mitad de camino. */
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: var(--c-bg); color: var(--c-ink);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    padding: 14px 0 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), visibility .2s;
    z-index: 1300;
}
.site-nav__item.is-open .site-nav__dropdown,
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.site-nav__dropdown a {
    display: block; padding: 11px 22px;
    font-family: var(--ff-body); font-size: var(--fs-body);
    font-weight: 400; letter-spacing: normal; text-transform: none;
    color: var(--c-ink); white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav__dropdown a:hover { background: var(--c-bg-alt); color: var(--c-accent); }

/* ===================== NAV DRAWER (off-canvas, mobile) ===================== */
/* Menú premium: head con marca + cerrar · lista de filas con hairline + chevron + estado
   activo · foot con preferencias (EN/U$/cuenta, que en mobile no caben en el header) + CTA. */
.nav-drawer {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(17,17,17,.5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
}
.nav-drawer.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer__panel {
    position: absolute; inset: 0 auto 0 0;
    width: min(400px, 90vw);
    display: flex; flex-direction: column;
    background: var(--c-bg);
    box-shadow: 0 0 60px rgba(0,0,0,.28);
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
}
.nav-drawer.is-open .nav-drawer__panel { transform: none; }

/* Head — marca + botón cerrar */
.nav-drawer__head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--c-line);
}
.nav-drawer__brand { display: flex; align-items: center; color: var(--c-ink); }
.nav-drawer__brand-logo { display: block; height: 40px; width: auto; }
.nav-drawer__close {
    flex: 0 0 auto;
    width: 40px; height: 40px; 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 .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav-drawer__close:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }

/* Lista — filas full-width con divisor hairline + chevron */
.nav-drawer__nav { flex: 1 1 auto; overflow-y: auto; }
.nav-drawer__list { display: block; }
.nav-drawer__list li + li { border-top: 1px solid var(--c-line); }
.nav-drawer__list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 28px;
    font-family: var(--ff-display); font-size: 1.15rem;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-ink);
    border-left: 3px solid transparent;
    transition: background-color .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-drawer__chev { color: var(--c-muted); transition: transform .25s var(--ease), color .2s var(--ease); }
.nav-drawer__list a:hover { background: var(--c-bg-alt); color: var(--c-accent); padding-left: 33px; }
.nav-drawer__list a:hover .nav-drawer__chev { color: var(--c-accent); transform: translateX(3px); }
.nav-drawer__list a.is-active { color: var(--c-accent); border-left-color: var(--c-accent); }
.nav-drawer__list a.is-active .nav-drawer__chev { color: var(--c-accent); }

/* Submenu "Acerca de Barnes" (2026-07-23; label→link real): la fila se separa
   en 2 controles independientes — .nav-drawer__link-toggle__label es un <a> real (navega a
   /acerca.php, ya viva) y .nav-drawer__link-toggle__chev es un <button> aparte (mismo hit-area
   que antes tenía toda la fila) que solo expande/colapsa el submenu sin navegar. Mismo look
   visual que antes (un único <button> full-width) — ahora repartido en 2 elementos flex. */
.nav-drawer__link-toggle {
    width: 100%;
    display: flex; align-items: stretch; justify-content: space-between;
    border-left: 3px solid transparent;
    transition: border-color .2s var(--ease);
}
.nav-drawer__link-toggle__label {
    flex: 1 1 auto;
    display: flex; align-items: center;
    padding: 16px 12px 16px 28px;
    font-family: var(--ff-display); font-size: 1.15rem;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-ink);
    transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-drawer__link-toggle__label:hover { background: var(--c-bg-alt); color: var(--c-accent); padding-left: 33px; }
.nav-drawer__link-toggle__chev {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 52px;
    color: var(--c-ink); background: none; border: 0; cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-drawer__link-toggle__chev:hover { background: var(--c-bg-alt); color: var(--c-accent); }
.nav-drawer__item--parent.is-open > .nav-drawer__link-toggle { border-left-color: var(--c-accent); }
.nav-drawer__item--parent.is-open > .nav-drawer__link-toggle .nav-drawer__link-toggle__chev { color: var(--c-accent); }
.nav-drawer__item--parent.is-open > .nav-drawer__link-toggle .nav-drawer__chev { color: var(--c-accent); transform: rotate(90deg); }
.nav-drawer__submenu {
    max-height: 0; overflow: hidden;
    background: var(--c-bg-alt);
    transition: max-height .3s var(--ease);
}
.nav-drawer__item--parent.is-open .nav-drawer__submenu { max-height: 320px; }
.nav-drawer__submenu a {
    display: block; padding: 13px 28px 13px 40px;
    font-family: var(--ff-body); font-size: .95rem; letter-spacing: .02em; text-transform: none;
    color: var(--c-ink-soft);
    border-top: 1px solid var(--c-line);
    transition: color .2s var(--ease);
}
.nav-drawer__submenu a:hover,
.nav-drawer__submenu a.is-active { color: var(--c-accent); }

/* Foot — preferencias + CTA Otras Ciudades */
.nav-drawer__foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--c-line);
    padding: 22px 28px calc(22px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 18px;
}
.nav-drawer__prefs { display: flex; align-items: center; gap: 16px; }
.nav-drawer__pref {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-nav);
    letter-spacing: .06em; color: var(--c-ink);
    transition: color .2s var(--ease);
}
.nav-drawer__pref span { font-size: .6rem; }
.nav-drawer__pref:hover { color: var(--c-accent); }
.nav-drawer__pref-sep { width: 1px; height: 16px; background: var(--c-line); }
.nav-drawer__cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 48px;
    font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-small);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-on-dark); background: var(--c-accent);
    border-radius: var(--radius-pill);
    transition: background-color .25s var(--ease), transform .2s var(--ease);
}
.nav-drawer__cta:hover { background: var(--c-accent-d); }
.nav-drawer__cta:active { transform: translateY(1px); }

/* ===================== NAV ITEMS SIN DESTINO (pre-launch, auditoría 2026-07-28) =====================
   ART DE VIVRE, NOVEDADES y cuenta (header + drawer) — páginas aún no construidas. Ver
   $nav_paginas_vivas en includes/header.php (mismo mecanismo en $legal_links, includes/footer.php,
   para la barra legal). El markup es IDÉNTICO a un link vivo, menos el atributo `href` (ya deja de
   ser un link para el navegador: no navega, no entra al tab-order, cursor vuelve a "default" solo)
   más esta clase + `aria-disabled="true"`. Lo único que hace falta neutralizar acá son los
   `:hover` que SÍ siguen disparando sin href (el mouse-over no depende de que el elemento sea
   focuseable). Reactivar una página = flipear su flag a `true`; esta clase deja de aplicarse sola. */
.is-nav-disabled { cursor: default; }
.site-nav__list a.is-nav-disabled:hover::after { transform: scaleX(0); }
.nav-drawer__list a.is-nav-disabled:hover { background: none; color: var(--c-ink); padding-left: 28px; }
.nav-drawer__list a.is-nav-disabled:hover .nav-drawer__chev { color: var(--c-muted); transform: none; }
.nav-drawer__pref.is-nav-disabled:hover { color: var(--c-ink); }
.site-footer__links a.is-nav-disabled:hover { color: inherit; }

/* ===================== PROPERTY CARD ===================== */
.property-card { position: relative; }
.property-card__media {
    position: relative; display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: var(--c-on-dark);
}
.property-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
}
.property-card:hover .property-card__media img { transform: scale(1.05); }
.property-card__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.46) 0%, rgba(0,0,0,0) 40%);
}
.property-card__tag {
    position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2;
    font-family: var(--ff-body); font-weight: 700;
    font-size: var(--fs-nav); letter-spacing: .14em; text-transform: uppercase;
}
.property-card__body {
    position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 2;
    display: flex; flex-direction: column; gap: 2px;
}
.property-card__hood {
    font-family: var(--ff-display); font-size: var(--fs-body);
    letter-spacing: .04em; text-transform: uppercase;
}
.property-card__title {
    font-family: var(--ff-display); color: var(--c-on-dark);
    font-size: var(--fs-card-title); line-height: var(--lh-card-title); text-transform: uppercase;
}
.property-card__divider {
    display: block; height: 1px; width: 100%;
    background: rgba(255,255,255,.55);
    margin: var(--space-3) 0 var(--space-2);
}
.property-card__op {
    font-family: var(--ff-display); font-size: var(--fs-lead);
    text-transform: uppercase;
}

/* ===================== PROPERTY LISTING CARD ===================== */
/* Card del listado (foto top + info abajo) + grid 3-col con LEAD grande (span 2).
   Componente COMPARTIDO (markup en includes/listing-card.php). Usado por Comprar,
   Descubrir-Barrio y Otras-Ciudades. Fiel a Demo-Comprar.pdf.
   Movido desde comprar.css a components.css al reusarse (2026-06-18): el componente
   ya estaba documentado como cross-página; su home correcto es el CSS global. La cascada es
   idéntica para Comprar (mismas reglas, antes en el orden, sin overrides posteriores). */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 1.7vw, 30px);
}

.listing-card {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}
.listing-card__media {
    position: relative; display: block;
    aspect-ratio: 421 / 319;
    overflow: hidden;
}
.listing-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
}
.listing-card:hover .listing-card__media img { transform: scale(1.05); }
.listing-card__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 28%);
    pointer-events: none;
}
.listing-card__tag {
    position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-nav); letter-spacing: .12em; text-transform: uppercase;
    color: #fff;
}
/* Padding/márgenes ajustados para que la FOTO domine el card (~57% del alto, como el comp:
   media 319 / card 552 = 57.7%). Componente compartido: afecta Comprar y las relacionadas de la ficha. */
.listing-card__info {
    padding: 18px 24px 20px;
    display: flex; flex-direction: column;
}
/* Tamaños relativos al título de la card (--fs-card-title), ratios medidos del mockup
   fuente hoja 5 con fitz: kicker .66× / specs .53× / operación .59× / precio .62×. */
.listing-card__hood {
    font-family: var(--ff-display); font-weight: 700;
    font-size: calc(var(--fs-card-title) * .66);
    color: var(--c-accent); letter-spacing: .04em; text-transform: uppercase;
}
.listing-card__title {
    font-family: var(--ff-display); font-weight: 400;
    font-size: var(--fs-card-title); line-height: var(--lh-card-title);
    text-transform: uppercase; margin-top: 8px;
}
.listing-card__title a { transition: color .2s var(--ease); }
.listing-card__title a:hover { color: var(--c-accent); }
.listing-card__meta {
    font-family: var(--ff-body); font-weight: 400;
    font-size: calc(var(--fs-card-title) * .53);
    color: var(--c-ink); margin-top: 9px;
}
.listing-card__divider {
    display: block; height: 1px; width: 100%;
    background: #969595;   /* gris del divisor medido en el mockup (fitz get_drawings) */
    margin: 14px 0;
}
.listing-card__op {
    font-family: var(--ff-display); font-weight: 400;
    font-size: calc(var(--fs-card-title) * .59);
    color: #403b39; text-transform: uppercase;
}
.listing-card__price {
    font-family: var(--ff-display); font-weight: 400;
    font-size: calc(var(--fs-card-title) * .62);
    color: var(--c-ink); margin-top: 2px;
}

/* ---- Card LEAD (destacada grande, span 2 col) ---- */
.listing-card--lead {
    grid-column: span 2;
    position: relative;
    background: none; box-shadow: none; border-radius: 0;
}
.listing-card--lead .listing-card__media {
    aspect-ratio: 897 / 576;   /* lead 897×576 del comp; FIJO → alto independiente del ratio de la foto
                                  (con aspect-ratio:auto un retrato estiraba el card y rompía el mosaico) */
    border-radius: 8px;
    box-shadow: 0 6px 26px rgba(0,0,0,.10);
}
.listing-card--lead .listing-card__info {
    position: absolute; top: 50%; right: 6%;
    transform: translateY(-50%);
    width: min(340px, 42%);
    background: #fff;
    border-radius: 8px;
    padding: 30px 32px 32px;
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.listing-card__badge {
    position: absolute; top: -15px; right: 26px;
    background: var(--c-accent); color: #fff;
    font-family: var(--ff-body); font-weight: 600;
    font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 16px; border-radius: var(--radius-pill);
}

/* Listado con UNA sola card: centrar para evitar el orphan (card solitaria pegada a la
   izquierda con columnas vacías). Compartido: Otras-Ciudades (1 propiedad fuera de BA) y
   Descubrir-Barrio (barrio con 1 propiedad en un bloque). Con ≥2 cards el listado usa la
   variante --lead (span 2 + 1 estándar = fila completa), así que no hay orphan. */
.listing-grid--center {
    display: flex;
    grid-template-columns: none;   /* desactiva el track grid heredado al pasar a flex */
    justify-content: center;
}
.listing-grid--center .listing-card { width: min(380px, 100%); }

@media (max-width: 1024px) {
    .listing-grid { grid-template-columns: repeat(2, 1fr); }
    .listing-card--lead { grid-column: span 2; }
}
@media (max-width: 720px) {
    .listing-grid { grid-template-columns: 1fr; }
    .listing-card--lead { grid-column: span 1; }
    .listing-card--lead .listing-card__media { aspect-ratio: 421 / 319; height: auto; }
    .listing-card--lead .listing-card__info {
        position: static; transform: none; width: auto;
        box-shadow: none; border-radius: 0; padding: 22px 24px 26px;
    }
    .listing-card__badge {
        position: static; align-self: flex-start;
        margin-bottom: 12px;
    }
}

/* ===================== BUSCADOR / FILTROS (pill blanco) ===================== */
/* Componente COMPARTIDO (markup en includes/search-bar.php). Hero de páginas internas
   (Comprar, Otras-Ciudades). Directiva cliente 2026-06-11: sobre la imagen,
   bajo el título. Movido desde comprar.css a components.css al reusarse (2026-06-18). */
.search-bar {
    display: flex; align-items: center;
    width: min(900px, 94%);
    margin-top: clamp(28px, 4vh, 46px);
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 10px;
    box-shadow: 0 20px 54px rgba(0,0,0,.24);
    color: var(--c-ink);
}
/* Campo: etiqueta + chevron centrados (sin divisores, fiel al comp); el <select>
   va transparente encima para la interacción nativa. */
.search-bar__field {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 17px 14px;
}
.search-bar__value {
    font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-nav);
    color: #818181; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-bar__field.has-value .search-bar__value { color: var(--c-ink); }
.search-bar__chev { flex: 0 0 auto; color: var(--c-ink); }
.search-bar select {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0;
    appearance: none; -webkit-appearance: none;
}
.search-bar__field:focus-within { outline: 2px solid rgba(199,10,51,.35); outline-offset: -3px; border-radius: 22px; }
.search-bar__submit {
    flex: 0 0 auto;
    width: 54px; height: 54px; border-radius: 50%;
    margin-left: 8px;
    background: var(--c-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.search-bar__submit:hover { background: var(--c-accent-d); }
.search-bar__submit:active { transform: scale(.96); }

@media (max-width: 720px) {
    .search-bar { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 10px; }
    .search-bar__field { justify-content: space-between; padding: 16px 18px; }
    .search-bar__field + .search-bar__field { border-top: 1px solid var(--c-line); }
    .search-bar__submit { width: 100%; height: 50px; border-radius: 12px; margin-left: 0; margin-top: 8px; }
}

/* ---- Custom dropdown panel (progressive enhancement; JS añade .sb-enhanced al form) ---- */
/* En ≤720px se mantiene el <select> nativo; el panel custom solo aplica en >720px.          */
.sb-enhanced .search-bar__field {
    cursor: pointer;
}
/* Cuando el custom está activo, ocultamos el select nativo (visualmente) en >720px          */
@media (min-width: 721px) {
    .sb-enhanced .search-bar__field select {
        display: none;
    }
}
/* Trigger: área clicable accesible (reemplaza el select en desktop) */
.search-bar__trigger {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    cursor: pointer;
    background: transparent;
    border: 0; outline: 0;
    -webkit-appearance: none; appearance: none;
}
/* Rotación del chevron cuando el panel está abierto */
.search-bar__field[aria-expanded="true"] .search-bar__chev {
    transform: rotate(180deg);
}
.search-bar__chev {
    transition: transform .2s var(--ease);
    pointer-events: none;
}
/* Panel de opciones */
.search-bar__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: max(100%, 200px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    z-index: 1200;
    overflow: hidden;
    /* Animación entrada */
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.search-bar__panel.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Lista de opciones */
.search-bar__options {
    list-style: none;
    margin: 0; padding: 6px 0;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Scrollbar en el color de marca (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) transparent;
}
/* Scrollbar en el color de marca (WebKit/Blink) */
.search-bar__options::-webkit-scrollbar { width: 8px; }
.search-bar__options::-webkit-scrollbar-track { background: transparent; }
.search-bar__options::-webkit-scrollbar-thumb {
    background: var(--c-accent);
    border-radius: 4px;
    border: 2px solid #fff;   /* respiro contra el fondo blanco del panel */
}
.search-bar__options::-webkit-scrollbar-thumb:hover { background: var(--c-accent-d, var(--c-accent)); }
/* Opción individual */
.search-bar__option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 20px;
    font-family: var(--ff-body); font-size: var(--fs-nav); font-weight: 500;
    color: var(--c-ink);
    cursor: pointer;
    min-height: 44px;
    transition: background-color .12s ease;
    user-select: none;
}
.search-bar__option:hover,
.search-bar__option:focus {
    background: var(--c-bg-alt);
    outline: 0;
}
/* Placeholder/reset option */
.search-bar__option[data-value=""] {
    color: #939598;
    font-weight: 400;
}
/* Opción seleccionada actualmente */
.search-bar__option[aria-selected="true"] {
    color: var(--c-accent);
    font-weight: 600;
}
/* Check mark para opción seleccionada */
.search-bar__option[aria-selected="true"]::after {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-left: 12px;
    background: var(--c-accent);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");
    background-size: contain;
}
/* Divisor sutil entre opciones */
.search-bar__option + .search-bar__option {
    border-top: 1px solid var(--c-line);
}
/* Focus ring: ya manejado por .search-bar__field:focus-within (declarado arriba) */

/* ===================== PAGINACIÓN (.pager) ===================== */
/* Compartido: Comprar, Otras-Ciudades. Ancla #listado para no saltar al top. */
.pager {
    display: flex; justify-content: center; align-items: center;
    gap: 14px; margin-top: clamp(44px, 5vw, 68px);
}
.pager__num {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--ff-body); font-size: var(--fs-small); font-weight: 600;
    color: #818181;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pager__num:hover { color: var(--c-ink); }
.pager__num.is-active { background: var(--c-accent); color: #fff; }
.pager__arrow { color: #818181; display: inline-flex; transition: color .2s var(--ease); }
.pager__arrow:hover { color: var(--c-ink); }

/* ===================== CTA "Necesitás ayuda?" (.cta-help) ===================== */
/* Componente COMPARTIDO (copy verbatim del comp): banner acuarela centrado + card blanca
   con botón rojo. Comprar y Otras-Ciudades. El ancho/aspect del banner se
   parametriza con --cta-bg-w / --cta-bg-ar (el banner de Otras es más ancho que el de Comprar). */
.cta-help {
    position: relative;
    display: grid; place-items: center;
    padding-block: clamp(56px, 7vw, 110px);
    overflow: hidden;
    --cta-bg-w: 1194px;     /* default = banner de Comprar */
    --cta-bg-ar: 1194 / 672;
}
.cta-help__bg {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(var(--cta-bg-w), 92vw); aspect-ratio: var(--cta-bg-ar);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    z-index: 0; pointer-events: none;
}
.cta-help__card {
    position: relative; z-index: 1;
    width: min(570px, 88vw);
    background: #fff;
    text-align: center;
    padding: clamp(34px, 4vw, 50px) clamp(28px, 4vw, 56px);
}
.cta-help__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.cta-help__text {
    font-family: var(--ff-display); font-size: var(--fs-card-title);
    line-height: 1.3; margin: 16px 0 28px;
}

/* ===================== FORM COMPARTIDO (Tasar + Contacto) ===================== */
/* Markup: includes/barnes-form.php. Contenedor (fondo/borde/radius) es PROPIO de cada página
   (.tasar-form-box blanco+borde en tasar.css / .contacto-form-box crema sin borde en
   contacto.css) — acá solo los campos, compartidos pixel-a-pixel entre ambas (ver SPEC.md de
   cada página: coordenadas x idénticas, confirmado dígito a dígito). Ancho de referencia del
   comp: 896px (= ancho medido del textarea/underlines @1920). Nombre/Email = SUBRAYADO (sin
   caja); select de código de área y Mensaje = CON CAJA (borde). Botón reusa `.btn` global. */
.barnes-form { max-width: 896px; }
.barnes-form__notice {
    font-family: var(--ff-body); font-size: var(--fs-body);
    padding: 14px 18px; margin-bottom: 20px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
}
.barnes-form__notice--ok { border-color: var(--c-accent); color: var(--c-ink); }
.barnes-form__notice--error { border-color: var(--c-accent); background: rgba(199,10,51,.06); color: var(--c-accent-d); }

/* Honeypot: oculto visualmente sin display:none (más robusto ante bots simples). */
.barnes-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.barnes-form__row { margin-bottom: 26px; }
.barnes-form__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 39px; }
.barnes-form__row--phone { display: flex; align-items: flex-end; gap: 20px; }
.barnes-form__field { display: flex; flex-direction: column; gap: 8px; }
.barnes-form__field--code { flex: 0 0 auto; }
.barnes-form__field--phone { flex: 1 1 auto; }
.barnes-form__field--message { flex: 1 1 auto; }

.barnes-form__label {
    font-family: var(--ff-body); font-size: var(--fs-body); color: #818181;
}
.barnes-form__input,
.barnes-form__textarea {
    width: 100%;
    font-family: var(--ff-body); font-size: var(--fs-body); color: var(--c-ink);
    background: transparent;
    border: none; border-bottom: 1px solid #818181;
    padding: 6px 2px 10px;
    transition: border-color .2s var(--ease);
}
.barnes-form__input:focus, .barnes-form__textarea:focus { outline: none; border-color: var(--c-accent); }
.barnes-form__textarea {
    border: 1px solid #818181; border-radius: 6px;
    padding: 14px 16px; min-height: 130px; resize: vertical;
}
.barnes-form__textarea:focus { border-color: var(--c-accent); }
.barnes-form__select {
    font-family: var(--ff-body); font-size: var(--fs-nav); color: #818181;
    background: var(--c-bg); border: 1px solid #818181; border-radius: 6px;
    padding: 9px 12px; min-width: 150px;
}

.barnes-form__foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 20px; margin-top: 30px;
}
.barnes-form__submit { border: none; cursor: pointer; }
@media (max-width: 640px) {
    .barnes-form__row--2col { grid-template-columns: 1fr; gap: 26px; }
    .barnes-form__row--phone { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ===================== FOOTER ===================== */
.site-footer { padding-block: var(--space-9) var(--space-7); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.site-footer__top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--space-7); flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: center; gap: var(--space-6); }
.site-footer__seal { width: 116px; height: auto; }
.site-footer__name { font-family: var(--ff-display); font-size: var(--fs-h4); }
.site-footer__addr { font-family: var(--ff-display); font-size: var(--fs-nav); color: var(--c-ink-soft); margin-top: 6px; }
.site-footer__social-title { font-family: var(--ff-display); font-size: var(--fs-lead); margin-bottom: var(--space-4); }
.social-list { display: flex; gap: var(--space-3); }
.social-list__item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-ink); color: var(--c-bg);
    transition: background-color .25s var(--ease);
}
.social-list__item:hover { background: var(--c-accent); }
.site-footer__rule { border: 0; border-top: 1px solid var(--c-line); margin-block: var(--space-7); }
.site-footer__legal p { font-family: var(--ff-body); font-weight: 300; font-size: var(--fs-nav); color: var(--c-muted); }
.site-footer__legal p + p { margin-top: var(--space-3); }
.site-footer__legal strong { font-weight: 600; color: var(--c-muted); }
.site-footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-5); flex-wrap: wrap;
    font-size: var(--fs-small); color: var(--c-muted); font-weight: 300;
}
.site-footer__links { display: flex; gap: var(--space-5); }
.site-footer__links a:hover { color: var(--c-accent); }

/* ===================== FLOATING BUTTONS (FAB) ===================== */
.fab {
    position: fixed;
    right: clamp(16px, 2.4vw, 34px);
    bottom: clamp(16px, 2.4vw, 34px);
    z-index: 1500;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.fab__btn {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.fab__btn:hover { transform: translateY(-3px); }
.fab__btn--top {
    background: var(--c-bg); color: var(--c-ink);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .25s var(--ease);
}
.fab__btn--top.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab__btn--top.is-visible:hover { transform: translateY(-3px); }
.fab__btn--mail { background: var(--c-accent); color: #fff; }
.fab__btn--mail:hover { background: var(--c-accent-d); }
@media (max-width: 560px) {
    .fab__btn { width: 50px; height: 50px; }
}

/* ===================== MAPAS INTERACTIVOS (Leaflet) =====================
   Popup compartido entre el mapa de "Nuestra red internacional" (quienes.css) y el de
   "Contacto" (contacto.css) — Ronda visual 28-jul, 2/2. */
.barnes-map-popup { min-width: 160px; }
.barnes-map-popup__name {
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.barnes-map-popup__addr, .barnes-map-popup__phone {
    font-family: var(--ff-body);
    font-weight: 300;
    font-size: 12px;
    color: var(--c-ink);
    margin: 0;
}
.leaflet-popup-content-wrapper { border-radius: 4px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .hamburger { display: inline-flex; }
    .site-nav { display: none; }
    .site-header__actions .pill-link,
    .site-header__actions .mini-select { display: none; }
    .site-header__bar { padding-block: var(--space-4); }
    .brand__logo { height: 44px; }
}
@media (max-width: 640px) {
    .site-footer__top { flex-direction: column; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1025px) {
    .nav-drawer { display: none; }
}