/* ==========================================================================
   Renan Pavão — versão liderança

   O que foi herdado das referências é disciplina, não forma:
   · peso 400 em todo texto, hierarquia por tamanho, cor e espaço
   · acento cromático quase ausente; a cor entra pelas imagens do trabalho
   · sombra praticamente zero, separação por linha de 1px
   · respiro grande entre seções contra agrupamento colado dentro delas
   · tracking óptico negativo no display, indo a zero no corpo
   · texto que comenta uma imagem mora ao lado dela, nunca acima

   A rampa de neutros e as famílias vêm do site atual do Renan, não das
   referências: a paleta é levemente quente, e é isso que a distingue da
   zinc fria que virou default de mercado.
   ========================================================================== */

:root{
  /* rampa quente, derivada do site atual (--ink/--paper/--line) */
  --ground:#f8f8f6;
  --surface:#ffffff;
  --surface-2:#f1f1ed;
  --line:#e5e5e1;
  --line-forte:#d5d5cd;
  --tinta-2:#6b6a65;
  --tinta:#171614;
  --invertido:#171614;
  --sobre-invertido:#f4f4f1;
  /* único acento, e só em estado: foco, hover de link */
  --acento:#1f3a5f;

  --sans:Manrope, system-ui, -apple-system, Arial, sans-serif;

  /* escala: abre no display, fecha no texto. sem degraus intermediários */
  --t7:64px;   /* abertura */
  --t6:44px;   /* título de seção */
  --t5:32px;   /* subtítulo */
  --t4:24px;   /* destaque de leitura */
  --t3:18px;   /* corpo grande */
  --t2:16px;   /* corpo */
  --t1:13px;   /* apoio e rótulo */

  /* sem teto de largura: o layout ocupa a tela, so a margem lateral segura.
     o comprimento de linha nao dispara porque cada bloco de texto tem o
     proprio limite em ch                                                */
  --margem:40px;

  /* base 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:160px;

  --raio:8px;
  --raio-g:12px;
  --curva:cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* quando o laco de rolagem suave assume, o smooth do CSS sai de cena:
   os dois juntos animariam a mesma posicao em disputa */
html.rolagem-js{ scroll-behavior:auto; }
body{
  margin:0; background:var(--ground); color:var(--tinta);
  font-family:var(--sans); font-size:var(--t2); line-height:1.5;
  font-weight:400; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
h1,h2,h3,h4,h5,h6,th,strong,b{ font-weight:400; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:2px; }

.env{ width:calc(100% - var(--margem)*2); margin-inline:auto; }

/* ---------- tipografia: nenhum peso acima de 400 ---------- */
.d1{ font-size:var(--t7); line-height:1.0;  letter-spacing:-.022em; text-wrap:balance; }
.d2{ font-size:var(--t6); line-height:1.08; letter-spacing:-.02em;  text-wrap:balance; }
.d3{ font-size:var(--t5); line-height:1.16; letter-spacing:-.018em; text-wrap:balance; }
.leitura{ font-size:var(--t4); line-height:1.34; letter-spacing:-.014em; }
.corpo-g{ font-size:var(--t3); line-height:1.45; letter-spacing:-.008em; }
.apoio{ font-size:var(--t1); line-height:1.4; letter-spacing:0; color:var(--tinta-2); }
/* rótulo de categoria: mesma família, menor e em cinza. sem caixa alta,
   sem tracking, sem segunda face — é a contenção que faz a elegância */
.rot{ font-size:var(--t1); line-height:1.4; letter-spacing:-.002em; color:var(--tinta-2); }
.fraco{ color:var(--tinta-2); }
.medida{ font-variant-numeric:tabular-nums; }
.max-leitura{ max-width:60ch; }

/* ---------- cortina de entrada -------------------------------------
   Abre com a assinatura se escrevendo no meio da tela e sai revelando a
   home. Duas travas de seguranca:

   1. Quem liga a cortina e um script no <head>, nao o CSS. Se o
      JavaScript estiver desligado ou quebrar, a classe .carregando nunca
      entra, .carga fica em display:none e a pagina abre direto. Cortina
      que depende so de CSS para sair e cortina que prende a pagina.
   2. O app.js tem prazo final: passados 4s a cortina sai de qualquer
      jeito, mesmo que o animationend nao chegue.

   Roda uma vez por sessao, na home: guia nova ve a assinatura, e andar
   pelo site depois nao mostra mais nada. Quem liga e o script do <head>
   do index.html, com a marca em sessionStorage.

   A mesma cortina serve de espera: o app.js monta uma copia dela se a
   pagina seguinte demorar mais que meio segundo para chegar. Por isso
   .carga nao e so do index.html, e a classe .carga--espera so acrescenta
   uma entrada suave, para a espera nascer sem estalo.                */
.carga{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center;
  background:var(--ground);
}
html.carregando{ overflow:hidden; }
html.carregando .carga{ display:flex; }
.carga .assina{ height:60px; }

/* a saida: a cortina abre e a assinatura sobe de leve, entao o olho
   acompanha o movimento para cima em vez de ver um corte seco.

   Animacao e nao transicao: existe contexto que congela transicao e
   deixa passar animacao, e ai a cortina sumiria de uma vez em vez de
   abrir. Com animation o desfecho e o mesmo nos dois casos.         */
.carga.saiu{ pointer-events:none; animation:cortina-sai .55s var(--curva) both; }
.carga.saiu .assina{ animation:cortina-sobe .7s var(--curva) both; }
@keyframes cortina-sai{ to{ opacity:0; } }
@keyframes cortina-sobe{ to{ transform:translateY(-10px); } }

/* a cortina de espera nasce no meio da navegacao, entao entra em fade:
   surgir de uma vez no meio de um clique parece falha, nao resposta */
.carga--espera{ animation:cortina-entra .25s var(--curva) both; }
@keyframes cortina-entra{ from{ opacity:0; } }

@media (max-width:640px){ .carga .assina{ height:44px; } }

/* ---------- navegação ----------
   Três zonas, como na referência: navegação à esquerda, assinatura no
   centro, ações à direita. O painel de trabalho abre ancorado na própria
   barra, e não como gaveta lateral — a gaveta troca o contexto sem motivo.
   ---------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .3s var(--curva), border-color .3s var(--curva),
             backdrop-filter .3s var(--curva);
}
.nav.encostou{
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom-color:var(--line);
}
/* no toque a barra fica sem o desfoque: o blur refaz o fundo a cada
   quadro de rolagem e, no celular, era parte do travamento (01/10/2026).
   O fundo quase opaco segura a leitura no lugar dele.                 */
@media (hover:none), (pointer:coarse){
  .nav.encostou{
    background:color-mix(in srgb, var(--ground) 96%, transparent);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
.nav-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s3); height:76px;
}

/* esquerda */
.nav-esq{ display:flex; align-items:center; gap:var(--s3); justify-self:start; }

/* centro: a assinatura ----------------------------------------------
   Sete tracos abertos, na ordem em que a mao escreve. Cada um se desenha
   pelo proprio caminho, com stroke-dashoffset. Os numeros por traco
   (duracao, entrada, tracejado e curva) sao calculados em assinatura.py
   e chegam aqui como variaveis na propria marcacao.

   Sobre o tracejado: pathLength="1000" normaliza o comprimento, mas a
   ponta arredondada tem raio fixo. Num traco curto essa ponta vale uma
   fatia enorme do comprimento normalizado, e por isso o vao (--g) e o
   ponto de partida (--i) mudam de traco para traco. Vao fixo deixava
   tres pontos parados na tela: os dois cortes e o til.               */
.nav-assinatura{ justify-self:center; display:flex; align-items:center; }
.assina{ display:block; height:38px; width:auto; overflow:visible; }
.assina .tr{
  fill:none; stroke:currentColor; stroke-width:3.34;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1000 var(--g); stroke-dashoffset:0;
  animation:escreve var(--d) var(--c) var(--e) both;
}
/* so o from: o to e o estado da regra acima, entao a marca fica inteira
   se a animacao nunca rodar                                           */
@keyframes escreve{ from{ stroke-dashoffset:var(--i); } }

/* direita */
.nav-dir{ display:flex; align-items:center; gap:var(--s2); justify-self:end; }

.nav-link{
  position:relative; font-size:15px; color:var(--tinta-2);
  padding:6px 0; transition:color .2s var(--curva);
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--tinta); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--curva);
}
.nav-link:hover{ color:var(--tinta); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-link.ativo{ color:var(--tinta); }
.nav-link.ativo::after{ transform:scaleX(1); }

/* gatilho do painel de trabalho */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 20px; border-radius:999px;
  background:var(--tinta); color:var(--ground);
  font-size:var(--t2); letter-spacing:-.006em; white-space:nowrap;
  transition:background-color .2s var(--curva), transform .2s var(--curva);
}
.btn:hover{ background:#2f2c28; }
.btn--vazado{ background:transparent; color:var(--tinta); border:1px solid var(--line-forte); }
.btn--vazado:hover{ background:var(--surface); border-color:var(--tinta); }
.btn--sm{ height:41px; padding:0 18px; font-size:15px; }

/* ---------- painel de trabalho ----------
   Desce da barra, ocupa a largura do container e mostra os sete casos com
   a capa. Fecha no Esc, no clique fora e ao escolher.                */
.nav-painel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--ground); border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s var(--curva), transform .32s var(--curva), visibility .28s;
  box-shadow:0 18px 40px -30px rgba(23,22,20,.35);
  /* janela baixa ou lista longa: o painel rola dentro de si */
  max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain;
}
.nav.aberto .nav-painel{ opacity:1; visibility:visible; transform:none; }
.nav-painel-in{ display:flex; flex-direction:column; padding:var(--s3) 0 var(--s5); }
/* menu compacto: os atalhos so existem abaixo de 820px */
.nav-movel{ display:none; }

