/* =========================================================
   Natalia de Camillo — Arquiteta e Urbanista
   Identidade: Verde floresta #083D29 · Cobre #9A5E3C
   ========================================================= */

:root{
  --green-900:#052A1C;
  --green-800:#083D29;   /* marca */
  --green-700:#0B4A33;
  --green-600:#12583D;
  --green-500:#1C6A4A;

  --copper:#9A5E3C;
  --copper-400:#B27B52;
  --copper-300:#C99A73;
  --copper-100:#E7D3BF;

  --cream:#F6F0E5;
  --cream-2:#EFE6D6;
  --sand:#E3D6BF;

  --ink:#17231C;
  --ink-soft:#425147;
  --text-soft:#5A6A5E;

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:"Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap:1220px;
  --gutter:clamp(20px, 5vw, 72px);
  --radius:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-lg:0 30px 60px -20px rgba(5,25,15,.45);
  --shadow-md:0 18px 40px -18px rgba(5,25,15,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:400; line-height:1.08}
p{margin:0}
::selection{background:var(--copper); color:var(--cream)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}

/* ---------- Tipografia utilitária ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--copper-300);
  margin-bottom:1.2rem;
}
.eyebrow--copper{color:var(--copper)}
.ital{font-family:var(--font-display); font-style:italic; font-weight:500}
.hl{color:var(--copper); font-style:italic; font-family:var(--font-display)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1.05em 1.9em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .45s var(--ease);
  white-space:nowrap;
}
.btn--copper{background:var(--copper); color:var(--cream)}
.btn--copper:hover{background:var(--copper-400); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn--ghost{border-color:currentColor; color:inherit; background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)}
.btn--dark{background:var(--green-800); color:var(--cream)}
.btn--dark:hover{background:var(--green-700); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn--sm{padding:.7em 1.25em; font-size:.72rem}
.btn--lg{padding:1.2em 2.4em; font-size:.85rem}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--green-800);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{opacity:0; visibility:hidden}
.preloader__mark img{
  width:76px; height:auto;
  animation:markPulse 1.5s var(--ease) infinite;
}
@keyframes markPulse{
  0%,100%{transform:scale(1); opacity:.55}
  50%{transform:scale(1.08); opacity:1}
}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--copper); z-index:1200;
  transition:width .1s linear;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:.7rem 0;
}
.nav__inner{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav.is-scrolled{
  background:rgba(6,32,22,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand__mark{width:38px; height:auto; transition:transform .5s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-6deg)}
.brand__text{display:flex; flex-direction:column; line-height:1.15; color:var(--cream)}
.brand__text strong{font-weight:400; font-size:.98rem; letter-spacing:.06em}
.brand__text em{font-style:normal; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--copper-300)}

.nav__links{display:flex; align-items:center; gap:2.1rem}
.nav__links > a:not(.btn){
  color:var(--cream);
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  position:relative; padding:.3em 0; opacity:.85;
  transition:opacity .3s;
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--copper-300); transition:width .4s var(--ease);
}
.nav__links > a:not(.btn):hover{opacity:1}
.nav__links > a:not(.btn):hover::after{width:100%}

.nav__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav__toggle span{width:26px; height:2px; background:var(--cream); transition:.4s var(--ease)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 80% 0%, var(--green-700) 0%, var(--green-800) 45%, var(--green-900) 100%);
  color:var(--cream);
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(120px,16vh,190px) 0 clamp(70px,10vh,110px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px; opacity:.4; pointer-events:none;
}
.hero__grid{
  width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px);
  align-items:center; position:relative; z-index:2;
}
.hero__content{max-width:560px}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(3rem,7.2vw,5.6rem);
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:1.6rem;
}
.hero__lede{
  font-size:1.08rem; color:rgba(246,240,229,.82);
  max-width:44ch; margin-bottom:2.4rem;
}
.hero__lede strong{color:var(--cream); font-weight:400}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem}
.hero__meta{
  display:flex; align-items:center; gap:1rem;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-300);
}
.hero__meta .dot{width:5px; height:5px; border-radius:50%; background:var(--copper)}

.hero__figure{position:relative}
.hero__frame{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-lg);
  outline:1px solid rgba(231,211,191,.25); outline-offset:10px;
}
.hero__frame img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__tag{
  position:absolute; left:0; bottom:18px;
  background:var(--copper); color:var(--cream);
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.7em 1.3em;
}
.hero__watermark{
  position:absolute; right:-42px; bottom:-46px; width:150px; opacity:.22;
  pointer-events:none;
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:44px; border:1px solid rgba(231,211,191,.5); border-radius:14px;
  display:grid; place-items:start center; padding-top:8px; z-index:3;
}
.hero__scroll span{width:3px; height:8px; border-radius:2px; background:var(--copper-300); animation:scrollDot 1.7s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{
  background:var(--cream);
  padding:clamp(80px,12vw,150px) 0;
  text-align:center;
}
.manifesto .wrap{max-width:960px}
.manifesto__mark{width:54px; margin:0 auto 2.2rem; opacity:.9}
.manifesto__text{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,4vw,2.9rem);
  line-height:1.28; font-weight:500; color:var(--green-800);
  letter-spacing:.005em;
}
.manifesto__tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2rem;
  margin-top:3rem;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-soft);
}
.manifesto__tags span{position:relative}
.manifesto__tags span:not(:last-child)::after{content:"·"; position:absolute; right:-1.1rem; color:var(--copper)}

/* =========================================================
   SECTIONS genéricas
   ========================================================= */
.section{padding:clamp(80px,11vw,140px) 0}
.section__head{max-width:620px; margin-bottom:clamp(48px,7vw,84px)}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:500; color:var(--green-800);
}
.section__sub{margin-top:1rem; color:var(--text-soft); font-size:1.05rem; max-width:52ch}
.section__head--light .section__title{color:var(--cream)}
.section__head--light .section__sub{color:rgba(246,240,229,.7)}
.section__head--center{margin-inline:auto; text-align:center; max-width:640px}
.section__head--center .section__sub{margin-inline:auto}

