/* =========================================================
   CUSTOM WOOD — v2 clean
   Base clara, tipografia editorial, foto como único "luxo".
   ========================================================= */

:root{
  --paper:   #FCFBF9;
  --tint:    #F4F1EC;
  --ink:     #17130F;
  --ink-2:   #1A1613;
  --muted:   #6B635B;
  --rule:    #E4DED5;
  --wood:    #7A4A28;
  --gold:    #C79A4B;
  --gold-lt: #E8CE94;

  --display: "Newsreader", Georgia, serif;
  --text:    "Archivo", system-ui, -apple-system, sans-serif;

  --maxw: 1160px;
  --gut:  clamp(20px, 5vw, 56px);
  /* recuo lateral único: mantém todas as faixas no mesmo eixo */
  --pad:  max(var(--gut), (100% - var(--maxw)) / 2);
  --gap:  clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--text);
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto neutraliza o atributo height do HTML, que venceria o aspect-ratio */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
}
.skip:focus{left:12px;top:12px}

/* ---------- tipografia base ---------- */
.h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.85rem, 3.6vw, 2.9rem);
  line-height:1.12;letter-spacing:-.015em;
  max-width:20ch;
}
.label{
  font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--wood);
  margin-bottom:1.1rem;
}
.label--light{color:var(--gold)}

/* ---------- botões e links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--text);font-weight:500;font-size:.92rem;
  padding:.85em 1.6em;border-radius:2px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.btn--lg{padding:1em 2em;font-size:.98rem}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--wood)}
.btn--gold{background:var(--gold);color:#1B1509}
.btn--gold:hover{background:var(--gold-lt)}

.link{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.94rem;font-weight:500;
  padding-bottom:2px;
  border-bottom:1px solid var(--rule);
  transition:border-color .3s, color .3s;
}
.link span{transition:transform .3s var(--ease)}
.link:hover{border-color:var(--wood);color:var(--wood)}
.link:hover span{transform:translateX(4px)}
.link--light{border-color:#3B342C;color:#D8D1C7}
.link--light:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .35s;
}
.topbar.is-stuck{border-bottom-color:var(--rule)}
.topbar__in{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.05rem var(--pad);
}
.mark{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.mark svg{flex:none}
.mark__txt{display:flex;flex-direction:column;line-height:1.1}
.mark__txt b{font-size:.95rem;font-weight:600;letter-spacing:.02em}
.mark__txt i{font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.menu{margin-left:auto;display:flex;gap:2.2rem}
.menu a{font-size:.9rem;color:var(--muted);transition:color .25s}
.menu a:hover{color:var(--ink)}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

.drawer{
  display:flex;flex-direction:column;
  padding:.5rem var(--pad) 1.6rem;
  border-top:1px solid var(--rule);
}
.drawer[hidden]{display:none}
.drawer a{padding:.9rem 0;border-bottom:1px solid var(--rule);font-size:1rem}

/* ---------- hero ---------- */
.hero{
  padding:clamp(2.5rem,6vh,4.5rem) var(--pad) var(--gap);
}
.hero__h1{
  font-family:var(--display);font-weight:200;
  font-size:clamp(2.4rem, 5.8vw, 4.4rem);
  line-height:1.04;letter-spacing:-.025em;
  margin-bottom:1.4rem;
}
.hero__h1 span{display:block}
.hero__h1 em{display:block;font-style:italic;font-weight:300;color:var(--wood)}
.hero__lead{color:var(--muted);font-size:1.05rem;max-width:46ch}
.hero__act{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem;margin-top:2.2rem}

.hero__shot{margin-top:clamp(2.5rem,6vw,4.5rem)}
.hero__shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 60%}

.facts{
  display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;
  margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--muted);
}
.facts b{font-weight:600;color:var(--ink)}

/* ---------- blocos ---------- */
.block{
  padding:0 var(--pad) var(--gap);
}
.block--tint{
  background:var(--tint);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-top:var(--gap);
}

.block__head{margin-bottom:clamp(2.5rem,5vw,3.8rem);max-width:60ch}
.block__intro{color:var(--muted);margin-top:1rem;max-width:52ch}

