/* =========================================================
   A QUINTA BATISTA — dossier web
   Type: Prata (display) · Archivo (texto)
   ========================================================= */
:root{
  --paper:#FAFAF7;
  --ink:#161514;
  --grey:#8C8880;
  --line:#D8D5CE;
  --sedum:#5F7355;
  --glass:#4A7FA5;
  --beton:#B9B5AC;
  --c-q1:#DCE7D2;
  --c-cb:#EBD5D2;
  --c-q2:#D3E0E8;
  --c-wc:#F0E4C2;
  --c-ent:#EFD9BE;
  --c-des:#E2D8E6;
  --c-sal:#C6CFD6;
  --c-cor:#EDECE7;
  --ease:cubic-bezier(.22,.7,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- progresso ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;}
.progress span{display:block;height:100%;width:0;background:var(--sedum);}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.nav.solid{background:rgba(250,250,247,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);padding:11px 28px;}
.brand{font-family:'Prata',serif;font-size:17px;text-decoration:none;letter-spacing:.01em;color:var(--paper);transition:color .3s;}
.brand b{font-weight:400;}
.nav.solid .brand{color:var(--ink);}
.links{display:flex;gap:22px;}
.links a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.85);transition:color .25s;padding:4px 0;position:relative;
}
.links a i{font-style:normal;color:var(--sedum);margin-right:5px;font-size:10px;}
.nav.solid .links a{color:var(--grey);}
.links a:hover,.nav.solid .links a:hover{color:var(--sedum);}
.links a.active{color:#fff;}
.nav.solid .links a.active{color:var(--ink);}
.links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--sedum);}
@media (max-width:920px){.links{display:none;}.brand{color:var(--ink);}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden;}
.hero-media{position:absolute;inset:-12% 0;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,8,.28) 0%,rgba(10,12,8,0) 34%,rgba(10,12,8,.12) 62%,rgba(10,12,8,.55) 100%);}
.hero-card{
  position:relative;z-index:2;background:var(--paper);
  margin:0 0 0 28px;padding:44px 64px 48px 0;max-width:640px;width:min(88%,640px);
  padding-left:clamp(24px,5vw,56px);
}
.eyebrow{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;}
h1{
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(64px,11.5vw,150px);line-height:.98;letter-spacing:-.015em;
}
.hero-sub{font-family:'Prata',serif;font-size:clamp(20px,3vw,32px);margin-top:14px;}
.hero-by{font-size:12px;letter-spacing:.12em;color:var(--grey);margin-top:22px;text-transform:uppercase;}
.scroll-cue{position:absolute;z-index:2;right:36px;bottom:34px;width:26px;height:56px;border:1px solid rgba(255,255,255,.8);border-radius:14px;display:block;}
.scroll-cue span{position:absolute;left:50%;top:9px;width:3px;height:10px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite;}
@keyframes cue{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(22px);opacity:0;}100%{opacity:0;}}

/* animação de entrada do hero */
.hero-line{opacity:0;transform:translateY(34px);animation:heroIn 1s var(--ease) forwards;}
.hero-line.d1{animation-delay:.15s;}
.hero-line.d2{animation-delay:.32s;}
.hero-line.d3{animation-delay:.48s;}
.hero-line.d4{animation-delay:.9s;}
@keyframes heroIn{to{opacity:1;transform:none;}}

/* ---------- capítulos ---------- */
.chapter{padding:120px 0 90px;}
.ch-head{display:flex;align-items:baseline;gap:26px;margin-bottom:54px;border-bottom:1px solid var(--line);padding-bottom:26px;}
.ch-num{
  font-family:'Prata',serif;font-size:clamp(56px,8vw,104px);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--sedum);
}
.ch-head h2{font-family:'Prata',serif;font-weight:400;font-size:clamp(30px,4.6vw,52px);line-height:1.05;}
.section-sub{font-size:14px;color:var(--grey);margin:-30px 0 40px;max-width:620px;}

