@font-face{font-family:"Lora";src:url("../fonts/Lora-Variable.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/Lora-Italic-Variable.ttf") format("truetype");font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{--ink:#2b2924;--ink-2:#1d1b18;--bronze:#8b6a48;--bronze-2:#b08b63;--cream:#f4f1ec;--paper:#faf8f5;--line:#ddd5c9;--muted:#7a7166;--maxw:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Poppins,system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.serif{font-family:Lora,Georgia,serif}
.kicker{font-size:12px;letter-spacing:.38em;text-transform:uppercase;color:var(--bronze);font-weight:500}

/* header */
.site-h{position:fixed;inset:0 0 auto 0;z-index:40;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.site-h.solid{background:rgba(29,27,24,.94);backdrop-filter:blur(8px);border-color:rgba(176,139,99,.45)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:Lora,serif;font-size:26px;letter-spacing:.14em;color:#f2ece3;text-decoration:none}
.logo small{font-family:Poppins;font-size:10px;letter-spacing:.38em;color:#cdbfad;margin-left:16px;vertical-align:middle}
.nav{display:flex;gap:30px}
.nav a{color:#e9e1d5;text-decoration:none;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.nav a:hover{color:var(--bronze-2)}
@media(max-width:860px){.nav{display:none}.logo small{display:none}}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;color:#f4efe7;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:slow 18s ease-out forwards}
@keyframes slow{to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.05) 30%,rgba(20,18,16,.25) 50%,rgba(20,18,16,.88) 100%),linear-gradient(90deg,rgba(20,18,16,.55),transparent 60%)}
.hero .txt{position:absolute;left:0;right:0;bottom:9vh;z-index:2}
.hero h1{font-family:Lora,serif;font-weight:400;font-size:clamp(40px,6vw,82px);line-height:1.04;margin:14px 0 18px;letter-spacing:-.01em}
.hero h1 em{color:#d9c3a5}
.hero p{max-width:560px;font-size:17px;color:#e6ddd0;margin:0}
.hero .meta{display:flex;gap:40px;margin-top:34px;flex-wrap:wrap}
.hero .meta div{border-top:1px solid rgba(217,195,165,.5);padding-top:10px;min-width:150px}
.hero .meta span{display:block;font-size:11px;letter-spacing:.3em;color:#cdbfad;text-transform:uppercase}
.hero .meta b{font-family:Lora,serif;font-weight:400;font-size:20px}
.hero .kicker{color:#d9c3a5}

section{padding:120px 0}
.sec-head{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:end;margin-bottom:56px}
.sec-head h2{font-family:Lora,serif;font-weight:400;font-size:clamp(32px,3.8vw,50px);line-height:1.12;margin:14px 0 0}
.sec-head p{margin:0;color:#4f4840;font-size:17px}
.rule{width:64px;height:2px;background:var(--bronze);margin-top:22px}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:20px}section{padding:80px 0}}

/* concept */
.concept{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.concept .img{position:relative}
.concept .img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.concept .img .badge{position:absolute;right:-28px;bottom:40px;background:var(--ink);color:#efe8de;padding:22px 26px;max-width:250px;font-size:14px;line-height:1.5}
.concept .img .badge b{display:block;font-family:Lora,serif;font-weight:400;font-size:30px;color:#d9c3a5}
.concept h2{font-family:Lora,serif;font-weight:400;font-size:clamp(32px,3.6vw,48px);line-height:1.12;margin:14px 0 24px}
.concept p{color:#4f4840;font-size:17px}
.points{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--line)}
.points li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.points li span{font-family:Lora,serif;color:var(--bronze);font-size:20px}
@media(max-width:860px){.concept{grid-template-columns:1fr}.concept .img .badge{right:12px}}

/* materials */
.dark{background:var(--ink-2);color:#ece5da}
.dark .sec-head p{color:#bfb3a3}
.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mat{background:#26231f;border:1px solid #3a352f}
.mat .sw{height:220px;position:relative;overflow:hidden}
.mat .body{padding:22px 22px 26px}
.mat h3{font-family:Lora,serif;font-weight:400;font-size:22px;margin:0 0 6px;color:#f4ede2}
.mat p{margin:0;font-size:14px;color:#b8ab9a;line-height:1.6}
.sw.white{background:linear-gradient(135deg,#f6f5f2,#e6e3de)}
.sw.stone{background:#131313 url("../img/textura-piedra.jpg") center/cover}
.sw.stone:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.sw.gola{background:linear-gradient(180deg,#f2f1ee 0 44%,#121212 44% 56%,#efeeeb 56%)}
.sw.drawer{background:#0f0f10 url("../img/textura-cajon.jpg") center/cover}
@media(max-width:960px){.mats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mats{grid-template-columns:1fr}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:120px;gap:14px}
.gal figure{margin:0;position:relative;overflow:hidden;cursor:zoom-in;background:#ddd}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;color:#f3ede4;font-size:13px;letter-spacing:.06em;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .4s}
.gal figure:hover figcaption{opacity:1}
.g1{grid-column:span 8;grid-row:span 4}.g2{grid-column:span 4;grid-row:span 4}
.g3{grid-column:span 6;grid-row:span 3}.g4{grid-column:span 6;grid-row:span 3}
@media(max-width:860px){.gal{grid-template-columns:1fr;grid-auto-rows:240px}.gal figure{grid-column:auto!important;grid-row:auto!important}}

/* details */
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.det figure{margin:0 0 18px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.det img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.det:hover img{transform:scale(1.04)}
.det .n{font-family:Lora,serif;color:var(--bronze);font-size:18px}
.det h3{font-family:Lora,serif;font-weight:400;font-size:24px;margin:2px 0 8px}
.det p{margin:0;color:#5a524a;font-size:15px}
@media(max-width:960px){.details{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.details{grid-template-columns:1fr}}

/* plans */
.paper{background:var(--paper)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.tabs button{font:500 12px Poppins;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:var(--ink);padding:12px 18px;cursor:pointer}
.tabs button.on{background:var(--ink);color:#f2ebe0;border-color:var(--ink)}
.plan-view{background:#fff;border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center}
.plan-view img{max-height:620px;margin:0 auto;object-fit:contain;cursor:zoom-in}
.plan-view aside h3{font-family:Lora,serif;font-weight:400;font-size:26px;margin:8px 0 10px}
.plan-view aside p{color:#5a524a;font-size:15px;margin:0 0 14px}
.plan-view aside ul{padding-left:18px;margin:0;color:#5a524a;font-size:14px}
@media(max-width:860px){.plan-view{grid-template-columns:1fr}}

/* equipment */
.eq{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.eq div{padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.eq span{font-family:Lora,serif;color:var(--bronze);font-size:15px}
.eq h3{font-family:Lora,serif;font-weight:400;font-size:21px;margin:6px 0 6px}
.eq p{margin:0;font-size:14px;color:#5a524a}
@media(max-width:960px){.eq{grid-template-columns:1fr 1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:s;margin-top:20px}
.step{padding:26px 22px 0 0;border-top:1px solid #4a433b;position:relative}
.step:before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:#4a433b}
.step.done:before{background:#6f8f6f}
.step.done small{color:#8fae8f}
.step.on:before{background:var(--bronze-2);box-shadow:0 0 0 5px rgba(176,139,99,.25)}
.step b{display:block;font-family:Lora,serif;font-weight:400;font-size:22px;color:#f1e9dd;margin-bottom:6px}
.step p{margin:0;color:#b8ab9a;font-size:14px}
.step small{display:inline-block;margin-bottom:8px;font-size:11px;letter-spacing:.3em;color:var(--bronze-2)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:26px}}
.cta{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:80px;padding-top:50px;border-top:1px solid #3a352f;flex-wrap:wrap}
.cta h3{font-family:Lora,serif;font-weight:400;font-size:clamp(26px,3vw,38px);margin:0;color:#f4ede2;max-width:640px;line-height:1.2}
.btn{display:inline-block;background:var(--bronze);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.26em;text-transform:uppercase;padding:18px 30px;font-weight:500}
.btn:hover{background:var(--bronze-2)}
footer{background:#161412;color:#a99d8d;font-size:13px;letter-spacing:.14em;padding:30px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(14,13,12,.95);z-index:90;display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:84vh;object-fit:contain;background:#fff}
.lb .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#d8cebf;font-size:13px;letter-spacing:.12em}
.lb button{position:absolute;background:none;border:0;color:#e9e1d5;font-size:34px;cursor:pointer;padding:10px 18px}
.lb .x{top:14px;right:16px}.lb .p{left:10px;top:50%}.lb .nx{right:10px;top:50%}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero img{animation:none}}