/* =========================================================
   NJFILMES - Design system cinematografico
   Referencias: sand.black (contraste alto, tipografia forte,
   video em destaque) + cajal.com.br (narrativa, provas sociais)
   ========================================================= */

:root {
  --bg: #0a0a0b;
  --bg-alt: #131315;
  --bg-card: #17171a;
  --fg: #f5f4f0;
  --fg-muted: #a8a7a2;
  --fg-dim: #6f6e6a;
  --accent: #c9a227;
  --accent-soft: rgba(201, 162, 39, 0.14);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --radius: 4px;
  /* Pedido em 10/09/2026: depois de ajustar o titulo do hero da Home (fonte Poppins Bold +
     contorno preto sutil + sombra), pedido pra deixar o site inteiro com essa mesma cara,
     "pra ficar padrão" - trocada a fonte de titulo do site inteiro (usada em todo h1/h2/h3/h4,
     logo, numeros de servico/estatistica etc, via essa variavel) de Bebas Neue pra Poppins.
     A fonte antiga (Bebas Neue) fica soh comentada aqui embaixo caso precise voltar. */
  --font-display: 'Poppins', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Pedido do usuario (12/09/2026): "consegue colocar bold e etc" + "opcao pra eu mesmo
     diminuir o tamanho das fontes" - duas variaveis novas, controladas la no painel
     (Configuracoes > Identidade e SEO) via server/render.js (fontOverrideStyle). Padrao aqui
     e exatamente o que ja existia antes (titulos em negrito/700, escala 100% = tamanho normal
     do site) - só mudam quando a pessoa escolhe uma opção diferente no painel. */
  --font-weight-display: 700;
  --font-scale: 1;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1280px;
}

* { box-sizing: border-box; }
/* A variavel --font-scale acima (controlada pelo painel) multiplica o tamanho de fonte "raiz"
   aqui no <html> - como quase todo tamanho de texto do site usa "rem" (relativo a esse tamanho
   raiz, nao ao elemento pai), isso encolhe/aumenta o site inteiro de forma proporcional, títulos,
   textos, botões e menu juntos, sem precisar mexer em cada regra CSS uma por uma. */
html { scroll-behavior: smooth; overflow-x: hidden; font-size: calc(16px * var(--font-scale)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* "Pelicula" quente/dourada bem sutil por cima do site inteiro (PC e celular, todas as
   páginas) — pedido original em 30/08/2026, depois ajustado algumas vezes pra mais forte
   e, por fim (pedido do usuário nesta sessão), reduzido de volta pra ficar discreto — o
   objetivo é só dar um leve aquecimento visual, sem lavar as cores nem competir com o
   conteúdo. Div fixa (server/render.js), por cima de tudo (pointer-events:none pra não
   atrapalhar clique em nada), com um movimento lento e contínuo (gradeDrift, abaixo).
   Ajustado em seguida (12/09/2026): "a pelicula ja que ta o site todo tipo filtro, faltou
   tirar mais e deixar quase nada" - reduzido bem mais uma vez (pouco menos da metade do
   que estava). O reforço extra que só existia na versão mobile (ver @media, mais abaixo)
   foi removido nesse mesmo pedido - ele que deixava o efeito mais forte/perceptível
   justamente no celular. */
.grade-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: normal;
  background: linear-gradient(160deg, rgba(255,150,60,0.018) 0%, rgba(201,162,39,0.012) 45%, rgba(120,55,15,0.02) 100%);
  background-size: 160% 160%;
}
.js .grade-overlay { animation: gradeDrift 16s ease-in-out infinite; }
@keyframes gradeDrift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 45%; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Pedido em 10/09/2026: peso Bold (700, igual ficou o titulo do hero - nem fino/400 nem
     ExtraBold/800) em vez do 400 que a Bebas Neue (fonte fina por natureza) usava.
     Sombra suave adicionada tambem (mesma do titulo do hero) pra dar profundidade/legibilidade
     - efeito "padrao" pedido pra combinar com a Home, sem contorno/brilho animado (isso fica
     só na palavra de destaque do hero, não faria sentido em todo título do site).
     Pedido em seguida (12/09/2026): "consegue colocar bold e etc" - trocado o 700 fixo pela
     variavel --font-weight-display, controlada no painel (Configuracoes). Continua 700 por
     padrao (ver :root, no topo do arquivo) - só muda se a pessoa escolher outra opção lá. */
  font-weight: var(--font-weight-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 0.4em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.55);
}
/* Pedido em 10/09/2026: depois de trocar a fonte de titulo do site pra Poppins (mais "cheia"
   que a Bebas Neue de antes, que era condensada), os titulos ficaram grandes/pesados demais
   pro gosto do usuario - tamanhos reduzidos aqui (e na versao mobile, mais abaixo no arquivo)
   pra compensar. So os titulos "genericos" (secoes das paginas) - o titulo do hero da Home
   tem seu proprio tamanho a parte (nao mexido). */
/* Pedido em seguida (10/09/2026): reduzido de novo - primeira redução ainda ficou grande
   demais (reparado no nome "Noberto Junior" da pagina Sobre, que e um h1 generico). */
h1 { font-size: clamp(2.4rem, 7.5vw, 6.8rem); line-height: 0.92; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 4.6vw, 3.7rem); line-height: 0.96; }
h3 { font-size: clamp(1.15rem, 2.3vw, 1.6rem); }
p { margin: 0 0 1em; color: var(--fg-muted); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1em;
  display: inline-block;
}
/* Pedido em 30/08/2026: espalhar pelo site inteiro (PC e celular, varias
   secoes) o mesmo tipo de "movimento de texto" que o usuario gostou no
   titulo do hero - aqui nos labels dourados (legenda, categoria dos cards
   do portfolio, numero dos servicos, cargo das pessoas). Flutuacao mais sutil
   que a do hero (3px em vez de 6px) porque sao textos menores. */
.js .eyebrow,
.js .work-card .cat,
.js .service-card .num,
.js .person-card .person-info span {
  animation: labelFloat 5s ease-in-out infinite;
}
@keyframes labelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Pedido em 30/08/2026: brilho pulsando de leve nos botoes solidos (call to
   action principal, ex: "Ver portfolio") - reaproveita a mesma ideia do
   brilho pulsante que ja existia no botao flutuante de WhatsApp (waPulse,
   mais abaixo no arquivo), so que com a cor dourada da marca. */
.js .btn-solid { animation: btnGlow 3s ease-in-out infinite; }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 0 rgba(201,162,39,0); } 50% { box-shadow: 0 0 26px rgba(201,162,39,0.65); } }
/* Pedido em 30/08/2026: zoom bem lento e continuo nas fotos dos cards de
   servico (mesma familia da animacao heroZoom usada na foto do hero) - da
   um ar "vivo" tambem nessa secao. So aqui (service-card): as fotos do
   portfolio (work-card), da galeria e das pessoas ja tem transform proprio
   no hover, entao animar o transform delas tambem ia brigar com o hover e
   deixar o movimento tremido - por isso nao mexi nessas. */
.service-card img { animation: cardBreathe 9s ease-in-out infinite alternate; }
@keyframes cardBreathe { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Pedido novamente em 30/08/2026: "coloca mais ainda movimentacao nos textos,
   fotos, etc, tanto no PC quanto no celular" - flutuacao continua tambem no
   paragrafo de destaque do hero e nos numeros de estatistica da pagina
   Sobre (ex: "40+ Projetos"), pra nenhum texto ficar totalmente parado. */
.js .hero-content .lead { display: inline-block; animation: labelFloat 6s ease-in-out infinite; }
.js .stat b { display: inline-block; animation: heroAccentFloat 5s ease-in-out infinite; }
/* Pedido novamente em 30/08/2026: no celular nao existe "hover", entao as
   fotos que so se moviam ao passar o mouse (portfolio, pessoas, galeria da
   bio) ficavam paradas nas telas de toque. Aqui (hover: none) cobre celular
   e tablet sem bagunçar a animacao de hover que continua so pra quem tem
   mouse de verdade (regra em @media (hover: hover), mais abaixo). */
@media (hover: none) {
  .js .work-card img,
  .js .person-card img,
  .js .gallery-grid img {
    animation: cardBreathe 10s ease-in-out infinite alternate;
  }
}
/* Acessibilidade: quem pediu menos movimento no sistema operacional (ou
   navegador) nao recebe nenhuma dessas animacoes novas - mesmo padrao ja
   usado no site para as outras animacoes (mais abaixo no arquivo). */
@media (prefers-reduced-motion: reduce) {
  .js .hero-content h1::after,
  .js .hero-content h1 .text-accent,
  .js .hero-content h1 .hero-title-white,
  .js .hero-content h1 .hero-punct,
  .js .hero-content h1 .hero-highlight-word,
  .js .eyebrow,
  .js .work-card .cat,
  .js .service-card .num,
  .js .person-card .person-info span,
  .js .btn-solid,
  .js .hero-content .lead,
  .js .stat b,
  .js .grade-overlay,
  .service-card img,
  .js .work-card img,
  .js .person-card img,
  .js .gallery-grid img,
  .js .nav-link-num,
  .js .nav-link-text,
  .js .nav-glow-1,
  .js .nav-glow-2,
  .js .nav-menu-label,
  .js .work-card .photo-hint,
  .js .work-card .play-ring circle,
  .js .work-card .play-cursor,
  .js .btn-hero-cta .btn-arrow-icon {
    animation: none;
  }
}

/* Destaque dourado dentro de frases (usado na headline do hero e onde fizer sentido) */
.text-accent { color: var(--accent); }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid var(--fg);
  color: var(--fg);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--fg); color: var(--bg); transform: translateY(-2px); }
.btn:active { filter: brightness(0.88); transition-duration: 0.1s; }
.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #12100a; }
/* Pedido do usuario (12/09/2026): "no nome ver portifolio bota uma animacao de uma seta ou algo
   do tipo apertando a seta da cor dourado" - seta dourada ao lado do texto do botao "Ver
   portfólio" do hero, com uma animacao continua de "empurrar pra frente" (nudge), sugerindo
   pra clicar. So nesse botao especifico (.btn-hero-cta), os outros botoes "solid" do site (pedir
   orcamento, etc.) continuam sem seta. */
/* Pedido do usuario (12/09/2026, 2o ajuste): "queria como se fose um click em cima do botao,
   uma animacao como se estivesse apertando o botao com a seta em cima de ver portifolio" -
   virou o mesmo cursor de mouse "clicando" ja usado no selo de play dos cards de video
   (.play-cursor) e no link do YouTube no rodape (.footer-youtube-cursor), so que agora por
   cima do proprio botao "Ver portfólio" (nao mais do lado de fora nem so uma seta empurrando).
   Reaproveita a mesma animacao de toque (ytCursorTap, definida mais abaixo no CSS junto do
   selo de play) pra ficar consistente com os outros lugares que ja tem esse "clique" no site. */
.btn-hero-cta {
  position: relative;
}
/* Pedido do usuario (12/09/2026, 4o ajuste): "mexeu no formato do quadrado branco, quero o
   tamanho do quadrado igual a antes" - o padding extra pra caber o cursor tinha deixado o
   botao mais largo que o original. Volta o botao pro tamanho de sempre (sem padding-right
   extra) e o cursor cabe dentro do padding que ja existia, so posicionado mais junto da
   borda (mais pra dentro do "right") pra nao tampar a ultima letra do texto. */
.btn-hero-cta .btn-arrow-icon {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  display: inline-flex;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.btn-hero-cta .btn-arrow-icon svg { width: 15px; height: 15px; display: block; }
/* Pedido do usuario (12/09/2026, 3o ajuste): "faltou deixar a seta dourada igual da fonte" -
   o cursor reaproveitado (playCursorHtml/footer-youtube-cursor) e branco com contorno escuro
   nos outros lugares (selo de play, link do YouTube) - so aqui no botao do hero ele fica
   dourado (mesmo tom --accent usado nos titulos/destaques do site), sem mexer no icone
   original usado nesses outros lugares. */
.btn-hero-cta .btn-arrow-icon svg path { fill: var(--accent); stroke: #2a1f08; }
.js .btn-hero-cta .btn-arrow-icon { animation: heroCtaCursorTap 1.8s ease-in-out infinite; }
@keyframes heroCtaCursorTap {
  0%, 20%, 100% { transform: translateY(-50%) translate(0, 0) scale(1); }
  35% { transform: translateY(-50%) translate(-4px, 4px) scale(0.92); }
  48% { transform: translateY(-50%) translate(-4px, 4px) scale(1.12); }
  60% { transform: translateY(-50%) translate(0, 0) scale(1); }
}
/* Pedido do usuario (12/09/2026): "a cor da moldura do entrar em contato coloque dourado igual
   a todo site, o filtro dourado que ta aplicado em todo site, bem sutil como se nao existisse" -
   trocada a borda cinza/branca (var(--border-strong)) por um dourado bem discreto, no mesmo
   tom do --accent do site mas com opacidade baixa (parecido com o "grade-overlay", a pelicula
   dourada sutil que já cobre o site inteiro) - da pra notar que e dourado sem chamar atencao
   demais. Afeta todo botao ".btn-outline" do site (inclui "Entrar em contato" no hero e os
   outros "Ver todos/Ver mais trabalhos"), pra ficar igual/consistente em todo lugar. */
.btn-outline { border-color: rgba(201, 162, 39, 0.4); }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: #12100a; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.5s var(--ease);
}
.site-header.scrolled {
  background: rgba(10, 10, 11, 0.88);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--border);
}
.site-header.hide-on-scroll { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
.logo span { color: var(--accent); } .logo-img { display: inline-flex; align-items: center; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); } .logo-img:hover { transform: scale(1.05); opacity: 0.9; } .logo-img-el { height: 34px; width: auto; display: block; } .site-footer .logo-img-el { height: 30px; }
.main-nav > ul { display: flex; gap: 34px; }
.main-nav a {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.main-nav a:hover::after { width: 100%; }
.has-sub { position: relative; }
.sub-nav {
  position: absolute; top: 100%; left: -16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 200px;
  padding: 10px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s var(--ease);
}
.has-sub:hover .sub-nav { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-nav li a { display: block; padding: 8px 20px; font-size: 0.75rem; }
.sub-nav li a:hover { background: var(--accent-soft); color: var(--accent); }
.sub-nav a::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; padding: 8px;
  position: relative;
}
/* Pedido em 10/09/2026: o icone (as 3 tracinhos) virava um X ao clicar, mas continuava na mesma
   cor de sempre - nao dava nenhum sinal visual de "aberto" alem do formato. Primeiro tentamos
   dourado só quando aberto; o usuário pediu o oposto e mais forte: dourado (--accent) sempre que
   fechado - igual o resto dos destaques do site - e branco (--fg) quando a pessoa clica/abre. */
.nav-toggle span { width: 26px; height: 2px; background: var(--accent); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span { background: var(--fg); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Pedido em 10/09/2026 (quinta rodada): "aba" na borda direita indicando que dá pra puxar o
   menu (ver comentário no render.js). Escondida fora do mobile - só ganha display no media
   query max-width:720px, junto do resto do menu mobile. pointer-events:none pra nunca roubar
   nenhum toque de quem está arrastando/rolando a página por baixo dela. */
.edge-swipe-hint { display: none; }
.edge-swipe-hint.is-hidden { opacity: 0 !important; }
@keyframes edgeHintNudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-6px); }
}

/* Corrigido em 30/08/2026: faltava esconder o botao X e o fundo escurecido
   do menu mobile fora do media query de celular (igual ja era feito com o
   .nav-toggle acima) - por isso o X aparecia solto no topo da versao de PC. */
.nav-close { display: none; }
.nav-backdrop { display: none; }
/* Numeração, rótulo "Menu" e a setinha do submenu do menu mobile só existem visualmente
   no celular — no desktop o link mostra só o texto e o submenu abre no hover, igual sempre
   foi (ver .has-sub:hover .sub-nav mais acima). */
.nav-link-num { display: none; }
.nav-menu-label { display: none; }
.nav-link-chevron { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center center;
  transform: scale(0.98);
  animation: heroZoom 14s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(0.98);} to { transform: scale(1.07);} }
/* Vídeo de fundo da Home vindo de um link do YouTube/Vimeo (pedido do usuário em 17/09/2026 —
   antes só um arquivo de vídeo direto (.mp4 etc.) funcionava nesse campo, um link colado do
   YouTube simplesmente não tocava). Diferente do <video> nativo ali em cima, que já ganha
   object-fit:cover de graça, um iframe de player não aceita object-fit (o vídeo lá dentro é
   controlado pelo player do YouTube/Vimeo, não pelo nosso CSS) — pra preencher a tela inteira
   cortando as bordas, o iframe nasce bem maior que a tela e centralizado (mesmo esquema já usado
   nas prévias em vídeo dos cards do portfólio, .work-card-video iframe, só que com mais folga
   porque o hero cobre a tela toda — pode ter proporções bem mais extremas que um card). Sem
   nenhum controle visível (já vem assim na própria URL do embed) e pointer-events:none evita
   qualquer clique acidental nele. */
