/* ==========================================================================
   LINHA DO TEMPO DE ETAPAS — prefixo etp-
   Coluna única: filete à esquerda, conteúdo à direita. O filete tem um trilho
   fraco e, por cima, um preenchimento na cor de marca que cresce com a
   rolagem até o marcador da etapa que está sendo lida.

   Tokens usados:
     --accent           preenchimento, marcador aceso, halo da etapa corrente
     --display          face do número e do título de etapa
     --sans             face do texto e da legenda
     --ease             curva do projeto
     --dur              não usado direto — os tempos aqui são curtos de propósito
     --fg --fg-2        título da etapa e corpo do texto
     --fg-muted         número em repouso e nota de ressalva
     --rule --rule-2    trilho do filete e contorno do marcador apagado
     --bg               miolo do marcador apagado (o filete passa por trás)
     --dark-rgb         véu em gradiente da legenda dentro da foto
     --light            tinta da legenda, que vive sobre a foto
     --radius-media     canto da foto
     --radius-pill      só via .pill do core

   ---------------------------------------------------------------------
   A GEOMETRIA DO FILETE, que é o miolo do componente.

   Cada .etp-item desenha o PRÓPRIO segmento, e nenhuma medida vem do
   JavaScript. A conta fecha assim:

     - o marcador da etapa fica a --etp-cap do topo do item (metade da
       altura da faixa superior, onde moram o número e o prazo);
     - o item termina com --etp-vao de respiro por baixo;
     - logo, do centro do marcador i até o centro do marcador i+1 há
       exatamente a altura do item i.

   Daí o segmento ser `inset-block: var(--etp-cap) calc(var(--etp-cap) * -1)`:
   começa no centro do próprio marcador e VAZA --etp-cap para baixo da caixa
   do item, que é onde o marcador seguinte começa. Altura resultante: a do
   item, ponto — sem medir nada.

   O último item não desenha segmento. É por isso que o preenchimento nunca
   passa do último marcador: não há trilho depois dele.

   ---------------------------------------------------------------------
   DOIS ESTADOS DE REPOUSO, e o de repouso é o CHEIO.

   Sem JavaScript (bloqueado, com erro, ainda não executado) e com "reduzir
   movimento" ligado, a seção fica sem a classe .is-live: o preenchimento
   nasce em scaleY(1) e todos os marcadores nascem acesos. A informação —
   cinco etapas, nesta ordem, com estes prazos — está inteira.

   Quem LIGA o comportamento é o script, pondo .is-live na seção. Só então o
   preenchimento passa a ler --etp-k e os marcadores ainda não lidos apagam.
   O contrário (nascer vazio e o script encher) deixaria a peça em branco no
   dia em que o script não rodar, e um processo sem filete não é um processo
   com menos animação: é uma lista de cinco parágrafos soltos.
   ========================================================================== */

.etp{
  /* Largura da coluna do filete. É ela que decide o recuo do texto — o
     conteúdo começa em --etp-col + --etp-gap-col a partir da coluna. */
  --etp-col:clamp(30px,4vw,44px);
  --etp-gap-col:clamp(16px,2.2vw,28px);

  /* Respiro entre uma etapa e a seguinte. Entra como padding-bottom do item,
     e não como gap da lista, porque o segmento mede 100% do ITEM: com gap, o
     vão ficaria fora da caixa e o filete nasceria picotado. */
  --etp-vao:clamp(38px,5.2vh,68px);

  /* Largura de leitura. Menor que a coluna de propósito: parágrafo de
     processo passa de 70ch e vira documento. */
  --etp-max:760px;

  --etp-fio-w:2px;
  --etp-ponto-d:11px;

  /* Altura da faixa superior do conteúdo (número + prazo). O marcador é
     centrado nela, e --etp-cap é a metade — a distância do topo do item ao
     centro do marcador, que é a medida de que toda a geometria depende.
     30px é a altura natural da .pill do core (11px de corpo, entrelinha do
     body, 5px de padding e 1px de borda de cada lado). Trocar a .pill por
     outro rótulo pede refazer este número, senão o marcador sai do eixo do
     número. */
  --etp-topo-h:30px;
  --etp-cap:calc(var(--etp-topo-h) / 2);

  /* A LINHA DE LEITURA: fração da altura da janela em que o filete "chega".
     .5 é o meio da tela, que é o padrão que funciona — o olho descansa ali e
     a etapa corrente troca quando o marcador cruza esse ponto.
     O script LÊ este valor daqui; é o único lugar em que ele existe. Baixar
     para .62 antecipa o acendimento (útil quando a dobra é a última da
     página); subir para .40 atrasa. */
  --etp-linha:.5;

  /* Suavização do preenchimento entre um valor e o seguinte. A rolagem
     chega em degraus (entalhe de roda, gesto de trackpad); sem isto o
     filete pula a cada degrau. Curto o bastante para não virar atraso. */
  --etp-suave:120ms;
}

