/* ============================================================
   mapa.css — la travesía

   Al llegar, la ruta se DIBUJA sola (stroke-dashoffset con
   pathLength="1"), después aparecen los hitos uno a uno (retardo por
   --i) y al final los campamentos. Pasar por un campamento enciende
   los caminos punteados hacia sus etapas.
   ============================================================ */

.mp {
  max-width: 1500px; margin: 0 auto;
  padding: calc(var(--hud) + 26px) 28px 70px;
}

.mp-cab {
  max-width: 760px;
  padding: 20px 24px;
  background: linear-gradient(90deg, rgba(10, 7, 13, 0.78), rgba(10, 7, 13, 0.35));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-left: 2px solid var(--violeta);
}
.mp-titulo {
  margin: 6px 0 8px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.05;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--violeta);
}
.mp-bajada { margin: 0; color: var(--crema-2); font-size: 16px; }

.mp-lienzo {
  position: relative;
  margin-top: 18px;
  padding: 8px;
  background: radial-gradient(ellipse at 50% 55%, rgba(10, 7, 13, 0.35), rgba(10, 7, 13, 0.72));
  border: 1px solid var(--linea-suave);
}
.mp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mp-svg.vertical { max-width: 520px; margin: 0 auto; }

.mp-region {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  fill: var(--arena-clara);
}
.mp-svg.vertical .mp-region { font-size: 12px; letter-spacing: 0.14em; }
.mp-region-borde { stroke: var(--linea-arena); stroke-width: 1; stroke-dasharray: 2 6; }

.mp-ruta-cauce { fill: none; stroke: rgba(0, 0, 0, 0.45); stroke-width: 12; stroke-linecap: round; }
.mp-ruta {
  fill: none; stroke: var(--arena); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dibujarRuta 2.4s var(--curva) 0.25s forwards;
}
.mp-ruta-huellas {
  fill: none; stroke: var(--crema); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 0.5 14; opacity: 0;
  animation: aparecer 1s ease 2.4s forwards;
}
@keyframes dibujarRuta { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 0.5; } }

/* Las líneas y los rótulos no deben robarle el ratón a hitos y campamentos. */
.mp-regiones, .mp-caminos { pointer-events: none; }
.mp-svg.mirando .mp-ruta { opacity: 0.55; transition: opacity 0.3s; }

.mp-camino {
  stroke: var(--lavanda); stroke-width: 1.6; stroke-dasharray: 5 7;
  opacity: 0; transition: opacity 0.3s ease;
}
.mp-camino.ver { opacity: 0.9; animation: hormigas 1.2s linear infinite; }
@keyframes hormigas { to { stroke-dashoffset: -24; } }

.mp-hito { cursor: pointer; opacity: 0; animation: hitoSale 0.55s var(--curva) forwards; animation-delay: calc(0.8s + var(--i) * 0.11s); }
@keyframes hitoSale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mp-hito-halo { fill: var(--violeta); opacity: 0; transition: opacity 0.25s; }
.mp-hito-aro { fill: rgba(10, 7, 13, 0.85); stroke: var(--arena-clara); stroke-width: 1.5; }
.mp-hito-nucleo { fill: var(--violeta); transition: fill 0.25s; }
.mp-hito-num { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; fill: var(--tinta); pointer-events: none; }
.mp-hito-txt {
  font-family: var(--f-texto); font-weight: 500; fill: var(--crema);
  paint-order: stroke; stroke: rgba(10, 7, 13, 0.85); stroke-width: 5px; stroke-linejoin: round;
}
.mp-hito:hover .mp-hito-halo, .mp-hito:focus .mp-hito-halo { opacity: 0.22; }
.mp-hito:hover .mp-hito-nucleo, .mp-hito:focus .mp-hito-nucleo { fill: var(--lavanda); }
.mp-hito:hover .mp-hito-txt, .mp-hito:focus .mp-hito-txt { fill: var(--arena-clara); }
.mp-hito.visitada .mp-hito-aro { stroke: var(--lavanda); stroke-dasharray: 3 3; }
.mp-hito:focus { outline: none; }
.mp-hito:focus-visible .mp-hito-aro { stroke: var(--lavanda); stroke-width: 3; }

