/* mapa: OSM escurecido para ficar no tom da marca */
.m-mapa-escuro{filter:invert(1) hue-rotate(200deg) brightness(.82) contrast(.92) saturate(.35)}

/* OUTRUN · momentos. Tokens e componentes vêm de base.css. */

[data-momento]{min-width:0}
[data-momento="abertura"]:empty{display:none}

.m-abertura{
  position:fixed;inset:0;z-index:100;
  display:grid;grid-template-rows:1fr auto 1fr;
  align-items:center;justify-items:center;
  padding:clamp(24px,6vw,72px);
  background:var(--preto);color:var(--off);
  overflow:hidden;isolation:isolate;
  clip-path:inset(0);
  transition:clip-path .5s var(--ease);
}
.m-abertura::before{
  content:"";position:absolute;inset:-40%;z-index:-2;
  background:
    radial-gradient(ellipse at 25% 40%,var(--violeta),transparent 40%),
    radial-gradient(ellipse at 60% 60%,var(--vermelho),transparent 35%),
    radial-gradient(ellipse at 75% 70%,var(--laranja),transparent 30%);
  filter:blur(40px);opacity:.85;
  transform:rotate(-25deg);
  animation:m-magma 5s ease-in-out infinite alternate;
}
.m-abertura::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='none' d='M0 0h160v160H0z'/%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.8'/%3E%3C/svg%3E");
}
.m-abertura.m-saindo{clip-path:inset(0 0 100% 0)}
.m-abertura .m-ab-centro{width:min(100%,760px);text-align:center}
.m-abertura .logo{
  width:100%;color:var(--off);
  animation:m-logo 1.1s var(--ease) both;
}
.m-abertura .meta{color:var(--off);text-align:center}
.m-abertura .m-ab-frase{margin-top:1.5rem}
.m-abertura .m-ab-rodape{
  width:100%;align-self:end;
  display:grid;justify-items:center;gap:2rem;
}
.m-abertura .m-ab-pular{color:var(--off);font-size:.85rem}
@keyframes m-logo{
  from{clip-path:inset(100% 0 0);filter:blur(12px);transform:translateY(16px)}
  to{clip-path:inset(0);filter:blur(0);transform:none}
}
@keyframes m-magma{
  to{transform:translate(4%,-4%) rotate(-12deg) scale(1.1)}
}

[data-momento="marquee"]{
  position:relative;z-index:2;overflow:hidden;
  padding-block:12px;margin-block:-12px;
}
.m-marquee{transform:rotate(2deg) scale(1.025)}
.m-marquee .m-marquee-grupo{display:flex;flex:none}
.m-marquee:hover .marquee-trilho{animation-play-state:paused}

.m-contagem{
  position:relative;overflow:hidden;
  padding-block:clamp(24px,4vw,48px);text-align:center;
}
.m-contagem .m-tempo{
  display:flex;justify-content:center;align-items:baseline;
  gap:clamp(3px,1.2vw,20px);white-space:nowrap;
}
.m-tempo .numero{font-variant-numeric:tabular-nums}
.m-contagem .numero{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.5rem,10.5vw,10rem);
  letter-spacing:-.035em;line-height:1.05;
}
.m-tempo i{font-style:normal}
.m-contagem .m-tempo i{font-family:var(--f-display);font-size:clamp(1.5rem,5vw,5rem)}
.m-contagem .meta{
  margin-top:.8rem;color:var(--off);
  font-size:clamp(.65rem,1.4vw,1rem);
}
.m-contagem-curta{text-align:center;color:var(--off)}
.m-contagem-curta .m-tempo{
  display:flex;justify-content:center;align-items:baseline;
  gap:clamp(4px,1.4vw,12px);white-space:nowrap;
}
.m-contagem-curta .numero{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.1rem,4.5vw,1.7rem);letter-spacing:.08em;
}
.m-contagem-curta i{font-size:.85rem}
.m-contagem .m-depois{font-size:clamp(3rem,10vw,8rem)}
.m-contagem-curta .m-depois{font-size:1.7rem}

