/* conteúdo editorial — handoff cinematográfico controlado por --e-* */

main{
  --margem:clamp(22px,4.4vw,72px);
  --menu-h:88px;
  /* defaults visíveis (sem JS); o scroll do handoff sobrescreve via style */
  --e:1; --e-papel:1; --e-faixa:1; --e-contexto:1;
  --e-titulo1:1; --e-titulo2:1; --e-foto:1; --e-menu:1;
  --e-rodape:1; --e-tracos:1;
  position:relative;z-index:10;isolation:isolate;
  color:var(--tinta);
  background:color-mix(in srgb,var(--papel) calc(var(--e-papel) * 100%),transparent);
  box-shadow:0 -36px 80px color-mix(in srgb,rgba(50,39,34,.1) calc(var(--e-papel) * 100%),transparent);
  transition:none
}
main.entrada-pronta,
main.menu-fixo{
  background:var(--papel);
  box-shadow:var(--sombra-main);
  color:var(--tinta)
}
main a{color:inherit}
.faixa{
  display:block;height:5px;position:relative;z-index:2;
  background:linear-gradient(90deg,var(--tapete),var(--dourado),var(--tapete));
  transform:scaleX(var(--e-faixa));transform-origin:left center;
  opacity:calc(.35 + .65 * var(--e-faixa))
}

/* fundo atrás do editorial — nasce com o papel, sem competir com o título */
.fundo-vivo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  opacity:calc(var(--e-papel) * .42)
}
main.com-fundo-vivo .fundo-vivo{opacity:calc(var(--e-papel) * .55)}
main.entrada-pronta .fundo-vivo{opacity:.55}
main.entrada-pronta.com-fundo-vivo .fundo-vivo{opacity:.7}
.fundo-orbita{
  position:absolute;border-radius:50%;filter:blur(48px);will-change:transform
}
.fundo-orbita.o1{
  width:min(70vw,720px);height:min(70vw,720px);left:-18%;top:8%;
  background:radial-gradient(circle,var(--orb-1),transparent 68%);
  animation:orbita-passa 28s ease-in-out infinite
}
.fundo-orbita.o2{
  width:min(55vw,560px);height:min(55vw,560px);right:-12%;top:32%;
  background:radial-gradient(circle,var(--orb-2),transparent 70%);
  animation:orbita-passa 36s ease-in-out infinite reverse
}
.fundo-orbita.o3{
  width:min(48vw,480px);height:min(48vw,480px);left:22%;top:58%;
  background:radial-gradient(circle,var(--orb-3),transparent 72%);
  animation:orbita-passa 42s ease-in-out infinite
}
.fundo-orbita.o4{
  width:min(40vw,400px);height:min(40vw,400px);right:18%;top:78%;
  background:radial-gradient(circle,var(--orb-1),transparent 70%);
  animation:orbita-passa 32s ease-in-out infinite reverse
}
.fundo-faixa{
  position:absolute;left:-20%;right:-20%;height:1px;top:18%;
  background:linear-gradient(90deg,transparent,var(--faixa-viva),transparent);
  animation:faixa-desliza 22s linear infinite
}
.fundo-faixa.f2{top:44%;animation-duration:31s;animation-direction:reverse;opacity:.7}
.fundo-faixa.f3{top:72%;animation-duration:26s;opacity:.55}
@keyframes orbita-passa{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(12%,6%,0) scale(1.08)}
  66%{transform:translate3d(-8%,-4%,0) scale(.94)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes faixa-desliza{
  from{transform:translateX(-18%)}
  to{transform:translateX(18%)}
}

/* luz do mouse — canvas fixo sobre o site */
.luz-rastro{
  position:fixed;inset:0;z-index:15;pointer-events:none;
  opacity:0;transition:opacity .4s ease;mix-blend-mode:multiply
}
:root[data-theme="dark"] .luz-rastro{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .luz-rastro{mix-blend-mode:screen}
}
:root[data-theme="light"] .luz-rastro{mix-blend-mode:multiply}

.bloco-largo{width:min(100%,1440px);margin-inline:auto;padding-inline:var(--margem);position:relative;z-index:1}
.etiqueta{margin:0;text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:500}

/* menu — sticky no editorial; fixa no topo quando a tela do site assume */
.menu-reserva{display:block;height:0;pointer-events:none}
.menu-site{
  height:var(--menu-h);padding:0 var(--margem);display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid color-mix(in srgb,var(--linha) calc(var(--e-menu) * 100%),transparent);
  background:color-mix(in srgb,var(--menu-fundo) calc(var(--e-menu) * 100%),transparent);
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(calc(var(--e-menu) * 14px));
  opacity:var(--e-menu);
  transform:translate3d(0, calc((1 - var(--e-menu)) * -10px), 0);
  pointer-events:none;
  transition:none
}
main.menu-pronta .menu-site{pointer-events:auto}
main.menu-fixo .menu-reserva{height:var(--menu-h)}
main.menu-fixo .menu-site{
  position:fixed;top:0;left:0;right:0;width:100%;
  opacity:1;
  transform:none;
  background:var(--menu-fundo);
  border-bottom-color:var(--linha);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 40px color-mix(in srgb,var(--tinta) 6%,transparent);
  filter:none;
  pointer-events:auto
}
.menu-site .marca,
.menu-site .menu-links{
  opacity:calc(.4 + .6 * var(--e-menu));
  transform:translate3d(0, calc((1 - var(--e-menu)) * 6px), 0)
}
main.menu-fixo .menu-site .marca,
main.menu-fixo .menu-site .menu-links{opacity:1;transform:none;filter:none}
.marca{display:flex;align-items:center;gap:12px;font:400 19px/1 var(--serif);letter-spacing:.08em;text-decoration:none}
.marca-sol{width:24px;height:24px;border:1px solid currentColor;border-radius:50%;position:relative}
.marca-sol::after{content:"";position:absolute;width:1px;height:32px;left:50%;top:-5px;background:currentColor;transform:rotate(45deg)}
.menu-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px)}
.menu-links a{font-size:12px;letter-spacing:.08em;text-decoration:none;position:relative}
.menu-links>a:not(.menu-contato)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-saida)
}
.menu-links>a:hover::after{transform:scaleX(1)}
.menu-contato{
  border:1px solid var(--linha);border-radius:100px;padding:11px 15px 11px 18px;display:flex;gap:20px;
  transition:background .35s var(--ease-saida),border-color .35s var(--ease-saida),color .35s var(--ease-saida),transform .35s var(--ease-saida)
}
.menu-contato:hover{background:var(--tinta);color:var(--papel);transform:translateY(-1px)}