/* =========================================================
   PROJETOS
   ========================================================= */
.projects{background:var(--cream)}
.project{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,72px); align-items:center;
  padding:clamp(40px,6vw,70px) 0;
  border-top:1px solid rgba(23,35,28,.1);
}
.project:first-of-type{border-top:0}
.project--reverse .project__media{order:2}
.project__info{max-width:440px}
.project__idx{
  font-family:var(--font-display); font-size:2.4rem; font-style:italic;
  color:var(--copper); line-height:1; margin-bottom:.4rem;
}
.project__cat{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.9rem}
.project__name{font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:500; color:var(--green-800); margin-bottom:1.1rem}
.project__desc{color:var(--ink); opacity:.86; margin-bottom:1.7rem}
.project__facts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.project__facts li{position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--text-soft)}
.project__facts li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--copper)}

/* Bloco de imagens (antes/depois) */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0}
.ba__img{
  position:relative; margin:0; padding:0; border:0; cursor:zoom-in; background:none;
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.ba__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:saturate(1.02)}
.ba__img:hover img{transform:scale(1.06)}
.ba__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(5,25,15,.35)); opacity:0; transition:opacity .4s}
.ba__img:hover::after{opacity:1}
.ba__img--tall{aspect-ratio:3/4}
.ba__img--small{aspect-ratio:3/4; align-self:center}
.ba__img--wide{aspect-ratio:4/3}
.ba:has(.ba__img--wide){grid-template-columns:1.4fr .8fr}
.ba__label{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.45em .9em; border-radius:2px;
  background:rgba(6,32,22,.72); color:var(--cream); backdrop-filter:blur(3px);
}
.ba__label--antes{background:rgba(90,60,40,.8)}
.ba__label--depois{background:rgba(12,74,51,.82)}

/* =========================================================
   ANTES & DEPOIS (compare slider)
   ========================================================= */
