/* =====================================================================
   José Luiz · estilo
   Preto, tipografia enorme e um azul de marca-texto. O azul nunca é
   fundo nem degradê: ele acende coisa pontual, como caneta em cima de
   papel preto.
   ===================================================================== */

/* as posições das manchas do hero são propriedades tipadas para o
   navegador poder interpolar sem reanalisar o gradiente a cada quadro */
@property --x1{syntax:'<percentage>';inherits:true;initial-value:30%}
@property --y1{syntax:'<percentage>';inherits:true;initial-value:35%}
@property --x2{syntax:'<percentage>';inherits:true;initial-value:70%}
@property --y2{syntax:'<percentage>';inherits:true;initial-value:60%}
@property --x3{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --y3{syntax:'<percentage>';inherits:true;initial-value:80%}
@property --r{syntax:'<length>';inherits:true;initial-value:14rem}
@property --rf{syntax:'<length>';inherits:true;initial-value:9rem}
@property --fx1{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --fy1{syntax:'<percentage>';inherits:true;initial-value:40%}
@property --fx2{syntax:'<percentage>';inherits:true;initial-value:60%}
@property --fy2{syntax:'<percentage>';inherits:true;initial-value:60%}
@property --fx3{syntax:'<percentage>';inherits:true;initial-value:40%}
@property --fy3{syntax:'<percentage>';inherits:true;initial-value:70%}

:root{
  --preto:#0b0b0c;
  --carvao:#141416;
  --chumbo:#2b2b2f;
  --tinta:#f4f4f2;
  --tinta-2:#a5a5a2;
  --tinta-3:#76767a;
  --sinal:#d2ff00;          /* 16.8:1 sobre o preto */
  --sinal-fundo:#3a4600;    /* só para bloco sólido, nunca degradê */
  --creme:#eceae2;          /* fundo dos blocos claros */
  --linha:#f4f4f21f;

  --f-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --f:"Space Grotesk",system-ui,-apple-system,sans-serif;

  --t-p:clamp(1rem,.3vw + .93rem,1.15rem);
  --t-grande:clamp(1.2rem,1vw + .95rem,1.6rem);
  --t-titulo:clamp(3rem,11vw,9rem);
  --t-hero:clamp(4rem,26vw,17rem);

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --larg:1400px;
  --curva:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--preto);color:var(--tinta);
  font-family:var(--f);font-size:var(--t-p);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
h1,h2,h3,p{margin:0}
::selection{background:var(--sinal);color:var(--preto)}
:focus-visible{outline:3px solid var(--sinal);outline-offset:3px}

.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pula{
  position:fixed;top:0;left:0;z-index:300;transform:translateY(-110%);
  padding:.9rem 1.3rem;background:var(--sinal);color:var(--preto);font-weight:700;
}
.pula:focus{transform:none}

.envelope{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- tipos ---------- */
.titulo{
  font-family:var(--f-display);
  font-size:var(--t-titulo);
  font-variation-settings:"wght" 800,"wdth" 100;
  line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;
  margin-block:.12em .3em;
}
.palavra{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.04em;              /* a perna do J e do Q não é cortada */
}
.palavra > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--atraso,0ms);
}
.titulo.escrito .palavra > span{transform:none}
html:not(.js) .palavra > span{transform:none}

.titulo--duplo{display:flex;flex-direction:column}
.titulo--duplo span:first-child{align-self:flex-start;padding-left:.06em}
.titulo--gigante{font-size:clamp(3.4rem,14vw,12rem)}
.aceso{color:var(--sinal)}

.etiqueta{
  display:flex;align-items:center;gap:.7em;
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-3);
}
.etiqueta em{font-style:normal;color:var(--sinal)}

.texto{color:var(--tinta-2);font-size:var(--t-grande);line-height:1.5;max-width:46ch}
.texto--largo{max-width:54ch;margin-top:1rem}
.texto + .texto{margin-top:1.1rem}

/* ---------- topo ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:color .3s var(--curva);
}
/* sobre a seção clara o cabeçalho inverte. Era mix-blend-mode:difference
   antes, mas difference transforma o ciano em vermelho no fundo claro. */
.topo--claro{color:var(--preto)}
.topo--claro .abre{border-color:var(--preto)}
.topo--claro .abre i{background:var(--preto)}
/* Sobre o creme, o verde-limão da máscara dá 1,04:1 e some. Este é o
   tom mais vivo que ainda passa de 3:1, o mínimo para texto grande em
   negrito. No fundo escuro a marca volta ao verde puro, que lá rende
   16,9:1. */