/* alternância claro / escuro */
.tema-botao{
  width:42px;height:42px;padding:0;border:1px solid var(--linha);border-radius:50%;
  background:var(--papel-elevado);color:var(--tinta);cursor:pointer;
  display:grid;place-items:center;position:relative;flex-shrink:0;
  transition:background .35s var(--ease-rotina),border-color .35s var(--ease-rotina),color .35s var(--ease-rotina),transform .35s var(--ease-saida)
}
.tema-botao:hover{border-color:var(--tinta);transform:rotate(12deg)}
.tema-botao:active{transform:scale(.96)}
.tema-icone{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .35s var(--ease-rotina),transform .45s var(--ease-saida)}
.tema-icone svg{width:18px;height:18px;display:block}
.tema-icone-sol{opacity:1;transform:none}
.tema-icone-lua{opacity:0;transform:rotate(-40deg) scale(.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema-icone-sol{opacity:0;transform:rotate(40deg) scale(.7)}
  :root:not([data-theme="light"]) .tema-icone-lua{opacity:1;transform:none}
}
:root[data-theme="dark"] .tema-icone-sol{opacity:0;transform:rotate(40deg) scale(.7)}
:root[data-theme="dark"] .tema-icone-lua{opacity:1;transform:none}
:root[data-theme="light"] .tema-icone-sol{opacity:1;transform:none}
:root[data-theme="light"] .tema-icone-lua{opacity:0;transform:rotate(-40deg) scale(.7)}

/* abertura */
.abertura{padding-top:clamp(72px,11vw,160px);padding-bottom:clamp(100px,14vw,190px)}
.abertura>.sobretitulo{margin-bottom:clamp(40px,6vw,72px);color:var(--tinta-suave);font-size:clamp(12px,1.05vw,14px)}
.abertura-cena{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
  gap:clamp(28px,5vw,72px);align-items:end;position:relative
}
.titulo-gigante{font-family:var(--serif);font-size:clamp(48px,8.4vw,96px);font-weight:400;line-height:.88;letter-spacing:-.04em;margin:0;position:relative;z-index:2;text-wrap:balance}
.linha-titulo{display:block;overflow:hidden}
.linha-titulo em{color:var(--tapete);font-weight:400}
.linha-direita{text-align:right;margin-top:.08em}
.linha-mascara{display:block}

/* camadas do handoff — entrada leve, tipográfica, sem peso */
.camada-contexto{
  opacity:var(--e-contexto);
  transform:translate3d(0, calc((1 - var(--e-contexto)) * 14px), 0);
  letter-spacing:calc(.06em + (1 - var(--e-contexto)) * .1em);
  filter:none;visibility:visible
}
.camada-titulo1 .linha-mascara{
  opacity:var(--e-titulo1);
  transform:translate3d(
    calc(var(--n-passagem, 0) * -3px),
    calc((1 - var(--e-titulo1)) * 108% + var(--n-passagem, 0) * -6px),
    0
  );
  filter:none;visibility:visible
}
.camada-titulo2 .linha-mascara{
  opacity:var(--e-titulo2);
  transform:translate3d(
    calc(var(--n-passagem, 0) * -2px),
    calc((1 - var(--e-titulo2)) * 108% + var(--n-passagem, 0) * -6px),
    0
  );
  filter:none;visibility:visible
}
.camada-foto{
  opacity:calc(.2 + .8 * var(--e-foto));
  transform:translate3d(
    0,
    calc((1 - var(--e-foto)) * 32px + var(--n-passagem, 0) * -22px),
    0
  )
  scale(calc(.97 + .03 * var(--e-foto) - var(--n-passagem, 0) * .02));
  filter:none;visibility:visible
}
.camada-foto .abertura-legenda span{
  opacity:var(--e-foto);
  transform:translate3d(0, calc((1 - var(--e-foto)) * 8px), 0);
  display:inline-block
}
.camada-rodape{
  opacity:calc(var(--e-rodape) * (1 - var(--n-passagem, 0) * .15));
  transform:translate3d(0, calc((1 - var(--e-rodape)) * 22px + var(--n-passagem, 0) * -10px), 0);
  border-top-color:color-mix(in srgb,var(--linha) calc(var(--e-rodape) * 100%),transparent);
  filter:none;visibility:visible
}
.camada-rodape .abertura-numero{
  opacity:var(--e-rodape);
  letter-spacing:calc(.12em + (1 - var(--e-rodape)) * .06em)
}
.linha-titulo{overflow:hidden}

.abertura-visual{
  margin:0;position:relative;justify-self:end;width:min(100%,420px);
  z-index:1
}
.abertura-tracos{
  position:absolute;inset:-6% -8%;width:116%;height:112%;pointer-events:none;z-index:2;
  overflow:visible;
  opacity:calc(.25 + .75 * var(--e-tracos))
}
.abertura-tracos .traco-quadro{
  stroke:var(--traco);stroke-width:1;fill:none;
  stroke-dasharray:1800;
  stroke-dashoffset:calc(1800 * (1 - var(--e-tracos)));
  transition:stroke .45s ease
}
.abertura-tracos .traco-canto{
  stroke:var(--traco-forte);stroke-width:1.6;fill:none;stroke-linecap:square;
  stroke-dasharray:140;
  stroke-dashoffset:calc(140 * (1 - var(--e-tracos)));
  transition:stroke .45s ease
}
.abertura-tracos .traco-orbita{
  stroke:var(--traco-dourado);stroke-width:1;fill:none;
  opacity:calc(var(--e-tracos) * .85);
  stroke-dasharray:6 10;transition:stroke .45s ease;
  transform-origin:210px 260px;
  animation:orbita-gira 28s linear infinite;
  animation-play-state:paused
}
main.entrada-pronta .abertura-tracos .traco-orbita{animation-play-state:running}
.abertura-tracos .traco-raio{
  stroke:var(--traco-forte);stroke-width:1.4;stroke-linecap:round;
  opacity:var(--e-tracos);
  transform-origin:210px 260px;transition:stroke .45s ease;
  animation:raio-pulsa 3.6s ease-in-out infinite;
  animation-play-state:paused
}
main.entrada-pronta .abertura-tracos .traco-raio{animation-play-state:running}
.abertura-foto{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  background:var(--bloco-img);
  box-shadow:0 18px 48px color-mix(in srgb,rgba(50,39,34,.14) calc(var(--e-foto) * 100%),transparent);
  transform:rotate(calc((1 - var(--e-foto)) * -1.1deg + var(--n-passagem, 0) * .4deg))
}
.abertura-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(160deg,var(--abertura-brilho) 0%,transparent 42%),
    linear-gradient(0deg,color-mix(in srgb,var(--papel) 28%,transparent) 0%,transparent 34%);
  transition:background .45s ease;
  opacity:calc(.5 + .5 * var(--e-foto))
}
.abertura-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:var(--abertura-foto-filtro);
  transform:scale(calc(1.08 - var(--e-foto) * .04));
  transition:filter .45s ease
}
main.entrada-pronta .abertura-foto img{
  animation:foto-respira 18s ease-in-out infinite alternate
}
.abertura-legenda{
  display:flex;justify-content:space-between;gap:16px;padding-top:14px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)
}

