/**
 * site-header.css
 * ---------------------------------------------------------------------------
 * Copia exacta (no una referencia) del Header aprobado del IJP Hero Kit v1.0,
 * tal como vive dentro de index.html (mismas reglas, mismos valores). Se
 * duplica a propósito en vez de que index.html lo importe, por la misma
 * razón ya documentada en design-tokens.css: sitio estático sin motor de
 * plantillas, no hay forma de que index.html comparta este archivo sin
 * tocarlo — y el Hero/Header de la landing queda fuera de este cambio.
 *
 * Lo usan las páginas del módulo /propiedades (catálogo y ficha) para que
 * el Header se vea idéntico en todo el sitio, no solo en la landing.
 * Requiere que la página también cargue la fuente 'Inter' (Google Fonts).
 * ---------------------------------------------------------------------------
 */

:root{
  --kit-black:#0B0B0B;
  --kit-gold:#C8A24A;
  --kit-white:#FFFFFF;
  --kit-gray:#F2F2F2;
}
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:88px;
  padding:20px 0;
  box-sizing:border-box;
  background:var(--kit-black);
}
header nav{ position:relative; display:flex; align-items:center; justify-content:space-between; }
header .brand{ display:flex; align-items:center; }
header .brand img{ height:48px; width:auto; object-fit:contain; flex-shrink:0; }
header .nav-links{
  display:flex; align-items:center; gap:48px;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
header .nav-links a{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--kit-white);
  transition:color .25s ease;
}
header .nav-links a:hover{ color:var(--kit-gold); }
header .nav-links a[aria-current="page"]{ color:var(--kit-gold); }
header .nav-cta-group{ display:flex; align-items:center; gap:24px; }
header .nav-instagram{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--kit-gold);
  transition:opacity .25s ease;
}
header .nav-instagram:hover{ opacity:0.8; }
header .nav-instagram svg{ width:20px; height:20px; }
header .nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px;
  border:1px solid var(--kit-gold); border-radius:10px;
  font-family:'Inter', sans-serif; font-size:13px; font-weight:600;
  color:var(--kit-white); background:transparent;
  transition:background .3s ease, color .3s ease;
  white-space:nowrap;
}
header .nav-cta:hover{ background:var(--kit-gold); color:var(--kit-black); }
header .menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
header .menu-toggle span{ width:24px; height:1px; background:var(--kit-white); display:block; }

@media (max-width:980px){
  header .nav-links{ display:none; }
  header .menu-toggle{ display:flex; }
}
@media (max-width:640px){
  header .nav-cta{ display:none; }
  header .brand img{ height:36px; }
}