/* =========================================================================
   HALUMA, ESTILO NOVO (22/10/2026)
   =========================================================================
   Sistema visual novo, estreado em /eventos/. NÃO depende do style.css:
   o Edu pediu pra esquecer o que foi feito de design nas outras páginas e
   criar um estilo do zero, pra depois levar às demais. Uma página nova
   carrega só este arquivo (mais um arquivo próprio pro que for dela).

   Referência: o site de um concorrente (produtora de vídeo) é escuro,
   cinematográfico, com a foto ou o vídeo ocupando a primeira tela, título
   gigante sobreposto, pouquíssimo texto e uma ação clara. Daqui saiu a
   direção, mas com a cara da Haluma: o azul da marca como acento, a
   foto como protagonista, e tipografia grande no lugar de caixinhas.

   Decisões, pra quem for aplicar em outra página:
   - Fundo escuro por padrão; no máximo uma faixa clara e uma faixa azul-escuro
     por página pra dar ritmo. O azul vivo NÃO vira fundo de seção (testado no
     contato do /eventos/ e reprovado: brigou com a foto).
   - Duas fontes: Plus Jakarta Sans (destaque: títulos, números, botões) e
     Inter (descritiva: parágrafo, legenda, menu). Nada de serifa.
   - Cantos retos nas fotos, 6px nos botões. Sem cartões, sem sombra.
   - O botão principal é BRANCO sobre fundo escuro: o branco-sobre-preto é
     o contraste mais forte que existe e dispensa gastar o azul em botão.
     (Branco sobre #0078FF dá só 4,0:1, abaixo do mínimo pra texto pequeno.)
     O azul fica pra número, destaque e a faixa de contato.
   - Rótulo pequeno em caixa normal, nunca em maiúsculas espaçadas.
   - Movimento só na entrada do título da primeira tela. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --n-preto: #000000;
  --n-azul: #0078ff;
  --n-azul-medio: #004aad;
  --n-azul-escuro: #002854;
  --n-cinza: #efefef;
  --n-branco: #ffffff;
  --n-texto: rgba(255, 255, 255, 0.78);
  --n-texto-suave: rgba(255, 255, 255, 0.58);
  --n-linha: rgba(255, 255, 255, 0.16);
  --n-tinta: #0a0a0a;
  --n-tinta-suave: rgba(10, 10, 10, 0.68);
  --n-linha-clara: rgba(10, 10, 10, 0.16);

  --n-destaque: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --n-texto-fonte: "Inter", "Segoe UI", system-ui, sans-serif;

  --n-gutter: 20px;
  --n-max: 1240px;
  --n-raio: 6px;
}
@media (min-width: 768px) { :root { --n-gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--n-preto);
  color: var(--n-texto);
  font-family: var(--n-texto-fonte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--n-azul); outline-offset: 3px; }

.n-wrap {
  width: 100%;
  max-width: var(--n-max);
  margin: 0 auto;
  padding-left: max(var(--n-gutter), env(safe-area-inset-left));
  padding-right: max(var(--n-gutter), env(safe-area-inset-right));
}
.n-sec { padding: 84px 0; scroll-margin-top: 72px; }
@media (min-width: 900px) { .n-sec { padding: 128px 0; } }

/* Escala tipográfica. Destaque em 800 com entreletra negativa: quanto
   maior a letra, mais ela precisa fechar. */
