/* ==========================================================================
   NEXUS theme-final / assets/css/sections/metodo.css
   Territorio exclusivo desta secao (contrato §1: "CSS por secao"). So
   consome tokens de 01-tokens.css e primitivos de 03-ui.css/04-sections.css.
   Nenhum hex, nenhum px de raio, nenhuma familia de fonte literal.

   Timeline vertical de duas colunas (trilho + conteudo), constante do
   mobile ao 4K: no requisito da secao a timeline fica sempre a esquerda com
   o conteudo a direita, sem quebrar em nenhuma largura. O que muda entre
   telas e so a folga (gap, tipografia fluida), nunca a estrutura da grade.

   Acima de 1560px a secao inteira passa a duas colunas (cabecalho fixo a
   esquerda, timeline a direita) para nao deixar faixa morta; a estrutura da
   timeline em si continua a mesma. Ver bloco 0 abaixo.

   Motion: so transform e opacity animam. A linha de progresso preenche via
   transform: scaleY(...) a partir do topo (transform-origin: top), nunca
   via height. Duracao sempre multiplicada por var(--motion); o reset global
   de prefers-reduced-motion (02-base.css §7) zera qualquer transicao aqui
   tambem, sem necessidade de media query propria.
   ========================================================================== */

.metodo {
  --metodo-node: calc(var(--fs-h3) * 1.5);
  --metodo-gap: clamp(1rem, 0.75rem + 1.1vw, 2rem);

  /* Corte do trilho no último nó (agosto/2026, pedido do dono): ver bloco
     "Trilho" abaixo para a explicação completa. --metodo-line-cut é a folga
     extra, além do meio-nó já descontado em .metodo__line, que compensa a
     etapa 05 ter texto mais alto que o próprio nó.

     ATENÇÃO, MUDOU NA 14ª RODADA (06/08/2026): estes valores deixaram de ser
     a fonte da verdade e passaram a ser FALLBACK SEM JS. Quem manda agora é
     `partials/metodo.js`, que mede a geometria real da última etapa (por
     offset, não por rect, para não se calibrar no meio da revelação) e
     escreve `--metodo-line-cut` em pixel no próprio `.metodo__timeline`, no
     mount, quando as fontes assentam e a cada mudança de tamanho.

     O motivo é que a estimativa fixa envelhece sozinha: esta rodada
     acrescentou o parágrafo "Entregável" às cinco etapas, a etapa 05 ficou
     mais alta, e o trilho voltou a atravessar o nó 05 nas CINCO peles, de 34
     a 137px além do centro. Recalibrar os doze números só adiaria o mesmo
     defeito para a próxima mudança de copy. Medido depois da correção, nas
     cinco peles, nos dois modos, em 1440x900 e 390x844: o trilho fecha de 1 a
     3px ANTES do centro do nó 05, que é o lado seguro do erro.

     Quem mexer aqui: mexer nestes rem só muda o que aparece sem JS. Para
     mudar o comportamento real, o arquivo é `partials/metodo.js`. */
  --metodo-line-cut: 11.5rem;
}

@media (min-width: 420px) {
  .metodo { --metodo-line-cut: 10.25rem; }
}

@media (min-width: 490px) {
  .metodo { --metodo-line-cut: 8.75rem; }
}

@media (min-width: 768px) {
  .metodo { --metodo-line-cut: 5.25rem; }
}

/* Duas peles mudam quanto texto da última etapa some abaixo do nó, então
   herdam o corte acima mas com folga própria — território desta seção, não
   das folhas de pele, porque o problema é sempre "onde o trilho para",
   nunca a pintura da pele em si.

   GLASS: .metodo__title/legend/text não mudam de tamanho, mas
   .metodo__timeline ganha max-width própria (--measure + 12rem,
   06-skin-glass.css §6.2) — a coluna de conteúdo passa por pontos de quebra
   de linha diferentes dos da pele default nas mesmas larguras, então a
   última etapa às vezes fecha em uma linha a mais.

   SMOOTH: .metodo__content vira cartão (padding var(--space-6)
   var(--space-7), 10-skin-smooth.css §11) — o padding-block sozinho já soma
   2 × var(--space-6) de altura que a pele default não tem. */