@keyframes orbita-gira{to{transform:rotate(360deg)}}
@keyframes raio-pulsa{
  0%,100%{opacity:.35;transform:scaleY(.85)}
  50%{opacity:1;transform:scaleY(1)}
}
@keyframes foto-respira{
  from{transform:scale(1.08) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.5%,1%,0)}
}

.abertura-rodape{
  margin-top:clamp(64px,10vw,140px);padding-top:28px;border-top:1px solid transparent;
  display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:start;gap:var(--espaco-6)
}
.abertura-rodape p{margin:0}
.abertura-numero{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tapete)}
.abertura-numero span{display:none}
.abertura-rodape>p:nth-child(2){font:400 clamp(18px,1.6vw,23px)/1.58 var(--serif);max-width:38rem;text-wrap:pretty}
.link-seta{
  justify-self:end;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  border-bottom:1px solid;padding-bottom:7px;
  transition:color .35s var(--ease-saida),border-color .35s var(--ease-saida),transform .35s var(--ease-saida)
}
.link-seta:hover{color:var(--tapete);transform:translateX(4px)}
.link-seta span{padding-left:18px;display:inline-block;transition:transform .35s var(--ease-saida)}
.link-seta:hover span{transform:translate(3px,3px)}

/* manifesto */
.manifesto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(48px,9vw,150px);align-items:center;padding-bottom:clamp(120px,17vw,250px)}
.imagem-editorial{margin:0}
.imagem-editorial img{display:block;width:100%;height:100%;object-fit:cover;transform:translateY(var(--paralaxe,0)) scale(1.04)}
.imagem-manifesto{max-width:700px}
.imagem-manifesto img{aspect-ratio:3/4;box-shadow:var(--sombra-toque)}
.imagem-manifesto figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.manifesto-texto{max-width:36rem}
.manifesto-texto h3{
  font:400 clamp(34px,4.2vw,58px)/1.08 var(--serif);letter-spacing:-.035em;
  margin:var(--espaco-6) 0 var(--espaco-4);text-wrap:balance
}
.manifesto-texto>p:not(.etiqueta){
  font-size:clamp(16px,1.35vw,19px);line-height:1.72;color:var(--tinta-suave);
  max-width:62ch;margin:0 0 1.15em;text-wrap:pretty
}
.manifesto-texto>p:not(.etiqueta):last-child{margin-bottom:0}
.manifesto-texto em{color:var(--tapete);font:400 1.35em/.95 var(--serif)}