.hero-video-embed {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video-embed iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw; /* 16:9 */
  min-height: 100vh; min-width: 177.78vh; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
}
.hero-photo-split {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Fotos de destaque da Home passando com crossfade — mesmo esquema das fotos da página Sobre
   (.about-photo-slide), adaptado pra cobrir o hero inteiro. O zoom suave (heroZoom) continua
   vindo de ".hero-media img" ali em cima, então cada foto já nasce com ele. */
.hero-photo-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-photo-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo-slide { transition: none; }
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  /* 10/09/2026: pedido pra deixar a foto de fundo do hero mais clara/visível - escurecido reduzido
     (mantendo mais forte só bem embaixo, atrás do título, pra continuar legível).
     Ajustado em 11/09/2026: "o degrade que falei foi no fundo pegando minha foto toda" - pedido
     pra escurecer mais a foto/video de fundo inteira (nao so una caixa atras do titulo, que foi
     removida) - aumentada a opacidade em todos os pontos do degrade.
     Ajustado em seguida (11/09/2026): "deixa a foto mais escura com degrade no topo pra destacar
     a frase" - alem de escurecer geral, reforcado especificamente o TOPO do degrade (onde fica a
     legenda pequena + o titulo), com um novo pico de escurecido logo nos primeiros ~22% da foto
     (que depois suaviza de novo em direcao ao meio, antes de escurecer forte de novo no rodape
     como ja era).
     Ajustado em seguida (12/09/2026): "deixa um degrade escuro tanto no site quanto no celular" -
     escurecido mais um pouco em todos os pontos do degrade (PC - a versao mobile tem seu proprio
     ajuste separado, mais abaixo no arquivo).
     Ajustado em seguida (12/09/2026): "degrade na foto, escureca mais, deixa bem mais escuro, ta
     no cel tanto no pc" - escurecido bem mais uma vez (pedido explicito de "bem mais escuro"),
     em todos os pontos do degrade.
     Ajustado em seguida (17/09/2026): "deixa o degrade do vídeo que rola atrás menos intenso
     tanto no cel tanto no pc" - clareado de volta em todos os pontos (pedido oposto ao de
     12/09, dessa vez pra ficar mais leve), mantendo a mesma forma do degrade (mais escuro no
     topo pro título e no rodapé). */
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.4) 45%, rgba(2,2,3,0.72) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 0 90px;
}
/* Pedido do usuario (11/09/2026): centralizar o hero inteiro (texto pequeno em cima,
   titulo, botoes embaixo - MESMA ordem que ja existia no HTML, so centralizado na tela).
   Testado antes com referencia do philipbloom.net (titulo gigante, ordem invertida) - o
   usuario preferiu manter a ordem original e so encolher/centralizar. Depois de varias
   rodadas de ajuste (2 sites de referencia + pedido de "deixar em 2 linhas" tanto no PC
   quanto no celular), o tamanho final do titulo ficou bem menor que o original. */
.hero-content { text-align: center; }
.hero-content h1 {
  max-width: 900px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  position: relative;
}
/* Pedido do usuario (11/09/2026): "sobe mais um pouco perto aonde tem meu pescoso o texto
   ta" - o bloco de texto do hero (no desktop) fica bem embaixo por causa do
   align-items:flex-end la no .hero; subido com translateY pra ficar mais alto na tela,
   mais perto da altura do pescoco/ombros da pessoa na foto/video de fundo. So no desktop -
   o celular ja tem seu proprio ajuste de altura aqui embaixo, dentro do
   @media (max-width:720px).
   Pedido em seguida: "aproveita e coloca as coisas pra cima achei muito em baixo" - ainda
   estava baixo demais, subido mais um pouco (de -18vh pra -28vh). */
.hero-content { transform: translateY(-28vh); }
/* Pedido do usuario (11/09/2026): "a parte de cima n ta afastada" (print mostrando a legenda
   "Produção Audiovisual..." quase colada no menu) - o -28vh acima é uma % da altura da TELA,
   entao em janelas de PC mais baixas (navegador não maximizado, notebook menor, etc.) esse
   mesmo -28vh sobe o bloco de texto demais, quase até embaixo do menu fixo (.site-header),
   já que o texto sempre fica "grudado" embaixo (align-items:flex-end la em .hero) e o -28vh
   original foi calibrado pensando numa tela de altura "normal". Duas faixas de segurança pra
   telas mais baixas (só no PC - min-width aqui pra não interferir no celular, que já tem seu
   proprio ajuste separado): quanto mais baixa a janela, menos ele sobe, garantindo sempre uma
   distância mínima do menu. Valores testados e conferidos (respiro sempre positivo) da altura
   400px até 900px+. */
@media (min-width: 721px) and (max-height: 760px) {
  .hero-content { transform: translateY(-14vh); }
}
@media (min-width: 721px) and (max-height: 600px) {
  .hero-content { transform: translateY(-4vh); }
}
/* Desce um pouco o texto pequeno acima do título, a pedido. */
.hero-eyebrow-lower { margin-top: 0.5em; }
/* 10/09/2026: o dourado padrão do site (--accent) ficava meio "mostarda" nesses dois textos do
   hero (legenda de cima + palavra de destaque do título) - pedido pra deixar mais vivo/amarelado
   só aqui (o resto do site - botões, links, outros títulos - continua com o dourado padrão de
   sempre, sem mudar a marca inteira). */