/* menu compacto */
.nav-hamb{
  display:none; width:41px; height:41px; border-radius:999px; border:1px solid var(--line-forte);
  background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-hamb span{ display:block; width:15px; height:1px; background:var(--tinta);
  transition:transform .3s var(--curva), opacity .2s var(--curva); }
.nav.aberto .nav-hamb span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav.aberto .nav-hamb span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

@media (max-width:820px){
  .nav-in{ grid-template-columns:auto 1fr auto; height:64px; }
  .nav-esq{ justify-self:start; }
  .nav-esq .nav-link, .nav-dir .nav-link{ display:none; }
  .nav-hamb{ display:flex; }
  .nav-assinatura{ justify-self:center; }
  .assina{ height:32px; }
  .nav-painel{ max-height:calc(100vh - 64px); }
  .nav-movel{ display:flex; flex-direction:column; gap:2px; }
  .nav-movel a{ padding:12px 0; font-size:17px; }
}

/* ---------- seções ---------- */
.sec{ padding-block:var(--s8); }
/* o :not([hidden]) existe por causa de servicos, que esta no HTML e fora do
   ar: sem ele a secao oculta ainda conta como irma e rouba o respiro de
   cima da secao seguinte */
.sec:not([hidden]) + .sec{ padding-top:0; }
/* dobras do case: peças de largura cheia em sequência, respiro curto
   entre elas, para lerem como um arquivo e não como blocos soltos */
.dobra{ padding-block:var(--s3); }
/* a regra de cima zera o respiro de qualquer .sec que venha depois de outra,
   para nao somar 160+160 entre dois blocos de texto. Mas a dobra fecha em
   24px, entao a secao de texto seguinte herdava so esses 24px e ficava
   colada na imagem. Toda secao de texto respira os mesmos 160px dos dois
   lados: a dobra que vem antes dela abre mao do proprio fecho, senao o vao
   de cima soma 184px contra os 160px de baixo. Entre duas dobras o fecho de
   24px continua valendo, que e o mesmo gap de dentro da .fluxo. */
.dobra:has(+ .sec:not(.dobra)){ padding-bottom:0; }
.dobra + .sec:not(.dobra){ padding-top:var(--s8); }
.sec-cab{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s6); }
.sec-cab .d2{ max-width:22ch; }

