/* ============ TOKENS ============ */
:root{
  color-scheme: dark;
  --ink:#16110D; --ink-raise:#1E1813; --ink-deep:#100C09;
  --hair:#332920; --hair-soft:#241D17;
  --bone:#EFE6DA; --bone-2:#A79A8B; --bone-3:#7A6E62;
  --copper:#C0714A; --copper-hi:#E2996E; --copper-dim:#7C4A31;
  --ff-display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --ff-body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --step--2:clamp(.68rem,.66rem + .1vw,.74rem);
  --step--1:clamp(.78rem,.74rem + .18vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.9rem);
  --step-4:clamp(2.7rem,1.7rem + 4.6vw,6.2rem);
  --pad:clamp(1.15rem,5vw,2.5rem);
  --gap:clamp(1rem,2.2vw,1.75rem);
  --sec:clamp(4.5rem,11vw,9.5rem);
  --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--ff-body); font-size:var(--step-0); font-weight:400;
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* color:transparent esconde o texto alternativo se a foto falhar ao carregar;
   o alt continua no codigo para busca e leitor de tela. */
img{max-width:100%; display:block; color:transparent}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--ff-display); font-weight:400; line-height:1.04; margin:0; text-wrap:balance; letter-spacing:-.012em}
h1 em,h2 em,h3 em{font-style:italic; color:var(--copper-hi)}
p{margin:0}
:focus-visible{outline:2px solid var(--copper-hi); outline-offset:3px; border-radius:2px}
::selection{background:var(--copper); color:var(--ink)}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
section[id]{scroll-margin-top:clamp(104px,12vw,140px)}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--copper); color:#1A1009; padding:.8rem 1.2rem; font-weight:700}
.skip:focus{left:1rem; top:1rem}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3); font-weight:600; margin:0 0 1.5rem;
}
.eyebrow::before{content:""; width:2.2rem; height:1px; background:var(--copper); flex:none}

.rule{height:1px; background:var(--hair); position:relative; border:0; margin:0}
.rule::after{content:""; position:absolute; inset:0; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rule.in::after{transform:scaleX(1)}

.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .rule::after{transform:scaleX(1); transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--ff-body); font-size:var(--step--1); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  padding:1rem 1.7rem; border:1px solid var(--copper); background:var(--copper); color:#1A1009;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover{background:var(--copper-hi); border-color:var(--copper-hi); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--bone); border-color:var(--hair)}
.btn--ghost:hover{background:transparent; color:var(--copper-hi); border-color:var(--copper)}

/* ============ HEADER ============ */
/* NB: o backdrop-filter fica no ::before, nunca no .hdr — no .hdr ele criaria
   bloco de contencao e o menu mobile (position:fixed) vazaria na tela. */
.hdr{position:fixed; inset:0 0 auto; z-index:60; transition:border-color .35s ease; border-bottom:1px solid transparent}
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(18,14,10,.9); backdrop-filter:blur(14px) saturate(1.2);
  opacity:0; transition:opacity .35s ease;
}
.hdr.stuck::before{opacity:1}
.hdr.stuck{border-bottom-color:var(--hair-soft)}
.hdr--solid::before{opacity:1}
.hdr--solid{border-bottom-color:var(--hair-soft)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:clamp(78px,9vw,104px)}
.brand{display:grid; gap:.2rem; line-height:1; font-family:var(--ff-display); letter-spacing:.01em}
.brand b{display:block; font-weight:400; font-size:clamp(1.55rem,3.1vw,2.1rem); color:var(--bone)}
.brand span{display:block; font-family:var(--ff-body); font-size:clamp(.6rem,1.05vw,.7rem); letter-spacing:.42em;
  text-transform:uppercase; color:var(--copper); font-weight:700; text-indent:.06em}
