/* ==========================================================================
   mauriciopola.com.br — componentes
   Escrito sobre base.css (sistema Terascape).
   Regras herdadas que não se quebram aqui:
     · uma família só, peso 400. 500 apenas em label e UI de 14px.
     · um raio só: 4px. Sem sombra.
     · neutros mais a cor das fotografias. Sem cor de acento na interface.
     · hover não muda cor: move sublinhado, gira ícone, vira texto em 3D.
   ========================================================================== */

/* ---------- 1. Utilidades ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; left:var(--gutter); top:-100px; z-index:20;
  background:var(--text-primary); color:var(--text-invert);
  padding:10px 18px; border-radius:var(--radius);
  font-size:var(--fs-caption); letter-spacing:var(--ls-caption);
  transition:top var(--dur-ui) var(--ease-ui);
}
.skip:focus{ top:16px; }

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

/* laranja de marca: uma palavra da hero, os hovers de serviço e o card
   do processo quando ele se sobrepõe. Fora isso, a página é neutra. */
:root{
  --brand: #F98010;
  /* o mesmo laranja escurece quando vira texto sobre fundo claro: #F98010
     sobre branco dá 2,6:1 e reprova até no tamanho grande */
  --brand-ink: #E65C00;
}
.accent{ color:var(--brand-ink); }

/* ---------- 2. Placeholder de imagem ----------
   Some junto com a tag <img> que entrar no lugar. */
.ph{
  position:relative; width:100%;
  background:var(--bg-alt);
  box-shadow:inset 0 0 0 1px var(--line-faint);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}
.ph__tag{
  font-size:10px; line-height:14px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--text-muted);
  padding:4px 8px; max-width:88%;
  overflow-wrap:anywhere; text-align:center;
}
.ph--1x1{aspect-ratio:1/1}   .ph--4x5{aspect-ratio:4/5}
.ph--3x4{aspect-ratio:3/4}   .ph--2x3{aspect-ratio:2/3}
.ph--4x3{aspect-ratio:4/3}   .ph--16x9{aspect-ratio:16/9}
.ph--9x16{aspect-ratio:9/16}

/* ---------- 3. Header ---------- */
.site-header__id{ display:flex; align-items:center; gap:16px; }
.site-header__logo{ font-size:var(--fs-body-m); line-height:var(--lh-body-m); }
.site-header__sep{ width:1px; height:28px; background:var(--line); }

.site-header__nav{ display:flex; align-items:center; gap:24px; }
.site-header__quiet{ color:var(--text-secondary); transition:color var(--dur-ui) var(--ease-ui); }
.site-header__quiet:hover{ color:var(--text-primary); }

.menu-btn{
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit; font-family:inherit;
  font-size:var(--fs-body-m); line-height:var(--lh-body-m);
  height:var(--lh-body-m);
}

/* ---------- 4. Menu ---------- */
.menu-scrim{
  position:fixed; inset:0; z-index:8;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-ui) var(--ease-ui);
}
.menu-scrim.is-on{ opacity:1; }

.menu{
  position:fixed; top:0; right:0; bottom:0; z-index:9;
  width:min(460px,92vw);
  background:var(--bg);
  border-left:1px solid var(--line-soft);
  padding:calc(var(--header-h) + 40px) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--gap-l);
  clip-path:inset(0% 0% 0% 100%);
  transition:clip-path var(--dur-reveal) var(--ease-reveal);
  overflow-y:auto;
}
.menu.is-open{ clip-path:inset(0%); }

.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:baseline; gap:20px;
  padding:10px 0;
  border-bottom:1px solid var(--line-faint);
  opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-spring) var(--ease-spring),
             transform var(--dur-spring) var(--ease-spring);
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu.is-open .menu__list a:nth-child(1){ transition-delay:200ms; }
.menu.is-open .menu__list a:nth-child(2){ transition-delay:260ms; }
.menu.is-open .menu__list a:nth-child(3){ transition-delay:320ms; }
.menu.is-open .menu__list a:nth-child(4){ transition-delay:380ms; }
.menu.is-open .menu__list a:nth-child(5){ transition-delay:440ms; }
.menu.is-open .menu__list a:nth-child(6){ transition-delay:500ms; }
.menu.is-open .menu__list a:nth-child(7){ transition-delay:560ms; }
.menu__num{ color:var(--text-muted); width:44px; flex:none; }

.menu__foot{ display:flex; flex-direction:column; gap:var(--gap-xs); }
.menu__links{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }

/* ---------- 5. Hero ---------- */
.hero{
  /* o texto precisa de ar entre ele e a barra do topo */
  padding:calc(var(--header-h) + 128px) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; gap:var(--gap-l);
}
.hero__type{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--gap-s);
}
.hero__claim{ max-width:none; }

.hero__stage{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--gap-2xs);
}
/* A hero é o maior elemento da primeira tela, e o Google mede o site pelo
   instante em que ela termina de aparecer. O wipe dela era feito pelo
   motion.js, então só começava quando o JavaScript terminava de baixar: no
   telefone, 3,4s. Aqui ele é uma animação de CSS, que roda no primeiro
   quadro. Mesmo desenho, sem depender de script. O resto da página continua
   revelando pelo motion.js, em 1300ms. */
.hero__stage{ animation:hero-wipe 620ms var(--ease-reveal) both; }
@keyframes hero-wipe{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}

