/* =============================================================
   O componente compartilhado pelos três modelos: a rota aérea da
   trajetória. As credenciais NÃO estão aqui — cada modelo tem a
   sua, com direção própria (v1 rede 3D, v2 plano focal, v3 livro
   de registro carimbado).

   Cada modelo só precisa definir estas variáveis no bloco onde a
   rota aparece:

     --co-fundo          fundo da seção (preenche o nó)
     --co-fio            cor dos fios de 1px
     --co-acento         marrom de PREENCHIMENTO (fundo do nó)
     --co-acento-txt     marrom de TEXTO e traço, legível sobre o fundo
                         da seção (no escuro precisa ser mais claro)
     --co-sobre-acento   texto por cima do acento
     --co-titulo         cor dos títulos
     --co-fraco          cor do texto secundário
     --co-apagado        números ainda não alcançados
   ============================================================= */

.ic{width:1em;height:1em;display:block;flex:none}

/* =============================================================
   TRAJETÓRIA — rota aérea
   ============================================================= */
.rota{position:relative}

.rota__traco{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}
.rota__base{
  stroke:var(--co-fio);
  stroke-width:1.4;
  stroke-dasharray:3 8;
  stroke-linecap:round;
}
.rota__viva{
  stroke:var(--co-acento-txt);
  stroke-width:1.6;
  stroke-linecap:round;
}
.rota__aviao{
  color:var(--co-acento-txt);
  opacity:0;
  transition:opacity .4s cubic-bezier(.22,.61,.36,1);
}

.rota__lista{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(.7rem,1.5vw,1.4rem);
}
.rota__parada{padding-right:1rem;list-style:none}

.rota__no{
  width:clamp(52px,4.4vw,64px);
  aspect-ratio:1;
  display:grid;place-items:center;
  font-size:clamp(22px,1.9vw,27px);
  color:var(--co-fraco);
  border:1px solid var(--co-fio);
  border-radius:50%;
  background:var(--co-fundo);
  margin-bottom:1.4rem;
  transition:color .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1),
             background .45s cubic-bezier(.22,.61,.36,1),
             transform .45s cubic-bezier(.22,.61,.36,1);
}
.rota__parada.is-alcancada .rota__no{
  color:var(--co-sobre-acento);
  background:var(--co-acento);
  border-color:var(--co-acento);
  transform:scale(1.06);
}
.rota__parada:hover .rota__no{transform:scale(1.12)}

.rota__n{
  display:block;color:var(--co-apagado);margin-bottom:.45rem;
  transition:color .45s cubic-bezier(.22,.61,.36,1);
}
.rota__parada.is-alcancada .rota__n{color:var(--co-acento-txt)}

.rota__onde{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
  line-height:1.1;margin:0 0 .35rem;
  color:var(--co-titulo);
}
.rota__que{font-size:.85rem;line-height:1.5;color:var(--co-fraco);max-width:22ch}

/* =============================================================
   RESPONSIVO
   ============================================================= */
@media (max-width:860px){
  /* a rota vira uma coluna; o traçado se recalcula sozinho */
  .rota__lista{grid-template-columns:1fr;row-gap:clamp(2.2rem,6vw,3rem)}
  .rota__parada{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:1.25rem;align-items:start;padding-right:0;
  }
  .rota__no{grid-row:1/4;margin-bottom:0}
  .rota__que{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .rota__no,.rota__n,.rota__aviao{transition-duration:.01ms !important}
}