/* ============================================================
   Casa Lotti Interiores
   ============================================================ */

:root{
  --bg:        #efede8;
  --bg-alt:    #e4e0d8;
  --paper:     #f7f6f3;
  --ink:       #2b2119;
  --ink-soft:  #6a5f53;
  --gold:      #a8875c;
  --gold-soft: #c0a67e;
  --brown:     #3a2a17;
  --line:      rgba(43,33,25,.14);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --sec: clamp(4.5rem, 10vw, 8.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.98rem, .35vw + .9rem, 1.06rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.01em;
  margin:0;
}
h2{ font-size:clamp(2.25rem, 5.5vw, 3.9rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); line-height:1.2; }
em{ font-style:italic; color:var(--gold); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.hidden{ position:absolute; left:-9999px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brown); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin:0 0 1.1rem;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.9rem;
  background:var(--brown); color:var(--paper);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  text-decoration:none; border:1px solid var(--brown); border-radius:0;
  cursor:pointer; transition:background .3s, color .3s, transform .3s;
}
.btn:hover{ background:transparent; color:var(--brown); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--brown); }
.btn--ghost:hover{ background:var(--brown); color:var(--paper); }
.btn--dark{ background:var(--brown); color:var(--paper); }
.btn--sm{ padding:.62rem 1.25rem; font-size:.68rem; }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, box-shadow .35s, padding .35s;
  padding:.6rem 0;
}
.nav.is-stuck{ background:rgba(239,237,232,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }

/* sobre o hero (antes de rolar) o menu fica claro */
.nav:not(.is-stuck){ color:var(--paper); text-shadow:0 1px 12px rgba(24,18,12,.55); }
.nav:not(.is-stuck) .nav__brand-sub{ color:var(--gold-soft); }
.nav:not(.is-stuck) .nav__cta{ background:transparent; color:var(--paper); border-color:rgba(247,246,243,.6); text-shadow:none; }
.nav:not(.is-stuck) .nav__cta:hover{ background:var(--paper); color:var(--brown); }
.nav:not(.is-stuck) .nav__toggle{ filter:drop-shadow(0 1px 3px rgba(24,18,12,.75)); }
.nav:not(.is-stuck) .nav__toggle span{ background:var(--paper); }

.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.nav__brand{ text-decoration:none; line-height:1; margin-right:auto; }
.nav__brand-name{ display:block; font-family:var(--serif); font-size:1.4rem; letter-spacing:.02em; }
.nav__brand-sub{ display:block; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:.25rem; }

.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  text-decoration:none; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  position:relative; padding-bottom:.2rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s;
}
.nav__links a:hover::after{ width:100%; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer;
}
.nav__toggle span{ display:block; height:1px; width:24px; background:var(--ink); transition:transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__mobile{ display:none; }

@media (max-width:860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .nav{ background:rgba(239,237,232,.94); backdrop-filter:blur(10px); }
  /* altura controlada por JS (main.js) para evitar valores mágicos */
  .nav__mobile{
    display:block; height:0; overflow:hidden;
    transition:height .35s ease;
  }
  .nav__mobile-inner{ display:flex; flex-direction:column; }
  .nav__mobile-inner > a{
    text-decoration:none; padding:.9rem var(--pad);
    font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
    border-top:1px solid var(--line);
  }
  .nav__mobile-inner > a:first-child{ margin-top:.6rem; }
  .nav__mobile-cta{ color:var(--gold); }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr;
  align-items:end;
  padding:8rem 0 clamp(2.5rem,6vw,5rem);
}
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(28,20,13,.72) 0%, rgba(28,20,13,.42) 42%, rgba(28,20,13,.05) 75%),
    linear-gradient(to top, rgba(28,20,13,.75) 0%, rgba(28,20,13,.25) 45%, rgba(28,20,13,.35) 100%);
}
.hero__panel{
  position:relative;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  color:var(--paper);
}
.hero__panel .eyebrow{ color:var(--gold-soft); }
.hero__title{
  font-size:clamp(3.1rem, 9.5vw, 7rem);
  letter-spacing:.005em;
  margin-bottom:1.5rem;
}
.hero__title em{ color:var(--gold-soft); }
.hero__lead{
  max-width:34ch; font-size:clamp(1.02rem,1.4vw,1.2rem);
  color:rgba(247,246,243,.9); margin-bottom:2.2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__actions .btn{ background:var(--paper); color:var(--brown); border-color:var(--paper); }
.hero__actions .btn:hover{ background:transparent; color:var(--paper); }
.hero__actions .btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(247,246,243,.55); }
.hero__actions .btn--ghost:hover{ background:var(--paper); color:var(--brown); }

