/* =============================================================================
   NAVEC LABS — HOME
   Hero com campo de partículas, cena sticky caos→controle, cases.
   Depende de tokens, base, components e layout.
   ========================================================================== */

/* ==========================================================================
   HERO
   dvh, nunca vh: a barra do navegador móvel quebra vh.
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding-block:
    calc(var(--header-h) + var(--space-xl) + var(--safe-t))
    calc(var(--space-xl) + var(--safe-b));
  overflow: hidden;
  isolation: isolate;
}

/* .hero__canvas e .hero__fallback mudaram para components.css:
   são peça compartilhada entre a home e a 404. */


.hero__conteudo {
  position: relative;
  z-index: 2;
  max-width: 68rem;   /* largura em que a headline segura as 2 linhas pretendidas */
}

/* --- Headline em tres niveis --------------------------------------------
   A copy original e uma frase de tres oracoes. Em tamanho display uniforme
   ela estourava em 7 linhas a 1920px. O erro estava no "uniforme": os posts
   do Instagram carregam headlines longas compondo NIVEIS diferentes dentro
   da mesma headline.

   Teto rigido: 4 linhas no desktop, 5 no telefone. Quem cede primeiro e o
   nivel menor. E se ainda assim conflitar com o CTA na primeira tela, a
   headline cede de novo — o CTA nunca cede.

   O max-width vive no BLOCO da headline, nao no conteiner: foi a largura
   solta do conteiner que produziu as 7 linhas. */
/* CORPO ÚNICO, não degraus.
   É o que os posts do Instagram fazem: a headline funciona como BLOCO, e bloco
   com três corpos diferentes não fecha. Os spans continuam existindo — eles
   controlam a quebra e o gradiente —, mas todos herdam o mesmo font-size.

   Cinco linhas, a mais longa com 18 caracteres. A 0,805em por caractere em
   wdth 112%, 18 caracteres cabem nos 74rem do bloco até ~81px de corpo, então
   o teto de 5rem de --step-hero segue válido pela largura. Quem manda na
   altura é --hero-linha-teto, dentro de --step-h1. */
.hero__headline {
  max-width: var(--hero-bloco);
  margin-block: var(--space-xs) var(--space-s);
}

.hero__headline span {
  display: block;
  font-size: inherit;   /* corpo único: nenhum span foge da herança */
}

.hero__lead {
  max-width: 44ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}

/* Os dois cartões de apoio */
.hero__apoio {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid color-mix(in srgb, var(--text-strong) 18%, transparent);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 46rem;
}

.hero__apoio-item {
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--surface-raised) 45%, transparent);
  border: var(--hairline) solid color-mix(in srgb, var(--text-strong) 12%, transparent);
  backdrop-filter: blur(10px);
}

.hero__apoio-item b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--accent);
  margin-block-end: var(--space-3xs);
}

.hero__apoio-item p {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0;
}

.hero__ctas { margin-block-start: var(--space-m); }

.hero__rolar {
  position: absolute;
  inset-block-end: calc(var(--space-2xs) + var(--safe-b));
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  animation: navec-pulo 2.4s var(--ease) infinite;
}

@keyframes navec-pulo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rolar { animation: none; }
}

/* Painel de depuração — só com ?debug=1 */
.hero-debug {
  position: fixed;
  inset-block-end: calc(var(--space-s) + var(--safe-b));
  inset-inline-start: calc(var(--space-s) + var(--safe-l));
  z-index: var(--z-progress);
  min-width: 15rem;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  border: var(--hairline) solid #333a4d;
  background: rgb(6 7 13 / 0.92);
  color: #cdd3e0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  backdrop-filter: blur(8px);
}

.hero-debug b {
  display: block;
  color: #f75d75;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-block-end: var(--space-3xs);
}

.hero-debug dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--space-2xs);
  margin: 0;
}