.topo--claro .marca span{color:#509400}
.marca{
  display:flex;align-items:center;min-height:44px;
  font-family:var(--f-display);font-size:clamp(1.35rem,2.2vw,1.9rem);
  font-variation-settings:"wght" 800,"wdth" 92;
  letter-spacing:-.02em;
}
.marca span{color:var(--sinal);transition:color .3s var(--curva)}
.abre{
  width:48px;height:48px;display:grid;place-items:center;
  border:2px solid var(--tinta);border-radius:50%;
  transition:border-color .3s var(--curva);
}
.abre span[aria-hidden]{display:grid;gap:4px;width:18px}
.abre i{display:block;height:2px;background:var(--tinta);transition:transform .3s var(--curva),opacity .2s,background .3s}
body.menu .abre i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu .abre i:nth-child(2){opacity:0}
body.menu .abre i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.gaveta{
  position:fixed;inset:0;z-index:90;background:var(--preto);
  padding:clamp(4.5rem,9vh,6.5rem) var(--gutter) clamp(1.5rem,4vh,2.5rem);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .3s var(--curva);
}
.gaveta[hidden]{display:none}
body.menu .gaveta{opacity:1}
body.menu{overflow:hidden}

/* Não há botão de fechar próprio: o do cabeçalho já vira X quando o menu
   abre, e os dois ficavam no mesmo canto, um por cima do outro. */

/* a galeria é a primeira coluna, mas só existe se houver foto. Sem
   `.tem-fotos` ela não ocupa faixa nenhuma da grade, em vez de deixar
   metade do painel vazia esperando arquivo. */
.gaveta-grade{
  max-width:var(--larg);margin:0 auto;min-height:100%;
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.gaveta-grade:has(.tem-fotos){grid-template-columns:minmax(0,1fr) auto}

.gaveta-galeria{display:none}
.gaveta-galeria.tem-fotos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,1rem);
}
.gaveta-galeria img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:3/4;filter:grayscale(1) contrast(1.05);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--curva),transform .5s var(--curva),filter .4s;
  transition-delay:var(--atraso,0ms);
}
body.menu .gaveta-galeria img{opacity:1;transform:none}
.gaveta-galeria img:hover{filter:grayscale(0)}

.gaveta-lado{display:grid;gap:clamp(1.6rem,4vh,2.6rem);justify-items:end;text-align:right}
.gaveta nav{display:grid;justify-items:end}
.gaveta nav a{
  display:block;padding-block:.14em;
  font-family:var(--f-display);
  font-size:clamp(2rem,6.5vw,4.4rem);
  font-variation-settings:"wght" 800,"wdth" 96;
  line-height:1;letter-spacing:-.03em;text-transform:uppercase;
  transition:color .25s var(--curva)}
.gaveta nav a:hover,.gaveta nav a:focus-visible{color:var(--sinal)}

.gaveta-rotulo{
  margin:0 0 .5rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta-3);
}
.gaveta-redes{width:100%;padding-top:1.4rem;border-top:1px solid var(--linha)}
.gaveta-redes ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;justify-content:flex-end;flex-wrap:wrap}
.gaveta-redes a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.gaveta-redes a:hover,.gaveta-redes a:focus-visible{color:var(--sinal)}
.gaveta-pe{color:var(--tinta-3);display:grid;gap:.2rem;font-size:.8rem}
.gaveta-pe a:hover{color:var(--sinal)}

@media (max-width:820px){
  .gaveta-grade,.gaveta-grade:has(.tem-fotos){grid-template-columns:minmax(0,1fr)}
  .gaveta-lado{justify-items:start;text-align:left}
  .gaveta nav{justify-items:start}
  .gaveta-redes ul{justify-content:flex-start}
  .gaveta-galeria.tem-fotos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- hero ---------- */
/* margem automática em cima e embaixo: o bloco centra no espaço que
   sobra em vez de grudar no topo e deixar um vão no meio da tela */
.hero-palco{position:relative;z-index:1;width:100%;max-width:var(--larg);margin:auto}
.hero-etiqueta{
  font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:1.5rem;
}

.hero-tipo{
  position:relative;isolation:isolate;
  /* com line-height .8 o acento do É sai da caixa da linha: sem esta
     folga ele é cortado no topo do bloco */
  padding-top:.14em;
}
.hero-nome{
  font-family:var(--f-display);
  font-size:var(--t-hero);
  font-variation-settings:"wght" 800,"wdth" 100;
  line-height:.8;letter-spacing:-.05em;
  text-transform:uppercase;
  color:#87857c;              /* 3,07:1 no creme. É o h1 da página: precisa
                                 continuar legível antes das manchas passarem */
  margin:0;
}
/* a máscara das manchas, reaproveitada pelo nome e pelo retrato */
.hero-nome--aceso{
  -webkit-mask-image:
    radial-gradient(circle var(--r) at var(--x1) var(--y1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--r) * .74) at var(--x2) var(--y2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--r) * .58) at var(--x3) var(--y3),#000 42%,transparent 72%);
  mask-image:
    radial-gradient(circle var(--r) at var(--x1) var(--y1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--r) * .74) at var(--x2) var(--y2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--r) * .58) at var(--x3) var(--y3),#000 42%,transparent 72%);
  -webkit-mask-composite:source-over;
  mask-composite:add;
  pointer-events:none;
}
.hero-nome--aceso{position:absolute;inset:0;color:var(--preto)}

