@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-weight:800;font-display:swap;src:url("fonts/montserrat-latin-800-normal.woff2") format("woff2");}

:root{
  --bg:#F0EBE3; --bone:#F5F2EC; --ink:#1A1A1A; --muted:#6B6B6B;
  --blue:#2E7DF7; --oak:#C79A6B;
  --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;}
img{max-width:100%;height:auto;}
a{color:inherit;}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
.center{text-align:center;}

h1,h2{font-weight:800;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em;margin:0;}
h1{font-size:clamp(2.1rem,6.2vw,4.1rem);}
h2{font-size:clamp(1.7rem,4.4vw,2.8rem);}
h3{font-size:1.15rem;margin:0 0 6px;}
p{margin:0;}
.lead{color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);max-width:52ch;margin:20px auto 0;}

/* Botones */
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:10px;transition:transform .15s ease,background .15s ease;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{border:2px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--bg);}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;}

/* Nav */
.nav{padding:18px 0;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.25rem;font-weight:400;letter-spacing:.02em;}
.brand img{mix-blend-mode:multiply;}
.brand small{font-size:.7rem;color:var(--muted);letter-spacing:.12em;}
.nav .btn{padding:10px 20px;}

/* Hero con esquinas azules */
.hero{position:relative;padding:88px 0 96px;text-align:center;}
.hero::before,.hero::after{content:"";position:absolute;top:12px;width:72px;height:72px;border-top:3px solid var(--blue);}
.hero::before{left:max(24px,calc(50% - 520px));border-left:3px solid var(--blue);}
.hero::after{right:max(24px,calc(50% - 520px));border-right:3px solid var(--blue);}
.hero h1{max-width:15ch;margin:0 auto;}

.section{padding:72px 0;}
.living{display:block;margin:40px auto 0;border-radius:12px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 100%);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 100%);}

/* Tarjetas */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
.card{background:var(--bone);border:1px solid rgba(0,0,0,.07);border-radius:14px;padding:32px;}
.tag{color:var(--blue);font-weight:600;font-size:.9rem;}
.card h3{font-size:1.35rem;margin-top:4px;}
.card ul{list-style:none;margin:18px 0 0;padding:0;}
.card li{position:relative;padding-left:20px;margin-top:10px;}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--blue);}

/* Pasos con círculos y línea punteada */
.steps{list-style:none;margin:48px auto 0;padding:0;max-width:560px;}
.steps li{position:relative;display:flex;gap:24px;padding-bottom:48px;}
.steps li:last-child{padding-bottom:0;}
.steps li:not(:last-child)::after{content:"";position:absolute;left:27px;top:64px;bottom:8px;border-left:3px dotted var(--blue);}
.num{flex:none;width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:1.7rem;display:grid;place-items:center;}
.ic{width:40px;height:40px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;}
.steps p{color:var(--muted);max-width:30ch;}

.final{background:var(--bone);}

/* Footer */
.footer{padding:48px 0;}
.foot{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.foot img{mix-blend-mode:multiply;}
.foot p,.foot small{color:var(--muted);}
.links{display:flex;gap:24px;font-weight:600;}
.links a{text-decoration:none;}
.links a:hover{color:var(--blue);}

@media (max-width:760px){
  .cards{grid-template-columns:1fr;}
  .hero{padding:72px 0 72px;}
  .hero::before,.hero::after{width:48px;height:48px;}
  .section{padding:56px 0;}
}