/* ---------- ambientes ---------- */
.rooms{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,6vw,5rem);
  border-top:1px solid var(--rule);
}
.rooms li{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.rooms h3{
  font-family:var(--display);font-weight:300;
  font-size:1.35rem;line-height:1.2;margin-bottom:.25rem;
}
.rooms p{color:var(--muted);font-size:.93rem}

/* ---------- método (assinatura) ---------- */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.method li{
  padding:1.6rem clamp(1rem,2.2vw,1.8rem) 0;
  border-top:1px solid #DAD3C8;
}
.method li:first-child{padding-left:0}
.method li:last-child{padding-right:0}
.method h3{
  font-family:var(--display);font-weight:200;font-style:italic;
  font-size:clamp(1.7rem,2.8vw,2.35rem);
  line-height:1;letter-spacing:-.01em;color:var(--wood);
  margin-bottom:.9rem;
}
.method__tag{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin-bottom:.7rem;
}
.method li p:last-child{color:var(--muted);font-size:.9rem}

/* ---------- projetos ---------- */
.work{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.4vw,2rem);
}
.work__item--a{grid-column:span 7}
.work__item--b{grid-column:span 5}
.work__item--c{grid-column:span 12}
.work__item img{width:100%;object-fit:cover}
/* enquadramentos escolhidos por foto: tiram o teto, mostram a marcenaria */
.work__item--a img,.work__item--b img{height:clamp(280px, 31vw, 430px)}
.work__item--a img{object-position:center 92%}
.work__item--b img{object-position:58% 76%}
.work__item--c img{aspect-ratio:21/9;object-position:center 86%}
.work__item figcaption{
  margin-top:.85rem;font-size:.85rem;color:var(--muted);
}
.work__item figcaption b{
  display:block;font-weight:600;color:var(--ink);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:.2rem;
}
.work__more{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- empresa ---------- */
.about{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.about__body p{color:var(--muted);max-width:48ch}
.about__body p + p{margin-top:1.1rem}

.say{
  margin-top:var(--gap);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid #DAD3C8;
  max-width:min(100%, 640px);
}
.say blockquote{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.32;
  letter-spacing:-.01em;
}
.say figcaption{margin-top:1.2rem;font-size:.82rem;color:var(--muted)}

/* ---------- fecho escuro: contato + rodapé ---------- */
.close{background:var(--ink-2);color:#E7E2DA}

.cta{
  padding:var(--gap) var(--pad) clamp(3.5rem,7vw,5rem);
}
.cta__h2{
  font-family:var(--display);font-weight:200;
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.08;letter-spacing:-.02em;
}
.cta__lead{color:#A69D91;margin-top:1.3rem;max-width:44ch}
.cta__act{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem}

.foot{border-top:1px solid #362F27}
.foot__in{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:2.5rem;padding:clamp(3rem,6vw,4rem) var(--pad);
}
.mark--gold{color:var(--gold)}
.mark--gold .mark__txt b{color:#E7E2DA}
.mark--gold .mark__txt i{color:var(--gold)}
.foot__brand p{margin-top:1.2rem;font-size:.88rem;color:#8E867B;max-width:34ch}
.foot__col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot__col h3{
  font-family:var(--text);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.35rem;
}
.foot__col a{font-size:.9rem;color:#A69D91;transition:color .25s}
.foot__col a:hover{color:#E7E2DA}
.foot__bar{
  padding:1.4rem var(--pad) 2rem;
  border-top:1px solid #362F27;
  font-size:.76rem;color:#7C746A;
}

/* ---------- WhatsApp flutuante ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:200;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#25A85A;color:#fff;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), background .3s;
}
.wa:hover{transform:translateY(-2px);background:#1E8F4C}

/* ---------- reveal ---------- */
/* estado inicial só existe com JS ativo — sem JS o conteúdo aparece normalmente */
.js .up{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .up.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .up{opacity:1;transform:none;transition:none}
  .link span,.btn,.wa{transition:none}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:900px){
  .menu,.topbar__cta{display:none}
  .burger{display:flex;margin-left:auto}
  .method{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .method li{padding-left:0;padding-right:clamp(1rem,4vw,2rem)}
  .method li:nth-child(even){padding-right:0}
  .about{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .hero__shot img{aspect-ratio:4/3}
  .rooms{grid-template-columns:1fr}
  .method{grid-template-columns:1fr;row-gap:2rem}
  .method li{padding-right:0}
  .work__item--a,.work__item--b,.work__item--c{grid-column:span 12}
  .work__item--a img,.work__item--b img,.work__item--c img{height:auto;aspect-ratio:4/3}
  .say{max-width:none}
  .foot__in{grid-template-columns:1fr;gap:2rem}
  .hero__act .btn,.cta__act .btn{width:100%}
  .facts{gap:.3rem 1.6rem}
  /* espaço para o botão flutuante não cobrir o texto */
  .foot__bar{padding-bottom:5.5rem}
}