/* contagem: só tipografia, na serifa do logo; cada dígito rola dentro da sua casa */
.m-flip{display:flex;align-items:flex-start;gap:clamp(.5rem,1.6vw,1.4rem)}
.m-flip-grupo{display:grid;justify-items:center;gap:.35rem}
.m-flip-digitos{display:flex}
.m-flip-peca{
  position:relative;display:block;overflow:hidden;
  width:.6em;height:1.05em;
  font-family:var(--f-display);font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1;color:var(--off);
}
.m-flip-num{position:absolute;inset:0;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.m-flip-entra{animation:flipEntra .6s cubic-bezier(.2,.9,.25,1) both}
.m-flip-sai{animation:flipSai .6s cubic-bezier(.5,0,.75,0) both}
@keyframes flipEntra{from{transform:translateY(-85%);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
@keyframes flipSai{to{transform:translateY(85%);opacity:0;filter:blur(4px)}}
/* segundos com o laranja da marca */
.m-flip-grupo:last-child .m-flip-peca{color:var(--laranja)}
.m-flip-sep{
  font-family:var(--f-display);color:rgba(244,241,236,.35);
  font-size:clamp(2rem,4vw,3.4rem);line-height:clamp(2.7rem,5.6vw,4.8rem);
}
.m-flip-rotulo{font-family:var(--f-rotulo);font-weight:600;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,241,236,.6)}
.heroi-relogio .m-depois{font-size:clamp(2rem,5vw,3.4rem);color:var(--off)}
@media (max-width:420px){
  .m-flip{gap:.35rem}
  .m-flip-peca{font-size:2.35rem}
  .m-flip-sep{font-size:1.7rem;line-height:2.5rem}
}

.m-corredores{
  position:relative;overflow:hidden;min-height:260px;
  -webkit-mask-image:linear-gradient(90deg,transparent, var(--preto) 12%,var(--preto) 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--preto) 12%,var(--preto) 90%,transparent);
}
.m-corredores img{
  width:116%;max-width:none;height:100%;min-height:260px;
  object-fit:cover;object-position:center;
  transform:translateX(-7%);will-change:transform;
}
.m-corredores .m-corredores-repouso{
  min-height:260px;display:grid;place-content:center;
  padding:2rem;background:var(--magma);color:var(--off);
  font-family:var(--f-display);font-size:clamp(2rem,6vw,4rem);
  text-align:center;
}

.m-mapa{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:360px;height:clamp(360px,48vw,560px);
  background:var(--preto);color:var(--off);
}
.m-mapa-repouso{position:absolute;inset:0;display:grid;align-content:center}
.m-mapa-repouso svg{width:100%;height:100%;min-height:260px}
.m-mapa-repouso .m-mar{fill:var(--indigo)}
.m-mapa-repouso .m-terra{fill:var(--cartao)}
.m-mapa-repouso .m-orla{fill:none;stroke:var(--tinta-2);stroke-width:2}
.m-mapa-repouso .m-rota-brilho{fill:none;stroke:var(--vermelho);stroke-width:15;opacity:.35}
.m-mapa-repouso .m-rota{fill:none;stroke:var(--laranja);stroke-width:5}
.m-mapa-repouso circle{fill:var(--laranja);stroke:var(--off);stroke-width:2}
.m-mapa-repouso text{
  fill:var(--off);font:600 13px var(--f-rotulo);letter-spacing:1px;
}
.m-mapa-repouso .meta{position:absolute;bottom:14px;left:16px;right:16px;color:var(--tinta)}
.m-mapa-tela{position:absolute;inset:0;visibility:hidden}
.m-mapa.m-mapa-pronto .m-mapa-tela{visibility:visible}
.m-mapa.m-mapa-pronto .m-mapa-repouso{visibility:hidden}
.m-pino{
  display:block;width:max-content;max-width:145px;
  padding:6px 8px;background:var(--preto);color:var(--off);
  border-left:3px solid var(--laranja);
  font:600 11px/1.25 var(--f-rotulo);letter-spacing:.08em;
  transform:translate(10px,-100%);white-space:normal;
}
.m-pino-retorno{transform:translate(calc(-100% - 10px),0)}
/* o corredor: um círculo laranja com borda clara e um halo que pulsa */
.m-ponto{
  display:block;position:relative;box-sizing:border-box;
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid var(--off);background:var(--laranja);
  box-shadow:0 0 14px 2px rgba(255,74,10,.7);
}
.m-ponto::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:2px solid var(--laranja);animation:mPontoHalo 1.8s ease-out infinite}
@keyframes mPontoHalo{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
/* mapa estático: é uma ilustração do percurso, não dá para arrastar nem dar zoom */
.m-mapa .leaflet-container{cursor:default}
.m-mapa .leaflet-interactive{cursor:default!important}
.m-mapa .leaflet-container{background:var(--preto);font-family:var(--f-texto)}
.m-mapa .leaflet-control-attribution{
  background:var(--preto);color:var(--tinta);font-size:10px;
}
.m-mapa .leaflet-control-attribution a{color:var(--off)}
.m-mapa .leaflet-bar a{background:var(--preto);color:var(--off);border-color:var(--linha)}

.m-convite{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:2rem;align-items:center;
}
.m-convite-form{display:grid;gap:1rem;min-width:0}
.m-convite-acoes{display:grid;gap:.75rem}
.m-convite .campo>span{color:inherit}
.m-convite .campo input{background:var(--preto);color:var(--off)}
.m-convite-previa{
  width:min(100%,270px);justify-self:center;
  aspect-ratio:9/16;overflow:hidden;border:1px solid var(--linha);
  border-radius:var(--raio);background:var(--preto);color:var(--off);
}
.m-convite-previa canvas{display:block;width:100%;height:auto}
.m-convite-repouso{
  height:100%;display:grid;place-content:center;gap:1.5rem;
  padding:1.5rem;text-align:center;background:var(--magma);
}
.m-convite-repouso .logo{width:180px;max-width:100%;margin:auto}
.m-convite-repouso .display{font-size:2.5rem}
.m-convite-aviso{min-height:3em;font-size:.9rem;overflow-wrap:anywhere}
@media(min-width:700px){
  .m-convite{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:3rem}
}
@media(prefers-reduced-motion:reduce){
  .m-marquee .marquee-trilho{animation:none}
  .m-corredores img{transform:translateX(-7%)!important;filter:none!important;will-change:auto}
}