.n-h1, .n-h2, .n-h3 { font-family: var(--n-destaque); color: var(--n-branco); text-wrap: balance; }
.n-h1 { font-weight: 800; font-size: clamp(2.5rem, 9.2vw, 6.6rem); line-height: 0.98; letter-spacing: -0.04em; }
.n-h2 { font-weight: 800; font-size: clamp(2rem, 5.6vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }
.n-h3 { font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
.n-sub { max-width: 56ch; font-size: 1.125rem; color: var(--n-texto); }
.n-rotulo { font-family: var(--n-texto-fonte); font-size: 0.95rem; font-weight: 500; color: #6db0ff; }

/* Botões */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font-family: var(--n-destaque); font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: var(--n-raio);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.n-btn--branco { background: var(--n-branco); color: var(--n-preto); }
.n-btn--branco:hover { background: #dce9ff; }
.n-btn--contorno { background: transparent; color: var(--n-branco); border-color: rgba(255, 255, 255, 0.5); }
.n-btn--contorno:hover { border-color: var(--n-branco); background: rgba(255, 255, 255, 0.08); }
.n-btn--preto { background: var(--n-preto); color: var(--n-branco); }
.n-btn--preto:hover { background: #0a1c36; }
.n-btn--p { min-height: 42px; padding: 0 18px; font-size: 0.92rem; }
.n-btn--g { min-height: 60px; padding: 0 34px; font-size: 1.08rem; }
.n-btn[hidden] { display: none; }

/* Cabeçalho: transparente sobre a foto, sólido depois que a página rola. */
.n-topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background .3s ease, backdrop-filter .3s ease;
}
.n-topo.is-solido { background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.n-topo-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.n-logo img { height: 34px; width: auto; }
.n-nav { display: none; gap: 34px; margin-left: auto; margin-right: 8px; }
.n-nav a { font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--n-texto); transition: color .2s ease; }
.n-nav a:hover { color: var(--n-branco); }
@media (min-width: 820px) { .n-nav { display: flex; } }

/* Rodapé */
.n-rodape { background: var(--n-preto); border-top: 1px solid var(--n-linha); padding: 44px 0 52px; }
.n-rodape-in { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.n-rodape img { height: 34px; width: auto; }
.n-rodape p { font-size: 0.9rem; color: var(--n-texto-suave); }
.n-redes { display: flex; gap: 10px; }
.n-redes a {
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.25rem;
  border: 1px solid var(--n-linha); border-radius: 50%; color: var(--n-branco); text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.n-redes a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--n-branco); }
@media (min-width: 820px) {
  .n-rodape-in { flex-direction: row; align-items: center; justify-content: space-between; }
}


/* ======================= COMPONENTES COMPARTILHADOS =======================
   Saíram do novo-eventos.css em 22/10/2026, quando o /portfolio/ passou pro
   estilo novo e passou a usar os mesmos blocos. */

/* ---------- primeira tela ----------
   A foto é a tela. O título fica embaixo à esquerda, enorme, porque é onde
   o olho termina de ler a foto. O degradê sobe só do pé: o céu e a ação da
   foto ficam limpos. A altura é a da janela, mas com teto, pra tela muito
   alta não esticar a foto além da conta. */
.n-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(100svh, 920px); min-height: min(100dvh, 920px);
  background: var(--n-preto); overflow: hidden;
}
.n-hero-foto { position: absolute; inset: 0; }
.n-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-pos, 50% 40%); }
.n-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.4) 66%, rgba(0, 0, 0, 0) 88%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%);
}
.n-hero-in { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 56px; }
@media (min-width: 900px) { .n-hero-in { padding-bottom: 84px; } }
.n-hero .n-h1 { max-width: 9em; font-size: clamp(2.6rem, 8.4vw, 5.6rem); }
.n-hero-col { position: relative; }
.n-hero-sub { margin-top: 18px; max-width: 30ch; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.n-hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }


/* No celular a foto é retrato e o texto é longo: por cima da foto o título
   caía em cima do capacete do piloto. Aqui a foto ocupa a parte de cima e
   se dissolve no preto, e o texto começa na dissolução (margem negativa),
   então nada fica sobre o rosto. */
@media (max-width: 819px) {
  .n-hero { display: block; min-height: 0; }
  .n-hero::after { display: none; }
  .n-hero-foto { position: relative; inset: auto; height: 62svh; max-height: 560px; }
  .n-hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0) 58%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%); }
  .n-hero-in { margin-top: -96px; padding-top: 0; padding-bottom: 48px; }
}
/* A única animação da página: o título e o resto entram em sequência, uma
   vez, quando a página abre. Sem JavaScript e respeitando quem pediu
   menos movimento. O estado final é o estado normal (nada fica invisível
   se a animação não rodar). */