/* ---------- retrato ----------
   Duas cópias da mesma foto: a de baixo apagada, a de cima inteira,
   recortada pelas manchas. É o que faz a cor acender só onde elas
   passam. Só existe quando o JS acha o arquivo. */
.hero-foto{
  /* z-index 0, não -1: a seção ganhou fundo próprio e o -1 jogava a foto
     para trás dele, sumindo com ela */
  position:absolute;right:clamp(0.5rem,4vw,4rem);bottom:0;z-index:0;
  transform:translate3d(0,var(--paralaxe,0),0);
  width:min(42vw,30rem);pointer-events:none;
  opacity:0;transition:opacity .8s var(--curva);
}
.hero-foto.tem-foto{opacity:1}
.hero-foto img{
  width:100%;height:auto;display:block;
}
.hero-foto-base{filter:grayscale(1) brightness(1.06) contrast(.92) opacity(.72)}
/* com duas fotos a de baixo apaga mais: o contraste entre as duas é o
   efeito, e apagamento leve faria parecer só um borrão */
.duas-fotos .hero-foto-base{filter:grayscale(1) brightness(1.24) contrast(.7) opacity(.4)}
.hero-foto-aceso{
  position:absolute;inset:0;filter:saturate(1.05);
  /* mesmo desenho de máscara, raio próprio: a caixa do retrato é bem
     menor que a do nome e com o --r dele a foto acendia inteira */
  /* variáveis próprias: a mancha é a mesma na tela, mas o ponto dentro
     desta caixa é outro, porque ela tem tamanho e lugar diferentes */
  -webkit-mask-image:
    radial-gradient(circle var(--rf) at var(--fx1) var(--fy1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .74) at var(--fx2) var(--fy2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .58) at var(--fx3) var(--fy3),#000 42%,transparent 72%);
  mask-image:
    radial-gradient(circle var(--rf) at var(--fx1) var(--fy1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .74) at var(--fx2) var(--fy2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .58) at var(--fx3) var(--fy3),#000 42%,transparent 72%);
}

.hero-linha{
  margin-top:1.8rem;max-width:44ch;
  font-size:var(--t-grande);line-height:1.45;color:var(--tinta-2);
}
.hero-pe{
  position:relative;z-index:1;
  width:100%;max-width:var(--larg);margin-inline:auto;
  padding-top:3rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.desce{
  display:inline-flex;align-items:center;gap:.7rem;min-height:48px;
  font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-3);transition:color .25s;
}
.desce:hover,.desce:focus-visible{color:var(--sinal)}
.desce svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:pula 2.4s var(--curva) infinite}
@keyframes pula{0%,70%,100%{transform:none}35%{transform:translateY(5px)}}
.hero-local{font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}

/* ---------- seções ---------- */
.secao{padding-block:clamp(4.5rem,11vh,8rem);position:relative}
.secao + .secao{border-top:1px solid var(--linha)}

/* ---------- barras da seção de stack ----------
   Colunas finas atrás do texto. Puro CSS: um gradiente repetido, sem
   imagem nem elemento extra. */
.stack{position:relative;overflow:hidden}
.stack::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    var(--linha) 0 1px, transparent 1px var(--passo));
  --passo:clamp(3.5rem,7vw,7rem);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);
}