.hero__support{
  display:grid; grid-template-columns:200px minmax(0,1fr) auto;
  align-items:start; gap:var(--gap-s);
  padding-top:var(--gap-xs); border-top:1px solid var(--line-faint);
}
.hero__lead{ max-width:60ch; }

/* ---------- 7. Trabalhos ---------- */
/* o título abre a seção pela esquerda; a régua leva o olho até o eyebrow */
.section-head .title{ text-align:left; }
.section-head .eyebrow{ text-align:right; }

.works__meta{
  display:flex; flex-wrap:wrap; gap:var(--gap-s);
  padding-bottom:var(--gap-xs); margin-bottom:var(--gap-s);
  border-bottom:1px solid var(--line-faint);
}

.wall{ column-count:6; column-gap:12px; }
.piece{ break-inside:avoid; display:inline-block; width:100%; margin:0 0 12px; }

/* Entrada da parede. Sem clip-path aqui de propósito: a peça precisa
   subir e sair do desfoque, e máscara não faz isso. É também o que
   destrava o IntersectionObserver, que o clip-path zeraria. */
.js .piece{
  opacity:0;
  transform:translateY(140px);
  filter:blur(10px);
}
.js .piece.is-in{
  opacity:1;
  transform:none;
  filter:blur(0);
  /* power3.out */
  transition:opacity 800ms cubic-bezier(.215,.61,.355,1),
             transform 800ms cubic-bezier(.215,.61,.355,1),
             filter 800ms cubic-bezier(.215,.61,.355,1);
}
.piece__btn{
  display:block; width:100%; padding:0; margin:0;
  background:none; border:0; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;
  transform:scale(1);
  transition:opacity var(--dur-ui) var(--ease-ui),
             transform 300ms cubic-bezier(.25,.46,.45,.94);
}
.piece__btn img,
.piece__btn .ph{
  border-radius:0;
  transition:transform 500ms var(--ease-enter);
}
.piece__btn:hover,
.piece__btn:focus-visible{ transform:scale(.95); }

.wall.has-active .piece:not(.is-active) .piece__btn{ opacity:.4; }
.piece.is-active .piece__btn{ box-shadow:0 0 0 1px var(--text-primary); }

/* ---------- 8. Ficha do projeto ---------- */
.ficha{
  position:fixed; z-index:12;
  right:var(--gutter); bottom:var(--gutter);
  width:min(280px,calc(100vw - var(--gutter) * 2));
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  border-radius:var(--radius);
  padding:20px;
  clip-path:inset(100%);
  transition:clip-path 600ms var(--ease-reveal);
}
.ficha.is-on{ clip-path:inset(0%); }
.ficha__close{
  position:absolute; top:12px; right:12px;
  background:none; border:0; padding:4px; cursor:pointer;
  color:var(--text-muted); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.ficha__close:hover{ color:var(--text-primary); }
.ficha__name{ margin:0 0 12px; padding-right:52px; }
.ficha__dl{ margin:0; display:flex; flex-direction:column; }
.ficha__dl > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-top:1px solid var(--line-faint);
}
.ficha__dl dt, .ficha__dl dd{ margin:0; }
.ficha__dl dd{ text-align:right; }

/* ---------- 9. Serviços ---------- */
.list{ list-style:none; margin:0; padding:0; }
.list li{
  display:grid; grid-template-columns:minmax(0,1fr) 220px;
  align-items:baseline; gap:var(--gap-s);
  padding:24px 0; border-top:1px solid var(--line-faint);
}
.list li:last-child{ border-bottom:1px solid var(--line-faint); }
.list__note{ text-align:right; }

/* ---------- 10. Processo ---------- */
.process{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--gap-m);
  align-items:start;
}
.process__intro{ position:sticky; top:var(--sticky-top); }
.process__intro p{ max-width:36ch; }
.process__stack{ display:flex; flex-direction:column; gap:var(--gap-l); padding-bottom:var(--gap-xl); }
.process-card{
  background:var(--bg-alt);
  /* altura fixa: com min-height cada card ficava de um tamanho, e a pilha
     perdia o alinhamento das bordas ao empilhar */
  height:clamp(300px,38vh,360px);
  justify-content:space-between;
  overflow:hidden;
}
/* cada um gruda 26px abaixo do anterior: é assim que a pilha aparece
   como pilha, com a borda dos de baixo à mostra */
.process-card:nth-child(1){ top:var(--sticky-top); margin-top:0; }
.process-card:nth-child(2){ top:calc(var(--sticky-top) + 26px); margin-top:0; }
.process-card:nth-child(3){ top:calc(var(--sticky-top) + 52px); margin-top:0; }
.process-card__head{ display:flex; flex-direction:column; gap:var(--gap-xs); }
.process-card__head p{ max-width:46ch; }
.process-card__num{ align-self:flex-end; line-height:1; }