.etp-head{max-width:var(--etp-max)}
.etp-head .sec-lead{max-width:none}

.etp-lista{
  /* Lista ORDENADA de propósito: a ordem das etapas é a informação, e o
     número visível é a .etp-num, não o ::marker. O reset de `ul,ol` do core
     é que segura isso — foi este componente que o motivou (o ::marker num
     item `display:grid` entra na grade e empurra o texto). */
  max-width:var(--etp-max);
  /* Respiro entre o cabeçalho e a primeira etapa. Derivado do ritmo da
     seção, nunca clamp solto. */
  margin:calc(var(--sec-gap) * .42) 0 0;
}

.etp-item{
  position:relative;
  display:grid;
  grid-template-columns:var(--etp-col) 1fr;
  column-gap:var(--etp-gap-col);
  align-items:start;
  padding-bottom:var(--etp-vao);
}
/* Sem etapa seguinte não há vão nem segmento a desenhar. As duas regras
   andam juntas: o vão sobrando esticaria a seção, e o segmento sobrando
   faria o filete passar do último marcador — que é exatamente o defeito que
   a forma existe para não ter. */
.etp-item:last-child{padding-bottom:0}
.etp-item:last-child .etp-fio{display:none}

/* ---- o trilho ----
   Filho absoluto do item, e por isso FORA do grid de duas colunas: o
   posicionamento absoluto tira o elemento do fluxo, e as colunas continuam
   valendo só para o marcador e o corpo. */
.etp-fio{
  position:absolute;
  inset-block:var(--etp-cap) calc(var(--etp-cap) * -1);
  inset-inline-start:calc((var(--etp-col) - var(--etp-fio-w)) / 2);
  width:var(--etp-fio-w);
  background:var(--rule);
  /* Abaixo do marcador: o miolo opaco do ponto é o que dá o corte limpo do
     filete em cada etapa. */
  z-index:0;
}

.etp-fio-fill{
  display:block;
  width:100%;
  height:100%;
  background:var(--accent);
  /* scaleY e não height: transform e opacidade são as duas únicas
     propriedades que o navegador anima sem refazer layout. Com height, cada
     quadro de rolagem remontaria a caixa de cinco segmentos. A deformação
     que se teme ao escalar não acontece porque a largura é FIXA e só o eixo
     Y escala — um filete de 2px continua com 2px em qualquer escala. */
  transform-origin:top center;
  transform:scaleY(1);
}

/* Com o script no ar, cada segmento tira a própria fatia de UM número.
   --etp-k é o progresso da dobra em unidades de etapa (0 = primeiro
   marcador, 4 = quinto), escrito uma vez por quadro na seção; --etp-i é o
   índice do item, escrito à mão no markup. A subtração dá o quanto ESTE
   segmento já andou, e o clamp corta em 0 e 1: segmentos acima do progresso
   ficam cheios, o segmento corrente fica parcial, os abaixo ficam vazios.
   É o que dispensa o script de tocar em cinco elementos por quadro. */
.etp.is-live .etp-fio-fill{
  transform:scaleY(clamp(0,calc(var(--etp-k,0) - var(--etp-i,0)),1));
  transition:transform var(--etp-suave) linear;
}
@media (prefers-reduced-motion:reduce){
  /* Não há .is-live sob movimento reduzido (o script sai antes), então esta
     regra só alcança o caso de alguém colar o componente sem o motion.js e
     ligar a preferência depois. Fica pela mesma razão que o
     navegacao/progresso-leitura mantém a dele: a POSIÇÃO é dado, o que sai
     é só a suavização entre um valor e o seguinte. */
  .etp.is-live .etp-fio-fill{transition:none}
}

/* ---- o marcador ---- */
.etp-marca{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Altura fixa, e não stretch: o ponto tem de ficar no eixo do número, não
     no meio de um item que pode ter três linhas ou uma foto. Se a faixa
     superior quebrar em duas linhas no celular, o ponto continua centrado na
     PRIMEIRA — que é onde o olho procura. */
  height:var(--etp-topo-h);
}

.etp-ponto{
  width:var(--etp-ponto-d);
  height:var(--etp-ponto-d);
  border-radius:var(--radius-pill);
  /* Repouso = ACESO. O apagado é estado do script (.is-live), não o
     contrário — ver o cabeçalho deste arquivo. */
  background:var(--accent);
  border:1px solid var(--accent);
  transition:background .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease),transform .4s var(--ease);
}