.ft .brand b{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.nav{display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.1rem)}
.nav a{font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--bone-2); transition:color .2s}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--copper-hi)}
.hdr .btn{padding:.72rem 1.15rem}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--hair); cursor:pointer; color:var(--bone)}
.burger span{display:block; width:18px; height:1px; background:currentColor; position:relative; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor; transition:transform .3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1200px){
  .nav{position:fixed; inset:0; flex-direction:column; justify-content:center; gap:1.6rem; background:var(--ink-deep); transform:translateY(-100%); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .nav.open{transform:none}
  .nav a{font-size:1.3rem; letter-spacing:.06em}
  .burger{display:flex; position:relative; z-index:2}
  .hdr__cta{display:none}
}

/* ============ HERO (home) ============ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(1.02) contrast(1.03)}
.hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,12,9,.74) 0%,rgba(16,12,9,.3) 28%,rgba(16,12,9,.62) 52%,rgba(16,12,9,.9) 80%,var(--ink) 100%)}
.hero__in{position:relative; z-index:2; width:100%; padding-block:clamp(3rem,9vw,6rem)}
.hero h1{font-size:var(--step-4); max-width:19ch; margin-bottom:1.6rem}
.hero__sub{max-width:46ch; color:var(--bone-2); font-size:var(--step-1); line-height:1.55; font-weight:300}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem}
.hero__tag{display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.9rem; font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--copper-hi); font-weight:600}
.hero__tag::before{content:""; width:2.2rem; height:1px; background:var(--copper)}

/* ============ PAGE HERO (ambientes) ============ */
.phero{position:relative; padding-top:clamp(134px,16vw,205px); padding-bottom:clamp(3rem,7vw,5.5rem); overflow:hidden}
.phero__bg{position:absolute; inset:0; z-index:0}
.phero__bg img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03)}
.phero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,12,9,.86) 0%,rgba(16,12,9,.72) 45%,rgba(16,12,9,.94) 88%,var(--ink) 100%)}
.phero__in{position:relative; z-index:2}
.phero h1{font-size:var(--step-3); max-width:18ch; margin-bottom:1.3rem}
.phero p{max-width:56ch; color:var(--bone-2); font-size:var(--step-1); font-weight:300; line-height:1.55}
.phero .hero__cta{margin-top:2.2rem}
.crumb{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:var(--step--1); color:var(--bone-3); margin-bottom:1.6rem; letter-spacing:.06em}
.crumb a:hover{color:var(--copper-hi)}
.crumb span[aria-current]{color:var(--bone-2)}
.crumb i{font-style:normal; color:var(--copper-dim)}

/* ============ STRIP ============ */
.strip{border-block:1px solid var(--hair-soft); background:var(--ink-deep)}
.strip ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr)}
.strip li{padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1rem,2.2vw,1.9rem); border-left:1px solid var(--hair-soft)}
.strip li:first-child{border-left:0}
.strip dt{font-family:var(--ff-display); font-size:var(--step-1); color:var(--bone); margin-bottom:.3rem}
.strip dd{margin:0; font-size:var(--step--1); color:var(--bone-3); line-height:1.5}
@media (max-width:860px){ .strip ul{grid-template-columns:repeat(2,1fr)} .strip li:nth-child(3){border-left:0} .strip li:nth-child(n+3){border-top:1px solid var(--hair-soft)} }
@media (max-width:460px){ .strip ul{grid-template-columns:1fr} .strip li{border-left:0} .strip li+li{border-top:1px solid var(--hair-soft)} }

