/* Mapa de recorrido · barra lateral de progreso · Life Maxxxing landing v3
   Columna fija a la izquierda en escritorio. Por debajo de 1100 px no existe. */

.mp{
  --mp-bg:var(--bg,#0A0A0A);
  --mp-surface:var(--surface,#141414);
  --mp-border:var(--border,#262626);
  --mp-text:var(--text,#F5F5F5);
  --mp-muted:var(--muted,#9A9A9A);
  --mp-xxx:var(--xxx,#FFA31A);
  --mp-body:var(--body,'Inter',system-ui,-apple-system,sans-serif);
  position:fixed;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  z-index:45;
  display:none;
  font-family:var(--mp-body);
  pointer-events:none;
}
@media (min-width:1100px){ .mp{display:block} }
@media (prefers-reduced-motion:reduce){ .mp{display:none} }

.mp-lista{
  position:relative;
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:18px;
  pointer-events:auto;
}
/* linea vertical de fondo + relleno segun el avance real de la pagina */
.mp-riel{
  position:absolute;left:5px;top:4px;bottom:4px;width:2px;
  background:#2E2E2E;pointer-events:none;border-radius:2px;
}
.mp-riel i{
  position:absolute;left:0;top:0;width:2px;height:100%;border-radius:2px;
  background:var(--mp-xxx);transform-origin:top center;transform:scaleY(0);
  transition:transform .12s linear;
}
.mp-it{position:relative}
.mp-b{
  display:flex;align-items:center;gap:12px;
  margin:0;padding:3px 0;
  background:none;border:0;cursor:pointer;
  font-family:var(--mp-body);color:var(--mp-muted);
  text-align:left;
}
.mp-p{
  position:relative;z-index:1;
  display:block;flex:0 0 auto;width:13px;height:1px;
  background:#5A5A5A;
  transition:width .22s cubic-bezier(.2,.7,.2,1),background .22s ease;
}
.mp-t{
  display:block;white-space:nowrap;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mp-muted);
  opacity:0;transform:translateX(-5px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1),color .22s ease;
}
.mp-b:hover .mp-p{width:22px;background:var(--mp-text)}
.mp-b:hover .mp-t{opacity:1;transform:none;color:var(--mp-text)}
.mp-it.on .mp-p{width:26px;background:var(--mp-xxx);height:2px}
.mp-it.on .mp-t{opacity:1;transform:none;color:var(--mp-xxx)}
.mp-b:focus-visible{outline:2px solid var(--mp-xxx);outline-offset:4px;border-radius:4px}
.mp-b:focus-visible .mp-t{opacity:1;transform:none}