/* ---------------- sections ---------------- */
.section{ padding-block:var(--sec); }
.section--alt{ background:var(--bg-alt); }
.section__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

/* ---------------- sobre ---------------- */
.sobre__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){ .sobre__grid{ grid-template-columns:1.05fr 1fr; } }
.sobre__img{ margin:0; }
.sobre__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.sobre__text h2{ margin-bottom:1.6rem; }

.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0 0; padding:0; }
.pills li{
  border:1px solid var(--line); padding:.45rem 1rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------------- cards / serviços ---------------- */
.cards{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(1.8rem,3vw,2.5rem);
  transition:transform .35s, box-shadow .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -24px rgba(43,33,25,.4); }
.card--featured{ background:var(--brown); color:var(--paper); border-color:var(--brown); }
.card--featured em, .card--featured .card__num, .card--featured .card__price{ color:var(--gold-soft); }
.card--featured .card__list li::before{ background:var(--gold-soft); }
.card--featured .card__meta{ color:rgba(247,246,243,.7); border-color:rgba(247,246,243,.25); }
.card--featured .card__cta{ color:var(--gold-soft); }

.card__num{
  font-family:var(--serif); font-size:2.4rem; color:var(--gold);
  line-height:1; display:block; margin-bottom:.9rem;
}
.card h3{ margin-bottom:.7rem; }
.card__tag{
  display:block; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:.45rem;
}
.card--featured .card__tag{ color:var(--gold-soft); }
.card__price{
  font-family:var(--serif); font-size:1.9rem; color:var(--brown);
  margin:0 0 1.4rem;
}
.card__price span{ font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; color:var(--ink-soft); }
.card__price .card__prefix{
  display:block; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:.2rem;
}
.card--featured .card__price span{ color:rgba(247,246,243,.7); }

.card__list{ list-style:none; margin:0 0 1.6rem; padding:0; font-size:.92rem; }
.card__list li{ position:relative; padding-left:1.1rem; margin-bottom:.5rem; }
.card__list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:5px; background:var(--gold); border-radius:50%;
}
.card__meta{
  margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.card__cta{
  margin-top:1.1rem; text-decoration:none; color:var(--gold);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
}
.card__cta span{ display:inline-block; transition:transform .3s; }
.card__cta:hover span{ transform:translateX(5px); }

/* ---------------- projetos ---------------- */
.project{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:center;
  margin-bottom:clamp(3.5rem,8vw,7rem);
}
.project:last-child{ margin-bottom:0; }
.project.wrap{ max-width:1320px; }
@media (min-width:900px){
  .project{ grid-template-columns:1.45fr 1fr; }
  .project--rev .project__media{ order:2; }
  .project--rev .project__body{ order:1; }
}
.project__media{ margin:0; display:grid; gap:.85rem; }
.project__media img{
  width:100%; height:100%; object-fit:cover;
  cursor:zoom-in; transition:opacity .3s;
}
.project__media img:hover{ opacity:.9; }
.project__media img{ aspect-ratio:16/10; }
/* par de imagens: empilhadas, para não cortar a sala na vertical */
.project__media--pair{ grid-template-columns:1fr; }
.project__media--pair img:last-child{ aspect-ratio:4/3; object-position:center 45%; }

.project__num{
  font-family:var(--serif); font-size:2.2rem; line-height:1;
  color:var(--gold-soft); display:block; margin-bottom:.7rem;
}
.project__body h3{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:1.1rem; }
.project__body p{ color:var(--ink-soft); font-size:.96rem; }

/* ---------------- etapas ---------------- */
.etapas__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){ .etapas__grid{ grid-template-columns:1.4fr .8fr; } }
.etapas__grid h2{ margin-bottom:clamp(2.2rem,4vw,3.2rem); }
.etapas__art{ margin:0; position:sticky; top:7rem; }
.etapas__art img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:899px){ .etapas__art{ position:static; } }

