/* =========================================================
   PEDRO MALTA — portfólio
   Preto, branco e azul vibrante. Multi página.
   ========================================================= */

@view-transition { navigation: auto; }

:root{
  --bg:#08080A;
  --bg-soft:#0D0E12;
  --fg:#F4F5F7;
  --text:#FFF;        /* texto corrido: no escuro é branco puro, de propósito */
  --dim:#A9AEB8;      /* apoio: nav, tag, rodapé */
  --dimmer:#7C818C;
  --line:rgba(255,255,255,.09);
  /* o halo por trás do texto que passa em cima da onda, em canal.
     No tema claro ele inverte junto com o fundo. */
  --halo:4,5,8;
  /* superfícies que precisam tapar a onda para o texto ler */
  --card-bg:rgba(6,7,10,.78);
  --chip-bg:rgba(8,8,10,.6);
  --hd-bg:rgba(8,8,10,.74);
  --bar-bg:rgba(8,8,10,.76);
  --bar-track:rgba(255,255,255,.12);

  /* azul vibrante, a terceira cor */
  --blue:#00C8FA;
  --blue-lit:#4FDCFF;   /* para texto pequeno, contraste ok no preto */
  --blue-soft:#9EEBFF;
  --blue-rgb:0,200,250; /* o mesmo azul em canal, para os rgba() de véu e brilho */
  --blue-dim:rgba(var(--blue-rgb),.38);
  --accent:var(--blue);
  --on-accent:#FFF;     /* o que se escreve EM CIMA do acento (cursor, seleção) */
  /* véu de hover dos cards: é o acento rebaixado, não uma cor solta */
  --hover-tint:rgba(0,60,76,.82);
  --hover-tint-soft:rgba(0,60,76,.55);
  /* as duas luzes de fundo */
  --glow-a:rgba(var(--blue-rgb),.20);
  --glow-b:rgba(var(--blue-rgb),.10);
  /* a onda de pontos: gradiente diagonal entre as duas, e força geral */
  --wave-a:#00C8FA;
  --wave-b:#00C8FA;
  --wave-op:1;
  --wave-gap:9;       /* espaçamento da grade de pontos: menor = mais denso */
  --wave-r:1.5;       /* raio base da bolinha */

  --display:"Geist","Instrument Sans",system-ui,sans-serif;
  --sans:"Geist","Instrument Sans",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --small:"Geist","Instrument Sans",system-ui,sans-serif;   /* labels e numeração, sempre em 700 */

  --pad:clamp(20px,4.4vw,64px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   TEMA POR SEÇÃO
   As duas seções autorais/próprias trocam de identidade ao serem abertas:
   mesmos componentes e assets, outra cor. Tudo pende das variáveis acima,
   então cada tema só as redefine — nenhum seletor de componente sabe disso.
   O `data-group` pinta a página de seção; o `data-theme` (escrito pelo
   app.js) pinta o case quando ele é aberto de fora, pelo rolo da home.
   ========================================================= */

/* draodraws — preto e branco. Sem cor nenhuma: o desenho é a cor. */
body[data-group="ilustracao"],body[data-theme="ilustracao"]{
  --blue:#FFFFFF;
  --blue-lit:#F1F2F5;
  --blue-soft:#FFFFFF;
  --blue-rgb:255,255,255;
  --blue-dim:rgba(255,255,255,.34);
  --on-accent:#08080A;              /* disco do cursor é branco: a letra vira preta */
  --hover-tint:rgba(255,255,255,.11);
  --hover-tint-soft:rgba(255,255,255,.09);
  /* ⚠️ branco em radial de tela cheia lava o preto: .07 no lugar de .20 */
  --glow-a:rgba(255,255,255,.07);
  --glow-b:rgba(255,255,255,.035);
  /* onda em branco puro e em força cheia, a pedido dele: é o motion da seção,
     tem que ser evidente. O texto que passa por cima já tem os 3 raios de halo
     escuro do bloco de text-shadow, que é o que segura a leitura. */
  --wave-a:#FFFFFF;
  --wave-b:#FFFFFF;
  --wave-op:1;
}
/* ⚠️ o glow do topo do case é pintado com a cor do PROJETO, escrita inline pelo
   app.js (`--accent`), então nenhuma variável de tema o alcança: aqui ele é
   trocado na regra, senão o case do Redline abre um rosa em cima do P&B. */
body[data-group="ilustracao"] .case__glow,body[data-theme="ilustracao"] .case__glow{
  background:radial-gradient(56vw 44vh at 50% -14%,#FFF,transparent 66%);opacity:.07;
}

/* Forgia Studio — TEMA CLARO. A marca é tech premium clara, não dark: o fundo
   vira o mesmo off-white do arquivo do logo e a onda passa a ser o gradiente
   azul→roxo. Todos os HEX abaixo foram amostrados do PNG oficial do símbolo
   (`ID real Forgia kit`), não escolhidos de memória. */
body[data-group="forgia"],body[data-theme="forgia"]{
  --bg:#FAFAFC;                     /* o fundo do próprio arquivo do logo */
  --bg-soft:#EFF0F6;
  --fg:#202147;                     /* tinta oficial da wordmark */
  --text:#232445;
  --dim:#5A5C82;
  --dimmer:#83859F;
  --line:rgba(32,33,71,.15);
  --halo:250,250,252;               /* o halo do texto inverte: agora é claro */

  --blue:#7A50F5;                   /* violeta da haste, a cor de ação */
  --blue-lit:#5B34D1;               /* 7.2:1 no off-white, é a cor de texto */
  --blue-soft:#4526A8;              /* hover de título: escurece, não clareia */
  --blue-rgb:122,80,245;
  --blue-dim:rgba(122,80,245,.42);
  --on-accent:#FFF;
  --hover-tint:rgba(122,80,245,.10);
  --hover-tint-soft:rgba(122,80,245,.08);
  /* superfícies claras: no claro elas tapam a onda por cima, não por baixo */
  --card-bg:rgba(255,255,255,.86);
  --chip-bg:rgba(255,255,255,.72);
  --hd-bg:rgba(250,250,252,.8);
  --bar-bg:rgba(250,250,252,.82);
  --bar-track:rgba(32,33,71,.14);
  /* a aurora azul→roxo da capa da marca, agora sobre claro */
  --glow-a:rgba(62,121,252,.20);
  --glow-b:rgba(140,100,247,.22);
  /* ONDA: gradiente roxo→azul, sem o ciano (ele saiu porque em fundo claro
     lavava e a onda ficava fraca). Tons um passo mais fundos que o arquivo,
     que é o que dá vibração sobre o off-white, e ponto mais gordo e mais junto
     que no tema escuro pelo mesmo motivo. */
  --wave-a:#8A3FF5;                 /* roxo da haste, mais saturado */
  --wave-m:#6A45F6;                 /* a passagem, onde as duas peças se cruzam */
  --wave-b:#1F6FF5;                 /* azul royal da barra de cima */
  --wave-gap:7.6;
  --wave-r:2.1;
}
/* as legendas dos filmes viravam texto violeta miúdo em cima da onda e não
   liam. Agora são chip com o gradiente da marca e texto branco: 5.2:1 na
   ponta mais clara do gradiente, que é o mínimo do AA para este tamanho. */
body[data-group="forgia"] .pc figcaption,body[data-theme="forgia"] .pc figcaption{
  display:inline-block;margin-top:13px;padding:6px 13px;border-radius:99px;
  background:linear-gradient(96deg,#2E62E8,#6B3BE8);
  color:#FFF;font-weight:700;letter-spacing:.055em;text-shadow:none;
}

/* lockup da Forgia no título da seção: símbolo + nome, como no site do estúdio.
   O "Studio" vem em peso leve e na cor de apoio; é o contraste de peso que faz
   a leitura, não a cor. */
.lock{display:inline-flex;align-items:center;gap:.22em}
.lock__f{height:.82em;width:auto;flex:0 0 auto}
.lock__t{white-space:nowrap}
.lock__t b{font-weight:800;letter-spacing:-.045em}
.lock__t span{font-weight:400;color:var(--dim);letter-spacing:-.03em}
@media(max-width:520px){
  /* a 390px o lockup inteiro numa linha empurrava o "Studio" para fora */
  .lock{flex-wrap:wrap;gap:.1em .18em}
}

*{box-sizing:border-box}
/* o header mede ~61px de altura; 88 fazia a âncora parar 27px abaixo do alvo */
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--blue-lit);outline-offset:4px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* luz azul de fundo */
.glow{
  position:fixed;z-index:0;pointer-events:none;inset:0;
  background:
    radial-gradient(50vw 40vw at 80% -10%,var(--glow-a),transparent 62%),
    radial-gradient(42vw 38vw at 2% 30%,var(--glow-b),transparent 60%);
}

/* ---------- onda em pontos, desenhada em canvas ---------- */
/* o `--wave-op` deixa cada tema rebaixar a onda sem tocar no desenho dela:
   o mesmo ponto que lê bem em ciano cega quando vira branco puro */
.waves{position:fixed;inset:0;z-index:0;pointer-events:none;display:block;opacity:var(--wave-op,1)}

/* texto corrido: branco e com sombra, senão some no meio das bolinhas da onda.
   Os dois raios são de propósito: o largo abre um halo escuro em volta da
   linha, o curto fecha o contorno de cada letra. */
.hero .sub,.works__note,.sec-hero p,.prose p,.work__sum,.contact .lead,
.case__lead,.work__title,.contact h2,.big,
.rc__title,.work__meta,.rc__client,.next__grid a b,
.reel__head .label,.next__contact,.next__contact a,.tools .k,.tools span{
  text-shadow:0 2px 20px rgba(var(--halo),.98),0 0 8px rgba(var(--halo),.9),0 1px 3px rgba(var(--halo),.85);
}
.hero .sub,.sec-hero p,.prose p,.work__sum,.contact .lead,.case__lead{color:var(--text)}

/* ---------- tipografia ---------- */
.label{
  font-family:var(--small);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-lit);font-weight:700;
}
.label.mute{color:var(--dimmer)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--blue-lit)}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.038em;line-height:.98}