/* faixa em movimento */
.marquee{overflow:hidden;border-block:1px solid var(--linha);padding:28px 0}
.marquee-faixa{width:max-content;display:flex;align-items:center;gap:34px;animation:marquee 32s linear infinite}
.marquee:hover .marquee-faixa{animation-play-state:paused}
.marquee span{font:400 clamp(27px,3.3vw,48px)/1 var(--serif);white-space:nowrap;letter-spacing:-.02em}
.marca-estrela{
  display:inline-block;width:8px;height:8px;flex-shrink:0;
  background:var(--tapete);transform:rotate(45deg);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tapete) 30%,transparent)
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* trabalhos */
.trabalhos{background:var(--bloco);color:var(--bloco-tinta);padding:clamp(110px,14vw,200px) 0;transition:background-color .45s ease,color .45s ease}
.secao-cabecalho{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:end;margin-bottom:clamp(70px,10vw,140px)}
.secao-cabecalho h2,.servicos-titulo h2{font:400 clamp(46px,7vw,96px)/.96 var(--serif);letter-spacing:-.04em;margin:var(--espaco-5) 0 0;text-wrap:balance}
.secao-cabecalho h2 em,.servicos-titulo em{font-weight:400;color:var(--bloco-acento)}
.secao-cabecalho>p{max-width:38ch;line-height:1.68;color:var(--bloco-suave);font-size:16px;margin:0 0 8px;text-wrap:pretty}
.galeria{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(35px,6vw,90px);align-items:start}
.projeto{min-width:0}
.projeto a{text-decoration:none;display:block}
.projeto-imagem{overflow:hidden;background:var(--bloco-img);box-shadow:var(--sombra-toque)}
.projeto-imagem img{width:100%;height:100%;object-fit:cover;display:block;transform:translateY(var(--paralaxe,0)) scale(1.04);transition:transform 1.1s var(--ease-saida)}
.projeto:hover .projeto-imagem img{transform:translateY(var(--paralaxe,0)) scale(1.06)}
.projeto-grande .projeto-imagem{aspect-ratio:4/3}
.projeto-retrato{margin-top:clamp(100px,18vw,260px)}
.projeto-retrato .projeto-imagem{aspect-ratio:3/4}
.projeto-detalhe{grid-column:1/2;width:68%;margin-top:clamp(60px,10vw,140px);margin-left:20%}
.projeto-detalhe .projeto-imagem{aspect-ratio:4/3}
.projeto-info{display:grid;grid-template-columns:1fr auto;position:relative;padding-top:22px}
.projeto-info>span:first-child{grid-column:1/-1;color:var(--bloco-suave);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.projeto-info h3{font:400 clamp(24px,2.5vw,38px)/1.12 var(--serif);margin:0;letter-spacing:-.02em}
.projeto-seta{font-size:24px;transition:transform .35s var(--ease-saida)}
.projeto:hover .projeto-seta{transform:translate(5px,-5px)}

/* serviços */
.servicos{padding-top:clamp(110px,16vw,230px);padding-bottom:clamp(110px,16vw,230px)}
.servicos-titulo{margin-bottom:clamp(80px,11vw,150px)}
.servicos-titulo h2 em{color:var(--tapete)}
.lista-servicos{border-top:1px solid var(--linha)}
.servico{
  display:grid;grid-template-columns:minmax(250px,1fr) minmax(300px,1.2fr) 45px;gap:28px;align-items:center;
  padding:38px 20px;border-bottom:1px solid var(--linha);position:relative;
  transition:color .4s var(--ease-saida)
}
.servico::before{content:"";position:absolute;inset:0;background:var(--tapete);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-saida);z-index:-1}
.servico:hover{color:var(--processo-tinta)}
.servico:hover::before{transform:scaleY(1)}
.servico h3{font:400 clamp(24px,2.5vw,38px)/1.12 var(--serif);margin:0;letter-spacing:-.02em}
.servico p{margin:0;max-width:52ch;font-size:15px;line-height:1.65;color:var(--tinta-suave)}
.servico:hover p{color:var(--processo-suave)}
.servico-icone{display:grid;place-items:center;width:28px;height:28px;transition:transform .4s var(--ease-saida)}
.servico-icone svg{width:22px;height:22px;display:block}
.servico:hover .servico-icone{transform:translate(3px,-3px)}

