/* Fontes embutidas (OFL): Big Shoulders variável com eixo opsz — o tamanho óptico automático
   deixa o display estreito como no Figma — e Instrument Sans. Só latin e latin-ext. */
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/big-shoulders-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/big-shoulders-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Portfólio v3 — réplica do Figma "Port 20.10/Portfa 3.fig" (frame "Site", 1424 px).
   Cores e fontes vêm do arquivo: creme #FEF7E3, grafite #302C2C, preto #000, cinzas dos
   cards #D2D2D2/#A9A9A9; Big Shoulders Black/Bold + Instrument Sans Regular/SemiBold/Bold.

   Medidas: no desktop tudo é escrito em "px do Figma" × --u, onde --u = largura útil / 1424
   (o JS acerta pelo clientWidth, sem a barra de rolagem). Assim o site é o frame do Figma em
   qualquer largura; acima de 1680 px a página para de crescer e centraliza. No celular
   (≤ 760 px) as seções viram fluxo normal. */

:root {
  --papel: #FEF7E3;
  --tinta: #302C2C;
  --preto: #000;
  --cinza1: #D2D2D2;
  --cinza2: #A9A9A9;
  --disp: "Big Shoulders", "Arial Narrow", sans-serif;
  --corpo: "Instrument Sans", system-ui, sans-serif;
  --u: calc(min(100vw, 1680px) / 1424);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tinta); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--corpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; }
b { font-weight: 700; }
::selection { background: var(--tinta); color: var(--papel); }

.pagina { position: relative; width: calc(1424 * var(--u)); margin: 0 auto; }

/* ---------- As 4 partes (início, works, about, contact) ---------- */
/* No desktop cada parte tem exatamente a altura da tela; a roda passa de uma para outra. */
img { max-width: none; } /* o Artifact põe max-width:100% em toda imagem e encolhia as que vazam de propósito */
/* Topo fixo: creme com mix-blend difference = grafite no creme e creme no grafite e nas fotos */
.topo-pag { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 60; mix-blend-mode: difference; }
.topo-pag .topo { color: var(--papel); }
.secao { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.secao > .pagina { will-change: transform; }
.secao-top > .pagina { height: 100%; }
/* Selected work: o bloco do Figma (rótulo + cards, 458 px) centrado na altura */
.secao-works { display: flex; flex-direction: column; justify-content: center; }
.secao-works > .pagina { flex: 0 0 auto; }
/* About: bloco de 473 px, baixo o bastante para a caixa da experiência não cair embaixo do menu */
.secao-about { display: flex; flex-direction: column; justify-content: center; }
.secao-about > .pagina { flex: 0 0 auto; }
/* Contact: tudo grafite, com o bloco do rodapé do Figma (551 px) assentado embaixo */
.secao-contact { background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; justify-content: flex-end; }
.rodape-in { height: calc(551 * var(--u)); flex: 0 0 auto; }

/* ---------- Topo ---------- */
.topo {
  position: absolute; left: calc(13 * var(--u)); top: calc(14 * var(--u));
  width: calc(1394 * var(--u)); height: calc(46 * var(--u));
  font: 900 calc(38.28 * var(--u)) / calc(46 * var(--u)) var(--disp); color: var(--tinta);
  text-transform: uppercase; z-index: 5;
}
.topo .marca { position: absolute; left: 0; top: 0; }
/* Seletor de língua, à esquerda da hora; a língua que não está em uso fica apagada */
.lingua { position: absolute; right: calc(112 * var(--u)); top: 0; display: flex; gap: calc(10 * var(--u)); }
.lingua button { opacity: .3; transition: opacity .3s var(--ease); line-height: inherit; }
.lingua button:hover { opacity: .7; }
.lingua button[aria-pressed="true"] { opacity: 1; }
/* troca de língua: o conteúdo some rapidinho, troca e volta */
.secao > .pagina, .letreiro-faixa, .menu { transition: opacity .26s var(--ease); }
.trocando-lingua .secao > .pagina, .trocando-lingua .letreiro-faixa, .trocando-lingua .menu { opacity: 0; }
.topo .hora { position: absolute; right: calc(0 * var(--u)); top: 0; font-variant-numeric: tabular-nums; }
.topo .hora i { font-style: normal; animation: pisca 2s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* Letreiro: janela do tamanho da frase do Figma (511 px, centrada); não tem caixa, só as
   bordas que somem num degradê curto marcando início e fim. */
.letreiro {
  position: absolute; left: calc(444 * var(--u)); top: 0; width: calc(511 * var(--u)); height: 100%;
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.letreiro-faixa { display: inline-flex; will-change: transform; }
.letreiro-faixa span { padding-right: .32em; }
.letreiro-faixa span::after { content: "•"; padding-left: .32em; }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(764 * var(--u)); }
.nome {
  position: absolute; left: calc(-14 * var(--u)); top: calc(197.8 * var(--u)); margin: 0;
  font: 900 calc(212.13 * var(--u)) / calc(207.84 * var(--u)) var(--disp);
  color: var(--tinta); text-transform: uppercase; white-space: nowrap; letter-spacing: 0;
}
.nome .linha { display: block; will-change: transform; }
/* máscara de cada linha: as letras sobem de baixo na entrada */
.nome .linha-in { display: inline-block; clip-path: inset(-12% -4% -2% -4%); }
.palavra { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; transform-origin: 50% 88%; will-change: transform; }

/* frase + "são paulo…" num bloco só, a partir do ponto do Figma: texto maior empurra a linha de baixo */
.hero-texto {
  position: absolute; left: calc(736 * var(--u)); top: calc(422.7 * var(--u)); width: calc(380 * var(--u));
  display: flex; flex-direction: column; gap: calc(18 * var(--u));
}
.hero-frase { margin: 0; font: 400 calc(19.65 * var(--u)) / 1.22 var(--corpo); color: var(--tinta); }
.hero-tag { margin: 0; font: 600 calc(19.65 * var(--u)) / 1.22 var(--corpo); color: var(--tinta); white-space: nowrap; }
.hero-tag .ponto { display: inline-block; animation: respira 2.4s var(--ease) infinite; }
@keyframes respira { 50% { opacity: .25; } }

/* Menu fixo: a cor creme com mix-blend difference vira quase preto no creme e claro no
   grafite e nas fotos, então ele lê em qualquer seção sem trocar de cor por JS. */
.menu {
  position: fixed; z-index: 50; top: calc(229 * var(--u));
  left: calc((100% - 1424 * var(--u)) / 2 + 1173 * var(--u));
  display: flex; flex-direction: column;
  font: 400 calc(22.6 * var(--u)) / calc(28 * var(--u)) var(--corpo);
  color: var(--papel); mix-blend-mode: difference;
}
.menu a { position: relative; display: block; width: max-content; }
/* todos sublinhados; o da parte atual fica com o traço mais grosso */
.menu a span {
  display: inline-block; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em; transition: text-decoration-thickness .3s var(--ease), transform .4s var(--ease);
}
.menu a.ativo span { text-decoration-thickness: 2px; }
.menu a:hover span { transform: translateX(calc(4 * var(--u))); }

/* Da segunda parte em diante o menu deita na horizontal, logo abaixo do topo, alinhado à direita
   (a troca de posição é animada no JS, letra por letra do lugar antigo ao novo) */
@media (min-width: 761px) {
  .menu.compacto {
    top: calc(64 * var(--u)); left: auto; right: calc((100% - 1424 * var(--u)) / 2 + 17 * var(--u));
    flex-direction: row; justify-content: space-between; width: var(--menu-w, auto);
    font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u));
  }
}

