/* ============================================================
   Hirai Studio — style.css
   Todos os estilos do projeto (movidos do <style> original).
   Nenhuma regra visual foi alterada.
   ============================================================ */

/* Fontes locais (autohospedadas, arquivos em /assets/FONTS/), ambas
   variáveis — um arquivo só cobre a faixa inteira de peso. Geist cobre
   corpo de texto/UI (100–900); Clash Display cobre logo/títulos, mas só
   vai até 700 nessa instância variável (não tem um peso "black" 900). */
@font-face{
  font-family:'Geist';
  src:url('../assets/FONTS/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Clash Display';
  src:url('../assets/FONTS/ClashDisplay-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
/* Ruiga não é variável — são 2 arquivos separados, um por peso (Thin e
   SemiBold). Por isso usa font-weight fixo (não uma faixa como as duas
   fontes acima) em cada @font-face. */
@font-face{
  font-family:'Ruiga';
  src:url('../assets/FONTS/DxRuiga-Thin.woff2') format('woff2');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Ruiga';
  src:url('../assets/FONTS/DxRuiga-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:hsl(0, 3%, 6%);        /* antes #e7e4e3 (creme) — agora quase preto, equivalente a #0F0E0E */
  --ink:#ffffff;              /* antes preto — texto principal agora branco */
  --ink-dim:#858281;          /* mantido: cinza médio ainda legível sobre o novo fundo escuro */
  --ink-faint:#b6b3b1;        /* mantido: cinza claro pra bordas/detalhes sutis */
  --accent:hsl(10, 94%, 41%); /* antes #ff0000 — agora equivalente a #CB2706 */
  --font-body:'Geist', sans-serif;
  --font-title:'Clash Display', sans-serif;
  --radius:16px;
  --header-h:80px;
  --header-fade:40px; /* quanto o blur desce ABAIXO do header antes de sumir de vez */
  --max-w:1512px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:-0.4px;
  /* cursor customizado (desktop): a seta vira um círculo vermelho
     pequeno, na cor do site. Só tem efeito em quem usa mouse — em
     touch (celular/tablet) não existe cursor, então não afeta nada lá. */
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="%23CB2706"/></svg>') 10 10, auto;
  /* "sticky footer": em páginas com pouco conteúdo (ex: Projects, ainda
     placeholder), isso empurra o footer pra colar na base da tela em vez
     de flutuar logo depois do conteúdo curto. Em páginas com bastante
     conteúdo não muda nada — o footer continua aparecendo normalmente
     depois de tudo. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;}
footer{flex:0 0 auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:var(--max-w);margin:0 auto;}

/* ---------- textura de ruído (noise) sobre o fundo, em todas as páginas ----------
   Overlay fixo (cobre a tela toda, não rola com a página), feito com um
   filtro SVG de ruído fractal embutido direto no CSS (sem precisar de
   arquivo de imagem). z-index baixo (2) de propósito: qualquer slot de
   mídia real (foto/vídeo/iframe) tem z-index:3 — ver ".media-slot",
   ".reel", ".hero", ".work-media", ".g-item" — então essas áreas ficam
   por CIMA do ruído e não são afetadas por ele. O header (z-index:100)
   continua acima de tudo normalmente. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.57' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat:repeat;
}

/* ---------- header (shared across all pages) ---------- */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  justify-content:space-between;
  align-items:center; /* já centraliza logo/nav verticalmente no header */
  padding:0 28px;
}
/* Efeito de vidro: em vez de cor sólida com fade, um blur do que está
   atrás do header. O blur fica CHEIO/sólido durante toda a altura do
   header (--header-h) e só começa a esmaecer (mask-image) depois disso,
   descendo mais --header-fade antes de sumir de vez — por isso o
   ::before é mais alto que o header em si. Fica separado do header pra
   o mask não afetar o texto do logo/nav. Sempre ligado, inclusive sobre
   o hero (sem regra pra desligar via .is-on-dark). */
header::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:calc(var(--header-h) + var(--header-fade));
  z-index:-1;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  mask-image:linear-gradient(180deg, black 0, black var(--header-h), transparent calc(var(--header-h) + var(--header-fade)));
  -webkit-mask-image:linear-gradient(180deg, black 0, black var(--header-h), transparent calc(var(--header-h) + var(--header-fade)));
}
.logo{display:flex;align-items:center;gap:6.8px;font-family:var(--font-title);font-weight:700;font-size:31px;letter-spacing:-0.6px;cursor:pointer;}
.logo-star{width:23px;height:23px;flex:0 0 auto;color:var(--accent);}
nav{display:flex;gap:24px;font-size:15px;font-weight:900;}
nav a{opacity:.85;transition:color .2s ease, opacity .2s ease;cursor:pointer;}
nav a:hover{color:var(--accent);opacity:1;}
nav a.current{color:var(--ink);opacity:1;border-bottom:1px solid var(--ink);padding-bottom:1px;}

/* ---------- page switching ---------- */
.page{display:none;padding-top:var(--header-h);}
.page.active{display:block;}
/* Home é a única página com hero em tela cheia (.home-hero) — o vídeo
   precisa começar exatamente no topo (y=0) pro header conseguir flutuar
   transparente por cima. Nas outras páginas o padding-top acima continua
   normal, reservando espaço pro header fixo não cobrir o conteúdo. */
#page-home{padding-top:0;}
/* Páginas de artigo (.page-article, geradas em renderProjectPages) também
   levam o hero até o topo absoluto, com o header flutuando transparente
   por cima — igual a Home. Diferente da Home, o hero mantém um shade
   (gradiente escuro) fixo pra garantir legibilidade do header/logo. */
.page-article{padding-top:0;}

/* ================= MEDIA SLOT (shared helper) ================= */
.media-slot{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  z-index:3; /* fica acima do ruído de fundo (z-index:2) — ver body::after */
}
.media-slot.no-radius{border-radius:0;}
.media-slot img, .media-slot video, .media-slot iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:none;
  transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.media-slot .ph{position:absolute;inset:0;transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1);}
.media-slot:hover img, .media-slot:hover .ph{transform:scale(1.045);}

/* ================= HOME ================= */
/* Bloco de abertura da Home: vídeo + faixa ocupam exatamente 100vh no
   desktop (a pessoa só vê o resto da página ao rolar, tipo um "rodapé"
   de abertura). .reel cresce pra preencher o espaço acima da faixa. */
.home-hero{
  position:relative;
  height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.reel{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  z-index:3;
}
.home-hero-ticker{
  flex:0 0 auto;
  background:var(--accent);
  color:var(--bg);
  overflow:hidden;
  padding:15px 0; /* 12px + 25% */
}
.home-hero-ticker .marquee{
  display:inline-flex;
  white-space:nowrap;
  /* 80s (não 20s) porque cada <p> agora tem o bloco de 5 itens repetido
     4x dentro dele (ver comentário no index.html) — sem isso a rolagem
     ficaria 4x mais rápida do que antes, já que a distância percorrida
     em 20s também quadruplicou junto com o conteúdo. */
  animation:homeTicker 80s linear infinite;
}
.home-hero-ticker .marquee p{
  display:inline-flex;
  align-items:center;
}
.home-hero-ticker .marquee span{
  font-family:'Ruiga', var(--font-body);
  font-size:24px;font-weight:600;letter-spacing:.02em;
  padding:0 14px;
}
.home-hero-ticker .marquee span.dot{
  padding:0;
  font-size:10px;
  line-height:1;
}
@keyframes homeTicker{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
/* Poster real (1º frame do vídeo, assets/HOME/reel-poster.webp), cobrindo
   o slot inteiro. Some na hora (sem fade) assim que o vídeo termina de
   carregar (classe .is-loaded, ligada via onload do iframe — ver o
   onload inline no index.html). */
.reel .ph{
  position:absolute;inset:0;
  background-image:url('../assets/HOME/reel-poster.webp');
  background-size:cover;
  background-position:center;
}
.reel.is-loaded .ph{
  display:none;
}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:none;pointer-events:none;}
/* iframe (Vimeo/YouTube) não tem suporte confiável a object-fit em todo
   navegador, então usamos a técnica clássica de "preencher tipo cover":
   o iframe é dimensionado maior que o container nas duas direções
   (baseado no viewport) e centralizado — sempre cobre o slot inteiro,
   cortando o excesso, sem depender de object-fit. */
.reel iframe{
  position:absolute;top:50%;left:50%;border:none;pointer-events:none;
  width:100vw;height:56.25vw; /* 16:9 baseado na largura */
  min-height:100%;min-width:177.78vh; /* 16:9 baseado na altura */
  transform:translate(-50%,-50%);
  opacity:0;
}
.reel.is-loaded iframe{opacity:1;}

/* Bloco de texto entre a faixa e "Selected Works" — única área do site
   com fundo claro de propósito (referência enviada), o resto da Home
   continua no tema escuro normal. #e7e4e3 é um bege claro, não branco
   puro, pra não destoar tanto do resto. Texto na cor do footer. */
.home-intro{
  background:#e7e4e3;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  text-align:center;
  padding:0 28px;
}
.home-intro p{
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(28px,5vw,64px);
  line-height:1.15;
  letter-spacing:-0.5px;
  max-width:1100px;
  color:var(--accent);
}
/* Botão "Talk to me" — direciona pro WhatsApp. Contorno vermelho (não
   preenchido), porque o ícone do WhatsApp também é vermelho — se o
   fundo do botão fosse vermelho sólido, o ícone sumiria. */
.home-intro-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
  font-family:var(--font-title);
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
  padding:20px 40px;
  border-radius:100px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.home-intro-cta:hover{transform:scale(1.05);opacity:.8;}
.home-intro-cta-icon{width:26px;height:26px;flex:0 0 auto;}

/* Botão flutuante do WhatsApp — fica em todas as páginas, canto inferior
   direito. Cores invertidas: círculo vermelho (var(--accent)), borda e
   ícone no preto de fundo do site (var(--bg)). Some enquanto o hero da Home
   está na tela (classe .is-hidden ligada por initWhatsappFab, main.js —
   só existe .home-hero na Home, então nas outras páginas essa função
   não acha o elemento e o botão fica sempre visível). */
.whatsapp-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:opacity .3s ease, transform .3s ease;
}
.whatsapp-fab svg{width:30px;height:30px;color:var(--bg);}
.whatsapp-fab:hover{transform:scale(1.08);}
.whatsapp-fab.is-hidden{opacity:0;pointer-events:none;transform:scale(.8);}

.section-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 28px 20px;
}
.section-head h2{font-family:var(--font-title);font-weight:700;font-size:clamp(29.7px,4.05vw,40.5px);letter-spacing:-0.4px;}
.section-head a{font-size:18.9px;font-weight:900;border-bottom:1px solid var(--ink);padding-bottom:1px;}
.section-head a:hover{color:var(--accent);border-color:var(--accent);}

.home-grid{
  display:flex;
  gap:11.2px;
  padding:0 28px 60px;
}
.home-grid .work-item{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 0;
}
.home-grid .work-media{width:100%;height:auto;aspect-ratio:4/4.5;}

/* ================= WORK ================= */
.filters{
  position:sticky;top:var(--header-h);z-index:50;background:var(--bg);
  border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);
  padding:14px 28px;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;
  font-size:14px;font-weight:900;
}
.filters::-webkit-scrollbar{display:none;}
.filter-btn{
  white-space:nowrap;background:none;border:none;color:var(--ink-dim);
  font-weight:900;font-size:inherit;letter-spacing:-0.4px;cursor:pointer;
  padding:2px 0;position:relative;transition:color .2s ease;
}
.filter-btn::after{content:"";position:absolute;left:0;bottom:-2px;width:0%;height:2px;background:var(--accent);transition:width .25s ease;}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{color:var(--accent);}
.filter-btn.active::after{width:100%;}
.filter-count{margin-left:auto;color:var(--ink-faint);white-space:nowrap;font-weight:700;}

