
:root{
  --off-white:#FAF8F5;
  --paper:#F1EEE7;
  --graphite:#22231F;
  --navy:#16173E;
  --navy-soft:rgba(22,23,62,0.92);
  --gold:#D9AF66;
  --gold-deep:#B78D45;
  --gold-pale:#E9D3A3;
  --line:rgba(22,23,62,0.14);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --gap:clamp(1.5rem, 4vw, 3rem);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root{ --off-white:#FAF8F5; --paper:#F1EEE7; --graphite:#22231F; } }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  background:var(--off-white); color:var(--graphite);
  font-family:var(--sans); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; line-height:1.08;}
img,.ph{max-width:100%; display:block;}
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3.5rem);}
a{color:inherit; text-decoration:none;}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem; font-family:var(--sans); font-size:.92rem;
  border:1px solid var(--graphite); border-radius:2px;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn.solid{background:var(--navy); color:var(--off-white); border-color:var(--navy);}
.btn.solid:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--navy);}
.btn.ghost:hover{background:var(--graphite); color:var(--off-white);}
.btn.light{border-color:rgba(250,247,242,0.55); color:var(--off-white);}
.btn.light:hover{background:var(--gold); border-color:var(--gold); color:var(--navy);}

/* Placeholder photography blocks */
.ph{
  position:relative; background:
    linear-gradient(135deg, #DCD2BF 0%, #C6B79A 45%, #A98F68 100%);
  display:flex; align-items:flex-end; overflow:hidden;
}
/* bloco de foto — sem texto de aviso; pronto para receber <img> real */
.ph img.reveal-zoom{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* Header */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:env(safe-area-inset-top,0px) 0 0;
  transition:background .4s ease, box-shadow .4s ease;
  color:#fff;
}
header .bar{display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1.25rem,4vw,3.5rem);}
header.solid{background:var(--navy-soft); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(255,255,255,0.08);}
.logo{display:flex; align-items:center;}
.logo .logo-mark{height:64px; width:auto; display:block;}
nav{display:flex; align-items:center; gap:2rem;}
nav a{font-size:.9rem; color:rgba(255,255,255,0.88);}
nav a:hover{color:var(--gold);}
.menu-btn{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.3rem;}
.menu-btn span{width:22px; height:1.5px; background:#fff; display:block;}
.mobile-nav{
  position:fixed; inset:0; background:var(--navy); z-index:99; color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:2rem; padding:2rem;
  transform:translateY(-100%); transition:transform .45s ease;
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-family:var(--serif); font-size:1.8rem; color:#fff;}
.mobile-nav a:hover{color:var(--gold);}

/* Hero */
.hero{position:relative; height:100vh; min-height:640px; display:flex; align-items:flex-end;}
.hero .ph{position:absolute; inset:0;}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,0.15) 0%, rgba(20,18,16,0.55) 100%);}
.hero-content{position:relative; z-index:2; color:#fff; padding-bottom:clamp(3rem,8vw,6rem); width:100%;}
.hero-content h1{font-size:clamp(2.4rem, 6vw, 4.6rem); max-width:16ch;}
.hero-content p{max-width:34ch; margin:1.4rem 0 2.2rem; font-size:1.05rem; color:rgba(255,255,255,0.85);}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

/* Sections generic */
section{padding:clamp(4.5rem,9vw,8rem) 0;}
.section-head{max-width:44ch; margin-bottom:clamp(2.5rem,6vw,4.5rem);}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
.section-head p{margin-top:.9rem; color:rgba(28,27,25,0.65); max-width:38ch;}

/* Diferenciais */
.diferenciais{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.dif-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.dif-item{padding:2.6rem 2rem 2.6rem 0; border-left:1px solid var(--line); padding-left:2rem;}
.dif-item:first-child{border-left:0; padding-left:0;}
.dif-item .num{font-family:var(--serif); font-size:1rem; color:var(--gold-deep); display:block; margin-bottom:1rem;}
.dif-item h3{font-size:1.15rem; font-weight:500; margin-bottom:.6rem;}
.dif-item p{font-size:.92rem; color:rgba(28,27,25,0.6);}

/* Projetos editorial */
.projetos-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);}
.proj-1{grid-column:1/8; aspect-ratio:4/3;}
.proj-2{grid-column:8/13; aspect-ratio:3/4; margin-top:4rem;}
.proj-3{grid-column:1/6; aspect-ratio:1/1; margin-top:2rem;}
.proj-4{grid-column:6/13; aspect-ratio:16/9;}
.proj-cap{margin-top:.9rem; display:flex; justify-content:space-between; font-size:.85rem;}
.proj-cap .cat{color:var(--gold-deep);}

