/* Mapa v5 "da origem ao destino". Escopo: .mapa5. Kit nitai_lab: grafite, creme, dourado, Urbanist + Outfit.
   Usa as variaveis do site (--grafite, --creme, --dourado-claro, --sup, --linha, --tx2, --f-display, --f-corpo) com valor de reserva. */
.mapa5{
  --m5-fundo:var(--grafite,#1A1814); --m5-creme:var(--creme,#F5F0EB); --m5-ouro:var(--dourado-claro,#C9A96E); --m5-ouro2:#E4CB97;
  --m5-sup:var(--sup,#242019); --m5-linha:var(--linha,#3A342C); --m5-tx2:var(--tx2,#A8A29A); --m5-mar:#121010;
  --m5-disp:var(--f-display,"Urbanist",system-ui,"Segoe UI",sans-serif); --m5-corpo:var(--f-corpo,"Outfit",system-ui,"Segoe UI",sans-serif);
  --m5-ease:cubic-bezier(.25,.46,.45,.94);
  color:var(--m5-creme); font-family:var(--m5-corpo); line-height:1.6;
}
.mapa5 *,.mapa5 *::before,.mapa5 *::after{box-sizing:border-box}

/* ---------- grade: coluna de leitura + palco */
.m5-grade{display:grid; grid-template-columns:340px minmax(0,1fr); column-gap:40px; align-items:start;
  grid-template-areas:"cab palco" "esc palco" "txt palco" "info palco" ". fonte"; grid-template-rows:auto auto auto 1fr auto}
.m5-cab{grid-area:cab} .m5-escolha{grid-area:esc} .m5-texto{grid-area:txt} .m5-info{grid-area:info} .m5-palco{grid-area:palco} .m5-fonte{grid-area:fonte}
.m5-lista{grid-column:1 / -1}

.m5-rot{font-family:var(--m5-disp); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--m5-ouro)}
.mapa5 h2{font-family:var(--m5-disp); font-size:clamp(1.8rem,2.6vw,2.3rem); font-weight:700; line-height:1.12; letter-spacing:-.015em; margin-top:10px}
.m5-apoio{margin-top:10px; color:var(--m5-tx2); font-size:16px; line-height:1.5}

/* ---------- escolha da carga */
@media (min-width:861px){.m5-ativo .m5-apoio{display:none}}
.m5-escolha{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px}
.m5-chip{display:flex; flex-direction:column; align-items:flex-start; gap:0; min-height:50px; padding:6px 12px; text-align:left;
  background:transparent; border:1px solid var(--m5-linha); border-radius:6px; color:var(--m5-creme); cursor:pointer; font:inherit;
  transition:border-color .25s var(--m5-ease), background-color .25s var(--m5-ease)}
.m5-chip-c{font-family:var(--m5-disp); font-size:16px; font-weight:700; line-height:1.2}
.m5-chip-t{font-size:14px; color:var(--m5-tx2); line-height:1.3}
.m5-chip:last-child:nth-child(odd){grid-column:1 / -1}
.m5-chip:hover{border-color:#6B5C44}
.m5-chip[aria-pressed="true"]{border-color:var(--m5-ouro); background:rgba(201,169,110,.09)}
.m5-chip[aria-pressed="true"] .m5-chip-t{color:var(--m5-ouro)}
.m5-chip:focus-visible{outline:2px solid var(--m5-creme); outline-offset:2px}

/* ---------- texto da etapa (legenda) */
.m5-texto{margin-top:18px; min-height:136px; padding-top:14px; border-top:1px solid var(--m5-linha)}
.m5-tcab{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--m5-tx2); letter-spacing:.02em}
.m5-tcab b{color:var(--m5-ouro); font-family:var(--m5-disp); font-weight:700}
.m5-tic{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--m5-ouro); color:var(--m5-ouro)}
.m5-tic .m5-ic{width:16px; height:16px}
.m5-tfrase{margin-top:8px; font-family:var(--m5-disp); font-size:20px; font-weight:600; line-height:1.32; letter-spacing:-.005em; color:var(--m5-creme)}
.m5-tsub{margin-top:8px; font-size:15px; line-height:1.45; color:var(--m5-tx2)}
.m5-trava .m5-tfrase{font-size:18px; line-height:1.34}
.m5-trava .m5-tsub{font-size:14px; margin-top:6px}
.m5-trava .m5-tic{background:var(--m5-ouro); color:var(--m5-fundo)}
.m5-so-cta .m5-papel{display:none}
.m5-so-cta .m5-serv{margin-top:0}
.m5-serv{margin-top:10px; font-size:15px; color:var(--m5-tx2)}
.m5-serv b{color:var(--m5-creme); font-weight:600}
.m5-pin-alerta .m5-nome{bottom:30px}
.m5-pin-alerta .m5-nome b{font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--m5-fundo); background:var(--m5-ouro); padding:4px 10px; border-radius:999px; text-shadow:none; white-space:nowrap}
.m5-pin-alerta .m5-onda{display:none}
.m5-dica{font-size:17px; color:var(--m5-tx2)}
.m5-entra{animation:m5-entra .5s var(--m5-ease)}
@keyframes m5-entra{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------- papel + botao */
.m5-info{margin-top:10px; align-self:start}
.m5-rota{font-size:14px; color:var(--m5-tx2); line-height:1.45}
.m5-papel{margin-top:0; font-size:15px; line-height:1.5; color:var(--m5-creme)}
.m5-papel b{font-family:var(--m5-disp); color:var(--m5-ouro); font-weight:700}
.m5-botao{display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; margin-top:16px; padding:10px 18px;
  background:var(--m5-ouro); color:var(--m5-fundo); border-radius:6px; font-family:var(--m5-disp); font-weight:700; font-size:16px; line-height:1.25; text-decoration:none; transition:filter .2s}
.m5-botao:hover{filter:brightness(1.08)}
.m5-botao:focus-visible{outline:2px solid var(--m5-creme); outline-offset:3px}

/* ---------- palco */
.m5-palco{position:relative; height:clamp(520px, calc(100vh - 56px), 720px); background:var(--m5-mar); border:1px solid var(--m5-linha); border-radius:6px; overflow:hidden}
.m5-tela{position:absolute; inset:0; width:100%; height:100%; display:block}
.m5-sprite{position:absolute; width:0; height:0; overflow:hidden}
.m5-fonte{margin-top:12px; font-size:14px; color:var(--m5-tx2); line-height:1.45}


/* ---------- rotulos (HTML sobre o SVG) */
.m5-rotulos{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.m5-pin{position:absolute; left:0; top:0; width:0; height:0; opacity:0; transition:opacity .45s var(--m5-ease)}
.m5-pin.m5-on{opacity:1}
.m5-marca{position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; background:var(--m5-fundo); border:1.5px solid var(--m5-ouro); color:var(--m5-ouro); display:grid; place-items:center; z-index:2}
.m5-marca .m5-ic{width:17px; height:17px}
.m5-ponto{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--m5-creme); box-shadow:0 0 0 2px var(--m5-fundo)}
.m5-nome{position:absolute; white-space:nowrap; display:flex; flex-direction:column; line-height:1.2; transition:opacity .35s var(--m5-ease);
  text-shadow:0 0 3px var(--m5-mar),0 0 6px var(--m5-mar),0 0 10px var(--m5-mar)}
.m5-nome b{font-family:var(--m5-disp); font-size:15px; font-weight:700; color:var(--m5-creme)}
.m5-nome small{font-size:14px; color:var(--m5-tx2)}
.m5-sem-nome .m5-nome{opacity:0}
.m5-pin.m5-mini{opacity:0}
.m5-lado-d .m5-nome{left:22px; top:0; transform:translateY(-50%)}
.m5-lado-e .m5-nome{right:22px; top:0; transform:translateY(-50%); text-align:right; align-items:flex-end}
.m5-lado-b .m5-nome{left:0; top:20px; transform:translateX(-50%); text-align:center; align-items:center}
.m5-lado-a .m5-nome{left:0; bottom:16px; transform:translateX(-50%); text-align:center; align-items:center}
.m5-lado-c .m5-nome{left:0; top:0; transform:translate(-50%,-50%); text-align:center; align-items:center}
.m5-pin-pais .m5-nome b{font-size:16px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--m5-creme)}
.m5-pin-mar .m5-nome b{font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--m5-ouro)}
.m5-pin-regiao .m5-nome b{font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--m5-ouro)}
.m5-pin-regiao .m5-onda{display:none}
.m5-pin-cidade .m5-ponto{width:7px; height:7px; left:-3.5px; top:-3.5px}
.m5-pin-pais .m5-nome{opacity:.55; transition:opacity .9s var(--m5-ease)}
.m5-pin-pais.m5-foco .m5-nome{opacity:1}
.m5-pin-pais.m5-foco .m5-nome b{color:var(--m5-ouro2)}
.m5-onda{position:absolute; left:-22px; top:-22px; width:44px; height:44px; border-radius:50%; border:2px solid var(--m5-ouro); opacity:0; z-index:1}
.m5-foco .m5-onda{animation:m5-onda 1.8s ease-out infinite}
.m5-foco .m5-onda2{animation-delay:.9s}
.m5-pin-pais .m5-onda,.m5-pin-mar .m5-onda{display:none}
.m5-foco .m5-marca{background:var(--m5-ouro); color:var(--m5-fundo)}
@keyframes m5-onda{0%{transform:scale(.55); opacity:.9}100%{transform:scale(1.9); opacity:0}}

