/* ==========================================================================
   Comunica Direito — Site institucional
   Identidade visual: oliva / tan / creme · Black Mango + Cormorant + Poppins
   ========================================================================== */

@font-face{
  font-family:'Black Mango';
  src:url('../assets/fonts/BlackMango-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Black Mango';
  src:url('../assets/fonts/BlackMango-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Black Mango';
  src:url('../assets/fonts/BlackMango-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Black Mango';
  src:url('../assets/fonts/BlackMango-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* paleta da marca */
  --oliva-profundo:#2F2E20;
  --oliva-escuro:#3F3D2A;
  --oliva:#696446;
  --oliva-claro:#7F7A5A;
  --tan:#C6A881;
  --tan-claro:#D8BF9F;
  --creme:#E3DBBB;
  --areia:#F2EDDF;
  --papel:#FAF7EE;
  --tinta:#33311F;

  --fonte-display:'Black Mango','Cormorant Garamond',Georgia,serif;
  --fonte-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --fonte-sans:'Poppins',-apple-system,'Segoe UI',Roboto,sans-serif;

  --larg:min(1280px,92vw);
  --gutter:clamp(1.25rem,4vw,4rem);
  --r:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-suave:cubic-bezier(.4,0,.2,1);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fonte-sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem);
  line-height:1.75;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ol,ul{margin:0;padding:0;list-style:none}

::selection{background:var(--tan);color:var(--oliva-profundo)}

.pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--oliva);color:var(--creme);padding:.75rem 1.25rem;
}
.pular:focus{left:1rem;top:1rem}

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

/* --------------------------------------------------------------- tipos base */


.titulo-secao{
  font-family:var(--fonte-display);
  font-weight:300;
  font-size:clamp(2rem,1.2rem + 3.4vw,4.25rem);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--oliva);
}
.titulo-secao--claro{color:var(--creme)}

.etiqueta{
  display:block;
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tan);margin-bottom:1rem;
}


.secao__cabeca{
  width:var(--larg);margin-inline:auto;
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}

/* --------------------------------------------------------------- botões */
.btn{
  --bg:var(--oliva); --fg:var(--creme); --bd:var(--oliva);
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:999px;
  padding:1rem 2rem;
  font-family:var(--fonte-sans);font-size:.75rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  line-height:1;
  position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
  isolation:isolate;
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--tan);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--oliva-profundo);border-color:var(--tan)}

.btn--tan{--bg:var(--tan);--fg:var(--oliva-profundo);--bd:var(--tan)}
.btn--tan::after{background:var(--creme)}

.btn--escuro{--bg:var(--oliva-profundo);--fg:var(--creme);--bd:var(--oliva-profundo)}

.btn--fantasma{--bg:transparent;--fg:var(--creme);--bd:rgba(227,219,187,.4)}
.btn--fantasma::after{background:var(--creme)}

.btn--linha{
  --bg:transparent;--fg:var(--oliva);--bd:rgba(105,100,70,.35);
  text-transform:none;letter-spacing:.04em;font-size:.8125rem;
}
.btn--linha::after{background:var(--creme)}

.btn--pequeno{padding:.7rem 1.35rem;font-size:.6875rem}