/* ============ SECTION HEAD ============ */
.head{display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.head h2{font-size:var(--step-3); max-width:15ch}
.head p{max-width:40ch; color:var(--bone-2); font-weight:300}
@media (max-width:820px){ .head{grid-template-columns:1fr} }

/* ============ CARDS DE AMBIENTE ============ */
.amb{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
@media (max-width:960px){ .amb{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .amb{grid-template-columns:1fr} }
.card{position:relative; display:block; overflow:hidden; background:var(--ink-raise); aspect-ratio:4/5}
.card img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03) brightness(.86); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease}
.card:hover img,.card:focus-visible img{transform:scale(1.05); filter:saturate(1.06) contrast(1.04) brightness(1)}
.card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(14,10,7,.9) 100%); pointer-events:none}
.card__t{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.5rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
.card__t h3{font-size:var(--step-1)}
.card__t small{display:block; font-size:var(--step--1); color:var(--bone-3); margin-top:.25rem; font-family:var(--ff-body)}
.card__arrow{flex:none; color:var(--copper-hi); transition:transform .35s ease; font-size:1.1rem}
.card:hover .card__arrow{transform:translateX(5px)}

/* ============ GALERIA — LEGENDA ABAIXO DA FOTO ============ */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.chip{
  font-family:var(--ff-body); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:.62rem 1.1rem; border:1px solid var(--hair); background:transparent; color:var(--bone-3); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.chip:hover{color:var(--bone); border-color:var(--bone-3)}
.chip[aria-pressed="true"]{color:var(--copper-hi); border-color:var(--copper); background:rgba(192,113,74,.09)}

.gal{display:grid; gap:clamp(1.6rem,3.2vw,2.8rem) var(--gap)}
.gal--4{grid-template-columns:repeat(4,1fr)}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gal--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1080px){ .gal--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .gal--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .gal--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gal--4,.gal--3,.gal--2{grid-template-columns:1fr} }

.gal figure{margin:0; display:flex; flex-direction:column; gap:.85rem}
.gal figure[hidden]{display:none}
.ph{position:relative; overflow:hidden; background:var(--ink-raise); aspect-ratio:4/3; cursor:zoom-in}
.gal--2 .ph{aspect-ratio:3/2}
.ph img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03) brightness(.92); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s}
.ph:hover img,.ph:focus-visible img{transform:scale(1.04); filter:saturate(1.06) brightness(1)}
.ph::after{
  content:"⤢"; position:absolute; right:.75rem; bottom:.65rem; z-index:2;
  font-size:.85rem; color:var(--bone); background:rgba(16,12,9,.62); padding:.2rem .45rem;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.ph:hover::after{opacity:1}
.gal figcaption{border-top:1px solid var(--hair-soft); padding-top:.85rem}
.gal figcaption b{
  display:block; font-family:var(--ff-body); font-weight:600; font-size:var(--step-0);
  color:var(--bone); margin-bottom:.3rem; line-height:1.3;
}
.gal figcaption span{display:block; font-size:var(--step--1); color:var(--bone-3); line-height:1.55}
.gal figcaption em{
  display:block; font-style:normal; font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase;
  color:var(--copper-dim); font-weight:700; margin-bottom:.45rem;
}

/* ============ MODELOS DE REFERENCIA ============ */
/* Bloco propositalmente distinto do portfolio: sao referencias de mercado para o
   cliente apontar o que quer, NAO projetos executados pela Seleto. */
.refs{background:var(--ink-deep); border-block:1px solid var(--hair-soft)}
.aviso{
  display:flex; gap:.9rem; align-items:flex-start; max-width:78ch;
  padding:1.05rem 1.25rem; border:1px dashed var(--hair); background:rgba(192,113,74,.05);
  font-size:var(--step--1); color:var(--bone-2); line-height:1.6;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.aviso b{color:var(--bone)}
.aviso::before{
  content:"!"; flex:none; width:1.5rem; height:1.5rem; display:grid; place-items:center;
  border:1px solid var(--copper); color:var(--copper-hi); font-weight:700; font-size:.8rem;
}
.gal--ref .ph{aspect-ratio:4/3}
.gal--ref .cod{
  position:absolute; z-index:3; top:0; left:0; padding:.42rem .7rem;
  background:var(--copper); color:#1A1009; font-size:var(--step--2);
  font-weight:700; letter-spacing:.14em;
}
.pedir{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
  font-size:var(--step--2); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--copper-hi); border-bottom:1px solid var(--copper-dim); padding-bottom:.15rem;
  transition:color .2s, border-color .2s;
}
.pedir:hover{color:var(--bone); border-color:var(--copper)}

/* ============ SPLIT EDITORIAL ============ */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:920px){ .split{grid-template-columns:1fr} }
.split__media{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
.split__media figure{margin:0; overflow:hidden; background:var(--ink-raise)}
.split__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; filter:saturate(1.03) contrast(1.03)}
.split__media figure:first-child{grid-row:span 2}
.split__media figure:first-child img{aspect-ratio:3/5.2}
.split h2{font-size:var(--step-3); margin-bottom:1.4rem}
.split p+p{margin-top:1.1rem}
.split p{color:var(--bone-2); font-weight:300; max-width:52ch}
/* Texto corrido justificado. O hyphens:auto (com lang="pt-BR" no <html>) e o que
   evita os buracos entre palavras que a justificacao abre em coluna estreita.
   Seletor com > para pegar so os paragrafos do corpo, nunca os textos curtos
   da lista .marks nem o rotulo .eyebrow. */