/* ---------- esteira de tecnologias ---------- */
.esteira{margin-top:clamp(2rem,5vh,3.5rem);overflow:hidden;border-block:1px solid var(--linha);padding-block:1.1rem}
.esteira-trilho{display:flex;width:max-content;animation:corre 38s linear infinite}
.esteira:hover .esteira-trilho{animation-play-state:paused}
.esteira-lista{display:flex;gap:1rem;padding-right:1rem}
.esteira-lista li{
  flex:none;padding:.55em 1.1em;border:1px solid var(--linha);border-radius:999px;
  font-size:.92rem;font-weight:500;white-space:nowrap;color:var(--tinta-2);
  transition:border-color .25s,color .25s;
}
.esteira-lista li:hover{border-color:var(--sinal);color:var(--sinal)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- trajetória ----------
   Bloco claro no meio do preto. A troca de fundo marca a virada de
   assunto melhor do que qualquer separador. */
.trajetoria{
  position:relative;overflow:hidden;
  background:var(--tinta);color:var(--preto);
  --tinta-2:#4b4b49;--tinta-3:#5f5f59;--linha:#0b0b0c22;
}
.trajetoria .etiqueta em{color:#41521a}
.trajetoria .aceso{color:#41521a}
.trajetoria .ficha dd{color:var(--preto)}

/* a foto de perfil ao fundo. Fica bem apagada: ela é ambiente, e o texto
   por cima precisa continuar com contraste de leitura. */
.traj-fundo{
  /* começa abaixo do título e da ficha: com inset:0 o rosto subia e as
     linhas de dados caíam em cima dele */
  position:absolute;inset:0 0 0 54%;z-index:0;pointer-events:none;
  transform:translate3d(0,var(--paralaxe,0),0);
  opacity:0;transition:opacity 1s var(--curva);
}
.traj-fundo.tem-perfil{opacity:1}
.traj-fundo img{
  /* é recorte com transparência, não foto retangular: contain preserva a
     silhueta inteira em vez de cortar a cabeça no enquadramento */
  width:100%;height:100%;object-fit:contain;object-position:62% 100%;
  filter:grayscale(1) contrast(.9) brightness(1.05);
  mask-image:linear-gradient(#000 62%,transparent 96%);
  -webkit-mask-image:linear-gradient(#000 62%,transparent 96%);
  opacity:.42;
}
.trajetoria .envelope{position:relative;z-index:1}
/* Com foto atrás, texto e ficha ganham painel. Depender da posição da
   foto não funciona: a altura da seção muda com o tamanho do texto, e
   qualquer percentual acerta num tamanho e erra no outro. */
.trajetoria.com-perfil .trajeto-texto,
.trajetoria.com-perfil .ficha{
  background:#f4f4f2e6;
  backdrop-filter:blur(3px);
  padding:clamp(1.2rem,2.6vw,2rem);
}
.trajetoria.com-perfil .trajeto-texto{margin-left:calc(clamp(1.2rem,2.6vw,2rem) * -1)}
.trajetoria.com-perfil .ficha{align-self:start}
.trajeto{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,4vh,2.6rem);align-items:start;margin-top:clamp(1.5rem,4vh,2.5rem);
}
/* Texto e ficha empilhados à esquerda, a foto com a direita inteira. Era
   grade de duas colunas, e a segunda caía exatamente em cima do rosto.
   Disputar a mesma faixa e tentar acertar por margem não resolve: a
   altura da seção muda com o tamanho do texto, e o que encaixa numa
   largura escapa na outra. */
@media (min-width:900px){
  .trajeto{max-width:52%}
}
.trajeto-texto .texto{max-width:52ch}
.ficha{display:grid;gap:0;border-top:1px solid var(--linha)}
.ficha > div{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;
  padding-block:.85rem;border-bottom:1px solid var(--linha);align-items:baseline;
}
.ficha dt{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.ficha dd{color:var(--tinta)}

/* ---------- projetos ---------- */
.grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  gap:1px;background:var(--linha);
  border-block:1px solid var(--linha);
  margin-top:clamp(2rem,5vh,3.5rem);
}
.cartao{
  background:var(--preto);
  display:flex;flex-direction:column;
  position:relative;isolation:isolate;
  transition:background .25s var(--curva),color .25s var(--curva);
}
.cartao-corpo{
  padding:clamp(1.3rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;gap:.7rem;flex:1;
}

/* ---------- capa ----------
   Só projeto com endereço no ar entra com a tela real. O resto fica em
   texto: caixa cinza esperando print rouba mais atenção do que o
   próprio projeto e faz a grade parecer quebrada. */
.capa{
  aspect-ratio:3/2;overflow:hidden;background:var(--carvao);
  border-bottom:1px solid var(--linha);
}
.capa img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:grayscale(1) contrast(1.05) brightness(.78);
  transition:filter .35s var(--curva),transform .5s var(--curva);
}
.cartao:hover .capa img,.cartao:focus-within .capa img{
  filter:none;transform:scale(1.03);
}
.cartao--foto .capa{aspect-ratio:16/8}

/* ---------- grafismo sobre o rosto ----------
   O de fora recorta pelo alfa da própria foto, então o padrão nunca
   escapa do contorno da pessoa. O de dentro é recortado pelas manchas. */
.hero-foto-silhueta{
  position:absolute;inset:0;
  -webkit-mask-image:var(--silhueta);mask-image:var(--silhueta);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mask-mode:alpha;
}
.hero-foto-graf{
  position:absolute;inset:0;
  background:var(--grafismo) center / 100% 100% no-repeat;
  -webkit-mask-image:
    radial-gradient(circle var(--rf) at var(--fx1) var(--fy1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .74) at var(--fx2) var(--fy2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .58) at var(--fx3) var(--fy3),#000 42%,transparent 72%);
  mask-image:
    radial-gradient(circle var(--rf) at var(--fx1) var(--fy1),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .74) at var(--fx2) var(--fy2),#000 42%,transparent 72%),
    radial-gradient(circle calc(var(--rf) * .58) at var(--fx3) var(--fy3),#000 42%,transparent 72%);
  -webkit-mask-composite:source-over;mask-composite:add;
}
/* com grafismo por cima, a pessoa embaixo fica mais presente */
.com-grafismo .hero-foto-base{filter:grayscale(1) brightness(1) contrast(1) opacity(.9)}
/* fio azul que cresce na borda de cima, no lugar de brilho */
.cartao::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--sinal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--curva);
}
.cartao:hover::before,.cartao:focus-within::before{transform:scaleX(1)}
.cartao:hover{background:var(--carvao)}
.cartao--destaque{grid-column:span 2;background:var(--carvao)}
.cartao--destaque .cartao-nome{font-size:clamp(1.9rem,3.4vw,2.9rem)}

.cartao-n{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--tinta-3);
}
.cartao-nome{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-variation-settings:"wght" 800,"wdth" 92;
  line-height:1;letter-spacing:-.03em;text-transform:uppercase;
}
.cartao-texto{color:var(--tinta-2);font-size:.98rem;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.6rem}
.chips li{
  font-size:.76rem;font-weight:500;letter-spacing:.04em;
  padding:.3em .7em;border:1px solid var(--linha);border-radius:999px;color:var(--tinta-3);
}
.cartao-estado{
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sinal);
}

/* ---------- contato ----------
   Sem foto: a última tela é só a chamada e os atalhos. A foto repetia o
   hero e disputava atenção justamente onde a pessoa decide escrever. */
.contato-palco{display:grid;justify-items:center;text-align:center}
.contato-titulo{
  text-align:center;
  font-size:clamp(3.6rem,17vw,15rem);
  line-height:.84;letter-spacing:-.045em;
}
.contato-frase{max-width:46ch;margin-inline:auto}
.contato-corpo{
  width:100%;display:grid;justify-items:center;
  margin-top:clamp(2rem,6vh,3.5rem);
}
.contato-atalhos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;
}
.contato-atalhos a{
  width:60px;height:60px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:16px;color:var(--tinta-2);
  transition:color .25s var(--curva),border-color .25s var(--curva),transform .25s var(--curva);
}
.contato-atalhos a:hover,.contato-atalhos a:focus-visible{
  color:var(--sinal);border-color:var(--sinal);transform:translateY(-3px);
}
.contato-atalhos svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contato-atalhos b{font-family:var(--f);font-size:.82rem;font-weight:700;letter-spacing:.08em}

/* o ícone entra como máscara, não como <img>: assim ele é pintado com a
   cor do texto e acende no verde junto com a ficha no hover */
.tec i{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;
  mask:var(--ic) center/contain no-repeat;
}

/* ---------- o que acompanha o título da faixa ---------- */
.faixa-sobre{
  margin-top:clamp(2rem,6vh,3.6rem);padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid var(--linha);
  max-width:var(--larg);width:100%;
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:start;
}
@media (min-width:900px){
  .faixa-sobre{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}
.faixa-texto > *{min-width:0}
.faixa-linha{
  margin:0;font-family:var(--f-display);
  font-size:clamp(1.5rem,4vw,3rem);
  font-variation-settings:"wght" 700,"wdth" 96;
  line-height:1.06;letter-spacing:-.025em;text-wrap:balance;
}
.faixa-linha--2{
  font-weight:400;font-variation-settings:"wght" 300,"wdth" 100;
  color:var(--tinta-2);font-style:italic;margin-top:.3em;
}

/* =====================================================================
   HERO  ·  a foto e a máscara que passeia por ela
   ===================================================================== */
.hero{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;
  padding:3.4rem var(--gutter) 0;   /* zero embaixo: a foto encosta no fim */
  position:relative;overflow:hidden;
  background:var(--creme);color:var(--preto);
  --tinta-2:#4b4b49;--tinta-3:#5f5f59;--linha:#0b0b0c22;
}
.hero-retrato{
  display:block;width:min(98vw,92vh);height:auto;aspect-ratio:1;align-self:end;
  overflow:visible;                       /* o goo transborda a caixa */
  transform:translate3d(0,var(--paralaxe,0),0);
  opacity:0;animation:hero-entra .9s var(--curva) .1s forwards;
  position:relative;z-index:1;
}
@keyframes hero-entra{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1}}
.hero-retrato image{pointer-events:none}
/* o rodapé flutua sobre a foto: no fluxo ele a empurrava para cima e
   devolvia a faixa vazia embaixo */
.hero .hero-pe{
  position:absolute;z-index:2;
  left:var(--gutter);right:var(--gutter);bottom:clamp(1.1rem,3.2vh,2rem);
  pointer-events:none;width:auto;max-width:none;
}
.hero .hero-pe a{pointer-events:auto}

/* ---------- linhas do fundo ---------- */
.linhas-fundo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;pointer-events:none;
}