/* processo */
.processo{background:var(--tapete);color:var(--processo-tinta);padding:clamp(100px,14vw,200px) 0}
.processo-frase{font:400 clamp(2.75rem,9vw,6rem)/.88 var(--serif);letter-spacing:-.04em;text-wrap:balance}
.processo-frase span{display:block}
.processo-frase span:nth-child(2){text-align:center;color:var(--blush)}
.processo-frase span:nth-child(3){text-align:right}
.etapas{
  list-style:none;padding:0;margin:clamp(100px,15vw,220px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid color-mix(in srgb,var(--processo-tinta) 32%,transparent)
}
.etapas li{
  padding:22px 26px 0 0;
  border-right:1px solid color-mix(in srgb,var(--processo-tinta) 22%,transparent);
  min-height:230px
}
.etapas li+li{padding-left:26px}
.etapas li:last-child{border:0}
.etapas li>span{font-size:11px;letter-spacing:.1em;color:var(--blush)}
.etapas h3{font:400 23px/1.2 var(--serif);margin:48px 0 18px}
.etapas p{font-size:14px;line-height:1.65;color:var(--processo-suave);margin:0;max-width:min(48ch,100%)}

/* depoimento */
.depoimento{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,10vw,150px);align-items:center;padding-top:clamp(120px,17vw,240px);padding-bottom:clamp(120px,17vw,240px)}
.depoimento-foto{height:min(62vw,680px);overflow:hidden;box-shadow:var(--sombra-elevada)}
.depoimento-foto img{width:100%;height:100%;object-fit:cover;display:block;transform:translateY(var(--paralaxe,0)) scale(1.04)}
.depoimento blockquote{margin:0}
.aspas{display:block;color:var(--tapete);font:400 100px/.5 var(--serif)}
.depoimento blockquote>p{font:400 clamp(31px,4vw,56px)/1.12 var(--serif);letter-spacing:-.035em;margin:var(--espaco-5) 0 var(--espaco-6);text-wrap:balance;max-width:18ch}
.depoimento blockquote footer{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.depoimento blockquote footer span{color:var(--tinta-suave)}

/* contato */
.convite{position:relative;min-height:92vh;padding:clamp(120px,17vw,240px) var(--margem);background:var(--bloco);color:var(--bloco-tinta);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color .45s var(--ease-rotina),color .45s var(--ease-rotina)}
.convite h2{font:400 clamp(49px,7.8vw,6rem)/.94 var(--serif);letter-spacing:-.04em;margin:var(--espaco-6) 0 0;text-wrap:balance;max-width:14ch}
.convite h2 em{font-weight:400;color:var(--bloco-acento)}
.convite .btn{margin-top:var(--espaco-7);width:min(100%,390px);padding:20px 24px;border:1px solid var(--bloco-btn-borda);border-radius:100px;color:var(--bloco-tinta);text-decoration:none;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;font-size:11px;transition:background .4s var(--ease-saida),color .4s var(--ease-saida),border-color .4s var(--ease-saida),transform .4s var(--ease-saida)}
.convite .btn:hover{background:var(--bloco-btn-hover);color:var(--bloco-btn-hover-tinta);border-color:var(--bloco-btn-hover);transform:translateY(-2px)}
.convite .contato{margin-top:42px;font-size:11px;line-height:1.9;letter-spacing:.1em;text-transform:uppercase;color:var(--bloco-suave)}
.convite-orbita{position:absolute;width:180px;height:180px;border:1px solid var(--bloco-linha);border-radius:50%;top:10%;right:7%;animation:girar 22s linear infinite}
.convite-orbita::before{
  content:"";position:absolute;inset:50% auto auto 50%;width:10px;height:10px;
  background:var(--bloco-acento);transform:translate(-50%,-50%) rotate(45deg)
}
.convite-orbita span{display:none}
@keyframes girar{to{transform:rotate(360deg)}}

.rodape-site{padding:34px var(--margem);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-top:1px solid var(--linha)}
.rodape-site>p{text-align:center;font-size:12px;color:var(--tinta-suave)}
.rodape-site>div{display:flex;justify-content:flex-end;gap:28px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.rodape-site>div a{text-decoration:none}

/* ── narrativa contínua: progresso por seção
   --n / --n-in / --n-mid / --n-out / --n-passagem
   --reveal / --reveal-title / --reveal-text / --reveal-image / --reveal-detail
   --ni por item · --balanco (pico no meio da entrada) · --bx (direção)
   Classe .narrativa (NÃO .cena — essa é das legendas do drone).
   Defaults = 1 → conteúdo legível sem JS. */
.narrativa{
  --n:1; --n-in:1; --n-mid:1; --n-out:0; --n-passagem:0;
  --reveal:1; --reveal-title:1; --reveal-text:1; --reveal-image:1; --reveal-detail:1;
  --rx-y:18px; --rx-x:12px; --rx-rot:.85deg; --rx-scale:.032;
  --rx-balanco-x:5px; --rx-balanco-rot:.45deg;
}
.narrativa-item{--ni:1; --balanco:0; --bx:1}

/* seções editoriais acima do fundo */
main > section,
main > .marquee,
main > .faixa,
main > nav{
  position:relative;
  z-index:2
}

/* ── roles: surgimento tipo marketing (opacidade + elevação) + toque editorial ── */
.narrativa-titulo{
  opacity:var(--ni);
  transform:
    translate3d(
      calc(var(--balanco) * var(--rx-balanco-x) * var(--bx) * .25),
      calc((1 - var(--ni)) * var(--rx-y)),
      0
    );
  transition:none
}
.narrativa-texto{
  opacity:var(--ni);
  transform:translate3d(
    calc(var(--balanco) * var(--rx-balanco-x) * var(--bx) * .3),
    calc((1 - var(--ni)) * 14px),
    0
  );
  transition:none
}
.narrativa-image{
  opacity:calc(.25 + .75 * var(--ni));
  transform:
    translate3d(
      calc((1 - var(--ni)) * var(--rx-x) * -.25 + var(--balanco) * var(--rx-balanco-x) * var(--bx) * .5),
      calc((1 - var(--ni)) * 20px),
      0
    )
    scale(calc(1 - (1 - var(--ni)) * var(--rx-scale)))
    rotate(calc(
      (1 - var(--ni)) * var(--rx-rot) * -.7
      + var(--balanco) * var(--rx-balanco-rot) * var(--bx) * .6
    ));
  clip-path:inset(calc((1 - var(--ni)) * 4%) 0);
  transform-origin:50% 60%;
  transition:none
}
.narrativa-detail{
  opacity:var(--ni);
  transform:translate3d(
    calc((1 - var(--ni)) * 6px + var(--balanco) * var(--rx-balanco-x) * var(--bx) * .4),
    calc((1 - var(--ni)) * 12px),
    0
  );
  transition:none
}

/* abertura — handoff (--e-*) comanda a entrada; --n-passagem já entra nas camadas */
.abertura .narrativa-detail,
.abertura .narrativa-texto{
  opacity:calc(.55 + .45 * var(--ni) * var(--e-rodape, 1));
  clip-path:none;
  transform:translate3d(
    calc(var(--balanco) * 2px * var(--bx)),
    calc((1 - var(--ni) * var(--e-rodape, 1)) * 8px),
    0
  )
}

/* manifesto — foto editorial se acomoda; título com reveal tipográfico */
.manifesto{
  --rx-y:22px; --rx-x:18px; --rx-rot:1deg; --rx-scale:.036;
  --rx-balanco-x:6px; --rx-balanco-rot:.55deg
}
.manifesto .imagem-editorial.narrativa-image{
  transform:
    translate3d(
      calc((1 - var(--ni)) * -16px + var(--balanco) * -5px),
      calc((1 - var(--ni)) * 22px + var(--balanco) * -5px),
      0
    )
    scale(calc(.968 + .032 * var(--ni)))
    rotate(calc((1 - var(--ni)) * -.9deg + var(--balanco) * .4deg));
}
.manifesto .imagem-editorial figcaption.narrativa-detail{
  transform:translate3d(
    calc((1 - var(--ni)) * 12px + var(--balanco) * 4px),
    0,
    0
  );
  letter-spacing:calc(.08em + (1 - var(--ni)) * .045em)
}
.manifesto-texto h3.narrativa-titulo{
  opacity:var(--ni);
  transform:translate3d(
    calc((1 - var(--ni)) * 10px),
    calc((1 - var(--ni)) * 16px),
    0
  );
}
.manifesto-texto > p.narrativa-texto{
  opacity:var(--ni);
  transform:translate3d(
    0,
    calc((1 - var(--ni)) * 12px + var(--balanco) * -2px * var(--bx)),
    0
  )
}

.marquee{opacity:1}

/* trabalhos — cada peça entra no próprio tempo (progresso local) */
#trabalhos{
  --rx-y:18px; --rx-rot:.7deg; --rx-scale:.03;
  --rx-balanco-x:5px; --rx-balanco-rot:.4deg
}
#trabalhos .secao-cabecalho h2.narrativa-titulo{
  /* sobe e aparece — sem clip que esconde o título cedo demais */
  opacity:var(--ni);
}
#trabalhos .projeto-imagem.narrativa-image{
  transform:
    translate3d(
      calc(var(--balanco) * 3px * var(--bx)),
      calc((1 - var(--ni)) * 22px),
      0
    )
    scale(calc(.97 + .03 * var(--ni)))
    rotate(calc((1 - var(--ni)) * -.5deg + var(--balanco) * .25deg * var(--bx)));
}
#trabalhos .projeto-retrato .projeto-imagem.narrativa-image{
  transform:
    translate3d(
      calc((1 - var(--ni)) * 8px + var(--balanco) * 2px),
      calc((1 - var(--ni)) * 18px),
      0
    )
    scale(calc(.975 + .025 * var(--ni)))
    rotate(calc((1 - var(--ni)) * .55deg + var(--balanco) * -.2deg));
}
#trabalhos .projeto-detalhe .projeto-imagem.narrativa-image{
  transform:
    translate3d(
      calc((1 - var(--ni)) * -6px + var(--balanco) * -2px),
      calc((1 - var(--ni)) * 16px),
      0
    )
    scale(calc(.98 + .02 * var(--ni)))
    rotate(calc((1 - var(--ni)) * -.35deg + var(--balanco) * .2deg));
}
#trabalhos .projeto-info.narrativa-detail{
  opacity:var(--ni);
  transform:translate3d(
    0,
    calc((1 - var(--ni)) * 14px + var(--balanco) * -2px),
    0
  )
}

