/* Edificio Málaga — sistema visual basado en el dossier
   Tono: minimalista arquitectónico, tipografía dispersada en mayúsculas,
   paleta hueso/tinta + acento granate (del logo Homely) */
:root{
  --bone:#F2EFE9;       /* fondo principal — tono crema dossier */
  --bone-2:#E8E3D9;     /* secundario */
  --paper:#FAF7F1;
  --ink:#161616;        /* texto principal — negro tipográfico */
  --ink-2:#3A3733;
  --muted:#8A857C;
  --rule:#1d1d1d;       /* líneas finas */
  --rule-soft:#C9C2B5;
  --accent:#7A1F2A;     /* granate Homely (curva del logo) */
  --accent-ink:#2A3140; /* azul oscuro Homely */
  --serif:"Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer }

/* Tipografía estilo dossier — letras separadas en mayúsculas */
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
}
.spaced{ letter-spacing:.28em; text-transform:uppercase }
.spaced-lg{ letter-spacing:.42em; text-transform:uppercase }
.serif{ font-family:var(--serif); font-weight:400; font-style:normal }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400 }

/* Estructura */
.wrap{ max-width:1340px; margin:0 auto; padding:0 32px }
.wrap-narrow{ max-width:980px; margin:0 auto; padding:0 32px }
hr.fine{ border:0; border-top:1px solid var(--rule); margin:0 }
hr.soft{ border:0; border-top:1px solid var(--rule-soft); margin:0 }

/* Header — dark, mirrors footer */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(20,20,20,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #000;
  color:var(--bone);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:18px 32px;
}
.brand{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--serif); font-size:22px; line-height:1;
  color:var(--bone);
}
.brand .b1{
  font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  font-family:var(--sans); font-weight:500; color:#9c958a;
}
.brand .b2{ font-style:italic; font-size:26px; color:var(--bone) }
.nav ul{ display:flex; gap:34px; margin:0; padding:0; list-style:none }
.nav ul a{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:#c8c2b6; transition:color .2s; white-space:nowrap;
}
.nav ul a:hover{ color:#fff }
.nav .cta{
  padding:11px 18px; border:1px solid var(--bone); border-radius:0;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone); white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.nav .cta:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone) }

/* Plate — marco con esquinas tipo plano */
.plate{
  position:relative; padding:48px;
  border:1px solid var(--rule);
}
.plate::before, .plate::after,
.plate > .corner-tl, .plate > .corner-tr, .plate > .corner-bl, .plate > .corner-br{
  position:absolute; width:14px; height:14px; pointer-events:none;
}
.plate > .corner-tl{ top:-1px; left:-1px; border-top:2px solid var(--ink); border-left:2px solid var(--ink) }
.plate > .corner-tr{ top:-1px; right:-1px; border-top:2px solid var(--ink); border-right:2px solid var(--ink) }
.plate > .corner-bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--ink); border-left:2px solid var(--ink) }
.plate > .corner-br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink) }

/* Footer compartido */
footer.site{
  margin-top:120px; padding:64px 0 40px;
  background:var(--ink); color:var(--bone);
}
footer.site .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px }
footer.site h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:#9c958a; margin:0 0 18px;
}
footer.site a{ display:block; padding:4px 0; color:#d8d2c5; font-size:13px }
footer.site a:hover{ color:#fff }
footer.site .legal{
  border-top:1px solid #2c2c2c; margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:#7a7468; letter-spacing:.18em; text-transform:uppercase;
}

/* Botones generales */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 22px; background:var(--ink); color:var(--bone);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .2s, color .2s;
}
.btn:hover{ background:transparent; color:var(--ink) }
.btn-ghost{ background:transparent; color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:var(--bone) }
.btn .arrow{ font-family:var(--mono); letter-spacing:0 }

/* Marca registrada estilo dossier en esquinas */
.tag{
  display:inline-block;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}

/* Placeholder de imagen con estilo dossier */
.img-ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,.04) 11px 12px),
    var(--bone-2);
  border:1px solid var(--rule-soft);
  display:flex; align-items:center; justify-content:center;
}
.img-ph::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}