.transform{
  background:linear-gradient(180deg, var(--green-800), var(--green-900));
  color:var(--cream);
  padding:clamp(80px,11vw,140px) 0;
}
.transform .section__head{margin-inline:auto; text-align:center; max-width:640px}
.compare{
  position:relative; max-width:900px; margin:0 auto;
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); outline:1px solid rgba(231,211,191,.2); outline-offset:8px;
  user-select:none; touch-action:pan-y;
}
.compare__img{position:absolute; inset:0}
.compare__img img{width:100%; height:100%; object-fit:cover; pointer-events:none}
.compare__img--before{clip-path:inset(0 50% 0 0); will-change:clip-path}
.compare__badge{
  position:absolute; top:16px; z-index:4;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.55em 1.1em; color:var(--cream);
}
.compare__badge--before{left:16px; background:rgba(90,60,40,.85)}
.compare__badge--after{right:16px; background:rgba(12,74,51,.85)}
.compare__handle{
  position:absolute; top:0; bottom:0; left:50%; width:44px; transform:translateX(-50%);
  z-index:5; cursor:ew-resize; display:grid; place-items:center;
}
.compare__line{position:absolute; top:0; bottom:0; width:2px; background:var(--copper)}
.compare__grip{
  width:46px; height:46px; border-radius:50%; background:var(--copper); color:var(--cream);
  display:flex; align-items:center; justify-content:center; gap:2px;
  box-shadow:0 6px 20px rgba(0,0,0,.35); font-size:1.1rem;
}
.compare__grip i{font-style:normal; line-height:1}

/* =========================================================
   SOBRE
   ========================================================= */
.about{background:var(--cream-2)}
.about__grid{display:grid; grid-template-columns:.8fr 1fr; gap:clamp(36px,6vw,84px); align-items:center}
.about__figure{position:relative}
.about__frame{
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); outline:1px solid rgba(154,94,60,.25); outline-offset:10px;
}
.about__frame img{width:100%; height:100%; object-fit:cover; object-position:center top}
.about__badge{
  position:absolute; right:-22px; bottom:-22px;
  width:92px; height:92px; border-radius:50%;
  background:var(--green-800); display:grid; place-items:center;
  box-shadow:var(--shadow-md);
}
.about__badge img{width:48px; height:auto}
.about__role{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); margin:.4rem 0 1.6rem}
.about__text{color:var(--ink); opacity:.86; max-width:52ch; margin-bottom:2.2rem}
.about__list{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem; margin-bottom:2.4rem}
.about__list div{border-top:1px solid rgba(23,35,28,.14); padding-top:.7rem}
.about__list strong{display:block; font-weight:400; font-family:var(--font-display); font-size:1.35rem; color:var(--green-800)}
.about__list span{font-size:.85rem; color:var(--text-soft)}

/* =========================================================
   PROCESSO
   ========================================================= */
