/* =====================================================================
   MACHFOOD BRASIL — IMPORTAÇÃO (CSS DA JORNADA DE PROCESSO)
   Carregar DEPOIS de assets/css/solucao.css. Não redefine tokens, navbar,
   sidebar, botões, footer ou breadcrumb — tudo isso já vem de solucao.css.
   Aqui entra apenas o que é NOVO desta família de páginas: hero de rota
   global animada, jornada sticky de 2 colunas com "central de controle"
   por etapa, linha de progresso vertical, indicador fixo "Etapa X de 9".

   FUNDAÇÃO reaproveitável pelas próximas páginas de etapa (Tarefas 2-4):
   - .imp-* é o prefixo desta família (evita colisão com .sol-* ou .pp-*).
   - Os tokens de cor/gradiente/easing são os mesmos do resto do site.
   - O bloco "PALCO DE ETAPA" (.imp-stage / .imp-scene) pode ser
     reaproveitado em miniatura no topo de cada página individual.
   ===================================================================== */

/* ===================== HERO — ROTA GLOBAL ===================== */
.imp-hero {
  padding: clamp(6rem, 11vw, 8.5rem) clamp(1.2rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
  max-width: 1240px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  scroll-margin-top: 90px;
}
.imp-hero-label {
  font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mf-red-glow); display: block;
}
.imp-hero h1 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: 0.005em;
  max-width: 20ch;
}
.imp-hero-tagline { font-size: 1.02rem; line-height: 1.65; color: var(--mf-silver); max-width: 58ch; }

/* ===== Rota global animada (avião + navio) ===== */
.imp-route-media {
  position: relative; width: 100%; max-width: 920px; aspect-ratio: 16/6.2;
  border-radius: 20px; overflow: hidden; margin-top: 0.6rem;
  background: var(--mf-panel); border: 1px solid var(--mf-border);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  padding: 1rem 1.4rem;
}
.imp-route-media svg { width: 100%; height: 100%; display: block; }

.imp-route-arc { fill: none; stroke: var(--mf-border); stroke-width: 1.5; }
.imp-route-arc-flow {
  fill: none; stroke: var(--mf-red-glow); stroke-width: 1.5;
  stroke-dasharray: 8 7; animation: imp-route-flow 3.2s linear infinite;
}
@keyframes imp-route-flow { to { stroke-dashoffset: -90; } }

.imp-route-plane { animation: imp-route-plane-move 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-route-plane-move {
  0%   { offset-distance: 0%;  transform: translateY(0); }
  50%  { offset-distance: 100%; transform: translateY(-2px); }
  100% { offset-distance: 0%;  transform: translateY(0); }
}
/* Navegadores sem suporte a offset-path: fallback simples de translação lateral. */
.imp-route-plane { offset-path: path('M40,150 C220,20 620,20 840,110'); offset-rotate: auto; }
.no-offsetpath .imp-route-plane { animation: imp-route-plane-fallback 6.5s ease-in-out infinite; }
@keyframes imp-route-plane-fallback {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(400px,-60px); }
  100% { transform: translate(0,0); }
}

.imp-route-ship { animation: imp-route-ship-move 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-route-ship-move {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(14px,-3px); }
}
.imp-route-wave { fill: none; stroke: var(--mf-silver-2); stroke-opacity: 0.5; stroke-dasharray: 5 6; animation: imp-route-flow 2.6s linear infinite; }