/* Com o script no ar, o que ainda não foi lido apaga. O miolo é --bg (o
   fundo da própria seção) e não transparente: opaco, ele corta o filete que
   passa por trás; transparente, o trilho atravessaria o ponto e o marcador
   viraria um anel com uma linha no meio. */
.etp.is-live .etp-item:not(.is-vista) .etp-ponto{
  background:var(--bg);
  border-color:var(--rule-2);
}

/* A etapa corrente ganha halo. Uma por vez — o critério mora no script. */
.etp.is-live .etp-item.is-atual .etp-ponto{
  transform:scale(1.16);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent);
}

/* ---- o conteúdo ----
   Este é o nó que leva o data-rv, e é irmão do filete — nunca ancestral
   dele. O core termina o reveal em [data-rv].in{transform:none}, seletor
   (0,2,0), que apagaria o scaleY do preenchimento se os dois morassem no
   mesmo nó. Além disso o repouso do data-rv é translateY(22px): com o
   marcador aqui dentro, a medida que o script faz sairia 22px deslocada até
   a dobra entrar. */
.etp-corpo{min-width:0}

.etp-topo{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:var(--etp-topo-h);
}

.etp-num{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--fg-muted);
  transition:color .4s var(--ease);
}
.etp.is-live .etp-item.is-atual .etp-num{color:var(--accent)}

/* Só o rótulo de prazo, sobre a .pill do core. Nada de cor nem de forma
   aqui: o prazo é informação de apoio e tem de continuar lendo como
   rótulo, não como selo de destaque. */
.etp-prazo{white-space:nowrap}

.etp-titulo{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.018em;
  font-size:clamp(20px,2.2vw,27px);
  line-height:1.24;
  color:var(--fg);
  margin-top:12px;
}

.etp-texto{
  color:var(--fg-2);
  max-width:62ch;
  margin-top:12px;
}

/* ---- foto opcional dentro de uma etapa ---- */
.etp-figura{
  position:relative;
  overflow:hidden;
  margin:22px 0 0;
  border-radius:var(--radius-media);
  /* A caixa é reservada pela proporção, e não pela imagem que chega: sem
     isto a lista cresce quando a foto pinta, e as posições que o script
     mediu passam a apontar para o lugar errado. */
  aspect-ratio:16 / 9;
  max-width:520px;
}
.etp-figura img{width:100%;height:100%;object-fit:cover}

/* Legenda DENTRO da imagem, ancorada embaixo (contrato §6). O véu é
   gradiente + blur + máscara em gradiente: backdrop-filter em caixa reta
   produz borda dura e lê "chapado", e a máscara é o que dissolve o topo do
   véu na foto. */
.etp-legenda{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  padding:34px 18px 14px;
  font-size:12.5px;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--light);
  background:linear-gradient(to top,
             rgba(var(--dark-rgb),.88) 0%,
             rgba(var(--dark-rgb),.44) 52%,
             rgba(var(--dark-rgb),0) 100%);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
}

/* Corpo, entrelinha e tinta vêm da primitiva .nota do core; o resto é posição.
   A medida entra pelo parafuso porque é a MESMA largura das etapas. */
.etp-nota{
  --nota-max:var(--etp-max);
  margin-top:clamp(28px,3.4vw,44px);
  /* Alinha com o texto das etapas, não com o filete: a ressalva é do
     conteúdo, não da linha do tempo. */
  padding-inline-start:calc(var(--etp-col) + var(--etp-gap-col));
  border-top:1px solid var(--rule);
  padding-top:18px;
}

/* ==========================================================================
   MOBILE — no fim do bloco, como manda o §6.5.
   A forma NÃO muda: coluna única, filete à esquerda, conteúdo à direita.
   O que muda é a escala — coluna do filete mais estreita e vão menor. Foi
   para poder encolher sem remendo que a alternância esquerda/direita ficou
   de fora desde o começo.
   ========================================================================== */
@media (max-width:640px){
  .etp{
    --etp-col:26px;
    --etp-gap-col:14px;
    --etp-vao:36px;
    --etp-ponto-d:10px;
  }
  .etp-topo{
    /* Número e prazo lado a lado passam de 60% da largura útil em 390px e
       empurram a pílula para fora. Quebrar é melhor que espremer — e o
       marcador continua no eixo da primeira linha, porque .etp-marca tem
       altura fixa. */
    flex-wrap:wrap;
    gap:10px;
  }
  .etp-prazo{white-space:normal}
  .etp-figura{max-width:none}
  .etp-nota{padding-inline-start:0}
}