.split > div > p:not(.eyebrow){
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;
}
.marks{list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:0}
.marks li{display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--hair-soft); align-items:baseline}
.marks li:last-child{border-bottom:1px solid var(--hair-soft)}
.marks dfn{font-style:normal; font-family:var(--ff-display); color:var(--copper-hi); font-size:var(--step-0); min-width:2.2rem}
.marks p{font-size:var(--step--1); color:var(--bone-2); line-height:1.55}
.marks b{color:var(--bone); font-weight:600; display:block; font-size:var(--step-0); font-family:var(--ff-body)}

/* ============ SOLUCOES (tipologias) ============ */
.sol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair)}
@media (max-width:900px){ .sol{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .sol{grid-template-columns:1fr} }
.sol li{padding:clamp(1.4rem,2.8vw,2rem) clamp(1rem,2vw,1.6rem) clamp(1.6rem,3vw,2.4rem); border-left:1px solid var(--hair-soft)}
.sol li:first-child{border-left:0}
@media (max-width:900px){ .sol li:nth-child(odd){border-left:0} .sol li:nth-child(n+3){border-top:1px solid var(--hair-soft)} }
@media (max-width:560px){ .sol li{border-left:0} .sol li+li{border-top:1px solid var(--hair-soft)} }
.sol h3{font-size:var(--step-1); margin-bottom:.5rem}
.sol p{font-size:var(--step--1); color:var(--bone-3); line-height:1.6}

/* ============ PROCESSO ============ */
.proc{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--hair); margin:0; padding:0}
@media (max-width:1000px){ .proc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .proc{grid-template-columns:1fr} }
.proc>li{list-style:none; padding:clamp(1.6rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem) clamp(2rem,4vw,3rem); border-left:1px solid var(--hair-soft)}
.proc>li:first-child{border-left:0}
@media (max-width:1000px){ .proc>li:nth-child(odd){border-left:0} .proc>li:nth-child(n+3){border-top:1px solid var(--hair-soft)} }
@media (max-width:540px){ .proc>li{border-left:0} .proc>li+li{border-top:1px solid var(--hair-soft)} }
.proc .n{font-family:var(--ff-display); font-size:var(--step-2); color:var(--copper); display:block; margin-bottom:.9rem; font-variant-numeric:tabular-nums}
.proc h3{font-size:var(--step-1); margin-bottom:.55rem}
.proc p{font-size:var(--step--1); color:var(--bone-3); line-height:1.6}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font-family:var(--ff-display); font-size:var(--step-1); color:var(--bone); transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--copper-hi)}
.faq summary::after{
  content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--ff-body); font-size:1.5rem; color:var(--copper); line-height:1; transition:transform .3s;
}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 clamp(0rem,6vw,4rem) 1.5rem 0; color:var(--bone-2); font-weight:300; max-width:70ch}
.faq details>div p+p{margin-top:.8rem}

