/* ==========================================================================
   MS Engenharia e Construção — landing page
   Design system: design-system/tokens.md (paleta e tipografia da marca real)
   Forma-assinatura: o ANEL do monograma M·S — arco no hero, topo em arco nos
   cards de obra, anéis que desenham no CTA.

   ARQUITETURA DE TELAS: cada seção ocupa uma tela cheia (100svh) e encaixa por
   scroll-snap. Regra que manda: a seção CRESCE se o conteúdo não couber — usamos
   min-height, nunca height. Nada é cortado.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#12100E;
  --ink-2:#1B1815;
  --ink-3:#262119;
  --paper:#F5F1EA;
  --paper-2:#EBE5DA;
  /* "brass" mantém o nome do token, mas agora carrega a paleta do manual de marca
     (degradê #947468 → #DCD0B9, grafite #3A3938): ponto 40% do degradê e mocha escurecido (AA) */
  --brass:#B19988;
  --brass-deep:#765D53;
  --wood:#6B5643;
  --muted-d:#A79C8E;
  --muted-l:#5E574E;

  --hair-d:1px solid var(--ink-3);
  --hair-l:1px solid rgba(18,16,14,.14);

  --ff-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --ff-body:"Figtree","Segoe UI",system-ui,sans-serif;

  --ease:cubic-bezier(.16,.84,.28,1);
  --header-h:80px;
  --arch:170px;
  --arch-card:96px;

  /* altura útil de uma tela, descontando o header fixo */
  --tela:100vh;
  --util:calc(var(--tela) - var(--header-h));
}
@supports (height:100svh){ :root{ --tela:100svh } }

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- a tela ----------
   min-height (não height): se o conteúdo for maior que a viewport, a seção
   cresce em vez de cortar. O snap é 'proximity', que sugere o encaixe sem
   prender o usuário. */
.tela{
  min-height:var(--tela);
  padding-top:var(--header-h);
  padding-bottom:clamp(24px,4vh,56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  position:relative;
}
.tela > .container{width:100%}

@media (min-height:660px) and (min-width:900px){
  html{scroll-snap-type:y proximity}
}

/* Smooth scroll com inércia leve (Lenis, só desktop com mouse/trackpad).
   Com o Lenis ativo, o snap sai: os dois juntos brigam e a rolagem trepida.
   Regras mínimas do lenis.css, sem ".lenis-smooth iframe{pointer-events:none}". */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto;scroll-snap-type:none}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- tipografia ---------- */