/* ---------- 01 introdução ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px 90px;gap:48px;position:relative;}
.intro-text{max-width:620px;}
.intro-text p{margin-bottom:22px;color:#3c3a35;}
.intro-text .lead{font-size:20px;color:var(--ink);line-height:1.55;}
blockquote{
  font-family:'Prata',serif;font-size:clamp(22px,3vw,30px);line-height:1.35;
  border-left:3px solid var(--sedum);padding:8px 0 8px 26px;margin:36px 0;
}
.intro-media img{width:100%;height:100%;min-height:520px;object-fit:cover;}
.vertical-word{
  font-family:'Prata',serif;font-size:clamp(70px,9vw,120px);color:transparent;
  -webkit-text-stroke:1px var(--line);
  writing-mode:vertical-rl;line-height:1;user-select:none;
  align-self:stretch;text-align:center;
}
@media (max-width:980px){
  .intro-grid{grid-template-columns:1fr;}
  .vertical-word{display:none;}
  .intro-media img{min-height:340px;}
}

/* ---------- imagens full-bleed ---------- */
.bleed{position:relative;height:min(86vh,760px);overflow:hidden;margin:20px 0;}
.bleed img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;}
.bleed figcaption{
  position:absolute;left:28px;bottom:22px;z-index:2;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(12,12,10,.5);padding:8px 14px;backdrop-filter:blur(4px);
}