.imp-route-node { fill: var(--mf-red-glow); }
.imp-route-node-ring { fill: none; stroke: var(--mf-red-glow); stroke-width: 1.4; opacity: 0.5; animation: imp-route-ping 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-route-ping { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .imp-route-arc-flow, .imp-route-plane, .imp-route-ship, .imp-route-wave, .imp-route-node-ring {
    animation: none !important;
  }
  .imp-route-plane { offset-distance: 35%; }
}

/* ===================== JORNADA — LAYOUT STICKY 2 COLUNAS ===================== */
.imp-journey {
  padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* ----- Coluna esquerda: palco visual sticky ----- */
.imp-stage-col { position: sticky; top: 100px; align-self: start; min-width: 0; }
.imp-stage {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--mf-panel); border: 1px solid var(--mf-border);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.imp-stage-svg { width: 100%; height: auto; aspect-ratio: 1/1; }

/* Cenários empilhados no mesmo viewBox — só a etapa ativa fica visível. */
.imp-scene { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.imp-scene.is-active { opacity: 1; }
.imp-scene:first-of-type { opacity: 1; } /* fallback: primeira etapa visível sem JS */
.js-imp-ready .imp-scene:first-of-type:not(.is-active) { opacity: 0; }
.js-imp-ready .imp-scene.is-active { opacity: 1; }

.imp-stage-caption { border-top: 1px solid var(--mf-border); padding-top: 0.9rem; }
.imp-stage-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mf-red-glow); display: block; margin-bottom: 0.35rem;
}
.imp-stage-caption p { font-size: 0.95rem; line-height: 1.5; color: #fff; font-weight: 500; }

/* Animações internas dos cenários (compartilhadas por classe, não por etapa) */
.imp-scene-radar-sweep { transform-box: fill-box; transform-origin: center; animation: imp-radar-spin 3.2s linear infinite; }
@keyframes imp-radar-spin { to { transform: rotate(360deg); } }
.imp-scene-ping { transform-box: fill-box; transform-origin: center; animation: imp-route-ping 2.2s ease-out infinite; }
.imp-scene-gear { transform-box: fill-box; transform-origin: center; animation: imp-radar-spin 6s linear infinite; }
.imp-scene-gear--rev { animation-direction: reverse; animation-duration: 5s; }
.imp-scene-loupe { animation: imp-loupe-move 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-loupe-move { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(10px,8px); } }
.imp-scene-flow { fill: none; stroke: var(--mf-red-glow); stroke-width: 1.5; stroke-dasharray: 6 5; animation: imp-route-flow 2.6s linear infinite; }
.imp-scene-bounce { animation: imp-scene-bounce 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-scene-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.imp-scene-clock-hand { transform-box: fill-box; transform-origin: center; animation: imp-radar-spin 4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .imp-scene { transition: none; }
  .imp-scene-radar-sweep, .imp-scene-ping, .imp-scene-gear, .imp-scene-loupe,
  .imp-scene-flow, .imp-scene-bounce, .imp-scene-clock-hand { animation: none !important; }
}

/* ----- Coluna direita: etapas + linha de progresso ----- */
/* Marcador (22px) e linha ficam SEMPRE em coordenadas positivas dentro do
   padding-left desta coluna — nunca em left negativo, pois body tem
   overflow-x:hidden (solucao.css) e cortaria qualquer coisa fora do viewport. */
.imp-steps-col { position: relative; min-width: 0; --imp-pad: clamp(2.8rem, 5.4vw, 3.4rem); padding-left: var(--imp-pad); }

.imp-progress-line {
  position: absolute; left: 9.5px; top: 6px; bottom: 6px; width: 3px;
  background: var(--mf-border); border-radius: 3px; overflow: hidden;
}
.imp-progress-fill {
  display: block; width: 100%; height: 0%;
  background: var(--grad-red); border-radius: 3px;
  transition: height 0.1s linear;
}
@media (prefers-reduced-motion: reduce) { .imp-progress-fill { transition: none; } }

.imp-steps { list-style: none; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }

.imp-step { position: relative; }
.imp-step-marker {
  position: absolute; left: calc(-1 * var(--imp-pad)); top: 0.15rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mf-obsidian); border: 2px solid var(--mf-border);
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.imp-step.is-active .imp-step-marker { border-color: var(--mf-red); background: var(--mf-red); }

.imp-step-num {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.7rem;
  color: var(--mf-silver-2); letter-spacing: 0.02em; display: block; margin-bottom: 0.4rem;
  transition: color 0.4s var(--ease-out);
}
.imp-step.is-active .imp-step-num { color: var(--mf-red-glow); }

.imp-step-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--mf-border); border-radius: 16px;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}
.imp-step-card h2 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem); letter-spacing: 0.01em; margin-bottom: 0.6rem;
}
.imp-step-lead { font-size: 0.94rem; line-height: 1.65; color: var(--mf-silver); margin-bottom: 1.1rem; }

.imp-step-block { margin-top: 0.9rem; }
.imp-step-block-title {
  font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mf-silver-2); margin-bottom: 0.5rem; display: block;
}
.imp-step-block ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.imp-step-block li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; line-height: 1.55; color: var(--mf-silver); }
.imp-step-block li i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.2rem; }
.imp-step-block--risk li i { color: var(--mf-red-glow); }
.imp-step-block--value li i { color: var(--mf-red-glow); }

.imp-step-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--mf-border);
  font-family: 'Space Mono', monospace; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mf-red-glow); text-decoration: none;
}
.imp-step-link i { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.35s var(--ease-out); }
.imp-step-link:hover i, .imp-step-link:focus-visible i { transform: translateX(4px); }
.imp-step-link:focus-visible { outline: 2px solid var(--mf-red-glow); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .imp-step-link i { transition: none; }
}