/* ---------- 11. Praças ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-faint);
}
.stat{
  display:flex; flex-direction:column; gap:8px;
  padding:24px 0 24px 24px;
  border-left:1px solid var(--line-faint);
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat__n{ color:var(--text-strong); }

.lugares{
  list-style:none; margin:var(--gap-m) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-faint);
}
.lugares li{
  padding:20px 0 20px 24px;
  border-left:1px solid var(--line-faint);
  border-bottom:1px solid var(--line-faint);
  color:var(--text-secondary);
}
.lugares li:nth-child(4n+1){ border-left:0; padding-left:0; }

/* ---------- 12. Sobre ---------- */
.about{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--gap-xl);
  align-items:start;
}
.about__figure{ margin:0; display:flex; flex-direction:column; gap:14px; }
.about__cap{ display:flex; justify-content:space-between; gap:16px; }
.about__portrait{ aspect-ratio:.9; }
.about__text{ display:flex; flex-direction:column; gap:var(--gap-s); max-width:56ch; }
.about__text p{ line-height:1.65; }
/* a primeira frase carrega a coluna: sem ela o texto não segura a foto */
.about__text .t-heading-m{ letter-spacing:-.02em; }
/* três linhas fixas: cada frase é uma linha, e a coluna solta a largura
   para a primeira caber inteira. Em tela estreita volta a quebrar solto. */
.about__lead{ line-height:1.3 !important; width:max-content; max-width:none; }
.about__lead > span{ display:block; white-space:nowrap; }
@media (max-width:1199px){
  .about__lead{ width:auto; }
  .about__lead > span{ display:inline; white-space:normal; }
}

/* ---------- 13. Depoimentos ---------- */
.quotes{ display:flex; flex-direction:column; }
.quote{
  margin:0; padding:40px 0;
  border-top:1px solid var(--line-faint);
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:var(--gap-l); align-items:start;
}
.quote:last-child{ border-bottom:1px solid var(--line-faint); }
.quote blockquote{ margin:0; max-width:62ch; font-size:clamp(16px,1.25vw,19px); line-height:1.6; font-weight:300; letter-spacing:-.005em; }
.quote figcaption{ display:flex; flex-direction:column; gap:4px; padding-top:3px; }

/* ---------- 15. Rodapé ---------- */
.foot{ padding:48px var(--gutter) 20px; }
.foot__word{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-bottom:var(--gap-xl);
}

.foot__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap-s);
  padding-top:24px; border-top:1px solid var(--line-faint);
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.foot__col .eyebrow{ margin-bottom:8px; }
.foot__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  margin-top:28px; padding-top:var(--gap-xs);
  border-top:1px solid var(--line-faint);
}

/* ---------- 16. Responsivo ---------- */
@media (max-width:1400px){ .wall{ column-count:5; } }
@media (max-width:1199px){
  .wall{ column-count:4; }
  .hero__support{ grid-template-columns:160px minmax(0,1fr); }
  .hero__support .link-btn{ grid-column:2; justify-self:start; }
  .process{ grid-template-columns:1fr; }
  .process__intro{ position:static; }
  .list li{ grid-template-columns:minmax(0,1fr) 180px; }
  .quote{ grid-template-columns:minmax(0,1fr) 200px; gap:var(--gap-m); }
}
@media (max-width:809px){
  .wall{ column-count:2; }
  .site-header__id p{ display:none; }
  .site-header__sep{ display:none; }
  .site-header__quiet{ display:none; }
  .hero__support{ grid-template-columns:1fr; }
  .hero__support .link-btn{ grid-column:1; }
  .about{ grid-template-columns:1fr; }
  .list li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .list__note{ text-align:left; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line-faint); }
  .lugares{ grid-template-columns:repeat(2,1fr); }
  .lugares li:nth-child(odd){ border-left:0; padding-left:0; }
  .quote{ grid-template-columns:1fr; gap:20px; }
  .quote figcaption{ padding-top:0; }
  .foot__grid{ grid-template-columns:1fr; gap:var(--gap-m); }
  .ficha{ right:12px; left:12px; bottom:12px; width:auto; }
}

/* ---------- 17. Ajuste do roll 3D ----------
   No base o texto de baixo só gira, e fica visível por trás do de cima.
   Ele precisa começar fora da caixa de recorte e subir na virada. */
.roll-3d{ height:var(--lh-body-m); }
.roll-3d > .top,
.roll-3d > .bottom{ transform-origin:left center; }
.roll-3d > .top,
.roll-3d > .bottom{ transition:transform 300ms var(--ease-enter), opacity 200ms var(--ease-enter); }
/* opacidade junto com o deslocamento: só o transform deixava uma sombra do
   texto de baixo aparecendo na borda da caixa de recorte */
.roll-3d > .bottom{
  opacity:0;
  transform:translateY(160%) perspective(500px) rotate(-14deg) rotateY(40deg);
}
.roll-3d:hover > .bottom{ opacity:1; }
.roll-3d:hover > .top{ opacity:0; }
.roll-3d:hover > .top{
  transform:translateY(-160%) perspective(500px) rotate(14deg) rotateY(-40deg);
}
.roll-3d:hover > .bottom{ transform:none; }

/* ---------- 18. Header sobre conteúdo ----------
   O header é transparente por definição do sistema. Quando um título de
   seção passa por baixo dele, os dois se sobrepõem. Uma lâmina de vidro
   a partir do primeiro scroll resolve sem sair do vocabulário. */
/* O desfoque precisa estar no próprio header: em pseudo-elemento com
   z-index negativo o backdrop-filter não pega o que passa por baixo. */
.site-header{
  background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:background var(--dur-ui) var(--ease-ui),
             -webkit-backdrop-filter var(--dur-ui) var(--ease-ui),
             backdrop-filter var(--dur-ui) var(--ease-ui);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  backdrop-filter:blur(12px) saturate(1.4);
}