/* =====================================================================
   PAINÉIS EMPILHADOS
   Cada seção gruda no topo e a seguinte sobe por cima. Só entram as que
   cabem numa tela: presa em top:0, uma seção mais alta que a viewport
   nunca mostra o próprio fim. Por isso a Trajetória fica de fora.
   ===================================================================== */
main > *{position:relative}
main > :where(.secao,.faixa){background:var(--preto)}
.hero{z-index:0}
#apresenta{z-index:1}
#stack{z-index:2}
#trajetoria{z-index:3}
#projetos{z-index:4}
#contato{z-index:5}
.painel{position:sticky;top:0;min-height:100svh;display:grid;align-content:center}
main > .secao:not(.hero){box-shadow:0 -30px 80px rgba(11,11,12,.45)}
.trajetoria{box-shadow:0 -30px 80px rgba(11,11,12,.25)}

/* ---------- a faixa que sobe por cima do hero ---------- */
.faixa{
  min-height:100svh;display:grid;align-content:start;
  padding:clamp(4.5rem,11vh,7rem) var(--gutter) clamp(2rem,5vh,3.5rem);
  box-shadow:0 -30px 80px rgba(11,11,12,.45);
}
.faixa-titulo{
  margin:0;max-width:var(--larg);
  font-family:var(--f-display);
  font-size:clamp(2.8rem,13.5vw,12rem);
  font-variation-settings:"wght" 800,"wdth" 100;
  line-height:.86;letter-spacing:-.045em;text-transform:uppercase;
}
/* o degradê vive em cada palavra, e cada uma entra na volta do brilho um
   pouco depois da anterior. Numa faixa só, o brilho cruzaria a frase
   inteira de uma vez e viraria um flash. */