.hero-content .eyebrow { color: var(--hero-accent-color, #f6c445); }
/* Pedido do usuario (12/09/2026): "producao audiovisual salvador bahia deixa menor a letra
   tanto cel tanto pc" - reduz so essa legenda do hero (nao mexe no tamanho padrao de .eyebrow
   usado em titulos de outras secoes/paginas, tipo "Trabalhos recentes"). Vale pro desktop; o
   celular tem seu proprio valor, ainda menor, la embaixo no bloco @media (max-width: 720px). */
.hero-content .eyebrow { font-size: 0.62rem; }
/* Pedido do usuario (12/09/2026): "na producao audio visual que tem escrito ali com letras
   menores, deixa um pouco desfocado, o minimo possivel" - mesma ideia do desfoque sutil que
   ja existe no titulo grande do hero (".hero-content h1 { filter: blur(1.7px) }" mais abaixo),
   so que um valor bem mais leve aqui (letra ja pequena, pediu o minimo possivel). Celular tem
   seu proprio valor ainda menor, dentro do @media (max-width: 720px). */
.hero-content .eyebrow { filter: none; }
/* Pedido do usuario (11/09/2026): "producao audio visual salvador ba nao precisa de efeito
   nenhum deixa parado" - essa legenda (.eyebrow) tinha herdado a flutuacao labelFloat que
   o site usa nos labels dourados em geral (.js .eyebrow, mais acima no arquivo). Desligada
   só aqui (dentro de .hero-content), pra nao afetar os outros textos que usam a mesma classe
   .eyebrow em outras paginas/secoes - essa regra ganha por ter mais especificidade (2 classes
   + .js contra 1 classe + .js), nao depende de ordem no arquivo. */
.js .hero-content .eyebrow { animation: none; transform: none; }
/* Pedido em seguida (10/09/2026): a palavra de destaque ("papel") tava mais clara que o
   brilho atras dela (::before mais abaixo), entao o brilho nao aparecia como luz vindo de
   tras - so ficava uma cor lisa. Escurecida um pouco (só a palavra do título, o texto
   pequeno acima continua igual) pra o brilho, que é mais claro, dar esse efeito de luz de
   fundo por contraste. Primeira tentativa (#ddb03e) ficou sutil demais, usuario nao viu
   diferenca - trocado pra um dourado "de ouro" de verdade (mais metalico/encorpado, nao so
   amarelo), que contrasta bem mais com o brilho claro atras. */
.hero-content h1 .text-accent { color: var(--hero-accent-color, #d4af37); }
/* 10/09/2026: a palavra flutuando (+ o brilho atrás dela) tava "batendo"/encostando na linha de
   texto de cima quando subia - pedido pra dar um respiro. Empurra a palavra um pouco pra baixo
   (margin-top) pra sobrar espaço entre ela e a linha acima. Pedido em seguida (mesma data): um
   terceiro efeito, a palavra "vindo pra frente" e crescendo um pouco ao mesmo tempo que sobe -
   junta um scale() no mesmo transform do sobe/desce (já que os dois têm que acontecer juntos, no
   mesmo keyframe). O brilho (::before) é filho de .text-accent, então cresce junto
   automaticamente, sem precisar de nada a mais.
   Pedido em seguida (mesma data): com o scale() junto, o sobe/desce quase não dava pra notar mais
   (as duas pontas da palavra "crescem" pro lado de fora ao mesmo tempo que ela sobe, então o
   olho lê mais como "aumentando de tamanho" do que "subindo e descendo"). Subido o curso de volta
   pra 10px (era 6px) só nessa versão com scale, pra o movimento voltar a ficar bem visível mesmo
   com o crescimento acontecendo junto - o respiro de espaço já existe por causa do margin-top
   acima, então não volta a bater na linha de cima. */
/* Pedido em seguida (10/09/2026): "bota o nome papel mudando de cor igual a virgula na mesma
   forma" - a palavra "papel" (.text-accent) ganha a mesma troca de cor branco/dourado que a
   interrogação (heroPunctSwing) já usa, com os MESMOS valores de cor (branco #fff <-> dourado
   var(--accent)) - só a cor entra num keyframe novo (heroPapelColorFloat), mantendo o
   flutuar/escala que já existia (heroAccentFloat) intactos, no mesmo ciclo de 4s. Criado um
   keyframe separado (em vez de editar heroAccentFloat direto) porque esse keyframe também é
   usado em outro lugar do site (.stat b, mais abaixo) que não deve ganhar a troca de cor. */
/* Ajustado em 10/09/2026: "ainda n ta fluido tenta ver isso tambem" - mesmo depois de sincronizar
   os ciclos e aumentar o ângulo, o movimento (aqui + heroPunctSwing logo abaixo) ainda passava uma
   sensação de "pausa e depois um salto" no pico/nas pontas do ciclo em vez de fluir direto. O motivo:
   só existiam 2 estados (0%/50%/100%), então o navegador tinha que interpolar sozinho o "caminho"
   inteiro entre virar pra um lado e virar pro outro, com um ease-in-out - isso faz o giro
   desacelerar até quase parar bem no meio do trajeto (a transição de cor junto). Adicionados dois
   pontos intermediários (25%/75%, exatamente no meio do trajeto entre as pontas, cor no meio do
   caminho entre branco e dourado) e trocado o timing pra linear - com mais pontos descrevendo a
   curva, o linear entre eles reproduz um movimento tipo onda contínua, sem a desaceleração dupla
   que um único ease-in-out entre só 2 pontos causava. Os valores de cor nos novos pontos (25%/75%)
   são os MESMOS nos dois keyframes (aqui e heroPunctSwing), pra manter a troca de cor sincronizada
   entre "papel" e a interrogação. */
/* Revertido em 11/09/2026: "ajuste esse zoom q ta meio travando do nome papel" - o linear com
   pontos em 25%/75% (ajuste acima) resolveu a sincronia com a interrogação, mas fez o PULSO DE
   ESCALA (o "zoom" do scale()) parecer mecânico/travado - com velocidade constante entre cada
   ponto e só 4 trechos retos, dava pra perceber uma leve "quebrada" de ritmo a cada 25% do ciclo
   (mais perceptível na escala/zoom do que seria numa cor, já que o olho pega variação de tamanho
   mais fácil). Voltado pro padrão simples de 2 pontos (0%/50%/100%) com ease-in-out - o mesmo
   esquema usado em heroAccentFloat/heroTitleZoom (os outros "zooms" do hero, nunca reclamados) -
   que desacelera suavemente perto do pico em vez de andar reto e mudar de direção de repente. A
   troca de cor continua sincronizada com a interrogação porque as DUAS (aqui e heroPunctSwing)
   voltaram a usar exatamente o mesmo esquema (0%/50%/100%, mesma duração, mesmo timing). */
.js .hero-content h1 .text-accent { display: inline-block; margin-top: 0.22em; animation: heroPapelColorFloat 4s ease-in-out infinite; }
@keyframes heroAccentFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.06); } }
@keyframes heroPapelColorFloat {
  0%, 100% { transform: translateY(0) scale(1); color: #fff; }
  50% { transform: translateY(-10px) scale(1.06); color: var(--accent); }
}

/* Pedido em 10/09/2026: animação também na parte branca do título do hero ("Vamos tirar sua
   ideia do"), tipo um "zoom" - um pulso bem sutil de escala, pra combinar com a palavra
   dourada que já flutua/brilha ao lado. Span (.hero-title-white) vem do server
   (server/routes/public.js, heroHeadlineHtml) já que esse texto é editável pelo painel. */
.js .hero-content h1 .hero-title-white { display: inline-block; animation: heroTitleZoom 5s ease-in-out infinite; }
@keyframes heroTitleZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* Pedido do usuario (11/09/2026): "em filmes deixa na coluna junto, o atual ta filmes
   sozinho" - a palavra logo antes da dourada e a palavra dourada (ambas "inline-block", que
   e obrigatorio pra animacao de zoom/piscada funcionar) podiam ir cada uma pra uma linha
   diferente no celular, ja que um elemento inline-block sempre quebra de linha inteiro (nao
   adianta só um espaço não-quebrável entre eles - testado, nao resolvia). Esse span extra
   (gerado em server/routes/public.js, heroHeadlineHtml) embrulha as duas palavras junto com
   "white-space: nowrap", virando um único bloco atômico que só pode ir inteiro pra sua
   própria linha - nunca quebrando as duas palavras em linhas separadas. */
.hero-content h1 .hero-title-join { display: inline-block; white-space: nowrap; }
/* Pedido do usuario (11/09/2026): "o nome (em) n ta dando zoom" - "em" tem só 2 letras, entao
   o mesmo pulso de escala (heroTitleZoom) que já rodava nela ficava praticamente invisível
   (2,5% de um texto tão curto é menos de 1px de diferença) - dava pra ver no resto da frase
   (bem mais larga) mas não nela sozinha. Solução: em vez de cada palavra dentro do bloco
   ".hero-title-join" (em + filmes) fazer seu próprio zoom sozinha, o zoom passa a rodar no
   bloco inteiro de uma vez (as duas palavras juntas, que já ficam sempre grudadas por causa
   do "white-space: nowrap" acima) - o bloco "em filmes" fica bem mais largo que só "em"
   sozinho, entao o mesmo pulso de 2,5% vira um movimento bem mais visível. As animações
   individuais de "em" (zoom) e "filmes" (zoom) são desligadas aqui dentro pra não dobrar o
   efeito (ficaria um zoom do bloco + outro zoom por cima, meio "tremido") - a piscada de
   "filmes" (heroOffAirFlicker, que é só opacidade, não escala) continua normal, sem conflito.
   Também pedido nessa hora: "coloque tambem espaçamento entre as palavras pq tao colada uma
   na outra" - primeira tentativa foi só um respiro extra (margin-right) na palavra "em", mas
   ficou UM espaçamento maior só entre "em" e "filmes", diferente do resto da frase ("essa
   parte vc separou, o resto n" - pedido em seguida) - trocado por um "word-spacing" no
   título inteiro (regra ".hero-content h1" logo abaixo), que aumenta o espaço entre TODAS as
   palavras igualmente (incluindo "em"+"filmes", já que o &nbsp; entre elas conta como espaço
   pro word-spacing também) - agora o espaçamento fica igual a frase inteira. */
.js .hero-content h1 .hero-title-join { animation: heroTitleZoom 5s ease-in-out infinite; }
.js .hero-content h1 .hero-title-join .hero-title-white { animation: none; }
.js .hero-content h1 .hero-title-join .text-accent { animation: heroOffAirFlicker 2.2s steps(1) infinite; }
.hero-content h1 {
  font-family: 'Hanken Grotesk', var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Pedido do usuario (11/09/2026): "essa parte da frase ainda vc n separou as palavras" /
   "em filmes vc separou, o resto n" - as palavras do titulo (fonte bem bold/pesada) ficavam
   com pouco respiro entre uma e outra. Espaçamento extra entre TODAS as palavras da frase de
   uma vez só (word-spacing conta espaço normal e o &nbsp; usado entre "em" e "filmes" tambem,
   entao a frase inteira fica com o mesmo respiro, sem tratamento diferente em nenhuma parte). */
.hero-content h1 { word-spacing: 0.22em; }
/* Pedido do usuario (11/09/2026): titulo bem menor que o original (referencia enviada:
   titulo moderado, proporcional ao resto da tela, nao gigante), quebrando em exatamente
   2 linhas tanto no PC quanto no celular ("deixa a frase apenas com duas linhas ta 3
   linhas"). Tamanho fluido (clamp) testado e aprovado em previa local nesses valores.
   overflow-wrap/word-break: trava de seguranca pra nenhuma palavra comprida (ex.:
   "TRANSFORMAMOS") nunca mais estourar a borda da tela, o que ja acontecia antes disso
   no celular com o tamanho fixo antigo. */
.hero-content h1 {
  font-size: clamp(1.1rem, 3.6vw, 2.5rem);
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero .btn-row { justify-content: center; }
/* Pedido do usuario (11/09/2026): "a parte ver portifolio e entrar em contato abaixa mais
   um pouco" - os botoes ficavam bem colados no titulo (o h1 so tem 0.4em de margem embaixo,
   que agora e pouco por causa da fonte bem menor do titulo). Empurrado mais espaco entre o
   titulo e os botoes, so no desktop.
   Pedido em seguida: "abaixa mais o ver portfolio e entrar em contato deixa tambem meno
   ambos" - ainda estava perto demais do titulo, empurrado mais um pouco (28px -> 48px), e os
   dois botoes ficam um pouco menores (menos padding e fonte menor), so no desktop - o celular
   ja tem seu proprio tamanho reduzido aqui embaixo, dentro do @media (max-width:720px).
   Pedido de novo (11/09/2026): "ver portifolio e entra em contato abaixa mais um pouco" -
   empurrado mais uma vez (48px -> 64px), so no desktop. */
.hero .btn-row { margin-top: 64px; }
.hero .btn-row .btn { padding: 11px 22px; font-size: 0.72rem; }
/* Pedido do usuario (11/09/2026): "deixa o texto da frase transformamos momentos reais em
   filmes todo branco sem efeitos ta" - tira a cor dourada da palavra "filmes" e desliga
   todas as animacoes do titulo (zoom sutil da parte branca, flutuar/trocar de cor de
   "filmes", brilho dourado atras dela, clarao de camera) - frase toda branca e parada.
   Pedido em seguida: "o nome filme vc pode deixar piscando tipo fora de ar com variacao
   bem rapida" - piscada rapida testada e publicada, mas revertida no pedido seguinte.
   Pedido em seguida: "deixa o Filmes branco com o fundo com a luz dourada mais so dar o
   efeito de zoom igual o restante apenas isso" - piscada trocada por zoom + brilho dourado
   (::before) - versao que ficou no ar por um tempo, revertida no pedido seguinte.
   Pedido em seguida (o que fica valendo agora): "deixa o nome filmes igual a fonte da frase
   transformamos pq parece que ela nao ta igual" - analisando: a fonte (Poppins 700) sempre
   foi a mesma nas duas partes (herdada do h1), mas "filmes" tinha um contorno fino preto
   (-webkit-text-stroke) + uma sombra dupla só nela (de quando a palavra se chamava "papel"),
   que "transformamos" nunca teve - isso fazia ela parecer com um "peso"/acabamento diferente.
   Zerado o contorno e igualada a sombra de "filmes" a mesma do resto do titulo, pra ficar
   visualmente identica.
   Pedido em seguida: "apenas no nome filmes deixa piscando tipo sinal fora do ar indo e
   voltando bem rapido" - tira o zoom e o brilho dourado de novo, "filmes" volta a piscar
   (opacidade variando rapido e sem ritmo fixo, tipo sinal de TV perdendo sinal), continuando
   branca e com a mesma fonte/sombra do resto.
   Pedido em seguida: "deixa com a mesma fonte e em bold" - a fonte/peso (Poppins 700) ja
   era herdado do h1 e igual ao resto, mas forcado aqui tambem, explicito, pra garantir 100%
   de certeza que nao tem nada sobrepondo com peso diferente. */
/* Pedido do usuario (11/09/2026): "coloca o nome filmes dourado" - troca de volta a cor de
   "filmes" pra dourado (mesmo tom da marca, var(--accent)), mantendo tudo mais igual (fonte,
   peso, sombra) - so a cor muda. A piscada (heroOffAirFlicker, mais abaixo) continua funcionando
   normal por cima (ela mexe só na opacidade, não na cor). */
.hero-content h1 .text-accent {
  color: var(--hero-accent-color, var(--accent));
   font-family: 'Poppins', var(--font-body);
  font-weight: 700;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.65);
}
/* Pedido em seguida: "pisque um pouco menos o nome filmes" - tinha 5 blocos de piscada por
   ciclo (a cada ~1,1s), ficando quase sem parar - reduzido pra 2 blocos por ciclo e o ciclo
   alongado (1,1s -> 2,2s), pra piscar com menos frequencia, continuando rapido/seco quando
   pisca (steps(1), sem suavizar).
   Pedido em seguida: "seguindo o movimento de ir pra frente tipo zoom tambem" - alem da
   piscada, "filmes" ganha tambem o MESMO pulso de zoom/escala que a parte branca do titulo ja
   tem (heroTitleZoom) - duas animacoes juntas (opacidade + escala), cada uma no seu proprio
   ritmo, sem uma atrapalhar a outra. */
.js .hero-content h1 .text-accent { animation: heroOffAirFlicker 2.2s steps(1) infinite, heroTitleZoom 5s ease-in-out infinite; }
@keyframes heroOffAirFlicker {
  0%, 100% { opacity: 1; }
  38% { opacity: 1; }
  40% { opacity: 0.2; }
  42% { opacity: 1; }
  44% { opacity: 0.15; }
  46% { opacity: 1; }
  78% { opacity: 1; }
  80% { opacity: 0.25; }
  82% { opacity: 1; }
}
/* Pedido do usuario (11/09/2026): "coloca uma pelicula mais escura de fundo em degrade atras
   das letras" - entendido a princípio como um degrade só atrás do bloco de texto (::before no
   h1), mas causou um contorno/caixa visivel por cima da foto. Esclarecido em seguida: "o
   degrade que falei foi no fundo pegando a minha foto toda, e nao no texto" - o pedido e pra
   escurecer mais o FUNDO INTEIRO (a foto/video do hero), nao uma caixa atras do titulo. Removido
   o ::before daqui (nao e mais usado) - o ajuste de escurecimento entra direto no gradiente que
   ja cobre o hero inteiro (.hero-media::after, mais acima no arquivo).*/
/* Pedido em 10/09/2026: análise crítica dos efeitos do hero (do ponto de vista de cliente/
   produtor/marca) - conclusão foi que tinha efeito demais rodando ao mesmo tempo no título,
   competindo entre si e passando impressão de "poluído" em vez de profissional. Pedido em
   seguida: "faz e me joga no ar pra eu ver se melhorou" - cortados os efeitos abaixo:
   - "perdendo sinal" (heroSignalGlitch, no h1 inteiro) - cortado inteiro.
   - brilho azul de tempestade atrás do título (heroStormFlash, ::before) - cortado inteiro
     (cor fria destoava da paleta quente da marca, e ficava difícil de perceber por trás do
     próprio clarão de câmera que ficou).
   - balanço em 3D da interrogação de "papel?" e da palavra "ideia" (heroPunctSwing, usada em
     .hero-punct e .hero-highlight-word) - cortado inteiro, as duas voltam a ficar paradas.
   Mantidos: a palavra "papel" com seu flutuar/brilho (heroAccentFloat) e o pulso sutil de escala
   no título branco (heroTitleZoom) - únicos movimentos que sobram no título, mais discretos e
   sem concorrer entre si. O clarão de câmera (::after, logo abaixo) foi mantido mas reformulado:
   de infinito pra um único disparo (só na entrada da página, some e não volta mais) e de branco
   pra um tom dourado/quente, combinando com a cor da marca em vez de destoar. */
/* Pedido em 10/09/2026 (histórico, efeito já removido): "bota algum efeito por tras das letras
   tipo de tempestade pra ver se melhora" deu origem ao clarão azul (heroStormFlash) e ao raio
   ramificado que vieram depois - ambos removidos na limpeza acima; o clarão de câmera abaixo é
   o único que sobrou dessa linha de pedidos, agora em dourado e de disparo único.
   Pedido em seguida (10/09/2026): "no lugar dos raios coloca um flash de camera tipo paparazzo" -
   os raios (SVG com galhos ramificados, que chegaram a ser redesenhados 3x seguindo uma foto de
   referência e depois pra se espalhar pelas 3 linhas do título) foram tirados e substituídos por
   um clarão simples (radial-gradient, sem desenho) que estoura rápido bem na hora da piscada.
   Pedido em seguida (10/09/2026): "gostei mais tira bastante a intensidade e deixe mais direto sem
   ser espalhado, ta exagerado" - o clarão era grande demais (ellipse de 70%/85%) e forte demais
   (pico de opacidade 0.85). Encolhido (ellipse de 32%/38%) e enfraquecido bastante.
   Pedido em 10/09/2026 (análise crítica + "faz e me joga no ar"): convertido de loop infinito
   (a cada 5s, pra sempre) pra um disparo único (só uma vez, logo na entrada da página, ~1,8s
   depois de carregar - mesma janela usada pelos outros efeitos, já depois da cortina preta
   terminar) - um flash repetindo sem parar o tempo todo cansa e chama atenção demais pro efeito
   em vez do título; uma vez só na entrada dá um toque de "boas-vindas" sem virar irritante.
   Cor trocada de branco puro pra um dourado/creme suave (mesma família de tom do --accent/
   dourado da marca), pra reforçar a identidade em vez de introduzir uma cor nova (branco/azul)
   que não tinha nada a ver com o resto. */
/* Pedido em seguida (10/09/2026): depois do corte geral acima, pediu pra voltar SO essa parte -
   "a interrogacao balancando e mudando de cor bote deixar como tava" - heroPunctSwing restaurado
   na interrogação de "papel?" (.hero-punct), do jeito que era antes do corte (balanço tipo
   pêndulo com perspective()/rotateY, trocando de cor branco/dourado ao longo do ciclo). A palavra
   "ideia" (.hero-highlight-word), que usava essa mesma animação, continua parada por enquanto -
   só a interrogação foi pedida de volta aqui. */
/* Ajustado em seguida (10/09/2026): "tenta deixar o branco da virgula ciclonizado com o branco do
   nome papel no momento q vai pra frente" - a interrogação girava num ciclo de 3.6s e "papel"
   (heroPapelColorFloat) num ciclo de 4s, então as duas trocavam de cor fora de sincronia (iam
   ficando branco/dourado em momentos diferentes, derivando uma da outra com o tempo). Igualado o
   ciclo da interrogação pra 4s também (igual ao de "papel"), sem delay em nenhum dos dois - assim
   as duas ficam brancas e douradas exatamente juntas, sempre.
   Pedido em seguida (mesma data): "analise esse movimento parece que n ta fluido, pode chegar mais
   pra frente tem espaco" - o giro em 3D da interrogação (rotate/rotateY) tava com ângulo meio
   curto pertinho do "papel" (sobra espaço em branco ao lado dela no título) - aumentado o ângulo
   (rotate de 7deg pra 10deg, rotateY de 22deg pra 32deg) pra ela girar mais pra frente/aproveitar
   melhor esse espaço, ficando um movimento mais evidente e fluido em vez de um balanço curtinho. */
/* Ajustado em 10/09/2026 (ver comentário completo no heroPapelColorFloat, acima): mesmo ajuste de
   fluidez aqui - dois pontos novos no meio do trajeto (25%/75%, ângulo neutro/zerado, cor no meio
   do caminho entre branco e dourado, IGUAL ao heroPapelColorFloat pra manter a sincronia) e timing
   trocado de ease-in-out pra linear, pra o giro correr contínuo em vez de desacelerar/"pausar" no
   meio do balanço. */
/* Ajustado em 10/09/2026: "a movimentacao ainda ta engasgando e estranha do nome papel com a
   interrogacao... ela ta achatando ta esquisito" - o ajuste acima (25%/75% + linear) resolveu a
   sincronia mas não a causa raiz do "achatando"/engasgado: o .hero-punct ainda misturava rotate()
   (giro 2D no eixo Z, tipo pêndulo) com rotateY() (giro 3D no eixo Y) AO MESMO TEMPO, com uma
   perspective(300px) bem próxima. Girar nos dois eixos ao mesmo tempo faz o navegador desenhar uma
   rotação composta que não é um giro "rígido" simples - o "?" visivelmente distorce/achata (efeito
   de cisalhamento) no meio do percurso, em vez de só virar de lado. Esse MESMO problema já tinha
   acontecido com a palavra "ideia" antes (ver comentário mais abaixo, em heroIdeiaSwing) e foi
   resolvido lá tirando o rotate() e deixando só o rotateY() - aplicado aqui o mesmo tratamento:
   rotate() removido, sobrou só o giro em torno do eixo vertical (rotateY), que é um giro "de
   verdade" sem distorcer o formato da letra. transform-origin trocado de 50% 85% (base do "?",
   só fazia sentido pro rotate() de pêndulo que saiu) pra 50% 50% (centro, mesmo padrão do
   heroIdeiaSwing) já que só sobrou o giro em Y. Ângulo mantido em 32deg (era o valor pedido antes
   em "tem espaço") - só o eixo que mudou, não o quanto ela gira. */
/* Ajustado em 10/09/2026 (mesmo dia, segunda rodada): "ainda continua e a virgula vc tirou a
   animacao q tava" - o ajuste acima (só rotateY, sem rotate) não resolveu: o navegador SEMPRE
   distorce um pouco um glifo 2D (a fonte é desenhada plana) quando gira ele em 3D com
   perspective() - reduz a "espessura" aparente do "?" de um jeito que lê como achatado, MESMO sem
   nenhum rotate() misturado junto (o rotateY() sozinho já causa isso, por conta própria). E pra
   piorar, sem o rotate() (que era o que dava a impressão clara de "balançando de lado a lado"), o
   giro em Y sozinho ficou sutil demais no "?" (glifo fino, pouca "área" pra mostrar o giro 3D) -
   leu como se a animação tivesse sumido, igual já tinha acontecido com "ideia" lá atrás.
   Solução: tirado TODO o giro 3D (perspective() e rotateY() removidos) - sobrou só rotate() puro
   (giro 2D no eixo Z). Rotação 2D pura NUNCA distorce o formato de nada (é uma transformação
   rígida - só gira, não estica nem achata, matematicamente), então resolve o achatamento de vez;
   e como é um pêndulo balançando de lado a lado (bem mais perceptível que o giro 3D sutil que
   tinha ficado), aumentado um pouco o ângulo (de 10deg pra 14deg) pra compensar a "profundidade" do
   3D que saiu e manter o movimento bem visível. transform-origin voltou pra 50% 85% (perto da base
   do "?", pra girar feito um pêndulo pendurado, igual era antes de entrar o rotateY). */
/* Ajustado em 11/09/2026: "deixa a animacao da virgula animada igual o primeiro projeto q vc fez
   balancando de forma 3d" - pedido pra voltar o giro 3D (em vez do rotate() 2D puro do ajuste
   acima). O problema do achatamento antes não era rotateY() em si - era rotateY() num ÂNGULO
   GRANDE (32deg) com uma perspective() bem próxima (300px), forte demais pro glifo fino do "?".
   Voltado o giro 3D (perspective + rotateY, sem rotate() - continua sem misturar os dois eixos,
   que é o que causava a distorção mais feia), mas com valores bem mais moderados: 22deg (era
   32deg) e perspective(240px) (era 300px, então uma perspectiva um pouco mais "aberta"/menos
   dramática) - parecido com o giro 3D da palavra "ideia" (heroIdeiaSwing, mais abaixo: 16deg/220px)
   que nunca teve reclamação de achatamento, só um pouco mais forte já que aqui é só um caractere
   (compensa não ter tanta "área" pra mostrar o giro). transform-origin voltou pra 50% 50% (centro),
   já que só sobrou o giro em Y de novo. Keyframes voltados pra só 2 pontos (0%/50%/100%) com
   ease-in-out em vez de 25%/75%+linear (mesmo motivo do ajuste no heroPapelColorFloat, acima: o
   esquema mais simples é o que a palavra "ideia" já usa sem problema, e evita o "zoom"/giro parecer
   mecânico) - "papel" (heroPapelColorFloat, acima) foi ajustado igual no mesmo pedido, pros dois
   continuarem trocando de cor exatamente juntos (mesma duração 4s, mesmo timing, mesmos pontos). */
.hero-content h1 .hero-punct { margin-left: 0.12em; display: inline-block; transform-origin: 50% 50%; }
.js .hero-content h1 .hero-punct { animation: heroPunctSwing 4s ease-in-out infinite; }
@keyframes heroPunctSwing {
  0%, 100% { transform: perspective(240px) rotateY(-22deg); color: #fff; }
  50% { transform: perspective(240px) rotateY(22deg); color: var(--accent); }
}
/* Pedido em 11/09/2026: "coloca uma animacao nessa interrogacao q fique bonita com esse efeito" /
   depois esclarecido: "o efeito 3d da interrogacao pra mudar" - tentado um brilho dourado
   pulsando atrás do "?" (::before), sincronizado com o pico de cor do giro (mesma receita visual
   do brilho de "papel"). Desfeito em seguida (mesmo dia): "tira isso, vc fez, n gostei, deixa
   como tava antes" - o brilho não agradou, revertido por completo (::before, keyframe
   heroPunctGlow e o position:relative/z-index que só existiam pra sustentar ele removidos) -
   heroPunctSwing volta a ser só o giro 3D (perspective+rotateY) + troca de cor, sem brilho extra,
   do jeito que estava antes desse pedido. */
/* Pedido em seguida (10/09/2026): "deixa a palavra ideia se balancando bem de leve estilo como
   tava antes mais um pouco lenta e bem sutil permanecendo a mesma cor branca" - a palavra "ideia"
   (.hero-highlight-word) ganha de volta um balanço, mas BEM mais discreto que o heroPunctSwing da
   interrogação: ângulos bem menores, ciclo mais lento (5.5s em vez de 3.6s) e SEM troca de cor -
   fica branca o tempo todo (cor não entra no keyframe), já que foi pedido explicitamente pra
   manter a mesma cor branca.
   Ajustado em seguida (mesmo dia): "n seria pra cima e pra baixo o movimento queria tipo girando
   um 3d mais levemente" - a primeira versão misturava rotate() (inclinar tipo pêndulo, lado a
   lado) com rotateY() (giro 3D), e o rotate() em ângulo pequeno tava lendo mais como um "balançar
   pra cima e pra baixo" do que como um giro. Tirado o rotate(), sobrou só o rotateY() (giro em
   torno do eixo vertical, tipo a palavra virando de leve pro lado, mostrando "menos largura" no
   meio do giro) - mais leve que antes (8deg) e mais claro como um giro em 3D mesmo, sem parecer
   balanço vertical.
   Ajustado em seguida (mesmo dia): "o nome ideia n ta girando 3d levemente vc tirou, quero 3d bem
   de leve meio girando" - o giro de 7deg com perspective(300px) ficou sutil demais, quase
   imperceptível (o usuário achou que o efeito tinha sumido de vez). Aumentado o ângulo pra 16deg
   e a perspectiva aproximada pra 220px (perspectiva mais perto = giro mais "puxado"/visível no
   mesmo ângulo), e o ciclo acelerado um pouco (5.5s pra 4,2s) - continua um giro 3D leve, mas
   agora dá pra perceber de verdade sem precisar prestar atenção. */
.hero-content h1 .hero-highlight-word { display: inline-block; transform-origin: 50% 50%; }
.js .hero-content h1 .hero-highlight-word { animation: heroIdeiaSwing 4.2s ease-in-out infinite; }
@keyframes heroIdeiaSwing {
  0%, 100% { transform: perspective(220px) rotateY(-16deg); }
  50% { transform: perspective(220px) rotateY(16deg); }
}
/* Pedido do usuario (11/09/2026): "em 4 segundo q entro na pagina aparece uma luz bem debaixo
   de momentos tira ela ver se n e bug" - achado: era esse "clarão de câmera" (heroCameraFlash),
   um flash único de luz quente que disparava sozinho ~1,7s depois da página carregar. Como o
   ::after cobre o título INTEIRO (as duas linhas: "transformamos...em" + "filmes"), o brilho
   ficava centralizado no meio do bloco (50% 45%) - ou seja, bem na altura de "momentos"/na
   emenda entre as duas linhas, não atrás de "filmes" como o usuário queria - por isso
   parecia fora de lugar/"errado". Removido de vez (o efeito nunca tinha sido pedido em si,
   era só uma ideia testada antigamente e esquecida ligada). */
.hero-content h1::after { display: none; }
.hero-content .lead { font-size: 1.15rem; max-width: 560px; color: var(--fg-muted); }

/* 10/09/2026: pedido pra deixar a fonte do titulo do hero com cantos mais arredondados/mais
   bonita - trocada so aqui (o resto do site continua com Hanken Grotesk) por Outfit, que tem
   esse acabamento mais suave/arredondado nas letras mantendo o peso bem forte (800) que o
   titulo já tinha. Fonte importada la no <head> (server/render.js), junto com as outras do site. */
.hero-content h1 {
  /* Pedido em seguida (10/09/2026): trocar a fonte do titulo pra Impact. Impact é
     fonte do sistema (não existe no Google Fonts) - então ela é usada quando o aparelho já
     tem ela instalada (comum em Windows/Mac), e "Anton" (importada la no <head>, mesmo
     "espirito" de fonte super grossa/condensada) entra como alternativa em aparelhos que não
     tem a Impact (ex: a maioria dos celulares Android).
     Pedido em seguida: sem bold - peso normal (400) em vez de bold/700.
     Pedido em seguida: Impact achada "muito quadrada" - trocada pra Poppins (ExtraBold/800),
     mais arredondada e parecida com as outras fontes do site (importada la no <head>,
     server/render.js).
     Pedido em seguida: essa fonte (Poppins) também sem bold - volta peso normal (400).
     Pedido em seguida: normal ficou fino demais - pediu "sem ser extra bold, manda só a
     bold" - peso 700 (Bold), nem o 400 nem o 800/ExtraBold de antes. */
  font-family: 'Poppins', var(--font-body);
  font-weight: 700;
  /* Sombra colada só na letra (bem pertinho, sem "espalhar" pra imagem de fundo).
     Pedido em seguida (10/09/2026): tinha virado um contorno bem marcado (4 sombras 1px
     solidas + text-stroke) - pedido pra tirar o contorno e deixar so uma sombra suave/sutil
     por baixo da letra, sem essa linha dura ao redor. */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.65);
}
/* Pedido do usuario (11/09/2026): "deixa essa frase um pouco desfocado ... so um pouco" - um
   desfoque BEM sutil no titulo inteiro, so pra dar um acabamento mais suave/cinematico (nao pra
   dificultar a leitura). Pedido em seguida: "quero mais desfocada ainda" - aumentado de 0.6px
   pra 1.4px. Pedido em seguida: "bota um pouco menos desfocada" - reduzido pra 1px. Pedido em
   seguida: "ta demais desfocado, deixa algo mediana" - reduzido de novo, pra 0.7px (entre o
   0.6px bem sutil do inicio e o 1px que ainda estava forte demais pro usuario). Pedido em
   seguida: "coloca mais um pouco" - aumentado de novo, pra 0.9px. Pedido em seguida: "coloca
   mais desfoque" - aumentado de novo, pra 1.2px. Pedido em seguida: "coloca mais um pouco" -
   aumentado de novo, pra 1.4px. Pedido em seguida: "ainda n sinto diferenca, consegue colocar
   1.7?" - aumentado pra 1.7px. Pedido em seguida: "coloca 2.0 pq ainda n vejo desfoque" -
   aumentado pra 2px. Pedido em seguida: "coloca 1.7px o desfoque" - reduzido de volta pra
   1.7px. Pedido em 17/09/2026: "deixa um pouco mais focado tanto no pc tanto no cel" -
   reduzido de 1.7px pra 1px (celular ajustado na mesma proporcao, ver @media mais abaixo). */
.hero-content h1 { filter: none; }
/* Pedido do usuario (11/09/2026): "ver se toda frase ta com a mesma fonte e mesmo tamanho pq
   parece q o nome filmes ta mais fino quero bold igual o restante" - achado o motivo de
   verdade: existia AINDA um resto da época em que essa palavra se chamava "papel" (contorno
   -webkit-text-stroke de 0.35px preto + uma sombra dupla só nela), que ficou esquecido mais
   embaixo no arquivo depois que a correção de fonte/sombra já tinha sido feita lá em cima
   (regra ".hero-content h1 .text-accent" perto da piscada, mais acima nesse arquivo) - como
   as duas regras tem a MESMA especificidade, essa aqui (que vinha depois no arquivo) ganhava
   e reintroduzia o contorno escondido, fazendo "filmes" parecer mais fino/com um acabamento
   diferente de "transformamos". Bloco removido de vez (a regra correta, sem contorno e com a
   MESMA sombra do resto do título, já existe mais acima e continua valendo sozinha). */

/* Luz dourada pulsando por trás da última palavra do título (ex: "papel") - pedida pelo usuário.
   Um brilho suave (radial-gradient com blur) atrás do texto, sempre "vivo" (pulsa infinito,
   mesma família das outras animações contínuas do site). Usa ::before no próprio .text-accent
   (que já é inline-block) pra não precisar calcular posição/tamanho em JS: o brilho acompanha
   sozinho o tamanho da palavra, mesmo esse texto sendo editável pelo painel. */
.hero-content h1 .text-accent { position: relative; z-index: 1; }
.hero-content h1 .text-accent::before {
  content: '';
  position: absolute;
  /* Assimétrico de propósito: bem menos brilho subindo (pra não encostar na linha de cima) e um
     pouco mais descendo/nas laterais, já que agora a palavra tem margin-top pra separar. */
  inset: -8% -8% -20% -8%;
  z-index: -1;
  border-radius: 50%;
  /* Pedido em 10/09/2026: luz mais forte/brilhante pra destacar mais a palavra - cores mais
     opacas e o brilho se espalhando um pouco mais (45%->52%, 70%->78%) antes de sumir. */
  background: radial-gradient(ellipse at center, rgba(255, 224, 140, 0.7) 0%, rgba(246, 196, 69, 0.32) 52%, rgba(246, 196, 69, 0) 78%);
  filter: blur(7px);
  pointer-events: none;
}
/* Pedido em 11/09/2026: tentativa de fazer a cor da luz trocar em sincronia (invertida) com a
   cor do texto de "papel" - primeiro branco no pico, depois testado preto no lugar do branco "pra
   ver como ficava", e suavizada a transição entre as cores (pontos intermediários misturados).
   Desfeito em seguida, no mesmo dia: "deixa so a luz dourada mesmo de fundo como tava antes" - o
   usuário não gostou do resultado da luz trocando de cor, então toda essa linha de experimentos
   foi revertida - a luz volta a ser SÓ dourada o tempo todo (nem branca nem preta, sem trocar
   junto com o texto), pulsando só em opacidade/escala, exatamente como era antes de todos esses
   pedidos (mesmos 3.2s de duração de antes, já que o motivo de ter mudado pra 4s - sincronizar a
   cor com heroPapelColorFloat - deixou de existir). */
.js .hero-content h1 .text-accent::before {
  animation: heroGlowPulse 3.2s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-content h1 .text-accent::before { animation: none; opacity: 0.85; }
}
/* Pedido do usuario (11/09/2026): "filmes" voltou a piscar + zoom (ver comentario mais acima)
   - sem o brilho dourado dessa vez, entao essa regra precisa vir DEPOIS da regra do
   heroGlowPulse logo acima (mesma especificidade - quem vem por ultimo no arquivo manda) pra
   realmente desligar o brilho, em vez de ser sobrescrita por ela. */
.js .hero-content h1 .text-accent::before { animation: none; opacity: 0; }
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-muted);
}
.hero-scroll .line { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---------- Secoes gerais ---------- */
section { padding: 110px 0; position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head .lead { max-width: 480px; margin: 0; }
.alt-bg { background: var(--bg-alt); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: perspective(900px) translateY(66px) rotateX(11deg) scale(0.92); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in-view { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg) scale(1); }
.reveal-delay-1.in-view { transition-delay: 0.08s; }
.reveal-delay-2.in-view { transition-delay: 0.16s; }
.reveal-delay-3.in-view { transition-delay: 0.24s; }

.js .pulse-in { animation: pulseIn 0.9s var(--ease) both; }
@keyframes pulseIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ---------- Grid de trabalhos / portfolio ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 4px;
}
.work-card {
  position: relative;
  overflow: hidden;
  grid-column: span 3;
  grid-row: span 2;
  background: var(--bg-card);
  display: block;
}
.work-card:nth-child(5n+1) { grid-column: span 4; grid-row: span 3; }
.work-card:nth-child(5n+2) { grid-column: span 2; grid-row: span 2; }
.work-card:nth-child(5n+3) { grid-column: span 2; grid-row: span 3; }
.work-card:nth-child(5n+4) { grid-column: span 4; grid-row: span 2; }
.work-card:nth-child(5n+5) { grid-column: span 3; grid-row: span 2; }
.work-card.tall { grid-column: span 3; grid-row: span 3; }
.work-card.wide { grid-column: span 4; grid-row: span 2; }
/* Card do "Projeto em destaque" da Home (fora do grid dos outros cards, sozinho dentro do
   .container) - proporcao de cinema (21:9) no desktop. Antes era um style="aspect-ratio:21/9"
   direto no HTML; virou classe pra dar pra ter um valor diferente so no celular (ver
   @media max-width:720px mais abaixo) - inline style nunca e vencido por media query nenhuma. */
.work-card.home-featured-card { aspect-ratio: 21/9; }
/* Trocado de "contain" pra "cover" em 04/09/2026: com contain, uma foto de capa vertical
   (retrato) dentro de um card horizontal (largura maior que altura, que é como boa parte dos
   cards nascem no grid) sobrava espaço vazio nas laterais, preenchido pelo fundo escuro do
   card (--bg-card) - aparecia como uma "barra cinza". Com cover a foto sempre preenche o
   card inteiro (cortando um pouco as bordas quando preciso), do jeito que já funcionava só
   no celular (ver regra @media max-width:720px mais abaixo, que agora é redundante mas foi
   deixada como está por segurança). */
.work-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.6s ease;
  filter: grayscale(30%) brightness(0.85);
}
.work-card:hover img { transform: scale(0.98); filter: grayscale(0%) brightness(1); }
/* Prévia em vídeo nos cards do portfólio — pedido em 04/09/2026: ao passar o mouse (PC) ou quando
   o card entra na tela (celular), o card troca a foto de capa por um trechinho do vídeo do
   projeto tocando em loop, sem som. Foto e vídeo ficam empilhados exatamente um sobre o outro
   (mesmo tamanho do card); o vídeo nasce invisível (opacity:0) e só aparece quando o JS soma a
   classe .is-previewing (ver public/js/site.js) — sem JS, ou antes do JS decidir tocar, o
   visitante sempre vê só a foto normal, sem nenhum vídeo escondido nem "flash" de tela preta.
   Existe pra vídeo hospedado como arquivo direto (toca com <video> nativo) e também pra
   YouTube/Vimeo (toca com um iframe no "modo player de fundo" deles - ver previewVideoData() em
   routes/public.js); outros tipos de vídeo (Mega/Drive/link só) continuam só com o selo de play.
   .work-card-video é só a "moldura" (do tamanho do card); o vídeo/iframe de verdade nasce dentro
   dela só quando o JS decide tocar pela primeira vez, pra não carregar nada à toa. */