/* serviços — título protagonista; linhas sobem em sequência curta */
#servicos .servicos-titulo h2.narrativa-titulo{
  --rx-y:24px;
}
#servicos .servico.narrativa-texto{
  opacity:var(--ni);
  transform:translate3d(
    0,
    calc((1 - var(--ni)) * 16px + var(--balanco) * -2px * var(--bx)),
    0
  );
  border-bottom-color:color-mix(in srgb, var(--linha) calc((.4 + .6 * var(--ni)) * 100%), transparent);
  transition:color .4s var(--ease-saida)
}

/* processo — palavras sobem em sequência; etapas acompanham */
.processo-frase span.narrativa-titulo{
  opacity:var(--ni);
  transform:translate3d(
    calc(var(--balanco) * 3px * var(--bx)),
    calc((1 - var(--ni)) * 20px),
    0
  )
}
.processo-frase span:nth-child(2).narrativa-titulo{
  transform:translate3d(
    calc((1 - var(--ni)) * 6px + var(--balanco) * 2px),
    calc((1 - var(--ni)) * 18px),
    0
  )
}
.processo-frase span:nth-child(3).narrativa-titulo{
  transform:translate3d(
    calc((1 - var(--ni)) * -5px + var(--balanco) * -2px),
    calc((1 - var(--ni)) * 16px),
    0
  )
}
.etapas li.narrativa-detail{
  opacity:var(--ni);
  transform:translate3d(
    0,
    calc((1 - var(--ni)) * 16px),
    0
  );
}
.etapas li.narrativa-detail > span{
  opacity:var(--ni);
  transform:translate3d(0, calc((1 - var(--ni)) * 6px), 0);
  display:inline-block
}
.etapas li.narrativa-detail h3{
  transform:translate3d(0, calc((1 - var(--ni)) * 8px), 0)
}
.etapas{
  border-top-color:color-mix(
    in srgb,
    var(--processo-tinta) calc((.25 + .75 * var(--reveal-detail, 1)) * 32%),
    transparent
  )
}