.process{background:var(--green-800); color:var(--cream)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.5vw,34px)}
.step{
  padding:2rem 1.6rem 2.2rem; border-top:2px solid rgba(231,211,191,.25);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.step:hover{border-color:var(--copper); transform:translateY(-6px)}
.step__num{font-family:var(--font-display); font-style:italic; font-size:2.6rem; color:var(--copper-300); display:block; margin-bottom:1rem}
.step h3{font-family:var(--font-display); font-size:1.45rem; font-weight:500; margin-bottom:.7rem}
.step p{font-size:.92rem; color:rgba(246,240,229,.72)}

/* =========================================================
   AGENDA (Calendly)
   ========================================================= */
.agenda{background:var(--cream-2)}
.agenda__card{
  max-width:1000px; margin:0 auto;
  background:#fff; border-radius:6px; padding:10px;
  box-shadow:var(--shadow-lg); outline:1px solid rgba(154,94,60,.18); outline-offset:8px;
}
.agenda__card .calendly-inline-widget{border-radius:4px; overflow:hidden}
.agenda__fallback{padding:2rem; text-align:center; color:var(--text-soft)}
.agenda__fallback a{color:var(--copper); text-decoration:underline}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:
    linear-gradient(rgba(5,25,15,.74), rgba(5,25,15,.88)),
    url("../img/obras/wabi-antes.jpg") center/cover fixed;
  color:var(--cream); text-align:center;
}
.cta__inner{max-width:760px; margin:0 auto; position:relative}
.cta__mark{width:60px; margin:0 auto 1.8rem; opacity:.95}
.cta__title{font-family:var(--font-display); font-size:clamp(2.3rem,5.5vw,4rem); font-weight:500; margin-bottom:1.2rem}
.cta__sub{color:rgba(246,240,229,.78); margin-bottom:2.6rem; font-size:1.08rem}
.cta__actions{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--green-900); color:var(--cream); padding:clamp(56px,7vw,80px) 0 2.4rem}
.footer__inner{display:grid; grid-template-columns:1fr auto 1fr; gap:2.4rem; align-items:center}
.footer__logo{width:180px; height:auto; border-radius:2px}
.footer__nav{display:flex; justify-content:center; flex-wrap:wrap; gap:1.4rem}
.footer__nav a{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; transition:opacity .3s, color .3s}
.footer__nav a:hover{opacity:1; color:var(--copper-300)}
.footer__meta{text-align:right; font-size:.76rem; color:rgba(246,240,229,.55); line-height:1.9}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,20,13,.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox__stage{margin:0; max-width:88vw; max-height:84vh; display:flex; flex-direction:column; align-items:center; gap:1rem}
.lightbox__stage img{max-width:88vw; max-height:78vh; object-fit:contain; box-shadow:var(--shadow-lg); border-radius:2px}
.lightbox__stage figcaption{color:var(--copper-100); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase}
.lightbox__close,.lightbox__nav{
  position:absolute; background:rgba(255,255,255,.08); color:var(--cream); border:1px solid rgba(231,211,191,.25);
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.6rem; line-height:1;
  display:grid; place-items:center; transition:background .3s, transform .3s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--copper); transform:scale(1.06)}
.lightbox__close{top:24px; right:24px; font-size:1.9rem}
.lightbox__nav--prev{left:3vw; top:50%; transform:translateY(-50%)}
.lightbox__nav--next{right:3vw; top:50%; transform:translateY(-50%)}
.lightbox__nav--prev:hover{transform:translateY(-50%) scale(1.06)}
.lightbox__nav--next:hover{transform:translateY(-50%) scale(1.06)}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:var(--green-600); color:var(--cream);
  display:grid; place-items:center; box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), background .4s;
}
.wa-float:hover{transform:translateY(-4px) scale(1.05); background:var(--green-500)}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.js .reveal{opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .reveal.is-visible{opacity:1; transform:none}
/* Sem JS: conteúdo sempre visível */
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
  .hero__scroll span,.preloader__mark img{animation:none}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr; gap:48px}
  .hero__figure{max-width:440px}
  .about__grid{grid-template-columns:1fr; gap:52px}
  .about__figure{max-width:420px}
  .steps{grid-template-columns:1fr 1fr}
  .cta{background-attachment:scroll}
}

@media (max-width:768px){
  body{font-size:16px}
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.8rem;
    background:var(--green-900); padding:3rem var(--gutter);
    transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links > a:not(.btn){font-size:1.05rem}
  .nav__toggle{display:flex; z-index:1001}

  .project{grid-template-columns:1fr; gap:32px}
  .project--reverse .project__media{order:0}
  .project__info{max-width:none}

  .footer__inner{grid-template-columns:1fr; text-align:center; gap:1.8rem; justify-items:center}
  .footer__meta{text-align:center}
}

@media (max-width:480px){
  :root{--gutter:20px}
  .ba{gap:10px}
  .about__list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero__title{font-size:clamp(2.5rem,11vw,3.2rem)}
  .hero__actions,.cta__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn,.cta__actions .btn{justify-content:center; width:100%}
  .compare{aspect-ratio:3/4}
  .footer__logo{width:150px}
}