/* =====================================================================
   NIVELAMENTO: só o que é desta página (o resto vem de estilo.css e dos componentes).
   A cena da abertura: a trilha pontilhada da janela de "Como ensinamos" (a mesma do Contato), com os marcos
   de ouvir e falar já percorridos, a ciclista subindo e o alvo aceso no fim (o nivelamento indica o ponto de
   entrada). Tudo cresce e encolhe junto com a cena (unidades cqw, com px antes para os navegadores antigos).
   ===================================================================== */
.nivel-cena { display: block; width: min(100%, 460px); aspect-ratio: 460 / 380; min-height: 0; margin-inline: auto; container-type: inline-size; }
.nivel-cena > .nivel-cena__trilha { position: absolute; inset: 0; width: 100%; height: 100%; }
.nivel-cena__base { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 13; }
/* O caminho já percorrido (até a ciclista) em degradê; dali até o alvo, só o pontilhado. */
.nivel-cena__feito { fill: none; stroke: url(#grad-nivel); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .72 1; }
.nivel-cena .marco-j { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; width: 12.6cqw; height: 12.6cqw; margin: -6.3cqw 0 0 -6.3cqw; animation: nivel-boia 5s ease-in-out infinite; }
.nivel-cena .marco-j svg { width: 26px; height: 26px; width: 5.6cqw; height: 5.6cqw; }
.nivel-cena .marco-j:nth-of-type(2) { animation-delay: -1.7s; }
.nivel-cena .marco-j:nth-of-type(3) { animation-delay: -3.4s; }
@keyframes nivel-boia { 50% { translate: 0 -5px; } }
/* A ciclista sobe a trilha, entre a fala e o alvo, inclinada com a subida, pedalando */
.nivel-cena > .nivel-cena__ciclista { position: absolute; left: 58%; top: 23%; z-index: 2; width: 92px; width: 20cqw; height: auto; max-height: none; rotate: -18deg; filter: drop-shadow(0 14px 14px rgba(11, 74, 115, .18)); animation: pedala 1.2s ease-in-out infinite; }
/* ── Tablet e celular: a cena vai para cima do título, menor (como a do Contato) ── */
@media (max-width: 960px) {
  .nivel-cena { width: min(100%, 400px); }
}
@media (max-width: 760px) {
  .nivel-cena { width: min(100%, 300px); margin-top: 4px; }
}