/* Ocultos por enquanto (poucos projetos ainda, a barra de categorias e
   as categorias nas thumbs estão mais atrapalhando que ajudando). O
   filtro continua funcionando normalmente por baixo — é só apagar essa
   regra (ou a linha "display:none") pra reativar visualmente quando
   fizer sentido de novo. Fica DEPOIS de ".filters{...}" e ".work-category{...}"
   de propósito, senão a especificidade empata e a regra de cima vence. */
.filters, .work-category{display:none;}

.work-rows{display:flex;flex-direction:column;gap:16px;padding:28px 28px 60px;}
.work-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.work-row .work-item{display:flex;flex-direction:column;min-width:0;}
/* animação de entrada dos slots do grid do Work, escalonada por item
   (--i é setado por JS em renderWorkGrid, main.js). "backwards" faz o
   item já nascer no estado inicial (invisível/deslocado) durante o
   delay, em vez de aparecer cheio e só depois sumir pra animar. Como é
   puro CSS ligado ao elemento, reanima sozinho toda vez que a página
   volta a ficar visível (troca de display:none pra block ao navegar). */
@keyframes workItemIn{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
.work-row .work-item{
  animation:workItemIn .6s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
.work-row .work-media{width:100%;height:auto;aspect-ratio:4/5;flex:1 1 auto;min-height:0;}

/* mesmo efeito de entrada dos slots do Work, reaproveitado nos outros
   "grids de slot" do site: Home (.home-grid .work-item), galerias das
   páginas de artigo (.g-item) e os logos de colaboração do About
   (.about-client-logo). Aqui o escalonamento é via :nth-child em vez de
   --i via JS, porque são grids pequenos e previsíveis (não precisa de
   índice contínuo entre linhas como no Work). */
.home-grid .work-item,
.g-item,
.about-client-logo{
  animation:workItemIn .6s cubic-bezier(.16,1,.3,1) backwards;
}
.home-grid .work-item:nth-child(1), .g-item:nth-child(1), .about-client-logo:nth-child(1){animation-delay:0ms;}
.home-grid .work-item:nth-child(2), .g-item:nth-child(2), .about-client-logo:nth-child(2){animation-delay:70ms;}
.home-grid .work-item:nth-child(3), .g-item:nth-child(3), .about-client-logo:nth-child(3){animation-delay:140ms;}
.g-item:nth-child(4), .about-client-logo:nth-child(4){animation-delay:210ms;}
.g-item:nth-child(5), .about-client-logo:nth-child(5){animation-delay:280ms;}
.g-item:nth-child(6), .about-client-logo:nth-child(6){animation-delay:350ms;}
.about-client-logo:nth-child(7){animation-delay:420ms;}
.about-client-logo:nth-child(8){animation-delay:490ms;}
.about-client-logo:nth-child(9){animation-delay:560ms;}
.about-client-logo:nth-child(10){animation-delay:630ms;}
.work-item{transform:rotate(0deg);transition:transform .5s cubic-bezier(.4,.24,.4,1), opacity .3s ease;}
.work-item.hidden{display:none;}
.work-item:nth-child(odd):hover{transform:rotate(-1deg);}
.work-item:nth-child(even):hover{transform:rotate(1deg);}

.work-media{display:block;position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;z-index:3;}
.work-media img, .work-media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1);}
.work-media:hover img, .work-media:hover .ph{transform:scale(1.045);}