/* --------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:1.15rem 0;
  transition:background .5s var(--ease-suave),
             padding .5s var(--ease-suave),
             border-color .5s var(--ease-suave);
  border-bottom:1px solid transparent;
}
.nav__in{
  width:var(--larg);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);
}
.nav__logo{position:relative;display:block;flex:0 0 auto}
.nav__logo-img{
  height:clamp(40px,4.4vw,56px);width:auto;
  transition:opacity .45s var(--ease-suave),height .5s var(--ease-suave);
}
.nav__logo-img--escuro{position:absolute;inset:0;opacity:0}

.nav__links{
  display:flex;gap:clamp(1rem,2.2vw,2.25rem);
  margin-left:auto;
}
.nav__links a{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--creme);
  padding-bottom:3px;position:relative;
  transition:color .35s var(--ease-suave);
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}

.nav .btn{color:var(--creme);border-color:rgba(227,219,187,.4);background:transparent}
.nav .btn::after{background:var(--creme)}
.nav .btn:hover{color:var(--oliva-profundo)}

/* estado sólido, após o hero */
.nav.is-solida{
  background:rgba(250,247,238,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(105,100,70,.14);
  padding:.7rem 0;
}
.nav.is-solida .nav__logo-img--claro{opacity:0}
.nav.is-solida .nav__logo-img--escuro{opacity:1}
.nav.is-solida .nav__links a{color:var(--oliva)}
.nav.is-solida .btn{color:var(--oliva);border-color:rgba(105,100,70,.35)}
.nav.is-solida .btn::after{background:var(--tan)}
.nav.is-solida .btn:hover{color:var(--oliva-profundo)}

.nav.is-oculta{transform:translateY(-102%)}

/* com a gaveta aberta a nav volta ao modo transparente sobre o fundo escuro,
   senão o "X" creme some no fundo creme da nav sólida */
.nav.is-menu{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;transform:none}
.nav.is-menu .nav__logo-img--claro{opacity:1}
.nav.is-menu .nav__logo-img--escuro{opacity:0}
.nav{transition-property:background,padding,border-color,transform}

.nav__menu{display:none}

/* gaveta mobile */
.gaveta{
  position:fixed;inset:0;z-index:99;
  background:var(--oliva-profundo);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-suave);
}
.gaveta.is-aberta{opacity:1;pointer-events:auto}
.gaveta nav{display:flex;flex-direction:column;gap:.35rem;text-align:center}
.gaveta a{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.75rem,6vw,2.5rem);
  color:var(--creme);text-decoration:none;line-height:1.3;
}
.gaveta__cta{color:var(--tan) !important;margin-top:1.5rem;font-size:1.25rem !important;
  font-family:var(--fonte-sans) !important;letter-spacing:.16em;text-transform:uppercase}

/* --------------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:clamp(6rem,11vh,8.5rem) 0 clamp(1.5rem,3vh,2.5rem);
  background:var(--oliva-profundo);
  color:var(--creme);
  overflow:hidden;
  isolation:isolate;
}
.hero__midia{position:absolute;inset:-12% 0;z-index:-2;overflow:hidden}
.hero__camada{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
.hero__camada--folhas{
  opacity:.32;
  mix-blend-mode:soft-light;
  transform:scale(1.15);
}
.hero__veu{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 22% 30%,rgba(47,46,32,.35) 0%,rgba(47,46,32,.88) 62%,rgba(28,27,18,.96) 100%),
    linear-gradient(180deg,rgba(28,27,18,.7) 0%,transparent 32%,transparent 62%,rgba(28,27,18,.85) 100%);
}

.hero__selo{
  position:absolute;
  right:clamp(-9rem,-6vw,-4rem);
  top:50%;
  width:clamp(22rem,42vw,44rem);
  translate:0 -50%;
  opacity:.09;
  z-index:-1;
  pointer-events:none;
  will-change:transform;
}

.hero__conteudo{width:var(--larg);margin:auto;position:relative}

.hero__titulo{
  font-family:var(--fonte-display);
  font-weight:300;
  font-size:clamp(2.4rem,1.1rem + 5.4vw,6.25rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  /* as quebras são as do HTML: cada .linha precisa caber numa linha só,
     senão a máscara de entrada revela texto pela metade */
  max-width:none;
}
/* Ênfase dentro de uma frase muda só de cor — nunca de fonte ou estilo,
   para a linha inteira manter um desenho tipográfico único. */
.hero__titulo em,
.beat__citacao em,
.beat__texto em{
  font:inherit;
  font-style:normal;
  letter-spacing:inherit;
  color:var(--tan);
}
/* a folga embaixo evita que a máscara corte a descida do "ç" e do "p" */
.hero__titulo .linha{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero__titulo .linha > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.hero.is-pronto .linha > span{transform:translateY(0)}
.hero.is-pronto .linha:nth-child(1) > span{transition-delay:.12s}
.hero.is-pronto .linha:nth-child(2) > span{transition-delay:.2s}
.hero.is-pronto .linha:nth-child(3) > span{transition-delay:.28s}
.hero.is-pronto .linha:nth-child(4) > span{transition-delay:.36s}

.hero__sub{
  max-width:48ch;
  font-size:clamp(.95rem,.88rem + .38vw,1.1875rem);
  line-height:1.75;
  color:rgba(227,219,187,.82);
}
.hero__sub strong{color:var(--creme);font-weight:400}

.hero__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)}