.faixa-titulo span{
  display:inline-block;
  background:linear-gradient(96deg,var(--sinal) 0%,#fff 30%,#fff 52%,var(--sinal) 82%,#fff 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilho 3.4s linear infinite;
}
.faixa-titulo span:nth-child(2){animation-delay:.25s}
.faixa-titulo span:nth-child(3){animation-delay:.5s}
.faixa-titulo span:nth-child(4){animation-delay:.75s}
@keyframes brilho{from{background-position:180% 0}to{background-position:-100% 0}}

/* ---------- fichas da stack ---------- */
.tecs{
  list-style:none;margin:clamp(2rem,5vh,3.2rem) auto 0;padding:0;
  max-width:var(--larg);width:100%;
  display:flex;flex-wrap:wrap;gap:.7rem;
}
.tec{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.15rem;border:1px solid var(--linha);border-radius:999px;
  font-family:var(--f);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);
  transition:color .25s var(--curva),border-color .25s var(--curva),transform .25s var(--curva);
}
.tec:hover{color:var(--sinal);border-color:var(--sinal);transform:translateY(-2px)}
/* o ícone entra como máscara, não como <img>: assim é pintado com a cor
   do texto e acende no verde junto com a ficha */
.tec i{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;
  mask:var(--ic) center/contain no-repeat;
}