/* Especialidades */
.especialidades{background:var(--paper);}
.esp-row{display:flex; overflow-x:auto; gap:1.2rem; padding-bottom:.5rem; scrollbar-width:none;}
.esp-row::-webkit-scrollbar{display:none;}
.esp-card{flex:0 0 auto; width:240px; scroll-snap-align:start;}
.esp-row{scroll-snap-type:x proximity;}
.esp-card .ph{aspect-ratio:4/5; margin-bottom:.9rem;}
.esp-card h3{font-size:1.05rem; font-weight:500;}

/* Processo */
.processo-list{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; border-top:1px solid var(--line);}
.proc-item{padding-top:1.6rem; border-top:1px solid var(--graphite); margin-top:-1px;}
.proc-item .num{font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep);}
.proc-item h3{font-size:1rem; font-weight:500; margin:.6rem 0 .5rem;}
.proc-item p{font-size:.85rem; color:rgba(28,27,25,0.6);}
.processo .ph{aspect-ratio:16/9; margin-top:2rem;}
.processo{padding-bottom:clamp(2.5rem,5vw,4rem);}

/* Sobre */
.sobre{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;}
.sobre .ph{aspect-ratio:4/5;}
.sobre-text p{color:rgba(28,27,25,0.68); margin-top:1rem;}

/* Depoimentos */
.depoimentos{background:var(--navy); color:var(--off-white);}
.depoimentos .section-head p{color:rgba(250,247,242,0.6);}
.dep-quote{font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.9rem); max-width:26ch; line-height:1.35; color:var(--gold-pale);}
.dep-name{margin-top:1.6rem; font-size:.85rem; color:rgba(250,247,242,0.55);}

/* CTA */
.cta{background:var(--navy); color:#fff; text-align:center;}
.cta h2{font-size:clamp(2rem,4.5vw,3rem); max-width:16ch; margin:0 auto;}
.cta .btn{margin-top:2rem;}
.cta .btn.light:hover{color:var(--navy);}

/* Footer */
footer{padding:4rem 0 2.5rem; border-top:1px solid var(--line);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem;}
.foot-grid h4{font-size:.8rem; letter-spacing:.02em; color:rgba(28,27,25,0.5); margin-bottom:.9rem; font-weight:500;}
.foot-grid a,.foot-grid p{display:block; font-size:.9rem; margin-bottom:.5rem; color:rgba(28,27,25,0.75);}
.foot-bottom{display:flex; justify-content:space-between; font-size:.8rem; color:rgba(28,27,25,0.5); flex-wrap:wrap; gap:.8rem;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

@media (max-width:900px){
  nav{display:none;}
  .menu-btn{display:flex;}
  .dif-grid{grid-template-columns:1fr 1fr;}
  .dif-item{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1.6rem;}
  .proj-1,.proj-2,.proj-3,.proj-4{grid-column:1/13; margin-top:0;}
  .processo-list{grid-template-columns:1fr 1fr;}
  .processo .ph{aspect-ratio:4/3; margin-top:1.5rem;}
  .processo{padding-bottom:2.5rem;}
  .sobre{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

/* Projetos — slots extras (5 e 6) */
.proj-5{grid-column:1/7; aspect-ratio:4/5; margin-top:2rem;}
.proj-6{grid-column:7/13; aspect-ratio:4/5;}

/* Botão destacado no menu */
.btn-nav{padding:.55rem 1.3rem; font-size:.82rem; background:var(--gold); color:var(--navy); border-radius:2px; border:1px solid var(--gold);}
.btn-nav:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--navy);}

/* Residencial ou Corporativo */
.res-corp{background:var(--paper);}
.res-corp-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:2.5rem;}
.res-corp-col{padding:2.4rem; background:var(--off-white); border:1px solid var(--line);}
.res-corp-col h3{font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep); margin-bottom:1rem; font-weight:500;}
.res-corp-col p{font-size:.95rem; color:rgba(28,27,25,0.68); line-height:1.8;}

/* Experiência e Confiança */
.confianca p{max-width:60ch; color:rgba(28,27,25,0.68);}

/* Por que a Duetto */
.porque{border-top:1px solid var(--line);}
.porque-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);}
.porque-item h3{font-size:1.1rem; margin-bottom:.6rem; color:var(--navy); font-weight:500;}
.porque-item p{font-size:.88rem; color:rgba(28,27,25,0.6);}

@media (max-width:900px){
  .proj-5,.proj-6{grid-column:1/13; margin-top:0;}
  .res-corp-grid{grid-template-columns:1fr;}
  .porque-grid{grid-template-columns:1fr 1fr;}
}