:is([data-skin="glass"]) .metodo {
  --metodo-line-cut: 14.5rem;
}

@media (min-width: 420px) {
  :is([data-skin="glass"]) .metodo { --metodo-line-cut: 16rem; }
}

@media (min-width: 490px) {
  :is([data-skin="glass"]) .metodo { --metodo-line-cut: 11.25rem; }
}

@media (min-width: 700px) {
  :is([data-skin="glass"]) .metodo { --metodo-line-cut: 8.5rem; }
}

:is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .metodo {
  --metodo-line-cut: 21rem;
}

@media (min-width: 420px) {
  :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .metodo {
    --metodo-line-cut: 17rem;
  }
}

@media (min-width: 490px) {
  :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .metodo {
    --metodo-line-cut: 15.5rem;
  }
}

@media (min-width: 700px) {
  :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .metodo {
    --metodo-line-cut: 11.5rem;
  }
}

.metodo__timeline {
  position: relative;
  margin-block-start: var(--space-2);
}

/* Vão entre o lead e a timeline (agosto/2026, pedido do dono: "encosta mais
   as coisas"). .section__head já carrega margin-block-end de 02-base.css
   (respiro padrão de QUALQUER cabeçalho de seção), e .metodo__layout, logo
   abaixo, soma o próprio gap entre a coluna do cabeçalho e a da timeline: as
   duas folgas se acumulavam (até ~88px no mobile) porque ambas resolvem o
   mesmo problema (separar cabeçalho de conteúdo) em camadas diferentes. A
   mesma correção já existe em #govtech, por um motivo idêntico (ver
   sections/govtech.css §1): zera a margem própria do cabeçalho e deixa
   .metodo__layout ser a ÚNICA fonte do respiro entre os dois blocos. */
