/* ==========================================================
   SKH BROKERS — estilos propios
   Se carga DESPUÉS de styles.css y sólo agrega lo que esta
   página necesita: hero corto, filtros, grilla y ficha.
   Los colores, tipografías, botones, nav, footer y formularios
   vienen de styles.css: no se redefinen acá.
   ========================================================== */

/* ---------- Hero corto ----------
   Una sola pantalla y sin vídeo: acá la gente viene a buscar,
   no a mirar. Los destacados tienen que aparecer enseguida. */
.bk-hero{
  position:relative;min-height:82svh;display:flex;align-items:flex-end;
  overflow:hidden;padding:150px 0 clamp(48px,7vh,86px);
}
.bk-hero-media{position:absolute;inset:0;z-index:0}
.bk-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
/* Ojo: acá la foto es CLARA, al revés que el vídeo nocturno del home.
   Por eso este velo es bastante más fuerte y arranca desde arriba, y
   se le suma un degradado lateral que oscurece la columna del texto
   dejando ver la foto del lado derecho. */
.bk-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(13,13,14,.80) 0%, rgba(13,13,14,.58) 42%,
      rgba(13,13,14,.20) 78%, rgba(13,13,14,.10) 100%),
    linear-gradient(180deg,
      rgba(13,13,14,.55) 0%, rgba(13,13,14,.34) 22%,
      rgba(13,13,14,.44) 52%, rgba(13,13,14,.80) 78%, rgba(13,13,14,.98) 100%);
}
.bk-hero .wrap{position:relative;z-index:2;width:100%}
.bk-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5rem);line-height:1;letter-spacing:-.025em;
  margin:24px 0 0;max-width:16ch;
}
.bk-hero h1 em{font-style:italic;color:var(--brand)}
.bk-hero p{color:var(--text-2);max-width:48ch;margin-top:22px;font-size:1.06rem}