/* ---------- Selected work ---------- */
.trabalhos { position: relative; height: calc(538 * var(--u)); }
.rotulo {
  font: 400 calc(22 * var(--u)) / calc(27 * var(--u)) var(--corpo); color: var(--preto); margin: 0;
}
.trabalhos .rotulo { position: absolute; left: calc(247 * var(--u)); top: 0; width: calc(144 * var(--u)); text-align: center; white-space: nowrap; }
.trilho {
  position: absolute; left: calc((1424 * var(--u) - 100vw) / 2); right: auto; top: calc(38 * var(--u));
  width: 100vw; height: calc(500 * var(--u)); overflow: hidden; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.trilho-faixa { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.card {
  position: relative; flex: 0 0 auto; width: var(--card-w, calc(285 * var(--u))); height: 100%;
  overflow: hidden; background: var(--cinza1); cursor: pointer; outline-offset: -4px;
}
.card:nth-child(even) { background: var(--cinza2); }
/* cards colados, sem divisória (pedido) */
.card-img { position: absolute; inset: 0; overflow: hidden; }
.card-img img {
  position: absolute; top: 0; left: -10%; width: 120%; max-width: none; height: 100%; object-fit: cover;
  will-change: transform; transition: scale 1s var(--ease), filter .6s var(--ease);
  -webkit-user-drag: none; user-select: none;
}
.card:hover .card-img img { scale: 1.06; }
.trilho:hover .card:not(:hover) .card-img img { filter: saturate(.55); }
/* véu preto nos cards que não estão sob o cursor */
.card-img::after { content: ""; position: absolute; inset: 0; background: var(--preto); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.trilho:hover .card:not(:hover) .card-img::after { opacity: .45; }
/* Título do Figma (Big Shoulders Bold 34 px, preto, rente ao pé do card). Sobre as fotos
   ganha uma aba creme para continuar legível; no hover a aba cresce e mostra cliente/ano. */
.card-titulo {
  position: absolute; left: calc(11 * var(--u)); bottom: 0; max-width: calc(100% - 22 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) 0; background: var(--papel); color: var(--preto);
  font: 700 calc(34.35 * var(--u)) / calc(43 * var(--u)) var(--disp); text-transform: uppercase;
  transition: padding .6s var(--ease);
}
.card-titulo small {
  display: block; overflow: hidden; max-height: 0; font: 400 calc(13 * var(--u)) / calc(17 * var(--u)) var(--corpo);
  text-transform: none; color: var(--tinta); transition: max-height .6s var(--ease), padding .6s var(--ease);
}
.card:hover .card-titulo small, .card:focus-visible .card-titulo small { max-height: calc(60 * var(--u)); padding-bottom: calc(8 * var(--u)); }

.desde {
  position: absolute; left: calc(273 * var(--u)); top: 0; width: calc(193 * var(--u));
  margin: 0; text-align: center; white-space: nowrap; z-index: 1;
  font: 400 calc(16 * var(--u)) / calc(20 * var(--u)) var(--corpo); color: var(--preto);
}
.desde .ano { display: inline-block; min-width: 2.2em; text-align: left; font-variant-numeric: tabular-nums; }

/* ---------- About ---------- */
.sobre { height: calc(473 * var(--u)); }
.foto {
  position: absolute; left: 0; top: calc(23 * var(--u));
  width: calc(466 * var(--u)); height: calc(450 * var(--u)); overflow: hidden; background: var(--tinta);
}
/* Recorte igual ao do Figma: imagem de 848 px deslocada -177/-93 dentro da máscara 466x450 */
.foto img {
  position: absolute; left: -37.98%; top: -20.67%; width: 181.97%; height: auto; max-width: none;
  transition: scale 1.2s var(--ease);
}
.foto:hover img { scale: 1.04; }
/* o texto do Sobre corre em coluna (título, texto, áreas, botão): o texto novo é maior que o do Figma */
.sobre-texto {
  position: absolute; left: calc(515 * var(--u)); top: calc(68 * var(--u)); width: calc(395 * var(--u)); min-height: calc(359 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u));
}
.sobre-titulo {
  margin: 0; font: 700 calc(34.35 * var(--u)) / calc(46 * var(--u)) var(--disp);
  text-transform: uppercase; color: var(--preto);
}
.sobre-corpo {
  width: calc(370 * var(--u)); margin: 0;
  font: 400 calc(15.5 * var(--u)) / calc(20.5 * var(--u)) var(--corpo); color: var(--tinta);
}
.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(20 * var(--u)); width: 100%; margin-top: calc(4 * var(--u)); }
.grupo-titulo { margin: 0 0 calc(8 * var(--u)); font: 700 calc(14 * var(--u)) / 1.2 var(--corpo); color: var(--preto); }
.lista { margin: 0; padding: 0; list-style: none; }
.lista li {
  position: relative; padding-left: calc(14 * var(--u)); white-space: nowrap;
  font: 400 calc(14 * var(--u)) / calc(17 * var(--u)) var(--corpo); color: var(--preto);
}
.lista li + li { margin-top: calc(5 * var(--u)); }
.lista li::before {
  content: ""; position: absolute; left: 0; top: calc(5 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u));
  border-radius: 50%; background: var(--tinta);
}
.botao {
  position: relative; flex: 0 0 auto; margin-top: calc(6 * var(--u)); width: calc(115 * var(--u)); height: calc(34 * var(--u));
  display: flex; align-items: center; padding-left: calc(19 * var(--u)); overflow: hidden;
  background: var(--tinta); color: var(--papel); font: 400 calc(14 * var(--u)) / 1 var(--corpo);
  isolation: isolate;
}
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--preto);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease);
}
.botao:hover::before { transform: scaleX(1); }