.hero-debug dt { color: #9aa2b6; }
.hero-debug dd { margin: 0; color: #ffffff; }
.hero-debug[data-estado='rodando'] dd { color: #4fd693; }
.hero-debug[data-estado='parado'] dd { color: #e8b23a; }

.hero-debug button {
  width: 100%;
  min-height: var(--tap-min);
  margin-block-start: var(--space-2xs);
  border: var(--hairline) solid #333a4d;
  border-radius: var(--radius-xs);
  background: #101322;
  color: #cdd3e0;
  font: inherit;
  cursor: pointer;
}

.hero-debug button:hover { border-color: #f75d75; color: #ffffff; }

/* ==========================================================================
   CENA STICKY — caos → controle
   ========================================================================== */
.cena { position: relative; }

.cena__palco {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  grid-template-columns: 1fr;
}

.cena__abertura { max-width: 46rem; }
.cena__abertura p { color: var(--text-muted); margin-block-start: var(--space-s); }

.cena__corpo { display: grid; gap: var(--space-l); }

.cena__passos { display: grid; gap: var(--space-m); }

.cena__passo {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
}

.cena__passo h3 { font-size: var(--step-2); margin-block: var(--space-2xs); }
.cena__passo p { color: var(--text-muted); margin: 0; }

.cena__numero {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background-image: var(--grad-accent);
  color: var(--neutral-0);
  font-family: var(--font-display);
  font-weight: 900;
}

.cena__diagrama { width: 100%; height: auto; }

/* --- Cena fixada ---------------------------------------------------------
   TRAVESSIA FIXA. Cada passo é dono de UMA tela de rolagem, nem mais nem menos.

   Antes:  min-height: 100dvh + (N-1) x 60dvh  ->  percorrivel = 120dvh
           dividido por 3 passos = 40dvh cada. Menos de meia tela por ideia,
           e o último passo só começava em avanco 0,666 — com a seção já
           liberando o pin. Não dava tempo de ler.

   Agora:  min-height: 100dvh + N x 85dvh      ->  percorrivel = N x 85dvh
           dividido por N passos = 85dvh cada, exatos. E a travessia termina
           ANTES de o pin soltar.

   Para calibrar o ritmo, mexa só em --cena-avanco-por-passo. Não mexa na
   fórmula: o JS depende de percorrivel ser exatamente N x esse valor.
   ------------------------------------------------------------------------ */
@media (min-width: 64rem) and (min-height: 43.75rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cena {
    --cena-avanco-por-passo: 85dvh;
    min-height: calc(100dvh + var(--cena-passos, 3) * var(--cena-avanco-por-passo));

    /* Sem padding no modo fixado. O padding da seção empurra o palco para
       baixo, então o pin só engatava 104px depois do topo da trilha — e o
       passo 1 estreava com o palco a top:104, fora do enquadramento. Zerado
       aqui, o começo da trilha coincide com o ponto de pin. O respiro do
       cabeçalho já está no padding do próprio palco. */
    padding-block: 0;
  }

  /* O contêiner precisa ter a altura da TRILHA, não a do palco.
     `height: 100%` contra um pai de min-height resolve para `auto`, então o
     contêiner ficava com exatamente a altura do palco (100dvh) — e sticky não
     tem para onde grudar quando o bloco contenedor tem o tamanho do elemento.
     Era isso: o palco rolava normal, com top 844 no passo 1 e -528 no passo 2.
     `min-height: inherit` herda o calc da trilha e devolve os 255dvh de curso. */
  .cena > .container { min-height: inherit; }

  /* CENTRAGEM.
     O respiro do cabeçalho entra como padding, e a centralização acontece no
     que SOBRA — não na caixa inteira. Era isso que empurrava o conteúdo para
     o topo e deixava meia tela morta embaixo. */
  /* DUAS FAIXAS: a abertura no topo (altura automática) e a área dos passos
     ocupando o que sobra, com o conteúdo centrado NELA.

     A abertura era uma seção separada ACIMA do palco, e o palco só entrava em
     cena uma viewport depois — sobrava quase uma tela vazia entre o subtítulo
     e o passo 1. Trazida para dentro, o buraco deixa de existir por construção,
     e quem chega no passo 2 continua vendo do que a cena trata. */
  .cena__palco {
    position: sticky;
    inset-block-start: 0;
    /* height, nunca min-height: filho de sticky mais alto que a viewport
       quebra o sticky */
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: var(--space-l);
    padding-block-start: calc(var(--header-h) + var(--space-s));
    padding-block-end: var(--space-m);
    overflow: hidden;
  }

  .cena__corpo {
    display: grid;
    grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-l);
    align-content: center;
    min-height: 0;
  }

  /* Cada peça se centra na própria célula, em vez de herdar a altura do
     passo mais alto — que é o que dava buraco nos passos curtos. */
  .cena__progresso,
  .cena__passos,
  .cena__diagrama { align-self: center; }

  .cena__passos { display: grid; }

  .cena__passo {
    grid-area: 1 / 1;
    align-self: center;
    border: 0;
    background: none;
    padding: 0;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    pointer-events: none;
  }

  /* Rede de segurança: sem JS, o passo 1 fica pintado. Nunca tela vazia. */
  .cena__passo:first-child { opacity: 1; transform: none; }

  .cena__passo[data-ativo] {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* visibility fora da lista de transição, de propósito: ela troca na hora.
     Sem isso, quando a transição de opacidade não roda — aba em segundo
     plano, motor exótico — os três passos ficam empilhados e legíveis ao
     mesmo tempo, um por cima do outro. Correção não pode depender de
     animação: opacidade é o efeito, visibility é a garantia. */
  .cena__palco[data-passo] .cena__passo:not([data-ativo]) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    pointer-events: none;
  }

  /* O número redondo do cartão é redundante no modo fixado — quem marca o
     progresso é a trilha lateral, e os dois colidiam. */
  .cena__passo .cena__numero { display: none; }

  .cena__passo h3 { font-size: var(--step-3); }
  .cena__passo p { font-size: var(--step-1); max-width: 34ch; }

  .cena__diagrama { max-height: min(46dvh, 26rem); }
}

/* --- Indicador de progresso ---------------------------------------------
   Sem ele o leitor não sabe que existe resto. Três marcadores numerados numa
   trilha vertical, o ativo no gradiente da marca, os outros em fio de 1px.
   Clicáveis: ninguém fica preso esperando a rolagem entregar o conteúdo.
   ------------------------------------------------------------------------ */
.cena__progresso {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-auto-flow: row;
  gap: var(--space-s);
  position: relative;
}

@media (min-width: 64rem) and (min-height: 43.75rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cena__progresso { display: grid; }
}

/* O fio que liga os marcadores */
.cena__progresso::before {
  content: '';
  position: absolute;
  inset-block: 1.4rem;
  inset-inline-start: calc(var(--tap-min) / 2);
  width: var(--hairline);
  background-color: var(--border-strong);
  opacity: 0.5;
}

.cena__progresso button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--border-strong);
  background-color: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.cena__progresso button:hover { border-color: var(--accent); color: var(--text-strong); }

.cena__progresso li[data-ativo] button {
  border-color: transparent;
  background-image: var(--grad-signature);
  color: var(--neutral-0);
}

/* Versão empilhada — o padrão. Vale sem JS, com movimento reduzido, em telefone,
   tablet e notebook de tela baixa. Três cartões em sequência, e é assim de propósito. */
.no-js .cena,
.cena--estatica { min-height: 0 !important; }

.no-js .cena__palco,
.cena--estatica .cena__palco {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  padding-block: 0 !important;
  align-content: initial !important;
  grid-template-rows: none !important;
}

.no-js .cena__corpo,
.cena--estatica .cena__corpo { grid-template-columns: 1fr !important; }

/* Na versão empilhada cada cartão já traz o próprio número */
.no-js .cena__progresso,
.cena--estatica .cena__progresso { display: none !important; }

.no-js .cena__passo,
.cena--estatica .cena__passo {
  opacity: 1 !important;
  transform: none !important;
  grid-area: auto !important;
  pointer-events: auto !important;
  padding: var(--space-m) !important;
  border: var(--hairline) solid var(--border) !important;
  background-color: var(--surface-raised) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cena { min-height: 0; }
  .cena__palco { position: static; }
  .cena__passo { opacity: 1; transform: none; }
}

/* --- O diagrama -------------------------------------------------------- */
.dg__caixa,
.dg__no,
.dg__linha,
.dg__fluxo {
  transition:
    opacity var(--dur-scene) var(--ease),
    transform var(--dur-scene) var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

.dg__caixa { opacity: 1; }
.dg__linha, .dg__no, .dg__fluxo { opacity: 0; }

/* passo 2: as caixas soltas viram nós ligados */
[data-passo='2'] .dg__caixa { opacity: 0.25; }
[data-passo='2'] .dg__no,
[data-passo='2'] .dg__linha { opacity: 1; }

/* passo 3: tudo converge num fluxo único */
[data-passo='3'] .dg__caixa { opacity: 0; }
[data-passo='3'] .dg__no { opacity: 0.35; }
[data-passo='3'] .dg__linha { opacity: 0.2; }
[data-passo='3'] .dg__fluxo { opacity: 1; }

/* Com movimento reduzido, o diagrama mostra o estado final, completo */
@media (prefers-reduced-motion: reduce) {
  .dg__caixa { opacity: 0; }
  .dg__no { opacity: 0.35; }
  .dg__linha { opacity: 0.2; }
  .dg__fluxo { opacity: 1; }
  .dg__caixa, .dg__no, .dg__linha, .dg__fluxo { transition: none; }
}

/* ==========================================================================
   CASES
   ========================================================================== */
[data-cases] { display: grid; gap: var(--space-m); }

[data-cases][data-cases-forma='grade'] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* --- Forma de destaque: um case só, e a seção parece inteira ------------ */
.case--destaque {
  position: relative;
  display: grid;
  gap: var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
}

@media (min-width: 60rem) {
  .case--destaque {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    padding: var(--space-xl);
  }
}

.case__figura { margin: 0; }

.case__figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-sunken);
}

.case__figura--cartao img { aspect-ratio: 16 / 10; border-radius: var(--radius-m); }

.case__corpo { display: grid; gap: var(--space-xs); align-content: start; }

.case__titulo {
  font-size: var(--step-3);
  margin-block-start: var(--space-3xs);
}

.case--cartao .case__titulo { font-size: var(--step-2); }

.case__subtitulo {
  font-size: var(--step-1);
  color: var(--text-strong);
  font-weight: 600;
  margin: 0;
}

.case--cartao .case__subtitulo { font-size: var(--step-0); }

.case__resumo { color: var(--text-muted); margin: 0; }
.case--cartao .case__resumo { font-size: var(--step--1); }

.case__destaques { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }

.case__destaques li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--step--1);
  color: var(--text);
}