.metodo__intro > .section__head {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   0. Aproveitamento de largura acima de 1560px
   Cabecalho a esquerda, timeline a direita.

   Por que existe: a timeline e uma coluna de texto travada em 68ch
   (--measure, §3 do contrato). Enquanto o container media 1240px isso
   ocupava a largura toda; com a rampa do §7.3 (1420px a partir de 1560 e
   1600px a partir de 1900) a mesma coluna passou a ocupar 49% do espaco e
   sobrou uma faixa morta de cerca de 730px ao longo de 1668px de altura,
   com o cabecalho tambem espremido a esquerda. Metade da tela vazia.

   A correcao nao inventa etapa nem texto: move o cabecalho, que ja existia,
   para a coluna que sobrava. A largura da coluna da timeline e exatamente o
   que ela sabe usar (no + folga + 68ch de texto) e o cabecalho fica com o
   resto, entao nao ha faixa morta em nenhum dos lados e nenhuma linha de
   texto passa da medida maxima.

   O limiar e 1560px porque e onde o container cresce. Abaixo disso a coluna
   do cabecalho ficaria estreita demais para um h2 de --fs-h2 (o titulo
   quebraria em sete linhas), entao ali o layout continua empilhado, como
   sempre foi.
   -------------------------------------------------------------------------- */

.metodo__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

/* BLOCO CENTRALIZADO ABAIXO DE 1560px (agosto/2026, pergunta do dono diante
   da captura: "essa resolução do método não deveria estar no meio?").

   Diagnóstico: entre o fim do empilhamento (sempre) e o degrau de 1560px
   onde o layout ganha a segunda coluna (bloco 0 logo abaixo), o container
   já cresce até --container, 1280px (§7.3 de 02-base.css), mas nada dentro
   de .metodo__layout usa essa largura — .section__head trava sozinho em
   min(100%, 44rem) (02-base.css) e a timeline não tem teto próprio nenhum
   aqui, então ela também empurra o texto só até no + folga + measure de
   .metodo__content, sobrando o resto da linha em branco. As duas colunas
   virtuais (cabeçalho e timeline) ficavam coladas na borda esquerda do
   container com uma faixa vazia inteira à direita — o "colado à esquerda,
   metade da tela vazia" da captura.

   Correção: dar ao BLOCO INTEIRO (cabeçalho + timeline juntos, já que abaixo
   de 1560px eles são uma coluna só) um teto de largura e centralizá-lo com
   margin-inline: auto — a mesma fórmula que a coluna da timeline já usa lá
   embaixo no bloco 0 (no + folga + measure), porque é o maior conteúdo real
   que esse bloco precisa acomodar na horizontal; o cabeçalho, mais estreito
   que isso mesmo no seu próprio teto de 44rem, simplesmente ocupa menos
   espaço dentro do bloco já centralizado. Não muda a ordem vertical em
   nada — cabeçalho continua acima da timeline, cada etapa continua com o nó
   e o texto na mesma linha da grade — então a leitura da sequência
   numerada (1 a 5, de cima para baixo) não piora; só a posição horizontal
   do conjunto muda, de colado-à-esquerda para centralizado no container.

   Acima de 1560px o bloco 0 assume: ali as duas colunas (cabeçalho e
   timeline) já têm largura própria declarada e o próprio
   `justify-content: center` da regra abaixo centraliza a sobra nas margens
   — o teto e a centralização daqui são neutralizados para não conflitar
   com esse mecanismo mais fino. */
.metodo__layout {
  max-width: calc(var(--measure) + var(--metodo-node) + var(--metodo-gap));
  margin-inline: auto;
}

/* Rodada de agosto de 2026, defeito 8: a coluna da esquerda ficava vazia
   por centenas de pixels enquanto a timeline continuava descendo. Medido em
   1920x1080, escuro, maior faixa vazia da coluna esquerda visivel ao lado de
   conteudo da timeline, varrendo a secao inteira em passos de um terco de
   viewport: 639px em index.html e 684px em index3.html, em uma coluna de
   ~760px de largura. Ou seja, quase meio milhao de pixels quadrados de nada.

   As tres saidas possiveis eram: o cabecalho acompanhar a rolagem por mais
   tempo, ganhar conteudo de apoio, ou mudar a proporcao das colunas. A do
   meio esta fora, porque exigiria inventar texto que nao existe em
   content.js (§9.2). As outras duas foram aplicadas juntas:

   1. PROPORCAO. A coluna do cabecalho deixa de ser "todo o resto" (1fr, que
      em 1920 dava 760px para 224px de conteudo) e passa a ser uma barra
      lateral de largura declarada. A folga que sobra da largura vai para as
      margens do bloco, centralizado, onde le como respiro de pagina e nao
      como buraco entre duas colunas. A coluna da timeline nao muda: continua
      exatamente no + folga + 68ch, que e o que ela sabe usar.

   2. CURSO DE ROLAGEM. O cabecalho continua grudento, mas nao mais colado no
      topo: descansa a uma distancia do topo que o deixa oticamente centrado
      na altura da janela. Assim a faixa vazia deixa de ser um bloco unico
      embaixo dele e vira duas metades, uma acima e outra abaixo, que leem
      como margem do bloco. E o cabecalho passa a ocupar uma fracao minima da
      altura da janela, distribuindo rotulo, titulo e lead nesse espaco, em
      vez de terminar logo depois do lead.
   -------------------------------------------------------------------------- */

@media (min-width: 1560px) {
  .metodo__layout {
    /* Neutraliza o teto único do bloco abaixo de 1560px (logo acima): aqui
       cada coluna já declara a própria largura, e é o justify-content
       abaixo que centraliza a sobra — um max-width herdado do bloco
       estreito prenderia as duas colunas juntas num teto menor do que a
       soma delas. */
    max-width: none;
    margin-inline: 0;

    grid-template-columns:
      minmax(0, clamp(19rem, 25vw, 26rem))
      minmax(0, calc(var(--measure) + var(--metodo-node) + var(--metodo-gap)));
    gap: var(--space-16);

    /* As duas trilhas tem largura propria e nao ha 1fr para engolir a sobra:
       a sobra vai para as margens do bloco, nao para dentro da coluna do
       cabecalho, que e exatamente o defeito. Centralizar em vez de fixar uma
       largura maxima mantem isso valido em qualquer gap, inclusive o gap
       menor que a pele surface aplica. */
    justify-content: center;
  }

  /* O cabecalho acompanha a rolagem das cinco etapas. Sticky no filho, e nao
     no item de grade: o item precisa continuar esticado (align-self padrao)
     para que exista curso de rolagem; um item alinhado ao topo teria a
     altura do proprio conteudo e o sticky nao teria para onde ir. */
  .metodo__intro > .section__head {
    position: sticky;

    /* Ponto de descanso oticamente centrado: nunca acima do cabecalho fixo do
       site, e a partir dai proporcional a altura da janela. Em 1920x1080 da
       ~248px, entao a faixa vazia de ~640px que ficava toda embaixo do
       cabecalho vira duas de ~250px, uma de cada lado. */
    inset-block-start: max(
      calc(var(--header-h) + var(--space-6)),
      23svh
    );
    margin-block-end: 0;

    /* O cabecalho ocupa uma fracao da janela em vez de terminar logo depois
       do lead, e distribui rotulo, titulo e lead nessa altura. O piso e
       min(...) com 100% para que ele nunca fique mais alto do que a propria
       coluna, o que travaria o curso do sticky. */
    min-block-size: min(42svh, 100%);
    align-content: space-between;
    row-gap: var(--space-6);
  }

  .metodo__timeline {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Trilho: linha neutra de fundo (track) + linha de progresso sobreposta.
   Ambas absolutas, centralizadas no eixo dos nos, encolhidas meio-no em
   cima e embaixo para o traco ir de centro a centro, sem sobrar ponta.
   -------------------------------------------------------------------------- */

/* O TRILHO PARA NO NÓ 05, NÃO DEPOIS (pedido do dono, agosto/2026,
   reforçado por captura: "a linha atravessa o nó 05 e continua para
   baixo"). .metodo__line é absolutamente posicionado dentro de
   .metodo__timeline (§ acima), e a extremidade de baixo usava o mesmo meio-
   nó de folga que a extremidade de cima (inset-block: calc(node/2) valia
   para os dois lados). Isso está certo no TOPO — a primeira etapa é o
   filho mais alto de .metodo__list, então meio-nó a partir do topo do
   container cai exatamente no centro do primeiro nó — mas está errado na
   BASE: cada linha de .metodo__step usa align-items: start (o nó e o bloco
   de texto começam juntos no topo da própria linha da grade), e o bloco de
   texto é sempre mais alto que o nó circular. A ALTURA DA LINHA DE GRADE,
   e portanto a altura de .metodo__timeline, é ditada pelo texto, não pelo
   nó — então "meio-nó a partir da base do container" cai bem abaixo do
   centro do nó 05, dentro do próprio parágrafo da última etapa.

   Não há como medir em CSS puro "onde termina o texto da última etapa"
   sem tocar no script (proibido: metodo.js é território de outro agente,
   e o próprio JS não mede pixel nenhum aqui — o preenchimento anima por
   FRAÇÃO de etapas, scaleY((etapa+1)/total), então a altura de .metodo__line
   É o que define onde "100% preenchido" para). A folga extra que falta
   fica em --metodo-line-cut (bloco .metodo acima): medida na etapa 05 real
   ("Transferência") nas larguras de 360 a 1920px pelo harness do projeto
   (scripts/shots.mjs-style, getBoundingClientRect), com uma margem de
   segurança para nunca sobrar traço abaixo do nó — o erro seguro aqui é
   parar um pouco ANTES do centro do nó, nunca depois. */
.metodo__line {
  position: absolute;
  inset-inline-start: calc((var(--metodo-node) - var(--hairline) * 2) / 2);
  inset-block-start: calc(var(--metodo-node) / 2);
  inset-block-end: calc(var(--metodo-node) / 2 + var(--metodo-line-cut));
  inline-size: calc(var(--hairline) * 2);
  background-color: hsl(var(--border));
  border-radius: var(--radius-full);
  overflow: hidden;
}

.metodo__line-fill {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100%;
  background-image: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--primary) / 0.55));
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
  transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Lista de etapas
   -------------------------------------------------------------------------- */

.metodo__list {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.metodo__step {
  display: grid;
  grid-template-columns: var(--metodo-node) 1fr;
  column-gap: var(--metodo-gap);
  align-items: start;
}

.metodo__rail {
  display: flex;
  justify-content: center;
  padding-block-start: calc((var(--metodo-node) - var(--fs-h3) * var(--lh-tight)) / 2);
}

.metodo__node {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--metodo-node);
  block-size: var(--metodo-node);
  border-radius: var(--radius-full);
  border: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--surface-2));
  color: hsl(var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  transition:
    background-color calc(var(--dur-base) * var(--motion)) var(--ease-out),
    border-color calc(var(--dur-base) * var(--motion)) var(--ease-out),
    color calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

/* Ativado por JS quando a linha de progresso alcanca a etapa. */
.metodo__node[data-metodo-active] {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transform: scale(1.08);
}

.metodo__content {
  display: grid;
  gap: var(--space-2);
  padding-block-start: calc((var(--metodo-node) - var(--fs-h3) * var(--lh-tight)) / 2);
  max-width: var(--measure);
}

.metodo__title {
  margin: 0;
  font-size: var(--fs-h3);
}

/* A legenda é TEXTO, e o piso dela é 4,5 contra a superfície que hospeda a
   etapa, que muda com a pele. --primary não carrega esse piso: a paleta
   garante a primária contra --primary-foreground (preenchimento) e contra o
   fundo a 3:1 (limite). Na paleta neutra a diferença não aparecia, porque a
   primária de fábrica é quase a própria --foreground; com um preset
   cromático esta linha descia para a faixa de 2,3:1. Como o papel é texto, a
   tinta passa a ser --foreground (§2.5).

   A HIERARQUIA NÃO DEPENDIA DA COR, e continua não dependendo: o degrau
   entre título, legenda e corpo vem do tamanho (h3, sm, base), do peso (650
   contra 400) e da entrelinha, que é exatamente o que o §2.5 descreve como
   fonte de subordinação. O croma da marca continua na trilha e no nó da
   etapa, que são superfície pintada de --primary, não tinta de glifo. */
.metodo__legend {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.45;
  color: hsl(var(--foreground));
}

.metodo__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: hsl(var(--muted-foreground));
}