.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  position:relative; padding-left:clamp(3.5rem,7vw,5rem);
  padding-bottom:2.4rem; margin-bottom:2.4rem;
  border-bottom:1px solid var(--line);
}
.steps li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.steps__num{
  position:absolute; left:0; top:-.35rem;
  font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem);
  color:var(--gold-soft); line-height:1;
}
.steps h3{ margin-bottom:.55rem; }
.steps p{ color:var(--ink-soft); font-size:.95rem; }
.steps a{ color:var(--gold); text-underline-offset:3px; }

/* ---------------- perfil ---------------- */
.perfil__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .perfil__grid{ grid-template-columns:.85fr 1.15fr; } }
.perfil__foto{ margin:0; position:relative; }
.perfil__foto::before{
  content:""; position:absolute; inset:auto auto -1.25rem -1.25rem;
  width:55%; height:55%; background:var(--bg-alt); z-index:0;
}
.perfil__foto img{ position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 20%; }
.perfil__text h2{ margin-bottom:1.6rem; }
.perfil__text p{ color:var(--ink-soft); }
.perfil__quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.3vw,1.65rem); line-height:1.4;
  color:var(--brown); border-left:2px solid var(--gold);
  padding-left:1.4rem; margin-top:2rem;
}

/* ---------------- contato ---------------- */
.contato{ background:var(--bg-alt); }
.contato__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:900px){ .contato__grid{ grid-template-columns:1fr 1fr; } }
.contato__intro h2{ margin-bottom:1.5rem; }
.contato__intro > p{ color:var(--ink-soft); max-width:38ch; }

.contato__list{ list-style:none; margin:2.4rem 0; padding:0; }
.contato__list li{ padding:1rem 0; border-top:1px solid var(--line); }
.contato__list li:last-child{ border-bottom:1px solid var(--line); }
.contato__list span{
  display:block; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.3rem;
}
.contato__list a{
  text-decoration:none; font-size:1.02rem; word-break:break-word;
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.contato__list a:hover{ border-color:var(--gold); }

.form{ background:var(--paper); padding:clamp(1.75rem,4vw,2.75rem); border:1px solid var(--line); }
.form__row{ margin-bottom:1.25rem; }
.form label{
  display:block; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem;
}
.form input, .form select, .form textarea{
  width:100%; padding:.8rem .9rem;
  font-family:var(--sans); font-size:.95rem; font-weight:300; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:0;
  transition:border-color .3s;
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--gold); outline:none; }
.form textarea{ resize:vertical; }
.form .btn{ width:100%; }

/* ---------------- footer ---------------- */
.footer{ background:var(--brown); color:rgba(247,246,243,.75); padding-block:3rem; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.footer__brand{
  font-family:var(--serif); font-size:1.5rem; color:var(--paper); margin:0 0 .3rem;
}
.footer__brand em{ color:var(--gold-soft); }
.footer__small{ font-size:.76rem; letter-spacing:.06em; margin:0; }
.footer__end{ display:flex; flex-direction:column; align-items:flex-end; gap:.85rem; text-align:right; }
.footer__ig{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--paper);
  font-size:.78rem; letter-spacing:.1em;
  transition:color .3s;
}
.footer__ig:hover{ color:var(--gold-soft); }
.footer__ig svg{ width:19px; height:19px; }
@media (max-width:640px){
  .footer__end{ align-items:flex-start; text-align:left; }
}

/* ---------------- whatsapp float ---------------- */
.whats{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:#25d366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4);
  transition:transform .3s;
}
.whats:hover{ transform:scale(1.08); }
.whats svg{ width:28px; height:28px; fill:currentColor; }

/* ---------------- lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:150;
  background:rgba(24,18,12,.94);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; }
.lightbox__close{
  position:absolute; top:1rem; right:1.25rem;
  background:none; border:0; color:#fff; font-size:2.6rem;
  line-height:1; cursor:pointer; padding:.25rem .6rem;
}

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .card:hover,.btn:hover,.whats:hover{ transform:none; }
}