h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:pretty;
}
/* o vh dentro do clamp faz o título encolher em telas baixas: o hero nunca corta */
h1{font-size:clamp(2.1rem,min(5.6vw,7.4vh),4.3rem);font-weight:200}
h2{font-size:clamp(1.7rem,min(3.6vw,5vh),2.85rem);font-weight:200}
h3{font-size:clamp(1.08rem,1.9vw,1.32rem);font-weight:400;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.overline{
  font-family:var(--ff-body);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 clamp(12px,1.8vh,20px);
  display:flex;
  align-items:center;
  gap:12px;
}
.overline .ring{
  width:9px;height:9px;border:1px solid var(--brass);border-radius:50%;flex:none;
}
.lead{
  font-size:clamp(.98rem,1.25vw,1.12rem);
  color:var(--muted-d);
  max-width:56ch;
}
.lead strong{color:var(--paper);font-weight:500}

.is-light{background:var(--paper);color:var(--ink)}
.is-light .lead{color:var(--muted-l)}
.is-light .lead strong{color:var(--ink)}
.is-light .overline{color:var(--brass-deep)}
.is-light .overline .ring{border-color:var(--brass-deep)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:2px;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  background:transparent;            /* <button> herda ButtonFace do navegador */
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn-primary{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn-primary:hover{background:var(--paper);border-color:var(--paper)}
/* em fundo claro o areia some no creme: o botão usa o mocha escuro da marca (texto creme 5,4:1) */
.is-light .btn-primary{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--paper)}
.is-light .btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ghost{border-color:rgba(245,241,234,.32);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(245,241,234,.07)}
.is-light .btn-ghost{border-color:rgba(18,16,14,.28);color:var(--ink)}
.is-light .btn-ghost:hover{border-color:var(--ink);background:rgba(18,16,14,.05)}
.btn .arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

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

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);
  background:var(--ink);
  border-bottom:var(--hair-d);
}
.site-header .container{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
/* submarca oficial (anel com o nome); o nome já está no selo, por isso não há texto ao lado */
.brand img{width:auto;height:58px}
.foot-brand .brand img{height:90px}

.nav{display:flex;align-items:center;gap:32px}
.nav a{
  position:relative;text-decoration:none;font-size:14.5px;font-weight:500;
  color:var(--muted-d);padding:6px 0;
  transition:color .4s var(--ease);
}
.nav a:hover{color:var(--paper)}
.nav a::before{
  content:"";position:absolute;left:-16px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;
  border:1px solid var(--brass);border-radius:50%;
  opacity:0;transform:scale(.4);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.nav a.is-active{color:var(--paper)}
.nav a.is-active::before{opacity:1;transform:scale(1)}

.header-cta{flex:none}
.burger{
  display:none;width:44px;height:44px;flex:none;
  background:none;border:var(--hair-d);border-radius:2px;
  align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:18px;height:1px;background:var(--paper);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:var(--paper);
  transition:transform .4s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ==========================================================================
   1. HERO — cabe inteiro na tela; credenciais entram como régua no rodapé
   ========================================================================== */
.hero{overflow:hidden;isolation:isolate}
/* foto real de obra ao fundo, desfocada e em baixa opacidade: tira o chapado do
   fundo sem disputar leitura com o texto. É decorativa (não substitui a figura). */
.hero::before{
  content:"";position:absolute;inset:-40px;z-index:-2;
  background:url("../img/lareira-02.webp") center 38% / cover no-repeat;
  filter:blur(38px) saturate(.85);
  opacity:.21;
  transform:scale(1.06);
}
/* véu que devolve o contraste do texto e concentra a luz à direita */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(192,142,82,.10) 0%, transparent 62%),
    linear-gradient(100deg, var(--ink) 26%, rgba(18,16,14,.72) 58%, rgba(18,16,14,.55) 100%);
}
.hero-grid{
  display:grid;grid-template-columns:1fr .74fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  flex:1;
}
.hero h1 .em{font-style:normal;color:var(--brass)}
.hero .lead{margin-top:clamp(14px,2.2vh,26px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3vh,36px)}

.arch-fig{
  position:relative;justify-self:end;
  /* 0.8 = 4/5: a altura disponível vira largura, para o arco (SVG) e a foto
     terem sempre a MESMA caixa. Limitar por max-height no frame encolhia só a
     foto e o arco ficava maior que ela. */
  width:min(100%, 400px, 30vw, calc((var(--util) - 235px) * 0.8));
}
.arch-fig .frame{
  position:relative;
  border-radius:var(--arch) var(--arch) 2px 2px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--ink-2);
}
.arch-fig .frame img{width:100%;height:100%;object-fit:cover}
.arch-fig svg{
  position:absolute;inset:-16px -16px auto -16px;
  width:calc(100% + 32px);height:calc(100% + 32px);
  max-width:none;            /* o img,svg{max-width:100%} global cortava o arco
                                para a largura da foto e o deslocava 16px */
  pointer-events:none;overflow:visible;
}
.arch-fig svg path{
  fill:none;stroke:var(--brass);stroke-width:1;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.6s var(--ease) .35s;
}
.arch-fig.drawn svg path{stroke-dashoffset:0}

/* régua de credenciais — dentro do hero, não como seção própria */
.hero-creds{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--hair-d);
  margin-top:clamp(20px,3.4vh,44px);
  flex:none;
}
.hero-creds div{
  padding:clamp(14px,2.2vh,22px) 22px;
  border-left:var(--hair-d);
  display:flex;flex-direction:column;gap:3px;
}
.hero-creds div:first-child{border-left:0;padding-left:0}
.hero-creds b{
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.42rem);color:var(--paper);line-height:1.15;
}
.hero-creds span{font-size:12.5px;color:var(--muted-d);line-height:1.35}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.split.rev .split-media{order:2}
.split-media{
  overflow:hidden;border-radius:2px;background:var(--ink-2);
  aspect-ratio:4/5;max-height:calc(var(--util) - 110px);
}
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.split-media img.pos-top{object-position:center 18%}
.split-body h2{margin-bottom:clamp(14px,2.4vh,24px)}
.split-body .lead + .lead{margin-top:.9em}
.quote-inline{
  margin-top:clamp(18px,3vh,30px);padding-left:20px;border-left:2px solid var(--brass);
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.38;color:var(--paper);
}
.is-light .quote-inline{color:var(--ink);border-left-color:var(--brass-deep)}