/* Caixa da experiência: o contorno de 2 px do Figma se desenha ao entrar na tela (SVG). */
.experiencia {
  position: absolute; left: calc(939 * var(--u)); top: calc(68 * var(--u));
  width: calc(428 * var(--u)); height: calc(359 * var(--u));
}
.experiencia svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.experiencia rect { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.exp-topo {
  position: absolute; left: 0; right: 0; top: 0; height: calc(52 * var(--u));
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u));
}
.exp-topo .rotulo { font-size: calc(18 * var(--u)); }
.exp-contador { font: 600 calc(13 * var(--u)) / 1 var(--corpo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.exp-lista {
  position: absolute; left: 2px; right: 2px; top: calc(52 * var(--u)); bottom: 2px;
  margin: 0; padding: 0 calc(10 * var(--u)) 0 calc(18 * var(--u)); list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--tinta) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--u)), #000 calc(100% - 40 * var(--u)), transparent);
          mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--u)), #000 calc(100% - 40 * var(--u)), transparent);
}
.exp-lista.no-fim { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--u))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--u))); }
.exp-lista::-webkit-scrollbar { width: 4px; }
.exp-lista::-webkit-scrollbar-thumb { background: var(--tinta); }
.exp-item {
  display: grid; grid-template-columns: calc(92 * var(--u)) 1fr; column-gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) 0; border-top: 1px solid rgba(48, 44, 44, .22);
  transition: opacity .4s var(--ease);
}
.exp-item:first-child { border-top: 0; padding-top: calc(10 * var(--u)); }
.exp-lista:hover .exp-item:not(:hover) { opacity: .45; }
.exp-anos { font: 600 calc(12.5 * var(--u)) / calc(20 * var(--u)) var(--corpo); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-cargo { margin: 0; font: 700 calc(22 * var(--u)) / calc(24 * var(--u)) var(--disp); text-transform: uppercase; color: var(--preto); }
.exp-empresa { margin: calc(2 * var(--u)) 0 0; font: 600 calc(13.5 * var(--u)) / calc(18 * var(--u)) var(--corpo); color: var(--tinta); }
.exp-destaque { margin: calc(4 * var(--u)) 0 0; font: 400 calc(13.5 * var(--u)) / calc(18 * var(--u)) var(--corpo); color: var(--tinta); }
.exp-dica {
  position: absolute; right: calc(16 * var(--u)); bottom: calc(10 * var(--u));
  font: 600 calc(12 * var(--u)) / 1 var(--corpo); color: var(--tinta); pointer-events: none;
  padding: calc(5 * var(--u)) calc(8 * var(--u)); background: var(--papel); box-shadow: 0 0 0 1px var(--tinta);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.exp-dica span { display: inline-block; animation: desce 1.6s var(--ease) infinite; }
@keyframes desce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.exp-lista.no-fim ~ .exp-dica { opacity: 0; transform: translateY(6px); }

/* ---------- Contact ---------- */
.falar {
  position: absolute; left: calc(93 * var(--u)); top: calc(61 * var(--u)); width: calc(1265 * var(--u));
  margin: 0; text-align: center; white-space: nowrap;
  font: 900 calc(309.03 * var(--u)) / calc(371 * var(--u)) var(--disp); text-transform: uppercase;
}
.falar a { display: inline-block; }
.falar .linha-in { display: inline-block; clip-path: inset(-10% -3% 0 -3%); }
.contatos {
  position: absolute; left: calc(90 * var(--u)); top: calc(410 * var(--u)); width: calc(577 * var(--u)); height: calc(28 * var(--u));
  font: 400 calc(23.28 * var(--u)) / calc(28 * var(--u)) var(--corpo);
}
.contatos a { position: absolute; top: 0; white-space: nowrap; }
.contatos a:nth-child(1) { left: 0; }
.contatos a:nth-child(2) { left: calc(265 * var(--u)); }
.contatos a:nth-child(3) { left: calc(377 * var(--u)); }
.sublinha { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.sublinha:hover { background-position: 0 100%; background-size: 100% 1px; }
.base {
  position: absolute; right: calc(107 * var(--u)); text-align: right; top: calc(410 * var(--u)); margin: 0; white-space: nowrap;
  font: 400 calc(23.28 * var(--u)) / calc(28 * var(--u)) var(--corpo);
}
.aviso {
  position: absolute; left: calc(90 * var(--u)); top: calc(452 * var(--u));
  font: 600 calc(14 * var(--u)) / 1 var(--corpo); opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.aviso.on { opacity: .8; transform: none; }

/* ---------- Projeto aberto ---------- */
.caso {
  position: fixed; inset: 0; z-index: 80; background: var(--papel); color: var(--tinta);
  display: grid; grid-template-rows: auto 1fr; visibility: hidden;
  clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-io), visibility 0s .9s;
}
.caso.aberto { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-io), visibility 0s; }
.caso-topo {
  display: grid; grid-template-columns: 1fr calc(380 * var(--u)) auto; align-items: end; column-gap: calc(40 * var(--u));
  padding: calc(18 * var(--u)) calc(13 * var(--u)) calc(22 * var(--u));
}
.caso-titulo {
  grid-column: 1; margin: 0; font: 900 calc(128 * var(--u)) / .9 var(--disp); text-transform: uppercase;
  color: var(--tinta);
}
.caso-sobre { display: block; margin-bottom: calc(10 * var(--u)); font: 700 calc(30 * var(--u)) / 1 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.card-sobre { display: block; font: 700 calc(15 * var(--u)) / 1.2 var(--disp); letter-spacing: .02em; padding-top: calc(2 * var(--u)); }
/* projetos de peças da mesma série (ex.: stories da Azul) ficam mais juntas na esteira */
.caso.juntas .caso-faixa { gap: calc(4 * var(--u)); }
.caso-titulo .linha-in { display: inline-block; clip-path: inset(-10% -3% -4% -3%); }
.caso-info { grid-column: 2; font: 400 calc(15 * var(--u)) / 1.3 var(--corpo); padding-bottom: calc(8 * var(--u)); }
.caso-info p { margin: 0 0 calc(14 * var(--u)); }
.caso-ficha { display: grid; grid-template-columns: auto 1fr; gap: calc(3 * var(--u)) calc(14 * var(--u)); margin: 0; }
.caso-ficha dt { font-weight: 700; }
.caso-ficha dd { margin: 0; }
.caso-acoes { grid-column: 3; align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: calc(8 * var(--u)); font: 400 calc(22.6 * var(--u)) / 1.2 var(--corpo); }
.caso-acoes button { display: flex; align-items: center; gap: .4em; }
.caso-fechar .x { display: inline-block; transition: transform .5s var(--ease); }
.caso-fechar:hover .x { transform: rotate(90deg); }
.caso-esteira {
  position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border-top: 2px solid var(--tinta);
}
.caso-faixa { position: absolute; left: 0; top: calc(24 * var(--u)); bottom: calc(52 * var(--u)); display: flex; gap: calc(12 * var(--u)); padding: 0 calc(13 * var(--u)); will-change: transform; }
.peca { margin: 0; position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; background: var(--cinza1); }
.peca img, .peca video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-user-drag: none; }
.peca.longa img { transition: object-position 7s cubic-bezier(.45, 0, .55, 1); }
.peca.longa:hover img { object-position: 50% 100%; }
.peca.longa::after {
  content: "↓ scroll"; position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; background: var(--papel);
  font: 600 11px/1 var(--corpo); opacity: .9; transition: opacity .3s;
}
.peca.longa:hover::after { opacity: 0; }
.caso-rodape {
  position: absolute; left: calc(13 * var(--u)); right: calc(13 * var(--u)); bottom: calc(16 * var(--u));
  display: flex; justify-content: space-between; align-items: center; font: 600 calc(14 * var(--u)) / 1 var(--corpo);
}
.caso-barra { flex: 0 0 calc(220 * var(--u)); height: 2px; background: rgba(48, 44, 44, .2); position: relative; overflow: hidden; }
.caso-barra i { position: absolute; inset: 0; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Projeto com setores (Itaú) ---------- */
.setor { display: flex; gap: calc(12 * var(--u)); height: 100%; flex: 0 0 auto; }
.setor + .setor { margin-left: calc(28 * var(--u)); padding-left: calc(28 * var(--u)); border-left: 2px solid var(--tinta); }
.setor-info {
  flex: 0 0 calc(250 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u));
  padding-right: calc(16 * var(--u)); font: 400 calc(14.5 * var(--u)) / 1.35 var(--corpo); color: var(--tinta);
}
.setor-n { font: 600 calc(13 * var(--u)) / 1 var(--corpo); font-variant-numeric: tabular-nums; }
.setor-titulo { margin: 0; font: 900 calc(44 * var(--u)) / .95 var(--disp); text-transform: uppercase; color: var(--tinta); text-wrap: balance; }
.setor-ano { font-weight: 600; }
.setor-texto { margin: 0; }
.setor-dica { margin: auto 0 0; padding-top: calc(10 * var(--u)); border-top: 1px solid rgba(48, 44, 44, .25); font-weight: 600; }
.chip {
  position: absolute; z-index: 2; padding: calc(4 * var(--u)) calc(8 * var(--u)); background: var(--papel); color: var(--tinta);
  font: 600 calc(12 * var(--u)) / 1.2 var(--corpo); white-space: nowrap; pointer-events: none;
}
/* carrossel */
.carrossel { background: var(--tinta); }
.car-palco { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; }
.car-trilho { display: flex; height: 100%; transition: transform .7s var(--ease); }
.car-trilho img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.car-titulo { left: calc(10 * var(--u)); top: calc(10 * var(--u)); max-width: calc(100% - 90 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.car-cont { right: calc(10 * var(--u)); top: calc(10 * var(--u)); font-variant-numeric: tabular-nums; }
.car-seta {
  position: absolute; z-index: 3; top: 50%; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(-20 * var(--u));
  border-radius: 50%; background: var(--papel); color: var(--tinta); font: 600 calc(18 * var(--u)) / 1 var(--corpo);
  display: grid; place-items: center; transition: opacity .3s, transform .3s var(--ease);
}
.car-seta:hover:not(:disabled) { transform: scale(1.08); }
.car-seta:disabled { opacity: 0; pointer-events: none; }
.car-ant { left: calc(10 * var(--u)); }
.car-prox { right: calc(10 * var(--u)); }
.car-pontos { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(12 * var(--u)); display: flex; justify-content: center; gap: calc(6 * var(--u)); }
.car-pontos button { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--papel); opacity: .45; transition: opacity .3s, transform .3s; }
.car-pontos button[aria-current] { opacity: 1; transform: scale(1.3); }
.car-dica { left: 50%; bottom: calc(30 * var(--u)); transform: translateX(-50%); animation: cutuca 1.8s var(--ease) infinite; transition: opacity .4s; }
@keyframes cutuca { 0%, 100% { margin-left: 0; } 50% { margin-left: calc(6 * var(--u)); } }
.carrossel.usado .car-dica, .email.usado .email-dica { opacity: 0; }
/* e-mail: coluna que rola por dentro */
.email { background: var(--papel); box-shadow: inset 0 0 0 1px rgba(48, 44, 44, .2); }
.email-rolo { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--tinta) transparent; }
.email-rolo img { width: 100%; height: auto; object-fit: initial; display: block; }
.email-de { left: calc(10 * var(--u)); top: calc(10 * var(--u)); }
.email-dica { right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); transition: opacity .4s; background: var(--tinta); color: var(--papel); }
/* janela de navegador (UX/UI) */
.navegador { background: var(--papel); box-shadow: 0 0 0 1px var(--tinta); display: flex; flex-direction: column; }
.nav-barra {
  flex: 0 0 auto; height: calc(38 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: 0 calc(12 * var(--u)); background: var(--tinta); color: var(--papel); font: 600 calc(12 * var(--u)) / 1 var(--corpo);
}
.nav-bolas { display: flex; gap: calc(5 * var(--u)); }
.nav-bolas i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--papel); opacity: .35; }
.nav-abas { display: flex; gap: calc(4 * var(--u)); min-width: 0; overflow: hidden; }
.nav-abas button {
  padding: calc(6 * var(--u)) calc(10 * var(--u)); font: inherit; color: inherit; opacity: .55; white-space: nowrap;
  border-radius: calc(4 * var(--u)); transition: opacity .3s, background .3s;
}
.nav-abas button:hover { opacity: .85; }
.nav-abas button[aria-current] { opacity: 1; background: rgba(254, 247, 227, .16); }
.nav-url { margin-left: auto; opacity: .55; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tela { position: relative; flex: 1 1 auto; overflow: hidden; }
.nav-tela iframe { position: absolute; left: 0; top: 0; width: 1440px; border: 0; transform-origin: 0 0; background: var(--papel); }
.nav-rolo { transition: opacity .22s; }
.nav-rolo.trocando { opacity: 0; }
.navegador.usado .email-dica { opacity: 0; }

/* legenda das peças, pôster com lupa e celular (Boiler Ruim) */
.peca-leg { left: calc(10 * var(--u)); top: calc(10 * var(--u)); }
.poster { cursor: zoom-in; }
.lupa {
  position: absolute; z-index: 2; width: calc(220 * var(--u)); height: calc(220 * var(--u)); margin: calc(-110 * var(--u)) 0 0 calc(-110 * var(--u));
  border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 0 2px var(--papel), 0 10px 30px rgba(0, 0, 0, .35);
  pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease);
}
.poster:hover .lupa { opacity: 1; transform: none; }
.celular { background: var(--tinta); padding: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); overflow: visible; }
.cel-tela { position: relative; width: 100%; height: 100%; border-radius: calc(20 * var(--u)); overflow: hidden; background: #000; }
.cel-tela video { width: 100%; height: 100%; object-fit: cover; }
.cel-dur { right: calc(20 * var(--u)); top: calc(20 * var(--u)); background: var(--tinta); color: var(--papel); }

/* disco: capa, vinil e encarte (Capas de Disco) */
.setor-meta { font-size: calc(13.5 * var(--u)); line-height: 1.35; }
.disco { background: transparent; overflow: visible; perspective: 1600px; }
.disco-capa, .disco-encarte, .disco-vinil { position: absolute; left: 0; top: 0; height: 86%; aspect-ratio: 1; }
.disco-capa { z-index: 3; }
/* a sombra vai nas faces (gira junto); no meio do giro não sobra um retângulo escuro parado */
.disco-capa .flip img, .disco-encarte .flip img { box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
/* Capa e encarte viram como o vinil: giram até ficar de lado (90°), trocam a imagem e voltam.
   Sem frente/verso costas com costas em 3D, que deixava linhas pretas piscando em alguns navegadores. */
.disco-capa, .disco-encarte { perspective: 1400px; }
.flip { position: relative; width: 100%; height: 100%; }
.flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0s .32s; }
.flip img.v,
.disco[data-capa="1"] .disco-capa .flip img.f, .disco[data-enc="1"] .disco-encarte .flip img.f { opacity: 0; }
.disco[data-capa="1"] .disco-capa .flip img.v, .disco[data-enc="1"] .disco-encarte .flip img.v { opacity: 1; }
.disco.virando-capa .disco-capa .flip, .disco.virando-enc .disco-encarte .flip { animation: vira-vinil .64s var(--ease-io); }
.disco-vinil, .disco-encarte { cursor: pointer; }

/* vinil: preto com sulcos; sai para a direita e gira; vira junto para mostrar o selo do lado B */
.disco-vinil {
  z-index: 1; top: 1.5%; height: 83%; perspective: 1200px;
  transition: transform 1.1s var(--ease-io);
}
.vinil-vira { position: absolute; inset: 0; }
.vinil-gira {
  position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d;
  background: radial-gradient(circle, #222 0 16%, transparent 16.5%),
    repeating-radial-gradient(circle, #0c0c0c 0 2px, #1d1d1d 2.5px 3.5px), #111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 2px #000;
  animation: gira 1.8s linear infinite; animation-play-state: paused;
}
.vinil-gira::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .07) 25%, transparent 32% 70%, rgba(255, 255, 255, .05) 76%, transparent 82%); }
@keyframes gira { to { transform: rotate(360deg); } }
.disco.aberto .vinil-gira { animation-play-state: running; }
.vinil-selo { position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 50%; overflow: hidden; z-index: 1; transform-style: preserve-3d; }
.vinil-selo img {
  position: absolute; width: calc(100% / var(--ld)); height: calc(100% / var(--ld)); max-width: none;
  /* o ponto (50%, --lc) da arte do selo cai no centro do disco */
  left: calc(50% - 50% / var(--ld)); top: calc(50% - var(--lc) / var(--ld)); object-fit: cover;
  backface-visibility: hidden;
}
.vinil-selo img { transition: opacity 0s .32s; }
.vinil-selo img.lb, .disco[data-vinil="1"] .vinil-selo img.la { opacity: 0; }
.disco[data-vinil="1"] .vinil-selo img.lb { opacity: 1; }
/* virar o vinil: achata e volta (o selo troca no meio) */
.disco.virando .vinil-vira { animation: vira-vinil .64s var(--ease-io); }
@keyframes vira-vinil { 0% { rotate: y 0deg; } 50% { rotate: y 90deg; } 100% { rotate: y 0deg; } }
/* aviso grande do lado no centro do disco, logo depois de virar */
.vinil-aviso {
  position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: var(--papel); color: var(--tinta); font: 900 calc(30 * var(--u)) / 1 var(--disp); text-transform: uppercase; white-space: nowrap;
  opacity: 0; scale: .7; pointer-events: none; transition: opacity .3s, scale .4s var(--ease);
}
.disco.mostra-lado .disco-vinil .vinil-aviso, .vinil-aviso.on { opacity: 1; scale: 1; transition-delay: .45s; }
.capa-aviso, .enc-aviso { z-index: 5; }
.disco-capa { cursor: pointer; }
.vinil-selo::after { content: ""; position: absolute; width: var(--furo, 5%); height: var(--furo, 5%); left: calc(50% - var(--furo, 5%) / 2); top: calc(50% - var(--furo, 5%) / 2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); border-radius: 50%; background: var(--papel); z-index: 2; }
.disco.aberto[data-modo="disco"] .disco-vinil { transform: translateX(70%); }
/* encarte: sai no lugar do vinil */
.disco-encarte { z-index: 2; top: 2%; height: 82%; transition: transform 1.1s var(--ease-io), visibility 0s; }
/* o que está guardado atrás da capa some, para não aparecer quando a capa fica de lado no giro */
.disco[data-modo="disco"] .disco-encarte { visibility: hidden; transition: transform 1.1s var(--ease-io), visibility 0s 1.1s; }
.disco[data-modo="encarte"] .disco-vinil { visibility: hidden; transition: transform 1.1s var(--ease-io), visibility 0s 1.1s; }
.disco.aberto[data-modo="encarte"] .disco-encarte { transform: translateX(103%) rotate(1.5deg); }
.disco-botoes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10%; display: flex; align-items: center; gap: calc(10 * var(--u));
  font: 600 calc(13 * var(--u)) / 1 var(--corpo); color: var(--tinta);
}
.disco-botoes button { padding: calc(7 * var(--u)) calc(12 * var(--u)); border: 1.5px solid var(--tinta); transition: background .3s, color .3s; }
.disco-botoes button:hover, .disco-botoes button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.d-seg { display: flex; }
.d-seg button + button { border-left: 0; }
.d-lado { margin-left: auto; font-weight: 400; white-space: nowrap; }

