/* =========================================================
   MAPA DO PERCURSO (templates/_percurso_mapa.html)
   Fundo escurecido do print do Strava + rota vetorial por cima,
   nitida em qualquer tamanho. Usado na home e no regulamento.
   ========================================================= */

.rota-mapa {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #131820;
}

.rota-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.rota-svg image { opacity: .5; }
.rota-veu { fill: rgba(10, 10, 10, .12); }

.rota-sombra,
.rota-linha,
.rota-brilho {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rota-sombra { stroke: rgba(10, 8, 4, .7); stroke-width: 20; }
.rota-linha { stroke: #f8c010; stroke-width: 11; }
.rota-brilho { stroke: #fff8e8; stroke-width: 2.5; stroke-dasharray: 1 16; opacity: .85; }

.rota-seta {
  fill: none;
  stroke: #16100c;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rota-km circle { fill: #16100c; stroke: #f8c010; stroke-width: 4; }

.rota-km text {
  fill: #fff8e8;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  text-anchor: middle;
  dominant-baseline: central;
}

.rota-largada-halo { fill: rgba(226, 0, 26, .32); }
.rota-largada-ponto { fill: #e2001a; stroke: #fff8e8; stroke-width: 4; }

.rota-largada-bandeira {
  fill: #fff8e8;
  stroke: #fff8e8;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* etiqueta da largada em HTML: fica legivel mesmo com o mapa pequeno */
.rota-pin {
  position: absolute;
  transform: translate(calc(-100% - 18px), -50%);
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(10, 10, 10, .92);
  border: 1.5px solid #f8c010;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

.rota-pin::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 11px;
  height: 11px;
  background: rgba(10, 10, 10, .92);
  border-top: 1.5px solid #f8c010;
  border-right: 1.5px solid #f8c010;
  transform: translateY(-50%) rotate(45deg);
}

.rota-pin strong {
  color: #fff8e8;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

.rota-pin span {
  color: #f8c010;
  font-size: 11px;
  font-weight: 700;
}

/* legenda numa faixa fina abaixo do mapa */
.rota-mapa figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  padding: 5px 10px;
  background: #0f0d0a;
  color: rgba(255, 248, 232, .8);
  font-size: 11px;
}

.rota-mapa figcaption span { display: inline-flex; align-items: center; gap: 6px; }

.rota-leg-km {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16100c;
  border: 1.5px solid #f8c010;
  color: #fff8e8;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
}

.rota-leg-seta {
  width: 16px;
  height: 6px;
  border-radius: 3px;
  background: #f8c010;
  position: relative;
}

.rota-leg-seta::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-top: 1.5px solid #16100c;
  border-right: 1.5px solid #16100c;
  transform: translateY(-50%) rotate(45deg);
}

.rota-mapa figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #f8c010;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* rotulo de lugar desenhado no mapa */
.rota-lugar {
  fill: #fff8e8;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .08em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(10, 10, 10, .85);
  stroke-width: 6px;
}

.rota-leg-largada {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e2001a;
  border: 2px solid #fff8e8;
}