/* link com sublinhado azul que corre */
.ul{position:relative;display:inline-block}
.ul::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out);
}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- reveal ---------- */
.up{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.up.in{opacity:1;transform:none}
.rv{clip-path:inset(0 0 102% 0);transition:clip-path 1s var(--ease-out)}
.rv.in{clip-path:inset(0 0 -14% 0)}

/* ---------- header ---------- */
/* altura constante de propósito: o encolhimento de 18px para 12px animava
   padding, ou seja, layout, a cada scroll que cruzava o limiar. O que muda no
   stuck é só a pintura. */
.hd{position:fixed;top:0;left:0;right:0;z-index:90;padding-block:16px;transition:background .4s,box-shadow .4s}
.hd.stuck{background:var(--hd-bg);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.hd .in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hd .me{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em}
.hd .me span{color:var(--dimmer);font-weight:400;transition:color .28s var(--ease-out)}
.hd .me:hover span{color:var(--blue)}
.nav{display:flex;align-items:center;gap:22px;font-size:13.5px}
.nav a{color:var(--dim);transition:color .25s;position:relative;padding-block:3px}
.nav a:hover{color:var(--fg)}
.nav a.on{color:var(--fg)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--blue)}
.lang{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--dimmer);margin-left:6px}
.lang button{padding:6px 8px;transition:color .25s}
.lang button[aria-pressed="true"]{color:var(--blue-lit)}
.lang i{font-style:normal;opacity:.4}
/* ---------- menu do celular ----------
   ⚠️ HISTÓRICO: a nav já foi faixa rolável (escondia itens sem avisar) e depois
   passou a QUEBRAR em 3 linhas, o que empurrava o conteúdo 300px para baixo e
   é o que ele reprovou. Agora é botão de 3 traços + painel em coluna.
   O botão e o véu são injetados pelo app.js, para não repetir markup nas 6
   páginas. */