/* e-mail na esteira = prévia clicável; leitor por cima para rolar */
.email-abrir { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.email-abrir img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s var(--ease); }
.email-abrir:hover img { transform: translateY(-2%); }
.email-dica { background: var(--tinta); color: var(--papel); }
.email:hover .email-dica { opacity: 1 !important; }
.leitor {
  position: fixed; inset: 0; z-index: 85; background: rgba(48, 44, 44, .88); display: flex; justify-content: center;
  opacity: 0; transition: opacity .3s var(--ease);
}
.leitor.on { opacity: 1; }
.leitor[hidden] { display: none; }
.leitor-rolo {
  width: min(680px, 92vw); height: 100%; overflow-y: auto; overscroll-behavior: contain; outline: none;
  transform: translateY(24px); transition: transform .45s var(--ease); scrollbar-width: thin; scrollbar-color: var(--papel) transparent;
}
.leitor.on .leitor-rolo { transform: none; }
.leitor-rolo img { width: 100%; height: auto; display: block; }
.leitor-fechar {
  position: absolute; right: calc(20 * var(--u)); top: calc(18 * var(--u)); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: var(--papel); color: var(--tinta); font: 600 18px / 1 var(--corpo);
}

/* abas dos setores no rodapé do projeto */
.caso-setores { display: none; gap: calc(22 * var(--u)); }
.com-setores .caso-setores { display: flex; flex-wrap: wrap; }
.com-setores .caso-cont { display: none; }
.caso-setores button { font: 600 calc(14 * var(--u)) / 1 var(--corpo); opacity: .45; text-decoration: underline transparent; text-underline-offset: .25em; transition: opacity .3s, text-decoration-color .3s; }
.caso-setores button:hover { opacity: .8; }
.caso-setores button.ativo { opacity: 1; text-decoration-color: currentColor; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: var(--papel); mix-blend-mode: difference; scale: .22;
  display: grid; place-items: center; transition: scale .45s var(--ease), opacity .3s;
  opacity: 0;
}
.cursor.visivel { opacity: 1; }
.cursor.link { scale: .6; }
.cursor.trilho-on { scale: 1; }
.cursor .seta-c {
  font: 600 11px/1 var(--corpo); color: var(--tinta); opacity: 0; transition: opacity .3s, transform .5s var(--ease);
  white-space: nowrap; letter-spacing: .02em;
}
/* o texto dentro do círculo precisa da cor "invertida": creme - grafite = escuro sobre o creme */
.cursor.trilho-on .seta-c { opacity: 1; }
.cursor.desenhando { scale: .14; }
.cursor.escondido { opacity: 0 !important; }
/* o cursor do site substitui a seta do navegador em tudo (só com mouse) */
.cursor-proprio, .cursor-proprio * { cursor: none !important; }
.cursor-dica {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; margin: 14px 0 0 16px;
  font: 600 11px/1 var(--corpo); letter-spacing: .02em; white-space: nowrap;
  color: var(--papel); mix-blend-mode: difference; opacity: 0; transition: opacity .3s;
}
.cursor-dica.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dica { display: none; } }