.work-caption{margin-top:10px;font-family:var(--font-title);font-size:22.5px;font-weight:700;letter-spacing:1px;line-height:1.25;}
.work-caption a{transition:color .2s ease;}
.work-caption a:hover{color:var(--accent);}
.work-subtitle{margin-top:1.28px;font-family:var(--font-title);font-size:18px;font-weight:800;letter-spacing:1px;color:var(--ink);}
.work-category{margin-top:2px;font-size:15px;font-weight:900;letter-spacing:-0.4px;color:var(--ink-dim);}

/* ================= ARTICLE (work1..work9) ================= */
.hero{position:relative;width:100%;aspect-ratio:2.39/1;height:600px;overflow:hidden;z-index:3;}
.hero .ph, .hero img, .hero video, .hero iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border:none;}
/* shade fixo no hero das páginas de artigo — mantém o header/logo legível
   por cima da mídia mesmo sem nenhuma cor de fundo no header. */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
}

/* ---- bloco "sobre o projeto": título à esquerda, texto à direita ---- */
.project-about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 40px;
  align-items:start;
  padding:39.2px 28px 39.2px;
  max-width:1400px;
}
.project-title{padding:0;max-width:none;}
.project-title h1{font-family:var(--font-title);font-weight:700;font-size:clamp(24px,4vw,38px);line-height:1.05;letter-spacing:1px;}
.project-title .subtitle{margin-top:6.4px;font-family:var(--font-title);font-size:calc(clamp(24px,4vw,38px) * 0.8);font-weight:800;color:var(--ink);letter-spacing:1px;}
.project-title .year{margin-top:6.4px;font-family:var(--font-title);font-size:calc(clamp(24px,4vw,38px) * 0.8);font-weight:900;color:var(--accent);letter-spacing:1px;}