.hero__rodape{
  width:var(--larg);margin:clamp(2rem,4vh,3.5rem) auto 0;
  display:flex;justify-content:center;
  padding-top:1.5rem;
  border-top:1px solid rgba(227,219,187,.16);
}
.hero__rolar{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(227,219,187,.6);
}
.hero__rolar span{
  width:1px;height:38px;background:rgba(227,219,187,.35);position:relative;overflow:hidden;
}
.hero__rolar span::after{
  content:'';position:absolute;inset:0;background:var(--tan);
  animation:rolar 2.2s var(--ease-suave) infinite;
}
@keyframes rolar{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* --------------------------------------------------------------- marquee */
.marquee{
  background:var(--oliva);
  color:var(--creme);
  padding:.9rem 0;
  overflow:hidden;
  border-block:1px solid rgba(227,219,187,.12);
}
.marquee__pista{display:flex;width:max-content;animation:desliza 38s linear infinite}
.marquee__pista span{
  font-family:var(--fonte-serif);
  font-size:clamp(1rem,.9rem + .5vw,1.375rem);
  letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;padding-right:2rem;
}
.marquee i{font-style:normal;color:var(--tan);margin:0 1.5rem;font-size:.7em;vertical-align:.2em}
@keyframes desliza{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- quadro (máscara de imagem c/ parallax interno) */
.quadro{
  position:relative;overflow:hidden;
  border-radius:var(--r);
  background:var(--creme);
}
.quadro img{
  width:100%;height:100%;object-fit:cover;
  scale:1.18;                 /* folga para o deslocamento do parallax */
  will-change:transform;
}
/* a foto nunca passa da altura da tela: o rosto e o nome ficam visíveis juntos */
.quadro--retrato{width:100%;aspect-ratio:4/5;max-height:min(72svh,620px)}
.quadro--retrato img{object-position:50% 30%}

/* ==========================================================================
   2. MANIFESTO — cena fixada: foto ao fundo, texto entra nítido e sai em blur
   ========================================================================== */
.cena{background:var(--oliva-profundo)}

.cena__trilho{
  position:relative;
  /* comprimento da rolagem que alimenta a cena: entrada, permanência e saída.
     Com um único bloco de texto, mais que isso vira rolagem vazia. */
  height:210svh;
}

.cena__palco{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:grid;place-items:center;
}

.cena__foto{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transform-origin:center;
  will-change:transform;
}
.cena__veu{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(75% 65% at 50% 50%,rgba(30,29,19,.42),rgba(24,23,15,.86) 78%),
    linear-gradient(180deg,rgba(24,23,15,.82),transparent 26%,transparent 70%,rgba(24,23,15,.88));
}

.cena__quadros{
  position:relative;
  width:min(1000px,88vw);
  display:grid;
  place-items:center;
  text-align:center;
}
/* todos os quadros ocupam a mesma célula — só um está nítido por vez */
.beat{
  grid-area:1/1;
  width:100%;
  color:var(--creme);
  opacity:0;
}

.beat__citacao{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.6rem,1rem + 2.6vw,3.5rem);
  line-height:1.08;letter-spacing:-.02em;
  max-width:26ch;margin:0 auto;
  text-wrap:balance;
}
/* parágrafo de apoio, logo abaixo do título e na mesma tela */
.beat__texto{
  margin:clamp(1.5rem,3vw,2.25rem) auto 0;
  max-width:58ch;
  font-size:clamp(.9375rem,.9rem + .35vw,1.125rem);
  line-height:1.8;
  color:rgba(227,219,187,.8);
  /* linhas de tamanho parecido: nenhuma palavra fica sozinha na última linha */
  text-wrap:balance;
}

/* fio de progresso da cena */
.cena__progresso{
  position:absolute;left:50%;bottom:clamp(2rem,5vh,4rem);
  translate:-50% 0;
  width:1px;height:clamp(48px,7vh,72px);
  background:rgba(227,219,187,.18);
  overflow:hidden;
}
.cena__progresso span{
  position:absolute;inset:0;
  background:var(--tan);
  transform:scaleY(var(--p,0));
  transform-origin:top;
}

/* ==========================================================================
   3. DIFERENCIAIS — cartões que sobem empilhando sobre a foto fixa
   ========================================================================== */
.pilha{background:var(--oliva-profundo);position:relative;z-index:1}
.pilha__trilho{position:relative}

.pilha__palco{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}
.pilha__foto{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transform-origin:center;
  will-change:transform;
}
.pilha__veu{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 70% at 50% 40%,rgba(30,29,19,.5),rgba(24,23,15,.86) 80%),
    linear-gradient(180deg,rgba(24,23,15,.78),transparent 24%,transparent 72%,rgba(24,23,15,.82));
}
.pilha__cabeca{
  position:absolute;
  left:50%;top:26%;
  translate:-50% -50%;
  width:var(--larg);
  color:var(--creme);
  text-align:center;
}
.pilha__cabeca > *{margin-inline:auto}
.pilha__cabeca .titulo-secao{
  max-width:20ch;
  font-size:clamp(1.9rem,1rem + 2.6vw,3.5rem);
}
.pilha__contador{
  display:block;margin-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--fonte-serif);
  font-size:.875rem;letter-spacing:.2em;
  color:rgba(227,219,187,.45);
}
.pilha__contador b{font-weight:400;color:var(--tan);font-size:1.5rem;letter-spacing:.08em}