/* Canvas do desenho: atrás do conteúdo de cada parte */
.desenho { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; mix-blend-mode: difference; display: none; }
/* canvas com mix-blend sobre a parte inteira custa caro a cada quadro: só aparece depois do 1º risco */
.desenho.tem { display: block; }
.secao > .pagina { position: relative; z-index: 1; }
.desenho { transition: opacity .7s var(--ease), filter .7s var(--ease); }
.desenho.apagando { opacity: 0; filter: blur(6px); }
/* "clear canvas": aparece depois do primeiro risco, fixo no canto inferior esquerdo */
.limpar {
  position: fixed; left: calc(13 * var(--u)); bottom: calc(14 * var(--u)); z-index: 55;
  padding: calc(9 * var(--u)) calc(14 * var(--u)); background: var(--preto); color: var(--papel);
  font: 600 calc(13 * var(--u)) / 1 var(--corpo); letter-spacing: .02em;
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .4s var(--ease), transform .5s var(--ease), background .3s;
}
.limpar.on { opacity: 1; transform: none; }
.limpar:hover { background: var(--tinta); box-shadow: inset 0 0 0 1px var(--papel); }
.limpar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ---------- Revelações ---------- */
.js .rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .rv.visto { opacity: 1; transform: none; }
.js .foto { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-io); }
.js .foto.visto { clip-path: inset(0 0 0 0); }
.js .experiencia rect { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-io) .2s; }
.js .experiencia.visto rect { stroke-dashoffset: 0; }
.js .lista li::before { transform: scale(0); transition: transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 1ms + 300ms); }
.js .lista.visto li::before { transform: scale(1); }
.js .linha-up .letra { transform: translate3d(0, 105%, 0); }
.js .linha-up.visto .letra { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 28ms + var(--d, 0) * 1ms); }
.js .card { transform: translate3d(40vw, 0, 0); opacity: 0; }
.js .entrou .card { transform: none; opacity: 1; transition: transform 1.4s var(--ease), opacity .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 350ms); }