/* ---------- abertura ---------- */
/* primeira dobra: so o texto, centrado. A parede desceu para a segunda */
.abre{ padding-block:var(--s7) 0; }
.abre-txt{ text-align:center; }
/* Abertura de 30/09/2026 (Figma kzEz8Hx9MXmlKxa18U6zIr, no 167-5067):
   foto pequena em cima, manchete de 40px em tres linhas e o apoio em
   458px. Os numeros vem do desenho, por isso nao usam a escala --t.  */
.abre-foto{
  width:50px; height:50px; border-radius:13px; object-fit:cover;
  margin:0 auto 6px; background:var(--surface-2);
}
.abre .d1{
  font-size:40px; line-height:1; letter-spacing:-.035em;
  max-width:610px; margin-inline:auto;
}
.abre-apoio{ margin-top:var(--s4); max-width:458px; margin-inline:auto; }
/* abaixo de 700px os 40px fixos passam a seguir o --t6, que ja encolhe */
@media (max-width:700px){ .abre .d1{ font-size:var(--t6); } }

/* ---------- a pilha de cases -------------------------------------
   Trocou a grade de duas colunas em 30/09/2026. Um case por linha, nome
   a esquerda, imagem no meio, tipo a direita, nas medidas do desenho:
   903px de linha, 164px para cada coluna de texto, imagem de 576x321.

   A entrada e ligada a rolagem, nao disparada uma vez: o modulo "pilha"
   do app.js escreve --k (escala) e --o (opacidade) em cada linha a cada
   quadro. Os dois valem 1 por padrao, entao se o JS nao rodar a pilha
   aparece inteira e parada, que e o comportamento seguro.            */
.pilha{ padding-block:76px var(--s7); }
.pilha-in{ max-width:903px; display:flex; flex-direction:column; gap:40px; }
.pilha-caso{
  display:grid; grid-template-columns:164px minmax(0,1fr) 164px;
  align-items:center;
  transform:scale(var(--k,1)); opacity:var(--o,1);
  transform-origin:50% 50%;
}
.pilha-nome{ font-size:var(--t4); line-height:1; letter-spacing:-.008em; }
.pilha-tag{ font-size:14px; line-height:1; color:var(--tinta-2); text-align:right; }
.pilha-fig{
  display:block; overflow:hidden; border-radius:16px;
  background:var(--surface-2);
}
.pilha-fig img{
  width:100%; aspect-ratio:576/321; object-fit:cover; display:block;
  transition:transform .7s var(--curva);
}
.pilha-caso:hover .pilha-fig img{ transform:scale(1.03); }
html.pilha-viva .pilha-caso{ will-change:transform, opacity; }