/* a coluna de cartões sobe centralizada, por cima do palco.
   Layout de BLOCO de propósito: em grade, o sticky de cada cartão fica preso à sua
   própria linha e é liberado quando ela acaba — os primeiros se soltariam e subiriam
   enquanto os últimos ainda chegam, desmanchando o baralho. Em bloco, o bloco
   contenedor é a coluna inteira e todos permanecem empilhados até o fim da cena. */
.pilha__cartoes{
  position:relative;z-index:2;
  margin-top:-100svh;
  width:min(620px,90vw);margin-inline:auto;
  /* a folga de baixo é o tempo de leitura do último cartão: sem ela, ele chega
     ao lugar e a coluna já é liberada, sem nunca descansar */
  /* --topo vem do JS: é a altura logo abaixo do contador. Com a folga de cima
     igual ao ponto onde o cartão prende, o primeiro cartão só prende quando o
     palco prende — a distância até o contador não muda durante a rolagem */
  padding-block:var(--topo,40svh) 46svh;
}
.pilha__cartoes > li{
  position:sticky;
  /* cada cartão prende um pouco mais abaixo: o anterior fica só com a aba à mostra */
  top:calc(var(--topo,40svh) + var(--i) * 1.1rem);
  margin-bottom:46svh;
}

.cartao{
  --cob:0;
  position:relative;
  text-align:center;
  /* fundo opaco: com transparência o texto do cartão de trás vazava pelo da frente */
  background:var(--areia);
  border:1px solid rgba(227,219,187,.35);
  border-radius:6px;
  padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:0 24px 60px -28px rgba(15,14,8,.75);
  transform:translateY(calc(var(--cob) * -1.1rem)) scale(calc(1 - .05 * var(--cob)));
}
/* o cartão coberto escurece por um véu, em vez de ficar translúcido */
.cartao::after{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;
  background:var(--oliva-profundo);
  opacity:calc(.55 * var(--cob));
  pointer-events:none;
}
.cartao__n{
  display:block;
  font-family:var(--fonte-serif);
  font-size:.875rem;letter-spacing:.2em;
  color:var(--tan);margin-bottom:1rem;
}
.cartao h3{
  font-family:var(--fonte-display);font-weight:400;
  font-size:clamp(1.25rem,1rem + .9vw,1.75rem);
  line-height:1.14;color:var(--oliva);
  margin-bottom:.9rem;
}
.cartao p{color:rgba(51,49,31,.78);font-size:.9375rem;margin:0}

/* --------------------------------------------------------------- 4. metodologia */
.metodo{
  position:relative;
  background:var(--oliva-profundo);
  color:var(--creme);
  padding:clamp(5rem,12vh,9rem) 0;
  overflow:hidden;
  isolation:isolate;
}
.metodo__midia{position:absolute;inset:-15% 0;z-index:-1;overflow:hidden}
.metodo__midia img{
  width:100%;height:130%;object-fit:cover;
  opacity:.22;will-change:transform;
}
.metodo__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--oliva-profundo) 0%,rgba(47,46,32,.86) 40%,rgba(47,46,32,.94) 100%);
}
.metodo__in{
  width:var(--larg);margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.metodo__fixo{position:sticky;top:clamp(6rem,16vh,9rem)}
.metodo__nota{
  margin-top:1.75rem;max-width:34ch;
  color:rgba(227,219,187,.68);font-size:.9375rem;
}
.metodo__indice{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;gap:.55rem}
.metodo__indice li{
  display:flex;gap:.9rem;align-items:baseline;
  font-size:.8125rem;letter-spacing:.06em;
  color:rgba(227,219,187,.38);
  transition:color .5s var(--ease),padding-left .5s var(--ease);
}
.metodo__indice li span{
  font-family:var(--fonte-serif);font-size:.75rem;letter-spacing:.14em;
  color:rgba(198,168,129,.45);transition:color .5s var(--ease);
}
.metodo__indice li.is-ativo{color:var(--creme);padding-left:.55rem}
.metodo__indice li.is-ativo span{color:var(--tan)}

.metodo__passos{display:flex;flex-direction:column}
.passo{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid rgba(227,219,187,.16);
}
.passo:last-child{border-bottom:1px solid rgba(227,219,187,.16)}
.passo__n{
  font-family:var(--fonte-serif);
  font-size:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);
  line-height:1;color:var(--tan);
  font-weight:300;
}
.passo h3{
  font-family:var(--fonte-display);font-weight:400;
  font-size:clamp(1.25rem,1rem + 1vw,1.875rem);
  line-height:1.14;color:var(--creme);margin-bottom:.85rem;
}
.passo p{color:rgba(227,219,187,.72);font-size:.9375rem;margin:0;max-width:52ch}