/* ---------- faixa de imagem em tela cheia ---------- */
.band{
  position:relative;overflow:hidden;padding:0;
  min-height:var(--tela);
  background:var(--ink-2);
  scroll-snap-align:start;
  display:flex;align-items:flex-end;
}
.band .band-img{
  position:absolute;inset:-10% 0;width:100%;height:120%;
  object-fit:cover;will-change:transform;z-index:0;
}
.band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.15) 42%,rgba(18,16,14,.82) 100%);
}
.band figcaption{position:relative;z-index:2;padding-bottom:clamp(32px,7vh,72px);width:100%}
.band figcaption p{
  font-family:var(--ff-display);font-weight:200;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.14;
  max-width:20ch;margin:0 0 16px;
}
.band figcaption span{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);
}
.band figcaption span::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}

/* ==========================================================================
   5. FRENTES — índice interativo: um item por vez, com a foto trocando ao lado.
   Substitui a pilha de 4 parágrafos (leitura cansativa) por revelação sob demanda.
   ========================================================================== */
.frentes-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.frentes-head{margin-bottom:clamp(14px,2.4vh,30px)}
.frentes-head h2{max-width:18ch}

.indice{border-top:var(--hair-l)}
.item{
  border-bottom:var(--hair-l);
  display:block;width:100%;text-align:left;
  background:none;border-left:0;border-right:0;border-top:0;
  padding:0;cursor:pointer;
}
.item-cab{
  display:grid;grid-template-columns:52px 1fr 20px;align-items:center;
  gap:16px;padding:clamp(13px,2.1vh,20px) 0;
}
.item .num{
  font-family:var(--ff-display);font-weight:200;font-size:1.15rem;
  color:var(--brass-deep);
}
.item h3{color:var(--ink);transition:transform .5s var(--ease)}
.item .cruz{position:relative;width:14px;height:14px;justify-self:end}
.item .cruz::before,.item .cruz::after{
  content:"";position:absolute;background:var(--brass-deep);
  transition:transform .45s var(--ease);
}
.item .cruz::before{left:0;top:6.5px;width:14px;height:1px}
.item .cruz::after{left:6.5px;top:0;width:1px;height:14px}
.item[aria-expanded="true"] .cruz::after{transform:scaleY(0)}
.item[aria-expanded="true"] h3,.item:hover h3{transform:translateX(6px)}

.item-corpo{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .6s var(--ease),opacity .5s var(--ease);
}
.item-corpo.open{max-height:240px;opacity:1}
.item-corpo p{
  color:var(--muted-l);font-size:15.5px;
  padding:0 0 clamp(14px,2.2vh,22px) 68px;margin:0;max-width:52ch;
}

/* painel de imagem que troca com o item ativo */
.frentes-fig{
  position:relative;border-radius:var(--arch-card) var(--arch-card) 2px 2px;
  overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;max-height:calc(var(--util) - 265px);
}
.frentes-fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .8s var(--ease),transform 1.2s var(--ease);
}
.frentes-fig img.on{opacity:1;transform:none}

/* ---------- método ---------- */
.metodo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(24px,4vh,56px);
}
.etapa{position:relative;padding-top:28px}
.etapa::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--ink-3);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);
}
.etapa.in::before{transform:scaleX(1)}
.etapa .n{font-size:11.5px;letter-spacing:.18em;color:var(--brass);display:block;margin-bottom:12px}
.etapa h3{margin-bottom:8px}
.etapa p{color:var(--muted-d);font-size:15px;margin:0}

/* ==========================================================================
   7. OBRAS — grade 3/2/1 (requisito BuildV). A capa é dimensionada em vh para
   as duas linhas caberem na tela; a descrição migrou para o lightbox, o que
   enxuga o card e evita 6 parágrafos competindo na mesma tela.
   ========================================================================== */