/* selo do modal que acompanha a carga */
.m5-selo{position:absolute; left:0; top:0; width:0; height:0; opacity:0; transition:opacity .3s}
.m5-selo.m5-on{opacity:1}
.m5-selo .m5-ic{position:absolute; left:10px; top:-42px; width:32px; height:32px; padding:6px; border-radius:50%; background:var(--m5-ouro); color:var(--m5-fundo); box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* transbordo: troca de modal no terminal e no porto */
.m5-transb{position:absolute; left:0; top:0; width:0; height:0; opacity:0; transition:opacity .4s var(--m5-ease)}
.m5-transb.m5-on{opacity:1}
.m5-tb{position:absolute; left:0; top:-70px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:var(--m5-fundo); border:1.5px solid var(--m5-ouro); color:var(--m5-creme); box-shadow:0 6px 18px rgba(0,0,0,.5)}
.m5-tb .m5-ic{width:22px; height:22px}
.m5-tb .m5-ic:last-child{color:var(--m5-ouro)}
.m5-seta{width:18px; height:9px; fill:none; stroke:var(--m5-ouro); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.m5-transb.m5-on .m5-ic:last-child{animation:m5-troca 1.6s var(--m5-ease) both .25s}
@keyframes m5-troca{from{opacity:0; transform:translateX(-6px)}to{opacity:1; transform:none}}

/* ---------- filme: trilha de etapas na base do palco */
.m5-filme{position:absolute; left:0; right:0; bottom:0; padding:28px 20px 16px; background:linear-gradient(to bottom, rgba(18,16,16,0), rgba(18,16,16,.88) 45%); z-index:4}
.m5-filme[hidden]{display:none}
.m5-trilha{display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:640px; margin:0 auto}
.m5-etapa{flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; padding:0 2px; background:transparent; border:0; color:var(--m5-tx2); cursor:pointer; font:inherit}
.m5-eic{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--m5-linha); background:var(--m5-fundo); transition:all .35s var(--m5-ease)}
.m5-eic .m5-ic{width:20px; height:20px}
.m5-enome{font-size:14px; line-height:1.2; white-space:nowrap; transition:color .35s}
.m5-etapa.m5-feita .m5-eic{border-color:var(--m5-ouro); color:var(--m5-ouro)}
.m5-etapa.m5-agora .m5-eic{border-color:var(--m5-ouro); background:var(--m5-ouro); color:var(--m5-fundo); transform:scale(1.08)}
.m5-etapa.m5-agora .m5-enome,.m5-etapa.m5-feita .m5-enome{color:var(--m5-creme)}
.m5-etapa:hover .m5-eic{border-color:var(--m5-ouro)}
.m5-etapa:focus-visible{outline:none}
.m5-etapa:focus-visible .m5-eic{outline:2px solid var(--m5-creme); outline-offset:3px}
.m5-elo{flex:1 1 0; min-width:16px; max-width:90px; height:2px; margin-top:19px; background:var(--m5-linha); position:relative; overflow:hidden; border-radius:1px}
.m5-elo i{position:absolute; inset:0; background:var(--m5-ouro); transform-origin:left; transform:scaleX(0)}
.m5-pausa .m5-onda{animation-play-state:paused}

/* controles: tocar/pausar e Brasil inteiro */
.m5-ctrl{position:absolute; top:12px; right:12px; flex-direction:row-reverse; display:flex; gap:8px; z-index:5}
.m5-ctrl[hidden]{display:none}
.m5-bt{width:44px; height:44px; border-radius:50%; border:1px solid var(--m5-linha); background:rgba(26,24,20,.86); color:var(--m5-creme); cursor:pointer; display:grid; place-items:center; transition:border-color .2s,color .2s}
.m5-bt svg{width:20px; height:20px}
.m5-bt-txt{width:auto; border-radius:999px; padding:0 16px 0 10px; gap:4px; display:none; align-items:center; font-family:var(--m5-disp); font-weight:600; font-size:15px}
.m5-com-geral .m5-bt-txt{display:inline-flex}
.m5-bt-txt svg{width:18px; height:18px}
.m5-bt:hover{border-color:var(--m5-ouro); color:var(--m5-ouro)}
.m5-bt:focus-visible{outline:2px solid var(--m5-creme); outline-offset:2px}

/* ---------- sem JavaScript: lista das cadeias */
.m5-lista{list-style:none; display:grid; gap:14px; margin-top:24px}
.m5-lista > li{background:var(--m5-sup); border:1px solid var(--m5-linha); border-radius:6px; padding:18px}
.m5-lista h3{font-family:var(--m5-disp); font-size:22px}
.m5-lista h3 span{color:var(--m5-ouro); font-weight:600; font-size:16px}
.m5-lista ol{margin:10px 0; padding-left:0; list-style:none; display:grid; gap:4px; font-size:16px}
.m5-lista b{color:var(--m5-ouro)}
.m5-lrota{color:var(--m5-tx2); font-size:15px}
.m5-js .m5-lista{display:none}

/* ---------- celular */
@media (max-width:860px){
  .m5-grade{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"cab" "esc" "palco" "txt" "info" "fonte"}
  .m5-escolha{margin-top:18px}
  .m5-palco{height:min(118vw,560px); margin:16px -16px 0; border-left:0; border-right:0; border-radius:0}
  .m5-texto{margin-top:16px; min-height:112px; border-top:0; padding-top:0}
  .m5-tfrase{font-size:19px}
  .m5-botao{width:100%}
  .m5-filme{padding:24px 10px 10px}
  .m5-etapa{min-width:44px}
  .m5-enome{display:none}
  .m5-etapa.m5-agora .m5-enome{display:block}
  .m5-eic{width:36px; height:36px}
  .m5-elo{margin-top:17px}
  .m5-nome b{font-size:14px}
  .m5-nome small{display:none}
  .m5-pin-pais .m5-nome b{font-size:14px; letter-spacing:.14em}
  .m5-tb{top:-62px}
  .m5-sem-cel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .m5-foco .m5-onda{animation:none; opacity:.6; transform:scale(1.2)}
  .m5-entra,.m5-transb.m5-on .m5-ic:last-child{animation:none}
  .m5-elo i,.m5-pin{transition:none}
}

.m5-diag{position:absolute; left:8px; top:8px; z-index:9; max-width:calc(100% - 120px); padding:4px 8px; border-radius:4px; background:rgba(0,0,0,.75); color:#F5F0EB; font:12px/1.3 monospace}