/* --------------------------------------------------------------- 5. serviços */
.serv{
  background:var(--papel);
  padding:clamp(5rem,12vh,9rem) 0;
}
.serv__grade{
  width:var(--larg);margin-inline:auto;
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
}

.serv__principal{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:var(--creme);
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(105,100,70,.14);
}
.serv__principal-midia{position:relative;overflow:hidden;min-height:clamp(18rem,34vw,30rem)}
.serv__principal-midia img[data-parallax-interno]{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  scale:1.18;will-change:transform;
}
.serv__selo{
  position:absolute;
  left:50%;top:50%;translate:-50% -50%;
  width:clamp(9rem,18vw,15rem);
  opacity:.5;
}
.serv__principal-texto{
  padding:clamp(2rem,4vw,3.5rem);
  display:flex;flex-direction:column;justify-content:center;
}
.serv__principal-texto h3{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.75rem,1.2rem + 2vw,3rem);
  line-height:1.04;color:var(--oliva);margin-bottom:1.25rem;
}
.serv__principal-texto p{color:rgba(51,49,31,.8);max-width:46ch}

.pilulas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.pilulas li{
  border:1px solid rgba(105,100,70,.28);
  border-radius:999px;
  padding:.45rem 1rem;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oliva);
}

.serv__avulsos{
  background:var(--oliva);
  color:var(--creme);
  border-radius:var(--r);
  padding:clamp(2rem,4vw,3.5rem);
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.serv__avulsos h3{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
  line-height:1.06;color:var(--creme);
  max-width:16ch;text-wrap:balance;
}
.serv__lista{display:flex;flex-direction:column}
.serv__lista li{
  display:flex;gap:1.25rem;align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid rgba(227,219,187,.18);
  font-size:1.0625rem;
  transition:padding-left .5s var(--ease),color .5s var(--ease);
}
.serv__lista li:first-child{border-top:1px solid rgba(227,219,187,.18)}
.serv__lista li:hover{padding-left:.65rem;color:var(--tan-claro)}
.serv__lista li span{
  font-family:var(--fonte-serif);font-size:.75rem;letter-spacing:.16em;
  color:var(--tan);flex:0 0 auto;
}
.serv__lista strong{display:block;font-weight:400;margin-bottom:.2rem}
.serv__lista p{font-size:.875rem;line-height:1.6;color:rgba(227,219,187,.72);margin:0}
.serv__lista li:hover p{color:rgba(227,219,187,.85)}
.serv__obs{
  grid-column:1/-1;
  margin-top:1rem;
  font-size:.8125rem;
  color:rgba(227,219,187,.6);
  font-style:italic;
}

/* --------------------------------------------------------------- 6. quem somos */
.equipe{
  background:var(--areia);
  padding:clamp(5rem,12vh,9rem) 0;
}
.equipe__grade{
  width:var(--larg);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,5rem);
}
.pessoa h3{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);
  color:var(--oliva);margin:1.75rem 0 .35rem;
}
.pessoa__papel{
  font-family:var(--fonte-serif);font-style:italic;
  font-size:1.0625rem;color:var(--tan);
  margin-bottom:1.15rem !important;
}
.pessoa p{color:rgba(51,49,31,.8);font-size:.9375rem;max-width:60ch}
/* tan sobre areia não tem contraste para texto: o cargo vai em oliva */
.pessoa p.pessoa__papel{font-size:1.1875rem;line-height:1.4;color:var(--oliva)}

