/* ============================================================
   DEMO Inmobiliaria — sistema de diseño "plano arquitectónico"
   ============================================================ */

:root{
  --ink:        #1E2621;
  --ink-soft:   #3C4842;
  --paper:      #ECE7D8;
  --paper-2:    #E2DCC9;
  --line:       #cfc6ac;
  --brass:      #A47C3B;
  --brass-dark: #8A6730;
  --clay:       #8B4A38;
  --slate:      #45565C;

  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --wrap: 1180px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:-0.01em; }

p{ margin:0; line-height:1.65; }

em{ font-style:italic; color:var(--brass-dark); }

.section__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:96px 32px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow--center{ justify-content:center; text-align:center; }
.eyebrow--onDark{ color:#C9BE9C; }
.eyebrow__tick{ opacity:.55; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--brass{ background:var(--brass); color:#1A1410; }
.btn--brass:hover{ background:var(--brass-dark); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--ghost.btn--onDark{ border-color:#C9BE9C; color:#EFE9D6; }
.btn--ghost.btn--onDark:hover{ background:#EFE9D6; color:var(--ink); }
.btn--sm{ padding:9px 18px; font-size:13.5px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(236,231,216,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__mark{ width:34px; height:34px; flex:none; }
.compass__ring{ fill:none; stroke:var(--ink); stroke-width:1.4; }
.compass__needle{ fill:var(--clay); }
.compass__needle-shadow{ fill:var(--ink); opacity:.18; }
.compass__n{ font-family:var(--mono); font-size:7px; fill:var(--ink); text-anchor:middle; }
.compass{ transition:transform .6s ease; }
.brand__name{
  font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.02em;
  display:flex; flex-direction:column; line-height:1;
}
.brand__suffix{ font-family:var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-top:4px; }

.nav__links{ display:flex; gap:26px; font-size:14.5px; font-weight:500; }
.nav__links a{ position:relative; padding:4px 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--brass); transition:width .2s ease;
}
.nav__links a:hover::after{ width:100%; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav__toggle span{ width:22px; height:2px; background:var(--ink); transition:.25s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:12px;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(30,38,33,.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(30,38,33,.06) 0 1px, transparent 1px 40px);
  mask-image:linear-gradient(180deg, black, transparent 92%);
}
.hero__inner{
  position:relative;
  max-width:var(--wrap); margin:0 auto; padding:76px 32px 60px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero__title{
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.06;
  margin-bottom:20px;
}
.hero__lead{
  max-width:46ch; color:var(--ink-soft); font-size:17px; margin-bottom:32px;
}
.hero__actions{ display:flex; gap:14px; margin-bottom:52px; flex-wrap:wrap; }

.dims{ display:flex; gap:38px; margin:0; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.dims__item{ display:flex; flex-direction:column; }
.dims__value{
  font-family:var(--mono); font-weight:600; font-size:30px; color:var(--ink);
}
.dims__label{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); }

.hero__plan{ position:relative; }
.plan__frame{
  position:relative;
  background:#F4F0E4;
  border:1px solid var(--line);
  padding:34px 26px 26px;
  border-radius:2px;
}
.plan__tag{
  position:absolute; top:-11px; left:26px;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  padding:4px 10px;
}
.plan__corner{ position:absolute; width:16px; height:16px; }
.plan__corner--tl{ top:8px; left:8px; border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
.plan__corner--tr{ top:8px; right:8px; border-top:2px solid var(--ink); border-right:2px solid var(--ink); }
.plan__corner--bl{ bottom:8px; left:8px; border-bottom:2px solid var(--ink); border-left:2px solid var(--ink); }
.plan__corner--br{ bottom:8px; right:8px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink); }

.plan__svg{ width:100%; height:auto; }
.plan__walls rect, .plan__walls line{ fill:none; stroke:var(--ink); stroke-width:2.4; }
.plan__doors path{ fill:none; stroke:var(--slate); stroke-width:1.2; stroke-dasharray:2 3; }
.plan__furniture rect, .plan__furniture circle{ fill:none; stroke:var(--clay); stroke-width:1.4; }
.plan__labels text{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; fill:var(--ink-soft); }

.plan__walls rect, .plan__walls line{
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.2s ease forwards .2s;
}
.plan__doors path{ opacity:0; animation:fadeIn .6s ease forwards 1.8s; }
.plan__furniture rect, .plan__furniture circle{ opacity:0; animation:fadeIn .6s ease forwards 2s; }
.plan__labels text{ opacity:0; animation:fadeIn .6s ease forwards 2.2s; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

.hero__scroll{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:0 auto 44px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ============================================================
   SECTIONS shared
   ============================================================ */
.section__title{
  font-size:clamp(28px,3.6vw,42px);
  text-align:center;
  margin-bottom:18px;
}
.section__title--left{ text-align:left; }
.section__title--onDark{ color:#F4EFDF; }
.section__lead{
  max-width:52ch; margin:0 auto 56px; text-align:center; color:var(--ink-soft); font-size:16.5px;
}
.section__lead--onDark{ color:#C9BE9C; }

/* ---------- service cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--paper);
  padding:34px 30px;
  position:relative;
}
.card__index{
  position:absolute; top:22px; right:26px;
  font-family:var(--mono); font-size:12px; color:var(--line);
}
.card__icon{
  width:42px; height:42px; margin-bottom:20px;
  color:var(--brass-dark);
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:14.8px; }

/* ---------- split (estudio) ---------- */
.section--split{ background:var(--paper-2); }
.section__inner--split{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.split__frame{ position:relative; }
.split__photo{
  height:380px;
  border-radius:2px;
  border:1px solid var(--line);

  background:
    linear-gradient(180deg, rgba(30,38,33,.05), rgba(30,38,33,.35)),
    url("house-demo.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.split__pin{
  position:absolute; left:20px; bottom:-18px;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:12px;
  padding:10px 16px; display:flex; align-items:center; gap:8px;
  border-radius:2px;
}
.split__copy p{ color:var(--ink-soft); margin-bottom:16px; max-width:52ch; }
.split__copy .eyebrow{ justify-content:flex-start; }

.values{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;
}
.values li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; }
.values__mark{
  width:22px; height:22px; border:1.4px solid var(--brass-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; color:var(--brass-dark); flex:none;
}

/* ---------- results ---------- */
.results{ background:var(--ink); color:var(--paper); }
.results .section__inner{ padding-top:88px; padding-bottom:88px; }
.results__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(244,239,223,.15);
  border:1px solid rgba(244,239,223,.15);
}
.results__item{
  background:var(--ink); padding:34px 20px; text-align:center;
  display:flex; flex-direction:column; gap:8px;
}
.results__value{
  font-family:var(--mono); font-weight:600; font-size:clamp(32px,4vw,44px); color:#F4EFDF;
}
.results__label{ font-size:13.5px; color:#C9BE9C; }

/* ---------- testimonials ---------- */
.testi{ max-width:720px; margin:0 auto; }
.testi__track{ display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.testi__card{
  min-width:100%; margin:0;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:44px 46px;
  border-radius:2px;
}
.testi__stars{ color:var(--brass-dark); letter-spacing:3px; margin-bottom:16px; }
.testi__card p{ font-family:var(--display); font-size:20px; line-height:1.5; margin-bottom:26px; }
.testi__card footer{ display:flex; align-items:center; gap:12px; }
.testi__avatar{
  width:40px; height:40px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12.5px; font-weight:600; flex:none;
}
.testi__card footer strong{ display:block; font-size:14.5px; }
.testi__card footer span{ font-size:12.5px; color:var(--ink-soft); }

.testi__nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px; }
.testi__arrow{
  width:36px; height:36px; border-radius:50%; border:1.4px solid var(--line);
  background:var(--paper); font-size:19px; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
.testi__arrow:hover{ background:var(--ink); color:var(--paper); }
.testi__dots{ display:flex; gap:8px; }
.testi__dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0;
}
.testi__dots button.is-active{ background:var(--brass); width:22px; border-radius:4px; }

/* ---------- contact ---------- */
.contact{ background:var(--slate); color:#F4EFDF; }
.contact__cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:0 0 40px;
}
.contact__card{
  background:rgba(244,239,223,.06);
  border:1px solid rgba(244,239,223,.18);
  border-radius:2px;
  padding:26px 22px;
  display:flex; flex-direction:column; gap:10px;
  transition:background .18s ease, transform .18s ease;
}
.contact__card:hover{ background:rgba(244,239,223,.12); transform:translateY(-3px); }
.contact__card svg{ color:#E8C77E; }
.contact__card strong{ font-size:15.5px; }
.contact__card span{ font-size:13.5px; color:#CFE0DA; }
.contact__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- footer ---------- */
.footer{ background:#161C18; color:#C9BE9C; }
.footer__inner{
  max-width:var(--wrap); margin:0 auto; padding:64px 32px 32px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px;
}
.footer__brand{ display:flex; gap:14px; }
.footer__brand p{ font-size:13.8px; line-height:1.6; max-width:34ch; }
.compass--small{ width:30px; height:30px; }
.footer__col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#EFE9D6; margin:0 0 16px; }
.footer__col{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer__col a:hover{ color:#EFE9D6; }
.footer__bottom{
  border-top:1px solid rgba(201,190,156,.15);
  max-width:var(--wrap); margin:0 auto; padding:22px 32px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px;
}

/* ============================================================
   REVEAL / SCROLL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal--delay.is-visible{ transition-delay:.15s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__plan{ order:-1; }
  .cards{ grid-template-columns:1fr 1fr; }
  .section__inner--split{ grid-template-columns:1fr; }
  .split__photo{ height:280px; }
  .results__grid{ grid-template-columns:1fr 1fr; }
  .contact__cards{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; padding:18px 32px; gap:16px;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__toggle{ display:flex; }
  .nav__cta{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .dims{ gap:26px; }
  .footer__inner{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll{ animation:none; }
  .plan__walls rect,.plan__walls line,.plan__doors path,.plan__furniture rect,.plan__furniture circle,.plan__labels text{
    animation:none; opacity:1; stroke-dashoffset:0;
  }
  .compass{ transition:none; }
}