/* ---------- 02 carta ---------- */
.carta-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:60px;align-items:start;}
.carta-media{position:sticky;top:90px;}
.carta-media img{width:100%;height:520px;object-fit:cover;}
.carta-media figcaption{font-size:12px;color:var(--grey);margin-top:10px;letter-spacing:.06em;}
.letter{max-width:600px;}
.letter p{margin-bottom:22px;color:#3c3a35;}
.letter .sign{margin-top:34px;color:var(--ink);}
.letter .sign span{font-family:'Prata',serif;font-size:26px;display:inline-block;margin-top:8px;}
.programa{margin-top:70px;}
.programa h3{font-family:'Prata',serif;font-weight:400;font-size:24px;margin-bottom:22px;}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.chips li{
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:13px;color:#3c3a35;background:#fff;
}
@media (max-width:920px){
  .carta-grid{grid-template-columns:1fr;}
  .carta-media{position:static;}
  .carta-media img{height:340px;}
}

/* ---------- 03 resumo ---------- */
.big-number{margin:10px 0 60px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
.bn{font-family:'Prata',serif;font-size:clamp(72px,12vw,150px);line-height:1;font-variant-numeric:tabular-nums;}
.bn-unit{font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);}
.resumo-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:48px;}
.resumo-grid h3{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:16px;}
.spec{list-style:none;}
.spec li{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:8px 0;border-bottom:1px solid #EDECE6;}
.spec li span:last-child{color:var(--grey);text-align:right;}
.bars{list-style:none;}
.bars li{display:grid;grid-template-columns:120px 1fr 74px;align-items:center;gap:12px;padding:7px 0;font-size:13px;}
.bars li span{color:#3c3a35;}
.bars li b{font-weight:500;color:var(--grey);text-align:right;font-variant-numeric:tabular-nums;}
.bars li i{display:block;height:10px;background:var(--sedum);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);}
.bars.on li i{transform:scaleX(1);}
.bars li:nth-child(2) i,.bars li:nth-child(3) i{background:#7d9070;}
.bars li:nth-child(n+4) i{background:var(--beton);}
@media (max-width:920px){.resumo-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- 04 plantas ---------- */
.plantas{background:#F3F2ED;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:-26px 0 22px;}
.toolbar .hint{font-size:12px;color:var(--grey);margin-left:auto;}
.toggle{
  appearance:none;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .18s ease;
}
.toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.toggle:focus-visible{outline:2px solid var(--sedum);outline-offset:2px;}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;}
.plan-card{border:1px solid var(--line);background:#fff;padding:26px 20px 18px;}
.plan{width:100%;height:auto;display:block;}
.plan text{font-family:'Archivo',sans-serif;}
.trees path{fill:var(--sedum);opacity:.16;}
.room{cursor:pointer;stroke:var(--ink);stroke-width:1;transition:filter .18s ease,opacity .18s ease;}
.plan.dimmed .room:not(.active){opacity:.32;}
.room.active{filter:saturate(1.5) brightness(.97);}
.room:focus-visible{outline:none;stroke:var(--sedum);stroke-width:3;}
.room-label{pointer-events:none;fill:var(--ink);}
.room-label .nm{font-size:12.5px;font-weight:600;letter-spacing:.02em;}
.room-label .ar{font-size:11px;fill:#5c5952;}
.wall{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:miter;}
.inner{stroke:var(--ink);stroke-width:2.5;}
.glass{stroke:var(--glass);stroke-width:2.2;}
.glass2{stroke:var(--glass);stroke-width:1.1;opacity:.55;}
.win-std{stroke:var(--glass);stroke-width:2;stroke-dasharray:7 5;opacity:.8;}
.door{fill:none;stroke:var(--ink);stroke-width:1.2;}
.door-arc{fill:none;stroke:var(--grey);stroke-width:.9;stroke-dasharray:3 3;}
.dims{transition:opacity .3s ease;}
.dims.off{opacity:0;pointer-events:none;}
.dim-line{stroke:var(--grey);stroke-width:.9;}
.dim-txt{font-size:11px;fill:var(--grey);letter-spacing:.04em;}
.dim-txt.strong{fill:var(--ink);font-weight:600;}
.labels{transition:opacity .3s ease;}
.labels.off{opacity:0;}
.compass text{font-size:10px;fill:var(--grey);letter-spacing:.15em;}
.compass line{stroke:var(--grey);stroke-width:1;}
.compass .n{fill:var(--sedum);}
.panel{position:sticky;top:86px;}
.panel-box{border:1px solid var(--line);background:#fff;padding:26px;min-height:392px;display:flex;flex-direction:column;}
.panel .note{min-height:150px;}
.panel .dims-detail{margin-top:auto;}
.stage{overflow-anchor:none;}
@media (max-width:920px){.panel-box{min-height:0;} .panel .note{min-height:120px;}}
.panel .kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);}
.panel h3{font-family:'Prata',serif;font-weight:400;font-size:25px;margin:10px 0 4px;line-height:1.15;}
.panel .surface{font-size:14px;color:var(--sedum);font-weight:600;margin-bottom:14px;}
.panel .note{font-size:13.5px;color:#4a4741;}
.panel .dims-detail{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--grey);}
.legend{margin-top:20px;display:grid;gap:6px;}
.legend button{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  font:inherit;font-size:12.5px;color:#4a4741;padding:6px 8px;cursor:pointer;text-align:left;
  transition:background .15s ease;
}
.legend button:hover,.legend button.active{background:#fff;}
.legend .sw{width:13px;height:13px;border:1px solid var(--ink);flex:none;}
.legend .a{margin-left:auto;color:var(--grey);font-variant-numeric:tabular-nums;}
.elev{margin-top:70px;}
.elev h3{font-family:'Prata',serif;font-weight:400;font-size:28px;margin-bottom:4px;}
.elev .section-sub{margin:0 0 22px;}
.elev-card{border:1px solid var(--line);background:#fff;padding:30px 22px;}
.elev-card svg{width:100%;height:auto;display:block;}
@media (max-width:920px){.stage{grid-template-columns:1fr;}.panel{position:static;}}

/* ---------- 05 terreno ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:110px;gap:16px;}
.gallery figure{overflow:hidden;position:relative;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.gallery figure:hover img{transform:scale(1.045);}
.gallery{grid-auto-rows:118px;}
.g1{grid-column:1/8;grid-row:1/5;}
.g2{grid-column:8/13;grid-row:1/8;}
.g3{grid-column:1/5;grid-row:5/8;}
.g4{grid-column:5/8;grid-row:5/8;}
.g5{grid-column:1/7;grid-row:8/11;}
.g6{grid-column:7/13;grid-row:8/11;}
.g7{grid-column:1/7;grid-row:11/14;}
.g8{grid-column:7/13;grid-row:11/14;}
@media (max-width:720px){
  .gallery{grid-auto-rows:88px;}
  .g1{grid-column:1/13;grid-row:span 4;}
  .g2{grid-column:1/7;grid-row:span 5;}
  .g3{grid-column:7/13;grid-row:span 5;}
  .g4{grid-column:1/13;grid-row:span 3;}
  .g5{grid-column:1/7;grid-row:span 3;}
  .g6{grid-column:7/13;grid-row:span 3;}
  .g7{grid-column:1/7;grid-row:span 3;}
  .g8{grid-column:7/13;grid-row:span 3;}
}

/* ---------- 06 inspirações ---------- */
.insp-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start;}
.insp-text p{margin-bottom:22px;color:#3c3a35;max-width:600px;}
.insp-text .lead{font-size:20px;color:var(--ink);line-height:1.55;}
.materials{list-style:none;margin:30px 0 34px;}
.materials li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid #EDECE6;font-size:14px;}
.materials b{font-weight:600;}
.materials span{color:var(--grey);}
.insp-media{display:grid;gap:16px;}
.insp-media img{width:100%;object-fit:cover;}
.insp-media .tall img{height:480px;}
.insp-media figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px;}
@media (max-width:920px){.insp-grid{grid-template-columns:1fr;}}

/* ---------- 07 ficha ---------- */
#ficha{padding-bottom:0;}
.ficha-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:80px;}
.qa{border:1px solid var(--line);background:#fff;padding:28px 26px;}
.qa h3{font-family:'Prata',serif;font-weight:400;font-size:21px;margin-bottom:12px;}
.qa p{font-size:13.5px;color:#4a4741;}
.sunset{height:340px;overflow:hidden;position:relative;margin:0;}
.sunset img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;}
@media (max-width:920px){.ficha-grid{grid-template-columns:1fr;}}

/* ---------- obrigado ---------- */
.obrigado{background:var(--ink);color:var(--paper);}
.ob-grid{padding:110px 28px 90px;}
.obrigado h2{font-family:'Prata',serif;font-weight:400;font-size:clamp(56px,9vw,120px);line-height:1;}
.ob-text > p{margin-top:18px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#B9B5AC;}
.contacts{list-style:none;margin-top:44px;display:grid;gap:12px;max-width:420px;}
.contacts li{display:flex;gap:22px;font-size:15px;border-bottom:1px solid #33322f;padding-bottom:12px;}
.contacts span{width:52px;color:#8C8880;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding-top:4px;}
.contacts a{text-decoration:none;transition:color .2s;}
.contacts a:hover{color:var(--sedum);}
.small{margin-top:46px;font-size:12px;color:#7a7770;max-width:460px;}


/* ---------- maqueta 3D ---------- */
.maquette{margin-top:70px;}
.maquette h3{font-family:'Prata',serif;font-weight:400;font-size:28px;margin-bottom:4px;}
.maquette .section-sub{margin:0 0 22px;}
.maq-card{
  position:relative;border:1px solid var(--line);
  background:linear-gradient(160deg,#FFFFFF 0%,#F4F2EC 100%);
  height:560px;overflow:hidden;
}
.maq-card canvas{width:100%;height:100%;display:block;cursor:grab;}
.maq-card canvas:active{cursor:grabbing;}
.maq-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  background:rgba(250,250,247,.85);padding:7px 14px;border-radius:999px;
  pointer-events:none;white-space:nowrap;
}

.maq-ctrl{
  position:absolute;top:14px;right:14px;display:flex;gap:6px;
}
.maq-ctrl button{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.94);
  color:var(--ink);font:inherit;font-size:15px;font-weight:500;line-height:1;
  width:34px;height:34px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.maq-ctrl button.wide{
  width:auto;padding:0 15px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.maq-ctrl button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.maq-ctrl button:focus-visible{outline:2px solid var(--sedum);outline-offset:2px;}
.maq-ctrl button[aria-pressed="false"]{background:var(--sedum);border-color:var(--sedum);color:#fff;}
@media (max-width:720px){.maq-card{height:400px;}}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.img-reveal{overflow:hidden;}
.img-reveal img{clip-path:inset(8% 0 8% 0);transform:scale(1.07);transition:clip-path 1.1s var(--ease),transform 1.3s var(--ease);}
.img-reveal.in img{clip-path:inset(0 0 0 0);transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .reveal,.hero-line{opacity:1;transform:none;}
  .img-reveal img{clip-path:none;transform:none;}
  .bars li i{transform:scaleX(1);}
}


/* ---------- retour ao portfólio ---------- */
.back-portfolio{
  margin-left:18px;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(250,250,247,.92);
  color:var(--ink);
  font-size:12px;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .25s ease, transform .25s ease;
}
.back-portfolio:hover{border-color:var(--sedum);transform:translateY(-1px);}
@media (max-width:920px){.back-portfolio{margin-left:auto;}}