/* ----- Indicador fixo "Etapa X de 9" ----- */
.imp-progress-badge {
  position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  z-index: 60; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(10,10,12,0.92); border: 1px solid var(--mf-border); border-radius: 999px;
  padding: 0.55rem 1rem; font-family: 'Space Mono', monospace; font-size: 0.74rem;
  letter-spacing: 0.04em; color: var(--mf-silver); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(10px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
}
.imp-progress-badge.is-visible { opacity: 1; transform: translateY(0); }
.imp-progress-badge strong { color: var(--mf-red-glow); }
@media (prefers-reduced-motion: reduce) { .imp-progress-badge { transition: none; } }

/* ===================== FECHO ===================== */
.imp-closing { text-align: center; }
.imp-closing .pp-desc { margin: 0 auto 1.9rem; text-align: center; }

/* ----- Cenário compacto por etapa (mobile) -----
   No desktop/tablet o palco sticky (.imp-stage-col) já mostra o cenário
   ativo, então .imp-step-scene fica oculto. Abaixo de 900px o palco único
   sai do fluxo (viraria pesado/redundante empilhado com 9 cards) e cada
   etapa passa a exibir seu PRÓPRIO cenário em miniatura, sempre visível
   (sem crossfade via JS — é decorativo e acompanha o texto da etapa). */
.imp-step-scene {
  display: none;
  margin-bottom: 1rem; border-radius: 16px; overflow: hidden;
  background: var(--mf-panel); border: 1px solid var(--mf-border);
}
.imp-step-scene svg { width: 100%; height: 100%; display: block; }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1023px) {
  .imp-journey { grid-template-columns: 1fr; }
  .imp-stage-col { position: static; top: auto; margin-bottom: 0.5rem; }
  .imp-progress-badge { display: none; } /* badge fixo de progresso some: o palco único acima do fluxo já mostra a etapa atual */
}

@media (max-width: 900px) {
  .imp-journey { display: block; }
  .imp-stage-col { display: none; } /* palco central único sai do fluxo — cada etapa passa a ter seu próprio cenário (.imp-step-scene) */
  .imp-step-scene { display: block; aspect-ratio: 16/10; }
  /* mesmo raciocínio do bloco desktop: marcador (left: calc(-1 * --imp-pad))
     compensa exatamente o padding-left, sempre em coordenada positiva. */
  .imp-steps-col { --imp-pad: clamp(2.4rem, 9vw, 2.8rem); }
}

@media (max-width: 640px) {
  .imp-route-media { aspect-ratio: 16/9; padding: 0.8rem; }
}

/* =====================================================================
   PÁGINAS DE ETAPA INDIVIDUAL (.imp-etapa-*)
   Usado por importacao-etapa-N-*.html (Tarefas 2-4). O hero reaproveita
   .sol-hero/.sol-hero-media (solucao.css) e o corpo reaproveita
   .pp-section/.pp-eyebrow/.pp-title/.pp-desc — aqui só entra o que é
   NOVO desta família: as animações exclusivas de cada visual grande do
   hero, os blocos de risco/valor e a navegação entre etapas.
   ===================================================================== */
.imp-etapa-hero-visual { width: 100%; height: 100%; }