@media (prefers-reduced-motion: no-preference) {
  .n-hero .n-h1, .n-hero-sub, .n-hero-acoes, .n-hero-local { animation: n-sobe .9s cubic-bezier(.2, .7, .2, 1) both; }
  .n-hero-sub { animation-delay: .12s; }
  .n-hero-acoes { animation-delay: .22s; }
  .n-hero-local { animation-delay: .3s; }
}
@keyframes n-sobe { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- portfólio ----------
   Mosaico de borda a borda. ⚠️ A composição é uma CONTA: com
   grid-auto-flow dense a última fileira só fecha sem buraco se a área
   total for divisível pelo número de colunas (2, 4 e 6), contando
   .is-grande como 4 células e .is-larga como 2. Visível: 2 largas + 3
   grandes + 8 simples = 24. Escondida: 2 grandes + 4 simples = 12. A altura
   da fileira é calculada (100cqw) e toda foto tem width E height 100%, pra
   o único espaço entre elas ser o gap. Ao mexer nas colunas, mexer no
   grid-auto-rows do mesmo ponto de quebra (gap: 2 col = 3px, 4 = 9px,
   6 = 15px). */
.gl-full { width: 100%; margin-top: 52px; container-type: inline-size; }
.gl {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 3px;
  grid-auto-rows: calc((100cqw - 3px) / 2 * 1.25);
}
.gl + .gl { margin-top: 3px; }
.gl[hidden] { display: none; }
.gl-item { width: 100%; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #0d1118; }
.gl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
@media (hover: hover) and (pointer: fine) { .gl-item:hover img { transform: scale(1.04); } }
.gl-item.is-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 5; }
.gl-item.is-larga { grid-column: span 2; aspect-ratio: 8 / 5; }
@media (min-width: 768px) {
  .gl { grid-template-columns: repeat(4, 1fr); gap: 3px; grid-auto-rows: calc((100cqw - 9px) / 4 * 1.25); }
}
@media (min-width: 1280px) {
  .gl { grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc((100cqw - 15px) / 6 * 1.25); }
}

/* faixa clara */
.n-claro { background: var(--n-cinza); color: var(--n-tinta-suave); }
.n-claro .n-h2, .n-claro .n-h3 { color: var(--n-tinta); }
.n-claro .n-rotulo { color: var(--n-azul-medio); }

/* ---------- contato ----------
   Metade a metade, como na referência (o concorrente tem a foto da equipe
   numa metade inteira e o texto na outra): a foto ocupa 50% da largura de
   borda a borda, de cima a baixo da faixa, com object-fit cover e o
   enquadramento puxado pro rosto. Sem degradê, sem vão preto no meio.
   Tentativas reprovadas pelo Edu, na ordem: faixa azul com a foto num
   quadrado; foto de 52% que cortava o rosto conforme a janela; foto 2:3
   encostada no canto direito, que num monitor largo ficava pequena e longe
   do texto com um vão preto no meio.
   Abaixo de 760px empilha: foto em cima, texto embaixo. */
.n-metade { position: relative; background: var(--n-preto); overflow: hidden; }
.n-metade-foto { position: relative; height: 62svh; max-height: 520px; }
.n-metade-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.n-metade-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 18%, rgba(0, 0, 0, 0) 60%); }
.n-metade-in { position: relative; margin-top: -90px; padding-bottom: 72px; }
.n-metade-texto p { max-width: 46ch; font-size: 1.1rem; color: var(--n-texto); margin-top: 20px; }
.n-metade-texto p + p { margin-top: 10px; }
.n-metade .n-h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; max-width: 9em; }
.n-metade .n-btn { margin-top: 32px; }
.n-metade-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; font-weight: 500; }
.n-metade-links a { text-underline-offset: 4px; color: var(--n-branco); }
/* 50/50 sem corte (Edu): a foto ocupa exatamente metade da largura e a
   altura da faixa SEGUE a foto (aspect-ratio 2:3), então quanto mais larga a
   tela, mais alta a faixa e maior a foto, sempre inteira. A conta é altura =
   75% da largura da janela: 960px a 1280, 1440px a 1920. É alto de propósito:
   a alternativa era cortar, e o corte foi reprovado quatro vezes. Se um dia
   for alto demais, a saída é uma foto sua na horizontal, não um teto aqui. */
@media (min-width: 760px) {
  .n-metade { display: grid; grid-template-columns: 1fr 1fr; }
  .n-metade-foto { height: auto; max-height: none; aspect-ratio: 2 / 3; }
  .n-metade-foto::after { display: none; }
  .n-metade-in { margin: 0; max-width: none; display: flex; align-items: center; padding: 80px clamp(28px, 5vw, 96px); }
  .n-metade-texto { max-width: 520px; }
}

/* Primeira tela com o texto à DIREITA: pra foto em que o assunto está à
   esquerda (ex.: casal no /portfolio/). Só em tela larga; no celular a foto
   fica em cima e o texto embaixo, igual à versão padrão. */
@media (min-width: 820px) {
  .n-hero--dir::after {
    background:
      linear-gradient(to left, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 74%),
      linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 40%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%);
  }
  .n-hero--dir .n-hero-col { margin-left: auto; max-width: var(--col-max, 560px); }
}

/* ---------- como funciona ---------- */
.n-passos { display: grid; gap: 0; margin-top: 56px; counter-reset: passo; }
.n-passos li { padding: 26px 0; border-top: 1px solid var(--n-linha); }
.n-passos li::before {
  counter-increment: passo; content: counter(passo);
  display: block; margin-bottom: 14px;
  font-family: var(--n-destaque); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; color: var(--n-azul);
}
.n-passos strong { display: block; font-family: var(--n-destaque); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--n-branco); margin-bottom: 8px; }
@media (min-width: 900px) {
  .n-passos { grid-template-columns: repeat(4, 1fr); gap: 36px; }
  .n-passos li { padding-top: 30px; }
}


/* Primeira tela BAIXA: pra página em que o que a pessoa veio fazer (um
   formulário, por exemplo) está logo abaixo e não deve ficar atrás de uma
   tela inteira de foto. */
.n-hero--baixa { min-height: min(68svh, 620px); min-height: min(68dvh, 620px); }
@media (max-width: 819px) { .n-hero--baixa .n-hero-foto { height: 52svh; max-height: 440px; } }
/* Primeira tela LADO A LADO: texto em fundo preto de um lado, a foto
   ocupando a outra metade, de borda a borda e de cima a baixo. Pra foto em
   que o rosto está no centro (como a do Edu em /talentos/): por cima dela o
   título cobria o rosto, aqui nada se sobrepõe. Só em tela larga; no celular
   vale a versão empilhada de sempre (foto em cima, texto embaixo). */
@media (min-width: 820px) {
  .n-hero--lado { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .n-hero--lado::after { display: none; }
  .n-hero--lado .n-hero-foto { position: relative; inset: auto; order: 2; }
  /* a imagem preenche a célula sem ditar a altura dela (senão a proporção da foto, 2:3, esticava a faixa pra ~950px) */
  .n-hero--lado .n-hero-foto img { position: absolute; inset: 0; }
  .n-hero--lado .n-hero-in { order: 1; align-self: center; margin: 0; max-width: none; padding: 120px clamp(28px, 5vw, 80px) 72px max(var(--n-gutter), calc((100vw - var(--n-max)) / 2 + var(--n-gutter))); }
  .n-hero--lado .n-hero-col { max-width: 520px; }
}
/* Regra do topo (23/10/2026): quando o logo é a ÚNICA coisa do topo (sem menu
   nem botão), ele fica no centro. Vale pra qualquer página do estilo novo,
   hoje o /talentos/. Se um dia entrar menu ou botão, o logo volta pra esquerda
   sozinho. */
.n-topo-in:has(> .n-logo:only-child) { justify-content: center; }

/* Contraste do logo do topo sobre foto (23/10/2026). Com o logo no centro do
   /talentos/, ele cai na emenda entre o preto e a foto clara do Edu, e o
   branco some nas partes laranja. Duas ajudas: um degradê escuro só no topo
   (antes da rolagem; depois dela o topo já fica escuro sólido) e uma sombra
   suave atrás do próprio logo. */
.n-topo:not(.is-solido) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%); }
.n-logo img { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.6)); }