.burger{display:none}
@media(max-width:900px){
  .hd{padding-block:11px}
  .hd .in{flex-wrap:nowrap;gap:12px}
  .hd .me{font-size:14.5px;position:relative;z-index:97}

  /* os 3 traços. São a única peça de UI do site em cor de acento cheia:
     é o controle mais importante da tela pequena. */
  /* ⚠️ o painel é DESCENDENTE do header, então elevar o header não bastava: um
     filho com z-index maior pinta acima do fundo do pai e dos irmãos. O botão e
     o nome precisam do próprio z-index, acima do painel (95), senão o X fica
     embaixo dele e não há como fechar o menu a não ser pelo véu. */
  .burger{
    position:relative;z-index:97;
    display:grid;gap:4.5px;place-content:center;
    width:44px;height:44px;margin-right:-10px;flex:0 0 auto;   /* alvo de toque */
    border-radius:10px;transition:background .25s var(--ease-out);
  }
  .burger span{
    display:block;width:22px;height:2px;border-radius:2px;background:var(--blue);
    transition:transform .34s var(--ease-out),opacity .2s var(--ease-out);
  }
  .burger:hover{background:rgba(var(--blue-rgb),.10)}
  /* aberto: vira X. O traço do meio some, os de fora cruzam. */
  body.menu .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.menu .burger span:nth-child(2){opacity:0}
  body.menu .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* véu: fecha o menu no toque fora e escurece o conteúdo */
  .scrim{
    position:fixed;inset:0;z-index:88;background:rgba(4,5,8,.5);
    opacity:0;pointer-events:none;transition:opacity .32s var(--ease-out);
  }
  body.menu .scrim{opacity:1;pointer-events:auto}

  /* o painel em coluna */
  .nav{
    position:fixed;top:0;right:0;z-index:95;
    width:min(80vw,330px);height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:86px 26px 30px;
    background:var(--bg);border-left:1px solid var(--line);
    box-shadow:-24px 0 60px rgba(4,5,8,.45);
    transform:translateX(102%);transition:transform .42s var(--ease-out);
    overflow-y:auto;overscroll-behavior:contain;
  }
  body.menu .nav{transform:none}
  /* ⚠️ o painel (z 95) cobria o header (z 90) e ENGOLIA o próprio botão de
     fechar: abria o menu e não havia como sair a não ser pelo véu. Com o menu
     aberto o header sobe e ganha fundo sólido, o que também salva a legibilidade
     do "Pedro Malta" em cima do véu escuro. */
  body.menu .hd{z-index:96;background:var(--bg);box-shadow:0 1px 0 var(--line)}
  /* ⚠️ enquanto fechado o painel sai do caminho do teclado e do leitor de tela;
     sem isto o Tab passeia por links invisíveis fora da tela. */
  .nav[data-fechado="1"]{visibility:hidden;transition:transform .42s var(--ease-out),visibility .42s}
  .nav a{
    font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--fg);
    padding-block:15px;border-bottom:1px solid var(--line);
  }
  .nav a.on{color:var(--blue-lit);font-weight:600}
  /* o sublinhado de "página atual" era uma régua de 1.5px embaixo do texto;
     em coluna ele vira um traço vertical à esquerda, que lê como marcador */
  .nav a.on::after{
    content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:2px;background:var(--blue);
    right:auto;bottom:auto;
  }
  .lang{margin:26px 0 0;font-size:13px}
  .lang button{padding:12px 14px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:1;text-align:center;
  min-height:clamp(520px,82vh,860px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(110px,15vh,170px) clamp(30px,6vh,66px);
}
/* o bloco inteiro do hero é o que gira no scroll. A perspectiva mora aqui
   para a rotação ter profundidade em vez de parecer um giro chapado. */
.hero{perspective:1400px}
.hero__spin{transform-origin:50% 30%;will-change:transform,opacity;backface-visibility:hidden}

/* blocos que deslizam para o lado conforme a página rola.
   data-pan="1" sai pela direita, "-1" pela esquerda. */
.bio,.contact{perspective:1600px}
.pan{will-change:transform,opacity;backface-visibility:hidden}
/* ⚠️ `overflow-x:clip` (não hidden: hidden viraria contêiner de rolagem e
   mataria o position:sticky de dentro). Em repouso o .pan fica no lugar, mas
   ANTES de chegar nele o transform o joga ~30% da tela para o lado, e isso
   conta na largura rolável: a 390px a página media 472px. Só o
   `body{overflow-x:hidden}` segurava, e o Safari do iPhone tem histórico de
   não honrar isso quando há `perspective` na página. */
.bio,.contact,.next{overflow-x:clip}

.hero h1{
  margin:0 auto;font-family:var(--display);font-weight:600;
  font-size:clamp(38px,6.6vw,106px);letter-spacing:-.035em;line-height:1.02;max-width:15ch;
}
.hero h1 .ln{display:block;padding-block:.02em}
/* entrada palavra a palavra: sobe, desgira e sai do desfoque.
   Sem overflow:hidden de propósito, senão a máscara come o blur e a rotação. */
.hero h1 .w{
  display:inline-block;opacity:0;filter:blur(12px);
  transform:translateY(88%) rotate(7deg) scale(.94);
  transition:transform 1.15s var(--ease-out),opacity .85s var(--ease-out),filter .95s var(--ease-out);
  transition-delay:var(--d,0s);
}
.hero h1.in .w{opacity:1;filter:none;transform:none}
.hero .sub{margin:clamp(18px,3vh,30px) auto 0;max-width:56ch;font-size:clamp(15px,1.25vw,18px)}
/* ⚠️ Correção ÓPTICA, não capricho: a Instrument Serif tem altura-x baixa e no
   tamanho do subtítulo lê bem menor que a Geist da linha de cima, mesmo com o
   mesmo px. No <h1> isso não aparece porque a escala é enorme. Escopo só no
   .hero .sub para não mexer na serifa do título. */
.hero .sub .serif{font-size:1.52em;line-height:1.24}
/* o bloco "Disponível para projetos / relógio" saiu do hero na v8; o CSS dele
   (.foot .status .dot .sep + @keyframes live) foi removido junto. */

/* ---------- rolo de cases (home) ---------- */
.reel{position:relative;z-index:1;padding-block:clamp(40px,7vh,80px)}
/* ⚠️ gap fixo, não space-between: a 1440px o "clique para abrir" ficava a
   1200px do "Selecionados" e parava de ler como legenda dele. */
.reel__head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:26px}
.reel__head h2{margin:0}
/* o rolo é scroll de verdade (não mais marquee CSS): assim as setas conseguem
   empurrar a fila e a pessoa também pode arrastar. O avanço automático é feito
   no JS somando scrollLeft, e a fila duplicada faz a volta ser invisível. */