/* Accesos directos por tipo */
.bk-atajos{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.bk-atajos button{
  background:rgba(13,13,14,.55);border:1px solid var(--line);color:var(--text);
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;transition:.4s var(--ease);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.bk-atajos button:hover{background:var(--brand);border-color:var(--brand);color:#0D0D0E;transform:translateY(-2px)}

/* ---------- Filtros ---------- */
/* top:0 la metía DEBAJO del header fijo, que mide unos 62px y tiene
   z-index mayor: al scrollear la barra desaparecía justo cuando más
   se necesita. Se pega por debajo del header, no en el borde. */
.bk-filtros{
  position:sticky;top:62px;z-index:40;background:rgba(13,13,14,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:18px 0;
}
.bk-filtros-inner{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.bk-grupo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk-grupo .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bk-grupo button{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;transition:.35s var(--ease);
}
.bk-grupo button:hover{color:var(--text);border-color:var(--muted)}
.bk-grupo button.on{background:var(--brand);border-color:var(--brand);color:#0D0D0E}
.bk-contador{font-size:11px;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
.bk-contador b{color:var(--brand);font-weight:500}

/* ---------- Grilla de propiedades ---------- */
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.bk-grid.destacados{grid-template-columns:repeat(3,1fr)}

.bk-card{
  background:var(--surface);border:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.bk-card:hover{border-color:var(--brand);transform:translateY(-4px)}
.bk-card-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.bk-card-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.88);
  transition:transform 1.1s var(--ease),filter .5s var(--ease)}
.bk-card:hover .bk-card-foto img{transform:scale(1.06)}

.bk-etiquetas{position:absolute;top:0;left:0;z-index:2;display:flex}
.bk-etiquetas span{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:8px 13px;
  background:rgba(13,13,14,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bk-etiquetas .op{color:#0D0D0E;background:var(--brand);border-color:var(--brand);font-weight:600}
.bk-etiquetas .tp{color:var(--text)}

.bk-estado{
  position:absolute;top:0;right:0;z-index:2;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:8px 13px;
  background:rgba(13,13,14,.82);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bk-estado.reservada{color:#E3B341}
.bk-estado.vendida{color:var(--muted)}
/* Reservada o vendida: apenas apagada, lo justo para que se note el
   estado sin arruinar la foto. Al pasar el cursor vuelve a su color
   original, así se puede mirar bien igual. */
.bk-card.no-disp .bk-card-foto img{filter:saturate(.62) brightness(.86)}
.bk-card.no-disp:hover .bk-card-foto img{filter:saturate(.88) brightness(1)}

.bk-fotos-n{
  position:absolute;bottom:0;right:0;z-index:2;
  font-size:11px;letter-spacing:.1em;color:var(--muted);padding:8px 13px;
  background:rgba(13,13,14,.78);border-left:1px solid var(--line);border-top:1px solid var(--line);
}

/* Sello de diagnóstico: dorado apagado, más sobrio que el naranja de
   marca, que ya está haciendo demasiados trabajos en la página. */
.bk-audit{
  position:absolute;bottom:0;left:0;z-index:2;
  font-size:11px;letter-spacing:.1em;padding:8px 13px;
  color:#D8B25F;background:rgba(13,13,14,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-right:1px solid rgba(216,178,95,.35);border-top:1px solid rgba(216,178,95,.35);
}

/* Píldora de lista VIP en las tarjetas no disponibles: convierte un
   callejón sin salida en algo accionable, sin gritar. */
.bk-vip-pill{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:11px;letter-spacing:.1em;color:var(--brand);
  display:flex;align-items:center;gap:8px;
}
.bk-vip-pill::before{
  content:"";width:5px;height:5px;background:var(--brand);border-radius:50%;flex-shrink:0;
}

.bk-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.bk-ref{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.bk-card h3{font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.2;margin-top:10px;letter-spacing:-.01em}
.bk-zona{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.bk-precio{
  font-family:var(--serif);font-size:1.6rem;color:var(--brand);margin-top:18px;line-height:1;
}
.bk-precio small{display:block;font-family:var(--sans);font-size:.68rem;color:var(--muted);margin-top:8px;letter-spacing:.04em}
.bk-precio.consultar{font-size:1.12rem;color:var(--text)}
.bk-specs{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
}
.bk-specs span{font-size:11px;color:var(--muted);letter-spacing:.04em}
.bk-specs b{color:var(--text);font-weight:400}

.bk-vacio{
  grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted);
  border:1px dashed var(--line);font-size:.98rem;
}

/* ---------- Ficha ---------- */
.ficha{
  position:fixed;inset:0;z-index:300;display:none;overflow-y:auto;
  background:rgba(8,8,9,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s var(--ease);
}
.ficha.on{display:block}
.ficha.vis{opacity:1}
.ficha-caja{
  max-width:1180px;margin:0 auto;min-height:100%;
  display:grid;grid-template-columns:1.25fr .75fr;
  background:var(--bg);border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.ficha-x{
  position:fixed;top:22px;right:26px;z-index:5;
  width:44px;height:44px;background:rgba(13,13,14,.85);border:1px solid var(--line);
  color:var(--text);cursor:pointer;font-size:22px;line-height:1;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;transition:.35s var(--ease);
}
.ficha-x:hover{border-color:var(--brand);color:var(--brand)}

.ficha-fotos{background:var(--bg-2);padding:0}
.ficha-principal{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.ficha-principal img{width:100%;height:100%;object-fit:cover}
.ficha-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;background:rgba(13,13,14,.62);border:1px solid var(--line);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);
}
.ficha-nav:hover{background:var(--brand);border-color:var(--brand);color:#0D0D0E}
.ficha-nav.prev{left:16px}
.ficha-nav.next{right:16px}
.ficha-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.ficha-contador{
  position:absolute;bottom:0;right:0;z-index:2;font-size:11px;letter-spacing:.14em;
  color:var(--muted);background:rgba(13,13,14,.8);padding:8px 13px;border-left:1px solid var(--line);
}
.ficha-tiras{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:6px}
.ficha-tiras button{
  aspect-ratio:4/3;padding:0;border:1px solid transparent;background:none;cursor:pointer;
  opacity:.45;transition:.35s var(--ease);overflow:hidden;
}
.ficha-tiras button img{width:100%;height:100%;object-fit:cover}
.ficha-tiras button.on{opacity:1;border-color:var(--brand)}
.ficha-tiras button:hover{opacity:.85}

.ficha-datos{padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column}
.ficha-datos .bk-etiquetas{position:static;margin-bottom:20px}
.ficha-datos .bk-etiquetas span{border:1px solid var(--line)}
.ficha-datos h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,2.8vw,2.5rem);
  line-height:1.12;letter-spacing:-.015em;margin-top:12px;
}
.ficha-datos .bk-zona{margin-top:12px}
.ficha-precio{
  font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--brand);
  margin-top:24px;padding-bottom:24px;border-bottom:1px solid var(--line);line-height:1;
}
.ficha-precio small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--muted);margin-top:10px;letter-spacing:.04em}
.ficha-precio.consultar{font-size:1.4rem;color:var(--text)}

.ficha-tabla{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.ficha-tabla div{background:var(--bg);padding:15px 16px}
.ficha-tabla dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ficha-tabla dd{font-family:var(--serif);font-size:1.2rem;margin-top:7px}
.ficha-desc{color:var(--text-2);font-size:.98rem;margin-top:26px;line-height:1.75}
/* ---------- Informe de diagnóstico (SKH Audit) ----------
   Plegado por defecto: si se abriera entero empujaría el CTA fuera de
   la pantalla, que es justo lo contrario de lo que se busca. */
.audit{
  margin-top:26px;border:1px solid rgba(216,178,95,.34);
  background:linear-gradient(180deg,rgba(216,178,95,.07),rgba(216,178,95,.02));
}
.audit summary{
  list-style:none;cursor:pointer;padding:16px 18px;
  display:flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.02em;color:#E4C888;
  transition:background .35s var(--ease);
}
.audit summary::-webkit-details-marker{display:none}
.audit summary:hover{background:rgba(216,178,95,.07)}
.audit summary small{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;
}
.audit-tick{
  width:24px;height:24px;flex-shrink:0;border:1px solid rgba(216,178,95,.5);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#E4C888;
}
.audit-flecha{
  margin-left:auto;flex-shrink:0;width:7px;height:7px;
  border-right:1px solid #E4C888;border-bottom:1px solid #E4C888;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease);
}
.audit[open] .audit-flecha{transform:rotate(-135deg) translate(-2px,-2px)}
.audit-cuerpo{padding:4px 18px 18px}
.audit-intro{color:var(--muted);font-size:.86rem;line-height:1.65;margin-bottom:16px}
.audit-lista{display:flex;flex-direction:column;gap:1px;background:rgba(216,178,95,.18)}
.audit-punto{background:var(--bg);padding:14px 16px}
.audit-punto dt{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#D8B25F;
}
.audit-punto dd{color:var(--text-2);font-size:.94rem;margin-top:7px;line-height:1.6}
.audit-cta{
  display:inline-block;margin-top:16px;font-size:12.5px;color:#E4C888;
  border-bottom:1px solid rgba(216,178,95,.4);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.audit-cta:hover{color:#F2DDA9;border-color:#F2DDA9}

/* ---------- Bloque de lista VIP ---------- */
.vip{
  border:1px solid var(--brand);background:rgba(211,120,46,.08);
  padding:24px;margin-bottom:6px;
}
.vip-tag{
  display:inline-block;background:var(--brand);color:#0D0D0E;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;
}
.vip h3{
  font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.25;
  letter-spacing:-.01em;margin-top:16px;
}
.vip p{color:var(--text-2);font-size:.95rem;margin-top:12px}
.vip .btn{margin-top:20px;width:100%;justify-content:center}

.ficha-cta{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:12px}
.ficha-cta .btn{justify-content:center}
.ficha-aviso{font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---------- El sello: qué es el Diagnóstico Técnico ---------- */
/* Dorado, no naranja: el sello tiene que leerse como una credencial
   aparte y no como un botón más de la marca. */
.sello{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.audit-inline{
  display:inline-block;color:#D8B25F;border:1px solid rgba(216,178,95,.4);
  padding:2px 9px;font-size:.82em;letter-spacing:.06em;white-space:nowrap;
}
.lede-link{color:var(--brand);border-bottom:1px solid rgba(211,120,46,.4);transition:.3s var(--ease)}
.lede-link:hover{color:var(--brand-lt,#E89552);border-color:currentColor}

.sello-ejes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:60px}
.sello-eje{background:var(--bg);padding:clamp(28px,3vw,40px);transition:background .5s var(--ease)}
.sello-eje:hover{background:var(--surface)}
.sello-eje .idx{font-family:var(--serif);font-size:1.05rem;color:#D8B25F;letter-spacing:.1em}
.sello-eje h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;margin:14px 0 12px;letter-spacing:-.01em}
.sello-eje p{color:var(--text-2);font-size:.94rem;line-height:1.65}

.sello-cierre{
  margin-top:44px;display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,4vw,60px);align-items:start;
}
.sello-cierre p{color:var(--text-2);font-size:1.02rem}
.sello-cierre p b{color:var(--text);font-weight:500}
.sello-aviso{
  font-size:.86rem!important;color:var(--muted)!important;line-height:1.7;
  border-left:2px solid rgba(216,178,95,.4);padding-left:18px;
}

/* ---------- Propietarios ---------- */
.prop-motivos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:60px}
.prop-motivo{background:var(--bg);padding:clamp(32px,3.8vw,52px);position:relative;overflow:hidden;
  transition:background .5s var(--ease)}
.prop-motivo::before{content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:var(--brand);transition:height .55s var(--ease)}
.prop-motivo:hover{background:var(--surface)}
.prop-motivo:hover::before{height:100%}
.prop-motivo .idx{font-family:var(--serif);font-size:1.1rem;color:var(--brand);letter-spacing:.1em}
.prop-motivo h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:16px 0 14px;letter-spacing:-.01em}
.prop-motivo p{color:var(--text-2);font-size:.97rem}
.prop-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:44px}
.prop-cta span{font-size:12px;color:var(--muted);letter-spacing:.04em}

/* ---------- Sobre / franja hacia Construcciones ---------- */
.bk-sobre{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bk-cruce{border-top:1px solid var(--line)}
.bk-cruce-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center}

@media (max-width:1000px){
  .bk-grid,.bk-grid.destacados{grid-template-columns:repeat(2,1fr)}
  .ficha-caja{grid-template-columns:1fr}
  .bk-cruce-inner{grid-template-columns:1fr}
  .prop-motivos{grid-template-columns:1fr}
  .sello-ejes{grid-template-columns:repeat(2,1fr)}
  .sello-cierre{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bk-hero{min-height:78svh;padding:130px 0 44px}
  .bk-grid,.bk-grid.destacados{grid-template-columns:1fr}
  .bk-filtros{padding:14px 0;top:58px}
  .bk-filtros-inner{gap:14px}
  .bk-grupo{gap:7px}
  .bk-grupo button{padding:8px 13px;font-size:11px}
  .bk-contador{width:100%}
  .ficha-tabla{grid-template-columns:1fr}
  .ficha-x{top:12px;right:14px}
  .sello-ejes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .bk-card,.bk-card-foto img{transition:none}
}