.work-card-cover, .work-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.work-card-video {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.work-card-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Um <iframe> não aceita object-fit (o vídeo lá dentro é controlado pelo player do YouTube/Vimeo,
   não pelo nosso CSS) — pra chegar perto do mesmo efeito de "preencher o card cortando as bordas"
   que o <video> nativo tem de graça, o iframe nasce um pouco maior que o card e centralizado; fica
   bom na maioria dos casos, mas sem a garantia de encaixe perfeito que o vídeo direto tem. */
.work-card-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  border: 0;
}
.work-card.is-previewing .work-card-video { opacity: 1; }
.work-card.is-previewing .work-card-cover { opacity: 0; }
.work-card.is-previewing .play { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .work-card-video { display: none; }
}
.work-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.88) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.work-card:hover .overlay { opacity: 1; }
.work-card .cat { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 6px; display: block; }
.work-card h3 { font-size: 1.3rem; margin: 0; }
.work-card .play {
  /* Antes só aparecia no hover (opacity:0 por padrão) - em celular/tablet (sem mouse) isso
     nunca acontece, então o card de um projeto com vídeo ficava parecendo só uma foto.
     Pedido do usuário em 03/09/2026: deixar sempre visível. Depois (03/09/2026) pedido de
     deixar centralizado no meio do card e mais animado/bonito, tanto no cel quanto no pc. */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(18,16,10,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,255,255,0.35);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
  animation: playPulse 2.6s ease-in-out infinite;
  color: #fff;
  z-index: 2;
}
.work-card .play svg:not(.play-ring) { width: 22px; height: 22px; margin-left: 3px; position: relative; z-index: 1; }
/* Pedido em 11/09/2026 junto com o redesign do .photo-hint (mais abaixo): "a do video a mesma
   coisa, ver o que pode fazer de forma incrivel" - anel dourado decorativo (playRingHtml() em
   routes/public.js) que se desenha sozinho (stroke-dasharray) e fica girando devagar em loop por
   trás do triângulo de play, pra dar o mesmo tratamento "pincelado em dourado" do selo novo dos
   cards só-foto e deixar o selo de play tambem mais vivo/premium. Brilho pulsante do selo (abaixo)
   trocado de branco pra dourado no mesmo pedido, pra reforçar essa cor em todo o selo. */