.reel__box{position:relative}
/* ⚠️ a máscara é em px, não em %: a 5% de uma tela larga ela dissolvia o
   primeiro e o último card pelo MEIO da arte. 36px só lambe a borda. */
.reel__vp{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
}
.reel__vp::-webkit-scrollbar{display:none}
.reel__track{display:flex;gap:18px;width:max-content}

/* só a ponta da seta, sem moldura. A sombra é obrigatória: sem ela o branco
   desaparece em cima de uma capa clara. */
.reel__nav{
  position:absolute;top:36%;transform:translateY(-50%);z-index:6;
  width:58px;height:58px;display:grid;place-content:center;
  border:0;background:none;
  filter:drop-shadow(0 2px 14px rgba(4,5,8,1)) drop-shadow(0 0 7px rgba(4,5,8,.98))
         drop-shadow(0 0 2px rgba(4,5,8,.95));
  opacity:0;transition:opacity .35s var(--ease),scale .3s var(--ease-out);
}
.reel__nav svg{
  width:36px;height:36px;fill:none;stroke:#FFF;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
/* ⚠️ nomes longos de propósito: `.next` já é a seção "continue por aqui" e
   sequestrava o position da seta, jogando ela para fora da tela. */
.reel__nav--prev{left:calc(var(--pad) - 8px)}
.reel__nav--next{right:calc(var(--pad) - 8px)}
.reel:hover .reel__nav,.reel__nav:focus-visible{opacity:1}
.reel__nav:hover{scale:1.18}
@media(hover:none){.reel__nav{opacity:1}}
.rc{width:clamp(220px,23vw,320px);flex:0 0 auto;position:relative;display:block}
.rc__media{
  position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:14px;background:var(--bg-soft);
  border:1px solid var(--line);transition:border-color .45s var(--ease);
}
.rc:hover .rc__media{border-color:var(--blue)}
/* ⚠️ SEM filtro de dessaturação. O `saturate(.7) brightness(.82)` só era
   revertido no :hover, e no celular não existe hover: todo visitante de
   telefone via o ciano da Hubcare como azul sujo e o amarelo do Ourocap como
   oliva, para sempre. A cor do trabalho é o argumento, não pode ser abafada. */
.rc__media img,.rc__media video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1s var(--ease-out);
}
.rc:hover .rc__media img,.rc:hover .rc__media video{transform:scale(1.07)}
.rc__tag{
  position:absolute;left:12px;top:12px;z-index:2;padding:5px 10px;border-radius:99px;
  font-family:var(--small);font-weight:700;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--chip-bg);backdrop-filter:blur(8px);
  border:1px solid var(--blue-dim);color:var(--blue-lit);
}
.rc__meta{margin-top:12px}
.rc__client{font-family:var(--small);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lit)}
.rc__title{margin:5px 0 0;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.15}

