/* met · #metodo · papel — o ecomapa desenrolado numa linha (fig. 2) */
.met { --met-no: 20px; }
.met-malha {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 86% 70% in oklab, color-mix(in oklab, var(--p-ambar) 11%, transparent), transparent) 0 0 / 100% 100% no-repeat,
    radial-gradient(closest-side at 12% 18% in oklab, var(--p-papel-2), transparent) 0 0 / 80% 90% no-repeat,
    radial-gradient(closest-side at 55% 100% in oklab, var(--p-papel-3), transparent) 0 0 / 100% 70% no-repeat,
    var(--p-papel);
  animation: met-respira 32s ease-in-out infinite alternate;
}
@keyframes met-respira { to { transform: translate3d(2%, -1.5%, 0) scale(1.05); } }

.met-topo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; max-width: 1400px; margin: 0 auto; }
.met-topo .fig { grid-column: 1 / -1; }
.met-tit { max-width: 13em; }
.met-apoio { margin: 0; padding-bottom: .4em; }

.met-fig { margin: clamp(96px, 10vw, 160px) auto 0; max-width: 1400px; }
.met-trilha { position: relative; }
.met-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.met-linhas path { fill: none; stroke-linecap: round; }
.met-linha { stroke: var(--p-tinta); stroke-width: 2.6; }
.met-linha--base { stroke: color-mix(in oklab, var(--p-aco) 30%, transparent); stroke-width: 1; stroke-dasharray: 6 7; }
.met-troca { stroke: var(--p-ambar); stroke-width: 2.4; stroke-dasharray: .5 6.5; }
.met-cauda { stroke: var(--p-tinta); stroke-width: 1.6; stroke-dasharray: 6 7; transition: opacity 1.2s var(--c-ease) .2s; }
.met-troca-rot { font-family: var(--c-f-mono); font-size: 13px; fill: var(--p-ambar-txt); letter-spacing: .02em; }

.met-passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.22fr);
  grid-template-rows: auto auto auto auto; gap: 0 clamp(28px, 3vw, 56px);
}
.met-passo { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.met-cabeca { align-self: end; padding-bottom: 64px; }
.met-rot { margin: 0 0 6px; font-family: var(--c-f-mono); font-size: 13.5px; letter-spacing: .04em; color: var(--p-aco); }
.met-nome {
  margin: 0; font-weight: 520; font-variation-settings: "wdth" 76, "opsz" 12;
  font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.012em; text-wrap: balance;
}
.met-passo--foco .met-nome { color: var(--p-ambar-txt); font-style: italic; font-weight: 340; font-variation-settings: "wdth" 80, "opsz" 12; }
.met-no {
  display: block; width: var(--met-no); height: var(--met-no); margin: 0 0 30px;
  border-radius: 50%; border: 2px solid var(--p-aco); background: var(--p-papel);
  position: relative; z-index: 1;
  transition: background .5s var(--c-ease), border-color .5s var(--c-ease), box-shadow .6s var(--c-ease);
}
.met-no--foco { width: 26px; height: 26px; margin-top: -3px; margin-bottom: 27px; border-radius: 3px; border-color: var(--p-ambar); }
.met-no--foco::after { content: ""; position: absolute; inset: -9px; border: 1.6px solid var(--p-ambar); border-radius: 5px; opacity: 0; transform: scale(.6); transition: opacity .6s var(--c-ease), transform .6s var(--c-ease); }
.met-txt { margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--p-tinta-2); max-width: 26em; }
.met-txt strong { display: block; margin-bottom: 4px; color: var(--p-tinta); font-weight: 600; font-size: 19px; }
.met-fala p { font-size: 18px; color: var(--p-tinta); }
.met-falas { max-width: 34em; }
.met-fala + .met-fala { margin-top: 18px; }
.met-passo--foco .met-falas { position: relative; }
.met-passo--foco .met-falas::before {
  content: ""; position: absolute; z-index: -1; inset: -28px -32px -28px -28px;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--p-ambar) 13%, transparent), transparent);
}

/* aceso: a linha chegou */
.met-passo > :not(.met-no) { transition: opacity .7s var(--c-ease), transform .7s var(--c-ease); }
.js .met-passo:not(.met-aceso) > :not(.met-no) { opacity: .28; transform: translateY(8px); }
.met-aceso .met-no { background: var(--p-tinta); border-color: var(--p-tinta); box-shadow: 0 0 0 6px color-mix(in oklab, var(--p-ambar) 22%, transparent); }
.met-aceso .met-no--foco { background: color-mix(in oklab, var(--p-ambar) 45%, var(--p-papel)); border-color: var(--p-ambar); box-shadow: none; }
.met-aceso .met-no--foco::after { opacity: 1; transform: none; }

.met-legenda { margin: 0 0 clamp(40px, 5vw, 72px); justify-content: flex-end; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--c-f-mono); font-size: 13px; color: var(--p-aco); letter-spacing: .02em; }
.met-chave { display: inline-flex; align-items: center; gap: 10px; }
.met-k { display: inline-block; width: 24px; border-top: 2.4px solid var(--p-tinta); }
.met-k--troca { border-top: 2.4px dotted var(--p-ambar); }
.met-k--segue { border-top: 1.6px dashed var(--p-tinta); }

/* celular e tablet em pé: a linha fica vertical */
@media (max-width: 900px) {
  .met-topo { grid-template-columns: 1fr; }
  .met-fig { margin-top: 72px; }
  .met-passos { display: block; padding-left: 50px; }
  .met-passo { display: block; }
  .met-passo + .met-passo { margin-top: 64px; }
  .met-cabeca { padding-bottom: 18px; }
  .met-nome { font-size: clamp(32px, 9vw, 44px); }
  .met-no { position: absolute; left: -50px; top: 30px; margin: 0; }
  .met-no--foco { left: -53px; top: 27px; margin: 0; }
  .met-passo--foco .met-falas::before { inset: -20px -16px -20px -60px; }
  .met-legenda { margin: 0 0 48px; justify-content: flex-start; flex-direction: column; }
  .met-cabeca { padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .met-malha { animation: none; }
}