/* --------------------------------------------------------------- 7. cta */
.cta{
  position:relative;
  padding:clamp(6rem,16vh,11rem) 0;
  overflow:hidden;
  isolation:isolate;
  background:var(--creme);
  text-align:center;
}
.cta__fundo{
  position:absolute;inset:-16% 0;z-index:-2;
  width:100%;height:132%;object-fit:cover;
  will-change:transform;
}
.cta__veu{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(85% 70% at 50% 45%,rgba(250,247,238,.86),rgba(250,247,238,.5) 70%),
    linear-gradient(180deg,rgba(242,237,223,.9),transparent 28%,transparent 72%,rgba(242,237,223,.9));
}
.cta__in{width:var(--larg);margin-inline:auto;position:relative;display:flex;
  flex-direction:column;align-items:center}
.cta__selo{
  width:clamp(5rem,9vw,7.5rem);
  opacity:.9;margin-bottom:2rem;
}
.cta__titulo{
  font-family:var(--fonte-display);font-weight:300;
  font-size:clamp(1.85rem,1.1rem + 3.4vw,4.25rem);
  line-height:1.04;letter-spacing:-.02em;
  color:var(--oliva);
  margin:0 0 1.25rem;
  text-wrap:balance;
}
.cta__texto{
  /* mesma tipografia do parágrafo do manifesto: Poppins, sem itálico */
  font-family:var(--fonte-sans);font-style:normal;
  font-size:clamp(.9375rem,.9rem + .35vw,1.125rem);
  line-height:1.8;
  color:var(--oliva);
  max-width:58ch;
  text-wrap:balance;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.cta__acoes{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* --------------------------------------------------------------- rodapé */
.rodape{
  background:var(--oliva-profundo);
  color:var(--creme);
  padding:clamp(4rem,9vh,7rem) 0 2rem;
}
.rodape__in{
  width:var(--larg);margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid rgba(227,219,187,.16);
}
.rodape__marca{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}
.rodape__logo{width:clamp(9rem,15vw,12rem);height:auto}

.rodape__col h4{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tan);margin-bottom:1.25rem;font-weight:400;
}
.rodape__col a{
  display:block;
  font-size:.875rem;color:rgba(227,219,187,.78);
  text-decoration:none;padding:.35rem 0;
  transition:color .4s var(--ease-suave),padding-left .4s var(--ease);
}
.rodape__col a:hover{color:var(--tan);padding-left:.35rem}
.nowrap{white-space:nowrap}

.rodape__base{
  width:var(--larg);margin:1.75rem auto 0;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  font-size:.75rem;color:rgba(227,219,187,.5);
}
.rodape__base p{margin:0}

/* --------------------------------------------------------------- barra fixa */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  padding:.85rem var(--gutter);
  background:rgba(47,46,32,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(227,219,187,.14);
  transform:translateY(101%);
  transition:transform .6s var(--ease);
}
.barra.is-visivel{transform:translateY(0)}
.barra__texto{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(227,219,187,.75);
}

/* --------------------------------------------------------------- transições entre seções */

/* Cada seção desliza por cima da anterior com o canto arredondado —
   é isso que costura as cenas fixadas ao resto da página. */
.dobra,.equipe,.cta{
  --dobra:clamp(20px,3vw,42px);
  position:relative;
  border-radius:var(--dobra) var(--dobra) 0 0;
  margin-top:calc(var(--dobra) * -1);
}
.metodo.dobra{z-index:3}
/* a metodologia sobe enquanto os diferenciais ainda se dissolvem: sem isso,
   o palco vazio da pilha ficava quase uma tela inteira rolando sozinho */
.pilha + .metodo.dobra{margin-top:calc(-50svh - var(--dobra))}
.serv.dobra {z-index:4}
.equipe     {z-index:5}
.cta        {z-index:6}

/* na emenda entre dois blocos escuros o raio não aparece sozinho:
   um fio quente marca a dobra */
.metodo.dobra::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(198,168,129,.5),transparent);
  border-radius:inherit;
}

/* --------------------------------------------------------------- reveals */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-visivel{opacity:1;transform:none}

/* fade-in up mais pronunciado, para títulos de seção */
.reveal--sobe{
  transform:translateY(56px);
  transition-duration:1.15s;
}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}