/* ---------- bio ---------- */
.bio{position:relative;z-index:1;padding-block:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,80px);align-items:start}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.big{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,62px);letter-spacing:-.038em;line-height:1.03}
.prose p{margin:0 0 18px;font-size:clamp(15px,1.2vw,17.5px);max-width:60ch;font-weight:600}
.prose p b{color:var(--fg);font-weight:800}
.skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.skills span{
  padding:6px 13px;border-radius:99px;border:1px solid var(--blue-dim);
  font-size:12.5px;color:var(--blue-lit);cursor:default;
  background:var(--chip-bg);backdrop-filter:blur(3px);
  transition:border-color .28s var(--ease-out),color .28s var(--ease-out),background .28s var(--ease-out);
}
.skills span:hover{border-color:var(--blue);color:var(--text);background:rgba(var(--blue-rgb),.10)}

/* ferramentas: estavam escritas no data.js (TOOLS) e não apareciam em lugar
   nenhum. É o conteúdo mais pesquisável por recrutador do site inteiro.
   Registro mais baixo que as skills de propósito: é ficha técnica, não título. */
.tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:20px}
.tools .k{font-family:var(--small);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.tools span:not(.k){font-size:13px;color:var(--dim)}

/* ---------- seções de trabalho ---------- */
.sec-hero{position:relative;z-index:1;padding-block:clamp(120px,17vh,190px) clamp(28px,5vh,54px)}
.sec-hero h1{margin:14px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(34px,6vw,92px);letter-spacing:-.04em;line-height:1}
.sec-hero p{margin:22px 0 0;font-size:clamp(15px,1.2vw,17.5px);max-width:62ch;line-height:1.62}

.list{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(30px,4.4vh,56px) clamp(16px,2vw,30px);align-items:start;
  padding-bottom:clamp(60px,10vh,120px);
}
.work{grid-column:span 6;position:relative}
.work.wide{grid-column:span 10}
.work.third{grid-column:span 4}
@media(max-width:980px){.work,.work.wide,.work.third{grid-column:span 6}}
@media(max-width:640px){.work,.work.wide,.work.third{grid-column:span 12}}

.work__media{
  position:relative;overflow:hidden;background:var(--bg-soft);
  aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.work.wide .work__media{aspect-ratio:2.6/1}
.work.third .work__media{aspect-ratio:1/1}
@media(max-width:980px){.work.wide .work__media,.work.third .work__media{aspect-ratio:4/3}}
.work:hover .work__media{border-color:var(--blue)}
/* ⚠️ idem: sem filtro e sem véu. O `::after` de rgba(8,8,10,.22) fazia a onda
   e o preto do site passarem por cima de cada peça. A separação do fundo já
   vem da borda e do gap do grid, de graça. */
.work__media img,.work__media video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease-out);
}
.work:hover .work__media img,.work:hover .work__media video{transform:scale(1.06)}