.obras-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;margin-bottom:clamp(14px,2.4vh,30px);
}
.obras-head h2{max-width:20ch}
.grid-obras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.obra{
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:12px;width:100%;
}
.obra-capa{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--arch-card) var(--arch-card) 2px 2px;
  background:var(--paper-2);
  max-height:calc((var(--util) - 420px) / 2);
}
.obra-capa img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.obra:hover .obra-capa img,.obra:focus-visible .obra-capa img{transform:scale(1.045)}
.obra-capa .zoom{
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(245,241,234,.5);background:rgba(18,16,14,.45);
  display:grid;place-items:center;
  opacity:0;transform:scale(.8);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.obra:hover .zoom,.obra:focus-visible .zoom{opacity:1;transform:scale(1)}
.obra-capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(18,16,14,.45) 100%);
  opacity:0;transition:opacity .5s var(--ease);
}
.obra:hover .obra-capa::after{opacity:1}
.obra .tag{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-deep);display:block;margin-bottom:4px;
}
.obra h3{margin-bottom:3px}
.obra small{color:var(--wood);font-size:12.5px;letter-spacing:.06em}

/* ---------- citação em tela cheia ----------
   Foto real dissolvida por gradiente: a imagem entra pela direita e some antes
   de chegar no texto, então a citação nunca disputa legibilidade com a foto. */
.pull{
  background:var(--ink-2);border-top:var(--hair-d);border-bottom:var(--hair-d);
  position:relative;overflow:hidden;
}
.pull::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/faixa-terreno.webp") center 46% / cover no-repeat;
  filter:saturate(.42) sepia(.22) contrast(1.03);   /* puxa a foto para o quente da marca */
  -webkit-mask-image:linear-gradient(100deg,transparent 8%,rgba(0,0,0,.3) 44%,#000 82%);
  mask-image:linear-gradient(100deg,transparent 8%,rgba(0,0,0,.3) 44%,#000 82%);
  opacity:.55;
}
.pull::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,var(--ink-2) 24%,rgba(27,24,21,.74) 54%,rgba(27,24,21,.34) 100%);
}
.pull > .container{position:relative;z-index:2}
.pull blockquote{
  margin:0;max-width:22ch;
  font-family:var(--ff-display);font-weight:200;
  font-size:clamp(1.9rem,min(5vw,7vh),3.6rem);line-height:1.12;letter-spacing:-.02em;
}
.pull cite{
  display:block;margin-top:26px;font-style:normal;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
}