.case__destaques .star-glyph { --star-size: 0.9rem; margin-block-start: 0.35em; }

.case__beneficios { margin-block-start: var(--space-2xs); }
.case__cta { justify-self: start; margin-block-start: var(--space-2xs); }

.case--cartao { gap: var(--space-xs); }

/* Aviso de pré-visualização, só com ?preview=1 */
[data-preview]::before {
  content: 'Pré-visualização: itens PENDENTE estão visíveis porque a URL tem ?preview=1. O visitante não os vê.';
  grid-column: 1 / -1;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  background-color: #ffd84d;
  color: #3a2c00;
  font-size: var(--step--2);
  font-weight: 700;
}

/* ==========================================================================
   PILARES E PLANOS
   ========================================================================== */
.pilar__icone {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.plano { display: flex; flex-direction: column; gap: var(--space-xs); }

.plano--destaque {
  border-color: var(--accent);
  box-shadow: var(--shadow-m);
}

.plano__lista { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }

.plano__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.plano__lista .icon { width: 1.1em; height: 1.1em; color: var(--accent); margin-block-start: 0.3em; }

.plano__lista li[data-fora] { color: var(--text-muted); opacity: 0.55; }
.plano__lista li[data-fora] .icon { color: var(--text-muted); }

.plano .btn { margin-block-start: auto; }

/* ==========================================================================
   CUSTO DE NÃO FAZER NADA
   ========================================================================== */
.custo {
  display: grid;
  gap: var(--space-m);
  justify-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: var(--hairline) solid color-mix(in srgb, var(--text-strong) 14%, transparent);
  background-color: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   HERO EM ALTURA LIMITADA
   Estes blocos precisam vir DEPOIS das regras .hero__*: mesma especificidade,
   quem vem por último vence. Declarados antes, o display:none do apoio era
   silenciosamente ignorado — foi o que a medição pegou.

   A regra: o respiro cede primeiro, depois o reforço, depois o texto de apoio.
   O CTA nunca sai da primeira tela.

   E ficam no FIM do arquivo de propósito. Já quebrou duas vezes por cascata:
   declarados no meio, ora o display:none do apoio perdia, ora o do indicador
   de rolagem. No fim, nada os sobrescreve.
   ========================================================================== */

/* Notebook de 800px, tablet em pé */
@media (max-height: 60rem) {
  .hero {
    padding-block:
      calc(var(--header-h) + var(--space-m) + var(--safe-t))
      calc(var(--space-m) + var(--safe-b));
  }
  .hero__lead { font-size: var(--step-0); }
  .hero__apoio { margin-block-start: var(--space-s); padding-block-start: var(--space-s); }
  .hero__ctas { margin-block-start: var(--space-s); }
}

/* Tela baixa: a hero para de reservar a tela inteira e o reforço sai.
   MEDIDO em 360x640: os cartões de apoio custam 327px — sem eles, o CTA
   passa a caber com folga. */
@media (max-height: 46rem) {
  .hero {
    min-height: 0;
    padding-block:
      calc(var(--header-h) + var(--space-s) + var(--safe-t))
      calc(var(--space-m) + var(--safe-b));
  }
  .hero__apoio { display: none; }
  .hero__rolar { display: none; }
}

/* Telefone deitado (~844x390): o caso mais duro. Sai também o texto de apoio,
   e a headline passa a ser limitada pela ALTURA da tela, não só pela largura.
   MEDIDO: sem isto o CTA ficava 171px abaixo da dobra. */
@media (max-height: 30rem) {
  .hero {
    padding-block:
      calc(var(--header-h) + var(--space-2xs) + var(--safe-t))
      calc(var(--space-s) + var(--safe-b));
  }
  /* O corpo e a entrelinha desta faixa vivem em tokens.css (--hero-linha-teto
     e --leading-display sob a mesma media query). Aqui fica só o que é
     geometria da home: largura do bloco e margem. */
  .hero__headline {
    max-width: 46rem;
    margin-block: 0 var(--space-2xs);
  }
  .hero__lead { display: none; }
  .hero__ctas { margin-block-start: var(--space-xs); }
}