/* ---------- números ---------- */
.numeros{
  margin:0;display:grid;gap:clamp(1.6rem,4vw,2.6rem) clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.numero dt{
  font-family:var(--f);font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:.3rem;text-wrap:balance;
}
.numero dd{
  margin:0;display:flex;align-items:baseline;
  font-family:var(--f-display);
  font-size:clamp(2.8rem,7vw,5rem);
  font-variation-settings:"wght" 800,"wdth" 100;
  line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;   /* sem isso a largura pula a cada passo */
}
.numero dd i{font-style:normal;font-size:.62em;color:var(--tinta-3)}
@media (max-width:420px){.numeros{gap:1.3rem 1rem}}

/* ---------- ver mais projetos ---------- */
.grade.cortada > li:nth-child(n+4){display:none}
/* O fundo da grade desenha as divisórias pelo gap de 1px. Cortada, a
   célula que sobra não tem cartão em cima e o fundo vira um retângulo
   cinza. Então cada cartão passa a desenhar a própria borda, que não
   depende de célula preenchida, e vale em qualquer número de colunas. */
/* O truque do fundo colorido sai de cena de vez, cortada ou inteira: com
   treze cartões a última linha também não fecha, e toda célula sem cartão
   virava um retângulo cinza. Cada cartão desenha a própria divisória, que
   não depende de a linha estar cheia. */
.grade{background:transparent}
.grade .cartao{box-shadow:0 0 0 1px var(--linha)}

/* Três cartões só fecham a linha num número de colunas que divida três.
   O auto-fill dava quatro no desktop e deixava a quarta célula vazia, e
   o destaque ainda ocupava duas, empurrando o terceiro para baixo. */
.grade.cortada{grid-template-columns:minmax(0,1fr)}
.grade.cortada .cartao--destaque{grid-column:span 1}
@media (min-width:700px){
  .grade.cortada{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.ver-mais{
  margin:clamp(2rem,5vh,3rem) auto 0;
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  padding:.9rem 1.7rem;border:1px solid var(--linha);border-radius:999px;
  font-family:var(--f);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
  transition:color .25s var(--curva),border-color .25s var(--curva);
}
.ver-mais:hover,.ver-mais:focus-visible{color:var(--sinal);border-color:var(--sinal)}
.ver-mais em{font-style:normal;color:var(--sinal);font-variant-numeric:tabular-nums}

/* ---------- trajetória: texto à esquerda, foto com a direita ---------- */
.trajeto{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,4vh,2.6rem);align-items:start;margin-top:clamp(1.5rem,4vh,2.5rem);
}
@media (min-width:900px){.trajeto{max-width:52%}}

@media (prefers-reduced-motion:reduce){
  .hero-retrato{opacity:1;animation:none}
  .faixa-titulo span{animation:none;color:var(--sinal);-webkit-text-fill-color:currentColor}
}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding-block:1.8rem;background:var(--preto);position:relative;z-index:6}
.rodape-linha{display:flex;gap:.6rem 2rem;flex-wrap:wrap;color:var(--tinta-3);font-size:.86rem}

/* J e Z na cor da máscara, o resto no tom do cabeçalho */
.marca span{color:var(--sinal);transition:color .3s var(--curva)}
/* mesma técnica das fichas: o logo entra como máscara e é pintado com a
   cor do texto, então acende no verde junto com o botão */
.contato-atalhos i{
  width:23px;height:23px;display:block;background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;
  mask:var(--ic) center/contain no-repeat;
}

/* ---------- seletor de idioma ---------- */
.topo-acoes{display:flex;align-items:center;gap:.5rem}
.idioma{position:relative}
.idioma-botao{
  display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .7rem;
  border:1px solid var(--linha);border-radius:999px;color:var(--tinta-2);
  font-family:var(--f);font-size:.76rem;font-weight:700;letter-spacing:.1em;
  transition:color .25s var(--curva),border-color .25s var(--curva);
}
.idioma-botao:hover,.idioma-botao:focus-visible{color:var(--sinal);border-color:var(--sinal)}
.idioma-botao svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.topo--claro .idioma-botao{color:var(--preto);border-color:#0b0b0c33}

.idioma-lista{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:95;
  list-style:none;margin:0;padding:.35rem;min-width:11rem;
  background:var(--carvao);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.idioma-lista[hidden]{display:none}
.idioma-lista button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .7rem;border-radius:8px;min-height:44px;
  font-family:var(--f);font-size:.86rem;color:var(--tinta-2);text-align:left;
  transition:background .2s var(--curva),color .2s var(--curva);
}
.idioma-lista button:hover,.idioma-lista button:focus-visible{background:#f4f4f210;color:var(--tinta)}
.idioma-lista button[aria-current="true"]{color:var(--sinal)}
.idioma-lista em{font-style:normal;font-size:.7rem;letter-spacing:.1em;opacity:.6}

/* As duas palavras empilham, como no resto dos títulos grandes do site.
   Lado a lado, com os 17vw do tamanho gigante, a frase estourava a tela.
   Empilhado também resolve o espaço entre elas, que não existe mais:
   cada palavra virou um elemento próprio para poder ser traduzida. */
.contato-titulo{display:flex;flex-direction:column;align-items:center}

/* ---------- menu: contraste e acabamento ---------- */
/* Com o menu aberto o fundo é sempre escuro. Sem isto, abrir o menu por
   cima de uma seção clara deixava o cabeçalho invertido: o nome ficava
   preto no preto e só sobravam o J e o z. */
body.menu .topo{color:var(--tinta)}
body.menu .topo .marca span{color:var(--sinal)}
body.menu .topo .abre{border-color:var(--tinta)}
body.menu .topo .abre i{background:var(--tinta)}
body.menu .topo .idioma-botao{color:var(--tinta-2);border-color:var(--linha)}

.gaveta .linhas-fundo{position:absolute;inset:0;height:100%;z-index:0}
.gaveta-grade{position:relative;z-index:1}

/* a foto acende a cor e cresce um pouco dentro do próprio quadro */
.gaveta-galeria img{border-radius:10px}
body.menu .gaveta-galeria img:hover{filter:grayscale(0) contrast(1);transform:scale(1.03)}

/* a marca assina o rodapé, com o mesmo corte do cabeçalho */
.rodape-marca{
  font-family:var(--f-display);font-size:.95rem;
  font-variation-settings:"wght" 800,"wdth" 92;
  letter-spacing:.04em;color:var(--tinta);margin-right:auto;
}
.rodape-marca span{color:var(--sinal)}

/* ---------- link e nota dos projetos ---------- */
/* Só três têm endereço público. Nos outros a linha explica o motivo em
   vez de deixar o vazio sugerir que não existe nada para ver. */
.cartao-link{
  margin-top:auto;padding-top:.9rem;
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-family:var(--f);font-size:.78rem;letter-spacing:.06em;
  color:var(--sinal);width:fit-content;
}
.cartao-link::after{content:"↗";font-size:.9em;transition:transform .25s var(--curva)}
.cartao-link:hover::after,.cartao-link:focus-visible::after{transform:translate(2px,-2px)}
.cartao-nota{
  margin:auto 0 0;padding-top:.9rem;
  font-size:.76rem;line-height:1.45;color:var(--tinta-3);max-width:34ch;
}

/* =====================================================================
   RESPONSIVO

   O empilhamento de painéis é um efeito de tela larga. Abaixo do
   desktop ele sai: preso em top:0, um painel mais alto que a tela nunca
   mostra o próprio fim, porque o seguinte sobe por cima antes — e no
   celular quase todo conteúdo é mais alto que a tela.
   ===================================================================== */
@media (max-width:899px){
  .painel,.hero{position:static;min-height:auto}
  .painel{align-content:start;padding-block:clamp(3.5rem,10vh,5rem)}
  main > .secao:not(.hero),.faixa,.trajetoria{box-shadow:none}
  .faixa{padding-block:clamp(4rem,12vh,6rem)}
  .hero{padding:5.5rem var(--gutter) 0;min-height:92svh}
  .hero-retrato{width:min(96vw,66vh)}
  .contato-corpo{margin-top:1.6rem}
}

/* Tela deitada e baixa: a foto ocupava 92vh e empurrava tudo para fora.
   Aqui ela cede espaço em vez de mandar na altura da seção. */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:auto;padding-block:4.2rem .8rem}
  .hero-retrato{width:min(52vw,74vh)}
  .faixa,.painel{min-height:auto;padding-block:3.5rem}
}

@media (max-width:600px){
  /* Dois números numa coluna de 130px deixavam o rótulo em cinco linhas */
  .numeros{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .numero dd{font-size:clamp(2.6rem,13vw,3.4rem)}
  .contato-titulo{font-size:clamp(2.6rem,15vw,5rem)}
  .titulo--gigante{font-size:clamp(2.8rem,13vw,6rem)}
  .faixa-titulo{font-size:clamp(2.4rem,15vw,5rem)}
  .faixa-linha{font-size:clamp(1.25rem,6vw,1.9rem)}
  /* quatro fotos em três colunas deixavam a última sozinha embaixo */
  .gaveta-galeria.tem-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gaveta nav a{font-size:clamp(1.8rem,10vw,2.8rem)}
  .tec{padding:.6rem .9rem;font-size:.72rem}
  .cartao-nota,.cartao-link{font-size:.74rem}
}

@media (max-width:380px){
  .idioma-botao span{display:none}   /* só o globo, para caber ao lado do menu */
  .idioma-botao{padding:.4rem .5rem}
  .marca{font-size:1.15rem}
}

/* nada pode empurrar a página para os lados */
html,body{max-width:100%}
img,svg,canvas,video{max-width:100%}

/* =====================================================================
   CELULAR  ·  os últimos detalhes

   1. O HTML pede `viewport-fit=cover`, então a página ocupa até as
      bordas da tela. Sem reservar as áreas seguras, o conteúdo passa
      por baixo do notch em cima e da barra de gestos embaixo.

   2. Texto de rótulo estava entre 11,2 e 11,8px. Em maiúsculas e com
      espaçamento entre letras isso cansa a vista em tela pequena, e
      12px é o piso de conforto.
   ===================================================================== */
@media (max-width:899px){
  .topo{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
    padding-top:max(1.1rem, env(safe-area-inset-top));
  }
  .hero,.faixa,.secao,.gaveta{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .hero .hero-pe{
    left:max(var(--gutter), env(safe-area-inset-left));
    right:max(var(--gutter), env(safe-area-inset-right));
    bottom:max(clamp(1.1rem,3.2vh,2rem), env(safe-area-inset-bottom));
  }
  .rodape{padding-bottom:max(1.8rem, env(safe-area-inset-bottom))}
  .gaveta{padding-bottom:max(1.5rem, env(safe-area-inset-bottom))}

  /* piso de 12px nos rótulos */
  .gaveta-rotulo{font-size:.78rem}
  .ficha dt{font-size:.8rem}
  .tec{font-size:.78rem}
  .cartao-link,.cartao-nota{font-size:.8rem}
  .numero dt{font-size:.78rem}
  .etiqueta{font-size:.8rem}
  .abertura-nome,.hero-local,.desce span{font-size:.78rem}
}