/* Pilha no toque (01/10/2026): a escala e a opacidade saem do JS e vao
   para uma animacao ligada a rolagem, que o navegador roda junto com ela.
   A faixa "cover" vai da linha encostando embaixo da tela (0%) ate sair
   por cima (100%). Com a linha do celular tendo cerca de um terco da
   tela, o centro dela chega ao foco de 75% perto dos 31%, e a opacidade
   completa os 35% de tela da subida perto dos 27%. Entre um ponto e
   outro a curva do desktop e quase reta, entao o linear basta.        */
@keyframes pilha-toque{
  0%{ transform:scale(.73); opacity:0; }
  27%{ opacity:1; }
  31%{ transform:scale(1); }
  100%{ transform:scale(1); opacity:1; }
}
@supports (animation-timeline: view()){
  html.pilha-css .pilha-caso{
    animation:pilha-toque linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  html.pilha-css .mais-trilho{
    animation:mais-toque linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 40%;
  }
}
@keyframes mais-toque{ from{ opacity:0; } to{ opacity:1; } }
/* sem suporte: entra uma vez, sem nada por quadro */
html.pilha-uma .pilha-caso{
  opacity:0; transform:scale(.92);
  transition:opacity .7s linear, transform .9s var(--curva);
}
html.pilha-uma .pilha-caso.visivel{ opacity:1; transform:none; }

/* no compacto as colunas de texto nao cabem ao lado: nome e tipo sobem
   para uma linha so, em cima da imagem                                */
@media (max-width:820px){
  .pilha{ padding-block:var(--s6) var(--s6); }
  .pilha-in{ gap:var(--s5); }
  .pilha-caso{ grid-template-columns:1fr auto; row-gap:12px; }
  .pilha-nome{ font-size:20px; }
  .pilha-fig{ grid-column:1 / -1; grid-row:2; border-radius:var(--raio-g); }
}

/* ---------- carrossel de proximos cases ----------------------------
   Fecha cada case antes do contato, decisao do Renan em 30/09/2026.
   Mesma peca da pilha da home (nome, tipo, imagem 576x321 de canto 16px
   e o zoom no hover), deitada numa trilha que rola na horizontal.

   Sem o crescimento da pilha (saiu em 30/09/2026): o modulo "mais" do
   app.js so escreve --o, a opacidade de entrada. Vale 1 por padrao,
   entao sem JS a trilha aparece inteira.                            */
.mais{ padding-block:var(--s8) 0; overflow:hidden; }
.mais-cab{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s3); margin-bottom:var(--s5); }
.mais-cab .d2{ max-width:none; }
.mais-setas{ display:flex; gap:var(--s1); }
.mais-seta{
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line-forte); background:transparent; color:var(--tinta);
  display:grid; place-items:center; cursor:pointer;
  transition:background-color .2s var(--curva), border-color .2s var(--curva), opacity .2s linear;
}
.mais-seta:hover{ background:var(--surface); border-color:var(--tinta); }
.mais-seta:disabled{ opacity:.3; cursor:default; background:transparent; border-color:var(--line-forte); }
.mais-seta svg{ width:16px; height:16px; }
.mais-trilho{
  position:relative; display:flex; gap:40px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-inline:var(--margem); scroll-padding-inline:var(--margem);
  scrollbar-width:none;
}
.mais-trilho::-webkit-scrollbar{ display:none; }
.mais-caso{
  flex:0 0 min(576px, 78vw); scroll-snap-align:start;
  display:grid; grid-template-columns:1fr auto; align-items:center; row-gap:14px;
  opacity:var(--o,1);
}
.mais-caso .pilha-fig{ grid-column:1 / -1; }
.mais-caso:hover .pilha-fig img{ transform:scale(1.03); }
html.pilha-viva .mais-caso{ will-change:opacity; }
@media (hover:hover) and (pointer:fine){
  html.cursor-vivo .mais-caso{ cursor:none; }
}
@media (max-width:820px){
  .mais-trilho{ gap:var(--s3); }
  .mais-caso .pilha-nome{ font-size:20px; }
  .mais-caso .pilha-fig{ border-radius:var(--raio-g); }
}

/* ---------- cursor "Abrir case" ------------------------------------
   Etiqueta preta que segue o ponteiro sobre a pilha (Figma no 167-5453).
   O desenho tem 64x25 com texto de 9px; aqui ela vai 1,3x maior, com
   texto de 12px, para ser lida em tela. So existe com mouse: no toque o
   CSS nunca a mostra e o cursor nativo segue intacto.                */
