/* =========================================================
   SARA MORBIDI — sistema de diseño
   Paleta: marfil / terracota / salvia / carbón
   Tipografía: Fraunces (display) + Lora (cuerpo)
   Firma visual: el arco de puerta — "elige tu puerta"
   ========================================================= */

:root{
  --ivory:#F6F1E6;
  --paper:#FBF8F1;
  --charcoal:#292420;
  --charcoal-soft:#3a342e;
  --stone:#6f6355;
  --stone-light:#a89a86;
  --terracotta:#a6532c;
  --terracotta-deep:#833f20;
  --terracotta-mist:#efd9c9;
  --sage:#7c8768;
  --sage-mist:#e6e8dc;
  --hairline:#ddd2bd;
  --shadow: 0 20px 45px -25px rgba(41,36,32,0.35);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Lora", Georgia, serif;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--terracotta-mist); color:var(--terracotta-deep);}

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

/* ---------- Eyebrows / labels ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}

/* ---------- Headings ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--charcoal);
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem, 5vw, 4.1rem); line-height:1.05; font-weight:400;}
h2{font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.15;}
h3{font-size:1.3rem;}
p{margin:0 0 1.2em;}
.lede{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--charcoal-soft);
  line-height:1.5;
}
.muted{color:var(--stone);}

/* =========================================================
   ARCH MOTIF — la firma visual del sitio
   Un arco de medio punto: door/threshold. Se usa en botones,
   marcos de imagen, divisores y en el logotipo.
   ========================================================= */
.arch-frame{
  border-radius: 320px 320px 8px 8px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
}
.arch-frame img{width:100%; height:100%; object-fit:cover;}

.arch-divider{
  width:34px; height:34px;
  margin:0 auto;
  border:1.5px solid var(--terracotta);
  border-bottom:none;
  border-radius:34px 34px 0 0;
  position:relative;
}
.arch-divider::after{
  content:"";
  position:absolute;
  left:50%; bottom:-1.5px;
  width:1.5px; height:16px;
  background:var(--terracotta);
  transform:translateX(-50%) translateY(100%);
}

.btn{
  --btn-bg: var(--terracotta);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--paper);
  background:var(--btn-bg);
  text-decoration:none;
  padding:15px 26px 14px;
  border-radius: 999px 999px 6px 6px;
  border:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 12px 24px -12px rgba(166,83,44,0.55);
}
.btn:hover{transform:translateY(-2px); background:var(--terracotta-deep);}
.btn.btn-ghost{
  --btn-bg: transparent;
  color:var(--charcoal);
  border:1.5px solid var(--charcoal);
  box-shadow:none;
}
.btn.btn-ghost:hover{background:var(--charcoal); color:var(--paper);}
.btn.btn-sage{ --btn-bg: var(--sage); box-shadow:0 12px 24px -12px rgba(124,135,104,.55);}
.btn.btn-sage:hover{background:#666f56;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;}

/* ---------- Header / Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,230,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  font-family:var(--font-display);
  font-size:1.28rem;
  text-decoration:none;
  color:var(--charcoal);
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.01em;
}
.logo .mark{
  width:16px; height:16px;
  border:1.5px solid var(--terracotta);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  position:relative;
  top:1px;
}
.navlinks{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0; padding:0;
  font-size:14.5px;
}
.navlinks a{
  text-decoration:none;
  color:var(--charcoal-soft);
  position:relative;
  padding-bottom:3px;
}
.navlinks a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--terracotta);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{transform:scaleX(1);}
.navlinks a.active{color:var(--terracotta);}
.nav-cta{
  font-size:13.5px;
  padding:11px 20px 10px;
}
.nav-toggle{display:none;}

@media (max-width: 880px){
  .navlinks{
    position:fixed; inset:64px 0 0 0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:32px;
    gap:22px;
    font-size:1.05rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .navlinks.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-toggle{
    display:block;
    background:none; border:none;
    font-size:1.6rem; line-height:1;
    color:var(--charcoal); cursor:pointer;
  }
}

/* ---------- Sections ---------- */
section{padding:96px 0;}
section.tight{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.hairline{border:none; border-top:1px solid var(--hairline); margin:0;}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 100px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.hero h1{margin-bottom:22px;}
.hero .lede{max-width:480px; margin-bottom:34px;}
.hero-figure{position:relative;}
.hero-figure .arch-frame{aspect-ratio:3/4;}
.hero-figure::before{
  content:"";
  position:absolute; top:-22px; left:-22px;
  width:120px; height:120px;
  border:1.5px solid var(--sage);
  border-radius:50%;
  z-index:-1;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-figure{order:-1; max-width:340px;}
}

/* ---------- Doors / service cards ---------- */
.doors-intro{max-width:680px; margin:0 auto 56px; text-align:center;}
.doors{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
@media (max-width:900px){.doors{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.door-card{
  text-decoration:none;
  color:inherit;
  display:block;
  text-align:center;
}
.door-card .arch-frame{aspect-ratio:3/4; margin-bottom:22px; transition:transform .35s ease;}
.door-card:hover .arch-frame{transform:translateY(-6px);}
.door-card h3{font-size:1.2rem; margin-bottom:8px;}
.door-card p{font-size:15px; color:var(--stone); margin:0;}
.door-num{
  font-family:var(--font-display); font-style:italic;
  color:var(--terracotta); font-size:14px; margin-bottom:6px; display:block;
}

/* ---------- Two column blocks ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:32px;}}
.split.reverse .split-figure{order:2;}

/* ---------- Bullet lists (no default bullets — use arch dash) ---------- */
ul.list-arch{list-style:none; margin:0; padding:0;}
ul.list-arch li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  color:var(--charcoal-soft);
}
ul.list-arch li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:9px; height:9px;
  border:1.5px solid var(--terracotta);
  border-bottom:none;
  border-radius:9px 9px 0 0;
}

/* ---------- Fit checklist card ---------- */
.fit-card{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:28px 28px 10px 10px;
  padding:44px;
}

/* ---------- Steps (real sequences only) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:900px){.steps{grid-template-columns:1fr;}}
.step{padding-top:18px; border-top:1.5px solid var(--terracotta);}
.step .num{font-family:var(--font-display); font-style:italic; color:var(--terracotta); font-size:1.4rem; display:block; margin-bottom:10px;}

/* ---------- Quote / pull ---------- */
blockquote.pull{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.35;
  color:var(--charcoal);
  margin:0;
  padding:0 0 0 28px;
  border-left:2px solid var(--terracotta);
}
blockquote.pull cite{
  display:block; margin-top:16px;
  font-family:var(--font-body); font-style:normal;
  font-size:14px; color:var(--stone); letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Testimonials ---------- */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:900px){.testimonials{grid-template-columns:1fr;}}
.testimonial{
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:32px 28px;
  border-radius:22px 22px 8px 8px;
  font-size:15.5px;
  color:var(--charcoal-soft);
}
.testimonial .who{
  display:block; margin-top:16px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone);
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--charcoal);
  color:var(--paper);
  border-radius:36px;
  padding:72px 56px;
  text-align:center;
}
.cta-band h2{color:var(--paper);}
.cta-band .muted{color:var(--stone-light);}
.cta-band .btn-row{justify-content:center;}
@media (max-width:640px){.cta-band{padding:48px 26px; border-radius:24px;}}

/* ---------- Blog cards ---------- */
.post{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap:44px;
  align-items:start;
  padding:56px 0;
}
.post + .post{border-top:1px solid var(--hairline);}
.post .arch-frame{aspect-ratio:4/3;}
.post-meta{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta); margin-bottom:10px;}
.post h2{font-size:1.6rem; margin-bottom:14px;}
.post p{color:var(--charcoal-soft); font-size:15.5px;}
.post .read-more{
  font-size:14.5px; font-weight:600; color:var(--terracotta); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
@media (max-width:820px){.post{grid-template-columns:1fr;}}

/* ---------- Format / meta rows ---------- */
.meta-row{display:flex; flex-wrap:wrap; gap:14px; margin:28px 0;}
.meta-chip{
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:9px 18px;
  font-size:13.5px;
  color:var(--charcoal-soft);
  background:var(--paper);
}

/* ---------- Form ---------- */
.form-card{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:28px 28px 10px 10px;
  padding:48px;
}
.field{margin-bottom:22px;}
.field label{display:block; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--stone); margin-bottom:8px;}
.field input, .field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:16px;
  padding:13px 16px;
  border:1px solid var(--hairline);
  border-radius:12px 12px 4px 4px;
  background:var(--ivory);
  color:var(--charcoal);
}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus, .field textarea:focus{outline:2px solid var(--terracotta); outline-offset:1px;}

/* ---------- Footer ---------- */
footer.site{
  background:var(--charcoal);
  color:var(--stone-light);
  padding:64px 0 36px;
  margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:30px;}}
footer.site .logo{color:var(--paper);}
footer.site .logo .mark{border-color:var(--terracotta);}
footer.site h4{
  color:var(--paper);
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:16px;
}
footer.site a{color:var(--stone-light); text-decoration:none; font-size:14.5px;}
footer.site a:hover{color:var(--paper);}
footer.site p{color:var(--stone-light); font-size:14.5px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:24px;
  font-size:13px;
  color:var(--stone-light);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- Utilities ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.tag-strip{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--sage);
  font-size:1.1rem;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin:8px 0 0;
}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}