.mp-camp { cursor: pointer; opacity: 0; animation: hitoSale 0.6s var(--curva) 2.3s forwards; }
.mp-camp-aura { fill: var(--lavanda); opacity: 0; transition: opacity 0.25s; }
.mp-camp-tienda { fill: rgba(157, 108, 240, 0.22); stroke: var(--arena-clara); stroke-width: 1.5; stroke-linejoin: round; }
.mp-camp-puerta { fill: none; stroke: var(--arena-clara); stroke-width: 1.2; }
.mp-camp-id { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.08em; fill: var(--arena-clara);
  paint-order: stroke; stroke: rgba(10, 7, 13, 0.85); stroke-width: 4px; }
.mp-camp-n { font-family: var(--f-mono); font-size: 11px; fill: var(--crema-3);
  paint-order: stroke; stroke: rgba(10, 7, 13, 0.85); stroke-width: 4px; }
.mp-camp:hover .mp-camp-aura, .mp-camp:focus .mp-camp-aura { opacity: 0.16; }
.mp-camp:hover .mp-camp-tienda, .mp-camp:focus .mp-camp-tienda { fill: var(--violeta); }
.mp-camp:focus { outline: none; }

/* La ficha junto a un hito o un campamento. */
.mp-ficha {
  position: absolute; z-index: 3; width: 320px;
  padding: 14px 16px;
  background: var(--panel-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--linea);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.3s var(--curva);
}
.mp-ficha[hidden] { display: none; }
.mp-ficha.visible { opacity: 1; transform: none; }
.mp-ficha-tag { color: var(--violeta); }
.mp-ficha-tit { font-weight: 600; font-size: 16px; line-height: 1.3; margin: 3px 0 6px; }
.mp-ficha-txt { margin: 0 0 8px; font-size: 14px; color: var(--crema-2); line-height: 1.5; }
.mp-ficha-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.mp-ficha-fila .etq { margin-right: 4px; }
.mp-ficha-lista { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: 14px; color: var(--crema-2); }
.mp-ficha-lista li { margin: 3px 0; }
.mp-ficha-lista b { color: var(--violeta); font-family: var(--f-mono); }

/* El gemelo HTML del hito que vuela a la cabecera (View Transitions). */
.mp-vuelo {
  position: fixed; z-index: 90; display: grid; place-items: center;
  border-radius: 50%; background: var(--violeta); color: var(--tinta);
  font-family: var(--f-mono); font-weight: 700; font-size: 12px;
  pointer-events: none;
}

/* El índice de etapas, debajo del mapa (y la forma accesible de recorrerlo). */
.mp-indice {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
  margin-top: 22px;
}
.mp-indice-sec {
  padding: 14px 16px;
  background: rgba(10, 7, 13, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-top: 2px solid var(--linea-arena);
}
.mp-indice-sec .etq { color: var(--arena-clara); display: block; margin-bottom: 6px; }
.mp-indice-a { display: flex; gap: 10px; padding: 4px 0; font-size: 14.5px; color: var(--crema-2); }
.mp-indice-a span { font-family: var(--f-mono); font-size: 12px; color: var(--violeta); min-width: 28px; }
.mp-indice-a:hover { color: var(--crema); }
.mp-indice-a.visitada::after { content: '·· huellas'; margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--crema-3); }

@media (max-width: 760px) {
  .mp { padding: calc(var(--hud) + 16px) 14px 50px; }
  .mp-titulo { font-size: clamp(22px, 7.2vw, 34px); letter-spacing: 0.08em; }
  .mp-cab { padding: 16px; }
  .mp-ficha { width: min(300px, calc(100vw - 48px)); }
}