/* capa que é a marca sozinha num fundo chapado: sem zoom no hover, só um
   respiro, porque logo cortada na borda fica errado. */
.work__media.plain img,.rc__media.plain img{transform:none}
/* ⚠️ O card do rolo é 4/5 (vertical) e a capa de logo é larga (até 2.6/1).
   Com object-fit:cover o cover corta ~30% da largura e "ESTREITO" virava "TREI",
   "entre" virava "ntre". No rolo a logo usa contain, e o `cover.bg` do data.js
   pinta a caixa com a cor de fundo da própria marca, para não sobrar banda
   escura em volta de um retângulo colorido. */
.rc__media.plain img{object-fit:contain}
/* capa de logo nunca corta: no celular o card largo vira 4/3 e o `cover`
   comia as pontas das logos horizontais (Estreito, Entre). O fundo do card
   já tem a cor da arte, então a sobra some. */
.work__media.plain img{object-fit:contain}
.work:hover .work__media.plain img,.rc:hover .rc__media.plain img{transform:scale(1.018)}

.work__meta{display:flex;align-items:baseline;gap:12px;margin:15px 0 0}
.work__meta .idx{font-family:var(--small);font-weight:700;font-size:11px;color:var(--blue-lit);font-variant-numeric:tabular-nums}
.work__meta .client{font-family:var(--small);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.work__meta .tag{margin-left:auto;font-family:var(--small);font-weight:500;font-size:12px;color:var(--dimmer)}
.work__title{margin:5px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,32px);letter-spacing:-.03em;line-height:1.06;transition:color .3s}
.work:hover .work__title{color:var(--blue-soft)}
.work__sum{margin:8px 0 0;font-size:14.5px;max-width:48ch}
.work__hit{position:absolute;inset:0;z-index:3}
@media (hover:hover){.list:has(.work:hover) .work:not(:hover){opacity:.36;transition:opacity .5s var(--ease)}}

/* navegação entre seções, no pé das páginas */
.next{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:clamp(40px,7vh,80px)}
/* "continue por aqui" some no azul sobre a onda. O `>` duplo cobre os dois
   casos: com e sem o wrapper .pan em volta. */
.next > .label,.next > .pan > .label{color:var(--text)}
.next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px}
/* ⚠️ escopado no .next__grid, não em `.next a`: a faixa de contato que entrou
   logo abaixo também vive dentro do .next, e herdava o card inteiro (padding
   de 22px, moldura e fundo) em volta do email. */
.next__grid a{
  display:block;padding:22px 22px 26px;border-radius:14px;border:1px solid var(--line);
  background:var(--card-bg);           /* fundo cheio: a onda passava por dentro do card */
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--ease-out);
}
.next__grid a:hover{border-color:var(--blue);background:var(--hover-tint);transform:translateY(-3px)}
.next__grid a b{display:block;margin-top:9px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.025em}

/* ⚠️ faixa de contato no pé das 5 páginas de seção.
   Sem ela, quem entra direto num link de seção (que é o caminho mais provável
   de um recrutador) não tinha NENHUMA rota para email: o "continue por aqui"
   só liga para as seções irmãs e o site não tem rodapé. */
.next__contact{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin-top:clamp(30px,5vh,50px);padding-top:24px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--dim);
}
.next__contact .who{color:var(--text);font-weight:600}
.next__contact a{color:var(--blue-lit);font-weight:600}
.next__contact a:hover{color:var(--text)}
.next__contact .where{margin-left:auto;color:var(--dimmer);font-size:13px}
@media(max-width:640px){.next__contact .where{margin-left:0}}

/* ---------- contato ---------- */
.contact{position:relative;z-index:1;padding-block:clamp(60px,10vh,130px);border-top:1px solid var(--line)}
.contact h2{margin:14px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(28px,4.4vw,64px);letter-spacing:-.04em;line-height:1.02}
.contact .lead{margin:20px 0 0;font-size:clamp(15px,1.2vw,17.5px);max-width:46ch}

/* botão do contato: a moldura é a cor, o peso é o que chama.
   O fundo azul fica baixo de propósito, quem grita é a borda. */