.cursor-caso{
  position:fixed; left:0; top:0; z-index:90; pointer-events:none;
  padding:7px 14px; border-radius:999px;
  background:var(--tinta); color:var(--ground);
  font-size:12px; line-height:18px; letter-spacing:-.006em; white-space:nowrap;
  /* a posicao vai na propriedade translate, que o JS escreve a cada
     quadro sem transicao; o transform so cuida da escala de entrada  */
  opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:opacity .2s linear, transform .3s var(--curva);
}
.cursor-caso.ativo{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:hover) and (pointer:fine){
  html.cursor-vivo .pilha-caso{ cursor:none; }
}
@media (hover:none), (pointer:coarse){
  .cursor-caso{ display:none; }
}

/* ---------- servicos: o que eu entrego -------------------------------
   Lista numerada em duas colunas. O numero conta: sao seis frentes, e ver
   o 06 no fim diz o tamanho da oferta sem precisar escrever.

   A secao esta fora do ar (hidden no index.html). O estilo fica aqui
   pronto para o dia em que ela entrar; ?servicos na URL revela para
   conferir.
   --------------------------------------------------------------------- */
.serv{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s6); }
.serv-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3);
  padding-top:var(--s3); border-top:1px solid var(--line);
}
.serv-conta{ padding-top:4px; }
.serv-item h3{ font-size:var(--t3); line-height:1.3; letter-spacing:-.008em; }
.serv-item p{ margin-top:6px; color:var(--tinta-2); max-width:44ch; }

@media (max-width:860px){
  .serv{ grid-template-columns:1fr; gap:var(--s3); }
}
@media (max-width:520px){
  .serv-item{ grid-template-columns:1fr; gap:var(--s1); }
  .serv-conta{ padding-top:0; }
}

/* ---------- lideranca: lista que abre, com a prova ao lado ---------
   A secao de trabalho saiu da home, entao esta virou a dobra que sustenta
   a pagina sozinha, e texto puro nao sustenta. Cada decisao mostra o
   artefato que a comprova: a regua de criterios, o quadro de indicadores,
   a documentacao do sistema, o time operando.

   A linha aberta e uma so. Passar o mouse, tocar ou chegar pelo teclado
   troca a aberta e a imagem ao lado, junto. A altura anima por
   grid-template-rows de 0fr para 1fr, que e o unico jeito de animar
   "ate o conteudo" sem cravar altura em pixel.                       */
.lider{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:var(--s6); align-items:start; }
.lider-lista{ display:flex; flex-direction:column; }

.lider-linha{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3);
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; padding:var(--s3) 0;
  border-top:1px solid var(--line);
  transition:border-color .3s var(--curva);
}
.lider-lista .lider-linha:last-child{ border-bottom:1px solid var(--line); }
.lider-linha.ativa{ border-top-color:var(--tinta); }
.lider-conta{ padding-top:5px; transition:color .3s var(--curva); }
.lider-linha.ativa .lider-conta{ color:var(--tinta); }
.lider-corpo{ display:block; }
.lider-frase{
  display:block; font-size:var(--t4); line-height:1.3; letter-spacing:-.014em;
  color:var(--tinta-2); transition:color .3s var(--curva);
}
.lider-linha.ativa .lider-frase, .lider-linha:hover .lider-frase{ color:var(--tinta); }

/* 0fr para 1fr: abre ate a altura do conteudo, sem numero cravado */
.lider-abre{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--curva);
}
.lider-linha.ativa .lider-abre{ grid-template-rows:1fr; }
.lider-dentro{ overflow:hidden; }
.lider-texto{
  display:block; padding-top:var(--s2); color:var(--tinta-2); max-width:52ch;
}
.lider-prova{ display:block; padding-top:var(--s2); }

/* o palco fica preso enquanto a lista passa */
.lider-palco{
  position:sticky; top:calc(76px + var(--s3));
  border-radius:var(--raio-g); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
  aspect-ratio:4/3;
}
.lider-fig{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity .5s var(--curva);
}
.lider-fig.ativa{ opacity:1; }
.lider-fig img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:1023px){
  /* sem palco preso: a prova vem junto de cada decisao, tudo aberto */
  .lider{ grid-template-columns:1fr; gap:var(--s4); }
  .lider-palco{ display:none; }
  .lider-abre{ grid-template-rows:1fr; }
  .lider-linha{ cursor:default; }
  .lider-linha .lider-frase{ color:var(--tinta); }
}
@media (max-width:520px){
  .lider-linha{ grid-template-columns:1fr; gap:var(--s1); }
  .lider-conta{ padding-top:0; }
}

/* a afirmação centrada ocupa o bloco inteiro, não uma coluna dele */
.d3.centro{ max-width:30ch; margin-inline:auto; text-align:center; }