/* ----- Etapa 1 — pesquisa e filtragem de fornecedores ----- */
.imp-etapa-pin-accept { animation: imp-etapa-pin-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-pin-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.35); } }
.imp-etapa-pin-discard { animation: imp-etapa-pin-fade 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-pin-fade { 0%, 60%, 100% { opacity: 0.85; } 75% { opacity: 0.15; } }
.imp-etapa-scan { animation: imp-etapa-scan-move 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-scan-move { 0%, 100% { transform: translateX(-90px); } 50% { transform: translateX(90px); } }

/* ----- Etapa 2 — negociação internacional ----- */
.imp-etapa-hand { animation: imp-etapa-hand-left 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.imp-etapa-hand--right { animation-name: imp-etapa-hand-right; }
@keyframes imp-etapa-hand-left {
  0%, 15%  { transform: translate(0,0); }
  35%      { transform: translate(70px,0); }
  42%      { transform: translate(70px,-3px); }
  50%      { transform: translate(70px,3px); }
  58%      { transform: translate(70px,-3px); }
  66%, 85% { transform: translate(70px,0); }
  100%     { transform: translate(0,0); }
}
@keyframes imp-etapa-hand-right {
  0%, 15%  { transform: translate(0,0); }
  35%      { transform: translate(-70px,0); }
  42%      { transform: translate(-70px,-3px); }
  50%      { transform: translate(-70px,3px); }
  58%      { transform: translate(-70px,-3px); }
  66%, 85% { transform: translate(-70px,0); }
  100%     { transform: translate(0,0); }
}
.imp-etapa-handshake-glow { animation: imp-etapa-handshake-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-handshake-pulse {
  0%, 32%  { opacity: 0; transform: scale(0.4); }
  40%      { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
  66%      { opacity: 0.9; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(0.4); }
}
.imp-etapa-bar { animation: imp-etapa-balance 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes imp-etapa-balance { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
.imp-etapa-arrow-fwd { animation: imp-etapa-arrow-move 2.6s ease-in-out infinite; }
.imp-etapa-arrow-back { animation: imp-etapa-arrow-move 2.6s ease-in-out infinite reverse; }
@keyframes imp-etapa-arrow-move { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(14px); opacity: 1; } }

/* ----- Etapa 3 — análise de viabilidade ----- */
.imp-etapa-scale-beam { animation: imp-etapa-tilt 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.imp-etapa-chart-bar { animation: imp-etapa-bar-grow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes imp-etapa-bar-grow { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }
.imp-etapa-needle { animation: imp-etapa-needle-swing 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes imp-etapa-needle-swing { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }

/* ----- Etapa 4 — acompanhamento da produção ----- */
.imp-etapa-gear-a { animation: imp-etapa-gear-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.imp-etapa-gear-b { animation: imp-etapa-gear-spin-rev 4.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.imp-etapa-gear-c { animation: imp-etapa-gear-spin 8.5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-gear-spin { to { transform: rotate(360deg); } }
@keyframes imp-etapa-gear-spin-rev { to { transform: rotate(-360deg); } }
.imp-etapa-belt { stroke-dasharray: 9 7; animation: imp-etapa-belt-move 1.4s linear infinite; }
@keyframes imp-etapa-belt-move { to { stroke-dashoffset: -32; } }
.imp-etapa-piece { animation: imp-etapa-piece-move 3.6s linear infinite; }
@keyframes imp-etapa-piece-move { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(210px); opacity: 0; } }
.imp-etapa-status-dot { animation: imp-etapa-status-blink 3.2s ease-in-out infinite; }
@keyframes imp-etapa-status-blink { 0%, 20% { opacity: 0.25; } 25%, 45% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
.imp-etapa-status-dot--2 { animation-delay: .8s; }
.imp-etapa-status-dot--3 { animation-delay: 1.6s; }
.imp-etapa-status-dot--4 { animation-delay: 2.4s; }
.imp-etapa-pulse-ring { animation: imp-etapa-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-pulse { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(2); opacity: 0; } }

/* ----- Etapa 5 — inspeção e controle de qualidade ----- */
.imp-etapa-scanline { animation: imp-etapa-scanline-move 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-scanline-move { 0%, 100% { transform: translateX(-70px); opacity: 0.2; } 50% { transform: translateX(70px); opacity: 1; } }
.imp-etapa-loupe-orbit { animation: imp-etapa-loupe-move 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-loupe-move { 0%, 100% { transform: translate(-64px,10px); } 50% { transform: translate(64px,-8px); } }
.imp-etapa-check-mark { animation: imp-etapa-check-pop 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-check-pop { 0%, 100% { opacity: 0; transform: scale(0.4); } 8%, 40% { opacity: 1; transform: scale(1); } }
.imp-etapa-check-mark--2 { animation-delay: 1s; }
.imp-etapa-check-mark--3 { animation-delay: 2s; }
.imp-etapa-reject { animation: imp-etapa-reject-fade 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-reject-fade { 0%, 68% { opacity: 1; transform: translate(0,0) rotate(0deg); } 84% { opacity: 0.4; transform: translate(-6px,10px) rotate(-8deg); } 92%, 100% { opacity: 0; transform: translate(-14px,22px) rotate(-14deg); } }
.imp-etapa-measure { animation: imp-etapa-measure-fade 4.4s ease-in-out infinite; }
@keyframes imp-etapa-measure-fade { 0%, 20% { opacity: 0; } 30%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* ----- Etapa 6 — organização logística (navio + avião) ----- */
.imp-etapa-ship { animation: imp-etapa-ship-bob 5.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-ship-bob {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25%      { transform: translate(6px,-3px) rotate(-1.2deg); }
  50%      { transform: translate(0,-6px) rotate(0deg); }
  75%      { transform: translate(-6px,-3px) rotate(1.2deg); }
}
.imp-etapa-wave { fill: none; stroke: var(--mf-silver-2); stroke-opacity: 0.45; stroke-dasharray: 6 6; animation: sol-flow-move 2.8s linear infinite; }
.imp-etapa-wave--2 { animation-duration: 3.6s; animation-direction: reverse; }

.imp-etapa-plane { offset-path: path('M20,60 C120,-10 260,-4 372,86'); offset-rotate: auto; animation: imp-etapa-plane-move 7.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-plane-move {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.no-offsetpath .imp-etapa-plane { animation: imp-etapa-plane-fallback 7.5s ease-in-out infinite; }
@keyframes imp-etapa-plane-fallback {
  0%   { transform: translate(0,0) rotate(-4deg); }
  50%  { transform: translate(176px,-42px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(-4deg); }
}
.imp-etapa-plane-trail { stroke-dasharray: 4 5; opacity: 0.5; animation: imp-etapa-trail-fade 7.5s ease-in-out infinite; }
@keyframes imp-etapa-trail-fade { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.55; } }

.imp-etapa-cloud { animation: imp-etapa-cloud-drift 22s linear infinite; }
.imp-etapa-cloud--2 { animation-duration: 30s; animation-delay: -8s; }
.imp-etapa-cloud--3 { animation-duration: 26s; animation-delay: -15s; }
@keyframes imp-etapa-cloud-drift { 0% { transform: translateX(-40px); opacity: 0.5; } 50% { opacity: 0.85; } 100% { transform: translateX(420px); opacity: 0.5; } }

.imp-etapa-route-flow { fill: none; stroke: var(--mf-red-glow); stroke-width: 1.4; stroke-dasharray: 7 6; opacity: 0.6; animation: imp-route-flow 3s linear infinite; }
.imp-etapa-container-glow { animation: imp-etapa-container-pulse 3.4s ease-in-out infinite; }
.imp-etapa-container-glow--2 { animation-delay: .9s; }
.imp-etapa-container-glow--3 { animation-delay: 1.8s; }
@keyframes imp-etapa-container-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ----- Etapa 7 — acompanhamento da importação (central de rastreamento) ----- */
.imp-etapa-track-dot { offset-path: path('M20,180 C120,60 280,60 380,150'); offset-rotate: auto; animation: imp-etapa-track-move 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-track-move {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 100%; }
  100% { offset-distance: 0%; }
}
.no-offsetpath .imp-etapa-track-dot { animation: imp-etapa-track-fallback 6s ease-in-out infinite; }
@keyframes imp-etapa-track-fallback {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(360px,-30px); }
  100% { transform: translate(0,0); }
}

/* ----- Etapa 8 — suporte até a entrega (caminhão em rota) ----- */
.imp-etapa-wheel { animation: imp-etapa-gear-spin 0.6s linear infinite; transform-box: fill-box; transform-origin: center; }
.imp-etapa-truck-body { animation: imp-etapa-truck-bounce 0.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes imp-etapa-truck-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.imp-etapa-road { stroke-dasharray: 14 10; animation: imp-etapa-belt-move 0.5s linear infinite; }
.imp-etapa-pole { animation: imp-etapa-pole-drift 1.8s linear infinite; }
.imp-etapa-pole--2 { animation-duration: 2.6s; animation-delay: -0.6s; opacity: 0.6; }
.imp-etapa-pole--3 { animation-duration: 3.4s; animation-delay: -1.4s; opacity: 0.4; }
@keyframes imp-etapa-pole-drift { 0% { transform: translateX(40px); } 100% { transform: translateX(-360px); } }

/* ----- Etapa 9 — redução de riscos e economia de tempo (escudo protetor) ----- */
.imp-etapa-particle { animation: imp-etapa-particle-block 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.imp-etapa-particle--2 { animation-delay: 0.8s; }
.imp-etapa-particle--3 { animation-delay: 1.6s; }
.imp-etapa-particle--4 { animation-delay: 2.4s; }
@keyframes imp-etapa-particle-block {
  0%          { transform: translate(var(--imp-px, -60px), var(--imp-py, -40px)) scale(1); opacity: 0; }
  16%         { opacity: 1; }
  55%         { transform: translate(0,0) scale(1); opacity: 1; }
  63%         { transform: translate(0,0) scale(1.3); opacity: 1; }
  76%, 100%   { transform: translate(0,0) scale(0); opacity: 0; }
}
.imp-etapa-clock-hand { animation: imp-etapa-gear-spin 8s linear infinite; }
.imp-etapa-arc-fill { stroke-dasharray: 126; animation: imp-etapa-arc-grow 4.4s ease-in-out infinite; }
@keyframes imp-etapa-arc-grow { 0% { stroke-dashoffset: 126; } 55% { stroke-dashoffset: 18; } 100% { stroke-dashoffset: 126; } }

@media (prefers-reduced-motion: reduce) {
  .imp-etapa-pin-accept, .imp-etapa-pin-discard, .imp-etapa-scan, .imp-etapa-hand, .imp-etapa-handshake-glow,
  .imp-etapa-bar, .imp-etapa-arrow-fwd, .imp-etapa-arrow-back, .imp-etapa-scale-beam,
  .imp-etapa-chart-bar, .imp-etapa-needle,
  .imp-etapa-gear-a, .imp-etapa-gear-b, .imp-etapa-gear-c, .imp-etapa-belt, .imp-etapa-piece,
  .imp-etapa-status-dot, .imp-etapa-pulse-ring,
  .imp-etapa-scanline, .imp-etapa-loupe-orbit, .imp-etapa-check-mark, .imp-etapa-reject, .imp-etapa-measure,
  .imp-etapa-ship, .imp-etapa-plane, .imp-etapa-plane-trail, .imp-etapa-wave, .imp-etapa-wave--2,
  .imp-etapa-cloud, .imp-etapa-cloud--2, .imp-etapa-cloud--3, .imp-etapa-route-flow,
  .imp-etapa-container-glow, .imp-etapa-container-glow--2, .imp-etapa-container-glow--3,
  .imp-etapa-track-dot,
  .imp-etapa-wheel, .imp-etapa-truck-body, .imp-etapa-road, .imp-etapa-pole, .imp-etapa-pole--2, .imp-etapa-pole--3,
  .imp-etapa-particle, .imp-etapa-particle--2, .imp-etapa-particle--3, .imp-etapa-particle--4,
  .imp-etapa-clock-hand, .imp-etapa-arc-fill,
  .no-offsetpath .imp-etapa-plane, .no-offsetpath .imp-etapa-track-dot {
    animation: none !important;
  }
}

/* ----- Corpo: blocos de risco administrado / valor entregue ----- */
.imp-etapa-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 1.6rem; }
.imp-etapa-block {
  background: rgba(255,255,255,0.03); border: 1px solid var(--mf-border); border-radius: 16px;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
}
.imp-etapa-block-title {
  font-family: 'Space Mono', monospace; font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mf-silver-2); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.imp-etapa-block-title i { width: 16px; height: 16px; color: var(--mf-red-glow); flex-shrink: 0; }
.imp-etapa-block ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.imp-etapa-block li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; line-height: 1.6; color: var(--mf-silver); }
.imp-etapa-block li i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.2rem; color: var(--mf-red-glow); }
.imp-etapa-note { margin-top: 1.4rem; font-size: 0.88rem; line-height: 1.6; color: var(--mf-silver-2); font-style: italic; }

@media (max-width: 720px) { .imp-etapa-blocks { grid-template-columns: 1fr; } }

/* ----- Navegação entre etapas ----- */
.imp-etapa-stepnav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.2rem, 4vw, 2.5rem); max-width: 1240px; margin: 0 auto;
  border-top: 1px solid var(--mf-border);
}
.imp-etapa-stepnav-link {
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--mf-silver);
  transition: color 0.25s var(--ease-out); max-width: 32ch;
}
.imp-etapa-stepnav-link:hover { color: #fff; }
.imp-etapa-stepnav-link i { width: 17px; height: 17px; color: var(--mf-red-glow); flex-shrink: 0; }
.imp-etapa-stepnav-link--next { margin-left: auto; text-align: right; flex-direction: row-reverse; }
.imp-etapa-stepnav-all {
  font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mf-silver-2); order: 3; width: 100%; text-align: center; margin-top: 0.4rem;
}
.imp-etapa-stepnav-all a { color: var(--mf-silver-2); transition: color 0.25s; }
.imp-etapa-stepnav-all a:hover { color: var(--mf-red-glow); }

@media (max-width: 640px) {
  .imp-etapa-stepnav { flex-direction: column; align-items: stretch; text-align: center; }
  .imp-etapa-stepnav-link--next { margin-left: 0; flex-direction: row-reverse; justify-content: center; }
}