/* ---------- CTA: 3 passos com ANEL que desenha ---------- */
.cta-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:center}
.passos{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.passo{
  display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:start;
  padding:clamp(16px,2.4vh,24px) 0;border-top:var(--hair-d);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.passo:last-child{border-bottom:var(--hair-d)}
.passos.in .passo{opacity:1;transform:none}
.passos.in .passo:nth-child(1){transition-delay:.18s}
.passos.in .passo:nth-child(2){transition-delay:.38s}
.passos.in .passo:nth-child(3){transition-delay:.58s}
.passo .ring-num{position:relative;width:58px;height:58px;flex:none}
.passo .ring-num svg{position:absolute;inset:0;width:58px;height:58px;transform:rotate(-90deg)}
.passo .ring-num circle{
  fill:none;stroke:var(--brass);stroke-width:1;
  stroke-dasharray:176;stroke-dashoffset:176;
  transition:stroke-dashoffset 1.2s var(--ease);
}
.passos.in .passo:nth-child(1) circle{transition-delay:.28s}
.passos.in .passo:nth-child(2) circle{transition-delay:.48s}
.passos.in .passo:nth-child(3) circle{transition-delay:.68s}
.passos.in .ring-num circle{stroke-dashoffset:0}
.passo .ring-num b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:300;font-size:1.1rem;color:var(--paper);
}
.passo h3{margin-bottom:4px}
.passo p{color:var(--muted-d);font-size:15px;margin:0}
.is-light .passo p{color:var(--muted-l)}
.is-light .passo .ring-num b{color:var(--ink)}
.is-light .passo{border-color:rgba(18,16,14,.14)}
.is-light .passo:last-child{border-bottom-color:rgba(18,16,14,.14)}
.cta-body .btn{margin-top:clamp(20px,3.4vh,34px)}

/* ---------- footer (fora do encaixe) ---------- */
.site-footer{background:var(--ink-2);border-top:var(--hair-d);padding:clamp(48px,6vw,72px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-grid h4{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  margin:0 0 16px;font-weight:500;font-family:var(--ff-body);
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-grid a{color:var(--muted-d);text-decoration:none;font-size:15px;transition:color .35s var(--ease)}
.foot-grid a:hover{color:var(--paper)}
.foot-brand p{color:var(--muted-d);font-size:15px;max-width:34ch;margin-top:18px}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:var(--hair-d);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--muted-d);
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(9,8,7,.96);
  align-items:center;justify-content:center}
.lb.is-open{display:flex}
.lb-img{max-width:min(92vw,1080px);max-height:70vh;object-fit:contain;border-radius:2px}
.lb-close,.lb-prev,.lb-next{
  position:absolute;width:50px;height:50px;border-radius:50%;
  background:rgba(245,241,234,.08);border:1px solid rgba(245,241,234,.24);
  color:var(--paper);display:grid;place-items:center;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(245,241,234,.18);border-color:var(--paper)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;margin-top:-25px}
.lb-next{right:20px;top:50%;margin-top:-25px}
.lb-meta{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  padding:0 24px;font-size:13px;letter-spacing:.06em;color:var(--muted-d);
}
.lb-meta b{
  display:block;color:var(--paper);font-weight:400;font-size:17px;
  margin-bottom:6px;letter-spacing:0;font-family:var(--ff-display);
}
.lb-meta .desc{
  display:block;max-width:58ch;margin:0 auto 8px;
  font-size:14.5px;letter-spacing:0;line-height:1.5;
}

/* ---------- cookies ---------- */
.cookies{
  /* canto inferior ESQUERDO: o direito é do botão flutuante do widget do CRM
     (conversão). Some de vez quando o visitante aceita ou recusa. */
  position:fixed;left:20px;bottom:20px;right:auto;z-index:110;
  width:min(390px,calc(100vw - 40px));
  background:var(--ink-2);border:var(--hair-d);border-radius:2px;
  padding:20px 22px;display:none;gap:16px;flex-direction:column;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.cookies.is-open{display:flex}
.cookies p{font-size:13.5px;color:var(--muted-d);margin:0}
.cookies p a{color:var(--brass)}
.cookies .row{display:flex;gap:10px;flex-wrap:wrap}
.cookies .btn{padding:10px 18px;font-size:14px}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fig"]{transform:translateY(24px) scale(.985)}
[data-reveal="fig"].in{transform:none}

.word{display:inline-block;overflow:hidden;vertical-align:top}
.word i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .95s var(--ease)}
h1.split-in .word i{transform:none}
h1.split-in .word:nth-child(n) i{transition-delay:calc(var(--i,0) * 42ms)}

/* ---------- indicador de telas ---------- */
.telas-nav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:12px;
}
.telas-nav a{
  width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(245,241,234,.42);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.telas-nav a.on{background:var(--brass);border-color:var(--brass);transform:scale(1.3)}
.telas-nav.on-light a{border-color:rgba(18,16,14,.34)}
.telas-nav.on-light a.on{background:var(--brass-deep);border-color:var(--brass-deep)}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.loader.done{opacity:0;visibility:hidden}
.loader svg{width:72px;height:72px;animation:ringSpin 1.5s linear infinite}
.loader circle{fill:none;stroke:var(--brass);stroke-width:1;stroke-dasharray:60 180;stroke-linecap:round}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1180px){
  :root{--arch:150px;--arch-card:88px}
  .arch-fig{max-width:min(340px,32vw)}
}

@media (max-width:900px){
  :root{--header-h:70px;--arch:130px;--arch-card:80px}
  .site-header .brand img{height:50px}
  html{scroll-snap-type:none}          /* em tela pequena o conteúdo manda, não o encaixe */
  .tela{min-height:0;padding-top:calc(var(--header-h) + 44px);padding-bottom:56px}
  .hero{min-height:var(--tela);padding-top:calc(var(--header-h) + 28px)}

  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);
    background:var(--ink-2);border-left:var(--hair-d);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:24px;padding:0 34px;
    transform:translateX(100%);transition:transform .55s var(--ease);z-index:70;
  }
  .nav.open{transform:translateX(0)}
  .nav a{font-size:20px;font-family:var(--ff-display);font-weight:300}
  .nav a::before{left:-20px}
  .burger{display:flex;z-index:80}
  .burger.open span{background:transparent}
  .burger.open span::before{transform:translateY(6px) rotate(45deg)}
  .burger.open span::after{transform:translateY(-6px) rotate(-45deg)}
  .header-cta{display:none}
  .telas-nav{display:none}

  .hero-grid{grid-template-columns:1fr;gap:32px}
  .arch-fig{justify-self:start;max-width:min(280px,58vw)}
  .arch-fig .frame{max-height:none}
  .hero-creds{grid-template-columns:repeat(2,1fr)}
  .hero-creds div{border-left:0;border-top:var(--hair-d);padding:16px 0}
  .hero-creds div:nth-child(odd){padding-right:18px}
  .hero-creds div:nth-child(1),.hero-creds div:nth-child(2){border-top:0}

  .band{min-height:62vh}
  .pull::before{
    -webkit-mask-image:linear-gradient(185deg,transparent 12%,rgba(0,0,0,.32) 46%,#000 86%);
    mask-image:linear-gradient(185deg,transparent 12%,rgba(0,0,0,.32) 46%,#000 86%);
    opacity:.42;
  }
  .pull::after{background:linear-gradient(180deg,var(--ink-2) 26%,rgba(27,24,21,.76) 56%,rgba(27,24,21,.4) 100%)}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .split-media{order:0}
  .split-media{aspect-ratio:16/11;max-height:none}

  .frentes-grid{grid-template-columns:1fr;gap:30px}
  .frentes-fig{display:none}          /* no mobile o acordeão basta */
  .item-corpo p{padding-left:0}

  .metodo-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .grid-obras{grid-template-columns:repeat(2,1fr)}
  .obra-capa{max-height:none}
  .cta-grid{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}
  .lb-prev{left:10px}
  .lb-next{right:10px}
}

@media (max-width:560px){
  :root{--arch:96px;--arch-card:70px}
  /* o hero precisa caber na primeira tela também no celular */
  .hero{padding-top:calc(var(--header-h) + 18px)}
  .hero-grid{gap:22px}
  /* no celular a figura em arco sai: o hero precisa caber na primeira tela e a
     foto real continua presente no fundo (com mais presença aqui). */
  .arch-fig{display:none}
  .hero::before{opacity:.26;filter:blur(30px) saturate(.9)}
  .hero-creds{grid-template-columns:repeat(2,1fr);margin-top:18px}
  body{font-size:16px}
  .container{padding:0 18px}
  .tela{padding-top:calc(var(--header-h) + 34px);padding-bottom:48px}

  .hero-creds div{padding:13px 0}
  .hero-creds b{font-size:1rem}
  .hero-creds span{font-size:12px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}

  .metodo-grid{grid-template-columns:1fr;gap:22px}
  .grid-obras{grid-template-columns:1fr}
  .obra-capa{aspect-ratio:5/4}
  .item-cab{grid-template-columns:40px 1fr 18px;gap:12px}

  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:10px}

  .passo{grid-template-columns:50px 1fr;gap:14px}
  .passo .ring-num,.passo .ring-num svg{width:48px;height:48px}
  .passo .ring-num circle{stroke-dasharray:145;stroke-dashoffset:145}

  .cookies{left:12px;right:12px;bottom:12px;width:auto;padding:17px}
  .cookies .row{flex-direction:column}
  .cookies .row .btn{justify-content:center}
  .lb-close{top:12px;right:12px}
  .lb-img{max-height:58vh}
}

/* telas baixas (notebook curto): solta o encaixe para nada ser cortado */
@media (max-height:659px){
  html{scroll-snap-type:none}
  .tela{min-height:0;padding-top:calc(var(--header-h) + 44px);padding-bottom:60px}
  .band{min-height:70vh}
  .telas-nav{display:none}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .word i{transform:none}
  .arch-fig svg path{stroke-dashoffset:0}
  .passo{opacity:1;transform:none}
  .passo .ring-num circle{stroke-dashoffset:0}
  .etapa::before{transform:scaleX(1)}
  .frentes-fig img.on{opacity:1;transform:none}
  .item-corpo.open{max-height:280px;opacity:1}
}