/* ---------- bloco invertido, usado uma vez por página ---------- */
.inverte{
  background:var(--invertido); color:var(--sobre-invertido);
  border-radius:var(--raio-g); padding:var(--s7) var(--s6);
}
.inverte .fraco{ color:#a3a09a; }

/* ---------- contato ---------- */
/* o fecho e centrado, como a afirmacao logo acima: as duas ultimas
   dobras da pagina fecham no eixo, e nao alinhadas a esquerda */
.contato{ padding-block:var(--s7) var(--s6); text-align:center; }
.contato .d2{ max-width:18ch; margin-inline:auto; }
/* o fecho dos cases e uma frase, nao um convite curto: a medida de 18ch
   foi calibrada para "Vamos construir algo juntos?" na home e quebraria
   essa frase em seis linhas estreitas                                 */
.contato--frase .d2{ max-width:30ch; }
.contato-links{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2) var(--s5); margin-top:var(--s4); font-size:var(--t3); }
.contato-links a{ padding-bottom:2px; border-bottom:1px solid var(--line); transition:border-color .2s var(--curva); }
.contato-links a:hover{ border-color:var(--tinta); }

.rodape{ padding-block:var(--s3) var(--s6); border-top:1px solid var(--line); }
.rodape-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); }

/* ==========================================================================
   Página de caso
   ========================================================================== */
.caso-abre{ padding-block:var(--s7) var(--s6); }
.caso-abre .d1{ max-width:18ch; margin-top:var(--s3); }
.caso-capa{ margin-top:var(--s6); }
.caso-capa .marca-img{
  aspect-ratio:2/1; border-radius:var(--raio-g); background:var(--surface-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--line-forte); font-size:var(--t1);
}

/* ficha: fio de 1px e dois pesos de informação, na coluna direita.
   Diferente da referência, carrega papel e período — num portfólio de
   liderança é isso que o leitor procura.                              */
.caso-intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s6); align-items:start; }
.ficha{ display:flex; flex-direction:column; }
.ficha-linha{ display:flex; gap:var(--s3); padding-block:10px; border-top:1px solid var(--tinta); }
.ficha-linha dt{ flex:0 0 38%; color:var(--tinta-2); }
.ficha-linha dd{ flex:1; }

/* texto ao lado da mídia: o comentário fica ancorado na peça que descreve */
.par-midia{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:var(--s5); align-items:center; }
.par-midia--espelho{ grid-template-columns:minmax(0,340px) minmax(0,1fr); }
.par-midia--espelho .par-txt{ order:-1; }


/* duas ou tres em pe dividem a coluna larga, e cada uma cai para um terco */
.par-midias{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:var(--s2); align-items:start; }

.par-txt{ display:flex; flex-direction:column; gap:var(--s2); max-width:52ch; }
.par-txt p{ color:var(--tinta-2); }

.midia{ border-radius:var(--raio-g); overflow:hidden; background:var(--surface-2); border:1px solid var(--line); }
.midia .marca-img{ display:flex; align-items:center; justify-content:center; color:var(--line-forte); font-size:var(--t1); }
.r-16-10 .marca-img{ aspect-ratio:16/10; }
.r-213 .marca-img{ aspect-ratio:2.13/1; }
.r-3-2 .marca-img{ aspect-ratio:3/2; }
.r-4-3 .marca-img{ aspect-ratio:4/3; }
.r-2-1 .marca-img{ aspect-ratio:2/1; }
.r-3-4 .marca-img{ aspect-ratio:3/4; }

.midias-par{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }

/* fluxo de mídia: vão constante, o compasso vem da proporção */
.fluxo{ display:flex; flex-direction:column; gap:var(--s3); }

.bloco-txt{ display:flex; flex-direction:column; gap:var(--s2); max-width:62ch; }
.lista-fatos{ display:flex; flex-direction:column; gap:var(--s2); max-width:62ch; }
.lista-fatos li{ padding-left:22px; position:relative; color:var(--tinta-2); }
.lista-fatos li::before{ content:''; position:absolute; left:0; top:.7em; width:10px; height:1px; background:var(--line-forte); }

/* ponto de partida numerado em quatro colunas (Figma 179-675, case da
   Metta em 30/09/2026): o numero em tinta cheia, o texto no tom fraco */
.lista-num{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); }
.lista-num li{ display:flex; flex-direction:column; gap:var(--s1); }
.lista-num p{ color:var(--tinta-2); }
.lista-num.tres{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--s5); }
.lista-num strong{ color:var(--tinta); font-weight:600; }
@media (max-width:860px){ .lista-num,.lista-num.tres{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3); } }
@media (max-width:520px){ .lista-num,.lista-num.tres{ grid-template-columns:1fr; } }

/* par de midias com o vao do desenho, mais justo que o do fluxo */
.midias-par--justo{ gap:12px; }

.resultado{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s5); }
.resultado dt{ font-size:var(--t6); line-height:1; letter-spacing:-.02em; }
.resultado dd{ margin-top:var(--s1); color:var(--tinta-2); max-width:28ch; }

/* pendência do rascunho, sai antes de publicar */
.pendente{
  border:1px dashed var(--line-forte); border-radius:var(--raio);
  background:var(--surface); padding:var(--s3);
  color:var(--tinta-2); max-width:62ch;
}
.pendente b{ font-weight:400; color:var(--tinta); }