/* ==========================================================================
   19. SERVIÇOS — interação no hover
   A linha inteira reage: o nome anda para a direita, tudo vira laranja e
   um fio da mesma cor cresce por baixo. Nenhuma cor entra sem o mouse.
   ========================================================================== */
.list li{
  position:relative;
  transition:color 400ms var(--ease-enter);
}
.list li::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 600ms var(--ease-enter);
}
.list li:hover::after,
.list li:focus-within::after{ transform:scaleX(1); }

.list__name,
.list__note{
  transition:color 400ms var(--ease-enter), transform 600ms var(--ease-enter);
}
.list li:hover .list__name,
.list li:focus-within .list__name{
  color:var(--brand);
  transform:translateX(14px);
}
.list li:hover .list__note,
.list li:focus-within .list__note{ color:var(--brand); }

/* ==========================================================================
   20. PROCESSO — o card acende quando encosta e passa a cobrir o anterior
   ========================================================================== */
.process-card{
  transition:background 500ms var(--ease-enter);
}
/* laranja cheio, sem opacidade: os cards se empilham e qualquer
   transparência deixaria o de baixo aparecer através do de cima */
.process-card.is-stuck{ background:#FA9049; }
.process-card.is-stuck,
.process-card.is-stuck .t-second{ color:#121212; }
.process-card.is-stuck .process-card__num{ color:rgba(18,18,18,.5); }
.process-card__num{ transition:color 500ms var(--ease-enter); }
.process-card.is-stuck .process-card__num{ color:#121212; }   /* laranja sobre laranja sumia */

/* ==========================================================================
   21. PROJETO ABERTO — pop-up
   Fundo escuro e desfocado, imagem grande, ficha embaixo.
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:72px var(--gutter) 32px;
}
.lb__scrim{
  position:absolute; inset:0;
  background:rgba(8,8,8,.78);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
  backdrop-filter:blur(16px) saturate(.9);
  opacity:0;
  transition:opacity 420ms var(--ease-enter);
}
.lb.is-on .lb__scrim{ opacity:1; }

.lb__frame{
  position:relative; z-index:1; margin:0;
  display:flex; flex-direction:column; gap:24px;
  width:100%; max-width:1480px; max-height:100%;
  opacity:0; transform:translateY(14px) scale(.99);
  transition:opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter);
}
.lb.is-on .lb__frame{ opacity:1; transform:none; }

.lb__media{ position:relative; display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:0; }
/* texto alternativo não se desenha: ele é para quem ouve a página, e na tela
   só aparecia como um flash de letras enquanto a imagem não chegava */
.lb__media img{ color:transparent; }
.lb__media img{
  flex:0 0 auto;
  /* a altura da janela menos o topo, a ficha e o respiro de baixo: a peça
     ocupa tudo o que sobra, sem empurrar a ficha para fora da tela. */
  max-height:min(calc(100vh - 250px), 1000px); width:auto; max-width:100%;
  border-radius:var(--radius);
}
.lb__media .ph{
  /* flex:none, senão o stretch do flex atropela a altura e a proporção */
  flex:0 0 auto;
  height:min(calc(100vh - 250px), 1000px); max-height:100%; width:auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.lb__media .ph__tag{ color:rgba(255,255,255,.45); }

.lb__info{
  color:var(--text-invert);
  display:flex; flex-direction:column; gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
}
.lb__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.lb__count{ color:rgba(255,255,255,.45); }
.lb__dl{ margin:0; display:flex; flex-wrap:wrap; gap:8px 40px; }
.lb__dl > div{ display:flex; gap:10px; }
.lb__dl dt, .lb__dl dd{ margin:0; }
.lb__dt{ color:rgba(255,255,255,.45); }

.lb__close{
  position:absolute; top:28px; right:var(--gutter); z-index:2;
  background:none; border:0; padding:6px; cursor:pointer;
  color:rgba(255,255,255,.6); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.lb__close:hover{ color:var(--text-invert); }

.lb__nav{
  position:absolute; top:50%; z-index:2;
  width:48px; height:48px; margin-top:-24px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.22);
  border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.7);
  transition:border-color var(--dur-ui) var(--ease-ui),
             color var(--dur-ui) var(--ease-ui);
}
.lb__nav:hover{ border-color:rgba(255,255,255,.6); color:var(--text-invert); }
.lb__nav--prev{ left:calc(var(--gutter) / 2); }
.lb__nav--next{ right:calc(var(--gutter) / 2); }

@media (max-width:809px){
  .hero{ padding-top:calc(var(--header-h) + 64px); }
  /* 100svh é a altura da tela COM as barras do navegador à mostra. Com
     100vh, o pop-up ficava mais alto que o visível e as setas iam parar
     atrás da barra de baixo do Safari — apareciam cortadas no canto. */
  .lb{ padding:64px 16px 28px; height:100svh; }
  .lb__media .ph{ height:auto; width:100%; }
  .lb__media img{ max-height:min(calc(100svh - 320px), 620px); }
  /* as setas vão para o canto de baixo à direita, onde cai o polegar e não
     há texto por baixo, com 44px de lado (o mínimo confortável no toque) */
  .lb__nav{ top:auto; bottom:24px; margin-top:0; width:44px; height:44px; }
  .lb__nav--prev{ left:auto; right:76px; }
  .lb__nav--next{ right:20px; left:auto; }
  .lb__dl{ gap:6px 24px; }
  .hero__claim br{ display:none; }
}

/* ==========================================================================
   22. [hidden] precisa vencer
   Qualquer regra de display escrita numa classe atropela o [hidden] que o
   navegador aplica, porque a folha do autor sempre ganha da folha do
   navegador. Sem esta linha o pop-up fica aberto e invisível por cima da
   página, comendo todo clique.
   ========================================================================== */
[hidden]{ display:none !important; }


/* ==========================================================================
   24. LABELS
   Caixa alta, preto, 12px, espaçado e em bold. Vale para todos os rótulos
   de seção — a numeração (01) continua entre parênteses, porque ali o
   parêntese é o que separa número de conteúdo.
   ========================================================================== */
.eyebrow{
  font-size:12px;
  line-height:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-strong);
}

/* ==========================================================================
   25. RODAPÉ
   ========================================================================== */
.foot__link{
  font-size:13px;
  line-height:20px;
  letter-spacing:-.005em;
  color:var(--text-secondary);
  transition:color var(--dur-ui) var(--ease-ui);
}
.foot__link:hover{ color:var(--text-primary); }
.foot__col .eyebrow{ margin-bottom:12px; }
.foot__bar .t-caption{ font-size:11px; }



/* ==========================================================================
   23. MENU — fechar e hover
   ========================================================================== */
.menu__close{
  position:absolute; top:28px; right:var(--gutter);
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  color:var(--text-primary); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.menu__close svg{ transition:transform 500ms var(--ease-enter); }
.menu__close:hover{ color:var(--brand); }
.menu__close:hover svg{ transform:rotate(90deg); }
.menu__close .eyebrow{ color:inherit; }

.menu__list a{
  position:relative;
  padding:14px 0;
  overflow:hidden;
}
/* o fio laranja cresce da esquerda, e a palavra anda com ele */
.menu__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 600ms var(--ease-enter);
}
.menu__list a:hover::after,
.menu__list a:focus-visible::after{ transform:scaleX(1); }

.menu__list a > span{
  display:inline-block;
  transition:transform 600ms var(--ease-enter), color 400ms var(--ease-enter);
}
.menu__list a:hover > span,
.menu__list a:focus-visible > span{
  transform:translateX(16px);
  color:var(--brand);
}

/* ==========================================================================
   24. LINKS DE TEXTO — o laranja entra no sublinhado e na seta
   ========================================================================== */
.link-btn::after{ background:var(--brand); }
.link-btn .icon{
  transition:transform 400ms var(--ease-enter), color 300ms var(--ease-enter);
}
.link-btn:hover .icon,
.link-btn:focus-visible .icon{ color:var(--brand); }

/* ==========================================================================
   26. NÚMEROS DE ALCANCE
   ========================================================================== */
.stat__n{ font-variant-numeric:tabular-nums; }



/* ==========================================================================
   27. SEÇÕES EM PRETO
   Trocar os tokens de cor no contexto da seção basta: base.css inteiro lê
   essas variáveis, então tudo dentro vira claro sem uma regra a mais.
   ========================================================================== */
.section--dark{
  background:#121212;
  --text-primary:   #FAFAFA;
  --text-secondary: rgba(250,250,250,.72);
  --text-muted:     rgba(255,255,255,.58);  /* era .42: 4,1:1 */
  --text-strong:    #FFFFFF;
  --line:           rgba(255,255,255,.18);
  --line-soft:      rgba(255,255,255,.14);
  --line-faint:     rgba(255,255,255,.11);
  --bg-alt:         rgba(255,255,255,.06);
  color:var(--text-primary);
}
.section--dark .ph{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.section--dark .ph__tag{ color:rgba(255,255,255,.58); }

/* ==========================================================================
   28. LOGO
   Assinatura em SVG, cor herdada do contexto. Bem pequena nos dois lugares.
   ========================================================================== */
.logo{
  display:block;
  height:11px; width:auto;
  color:currentColor;
}
.site-header__logo{
  display:flex; align-items:center;
  color:var(--text-primary);
  transition:opacity var(--dur-ui) var(--ease-ui);
}
.site-header__logo:hover{ opacity:.6; }

.foot__brand{ margin:0 0 32px; }
.foot__brand .logo{ height:18px; }
@media (max-width:809px){
  .foot__brand{ margin-bottom:24px; }
  .foot__brand .logo{ height:13px; }
}

/* ==========================================================================
   29. TÍTULOS DECIFRADOS
   O caractere ainda embaralhado fica laranja e some junto com o embaralho.
   ========================================================================== */
/* O embaralho fica fora do fluxo, por cima de uma cópia invisível do texto
   real. Antes ele ocupava o lugar do título, e como os caracteres sorteados
   são mais largos, a linha quebrava e a página inteira pulava.

   `white-space:normal` é obrigatório aqui: com `pre-wrap`, o espaço no fim
   da linha contava na conta da largura, a camada de cima ficava alguns
   pixels mais larga que o fantasma e empurrava a última palavra para uma
   segunda linha, que caía fora da caixa. O título aparecia cortado. */
.dec-host{ position:relative; }
.dec__fantasma{ visibility:hidden; }
.dec{ position:absolute; inset:0; white-space:normal; }
.dec__p{ white-space:nowrap; }
.dec__c{ transition:color 120ms linear; }
.dec__c--enc{ color:var(--brand); }

/* ==========================================================================
   30. ENTRADA
   Painel claro com as saudações. Sai subindo, com a borda de baixo curva.
   ========================================================================== */
.intro{
  position:fixed; inset:0; z-index:100;
  background:#121212;
  display:flex; align-items:center; justify-content:center;
  will-change:transform, border-radius;
}
.intro__word{
  font-family:var(--font-sans);
  font-size:clamp(38px,7vw,86px);
  line-height:1; font-weight:300;
  letter-spacing:-.035em;
  color:#FAFAFA;
  opacity:0;
}
.intro.is-out{
  animation:intro-out 820ms cubic-bezier(.76,0,.24,1) forwards;
}
/* No TELEFONE não há cortina.

   Ela é bonita e custa caro onde mais gente entra: é a primeira visita que o
   Google mede, e ele mede quando a tela para de mudar. Mesmo reduzida a uma
   saudação de um segundo, animada em CSS, a tela preta era o que sobrava
   entre o primeiro pixel e o site. Aqui ela nem chega a ser desenhada: o
   visitante de celular cai direto na hero. No computador, onde a página
   inteira chega em meio segundo, a sequência das seis saudações continua. */
@media (max-width:809px){
  .intro{ display:none !important; }
}
}
@keyframes intro-out{
  0%{
    transform:translateY(0);
    border-radius:0 0 0 0;
  }
  35%{
    border-radius:0 0 50% 50% / 0 0 9% 9%;
  }
  100%{
    transform:translateY(-104%);
    border-radius:0 0 50% 50% / 0 0 3% 3%;
  }
}
.intro[hidden]{ display:none !important; }

/* sem animação de entrada: a cortina simplesmente não existe */
@media (prefers-reduced-motion: reduce){
  .intro{ display:none !important; }
}

/* ==========================================================================
   31. HEADER SOBRE FUNDO PRETO
   A lâmina de vidro clara cortaria as seções escuras ao meio. Ela inverte
   quando o que passa por baixo é preto.
   ========================================================================== */
.site-header.is-dark{ color:#FAFAFA; }
.site-header.is-dark.is-scrolled{
  background:rgba(18,18,18,.72);
}
.site-header.is-dark .site-header__logo{ color:#FAFAFA; }
.site-header.is-dark .site-header__quiet{ color:rgba(250,250,250,.6); }
.site-header.is-dark .site-header__quiet:hover{ color:#FAFAFA; }
.site-header.is-dark .site-header__sep{ background:rgba(255,255,255,.24); }
.site-header.is-dark .t-second{ color:rgba(250,250,250,.6); }

/* ==========================================================================
   32. GALERIA EM ACORDEÃO — banner da hero
   O painel aberto ocupa 62% da faixa; os outros quatro dividem o resto.
   Sem GSAP: o mesmo movimento sai de uma transição de flex-grow com a
   curva equivalente à power4.out.
   ========================================================================== */
.accordion-gallery{
  --ag-gap:6px;
  --ag-radius:5px;
  --ag-fechado:64px;
  --ag-rmax:1.8771;    /* a mais larga das cinco imagens da hero */
  --ag-max:620px;
  /* A altura da faixa é a maior que ainda deixa a imagem mais larga caber
     inteira com os outros quatro painéis fechados. Esta é a mesma conta que
     o site.js fazia — e fazia tarde: até o script chegar, o painel aberto
     ficava do tamanho dos outros, e quando ele crescia empurrava meia
     página para baixo. No telefone isso sozinho valia 0,2 de CLS, o dobro
     do limite. Agora a conta está aqui, e o JavaScript só mantém. */
  --ag-height:clamp(240px, calc((min(100vw - 2 * var(--gutter), var(--container))
              - 4 * var(--ag-fechado) - 4 * var(--ag-gap)) / var(--ag-rmax)), var(--ag-max));
  --ag-overlay:#0A0A0A;
  /* grow = r*(n-1)/(1-r), com r=0.62 e n=5 */
  --ag-grow:6.526;
  --ag-ease:cubic-bezier(.165,.84,.44,1);
  --ag-dur:650ms;

  display:flex;
  gap:var(--ag-gap);
  width:100%;
  height:var(--ag-height);
}

/* --w e --h vêm do HTML, com os pixels reais da imagem daquele painel */
.ag-panel.is-open{ flex:0 0 calc(var(--ag-height) * var(--w) / var(--h)); }

.ag-panel{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:var(--ag-radius);
  background:var(--bg-alt);
  display:block;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:flex-grow var(--ag-dur) var(--ag-ease), flex-basis var(--ag-dur) var(--ag-ease);
}

.ag-panel__frame{
  position:absolute; inset:0;
  overflow:hidden; border-radius:inherit;
}
.ag-panel__media{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  /* a mídia guarda a largura do painel aberto: assim a imagem não estica
     nem escorrega quando o painel encolhe, ela só é recortada */
  width:calc(var(--ag-height) * var(--w) / var(--h));
  height:100%;
  filter:grayscale(1);
  transition:filter var(--ag-dur) var(--ag-ease);
}
.ag-panel__media img,
.ag-panel__media .ph{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  user-select:none;
}
.ag-panel.is-open .ag-panel__media{ filter:grayscale(0); }

.ag-panel__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:rgba(10,10,10,.34);
  transition:background var(--ag-dur) var(--ag-ease);
}
.ag-panel.is-open .ag-panel__overlay{ background:rgba(10,10,10,0); }

.ag-panel:focus-visible{
  outline:1px solid var(--text-primary);
  outline-offset:2px;
}

@media (max-width:1199px){
  .accordion-gallery{ --ag-max:500px; }
}
@media (max-width:809px){
  .accordion-gallery{ --ag-max:400px; }
}
@media (max-width:520px){
  .accordion-gallery{
    flex-direction:column;
    height:auto;
    --ag-grow:3.2;
  }
  .ag-panel{ flex:0 0 var(--ag-fechado); min-height:var(--ag-fechado); }
  /* em coluna a largura é toda a tela, então a altura sai da proporção */
  .ag-panel.is-open{ flex:0 0 auto; aspect-ratio:var(--w) / var(--h); }
  .ag-panel__media{ width:100%; height:100%; left:0; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .ag-panel, .ag-panel__media, .ag-panel__overlay{ transition:none; }
}

/* ==========================================================================
   33. MARCAS — três faixas em loop
   Faixas 1 e 3 andam para a esquerda, a 2 para a direita, a 100px por
   segundo. O conjunto de logos é clonado pelo JS até cobrir a tela, e a
   faixa anda exatamente a largura de um conjunto: a emenda não aparece.
   ========================================================================== */
.marcas{ display:flex; flex-direction:column; gap:var(--gap-s); }
.marcas__chamada{ max-width:58ch; text-wrap:balance; }
.marcas__apoio{ max-width:82ch; text-wrap:balance; }

.marcas__faixas{
  display:flex; flex-direction:column; gap:var(--gap-s);
  /* sangra até a borda da tela: a faixa entra e sai pelas laterais */
  margin-inline:calc(-1 * var(--gutter));
  margin-top:var(--gap-l);   /* soma com o gap da seção: o texto respira antes das faixas */
}

/* Sem JavaScript os logos ficam numa grade parada, que é melhor do que
   sumirem. Com ele, a lista some e vira faixa. */
.marcas__logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:32px 56px; margin:0; padding:0 var(--gutter); list-style:none;
}

.loop{
  --loop-gap:88px;
  position:relative;
  overflow:hidden;
  padding-block:10px;
  /* as pontas somem no fundo, qualquer que seja a cor da seção */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.loop__track{
  display:flex;
  width:max-content;
  animation:loop-esq var(--loop-dur, 40s) linear infinite;
  will-change:transform;
}
.loop--dir .loop__track{ animation-name:loop-dir; }
/* hoverSpeed 0: a faixa para inteira quando o mouse entra */
.loop:hover .loop__track,
.loop.is-off .loop__track{ animation-play-state:paused; }

.loop__set{
  display:flex; align-items:center; flex:none;
  gap:var(--loop-gap);
  /* o zero da esquerda é obrigatório: <ul> nasce com 40px de recuo, e esse
     recuo só aparecia na emenda entre um conjunto e a cópia seguinte —
     88px de vão em toda a faixa e 128px ali, que é o ponto onde dava para
     ver onde a faixa terminava */
  padding:0 var(--loop-gap) 0 0;
  margin:0; list-style:none;
}
.loop__item{ flex:none; display:flex; align-items:center; justify-content:center; height:56px; }
.loop__item img{
  display:block;
  transition:transform 300ms var(--ease-ui);
}
/* scaleOnHover */
.loop__item:hover img{ transform:scale(1.2); }

@keyframes loop-esq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-1 * var(--set-w, 50%)),0,0); } }
@keyframes loop-dir{ from{ transform:translate3d(calc(-1 * var(--set-w, 50%)),0,0); } to{ transform:translate3d(0,0,0); } }

@media (max-width:809px){
  /* quatro faixas em vez de duas: cada uma fica mais curta, então os logos
     encolhem um pouco e o vão entre eles também */
  .marcas__faixas{ gap:6px; }
  .loop{ --loop-gap:48px; padding-block:6px; }
  .loop__item{ height:42px; }
  .loop__item img{ transform:scale(.78); }
  .loop__item:hover img{ transform:scale(.92); }
}
/* sem movimento: as faixas viram uma grade parada, sem os clones */
@media (prefers-reduced-motion: reduce){
  .loop{ -webkit-mask-image:none; mask-image:none; }
  .loop__track{ animation:none; width:auto; }
  .loop__set{ flex-wrap:wrap; justify-content:center; row-gap:24px; padding-inline:var(--gutter); }
  .loop__set[aria-hidden="true"]{ display:none; }
}

/* ==========================================================================
   34. RETRATO
   Preto e branco, contraste e grão já estão no arquivo. Sem filtro, sem
   mescla e sem parallax: a cada quadro de scroll esta foto não custa nada.
   ========================================================================== */
.about__portrait{ overflow:hidden; }
.about__portrait img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   35. CONTATO — bloco laranja inteiro, título grande à esquerda
   Laranja mais fechado que o da marca: com texto branco, o #F98010 dá
   2,6:1 de contraste e o texto some. Este dá 3,6:1, o suficiente para
   texto grande, e por isso o parágrafo aqui é grande.
   ========================================================================== */
.cta{
  --cta-bg:#E65C00;
  background:var(--cta-bg);
  color:#FFFFFF;
  padding:clamp(64px,9vh,104px) var(--gutter);
}
.cta__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-xl); align-items:center;
}
.cta__eyebrow{ display:block; margin-bottom:28px; color:#121212; }  /* branco sobre laranja dá 3,6:1 e reprova em 12px */
.cta__title{
  margin:0;
  font-size:clamp(56px,7.4vw,112px);
  line-height:.96; letter-spacing:-.04em; font-weight:300;
  max-width:5.4em;               /* quebra em duas linhas: "Vamos / conversar" */
}
.cta .dec__c--enc{ color:rgba(255,255,255,.5); }
.cta__side{ display:flex; flex-direction:column; align-items:flex-start; gap:36px; }
.cta__text{
  margin:0; max-width:24ch;
  font-size:clamp(24px,2.2vw,32px); line-height:1.22;   /* 24px é o piso do "texto grande" no contraste */ letter-spacing:-.02em; font-weight:300;
}
/* três linhas fixas no desktop; em tela estreita volta a quebrar solto */
.cta__text > span{ display:block; white-space:nowrap; }
@media (max-width:1199px){
  .cta__text > span{ display:inline; white-space:normal; }
}
.cta__acoes{
  display:inline-flex; flex-wrap:wrap; align-items:stretch; gap:6px;
  padding:6px;
  background:rgba(0,0,0,.16);
  border-radius:2px;
}
.cta-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:space-between; gap:40px;
  padding:8px 8px 8px 20px;
  border-radius:2px;
  font-size:15px; line-height:20px; letter-spacing:-.01em; font-weight:400;
  transition:color 520ms var(--ease-enter);
}
/* A caixinha do ícone é esta camada. No hover ela se abre a partir do
   próprio quadrado até cobrir o botão inteiro, e as cores se invertem. */