.work-card .play-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.work-card .play-ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 176;
  transform-origin: 50% 50%;
  animation: playRingDraw 3.2s ease-in-out infinite, playRingSpin 7s linear infinite;
}
@keyframes playRingDraw {
  0%, 100% { stroke-dashoffset: 176; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes playRingSpin {
  to { transform: rotate(360deg); }
}
/* Pedido em seguida (mesmo dia): "o do video pode ser um click, algo do tipo" - cursor de mouse
   "clicando" no canto do selo de play, reaproveitando o MESMO ícone/animação (ytCursorTap) já
   usado no link do YouTube no rodapé (ver .footer-youtube-cursor mais abaixo no CSS) - reforça
   "clique aqui" sem tirar o triângulo de play nem o anel dourado de lugar. Ver playCursorHtml()
   em routes/public.js. */
.work-card .play-cursor {
  position: absolute;
  right: -6px; bottom: -6px;
  animation: ytCursorTap 1.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  z-index: 2;
}
.work-card:hover .play-cursor { animation-play-state: paused; }
.work-card:hover .play {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--accent);
  border-color: var(--accent);
  color: #12100a;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  animation-play-state: paused;
}
.work-card:hover .play-ring circle { animation-play-state: paused; opacity: 0; }
@keyframes playPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(201,162,39,0.4); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 12px rgba(201,162,39,0); }
}
/* Pedido em 10/09/2026: enquanto a prévia em vídeo toca sozinha (hover no PC / rolagem no
   celular - ver .work-card.is-previewing acima), o selo de play redondo some (regra
   .is-previewing .play já existente, pra não parecer que o vídeo ainda não começou) e no lugar
   dele aparece esse aviso em formato de pílula, avisando que dá pra clicar pra ver o projeto
   completo. Fica no mesmo centro onde o selo de play ficava, com o mesmo "vidro" (fundo
   translúcido + blur) e brilho pulsante, só que em forma de texto - pra não deixar a prévia
   rodando sozinha parecendo que é só um vídeo de fundo sem nada pra clicar. Só existe nos cards
   que têm prévia (ver previewHintHtml() em routes/public.js); os demais continuam só com o selo
   de play de sempre.
   Reduzido em 10/09/2026 (4 screenshots de "ENSAIO DE VERÃO"): "sinaliza pra pessoa ver o video
   mais algo menor e mais discreto" - a pílula tava grande demais/chamando atenção demais em cima
   do próprio vídeo já tocando. Encolhida (padding, fonte e ícone menores, borda mais fina) e o
   texto encurtado de "Ver projeto completo" pra "Ver vídeo" (ver previewHintHtml() em
   routes/public.js) - mantém o aviso, só que bem mais discreto. */
.work-card .preview-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(18,16,10,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.25px solid var(--accent);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.35s ease, color 0.35s ease;
}
.work-card .preview-hint svg { flex-shrink: 0; width: 9px; height: 9px; transition: transform 0.35s var(--ease); }
.work-card.is-previewing .preview-hint {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  animation: previewHintPulse 2.4s ease-in-out infinite;
}
.work-card:hover .preview-hint {
  background: var(--accent);
  color: #12100a;
  animation-play-state: paused;
}
.work-card:hover .preview-hint svg { transform: translateX(3px); }
@keyframes previewHintPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(201,162,39,0.45); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 8px rgba(201,162,39,0); }
}
/* Selo de "dá pra clicar" pros cards que só têm foto - criado em 10/09/2026 pequeno, num cantinho,
   com setinhas paradas. Redesenhado em 11/09/2026: "esse q ta e muito simples e n passa a
   impressao de abrir, poe uma animacao tipo mao pincelando ou algo do tipo, dourada, no centro" -
   movido do cantinho pro CENTRO do card (mesmo lugar de destaque do selo de play dos cards com
   vídeo, ver .play acima) e aumentado. Trocado de novo em seguida (mesmo dia): "o da foto pode ser
   a seta igual vc botou nas fotos do rodapé animadas" - o ícone interno passou a ser a MESMA seta
   dupla diagonal dourada pulsando (↖↘) já usada nas galerias de fotos (ver .photo-hint svg/
   .gallery-expand-arrow no CSS, reaproveitada aqui via photoHintHtml() em routes/public.js), no
   lugar da moldura de 4 cantos usada na tentativa anterior. O selo (círculo de fundo, sempre
   visível, nunca só no hover) continua igual. */
.work-card .photo-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18,16,10,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  opacity: 0.95;
  z-index: 2;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), opacity 0.35s ease;
  animation: photoHintPulse 2.6s ease-in-out infinite;
}
.work-card:hover .photo-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--accent);
  color: #12100a;
  animation-play-state: paused;
}
@keyframes photoHintPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(201,162,39,0.4); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 12px rgba(201,162,39,0); }
}

.work-cursor {
  position: fixed; top: 0; left: 0; z-index: 900;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.work-cursor.is-active { opacity: 1; }
.work-cursor span {
  color: #12100a; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}
@media (max-width: 980px) {
  .work-cursor { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .work-card { cursor: none; }
  .work-card { transition: transform 0.5s var(--ease); }
  .work-card:hover { transform: perspective(900px) rotateX(4deg) scale(1.03); z-index: 2; }
  .service-card { transition: background 0.4s var(--ease), transform 0.5s var(--ease); }
  .service-card:hover { transform: perspective(900px) rotateX(3deg) scale(1.02); }
  .person-card { transition: transform 0.5s var(--ease); }
  .person-card:hover { transform: perspective(900px) rotateX(3deg) scale(1.03); z-index: 2; }
}

/* Pedido em 02/09/2026 ("o mais animado e 3D possivel"): brilho/reflexo que acompanha o mouse
   nos cards com efeito de inclinacao 3D (JS em site.js atualiza --mx/--my a cada movimento do
   mouse), reforcando a sensacao de profundidade/vidro. pointer-events:none pra nao atrapalhar
   clique em nada, e so aparece em quem tem mouse de verdade (mesma logica do tilt em si). */
@media (hover: hover) and (pointer: fine) {
  [data-work-card], .service-card, .person-card, .contact-card {
    --mx: 50%; --my: 50%;
  }
  [data-work-card]::after, .service-card::after, .person-card::after, .contact-card::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.18), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
  }
  [data-work-card]:hover::after, .service-card:hover::after, .person-card:hover::after, .contact-card:hover::after {
    opacity: 1;
  }
}

/* Luz ambiente dourada que segue o cursor pela tela inteira (so PC, discreta) - mesmo padrao
   de camada usada no noise-overlay/grade-overlay (fixo, pointer-events:none, blend mode),
   so que reagindo a posicao do mouse via JS (site.js) pra dar mais profundidade ao site. */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.14), transparent 70%);
  pointer-events: none; z-index: 9997; mix-blend-mode: screen; filter: blur(6px);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

/* ---------- Intro cinematografica (barras tipo "letterbox" + logo) ---------- */
/* Pedido em 02/09/2026 ("o mais animado e 3D possivel"): abertura cinematografica ao entrar no
   site pela primeira vez na visita (barras pretas tipo cinema + logo), combinando com o tema de
   producao audiovisual da marca. So toca uma vez por visita (sessionStorage, marcado por um
   script pequeno no <head>, antes de qualquer coisa renderizar - por isso nao pisca em quem ja
   viu) e nunca em quem pediu menos movimento (prefers-reduced-motion). */
.cine-intro { display: none; position: fixed; inset: 0; z-index: 10050; pointer-events: none; }
.js .cine-intro { display: block; }
html.no-intro .cine-intro { display: none; }
.cine-intro-bar { position: fixed; left: 0; right: 0; height: 51vh; background: #000; z-index: 10050; }
.cine-intro-bar-top { top: 0; }
.cine-intro-bar-bottom { bottom: 0; }
.cine-intro-logo { position: fixed; inset: 0; z-index: 10051; display: flex; align-items: center; justify-content: center; opacity: 0; }
.cine-intro-logo img { width: 110px; filter: drop-shadow(0 0 24px rgba(201,162,39,0.4)); }
@keyframes cineLogoIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes cineLogoOut { to { opacity: 0; transform: scale(1.08); } }
@keyframes cineBarUp { to { transform: translateY(-100%); } }
@keyframes cineBarDown { to { transform: translateY(100%); } }
.js:not(.no-intro) .cine-intro-logo {
  animation: cineLogoIn 0.55s var(--ease) 0.15s both, cineLogoOut 0.35s var(--ease) 1.05s both;
}
.js:not(.no-intro) .cine-intro-bar-top { animation: cineBarUp 0.6s var(--ease) 1s forwards; }
.js:not(.no-intro) .cine-intro-bar-bottom { animation: cineBarDown 0.6s var(--ease) 1s forwards; }
.cine-lock { overflow: hidden; }

/* ---------- Filtros de categoria ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.filter-pill {
  padding: 9px 20px;
  border: 1px solid var(--border-strong);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  transition: all 0.3s var(--ease);
}
.filter-pill:hover, .filter-pill.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Servicos ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
/* Pedido em 10/09/2026: os cards ficavam "chapados" (só a cor de fundo lisa) — adicionado um
   relevo sutil (gradiente radial dourado no canto + sombras internas simulando luz vindo de
   cima) pra dar mais profundidade, sem mudar o layout/hairline entre os cards que já existia. */
.service-card {
  background: radial-gradient(circle at 25% 15%, rgba(201,162,39,0.07), transparent 60%), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.45);
  padding: 44px 32px;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  position: relative;
}
.service-card:hover {
  background: radial-gradient(circle at 25% 15%, rgba(201,162,39,0.12), transparent 60%), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.5), 0 24px 48px rgba(0,0,0,0.35);
}
.service-card .num { font-family: var(--font-display); font-size: 0.85rem; color: var(--accent); }
.service-card h3 { margin: 14px 0 12px; }
.service-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 20px; filter: grayscale(20%); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }

/* ---------- Sobre / bio ---------- */
.about-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
/* Pedido em 10/09/2026: o nome ("Noberto Junior (NJ)") tava grande demais no celular -
   esse titulo eh soh um nome de pessoa, nao precisa do tamanho "hero" - tamanho proprio,
   menor que o h1 generico, direto na versao mobile (abaixo de 720px). */
@media (max-width: 720px) {
  .about-split h1 { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
}
/* Pedido do usuario (12/09/2026): "no do pc o nome meu ta grande, diminua" - o nome
   (Noberto Junior (NJ)) continuava grande demais no desktop (5rem chegava a quebrar em
   2 linhas gigantes). Reduzido, e a faixa passa a valer a partir de 721px (tablet) tambem,
   pra nao sobrar um meio-termo sem regra propria que caisse de volta no h1 generico do site
   (esse sim do tamanho de "hero", clamp(2.4rem, 7.5vw, 6.8rem)). */
@media (min-width: 721px) {
  .about-split h1 { font-size: 3.4rem; }
}
.about-split img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(15%); }
.about-split .quote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); text-transform: none; color: var(--fg); border-left: 2px solid var(--accent); padding-left: 24px; margin: 24px 0; }
.about-photos { position: relative; overflow: hidden; aspect-ratio: 4/5; filter: grayscale(15%); }
.about-photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.about-photo-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .about-photo-slide { transition: none; }
}
.stats-row { display: flex; gap: 48px; margin-top: 36px; flex-wrap: wrap; }
.stat b { font-family: var(--font-display); font-size: 2.4rem; display: block; color: var(--accent); }
.stat span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.specialties-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.specialties-list span { border: 1px solid var(--border-strong); padding: 8px 16px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Faixa de marcas + artistas (marquee continuo, sempre colorido) ---------- */
.marquee {
  margin-top: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
  cursor: grab;
  touch-action: pan-y;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Pode ser arrastada igual a faixa de Bastidores (mesmo padrão data-drag-scroll-track em
   site.js) — pausa ao mexer, volta a rolar sozinha depois de alguns segundos parada. */
.marquee-track.dragging { cursor: grabbing; }
/* Pedido em 02/09/2026 ("o mais animado e 3D possivel"): a faixa que rola sozinha ganha uma
   inclinacao 3D leve e constante (tipo prateleira/coverflow), mantida durante toda a rolagem
   porque o rotateX faz parte do proprio keyframe (senao a rolagem apagaria a inclinacao). */
.marquee { perspective: 1000px; }
@keyframes marquee-scroll {
  from { transform: translateX(0) rotateX(6deg); }
  to { transform: translateX(-50%) rotateX(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transform: none; }
}
.brand-chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 116px; flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.brand-chip:hover { transform: translateY(-3px); }
.brand-chip .brand-chip-logo {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: #fdfdfb; border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.brand-chip:hover .brand-chip-logo { border-color: var(--accent); box-shadow: 0 8px 20px rgba(201,162,39,0.25); }
.brand-chip img { max-width: 70%; max-height: 70%; object-fit: contain; }
.brand-chip span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); text-align: center; line-height: 1.3; }
.brand-chip .brand-chip-logo.no-frame {
  background: transparent;
  border-color: transparent;
  width: 104px; height: 104px;
}
.brand-chip:hover .brand-chip-logo.no-frame { box-shadow: none; }
.brand-chip .brand-chip-logo.no-frame img { max-width: 96%; max-height: 96%; }
.person-chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 116px; flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.person-chip:hover { transform: translateY(-3px); }
.person-chip .person-chip-photo {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--border-strong);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.person-chip:hover .person-chip-photo { border-color: var(--accent); box-shadow: 0 8px 20px rgba(201,162,39,0.25); }
.person-chip img { width: 100%; height: 100%; object-fit: contain; }
.person-chip span {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-muted); text-align: center; line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Pessoas que ja trabalhei (grid, pagina Sobre) ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 40px; }
.person-card { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--bg-card); }
.person-card img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease); }
.person-card:hover img { transform: scale(1.06); }
.person-card .person-info {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%);
}
.person-card .person-info b { font-size: 0.95rem; }
.person-card .person-info span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }

/* ---------- Bastidores (galeria de fotos rolando sozinha na pagina Sobre) ---------- */
.bio-gallery {
  margin-top: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.bio-gallery-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
  cursor: grab;
  touch-action: pan-y;
}
.bio-gallery:hover .bio-gallery-track { animation-play-state: paused; }
/* Depois que a pessoa arrasta/toca pra navegar manualmente (pedido do usuário em 03/09/2026), o
   JS (site.js) troca a animação por um transform controlado por ela e adiciona essa classe. */
.bio-gallery-track.dragging { cursor: grabbing; }
.bio-gallery-item {
  position: relative;
  flex-shrink: 0;
  width: 230px;
  height: 340px;
  overflow: hidden;
  background: var(--bg-card);
  border: none;
  padding: 0;
  display: block;
  cursor: pointer;
}
.bio-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(10%);
  transition: filter 0.4s ease, transform 0.6s var(--ease);
}
.bio-gallery-item:hover img { filter: grayscale(0%); transform: scale(1.04); }
/* Mesmo indicador de "toque pra ampliar" (seta diagonal dourada pulsando) já usado na galeria de
   fotos do projeto (.project-gallery-expand/.gallery-expand-arrow, ver mais abaixo) — pedido do
   usuário em 04/09/2026 pra ficar padrão em qualquer galeria com foto ampliável do site, Bastidores
   incluso. Reaproveita as mesmas classes (só o hover muda de seletor pra este componente). */
.bio-gallery-item:hover .project-gallery-expand { color: #fff; }
.bio-gallery-item:hover .gallery-expand-arrow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bio-gallery-track { animation: none; }
}
@media (max-width: 720px) {
  .bio-gallery-item { width: 168px; height: 248px; }
}

/* ---------- Galeria de fotos do projeto, rolando sozinha (mesmo mecanismo do Bastidores
   acima, mas com uma diferença pedida pelo usuário em 03/09/2026: aqui as fotos vêm de
   clientes/projetos variados, então podem ser verticais, horizontais ou quadradas — em vez de
   cortar (object-fit: cover, que corta as bordas pra preencher uma caixa de tamanho fixo como
   o Bastidores faz), cada item usa object-fit: contain, garantindo que a foto inteira sempre
   apareça sem cortar nenhuma borda, seja qual for o tamanho/formato que a pessoa enviar.
   Ajuste de 04/09/2026: a largura de cada item agora vem de "aspect-ratio", calculado no servidor
   a partir da largura/altura REAIS da foto (salvas no banco no momento do upload — ver
   server/upload.js e server/routes/public.js) e escrito já pronto no HTML (atributo style
   de cada botão). Isso resolve dois problemas que a tentativa anterior (largura "auto" deixada
   pro navegador calcular sozinho, olhando pra foto já carregada) tinha: 1) a caixa nascia sem
   tamanho nenhum até a foto carregar, e a rolagem contínua em CSS às vezes travava a pintura da
   imagem numa camada antiga, deixando ela cinza/invisível; 2) sem saber a proporção real de
   antemão, a caixa tinha que usar uma largura genérica, sobrando uma faixa cinza (letterbox) nas
   laterais quando a foto era muito mais estreita que a caixa. Com a proporção certa calculada
   antes de mandar o HTML, a caixa já nasce do tamanho exato da foto — sem espaço sobrando e sem
   depender do carregamento da imagem. Fotos enviadas antes desta data, que ainda não têm
   largura/altura salvas, caem no tamanho padrão abaixo (aspect-ratio do próprio CSS) até o
   próximo build medir e preencher elas automaticamente (backfill em scripts/build-static.js). */