.project-text{display:grid;gap:22px;}
.summary{padding:0;max-width:none;display:grid;gap:22px;}
.summary .lang-label, .meta-row .lang-label{font-size:20.4px;font-weight:900;margin-bottom:6px;}
.summary .lang-label{color:var(--ink-dim);text-transform:capitalize;}
.meta-row .lang-label{color:var(--accent);}
.summary p, .meta-row p{font-size:18px;font-weight:100;letter-spacing:-0.1px;line-height:1.3;}

.meta{padding:0;max-width:none;margin:0;display:grid;gap:22px;}

/* ---- rolagem controlada nas páginas de artigo ----
   Ligada via JS (classe .is-article-scroll na <html>, ver showWorkPage
   em main.js) só enquanto uma página de projeto está aberta — nunca no
   grid do Work. "proximity" (não "mandatory") pra não travar o usuário:
   só encaixa quando o scroll já está perto de um ponto. 1º snap: centro
   do bloco de texto (.project-about). Depois: cada scroll centraliza a
   próxima linha da galeria. Por fim o footer também é um ponto de snap
   (alinhado ao final), pra dar a sensação clara de "chegou ao fim" sem
   precisar arrastar demais. scroll-padding-top compensa o header fixo. */
html.is-article-scroll{
  scroll-snap-type:y proximity;
  scroll-padding-top:var(--header-h);
}
html.is-article-scroll .hero{scroll-snap-align:start;}
html.is-article-scroll .project-about{scroll-snap-align:center;}
html.is-article-scroll .g-item{scroll-snap-align:center;}
html.is-article-scroll footer{scroll-snap-align:end;}