.btn-cta{
  display:inline-flex;align-items:center;gap:14px;
  margin:clamp(24px,4vh,40px) 0 0;padding:17px 32px;border-radius:99px;
  border:1.5px solid var(--blue);background:rgba(var(--blue-rgb),.08);
  color:var(--text);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(15.5px,1.35vw,19px);
  transition:background .38s var(--ease-out),transform .5s var(--ease-out),
             box-shadow .5s var(--ease-out),border-color .38s;
}
.btn-cta::after{
  content:"→";font-weight:600;color:var(--blue-lit);
  transition:transform .45s var(--ease-out),color .38s;
}
.btn-cta:hover{
  background:rgba(var(--blue-rgb),.19);border-color:var(--blue-lit);
  transform:translateY(-3px);box-shadow:0 12px 38px rgba(var(--blue-rgb),.24);
}
.btn-cta:hover::after{transform:translateX(5px);color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:clamp(32px,5vh,52px)}
.cards a{
  display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:14px;
  border:1px solid var(--line);background:var(--card-bg);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--ease-out);
}
.cards a:hover{border-color:var(--blue);background:var(--hover-tint);transform:translateY(-3px)}
.cards .k{font-family:var(--small);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lit)}
.cards .v{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em;word-break:break-word}
/* o rodapé foi removido das 6 páginas na v12; o CSS dele saiu junto.
   A localização passou a viver aqui embaixo, no contato. */
.contact .where{margin-top:22px;color:var(--dimmer);font-size:13px}

/* ---------- case ---------- */
.case{
  position:fixed;inset:0;z-index:110;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility .5s;
}
.case.open{visibility:visible;opacity:1;transform:none}
.case__glow{position:absolute;inset:0 0 auto;height:64vh;pointer-events:none;
  background:radial-gradient(56vw 44vh at 50% -14%,var(--accent),transparent 66%);opacity:.18}
.case__bar{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px var(--pad);background:var(--bar-bg);backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line);
}
/* alvo de toque: media 64x23px, e é a ação principal de sair de uma tela
   cheia. O padding negativo na margem mantém o alinhamento visual da barra. */
.case__close{
  display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;
  letter-spacing:-.01em;color:var(--blue-lit);
  padding:11px 14px;margin:-11px -14px;border-radius:8px;transition:color .25s,background .25s;
}
.case__close span[aria-hidden]{font-size:1.22em;line-height:1}
.case__close:hover{color:var(--blue-soft);background:var(--hover-tint-soft)}
.case__hero{position:relative;z-index:1;padding-block:clamp(44px,8vw,104px) clamp(26px,4vw,52px)}
.case__hero h2{margin:14px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(34px,6vw,96px);letter-spacing:-.042em;line-height:1;max-width:15ch}
.case__lead{margin:clamp(22px,4vw,40px) 0 0;font-size:clamp(15px,1.3vw,18.5px);max-width:58ch}
.case__note{margin:16px 0 0;max-width:58ch;font-size:13.5px;line-height:1.5;color:var(--dim)}
.case__note[hidden]{display:none}
.case__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:clamp(34px,5vw,58px);padding-top:20px;border-top:1px solid var(--line)}
.case__meta b{display:block;margin-top:6px;font-weight:500;font-size:15px}
.case__pieces{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;
  gap:clamp(26px,3.4vw,52px) clamp(14px,1.8vw,26px);padding-block:clamp(38px,6vw,80px) clamp(60px,10vw,130px)}
/* ⚠️ `margin:0` NÃO é decoração: `.pc` é um <figure>, e o estilo do próprio
   navegador dá a ele `margin:1em 40px`. Isso vinha comendo 80px de largura de
   cada peça desde sempre. No celular era 270px de 350 (23% da tela jogados
   fora), e no desktop encolhia toda peça de case. */
.pc{grid-column:span 4;position:relative;margin:0}
.pc.w6{grid-column:span 6}
.pc.w12{grid-column:span 12}
.pc.tall{grid-column:span 3}
.pc.mid{grid-column:5 / span 4}
.pc.midL{grid-column:3 / span 4}
.pc.midR{grid-column:7 / span 4}
/* `fixa`: a peça acompanha a rolagem ao lado de uma vizinha muito comprida
   (ex.: a landing do Ourocap), em vez de deixar um vão vazio embaixo dela */
.pc.fixa{position:sticky;top:clamp(80px,9vh,110px)}
@media(max-width:560px){.pc.fixa{position:relative;top:auto}}
.pc img,.pc video{width:100%;height:auto;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line)}
/* peça interativa (3D): vitrine em loop + botões; vira iframe no clique */
.live__stage{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#050403;border:1px solid var(--line)}
.live__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.live__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.live__ui{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;
  padding:clamp(18px,3vw,34px);background:linear-gradient(to top,rgba(4,5,8,.86),rgba(4,5,8,.4) 55%,transparent)}
.live__hint{font-family:var(--small);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lit)}
.live__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.live__btns .btn-cta{margin:0;cursor:pointer;font:inherit;font-weight:700;font-size:clamp(14.5px,1.2vw,17px);padding:14px 26px}
.live__btns .btn-cta:active{transform:translateY(0) scale(.97)}
.live__btns .btn-cta:focus-visible,.live__open:focus-visible{outline:2px solid var(--blue-lit);outline-offset:3px}
.live__open{color:#FFF;font-weight:600;font-size:clamp(13.5px,1.05vw,15px);border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;
  transition:color .12s,border-color .12s}