/* entrada da página */
.js .topo > * { opacity: 0; transform: translate3d(0, -100%, 0); }
.js .pronto .topo > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .pronto .topo .letreiro { transition-delay: .12s; }
.js .pronto .topo .hora { transition-delay: .24s; }
.js .menu a { opacity: 0; transform: translate3d(0, 10px, 0); }
.js .menu.pronto a { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .menu.pronto a:nth-child(2) { transition-delay: .08s; }
.js .menu.pronto a:nth-child(3) { transition-delay: .16s; }

.estatico *, .estatico *::before, .estatico *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .card, .js .topo > *, .js .menu a { opacity: 1 !important; transform: none !important; }
  .js .linha-up .letra { transform: none !important; }
  .js .foto { clip-path: none; }
  .js .experiencia rect { stroke-dashoffset: 0; }
  .js .lista li::before { transform: none; }
  .letreiro-faixa { transform: none !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  :root { --u: 1px; --g: 16px; }
  .pagina { width: auto; padding: 0 var(--g); }
  .topo-pag { padding: 0 var(--g) 8px; height: auto; max-width: 100vw; overflow: hidden; background: var(--papel); mix-blend-mode: normal; }
  .topo-pag .topo { color: var(--tinta); }
  .secao { height: auto; overflow: visible; }
  .secao-top { padding-top: 84px; }
  .secao-works { display: block; }
  .secao-about { display: block; padding-top: 24px; padding-bottom: 80px; }
  .secao-contact { min-height: 100svh; }
  .rodape-in { height: auto; padding: 40px var(--g) 80px; }
  .topo { position: relative; left: 0; top: 0; width: auto; height: auto; padding-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; font-size: 26px; line-height: 30px; }
  .topo .marca, .topo .hora { position: static; }
  .topo .marca { grid-column: 1; grid-row: 1; }
  .topo .hora { grid-column: 3; grid-row: 1; }
  .lingua { position: static; grid-column: 2; grid-row: 1; justify-self: end; margin-right: 16px; gap: 8px; }
  .letreiro { position: relative; left: 0; min-width: 0; grid-column: 1 / -1; grid-row: 2; width: 100%; height: 30px; font-size: 26px; }
  .hero { height: auto; padding: 24px 0 40px; }
  .nome { position: static; font-size: 20.4vw; line-height: .96; margin-left: -2px; }
  .hero-texto { position: static; width: auto; gap: 0; }
  .hero-frase, .hero-tag { position: static; width: auto; font-size: 16px; }
  .hero-frase { margin-top: 26px; max-width: 34em; }
  .hero-tag { margin-top: 18px; white-space: normal; font-size: 14px; }
  .menu {
    top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 18px;
    font-size: 17px; line-height: 22px;
  }
  .trabalhos { height: auto; padding-bottom: 56px; }
  .trabalhos .rotulo { position: static; width: auto; text-align: left; font-size: 18px; line-height: 24px; }
  .trilho { position: relative; left: calc(var(--g) * -1); top: 0; width: 100vw; height: 104vw; margin-top: 12px; }
  .card { width: 62vw; }
  .card-titulo { font-size: 24px; line-height: 30px; left: 8px; padding: 3px 8px 0; }
  .card-titulo small { font-size: 12px; line-height: 15px; }
  .desde { position: static; width: auto; text-align: left; font-size: 15px; margin-bottom: 14px; }
  .sobre { height: auto; }
  .foto { position: relative; left: calc(var(--g) * -1); top: 0; width: 100vw; height: auto; aspect-ratio: 466 / 450; }
  .sobre-texto { position: static; width: auto; min-height: 0; margin-top: 28px; gap: 14px; }
  .grupos { gap: 0 12px; }
  .grupo-titulo { font-size: 14px; }
  .sobre-titulo { grid-column: 1 / -1; font-size: 30px; line-height: 34px; }
  .sobre-corpo { width: auto; font-size: 16px; line-height: 1.35; }
  .lista { margin-top: 0; }
  .lista li { font-size: 14px; line-height: 18px; padding-left: 14px; }
  .lista li::before { top: 5px; width: 7px; height: 7px; }
  .lista li + li { margin-top: 5px; }
  .botao { margin-top: 10px; width: 140px; height: 40px; padding-left: 18px; font-size: 14px; }
  .experiencia { position: relative; left: 0; top: 0; width: auto; height: 440px; margin-top: 36px; }
  .exp-topo { height: 50px; padding: 0 16px; }
  .exp-topo .rotulo { font-size: 17px; }
  .exp-contador { font-size: 12px; }
  .exp-lista { top: 50px; padding: 0 10px 0 16px; }
  .exp-item { grid-template-columns: 1fr; padding: 14px 0; }
  .exp-anos { font-size: 12px; line-height: 18px; }
  .exp-cargo { font-size: 22px; line-height: 24px; }
  .exp-empresa, .exp-destaque { font-size: 14px; line-height: 19px; }
  .exp-dica { font-size: 12px; right: 14px; }
  .falar { position: static; width: auto; font-size: 19vw; line-height: .95; text-align: left; white-space: normal; }
  .falar .linha-in { display: inline; clip-path: none; }
  .contatos { position: static; width: auto; height: auto; margin-top: 36px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 24px; }
  .contatos a { position: static; }
  .base { position: static; text-align: left; margin-top: 26px; font-size: 18px; line-height: 24px; white-space: normal; }
  .aviso { position: static; display: block; margin-top: 14px; font-size: 13px; }
  .caso-topo { grid-template-columns: 1fr auto; padding: 14px var(--g) 16px; row-gap: 14px; }
  .caso-titulo { font-size: 13vw; grid-row: 2; grid-column: 1 / -1; }
  .caso-info { grid-row: 3; grid-column: 1 / -1; font-size: 14px; }
  .caso-info p { margin-bottom: 10px; }
  .caso-acoes { grid-row: 1; grid-column: 2; font-size: 17px; flex-direction: row; gap: 18px; }
  .caso-faixa { top: 14px; bottom: 44px; gap: 8px; padding: 0 var(--g); }
  .caso-rodape { left: var(--g); right: var(--g); bottom: 14px; font-size: 12px; }
  .caso-barra { flex-basis: 120px; }
  .caso-sobre { font-size: 18px; margin-bottom: 6px; }
  .card-sobre { font-size: 12px; }
  .caso.juntas .caso-faixa { gap: 3px; }
  .setor-info { flex-basis: 220px; font-size: 13px; }
  .setor-titulo { font-size: 30px; }
  .caso-setores { gap: 12px; }
  .caso-setores button { font-size: 12px; }
  .com-setores .caso-barra, .com-setores .caso-dica { display: none; }
  .com-setores .caso-faixa { bottom: 62px; }
  .caso-setores { row-gap: 8px; }
  .chip { font-size: 11px; padding: 3px 6px; }
  .car-seta { width: 34px; height: 34px; margin-top: -17px; font-size: 15px; }
}