/* ===== Página Projetos ===== */
.page-hero{padding:calc(env(safe-area-inset-top,0px) + 8rem) 0 3rem; background:var(--paper);}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); max-width:14ch;}
.page-hero p{margin-top:1rem; max-width:44ch; color:rgba(28,27,25,0.65);}
.filters{display:flex; gap:.6rem; flex-wrap:wrap; padding:2rem 0 3rem; border-bottom:1px solid var(--line);}
.filter-btn{padding:.55rem 1.1rem; font-size:.85rem; border:1px solid var(--line); border-radius:20px; background:none; cursor:pointer; color:var(--graphite); transition:all .3s ease; font-family:var(--sans);}
.filter-btn.active, .filter-btn:hover{background:var(--navy); border-color:var(--navy); color:#fff;}
.port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding:3.5rem 0 6rem;}
.port-card{cursor:default;}
.port-card .ph{aspect-ratio:4/5;}
.port-card .proj-cap{margin-top:.9rem;}
.port-card.hide{display:none;}
@media (max-width:900px){ .port-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .port-grid{grid-template-columns:1fr;} }

/* ===== Página Sobre ===== */
.page-hero{padding:calc(env(safe-area-inset-top,0px) + 8rem) 0 3rem; background:var(--paper);}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); max-width:16ch;}
.page-hero p{margin-top:1rem; max-width:48ch; color:rgba(28,27,25,0.65);}
.sobre-lead{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; padding:5rem 0;}
.sobre-lead .ph{aspect-ratio:4/5;}
.sobre-lead-text p{margin-top:1rem; color:rgba(28,27,25,0.68); max-width:42ch;}
.valores{background:var(--navy); color:#fff;}
.valores-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
.valor-item h3{font-size:1.2rem; margin-bottom:.7rem; color:var(--gold-pale);}
.valor-item p{font-size:.92rem; color:rgba(250,247,242,0.72); max-width:32ch;}
@media (max-width:900px){
  .sobre-lead{grid-template-columns:1fr;}
  .valores-grid{grid-template-columns:1fr;}
}

/* ===== Página Contato ===== */
.page-hero{padding:calc(env(safe-area-inset-top,0px) + 8rem) 0 3rem; background:var(--paper);}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); max-width:16ch;}
.page-hero p{margin-top:1rem; max-width:46ch; color:rgba(28,27,25,0.65);}
.contato-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); padding:5rem 0 6rem; align-items:start;}
.form-group{margin-bottom:1.4rem;}
.form-group label{display:block; font-size:.82rem; color:rgba(28,27,25,0.6); margin-bottom:.5rem;}
.form-group input, .form-group textarea, .form-group select{
  width:100%; border:none; border-bottom:1px solid var(--line); background:none;
  font-family:var(--sans); font-size:1rem; padding:.7rem 0; color:var(--graphite);
  transition:border-color .3s ease; border-radius:0; appearance:none; -webkit-appearance:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:none; border-color:var(--gold-deep);}
.form-group textarea{resize:vertical; min-height:110px;}
.form-group select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2322231F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:20px;
}
.info-block{background:var(--navy); color:#fff; padding:3rem clamp(1.5rem,4vw,3rem); border-radius:2px;}
.info-block h3{font-size:1.2rem; margin-bottom:1.6rem; color:var(--gold-pale);}
.info-row{margin-bottom:1.5rem;}
.info-row span{display:block; font-size:.78rem; color:rgba(250,247,242,0.55); margin-bottom:.3rem;}
.info-row a, .info-row p{font-size:1rem;}
.info-row a{display:inline-block; margin-right:1.2rem; color:#fff; transition:color .25s ease;}
.info-row a:hover{color:var(--gold);}
.wa-btn{margin-top:1rem; display:inline-flex; cursor:pointer; border:1px solid rgba(250,247,242,0.55); background:none; font-family:var(--sans); font-size:.92rem;}
.wa-picker{position:relative;}
.wa-options{max-height:0; overflow:hidden; opacity:0; display:flex; flex-direction:column; gap:.6rem; transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;}
.wa-options.open{max-height:200px; opacity:1; margin-top:1rem;}
.wa-options a{padding:.85rem 1.1rem; border:1px solid rgba(255,255,255,0.25); border-radius:2px; font-size:.9rem; line-height:1.5; color:#fff; text-align:center; display:block; margin-right:0;}
.wa-options a:hover{border-color:var(--gold); color:var(--gold);}
@media (max-width:900px){ .contato-grid{grid-template-columns:1fr;} }