.live__open:hover{color:var(--blue-lit);border-color:var(--blue-lit)}
@media(max-width:640px){.live__ui{padding:14px;gap:10px}.live__hint{display:none}.live__btns .btn-cta{padding:11px 18px}}
.pc figcaption{margin-top:11px;font-family:var(--small);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lit)}
@media(max-width:900px){.pc,.pc.tall,.pc.w6{grid-column:span 6}.pc.w12{grid-column:span 12}.pc.mid{grid-column:3 / span 8}.pc.midL,.pc.midR{grid-column:span 6}}
@media(max-width:560px){.pc,.pc.tall,.pc.w6,.pc.w12,.pc.mid,.pc.midL,.pc.midR{grid-column:1 / -1}}

/* ---------- cursor ---------- */
.cur{
  position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:0;height:0;
  opacity:0;transition:opacity .3s;
}
/* ⚠️ o disco é um ::before que só ESCALA. Animar width/height/margin aqui
   forçava layout a cada frame, e o cursor já é reposicionado por rAF o tempo
   todo, então a conta saía cara justamente durante o movimento. */
.cur::before{
  content:"";position:absolute;left:-25px;top:-25px;width:50px;height:50px;
  border-radius:50%;background:var(--blue);
  transform:scale(.16);transition:transform .35s var(--ease-out);
}
.cur.on{opacity:1}
.cur.big::before{transform:scale(1)}
.cur .t{position:absolute;left:-25px;top:-25px;width:50px;height:50px;
  display:grid;place-content:center;font-size:9px;letter-spacing:.06em;
  font-weight:700;color:var(--on-accent);opacity:0;transition:opacity .25s;text-transform:uppercase}
.cur.big .t{opacity:1}
@media (hover:none){.cur{display:none}}

/* ---------- loader ---------- */
#intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-content:center;gap:20px;text-align:center}
#intro .n{font-family:var(--display);font-weight:600;font-size:clamp(26px,4.6vw,56px);letter-spacing:-.038em;overflow:hidden}
#intro .n span{display:block;transform:translateY(105%);transition:transform .9s var(--ease-out)}
#intro.go .n span{transform:none}
#intro .bar{width:min(220px,52vw);height:1.5px;background:var(--bar-track);margin-inline:auto;overflow:hidden}
/* a barra cresce por scaleX, não por width: o JS a atualiza a cada 50ms e
   animar width fazia layout em todo passo */
#intro .bar i{display:block;height:100%;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
#intro.out{opacity:0;transform:scale(1.012);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}

/* ---------- densidade do celular ----------
   O layout do telefone não é o do desktop reduzido: com o menu recolhido, o
   respiro de topo que fazia sentido em 1440px virava meia tela em branco.
   Aqui o ar sai, o título cresce e a peça ganha a largura de volta. */
@media(max-width:640px){
  .sec-hero{padding-block:76px 20px}
  .sec-hero h1{font-size:clamp(36px,10.4vw,92px)}
  .sec-hero p{margin-top:16px;font-size:15.5px;line-height:1.55}
  .hero{min-height:auto;padding-block:104px 44px}
  .list{gap:30px 12px;padding-bottom:54px}
  .work__meta{margin-top:12px}
  .work__sum{margin-top:6px}
  .bio,.contact,.next,.reel{padding-block:46px}
  .case__hero{padding-block:34px 22px}
  .case__pieces{gap:26px 12px;padding-block:26px 60px}
  .case__meta{gap:16px;margin-top:26px;padding-top:16px}
  .next__grid{gap:10px;margin-top:18px}
  .next__grid a{padding:16px 16px 18px}
  .next__grid a b{font-size:18px;margin-top:6px}
  .cards{gap:10px}
  .cards a{padding:17px}
  .pc figcaption{margin-top:9px;font-size:11px}
  /* ⚠️ desfoque de fundo é caro em celular e estes três são decorativos: o
     chip e a pílula já têm fundo próprio. O do header fica, é uma faixa só. */
  .rc__tag,.skills span{backdrop-filter:none}
}
@media(max-width:420px){
  /* 4px de cada lado que faltavam para a arte respirar menos e mostrar mais */
  :root{--pad:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .up{opacity:1;transform:none}.rv{clip-path:none}
  .hero h1 .ln > span,#intro .n span{transform:none}
  .reel__track{animation:none}
  html{scroll-behavior:auto}
}





/* 3 verticais 9:16 lado a lado (motion): ficam juntos até no tablet, empilham só no celular */
.pc.v3{grid-column:span 4}
@media(max-width:900px){.pc.v3{grid-column:span 4}}
@media(max-width:560px){.pc.v3{grid-column:1 / -1}}