/* ---------- entrada escalonada, contida ----------
   Duração e curva das referências; o atraso por índice foi reduzido de
   0,15s para 0,07s e limitado a cinco itens, senão vira esteira.     */
@media (min-width:992px){
  /* texto sobe; a duração e a curva vêm da referência, o atraso por item
     foi reduzido de .15s para .07s e limitado, senão vira esteira */
  [data-entra] > *{
    opacity:0; transform:translateY(20px);
    transition:opacity .75s linear, transform .75s var(--curva);
  }
  [data-entra] > *:nth-child(1){ transition-delay:0s; }
  [data-entra] > *:nth-child(2){ transition-delay:.07s; }
  [data-entra] > *:nth-child(3){ transition-delay:.14s; }
  [data-entra] > *:nth-child(4){ transition-delay:.21s; }
  [data-entra] > *:nth-child(n+5){ transition-delay:.28s; }
  [data-entra].visivel > *{ opacity:1; transform:none; }

  /* imagem entra subindo e crescendo, por decisão do Renan em 14/09/2026.
     Antes ela entrava em scale(1.04) encolhendo para 1, sem subir; agora
     começa um pouco menor e cresce até o tamanho natural.

     Sem overflow:hidden no contêiner: ele existia porque o 1.04 fazia a
     peça transbordar, e agora o que sai da caixa é a subida, que ficaria
     cortada embaixo durante a animação.

     Quem recebe a classe é cada peça, não o contêiner: numa dobra de
     quatro imagens empilhadas, revelar tudo quando a primeira aparece
     deixaria as outras três prontas antes de o olho chegar nelas. */
  [data-img] > *{
    opacity:0; transform:translateY(24px) scale(.96);
    transition:opacity .9s linear, transform 1.1s var(--curva);
  }
  [data-img] > *.visivel{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  [data-entra] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- breakpoints ---------- */
@media (min-width:1600px){
  :root{ --t7:76px; --t6:52px; --t5:36px; --margem:56px; }
}
@media (max-width:1100px){
  :root{ --t7:52px; --t6:38px; --t5:28px; --t4:21px; --s8:120px; --s7:80px; --margem:32px; }
}
@media (max-width:860px){
  :root{ --t7:38px; --t6:30px; --t5:24px; --t4:19px; --t3:17px; --s8:88px; --s7:64px; --s6:48px; --margem:24px; }
  .nav-in{ height:64px; }
  .midias-par{ grid-template-columns:1fr; }
  .caso-intro{ grid-template-columns:1fr; gap:var(--s5); }
  .par-midia, .par-midia--espelho{ grid-template-columns:1fr; gap:var(--s3); }
  .par-midia--espelho .par-txt{ order:0; }
  .inverte{ padding:var(--s6) var(--s4); }
}
@media (max-width:520px){
  :root{ --t7:32px; --t6:26px; --margem:20px; }
}

/* ==========================================================================
   Página Sobre
   ========================================================================== */
.sobre-abre{ padding-block:var(--s8) var(--s7); }
/* 1ª dobra no layout do Figma J0U6e7yNqbGtpdqIVtS6oS, nó 33:1558:
   coluna de texto 663 px e foto 526 x 613 px, separadas por 28 px,
   alinhadas pelo topo; 16 px entre rótulo, título, textos e faixa. */
.sobre-abre-grade{ display:grid; grid-template-columns:minmax(0,663fr) minmax(0,526fr); gap:28px; align-items:start; }
.sobre-abre-txt{ display:flex; flex-direction:column; gap:var(--s2); }
.sobre-abre .d1{ max-width:586px; }
.sobre-abre-txt .corpo-g{ max-width:586px; }
.sobre-retrato{ border-radius:var(--raio-g); overflow:hidden; background:var(--surface-2); }
.sobre-retrato img{ width:100%; aspect-ratio:526/613; object-fit:cover; }

.manifesto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--s6); align-items:start; }