.cta-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:2px;
  background:var(--btn-fill);
  clip-path:inset(8px 8px 8px calc(100% - 38px) round 2px);
  transition:clip-path 620ms cubic-bezier(.76,0,.24,1);
}
.cta-btn:hover::before,
.cta-btn:focus-visible::before{ clip-path:inset(0 0 0 0 round 2px); }

/* rótulo em rolo: sai por cima, a cópia entra por baixo */
.cta-btn__txt{ display:block; height:20px; overflow:hidden; }
.cta-btn__txt > span{
  display:block;
  text-shadow:0 20px 0 currentColor;
  transition:transform 560ms cubic-bezier(.76,0,.24,1) 40ms;
}
.cta-btn:hover .cta-btn__txt > span,
.cta-btn:focus-visible .cta-btn__txt > span{ transform:translateY(-20px); }

.cta-btn__box{
  flex:none; width:30px; height:30px;
  display:grid; place-items:center;
  color:var(--btn-ico);
  overflow:hidden;
}
/* ícone gira de lugar: sai pela direita e volta pela esquerda */
.cta-btn__ico{ transition:transform 560ms cubic-bezier(.76,0,.24,1); }
.cta-btn:hover .cta-btn__ico,
.cta-btn:focus-visible .cta-btn__ico{ animation:cta-ico 620ms cubic-bezier(.76,0,.24,1); }
@keyframes cta-ico{
  0%  { transform:translateX(0); }
  45% { transform:translateX(22px); }
  46% { transform:translateX(-22px); }
  100%{ transform:translateX(0); }
}