/* ---- rolagem controlada na Home ----
   Mesma ideia acima, mas fixa via classe .is-home-scroll direto no
   <html> do index.html (essa página não troca de seção via JS, então
   não precisa de toggle). Ordem: sai do vídeo → centro do .home-intro
   → centro da galeria (.home-grid) → footer alinhado ao final. */
html.is-home-scroll{
  scroll-snap-type:y proximity;
  scroll-padding-top:var(--header-h);
}
html.is-home-scroll .home-hero{scroll-snap-align:start;}
html.is-home-scroll .home-intro{scroll-snap-align:center;}
html.is-home-scroll .home-grid{scroll-snap-align:center;}
html.is-home-scroll footer{scroll-snap-align:end;}

.gallery{padding:8px 28px 70px;display:flex;flex-direction:column;gap:24px;}
.g-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;}
.g-item{border-radius:var(--radius);overflow:hidden;position:relative;z-index:3;cursor:zoom-in;}
.g-item .ph, .g-item img, .g-item video, .g-item iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border:none;transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1);}
.g-item:hover .ph, .g-item:hover img{transform:scale(1.045);}

/* ================= LIGHTBOX (galeria dos artigos) =================
   Ligado via initLightbox() no main.js: clicar num .g-item com mídia
   real (foto/vídeo/iframe — placeholders .ph sem src são ignorados)
   abre esse overlay com a mídia ampliada, fundo escurecido + borrado
   (mesmo efeito de vidro do header). Dá pra arrastar a imagem pro lado
   (mouse ou touch) pra ir pro próximo/anterior item da mesma galeria,
   além das setas e do teclado. */
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.is-open{
  opacity:1;visibility:visible;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
.lightbox-stage{
  position:relative;
  max-width:min(1200px,90vw);
  max-height:86vh;
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;
  cursor:grab;
}
.lightbox-stage:active{cursor:grabbing;}
.lightbox-stage img, .lightbox-stage video{
  max-width:100%;max-height:86vh;
  border-radius:var(--radius);
  object-fit:contain;
  -webkit-user-drag:none;user-select:none;
  pointer-events:none; /* o drag é tratado no .lightbox-stage, não na mídia */
}
/* width/height reais são calculados e aplicados inline via JS (função
   render() em initLightbox, main.js) — precisa saber a proporção real
   do vídeo (vertical 9:16, horizontal 16:9 etc.) pra caber sem
   distorcer nem sobrar barra preta enorme. Aqui só um teto de segurança
   antes do JS rodar. */
.lightbox-stage iframe{
  max-width:min(1200px,90vw);
  max-height:86vh;
  border:none;border-radius:var(--radius);
}
.lightbox-close, .lightbox-nav{
  position:absolute;
  background:var(--bg);
  border:2px solid var(--accent);
  color:var(--accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{transform:scale(1.08);}
.lightbox-close{
  top:24px;right:24px;
  width:44px;height:44px;
  font-size:22px;line-height:1;
  z-index:2;
}
.lightbox-nav{
  top:50%;transform:translateY(-50%);
  width:52px;height:52px;
  font-size:28px;line-height:1;
  z-index:2;
}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.08);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-nav.is-hidden{display:none;}
.lightbox-counter{
  position:absolute;
  bottom:24px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:900;letter-spacing:.05em;
  color:var(--ink);
  background:rgba(0,0,0,.4);
  padding:6px 14px;
  border-radius:100px;
}
.g-grid.three .g-item{grid-column:span 4;aspect-ratio:4/5;}
.g-grid.two .g-item{grid-column:span 6;aspect-ratio:3/4;}
.g-grid.one .g-item{grid-column:span 12;height:calc(100vh - var(--header-h));max-height:820px;}
.g-grid.one .g-item .ph, .g-grid.one .g-item img{aspect-ratio:16/9;}
/* "three-mix": igual ao ".three" (3 por linha, corta 4:5, tablet 2 por
   linha, mobile 1 por linha) só que o PRIMEIRO item do bloco fica
   vertical (9:16) em vez de 4:5 — pensado pra um vídeo em destaque
   seguido de fotos/vídeos comuns. */
.g-grid.three-mix .g-item{grid-column:span 4;aspect-ratio:4/5;}
.g-grid.three-mix .g-item:first-child{aspect-ratio:9/16;}
.g-grid.three-mix .g-item:first-child iframe{object-fit:cover;object-position:center top;}

/* "three-h": 1 vídeo por linha, largura total, em TODOS os breakpoints
   (desktop/tablet/mobile) — pra já abrir num tamanho bom de assistir,
   sem precisar dar play numa janela pequena. */
.g-grid.three-h .g-item{grid-column:span 12;aspect-ratio:16/9;}

/* "three-v": 3 vídeos/fotos verticais (9:16) lado a lado, com
   object-fit:cover ancorado no TOPO (mostra a parte de cima, corta
   embaixo) e preenchendo o slot inteiro. */
.g-grid.three-v .g-item{grid-column:span 4;aspect-ratio:9/16;}
.g-grid.three-v .g-item iframe{object-fit:cover;object-position:center top;}

/* "three-v-stack": igual ao three-v no desktop (3 vídeos 9:16 lado a
   lado), mas em TABLET e MOBILE vira 1 item por linha (o three-v normal
   fica 2 por linha no tablet). */
.g-grid.three-v-stack .g-item{grid-column:span 4;aspect-ratio:9/16;}
.g-grid.three-v-stack .g-item iframe{object-fit:cover;object-position:center top;}

/* "two-h": 2 fotos horizontais lado a lado que respeitam a proporção
   NATURAL de cada imagem (sem cortar/croppar), diferente do ".two"
   padrão que força 3:4. Como a altura vem da própria imagem, cada
   item pode ficar com uma altura levemente diferente do vizinho —
   isso é esperado. Continua responsivo porque a largura acompanha a
   coluna do grid e a altura acompanha a largura automaticamente. */
.g-grid.two-h .g-item{grid-column:span 6;aspect-ratio:auto;position:relative;}
.g-grid.two-h .g-item img{position:static;width:100%;height:auto;object-fit:unset;display:block;}

/* "one-h": 1 item por linha, largura total, respeitando a proporção
   NATURAL de cada mídia (sem cortar). Fotos usam a proporção real do
   arquivo; vídeo/iframe usa 16:9 (padrão widescreen, já que embed não
   tem tamanho "natural" pra gente ler). Como a largura já é sempre
   100% da coluna, funciona igual em qualquer tamanho de tela, sem
   precisar de ajuste por breakpoint. */
.g-grid.one-h .g-item{grid-column:span 12;aspect-ratio:auto;position:relative;}
.g-grid.one-h .g-item img{position:static;width:100%;height:auto;object-fit:unset;display:block;}
.g-grid.one-h .g-item iframe, .g-grid.one-h .g-item video{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:unset;display:block;border:none;}

/* "featured": bloco fixo de 7 itens em 2 LINHAS independentes (desktop).
   Linha 1 (3 itens, todos 4:5): vídeo/embed + 2 fotos — o vídeo usa
   object-fit:cover com âncora no topo (mostra a parte de cima do
   conteúdo). Linha 2 (4 itens, 3:4): 4 fotos, numa linha separada.
   A ORDEM dos itens no array importa: 1º = vídeo/hero, 2º e 3º = as
   duas fotos da linha 1, 4º ao 7º = as quatro fotos da linha 2, da
   esquerda pra direita. Em tablet reflui pra 2 itens por linha (todos
   4:5); em mobile, 1 item por linha (todos 4:5) — nessas telas menores
   não faz mais diferença qual item pertencia à linha 1 ou 2. */
.g-grid.featured{grid-template-rows:auto auto;}
.g-grid.featured .g-item:nth-child(1){grid-column:1 / 5;grid-row:1;aspect-ratio:4/5;}
.g-grid.featured .g-item:nth-child(1) iframe{object-fit:cover;object-position:center top;}
.g-grid.featured .g-item:nth-child(2){grid-column:5 / 9;grid-row:1;aspect-ratio:4/5;}
.g-grid.featured .g-item:nth-child(3){grid-column:9 / 13;grid-row:1;aspect-ratio:4/5;}
.g-grid.featured .g-item:nth-child(4){grid-column:1 / 4;grid-row:2;aspect-ratio:3/4;}
.g-grid.featured .g-item:nth-child(5){grid-column:4 / 7;grid-row:2;aspect-ratio:3/4;}
.g-grid.featured .g-item:nth-child(6){grid-column:7 / 10;grid-row:2;aspect-ratio:3/4;}
.g-grid.featured .g-item:nth-child(7){grid-column:10 / 13;grid-row:2;aspect-ratio:3/4;}

/* ================= ABOUT ================= */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:stretch;
  gap:40px;
  padding:56px 28px 90px;
  max-width:var(--max-w);
  margin:0 auto;
}
.about-col{display:flex;flex-direction:column;gap:28px;height:100%;}
.about-intro{
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.15;
  letter-spacing:0px;
}
.about-intro .accent{color:var(--accent);}
.about-media{aspect-ratio:3/4;flex:1;}
.about-block h4{
  font-size:18px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:10px;font-weight:900;
}
.about-block p{font-size:16px;font-weight:100;line-height:1.6;letter-spacing:-0.1px;}
.about-location{
  font-family:var(--font-title);
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
}
.about-exp-item{
  display:flex;justify-content:space-between;gap:12px;
  font-size:15px;font-weight:300;line-height:1.7;
  border-bottom:1px solid var(--ink-faint);
  padding:6px 0;
}
.about-exp-item span:last-child{color:var(--ink-dim);white-space:nowrap;}
.about-expertise{
  display:flex;flex-wrap:wrap;gap:8px;
}
.about-expertise span{
  font-size:14px;font-weight:600;
  border:1px solid var(--ink-faint);
  border-radius:20px;
  padding:6px 12px;
}
.about-clients{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.about-client-logo{
  aspect-ratio:1.6/1;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  padding:14%;
}
.about-client-logo img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  opacity:.82;
  /* Os logos foram processados em preto sólido pra fundo claro (ver
     conversa da seção Colaborations). Como o site inteiro agora é
     escuro, invertemos a cor na tela pra virarem brancos, sem precisar
     regerar os 10 arquivos de imagem. */
  filter:invert(1);
}
.about-globe{aspect-ratio:4/3;flex:1;}

/* ================= FOOTER (shared) ================= */
footer{margin-top:0;background:var(--accent);color:var(--bg);}
.footer-top{padding:60px 28px 50px;display:flex;flex-wrap:wrap;gap:50px;justify-content:space-between;}
.footer-cta h2{font-family:var(--font-title);font-weight:700;font-size:clamp(22px,3vw,30px);max-width:12ch;line-height:1.1;}
.footer-cta a.mail{display:inline-block;margin-top:14px;font-size:14px;font-weight:900;border-bottom:1px solid var(--bg);padding-bottom:1px;transition:color .2s ease, border-color .2s ease;}
.footer-cta a.mail:hover{color:#fff;border-color:#fff;}
.footer-cols{display:flex;gap:56px;font-size:13px;}
.footer-tag{
  display:inline-block;border:1px solid var(--bg);border-radius:20px;
  padding:3px 12px;font-size:10px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:12px;
}
.footer-col{display:flex;flex-direction:column;}
.footer-col a{display:block;margin-bottom:6px;font-weight:800;transition:color .2s ease;}
.footer-col a:hover{color:#fff;}
.footer-meta{
  padding:16px 28px;display:flex;justify-content:space-between;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:-0.1px;
  border-top:1px solid rgba(15,14,14,.25);
}

/* ================= PLACEHOLDER ================= */
.placeholder{padding:120px 28px 120px;max-width:600px;}
.placeholder h1{font-weight:900;font-size:clamp(24px,4vw,36px);}
.placeholder p{margin-top:14px;color:var(--ink-dim);font-size:15px;font-weight:700;}

/* ================= BREAKPOINTS =================
   Desktop reference: MacBook Pro 14" — 1512 x 982
   Tablet reference:  800 x 1356
   Mobile reference:  357 x 1286
==================================================== */

/* ---- Tablet (~1024px and below, covers 800px reference) ---- */
@media (max-width:1024px){
  :root{--header-h:76px;}
  .home-hero{height:auto;}
  .reel{flex:none;aspect-ratio:4/5;}
  /* empilhado (coluna), o gap (já 11.2px na regra base) vira a
     distância vertical entre o subtítulo de um slot e a imagem do
     próximo. */
  .home-grid{flex-direction:column;}
  .home-grid .work-item{flex:none !important;width:100%;}
  .home-grid .work-media{height:auto;aspect-ratio:4/5;}
  .hero{height:335px;}
  .project-about{grid-template-columns:1fr;gap:24px;}
  .about-grid{grid-template-columns:1fr 1fr;}
  .about-col:nth-child(3){grid-column:1 / -1;}
  .about-clients{grid-template-columns:repeat(4,1fr);}
  /* colunas viram 1 aqui — gap dobrado (era 8px) porque nesse layout
     empilhado o gap vira a distância vertical entre um trabalho e o
     próximo (título+subtítulo até o próximo slot), que ficava apertada. */
  .work-row{grid-template-columns:1fr;gap:16px;}
  .work-row .work-item{grid-column:1 !important;width:100%;}
  .work-row .work-media{height:auto;aspect-ratio:4/5;}
  .work-rows{gap:16px;}
  .g-grid.three .g-item{grid-column:span 6;}
  .g-grid.three-v .g-item{grid-column:span 6;}
  .g-grid.three-v-stack .g-item{grid-column:span 12;}
  .g-grid.three-mix .g-item{grid-column:span 6 !important;aspect-ratio:4/5 !important;}
  .g-grid.featured .g-item{grid-column:span 6 !important;grid-row:auto !important;aspect-ratio:4/5 !important;}
}

/* ---- Mobile (~480px and below, covers 357px reference) ---- */
@media (max-width:480px){
  :root{--header-h:64px;}
  header{padding:0 18px;}
  .logo{font-size:24px;}
  nav{gap:14px;font-size:12px;}
  .hero{height:150px;}
  .home-grid{padding:0 18px 44px;}
  .section-head{padding:36px 18px 16px;}
  .filters{padding:12px 18px;gap:16px;}
  .work-rows{padding:20px 18px 44px;}
  /* container de texto da Home bem mais baixo no celular: em vez de
     ocupar a tela toda, abraça o texto com um respiro equivalente a
     ~2 linhas em cima e ~2 embaixo, em vez do height:100vh do desktop. */
  .home-intro{height:auto;padding:89.6px 39.2px;}
  .whatsapp-fab{width:50px;height:50px;right:16px;bottom:16px;}
  .whatsapp-fab svg{width:24px;height:24px;}
  .home-intro-cta{padding:12px 24px;font-size:15px;gap:8px;}
  .home-intro-cta-icon{width:18px;height:18px;}
  .project-about, .gallery{padding-left:18px;padding-right:18px;}
  /* lightbox no mobile: setas menores e mais coladas na borda — o
     arrastar (swipe) é o jeito principal de navegar lá, as setas ficam
     como reforço. */
  .lightbox-nav{width:40px;height:40px;font-size:22px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
  .lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:20px;}
  .g-grid.three .g-item, .g-grid.two .g-item, .g-grid.two-h .g-item, .g-grid.three-v .g-item, .g-grid.three-v-stack .g-item{grid-column:span 12;}
  .g-grid.three-mix .g-item{grid-column:span 12 !important;aspect-ratio:4/5 !important;}
  .g-grid.featured .g-item{grid-column:1 / -1 !important;grid-row:auto !important;aspect-ratio:4/5 !important;}
  .about-grid{grid-template-columns:1fr;padding:36px 18px 60px;gap:32px;}
  .about-col:nth-child(3){grid-column:auto;}
  .about-clients{grid-template-columns:repeat(3,1fr);}
  .footer-top{padding:44px 18px 36px;gap:32px;}
  .footer-cols{gap:28px;flex-wrap:wrap;}
  .footer-meta{padding:12px 18px;flex-direction:column;gap:6px;align-items:flex-start;}
}