/* Entregável da etapa (06/08/2026, reforma editorial, item H da spec do dono).
   Uma linha por etapa, com os artefatos separados por interponto na origem
   (content.metodo.etapas[].entregavel). Fica um degrau abaixo do texto em
   tamanho e um acima em contraste, para ler como ficha técnica e não como
   continuação do parágrafo.

   COLUNA, NÃO LINHA. A primeira versão punha rótulo e valor lado a lado com
   `flex-wrap`, e o resultado foi inconsistente entre as cinco etapas: só a
   mais curta cabia na mesma linha, as outras quatro empurravam o valor para
   baixo. Rótulo sempre acima do valor resolve, e é a MESMA forma de ficha que
   .case-block__fact já usa (sections/cases.css). */
.metodo__entregavel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: hsl(var(--foreground));
}

/* Rótulo de campo, com a MESMA tipografia de .case-block__fact-label
   (sections/cases.css): mono tabular, caixa alta, tinta subordinada. Os dois
   são a mesma coisa, o nome de um campo de ficha, e o §3 do contrato reserva
   mono caixa alta exatamente para rótulo e dado tabular. */
.metodo__entregavel-rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
   Telas muito estreitas: a folga entre trilho e conteudo nao pode colapsar
   a ponto de encostar o texto no no. O clamp ja cobre a maioria dos casos;
   este ajuste so refina o minimo absoluto em 360px.
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  .metodo__timeline {
    --metodo-gap: var(--space-4);
  }
}