/* ============ DEPOIMENTOS ============ */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
@media (max-width:900px){ .quotes{grid-template-columns:1fr} }
.quote{border:1px dashed var(--hair); padding:clamp(1.5rem,3vw,2.1rem); background:var(--ink-raise); display:flex; flex-direction:column; gap:1rem; min-height:190px; justify-content:space-between; margin:0}
.quote p{font-family:var(--ff-display); font-size:var(--step-1); color:var(--bone-3); font-style:italic; line-height:1.35}
.quote footer{font-size:var(--step--1); color:var(--copper-dim); letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.slotnote{margin-top:1.5rem; font-size:var(--step--1); color:var(--bone-3); max-width:62ch}

/* ============ CONTATO ============ */
.contact{background:var(--ink-deep); border-top:1px solid var(--hair-soft)}
.contact__in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.4rem,6vw,5rem)}
@media (max-width:900px){ .contact__in{grid-template-columns:1fr} }
.contact h2{font-size:var(--step-3); margin-bottom:1.3rem}
.contact__lead{color:var(--bone-2); font-weight:300; max-width:42ch; margin-bottom:2.2rem}
.info{list-style:none; margin:0; padding:0; display:grid; gap:0}
.info li{padding:1.1rem 0; border-top:1px solid var(--hair-soft)}
.info li:last-child{border-bottom:1px solid var(--hair-soft)}
.info dt{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); margin-bottom:.3rem; font-weight:600}
.info dd{margin:0; font-size:var(--step-0); color:var(--bone)}
.info a:hover{color:var(--copper-hi)}
.info dl{margin:0}
form{display:grid; gap:1.05rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1.05rem}
@media (max-width:560px){ .row{grid-template-columns:1fr} }
label{display:grid; gap:.45rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); font-weight:600}
input,select,textarea{font-family:var(--ff-body); font-size:var(--step-0); color:var(--bone); background:var(--ink); border:1px solid var(--hair); padding:.92rem 1rem; width:100%; transition:border-color .2s, background .2s}
input:focus,select:focus,textarea:focus{border-color:var(--copper); outline:none; background:var(--ink-raise)}
textarea{resize:vertical; min-height:104px; line-height:1.55}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
form .btn{margin-top:.4rem; justify-self:start}
.formnote{font-size:var(--step--1); color:var(--bone-3)}

/* ============ OUTROS AMBIENTES ============ */
.outros{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap)}
@media (max-width:1000px){ .outros{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .outros{grid-template-columns:repeat(2,1fr)} }
.outros a{position:relative; overflow:hidden; background:var(--ink-raise); aspect-ratio:1; display:block}
.outros img{width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(1.02); transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s}
.outros a:hover img{transform:scale(1.06); filter:brightness(.8)}
.outros b{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1rem; font-family:var(--ff-display); font-weight:400; font-size:var(--step-0); background:linear-gradient(180deg,transparent,rgba(14,10,7,.88))}

/* ============ FOOTER ============ */
.ft{border-top:1px solid var(--hair-soft); padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.ft__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(1.8rem,4vw,3rem)}
@media (max-width:900px){ .ft__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ft__grid{grid-template-columns:1fr} }
.ft h4{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); margin:0 0 1.1rem; font-family:var(--ff-body); font-weight:600}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.ft li a,.ft address{font-size:var(--step--1); color:var(--bone-2); font-style:normal; line-height:1.65}
.ft li a:hover{color:var(--copper-hi)}
.ft__brand p{margin-top:1rem; font-size:var(--step--1); color:var(--bone-3); max-width:34ch}
.ft__bot{margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--hair-soft); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.75rem; color:var(--bone-3)}
.social{display:flex; gap:1.4rem}
.social a{font-size:var(--step--1); color:var(--bone-2)}
.social a:hover{color:var(--copper-hi)}

/* ============ FAB ============ */
.fab{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:70;
  display:flex; align-items:center; gap:.6rem; padding:.95rem 1.3rem;
  background:var(--copper); color:#1A1009; font-size:var(--step--1); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; box-shadow:0 10px 34px rgba(0,0,0,.5);
  transform:translateY(calc(100% + 3rem)); transition:transform .45s cubic-bezier(.2,.7,.2,1), background .25s;
}
.fab.show{transform:none}
.fab:hover{background:var(--copper-hi)}
.fab svg{width:17px; height:17px; fill:currentColor; flex:none}
@media (max-width:560px){ .fab span{display:none} .fab{padding:1.05rem; border-radius:50%} }

/* ============ LIGHTBOX ============ */
.lb{position:fixed; inset:0; z-index:90; background:rgba(10,7,5,.96); display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem)}
.lb[open]{display:flex}
.lb img{max-width:100%; max-height:82svh; object-fit:contain}
.lb__x{position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); width:48px; height:48px; background:none; border:1px solid var(--hair); color:var(--bone); font-size:1.3rem; cursor:pointer; line-height:1}
.lb__x:hover{border-color:var(--copper); color:var(--copper-hi)}
.lb__cap{position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%); width:min(70ch,92%); text-align:center; font-size:var(--step--1); color:var(--bone-2); line-height:1.5}
.lb__cap b{display:block; color:var(--bone); font-weight:600; margin-bottom:.25rem}