/* depoimento — foto inclinada que assenta; citação revelada */
.depoimento{
  --rx-rot:1.15deg; --rx-scale:.034;
  --rx-balanco-x:6px; --rx-balanco-rot:.5deg
}
.depoimento-foto.narrativa-image{
  transform:
    translate3d(
      calc((1 - var(--ni)) * -12px + var(--balanco) * -4px),
      calc((1 - var(--ni)) * 20px + var(--balanco) * -5px),
      0
    )
    scale(calc(.965 + .035 * var(--ni)))
    rotate(calc((1 - var(--ni)) * -1.15deg + var(--balanco) * .45deg));
}
.depoimento .aspas.narrativa-detail{
  transform:translate3d(
    calc(var(--balanco) * 4px),
    calc((1 - var(--ni)) * 14px),
    0
  ) scale(calc(.9 + .1 * var(--ni)));
  opacity:calc(.15 + .85 * var(--ni))
}
.depoimento blockquote > p.narrativa-titulo{
  opacity:var(--ni);
  transform:translate3d(
    calc(var(--balanco) * 2px),
    calc((1 - var(--ni)) * 18px),
    0
  )
}
.depoimento blockquote footer.narrativa-texto{
  letter-spacing:calc(.12em + (1 - var(--ni)) * .07em);
  transform:translate3d(
    calc((1 - var(--ni)) * 10px + var(--balanco) * 3px),
    0,
    0
  )
}

/* contato — convite estabiliza; órbita acompanha */
#contato{--rx-y:26px}
#contato h2.narrativa-titulo{
  opacity:var(--ni)
}
#contato .btn.narrativa-detail{
  opacity:calc(.3 + .7 * var(--ni));
  transform:translateY(calc((1 - var(--ni)) * 10px + var(--balanco) * -2px));
  transition:background .4s var(--ease-saida),color .4s var(--ease-saida),border-color .4s var(--ease-saida)
}
#contato .btn.narrativa-detail:hover{
  transform:translateY(calc((1 - var(--ni)) * 10px + var(--balanco) * -2px - 2px));
  transition:background .4s var(--ease-saida),color .4s var(--ease-saida),border-color .4s var(--ease-saida),transform .4s var(--ease-saida)
}
#contato .contato.narrativa-texto{
  letter-spacing:calc(.1em + (1 - var(--ni)) * .055em)
}
#contato .convite-orbita.narrativa-detail{
  opacity:calc(.2 + .65 * var(--ni));
  transform:none
}

/* animações legadas desativadas — a timeline controla a narrativa */
.revelar{opacity:1;transform:none}

.imagem-editorial img,.projeto-imagem img,.depoimento-foto img,.abertura-foto img{will-change:transform}