[data-gira]{animation:gira 62s linear infinite}
@keyframes gira{to{rotate:360deg}}

/* --------------------------------------------------------------- responsivo */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav .btn--pequeno{margin-left:auto}
  .nav__menu{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;padding:0;
    background:none;border:0;cursor:pointer;
  }
  .nav__menu span{
    display:block;height:1px;width:22px;margin-inline:auto;
    background:var(--creme);
    transition:transform .4s var(--ease),opacity .3s var(--ease-suave),background .4s var(--ease-suave);
  }
  .nav.is-solida .nav__menu span{background:var(--oliva)}
  .nav__menu[aria-expanded="true"] span,
  .nav.is-menu .nav__menu span{background:var(--creme)}
  .nav__menu[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
  .nav__menu[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

  .metodo__in{grid-template-columns:minmax(0,1fr)}
  .metodo__fixo{position:static}
  .metodo__indice{display:none}

  /* a cabeça sobe para o alto do palco e a nota sai: em tela estreita os
     cartões alcançam o centro rápido demais e cobririam o título */
  .pilha__cabeca{top:19%}
  .pilha__cabeca .titulo-secao{font-size:clamp(1.9rem,1.2rem + 3vw,3rem)}
  /* a folga de baixo precisa acompanhar a margem dos cartões, senão o último
     chega ao lugar e a coluna é liberada sem ele descansar */
  .pilha__cartoes{padding-block:var(--topo,48svh) 46svh}
  .pilha__cartoes > li{margin-bottom:46svh}

  .serv__principal{grid-template-columns:minmax(0,1fr)}
  .serv__avulsos{grid-template-columns:minmax(0,1fr)}
  .equipe__grade{grid-template-columns:minmax(0,1fr);gap:3.5rem}

  .rodape__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape__marca{grid-column:1/-1}
}

@media (max-width:640px){
  /* no mobile a conversão fica no menu e na barra fixa, não na nav */
  .nav .btn--pequeno{display:none}
  .nav__menu{margin-left:auto}
  .nav__logo-img{height:34px}

  .hero{padding-top:6rem}
  .hero__selo{right:-30%;width:26rem;opacity:.07}
  .hero__rolar{display:none}
  .hero__rodape{display:none}
  .hero__acoes .btn{width:100%;justify-content:center}

  .cena__trilho{height:200svh}
  /* os cartões prendem mais baixo para não cortarem o título ao passar */
  .pilha__cartoes > li{top:calc(var(--topo,48svh) + var(--i) * .7rem)}

  .passo{grid-template-columns:minmax(0,1fr);gap:.75rem}
  /* quebras manuais dos títulos só fazem sentido no desktop */
  .cartao h3 br,.pilha__cabeca br{display:none}
  .cartao h3,.pilha__cabeca .titulo-secao{text-wrap:balance}
  .rodape__in{grid-template-columns:minmax(0,1fr)}
  .rodape__marca{flex-direction:column;align-items:flex-start}
  .barra__texto{display:none}
  .barra{justify-content:stretch}
  .barra .btn{width:100%;justify-content:center}
  .cta__acoes .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------- acessibilidade */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__titulo .linha > span{transform:none}
  .quadro img,
  .serv__principal-midia img[data-parallax-interno]{scale:1}
  [data-parallax]{transform:none !important}

  /* cenas fixadas viram blocos empilhados normais */
  .cena__trilho,
  .pilha__palco{height:auto}
  .cena__palco{position:static;height:auto;padding:6rem 0;display:block}
  .cena__quadros{display:block;width:min(62ch,88vw);margin-inline:auto}
  .beat{opacity:1 !important;filter:none !important;transform:none !important;
        margin-bottom:3.5rem}
  .cena__foto,.pilha__foto{position:absolute;inset:0}
  .cena__progresso{display:none}

  .pilha + .metodo.dobra{margin-top:calc(var(--dobra) * -1)}
  .cartao::after{display:none}

  .pilha__palco{position:static;padding:5rem 0}
  .pilha__cabeca{position:static;translate:none;width:var(--larg);margin-inline:auto}
  .pilha__cabeca,.pilha__cartoes{opacity:1 !important;filter:none !important;transform:none !important}
  .pilha__cartoes{margin-top:0;padding-block:3rem;gap:1.25rem}
  .pilha__cartoes > li{position:static;margin-bottom:0}
  .cartao{transform:none !important;filter:none !important;opacity:1 !important}
}