.project-gallery {
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.project-gallery-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
  cursor: grab;
  touch-action: pan-y;
}
.project-gallery:hover .project-gallery-track { animation-play-state: paused; }
.project-gallery-track.dragging { cursor: grabbing; }
/* O item deixou de ser um único <button> (04/09/2026): agora é uma div que segura DOIS
   controles independentes por cima da foto — o botão que abre a foto ampliada (ocupa a área
   toda) e o botão de curtir, cada um por sua vez (não dá pra ter um <button> dentro de outro
   <button> em HTML válido). A div em si só cuida do tamanho/posição; os dois botões dentro é
   que reagem a clique. */
.project-gallery-item {
  position: relative;
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 3 / 2; /* usado só quando a foto não tem largura/altura salvas (ver comentário acima) */
  height: 340px;
  overflow: hidden;
  background: var(--bg-card);
}
.project-gallery-item-view {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.project-gallery-item-view img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(10%);
  transition: filter 0.4s ease, transform 0.6s var(--ease);
}
.project-gallery-item-view:hover img { filter: grayscale(0%); transform: scale(1.04); }
/* Indicador de "toque pra ampliar" — pedido do usuário em 04/09/2026 ("a pessoa não vai saber que
   abre"): fica sempre visível (celular não tem hover pra descobrir sozinho), discreto parado e
   destacado ao passar o mouse, pra indicar sem gritar. Trocado em 04/09/2026 (4): seta diagonal
   ↘ no canto inferior direito, na cor dourada do site, pulsando sem parar — sem fundo/quadrado,
   só a seta mesmo, pra ficar leve por cima da foto. */
.project-gallery-expand {
  position: absolute; bottom: 8px; right: 10px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85));
  pointer-events: none; /* decorativo — quem recebe o clique é o botão inteiro por baixo */
}
.project-gallery-expand svg { width: 100%; height: 100%; display: block; }
.project-gallery-item-view:hover .project-gallery-expand {
  color: #fff;
}
.project-gallery-item-view:hover .gallery-expand-arrow {
  animation-play-state: paused;
}
/* Pedido do usuário em 04/09/2026 (5): em vez de as duas setas pulsarem juntas paradas no
   lugar, cada ponta agora desliza um pouquinho na direção que ela mesma aponta — a de cima
   pra cima, a de baixo pra baixo — reforçando a ideia de "abrindo/afastando". Cada seta já
   nasce apontando pra cima (eixo -y) dentro do seu próprio grupo rotacionado, então a MESMA
   animação (deslizar no eixo -y local) funciona pras duas, cada uma saindo na sua direção real
   depois da rotação do grupo pai. */
.gallery-expand-arrow {
  animation: galleryArrowSlide 1.6s ease-in-out infinite;
}
@keyframes galleryArrowSlide {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-1.2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-expand-arrow { animation: none; }
}
/* Botão de curtir por foto (pedido do usuário em 04/09/2026, igual ao do vídeo principal — ver
   .video-like-btn — só que menor, sobreposto no canto da própria foto). */
.photo-like-btn {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.78rem; font-family: inherit; color: #fff;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), transform 0.2s var(--ease);
}
.photo-like-btn:hover { border-color: var(--accent); color: var(--accent); }
.photo-like-btn.liked { border-color: var(--accent); color: var(--accent); background: rgba(201,162,39,0.28); }
.photo-like-btn:active { transform: scale(0.94); }
.photo-like-btn .heart { font-size: 0.95rem; line-height: 1; }
.photo-like-btn.liked .heart::before { content: "♥"; }
.photo-like-btn .heart::before { content: "♡"; }
@media (prefers-reduced-motion: reduce) {
  .project-gallery-track { animation: none; }
}
@media (max-width: 720px) {
  .project-gallery-item { height: 248px; }
}

/* ---------- Depoimentos em video (feedback de clientes) ---------- */
.testimonials-scroll {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 26px;
  margin-top: 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.testimonials-scroll::-webkit-scrollbar { height: 6px; }
.testimonials-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.testimonial-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
}
.testimonial-card .video-embed { margin-bottom: 16px; }
.testimonial-info { display: flex; flex-direction: column; gap: 4px; }
.testimonial-info b { font-size: 0.95rem; }
.testimonial-info span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
@media (max-width: 720px) {
  .testimonial-card { flex: 0 0 84vw; }
}

/* ---------- Contador de curtidas/visualizações do projeto ----------
   Fica logo abaixo do vídeo principal da página de projeto. A visualização é somada
   via fetch (site.js) ao carregar a página, e não no render, porque o site público
   passa a ser publicado como HTML estático. */
.video-actions { display: flex; align-items: center; gap: 18px; margin: -6px 0 22px; }
.video-like-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 18px; font-size: 0.9rem; font-family: inherit; color: var(--fg); cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease); }
.video-like-btn:hover { border-color: var(--accent); color: var(--accent); }
.video-like-btn.liked { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.video-like-btn:active { transform: scale(0.96); }
.video-like-btn .heart { font-size: 1.05rem; line-height: 1; }
.video-like-btn.liked .heart::before { content: "♥"; }
.video-like-btn .heart::before { content: "♡"; }
.video-views { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--fg-muted); }
.video-views .eye { font-size: 1rem; }
/* Atalho pros comentários junto de curtir/visualizações, no estilo rede social — clicar rola
   suave até a seção Comentários (âncora #comentarios, scroll-behavior:smooth já está no html). */
.video-comments-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--fg-muted); text-decoration: none; transition: color 0.3s var(--ease); }
.video-comments-link:hover { color: var(--accent); }
.video-comments-link .comment-ico { font-size: 1rem; line-height: 1; }

/* ---------- CTA final ---------- */
.cta-section { text-align: center; }
.cta-section h2 { max-width: 800px; margin: 0 auto 28px; }
.cta-section .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 80px 0 0; background: var(--bg-alt); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.footer-brand p { margin-top: 16px; max-width: 460px; white-space: nowrap; }
.footer-cnpj { margin-top: 6px; font-size: 0.82rem; color: var(--fg-dim); }
.footer-links h4, .footer-social h4 { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg-muted); margin-bottom: 18px; }
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a:hover, .social-links a:hover { color: var(--accent); }
.social-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; font-size: 0.78rem; color: var(--fg-dim); }

/* Link do YouTube no rodapé: logo vermelha + setinha de mouse "clicando" pra chamar atenção */
.footer-youtube { display: inline-flex; align-items: center; gap: 10px; }
.footer-youtube:hover { color: #FF0000; }
.footer-youtube-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-youtube-cursor {
  position: absolute; right: -7px; bottom: -7px;
  animation: ytCursorTap 1.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
@keyframes ytCursorTap {
  0%, 20%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-4px, 4px) scale(0.92); }
  48% { transform: translate(-4px, 4px) scale(1.12); }
  60% { transform: translate(0, 0) scale(1); }
}

/* ---------- WhatsApp/Instagram flutuante ---------- */
/* Pedido em 03/09/2026: os dois ícones flutuantes (WhatsApp verde vivo, Instagram com o
   gradiente colorido oficial da marca) destoavam da paleta do site — pediu pra ficar "mais
   minimalista, amadeirado", com a mesma cor de fundo do site em vez das cores das marcas.
   Os dois passaram a usar o mesmo fundo (gradiente marrom escuro, tom de madeira) e o mesmo
   dourado (--accent) no ícone.
   Pedido em 04/09/2026: voltar o ícone do WhatsApp a ser colorido (verde oficial da marca).
   Pedido em 10/09/2026: voltar atrás de novo - o WhatsApp volta a ficar discreto, igual o
   Instagram (mesmo fundo amadeirado, mesmo dourado no ícone, sem pulsar). */
