/**
 * design-tokens.css
 * ---------------------------------------------------------------------------
 * Copia exacta (no una referencia ni un refactor) de los tokens de color y
 * base tipográfica ya definidos dentro de index.html. Se duplica a propósito
 * en lugar de "mover" para no tener que tocar el archivo de la landing, que
 * queda intacto según lo aprobado.
 *
 * Si en el futuro se decide que index.html también consuma este archivo
 * (eliminando la duplicación), es un cambio explícito a aprobar aparte —
 * no ocurre automáticamente por la existencia de este archivo.
 * ---------------------------------------------------------------------------
 */

:root{
  --black:#0b0b0a;
  --charcoal:#1c1b18;
  --charcoal-soft:#26241f;
  --cream:#f7f5f0;
  --cream-dim:#efece4;
  --gold:#b8935b;
  --gold-light:#d9bd8f;
  --gold-deep:#8c6a3e;
  --ink:#e9e5da;
  --whatsapp:#25D366;
  --line: rgba(184,147,91,0.35);
  --maxw: 1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:inherit;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,5vw,64px);}

/* ---------- Elementos compartidos entre páginas del módulo ----------
   Copiados (no importados) desde los mismos estilos de la landing, por la
   misma razón documentada arriba: no hay motor de plantillas que permita
   que index.html los comparta sin tocarlo. Entre las páginas del MÓDULO
   (propiedades/*) sí se centralizan aquí para no repetir este bloque en
   cada archivo .html nuevo. */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; border:1px solid var(--gold); color:var(--gold-light);
  background:transparent; cursor:pointer;
  transition:background .4s cubic-bezier(.2,.7,.2,1), color .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap;
}
.btn:hover{ background:var(--gold); color:var(--black); transform:translateY(-2px); box-shadow:0 12px 26px rgba(184,147,91,0.28); }
.btn-solid{ background:var(--gold); color:var(--black); border-color:var(--gold); }
.btn-solid:hover{ background:var(--gold-light); border-color:var(--gold-light); box-shadow:0 12px 28px rgba(184,147,91,0.38); }
.btn-wa{ border-color:var(--whatsapp); color:var(--whatsapp); }
.btn-wa:hover{ background:var(--whatsapp); color:#fff; border-color:var(--whatsapp); box-shadow:0 12px 26px rgba(37,211,102,0.3); }

.eyebrow{
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-light);
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); display:inline-block; }

/* ---------- Chrome común de las páginas del módulo /propiedades ----------
   Header, navegación y footer se repiten idénticos en cada página del
   módulo (listado, detalle, y las que sigan). Centralizarlos aquí evita
   volver a pegarlos en cada archivo .html nuevo. */

header.module-header{
  padding:22px 0;
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.module-nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.module-brand{ display:flex; align-items:center; gap:12px; }
.module-brand img{ height:36px; width:auto; object-fit:contain; flex-shrink:0; }
.module-nav-links{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.module-nav-links a{
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); opacity:0.8; transition:opacity .25s ease, color .25s ease;
}
.module-nav-links a:hover{ opacity:1; color:var(--gold-light); }
.module-nav-links a[aria-current="page"]{ opacity:1; color:var(--gold-light); }
.module-back{
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light);
  opacity:0.85; transition:opacity .25s ease;
}
.module-back:hover{ opacity:1; }

footer.module-footer{
  background:var(--black); color:#8a8579; padding:40px 0; border-top:1px solid var(--line);
  text-align:center; font-size:12.5px;
}

.skip-link{
  position:absolute;
  top:-48px; left:12px;
  background:var(--gold);
  color:var(--black);
  padding:12px 20px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  z-index:1000;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }