/* Estilos específicos da home institucional — hero, timeline de metodologia, stat inline,
   posicionamento de ilustração. Só o que não existe em tokens/base/components/animations.css
   (esses quatro são copiados sem alteração de dashboard_animado_npdtub/ — ver claude.md).

   ARMADILHA (achada em 2026-08-09): nunca combinar ".anima-flutuar" com ".fade-in"/
   ".fade-in-2"/".fade-in-3" no mesmo elemento. Todas essas classes setam a propriedade CSS
   `animation` (shorthand) — a que vier depois no arquivo animations.css vence e sobrescreve a
   outra por completo (não são aditivas). Como ".anima-flutuar" vem depois, ela ganha e a
   animação de fade nunca roda — mas o `opacity: 0` inicial do fade-in fica, deixando o
   elemento permanentemente invisível (opacity computado trava em 0, sem erro no console).
   Se precisar de flutuação + entrada suave no mesmo elemento, envolver em dois elementos
   aninhados (um com cada classe) em vez de empilhar as duas no mesmo. */

/* Cabeçalho: logo na extrema esquerda da tela, navbar (pill) na extrema direita, usando toda
   a largura disponível — pedido do Navarro (2026-08-09). Reaproveita ".topo" (fixo, z-index,
   display:flex) e ".topo nav" (estilo do pill) de components.css sem alterar o arquivo
   original: só sobrescreve o que muda (era "justify-content:center" com um pill só; agora é
   "space-between" com logo + pill como filhos diretos, cada um numa ponta). O
   "width:100%;max-width:64rem" original do pill também é anulado — senão ele ainda tentaria
   ocupar a largura toda mesmo sozinho no canto direito. Fundo com gradiente + blur no
   cabeçalho inteiro (não só no pill) pra manter o texto legível quando o conteúdo rola por
   baixo dele (fixo, sobrepõe visualmente por design, mas nunca esconde o topo de cada seção —
   ver "scroll-margin-top" abaixo, que resolve isso pros links âncora). */
.topo {
  top: 0;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  background: linear-gradient(to bottom, rgba(5,11,20,.92) 0%, rgba(5,11,20,.55) 70%, transparent 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topo .marca-solo img { height: 68px; width: auto; display: block; }
.topo nav { width: auto; max-width: none; }
@media (max-width: 700px) {
  .topo { padding: 1.1rem 1.25rem; }
  .topo .marca-solo img { height: 46px; }
}

/* Todo link âncora (#servicos, #metodologia, #contato) precisa dessa margem — senão o topo
   da seção alvo fica escondido atrás do cabeçalho fixo ao rolar até ela (pedido explícito:
   "sem que o navbar sobreponha o conteúdo"). Valor cobre a altura do cabeçalho (~68px de logo
   + padding) com folga. */
.secao { scroll-margin-top: 6.5rem; }

/* Revelação suave de cada seção ao rolar ("dobra de página") — JS em
   assets/js/scroll-revelar.js adiciona .secao-visivel via IntersectionObserver na primeira
   vez que a seção entra na tela. Sem JS (ver <noscript> no head) ou em caso de falha, o
   conteúdo já nasce visível — nunca fica escondido de quem desativou JS. Duração/curva
   herdam o corte de "prefers-reduced-motion: reduce" já definido globalmente em
   animations.css (transition-duration: 0.01ms), sem precisar duplicar a media query aqui. */
.secao { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.secao.secao-visivel { opacity: 1; transform: translateY(0); }

.hero {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 9.5rem 1.5rem 6rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero .conteudo-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.15; margin: 1.1rem 0 1.25rem; }
.hero .conteudo-hero p.chamada { margin-bottom: 2.2rem; }
.hero .botoes { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero .imagem-hero img {
  width: 100%; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 7.5rem; text-align: center; }
  .hero .botoes { justify-content: center; }
  .hero .imagem-hero { order: -1; max-width: 340px; margin: 0 auto; }
}

/* Quem somos — texto + imagem lado a lado dentro da .faixa. Ilustração é PNG com fundo
   removido (chroma-key, ver README de assets/), por isso sem moldura/borda — flutua livre
   sobre o fundo animado, igual à imagem do hero. */
.quem-somos-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.quem-somos-grade img {
  width: 100%; display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
@media (max-width: 900px) { .quem-somos-grade { grid-template-columns: 1fr; } }

/* stat de destaque embutido no card de isométricos */
.stat-inline { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--traco); display: flex; align-items: baseline; gap: .6rem; }
.stat-inline .numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; color: var(--ciano-claro); line-height: 1; }
.stat-inline .legenda { font-size: .78rem; color: var(--texto-terciario); }

/* timeline de metodologia */
.timeline-metodologia { display: grid; gap: 2.25rem; margin-top: 2.5rem; }
.passo-metodologia { display: flex; gap: 1.5rem; align-items: flex-start; }
.passo-metodologia .etapa-num { flex-shrink: 0; width: 3.4rem; }
.passo-metodologia h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.passo-metodologia p { font-size: .92rem; color: var(--texto-secundario); line-height: 1.6; margin: 0; }