.instagram-float {
  background: linear-gradient(155deg, #3a2a18, #17110a);
  border: 1px solid rgba(201,162,39,0.3);
  color: var(--accent);
  position: fixed; bottom: 82px; right: 24px; z-index: 600;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s var(--ease);
}
.instagram-float:hover { transform: scale(0.98); }
.whatsapp-float {
  background: linear-gradient(155deg, #3a2a18, #17110a);
  border: 1px solid rgba(201,162,39,0.3);
  color: var(--accent);
  position: fixed; bottom: 20px; right: 24px; z-index: 600;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s var(--ease);
}
.whatsapp-float svg { width: 24px; height: 24px; }
.whatsapp-float:hover { transform: scale(0.98); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6,6,7,0.97);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Pedido do usuário em 04/09/2026: um efeito 3D ao tocar numa foto da galeria rolante do
   projeto (e, por consistência, em qualquer foto que abre nessa mesma janela ampliada pelo
   site) — a foto "vira" em 3D com uma leve perspectiva ao aparecer, em vez de só surgir estática.
   Mesmo truque já usado no X de fechar (lightboxCloseIn logo abaixo): a animação fica sempre
   ativa na regra, sem precisar de nenhum JS, porque o .lightbox inteiro sai de display:none pra
   flex a cada abertura — isso já reinicia a animação sozinho toda vez. */
.lightbox img {
  max-width: 100%; max-height: 88vh; object-fit: contain;
  animation: lightboxImgIn 0.75s var(--ease) both;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
/* 04/09/2026 (2): usuário disse que não percebeu o giro 3D — reforçado o efeito (mais graus de
   giro, um pouco mais de duração e uma leve inclinação no outro eixo também) pra ficar nítido. */
@keyframes lightboxImgIn {
  from { opacity: 0; transform: perspective(900px) rotateY(45deg) rotateX(4deg) scale(0.78); }
  60% { opacity: 1; }
  to { opacity: 1; transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox img { animation: none; }
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: none; border: none; color: var(--fg);
  font-size: 1.6rem; padding: 14px;
}
/* Pedido em 03/09/2026: o X de fechar a foto ampliada estava pequeno demais e sem nenhuma
   reação ao toque/clique — pedido pra deixar maior e "mais animado". Virou um botão redondo
   de verdade (antes era só o caractere × solto), com uma entrada girando+crescendo quando a
   foto abre, e gira 90° com feedback de toque (encolhe um pouco) ao tocar/clicar — reaproveita
   o mesmo truque de usar `rotate`/`scale` como propriedades CSS separadas de `transform` (em
   vez de tudo dentro de transform), já usado no paralaxe mais abaixo, pra entrada e toque não
   brigarem entre si. */
.lightbox-close {
  top: 16px; right: 16px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1; padding: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50%;
  z-index: 2;
  transition: rotate 0.35s var(--ease), scale 0.2s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
  animation: lightboxCloseIn 0.5s var(--ease) 0.1s both;
}
@keyframes lightboxCloseIn { from { opacity: 0; scale: 0.4; rotate: -110deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@media (hover: hover) {
  .lightbox-close:hover { background: rgba(201,162,39,0.16); border-color: var(--accent) !important; rotate: 90deg; }
}
.lightbox-close:active { scale: 0.86; rotate: 90deg; background: rgba(201,162,39,0.2); }
@media (prefers-reduced-motion: reduce) {
  .lightbox-close { animation: none; }
}
/* Pedido do usuário em 04/09/2026 (6): as setas de anterior/próxima eram só o caractere solto,
   pequenas e sem nenhuma reação — pedido pra aumentar, dar o tom do site (mesmo dourado --accent
   do X de fechar e da seta de "ampliar" das galerias) e deixar animada. Viram botões redondos
   maiores que o de fechar (são a navegação principal), entrando deslizando de cada lado e com
   um brilho dourado que pulsa sozinho pra chamar atenção (ajuda em quem só usa o dedo, sem
   hover). Centraliza por margin-top (não por transform), deixando `transform` livre pra
   animação de entrada sem brigar com a centralização — mesma ideia do .lightbox-close acima,
   que usa `scale`/`rotate` soltos por esse mesmo motivo. */
.lightbox-prev, .lightbox-next {
  top: 50%; margin-top: -32px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; line-height: 1; padding: 0;
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.4) !important;
  border-radius: 50%;
  color: var(--accent);
  z-index: 2;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox-prev {
  left: 12px;
  animation: lightboxPrevIn 0.5s var(--ease) 0.1s both, lightboxNavGlow 2.2s ease-in-out 0.6s infinite;
}
.lightbox-next {
  right: 12px;
  animation: lightboxNextIn 0.5s var(--ease) 0.1s both, lightboxNavGlow 2.2s ease-in-out 0.6s infinite;
}
@keyframes lightboxPrevIn { from { opacity: 0; transform: translateX(-24px) scale(0.5); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes lightboxNextIn { from { opacity: 0; transform: translateX(24px) scale(0.5); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes lightboxNavGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(201,162,39,0); border-color: rgba(201,162,39,0.4); }
  50% { box-shadow: 0 0 18px rgba(201,162,39,0.5); border-color: rgba(201,162,39,0.85); }
}
@media (hover: hover) {
  .lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(201,162,39,0.22); border-color: var(--accent) !important; color: #fff;
    animation-play-state: paused, paused;
    box-shadow: 0 0 14px rgba(201,162,39,0.4);
  }
}
.lightbox-prev:active, .lightbox-next:active { scale: 0.86; background: rgba(201,162,39,0.3); }
@media (prefers-reduced-motion: reduce) {
  .lightbox-prev, .lightbox-next { animation: none; }
}
.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: var(--fg-muted); }

/* ---------- Galeria simples (grid) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gallery-grid button {
  position: relative; padding: 0; border: none; background: rgba(255,255,255,0.03); aspect-ratio: 1; overflow: hidden;
  cursor: pointer; transition: box-shadow 0.4s var(--ease);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease), filter 0.5s var(--ease); }
/* Sombra escura + ícone de "ampliar" que aparecem suavemente ao passar o mouse — pedido do
   usuário em 03/09/2026, junto com a foto dando um leve zoom, pra dar clareza de que a foto é
   clicável e amplia. */
.gallery-grid button::before {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.gallery-grid button::after {
  content: '+'; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  line-height: 39px; text-align: center; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent); font-size: 1.6rem;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.gallery-grid button:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.gallery-grid button:hover img { transform: scale(1.08); filter: brightness(0.7); }
.gallery-grid button:hover::before { opacity: 1; }
.gallery-grid button:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Pagina de projeto ---------- */
.project-hero { padding: 160px 0 60px; }
.project-meta { display: flex; gap: 32px; flex-wrap: wrap; margin: 24px 0 40px; }
.project-meta div { font-size: 0.82rem; }
.project-meta b { display: block; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); font-size: 0.68rem; margin-bottom: 4px; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; margin-bottom: 16px; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-embed-fallback { font-size: 0.82rem; color: var(--fg-muted); margin-top: -8px; }
.video-embed-fallback a { color: var(--accent); }
.video-embed-linkonly { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; background: var(--bg-card); }
/* Botão de tela cheia: fica num canto, fora da área central do player, pra nunca atrapalhar o
   play/pause do vídeo por baixo (ver comentário em server/util.js sobre por que não dá pra usar
   duplo clique direto no vídeo quando ele é um iframe de outro site). */
.video-embed-fullscreen {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.video-embed-fullscreen:hover { background: var(--accent); color: #12100a; transform: scale(1.06); }

/* ---------- Pagina simples (contato etc) ---------- */
.simple-hero { padding: 170px 0 60px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-card { border: 1px solid var(--border); padding: 40px; position: relative; }

/* ---------- Utilitarios ---------- */
.muted { color: var(--fg-dim); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 5px 12px; border: 1px solid var(--accent); color: var(--accent); }
.empty-state { text-align: center; padding: 80px 20px; color: var(--fg-dim); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
  .work-card, .work-card.wide { grid-column: span 4; grid-row: span 2; }
  .work-card:nth-child(5n+2) { grid-column: span 2; grid-row: span 2; }
  .work-card:nth-child(5n+3) { grid-column: span 2; grid-row: span 2; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  /* Pedido do usuario (12/09/2026): "aplique isso em todo formato de celular" - o ajuste do
     card do "Projeto em destaque" pra 16:9 (ver @media max-width:720px mais abaixo) só cobria
     até 720px; entre 721px e 980px (celular grande/deitado, tablet pequeno) ele ainda caía na
     regra padrão de 21:9 (mais acima, fora de media query) e cortava a foto do mesmo jeito que
     antes. Repetido aqui pra cobrir essa faixa também - só o desktop de verdade (981px+)
     continua com o cinema 21:9 original. */
  .work-card.home-featured-card { aspect-ratio: 16/9; }
}
@media (max-width: 720px) {
  section { padding: 72px 0; }
  /* Menu mobile redesenhado em 03/09/2026 (pedido do usuário: o antigo era "sem graça", uma
     lista plana e uniforme sem hierarquia visual). Mantém a mesma estrutura/JS de sempre (painel
     que desliza da direita, .open alterna tudo) mas agora: título "MENU" no topo, cada link com
     índice numerado (01, 02...) na cor de destaque igual o site já usa em .service-card .num,
     texto grande na fonte de título (--font-display, a mesma dos títulos gigantes do site) em
     vez de uma linha pequena igual as outras, um brilho radial sutil no canto (mesma linguagem
     visual do resto do site) e um rodapé fixo com WhatsApp + redes sociais. Cada item entra com
     uma animação encadeada (um depois do outro, via --i e transition-delay) quando o menu abre,
     em vez de tudo aparecer de uma vez — dá a sensação de profundidade/movimento pedida.

     Ajustado de novo em 03/09/2026 (usuário achou "muito cru" ainda, pediu mais discreto/bonito
     e com efeitos 3D): o painel virou vidro fosco de verdade (fundo semi-transparente +
     backdrop-filter: blur) em vez de cor sólida — como ele fica por cima do .parallax-bg (que é
     `position: fixed` cobrindo a página inteira desde o layout(), ver mais abaixo no arquivo),
     as luzes que já andam pela página aparecem borradas atrás do menu, então o mesmo efeito de
     luz "mora" também aqui em vez de ser uma cor parada. O texto ficou um pouco menor/mais fino
     (menos "gritando"), os números viraram uma placinha com profundidade própria (sombra +
     brilho interno, `--font-display` continua igual) e a entrada de cada item agora usa
     `perspective`+`rotateY`+`translateZ` (em vez de só translateX) pra vir "girando" de lado com
     sensação de profundidade real, não só deslizando na horizontal. */
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(340px, 86vw);
    background: rgba(15,13,10,0.62);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: -24px 0 70px rgba(0,0,0,0.55);
    transform: translateX(100%); transition: transform 0.5s var(--ease);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 80px 30px 28px;
    z-index: 400;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 1000px;
  }
  .main-nav::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 100% 0%, rgba(201,162,39,0.1), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(120,55,15,0.09), transparent 60%);
    pointer-events: none;
  }
  /* Pedido em 03/09/2026: além do vidro deixar a luz de fundo da página aparecer borrada atrás
     do menu, o usuário pediu uma luz se mexendo dentro do próprio menu também — como o efeito
     de fundo depende de onde as manchas do .parallax-bg estão na hora em que o menu abre, nem
     sempre dava pra notar. Essas duas aqui são próprias do menu (mesma técnica das manchas do
     paralaxe: blur + mix-blend-mode: screen + drift via `transform`, ver mais abaixo no
     arquivo), então sempre tem luz visivelmente andando aqui dentro, direto. */
  .nav-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform;
  }
  .nav-glow-1 {
    width: 220px; height: 220px;
    top: -8%; right: -18%;
    background: radial-gradient(circle, rgba(201,162,39,0.4), transparent 70%);
  }
  .nav-glow-2 {
    width: 180px; height: 180px;
    bottom: 8%; left: -16%;
    background: radial-gradient(circle, rgba(255,150,60,0.32), transparent 70%);
  }
  .js .nav-glow-1 { animation: navGlowDrift1 9s ease-in-out infinite; }
  .js .nav-glow-2 { animation: navGlowDrift2 11s ease-in-out infinite; }
  @keyframes navGlowDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-38px, 46px); } }
  @keyframes navGlowDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -40px); } }
  .main-nav.open { transform: translateX(0); }
  /* Pedido em 03/09/2026: label "MENU" ficava pequeno perto dos nomes dos links (Home,
     Portfólio...) e desalinhado deles (o texto dos links começa depois do numerinho, ~40px
     de recuo) - aqui igualamos o tamanho da fonte ao dos links, alinhamos o recuo com
     padding-left e demos um efeito de flutuação maior que o resto (8px em vez dos 3-6px
     usados nos outros elementos). Usa 'translate' (propriedade separada) pra entrada
     deslizante e deixa 'transform' livre pra animação, mesmo truque já usado no .nav-close
     e no .lightbox-close, pra uma não cancelar a outra. */
  .nav-menu-label {
    display: block;
    position: relative;
    padding-left: 34px;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    letter-spacing: 0.1em;
    color: var(--fg);
    opacity: 0; translate: 0 -10px;
    transition: opacity 0.5s var(--ease) 0.1s, translate 0.5s var(--ease) 0.1s;
  }
  .main-nav.open .nav-menu-label { opacity: 0.9; translate: 0 0; }
  .js .nav-menu-label { animation: navLabelFloat 4s ease-in-out infinite; }
  @keyframes navLabelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  /* Pedido em 03/09/2026: a lista ficava centralizada no meio do drawer (justify-content:
     center numa área com flex:1), sobrando um vão vazio grande embaixo do rótulo "MENU" —
     trocado pra começar logo abaixo do rótulo (flex-start) em vez de flutuar no meio. */
  .main-nav > ul.nav-links-list {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 6px;
  }
  .nav-links-list li {
    opacity: 0;
    transform: perspective(700px) rotateY(-22deg) translateX(30px) translateZ(-50px);
    transform-origin: right center;
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    transition-delay: calc(var(--i, 0) * 0.07s + 0.15s);
    border-bottom: 1px solid rgba(255,255,255,0.055);
  }
  .nav-links-list li:last-child { border-bottom: none; }
  .main-nav.open .nav-links-list li { opacity: 1; transform: perspective(700px) rotateY(0) translateX(0) translateZ(0); }
  .nav-links-list a {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 2px;
    font-family: var(--font-display);
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    letter-spacing: 0.02em;
    line-height: 1;
    color: rgba(245,242,235,0.82);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.3);
    transition: color 0.3s var(--ease), scale 0.15s var(--ease);
  }
  .nav-links-list a:active { scale: 0.97; color: var(--fg); }
  /* Pedido em 03/09/2026: fonte dos links achada grande, e pediu a mesma animação de
     "balançar" que já existe no resto do menu (números, label "MENU") aplicada no texto
     também — mesmo keyframe/padrão do .js .eyebrow (labelFloat) usado no site inteiro, só que
     com o atraso por item (--i) igual já fazíamos nos números, pra não balançar tudo junto. */
  .js .nav-link-text { display: inline-block; animation: navTextFloat 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.15s); }
  @keyframes navTextFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .nav-link-num {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    width: 20px; height: 20px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 0.54rem;
    letter-spacing: 0.03em;
    color: var(--accent);
    background: linear-gradient(155deg, rgba(201,162,39,0.2), rgba(201,162,39,0.03));
    border: 1px solid rgba(201,162,39,0.32);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .js .nav-link-num { animation: navNumFloat 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.2s); }
  @keyframes navNumFloat { 0%, 100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-3px) rotateX(12deg); } }
  .has-sub.open > a .nav-link-text { color: var(--accent); }
  .has-sub.open > a .nav-link-num { border-color: var(--accent); background: linear-gradient(155deg, rgba(201,162,39,0.34), rgba(201,162,39,0.08)); }
  /* Pedido em 03/09/2026: destacar a página atual no menu (nada indicava antes onde a
     pessoa já estava) — mesmo tratamento visual (texto dourado + chip com borda/fundo
     dourados) já usado no ".has-sub.open" acima, pra ficar consistente. */
  .nav-links-list li.active > a .nav-link-text { color: var(--accent); }
  .nav-links-list li.active > a .nav-link-num { border-color: var(--accent); background: linear-gradient(155deg, rgba(201,162,39,0.34), rgba(201,162,39,0.08)); }
  /* Setinha indicando que "Portfólio" abre um submenu de categorias em vez de navegar
     direto (pedido em 03/09/2026 -- antes não tinha nenhuma pista disso). Empurrada pro
     final da linha com margin-left:auto (a própria .nav-links-list a já é flex). Gira
     180deg quando o submenu abre, mesma convenção de "rotate" como propriedade separada
     usada no resto do menu, pra não brigar com nenhuma outra transição. */
  .nav-link-chevron {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    color: var(--accent);
    opacity: 0.8;
    transition: rotate 0.3s var(--ease);
  }
  .has-sub.open > a .nav-link-chevron { rotate: 180deg; }
  .sub-nav { position: static; opacity: 1; visibility: visible; transform: none; border: none; background: none; padding: 4px 0 6px 40px; display: none; }
  .has-sub.open .sub-nav { display: block; }
  .sub-nav li a { font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; padding: 8px 2px; color: rgba(245,242,235,0.62); }
  .nav-toggle { display: flex; }
  /* Pedido em 10/09/2026 (oitava rodada): o botao do menu (as 3 tracinhos) fica meio
     escondido no canto - pediu pra chamar mais atencao com algo animado/com movimento.
     Dois efeitos juntos, os dois discretos: o botao da uma leve "respirada" (sobe e cresce
     um pouquinho) de tempos em tempos, e um anel dourado pulsa saindo de dentro dele feito
     onda de radar. Pedido em seguida (nona rodada): pra ficar ligado sempre, sem parar depois
     do primeiro uso - por isso nao existe mais nenhuma classe que desliga essa animacao. */
  .nav-toggle::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 12px;
    border: 2px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    animation: navToggleRing 2.8s ease-out infinite;
  }
  .nav-toggle {
    animation: navToggleNudge 2.8s ease-in-out infinite;
  }
  @keyframes navToggleRing {
    0% { transform: scale(0.82); opacity: 0.85; }
    65% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
  }
  @keyframes navToggleNudge {
    0%, 60%, 100% { transform: translateY(0) scale(1); }
    68% { transform: translateY(-3px) scale(1.1); }
    76% { transform: translateY(0) scale(0.97); }
    84% { transform: translateY(-1px) scale(1.02); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-toggle, .nav-toggle::before { animation: none; }
  }
  .edge-swipe-hint {
    display: flex;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 350;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 52px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(90deg, rgba(201,162,39,0.04), rgba(201,162,39,0.26));
    border: 1px solid rgba(201,162,39,0.34);
    border-right: none;
    color: var(--accent);
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.4s var(--ease);
    animation: edgeHintNudge 2.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .edge-swipe-hint { animation: none; }
  }
  /* Pedido em 03/09/2026: o X de fechar o menu tava discreto demais (pequeno, parado) — deixar
     maior e mais animado, igual foi pedido pro X da foto ampliada (mesmo truque de rotate/scale
     como propriedades separadas de transform, ver .lightbox-close mais abaixo). */
  .nav-close {
    display: none;
    position: absolute; top: 16px; right: 16px;
    width: 46px; height: 46px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong); color: var(--fg);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), rotate 0.35s var(--ease), scale 0.2s var(--ease);
  }
  .nav-close svg { width: 22px; height: 22px; }
  .main-nav.open .nav-close { display: flex; animation: lightboxCloseIn 0.5s var(--ease) 0.25s both; }
  @media (hover: hover) {
    .nav-close:hover { border-color: var(--accent); background: rgba(201,162,39,0.12); rotate: 90deg; }
  }
  .nav-close:active { scale: 0.86; rotate: 90deg; }
  .nav-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 390;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 20px; }
  .work-card, .work-card.tall, .work-card.wide, .work-card:nth-child(5n+1), .work-card:nth-child(5n+2), .work-card:nth-child(5n+3), .work-card:nth-child(5n+4), .work-card:nth-child(5n+5) {
    grid-column: span 1; grid-row: auto; aspect-ratio: 4/5;
  }
  .work-card img { object-fit: cover; }
  /* Pedido do usuario (12/09/2026): "esses clipes de video que ta no destaque da pagina, na
     versao de cel, ta mostrando meio cortado, deveria ser mais horizontal ou deixar um padrao
     que se encaixe automatico pra videos verticais ou horizontais do youtube" - o card do
     "Projeto em destaque" ficava no formato de cinema (21:9) tambem no celular (regra acima
     .home-featured-card, que so muda no desktop) - numa tela estreita isso vira uma caixa bem
     baixinha e larga, cortando bastante a foto de capa (esp. gente/rosto perto do topo). No
     celular passa a usar 16:9 (formato padrao de video, ainda claramente "horizontal", mas bem
     menos extremo que 21:9 - corta bem menos a foto de capa, seja ela de video horizontal ou
     vertical). Selector ".work-card.home-featured-card" (2 classes) de proposito - o grupo
     generico ".work-card, .work-card:nth-child(5n+3), ..." ali em cima tambem tem regra com 2
     classes de especificidade (a pseudo-classe :nth-child conta igual classe), entao so uma
     classe (".home-featured-card" sozinha) perdia mesmo vindo depois no arquivo. */
  .work-card.home-featured-card { aspect-ratio: 16/9; }
  /* Pedido em 11/09/2026: "o circulo ta muito grande no celular, diminua um pouco" - os selos
     centrais do card (play com anel dourado + cursor, e o de foto com a seta) ficavam grandes
     demais nas telas pequenas (cards em coluna única, ver .work-grid acima). Reduzidos só no
     mobile; no desktop continuam do tamanho de sempre (.play 62px / .photo-hint 74px, mais acima
     no CSS). Diminuído de novo em seguida (mesmo dia): "diminua mais um pouco o circulo no
     celular" - reduzido mais uma vez (50px/58px foi pro tamanho atual abaixo). */
  .work-card .play { width: 42px; height: 42px; }
  .work-card .play svg:not(.play-ring) { width: 15px; height: 15px; margin-left: 2px; }
  .work-card .photo-hint { width: 48px; height: 48px; }
  .work-card .photo-hint svg { width: 20px; height: 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 32px 4px; }
  .service-card img { display: none; }
  .specialties-list { gap: 0; }
  .specialties-list span {
    border: none; padding: 0; text-transform: none; letter-spacing: 0.01em;
    font-size: 0.86rem; color: var(--fg-muted);
  }
  .specialties-list span:not(:last-child)::after { content: ' · '; color: var(--fg-dim); }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
   .footer-brand p { font-size: 0.92rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { min-height: 84svh; }
  .hero-scroll { bottom: 18px; }
  .hero-media::after {
    /* Pedido do usuario em 03/09/2026: a foto do hero tava escura demais so no cel
       (aqui era mais escuro que no PC de proposito p/ legibilidade do texto) - clareado
       um pouco, mantendo o texto ainda legivel por cima.
       Pedido em seguida (10/09/2026): ainda tava escura so no celular - clareado de novo,
       chegando bem mais perto do nivel de brilho da versao PC (que o usuario disse que
       estava normal e pra nao mexer). PC continua com o gradiente original la em cima.
       Ajustado em seguida (11/09/2026): mesmo pedido geral de "foto mais escura com degrade no
       topo pra destacar a frase" - reforcado tambem aqui no celular (onde a legenda + titulo
       ficam), so que um pouco mais leve que no PC, seguindo o mesmo cuidado historico de nao
       escurecer demais so no celular.
       Ajustado em seguida (12/09/2026): "deixa um degrade escuro tanto no site quanto no
       celular" - escurecido mais um pouco aqui tambem, mantendo a mesma diferenca (um pouco
       mais leve que o PC) que ja existia.
       Ajustado em seguida (12/09/2026): "degrade na foto, escureca mais, deixa bem mais escuro,
       ta no cel tanto no pc" - escurecido bem mais uma vez, praticamente igualando ao PC (o
       pedido foi explicito pros dois).
       Ajustado em seguida (17/09/2026): "deixa o degrade do vídeo que rola atrás menos intenso
       tanto no cel tanto no pc" - clareado de volta aqui tambem, na mesma proporcao do PC. */
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.46) 22%, rgba(0,0,0,0.38) 40%, rgba(1,1,2,0.7) 100%);
  }
  .hero { align-items: center; }
  .hero-content { padding-bottom: 0; }
  .hero .eyebrow {
    font-size: 0.54rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.6em;
  }
  /* Pedido do usuario (12/09/2026): "coloca mais pq no cel n parece q ta com desfoque, e no
     site (PC) ta" - 0.2px nao dava pra notar no celular (fonte pequena, tela com mais densidade
     de pixels). Aumentado bem mais que o desktop pra ficar visivel de verdade. */
  .hero-content .eyebrow { filter: none; }
  .hero-content .lead { display: none; }
  .stats-row { gap: 28px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
  /* Pedido de novo (11/09/2026): "ver portifolio e entra em contato abaixa mais um pouco" -
     empurrado mais uma vez tambem no celular (14px -> 26px). */
  .hero .btn-row { align-items: center; gap: 22px; margin-top: 26px; }
  /* Pedido do usuario (11/09/2026): "em ver portfolio e entre em contato coloca menor o
     tamanho pra versao de cel tambem" - reduzido mais um pouco tambem so no celular (o
     desktop, mais acima no arquivo, continua do jeito que estava).
     Pedido em seguida (mesma data): "diminua mais o tamanho do portfolio e contato, apenas
     do cel" - reduzido de novo, só nesse mesmo bloco (max-width: 720px), sem encostar no
     desktop. */
  .hero .btn-row .btn {
    padding: 6px 12px;
    font-size: 0.54rem;
  }
  /* Cursor de clique em cima do botao (ver .btn-hero-cta .btn-arrow-icon mais acima) reduzido
     no celular, proporcional ao botao bem menor nessa largura. Sem padding extra (botao volta
     ao tamanho original) - cursor bem pequeno e colado na borda pra caber dentro do padding
     que ja existia (6px 12px) sem tampar a letra. */
  .btn-hero-cta .btn-arrow-icon { right: 3px; }
  .btn-hero-cta .btn-arrow-icon svg { width: 8px; height: 8px; }
  .hero .btn-row .btn-outline {
    border-color: transparent;
    padding-left: 0; padding-right: 0;
    text-decoration: underline;
    /* Pedido do usuario (12/09/2026): mesmo pedido da borda dourada sutil do botao (regra
       ".btn-outline" mais acima no arquivo) - aqui no celular o "entra em contato" nao tem
       caixa/borda (vira sublinhado), entao quem faz esse papel de "moldura" e a cor do
       sublinhado - trocada pra esse mesmo dourado bem discreto, o texto continua na cor
       normal (var(--fg-muted)) pra nao perder legibilidade. */
    text-decoration-color: rgba(201, 162, 39, 0.55);
    text-underline-offset: 4px;
    color: var(--fg-muted);
    font-size: 0.48rem;
  }
  .hero .btn-row .btn-outline:hover { background: none; color: var(--fg); transform: none; }
  /* Pedido do usuario (11/09/2026): as duas regras abaixo foram removidas daqui -
     "padding-left: 24px" empurrava o conteudo pra direita (desalinhava a centralizacao
     nova) e "font-size: 2.72rem" era um tamanho fixo que nao encolhia o suficiente pra
     palavras compridas, cortando o titulo na borda da tela no celular. Agora o
     tamanho do titulo vem do clamp() fluido definido mais acima (que ja cobre todas as
     larguras de tela) e o hero-content fica centralizado (text-align:center) igual ao PC. */
  .hero-content {
    transform: translateY(-8vh);
  }
  .hero-eyebrow-lower { margin-top: 0.9em; }
  .hero-content h1 .hero-punct {
    margin-left: 0.08em;
  }
  /* Pedido do usuario (12/09/2026): "sobre o desfoque no celular ficou de mais, ajuste e veja
     o motivo que ficou assim" - o motivo: o filter: blur(1.7px) la em cima (regra
     ".hero-content h1 { filter: blur(1.7px); }") e um valor FIXO em pixel, igual pra qualquer
     tamanho de tela. So que no celular o titulo usa um font-size bem menor (o clamp() do
     titulo cai pra pertinho do minimo, 1.1rem/~17-18px, contra ate 2.5rem/40px no PC) -
     entao o MESMO desfoque em pixel fica proporcionalmente bem mais forte em cima de letras
     menores (borra uma fatia maior de cada letra). Reduzido aqui so pro celular, mantendo o
     1.7px original intacto no PC (regra de cima, fora desse @media).
     Pedido em 17/09/2026: "deixa um pouco mais focado tanto no pc tanto no cel" - reduzido
     na mesma proporcao que o PC (de 0.7px pra 0.4px). */
  .hero-content h1 { filter: none; }
  /* Pedido do usuario em 03/09/2026: pelicula/filtro laranja bem sutil por cima do
     site inteiro, so na versao de celular (o .grade-overlay dourado ja existe pro
     site todo, mas bem mais discreto - aqui e um toque a mais so no cel, ainda minimo).
     Ajustado (mesmo dia): aumentado bem de leve, a pedido do usuario.
     Removido em seguida (12/09/2026): "a pelicula ja que ta o site todo tipo filtro, faltou
     tirar mais e deixar quase nada" - esse reforço extra so do celular foi exatamente o que
     deixava o efeito mais visivel/"poluido" ali. Removido - o celular passa a usar a mesma
     pelicula bem mais fraca da regra base (.grade-overlay, mais acima no arquivo), igual ao PC. */
}
@media (max-width: 480px) {
  /* Pedido em 10/09/2026: mesmo motivo do ajuste acima (fonte Poppins mais "cheia" que a
     Bebas Neue de antes) - reduzido tambem aqui, na versao mobile, que é onde ficava mais
     pesado ainda (a tela é menor, entao os vw% pesam mais). */
  /* Pedido em seguida (10/09/2026): reduzido de novo - primeira redução ainda ficou grande
     no celular (reparado no nome "Noberto Junior" da pagina Sobre). */
  h1 { font-size: clamp(1.7rem, 8.5vw, 2.35rem); letter-spacing: -0.005em; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.85rem); }
  h3 { font-size: clamp(0.95rem, 3.6vw, 1.3rem); }
}