/* e-mail: vazado, caixa branca. No hover o botão fica branco. */
.cta-btn--ghost{ --btn-fill:#FFFFFF; --btn-ico:#E65C00; color:#FFFFFF; }
.cta-btn--ghost:hover,
.cta-btn--ghost:focus-visible{ color:#121212; }

/* WhatsApp: branco, caixa preta. No hover o botão fica preto. */
.cta-btn--solid{ --btn-fill:#121212; --btn-ico:#FFFFFF; background:#FFFFFF; color:#121212; }
.cta-btn--solid:hover,
.cta-btn--solid:focus-visible{ color:#FFFFFF; }

@media (prefers-reduced-motion: reduce){
  .cta-btn::before, .cta-btn__txt > span{ transition:none; }
  .cta-btn:hover .cta-btn__ico{ animation:none; }
}

.cta :focus-visible{ outline-color:#FFFFFF; }

@media (max-width:1199px){
  .cta__inner{ grid-template-columns:1fr; gap:var(--gap-m); }
}
@media (max-width:809px){
  .cta__acoes{ display:flex; flex-direction:column; width:100%; }
  .cta-btn{ width:100%; }
}

/* ==========================================================================
   36. PAREDE EM LINHAS
   Colunas de CSS preenchem de cima para baixo, então a ordem do HTML não
   era a ordem de leitura. O JS distribui as peças da esquerda para a
   direita, cada uma na coluna mais baixa: a ordem do HTML vira a ordem em
   que se lê a parede. Sem JS, as colunas de CSS continuam valendo.
   ========================================================================== */
.wall.is-linhas{ column-count:auto; display:flex; align-items:flex-start; gap:12px; }
.wall__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.wall.is-linhas .piece{ margin:0; display:block; }