/* Safari mobile: sem blur/compositor pesado no editorial */
html.sem-drone .menu-site,
html.sem-drone main.menu-fixo .menu-site{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
html.sem-drone .fundo-vivo,
html.sem-drone .fundo-orbita,
html.sem-drone .fundo-faixa{display:none!important}
html.sem-drone .imagem-editorial img,
html.sem-drone .projeto-imagem img,
html.sem-drone .depoimento-foto img,
html.sem-drone .abertura-foto img{will-change:auto}

/* mobile: abertura mais próxima do topo — menos “vão” no handoff */
html.sem-drone .abertura{
  padding-top:clamp(20px,4.5vw,36px);
  padding-bottom:clamp(64px,12vw,120px)
}
html.sem-drone .abertura>.sobretitulo{margin-bottom:clamp(18px,4vw,28px)}
html.sem-drone .camada-titulo1 .linha-mascara{
  transform:translate3d(0, calc((1 - var(--e-titulo1)) * 32px), 0)
}
html.sem-drone .camada-titulo2 .linha-mascara{
  transform:translate3d(0, calc((1 - var(--e-titulo2)) * 32px), 0)
}
html.sem-drone .camada-contexto{
  transform:translate3d(0, calc((1 - var(--e-contexto)) * 8px), 0)
}
html.sem-drone .camada-foto{
  transform:translate3d(0, calc((1 - var(--e-foto)) * 12px), 0)
    scale(calc(.99 + .01 * var(--e-foto)))
}
html.sem-drone .abertura-rodape{
  margin-top:clamp(36px,8vw,64px)
}

@media (max-width:900px){
  .menu-links>a:not(.menu-contato){display:none}
  .abertura-cena{grid-template-columns:1fr;gap:clamp(36px,8vw,56px)}
  .abertura-visual{justify-self:center;width:min(100%,400px)}
  .abertura-rodape{grid-template-columns:1fr 2fr}
  .abertura-rodape .link-seta{grid-column:2;justify-self:start}
  .manifesto{grid-template-columns:1fr 1fr;gap:45px}
  .secao-cabecalho{grid-template-columns:1fr}
  .servicos-titulo{margin-bottom:48px}
  .servico{grid-template-columns:1fr 36px;gap:16px}
  .servico p{grid-column:1;grid-row:2}
  .servico-icone{grid-column:2;grid-row:1}
  .etapas{grid-template-columns:1fr 1fr}
  .etapas li:nth-child(2){border-right:0}
  .etapas li:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--processo-tinta) 22%,transparent)}
  /* narrativa: deslocamentos e rotação menores no tablet/mobile */
  .narrativa{
    --rx-y:9px; --rx-x:5px; --rx-rot:.35deg; --rx-scale:.016;
    --rx-balanco-x:2.5px; --rx-balanco-rot:.2deg
  }
  .narrativa-image{
    clip-path:inset(calc((1 - var(--ni)) * 5%) 0 calc((1 - var(--ni)) * 2.5%) 0)
  }
  .camada-foto{
    transform:translate3d(0, calc((1 - var(--e-foto)) * 18px + var(--n-passagem, 0) * -10px), 0)
      scale(calc(.98 + .02 * var(--e-foto)))
  }
  .abertura-foto{transform:rotate(calc((1 - var(--e-foto)) * -.55deg))}
}

@media (max-width:620px){
  main{--menu-h:72px}
  .tema-botao{width:38px;height:38px}
  .menu-contato{padding:10px 13px}.menu-contato-texto{font-size:0}.menu-contato-texto::after{content:"Contato";font-size:11px}
  .titulo-gigante{font-size:clamp(49px,15vw,78px);line-height:.9}
  .linha-direita{text-align:left;padding-left:9vw}
  .abertura-rodape{grid-template-columns:1fr;gap:28px}
  .abertura-rodape .link-seta{grid-column:auto}
  .manifesto{grid-template-columns:1fr}
  .manifesto-texto{padding-top:25px}
  .galeria{grid-template-columns:1fr}
  .projeto-retrato{margin-top:50px;width:82%;margin-left:auto}
  .projeto-detalhe{grid-column:auto;width:88%;margin:50px 0 0}
  .servico{grid-template-columns:1fr 30px;gap:12px;padding-block:28px}
  .servico p{font-size:13px}
  .etapas{grid-template-columns:1fr}
  .etapas li,.etapas li+li{padding:24px 0 35px;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--processo-tinta) 22%,transparent);min-height:0}
  .etapas h3{margin:28px 0 12px}
  .depoimento{grid-template-columns:1fr}
  .depoimento-foto{width:78%;height:auto;aspect-ratio:4/5}
  .rodape-site{grid-template-columns:1fr;gap:24px;text-align:center}
  .rodape-site>.marca{justify-self:center}.rodape-site>p{margin:0}.rodape-site>div{justify-content:center}
  .convite-orbita{width:100px;height:100px;right:-25px}
}

@media (prefers-reduced-motion:reduce){
  main{
    --e:1; --e-papel:1; --e-faixa:1; --e-contexto:1;
    --e-titulo1:1; --e-titulo2:1; --e-foto:1; --e-menu:1;
    --e-rodape:1; --e-tracos:1;
    background:var(--papel);box-shadow:var(--sombra-main)
  }
  .narrativa,.narrativa-item{
    --n:1; --n-in:1; --n-mid:1; --n-out:0; --n-passagem:0; --ni:1; --balanco:0;
    --reveal:1; --reveal-title:1; --reveal-text:1; --reveal-image:1; --reveal-detail:1
  }
  .revelar,.camada-contexto,.camada-titulo1 .linha-mascara,.camada-titulo2 .linha-mascara,
  .camada-foto,.camada-rodape,.abertura-foto,.menu-site,.menu-site .marca,.menu-site .menu-links,.faixa,
  .narrativa-titulo,.narrativa-texto,.narrativa-image,.narrativa-detail,
  .manifesto .imagem-editorial,.manifesto-texto,.manifesto-texto h3,
  #trabalhos .projeto,#trabalhos .projeto-imagem,#trabalhos .projeto-info,#servicos .servico,
  .processo-frase span,.etapas li,.depoimento-foto,.depoimento .aspas,.depoimento blockquote>p,
  .depoimento blockquote footer,#contato h2,#contato .btn,#contato .contato,#contato .convite-orbita{
    opacity:1;transform:none;filter:none;clip-path:none
  }
  .abertura-tracos .traco-quadro,.abertura-tracos .traco-canto{stroke-dashoffset:0}
  .abertura-tracos .traco-orbita,.abertura-tracos .traco-raio{animation:none;opacity:1}
  .marquee-faixa,.convite-orbita,
  .abertura-foto img,.fundo-orbita,.fundo-faixa{animation:none}
  .abertura-foto img{transform:scale(1.04)}
  .fundo-vivo,.luz-rastro{display:none}
}