/* expertise: seis áreas em duas colunas, separadas por fio */
.expertise{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6); }
.exp-item{ padding-top:var(--s2); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.exp-item h3{ font-size:var(--t3); line-height:1.3; letter-spacing:-.008em; }
.exp-item p{ color:var(--tinta-2); max-width:44ch; }

/* bastidor: uma vertical alta ao lado de duas horizontais empilhadas */
/* Figma 33:1617: fotos em 583 px e trajetória em 611 px, 24 px entre elas;
   dentro da grade, vertical de 239 x 472 e horizontais de 332 px. */
.traj-dobra{ display:grid; grid-template-columns:minmax(0,583fr) minmax(0,611fr); gap:24px; align-items:start; }
.bastidor{ display:grid; grid-template-columns:minmax(0,239fr) minmax(0,332fr); gap:11.5px; }
/* sticky scroll: as fotos ficam presas abaixo do menu enquanto a lista da
   trajetória rola ao lado; mesmo recuo do sticky da home (76 px + s3) */
@media (min-width:861px){
  .traj-dobra{ align-items:stretch; }
  .bastidor{ position:sticky; top:calc(76px + var(--s3)); align-self:start; }
}
.bastidor-col{ display:flex; flex-direction:column; gap:11.5px; }
.bastidor figure{ border-radius:var(--raio-g); overflow:hidden; background:var(--surface-2); }
.bastidor img{ width:100%; height:100%; object-fit:cover; display:block; }
.bastidor .alta img{ aspect-ratio:239/472; }
.bastidor .larga img{ aspect-ratio:332/273; }
.bastidor .baixa img{ aspect-ratio:332/187; }

/* trajetória: linha por posição, período à direita */
.traj{ display:flex; flex-direction:column; }
.traj-item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3);
  align-items:baseline; padding-block:var(--s3); border-top:1px solid var(--line);
}
.traj-item:last-child{ border-bottom:1px solid var(--line); }
.traj-cargo{ font-size:var(--t3); letter-spacing:-.008em; }
.traj-desc{ color:var(--tinta-2); margin-top:4px; max-width:56ch; }
.traj-periodo{ color:var(--tinta-2); font-size:var(--t1); white-space:nowrap; font-variant-numeric:tabular-nums; }
.traj-formacao{ margin-top:var(--s3); color:var(--tinta-2); max-width:62ch; }

@media (max-width:860px){
  .sobre-abre-grade, .manifesto, .expertise, .traj-dobra{ grid-template-columns:1fr; gap:var(--s4); }
  .traj-item{ grid-template-columns:1fr; gap:4px; }
  .traj-periodo{ order:-1; }
}

/* imagem real dentro dos blocos de mídia do caso */
.midia img, .midia video, .caso-capa img, .caso-capa video{ width:100%; height:100%; object-fit:cover; display:block; }
.r-16-10 img{ aspect-ratio:16/10; } .r-3-2 img{ aspect-ratio:3/2; }
.r-213 img{ aspect-ratio:2.13/1; } .r-5-7 img{ aspect-ratio:5/7; }
.r-4-3 img{ aspect-ratio:4/3; } .r-2-1 img{ aspect-ratio:2/1; } .r-3-4 img{ aspect-ratio:3/4; }
.caso-capa img, .caso-capa video{ aspect-ratio:var(--capa, 2/1); border-radius:var(--raio-g); }
/* bloco de midia com proporcao livre, para o filme de 2520x1080 */
.midia[style*="--r"] img, .midia[style*="--r"] video{ aspect-ratio:var(--r); }
/* o filme herda o mesmo recorte da imagem, inclusive o canto */
.capa-filme{ background:var(--surface-2); }

/* depoimentos do case (Figma J0U6e7yNqbGtpdqIVtS6oS, nó 33:4168) */
.depo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:start; }
.depo-cab{ display:flex; flex-direction:column; gap:var(--s2); }
.depo-cab .d2{ max-width:18ch; }
.depo-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s4); }
.depo-lista li{ display:flex; flex-direction:column; gap:var(--s2); }
.depo-lista li > p:not(.depo-quem){ font-size:var(--t3); line-height:1.45; color:var(--tinta-2); max-width:58ch; margin:0; }
.depo-quem{ display:flex; flex-direction:column; margin:var(--s2) 0 0; font-size:var(--t3); line-height:1.4; }
.depo-quem strong{ font-weight:500; color:var(--tinta); }
.depo-quem span{ color:var(--tinta-2); }
@media (max-width:860px){ .depo{ grid-template-columns:1fr; gap:var(--s4); } }

/* sequencia de slides em loop (case Unnaderma): imagens empilhadas, uma visivel por vez */
.slides{ position:relative; }
.slides-in{ position:absolute; inset:0; }
.slides-in img{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.slides-in img.ativa{ opacity:1; }

/* grade de 3 colunas para slides (case Unnaderma) */
.grade-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
@media (max-width:860px){ .grade-3{ grid-template-columns:1fr 1fr; gap:var(--s2); } }
@media (max-width:520px){ .grade-3{ grid-template-columns:1fr; } }

/* Sobre: frase de prova sob o título e links da linha de marcas */
.sobre-prova{ margin:0; }
.traj-formacao a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

/* Sobre: faixa de logos em loop, com as bordas suavizadas */
.faixa-janela{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.faixa-trilho{ display:flex; width:max-content; animation:faixa-corre 40s linear infinite; }
.faixa-janela:hover .faixa-trilho{ animation-play-state:paused; }
.faixa-janela{ max-width:586px; padding-block:19px; }
.faixa-lista{ display:flex; align-items:center; gap:38px; padding-right:38px; list-style:none; margin:0; }
.faixa-lista li{ flex:none; display:flex; align-items:center; }
.faixa-lista img{ display:block; width:auto; }
@keyframes faixa-corre{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .faixa-trilho{ animation:none; } }
@media (max-width:860px){ .faixa-lista{ gap:var(--s4); padding-right:var(--s4); } .faixa-lista img{ height:auto; max-height:36px; } }