@media (max-width: 720px) {
  .whatsapp-float, .instagram-float {
    width: 42px; height: 42px;
    right: 16px;
  }
  .whatsapp-float { bottom: 14px; }
  .instagram-float { bottom: 64px; }
  .whatsapp-float svg { width: 19px; height: 19px; }
  .instagram-float svg { width: 19px; height: 19px; }
}

/* ---------- Barra de progresso de rolagem ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--accent);
  z-index: 950;
  transition: width 0.12s linear;
}

/* ---------- Botao "voltar ao topo" ---------- */
.back-to-top {
  position: fixed; bottom: 24px; left: 24px; z-index: 600;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s, border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--accent); background: var(--accent); color: #12100a; }
@media (max-width: 720px) {
  .back-to-top { width: 44px; height: 44px; bottom: 18px; left: 18px; }
}

/* ---------- Comentários dos projetos (pedido do usuário em 03/09/2026) ---------- */
.comments-section .container > h3 { margin-bottom: 28px; }
.comment-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.comment-form input[type="text"],
.comment-form textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.comment-form input[type="text"]:focus,
.comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form .comment-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.comment-form .form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.comment-form-status { font-size: 0.85rem; color: var(--fg-dim); }
.comment-form-status.is-error { color: #d0503a; }
.comment-form-status.is-success { color: var(--accent); }

.comments-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.comment-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.comment-item .comment-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-item .comment-author { font-weight: 700; }
.comment-item .comment-date { font-size: 0.72rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.comment-item .comment-content { color: var(--fg-muted); white-space: pre-wrap; }
.comment-reply { margin-top: 12px; padding: 12px 14px; background: var(--bg-alt); border-left: 2px solid var(--accent); border-radius: var(--radius); }
.comment-reply .comment-reply-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 4px; }
.comments-empty { color: var(--fg-dim); }

/* ---------- Fundo com profundidade (paralaxe) ---------- */
/* Pedido em 03/09/2026, ajustado duas vezes no mesmo dia depois de testar ao vivo no celular:
   1ª versão (só deriva ambiente via CSS, sem JS) ficou sutil demais. 2ª versão adicionou
   deslocamento ligado ao scroll, mas as 3 manchas continuavam "moradas" perto do canto onde
   nasceram (posições fixas tipo -14%/-10% etc) e o passeio era curto (~60-80px) — de longe
   parecia uma mancha parada, não algo "andando pela página toda". Agora: manchas espalhadas em
   alturas bem diferentes (uma no topo, uma no meio, uma embaixo, ver top/bottom de cada
   .parallax-layer-N) e o deslocamento do scroll (site.js) ficou bem maior — várias centenas de
   pixels, em X e em Y — então conforme a pessoa rola a página elas realmente atravessam boa
   parte da tela, não só balançam no lugar. Mantém o mesmo padrão visual do .cursor-glow (camada
   fixa, pointer-events:none, mix-blend-mode:screen, desfoque). Além da deriva ambiente própria
   de cada uma (roda sozinha via @keyframes, mesmo parada), o deslocamento extra do scroll é
   aplicado via `translate` (propriedade separada de `transform`, ver
   https://developer.mozilla.org/docs/Web/CSS/translate) exatamente pra não conflitar com a
   animação CSS, que usa `transform` — as duas se somam automaticamente no elemento, é o que dá
   a sensação de profundidade (camadas "andando" em velocidades diferentes conforme rola).
   Continua atrás de qualquer seção com fundo próprio (essas pintam por cima na ordem normal do
   documento) e sempre pointer-events:none, pra nunca atrapalhar clique em nada. Continua
   desligando sozinho pra quem pediu menos movimento (prefers-reduced-motion) — tanto a deriva
   CSS quanto o listener de scroll no JS respeitam essa preferência. */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.parallax-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  will-change: transform;
}
.parallax-layer-1 {
  width: 50vw; height: 50vw; max-width: 680px; max-height: 680px;
  top: -16%; left: -12%;
  background: radial-gradient(circle, rgba(201,162,39,0.26), transparent 70%);
}
.parallax-layer-2 {
  width: 42vw; height: 42vw; max-width: 580px; max-height: 580px;
  top: 38%; right: -14%;
  background: radial-gradient(circle, rgba(120,55,15,0.24), transparent 70%);
}
.parallax-layer-3 {
  width: 36vw; height: 36vw; max-width: 500px; max-height: 500px;
  bottom: -16%; left: 30%;
  background: radial-gradient(circle, rgba(255,150,60,0.2), transparent 70%);
}
/* Pedido em 03/09/2026: "pode botar mais luzes e mais efeitos na página toda" — 4ª mancha,
   menor e mais rápida que as outras 3, com um dourado bem claro/quase branco (contraste com o
   dourado mais escuro das outras), pra dar uma "faísca" extra de vida sem pesar — o painel do
   menu mobile agora é vidro fosco (ver .main-nav mais acima) e deixa essas luzes aparecerem
   borradas atrás dele, então quanto mais variedade de luz na página, mais bonito fica ali
   também. */
.parallax-layer-4 {
  width: 22vw; height: 22vw; max-width: 320px; max-height: 320px;
  top: 62%; left: 4%;
  background: radial-gradient(circle, rgba(255,224,150,0.3), transparent 70%);
}
/* Pedido em 03/09/2026: as luzes só balançavam entre 2 pontos (ida e volta na mesma linha),
   o usuário pediu movimento "tipo 360, aleatório, por todo o site" em vez de deslocamentos
   curtos. Cada keyframe agora visita vários pontos espalhados em todas as direções (não só
   um eixo), com sinais de X/Y diferentes a cada parada — dá a sensação de passeio livre pela
   tela toda em vez de um vaivém previsível. Duração bem mais longa (30-46s) pra o percurso
   inteiro não repetir rápido demais e ficar suave/ambiente, não frenético. Continua somando
   com o deslocamento de scroll do site.js (translate, ver ali) e desligando por completo com
   prefers-reduced-motion, igual antes. */
.js .parallax-layer-1 { animation: parallaxDrift1 38s ease-in-out infinite; }
.js .parallax-layer-2 { animation: parallaxDrift2 46s ease-in-out infinite; }
.js .parallax-layer-3 { animation: parallaxDrift3 30s ease-in-out infinite; }
.js .parallax-layer-4 { animation: parallaxDrift4 22s ease-in-out infinite; }
@keyframes parallaxDrift1 {
  0%   { transform: translate(0, 0); }
  13%  { transform: translate(24vw, 10vh); }
  25%  { transform: translate(14vw, 34vh); }
  38%  { transform: translate(-12vw, 40vh); }
  50%  { transform: translate(-30vw, 16vh); }
  63%  { transform: translate(-22vw, -16vh); }
  75%  { transform: translate(-4vw, -34vh); }
  88%  { transform: translate(20vw, -20vh); }
  100% { transform: translate(0, 0); }
}
@keyframes parallaxDrift2 {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(-20vw, -18vh); }
  28%  { transform: translate(-36vw, 6vh); }
  42%  { transform: translate(-18vw, 30vh); }
  56%  { transform: translate(8vw, 36vh); }
  70%  { transform: translate(28vw, 14vh); }
  84%  { transform: translate(16vw, -20vh); }
  100% { transform: translate(0, 0); }
}
@keyframes parallaxDrift3 {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(18vw, -22vh); }
  33%  { transform: translate(32vw, 2vh); }
  50%  { transform: translate(18vw, 26vh); }
  66%  { transform: translate(-10vw, 32vh); }
  83%  { transform: translate(-24vw, 8vh); }
  100% { transform: translate(0, 0); }
}
@keyframes parallaxDrift4 {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(16vw, 14vh); }
  40%  { transform: translate(4vw, -18vh); }
  60%  { transform: translate(-16vw, -12vh); }
  80%  { transform: translate(-8vw, 16vh); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-layer-1, .parallax-layer-2, .parallax-layer-3, .parallax-layer-4 { animation: none; }
}
/* Celular: 3 camadas em vez de 4 (mais leve pra bateria/GPU) — a 4ª (menor e mais rápida) some,
   ficam a 1, 2 e 3, cobrindo topo, meio e fundo da página em vez de só uma manchinha no canto —
   senão fica parecendo "parado num lugar só". Mesma ideia de percurso com várias paradas em
   direções diferentes, só que com alcance um pouco menor (a tela é mais estreita) e duração um
   pouco mais curta. */
@media (max-width: 720px) {
  .parallax-layer-4 { display: none; }
  .parallax-layer-1, .parallax-layer-2, .parallax-layer-3 { filter: blur(50px); }
  .parallax-layer-1 { background: radial-gradient(circle, rgba(201,162,39,0.34), transparent 70%); }
  .parallax-layer-2 { background: radial-gradient(circle, rgba(120,55,15,0.32), transparent 70%); }
  .parallax-layer-3 { background: radial-gradient(circle, rgba(255,150,60,0.3), transparent 70%); width: 44vw; height: 44vw; }
  .js .parallax-layer-1 { animation: parallaxDrift1 30s ease-in-out infinite; }
  .js .parallax-layer-2 { animation: parallaxDrift2 34s ease-in-out infinite; }
  .js .parallax-layer-3 { animation: parallaxDrift3 24s ease-in-out infinite; }
  @keyframes parallaxDrift1 {
    0%   { transform: translate(0, 0); }
    16%  { transform: translate(16vw, 8vh); }
    33%  { transform: translate(8vw, 24vh); }
    50%  { transform: translate(-10vw, 20vh); }
    66%  { transform: translate(-16vw, -6vh); }
    83%  { transform: translate(-2vw, -22vh); }
    100% { transform: translate(0, 0); }
  }
  @keyframes parallaxDrift2 {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-14vw, -14vh); }
    40%  { transform: translate(-22vw, 8vh); }
    60%  { transform: translate(-6vw, 22vh); }
    80%  { transform: translate(14vw, 10vh); }
    100% { transform: translate(0, 0); }
  }
  @keyframes parallaxDrift3 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(14vw, -14vh); }
    50%  { transform: translate(10vw, 18vh); }
    75%  { transform: translate(-14vw, 12vh); }
    100% { transform: translate(0, 0); }
  }
}

/* =========================================================
   Página "link na bio" (/links) — estilo Linktree, pedido do usuário em 17/09/2026 pra colar
   na bio do Instagram e juntar site/WhatsApp/Instagram/Google num lugar só. Reaproveita as
   mesmas variáveis de cor/fonte do resto do site (--bg, --accent, --font-display etc), só com
   um layout bem mais estreito e vertical (típico desse tipo de página, otimizado pra celular).
   ========================================================= */
.links-page { padding: 90px 0 60px; }
.links-container { max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.links-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-soft);
  margin-bottom: 18px;
}
.links-name {
  font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; margin: 0 0 6px;
}
.links-tagline { color: var(--fg-muted); margin: 0 0 32px; font-size: 0.95rem; }
.links-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.link-btn {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  width: 100%; padding: 15px 20px; border-radius: 100px;
  border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--fg);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.link-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.link-btn-primary { background: var(--accent); color: #171310; border-color: var(--accent); }
.link-btn-primary:hover { background: #dab643; color: #171310; }
@media (max-width: 480px) {
  .links-page { padding: 70px 0 40px; }
  .link-btn { padding: 13px 16px; font-size: 0.9rem; }
}

/* ---------- Página /orcamento (destino dos anúncios) — 27/09/2026 ----------
   Reaproveita o hero, os cards e o formulário do resto do site; aqui só o que é próprio dela:
   topo um pouco mais baixo (o formulário precisa aparecer logo), texto centralizado sem o
   deslocamento do hero da Home, formulário ao lado da explicação e as avaliações do Google. */
.lp-hero { min-height: 78svh; align-items: center; }
.lp-hero .hero-content { transform: none; padding: 120px 0 64px; }
.lp-sub { max-width: min(620px, calc(100vw - 48px)); box-sizing: border-box; margin: 18px auto 0; color: var(--fg); font-size: 1.1rem; opacity: 0.92; }
.lp-hero .btn-row { justify-content: center; margin-top: 28px; }
.lp-form-section { scroll-margin-top: 80px; }
.lp-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.lp-lead { color: var(--fg-muted); font-size: 1.05rem; margin: 14px 0 22px; max-width: 46ch; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-checks li { display: flex; gap: 10px; align-items: baseline; }
.lp-checks li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.comment-form select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
}
.comment-form select:focus { outline: none; border-color: var(--accent); }
.lp-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.lp-review { margin: 0; border: 1px solid var(--border); background: var(--bg-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.lp-review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.lp-review figcaption { color: var(--fg-muted); font-weight: 600; }
.lp-stars { color: #f6c445; letter-spacing: 3px; font-size: 1.05rem; }
.lp-video-reviews { margin-top: 40px; }
@media (max-width: 860px) {
  .lp-form-split { grid-template-columns: 1fr; gap: 32px; }
  .lp-reviews { grid-template-columns: 1fr; }
  .lp-hero { min-height: 70svh; }
  .lp-hero .hero-content { padding: 110px 0 48px; }
}