/* V2 — el hilo dorado es el movimiento; el contenido permanece estable. */
:root {
  --v2-progreso: 0;
  --v2-pulso: 0;
}

html.v2 #experiencia { --retrato-ancho: 112px; }

html.v2 #experiencia .socio__retrato {
  background: var(--crema-100);
  border-color: var(--crema-300);
  filter: saturate(.88) contrast(1.015);
}

@media (min-width: 640px) {
  html.v2 #experiencia { --retrato-ancho: 144px; }
}

@media (min-width: 1024px) {
  html.v2 #experiencia { --retrato-ancho: 152px; }
}

html.v2 .eje__recorrido,
html.v2 #capacidades .cap-orbe::after,
html.v2 #significado .simetria::before,
html.v2 #puentes .paso:not(:last-child)::after {
  animation: none;
  transform: scaleY(var(--v2-progreso, 0));
  transform-origin: top;
  will-change: transform;
}

html.v2 .eje__recorrido {
  box-shadow: 0 0 10px color-mix(in srgb, var(--eje-trazo) 22%, transparent);
}

html.v2 .eje-marco > .nodo {
  animation: none;
  transition:
    background-color 420ms var(--e-foco),
    box-shadow 420ms var(--e-foco),
    opacity 420ms var(--e-foco);
}

html.v2 .eje-marco > .nodo.v2-completo {
  background: var(--nodo-vivo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nodo-vivo) 12%, transparent);
}

html.v2 .eje-marco > .nodo--anillo.v2-completo {
  background: none;
  box-shadow:
    inset 0 0 0 5px var(--nodo-vivo),
    0 0 0 5px color-mix(in srgb, var(--nodo-vivo) 12%, transparent);
}

html.v2 .eje-marco > .nodo.v2-actual {
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--nodo-vivo) 14%, transparent),
    0 0 18px color-mix(in srgb, var(--nodo-vivo) 28%, transparent);
}

html.v2 .eje-marco > .nodo--anillo.v2-actual {
  box-shadow:
    inset 0 0 0 3px var(--nodo-vivo),
    0 0 0 5px color-mix(in srgb, var(--nodo-vivo) 14%, transparent),
    0 0 18px color-mix(in srgb, var(--nodo-vivo) 28%, transparent);
}

html.v2 #significado .simetria::before {
  box-shadow: 0 0 12px color-mix(in srgb, var(--oro-500) 20%, transparent);
}

html.v2 #puentes .paso::before {
  transition: background-color 360ms var(--e-foco), box-shadow 360ms var(--e-foco);
}

html.v2 #puentes .paso.v2-completo::before {
  background: var(--oro-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro-500) 12%, transparent);
}

html.v2 #puentes .puente {
  position: relative;
  border-top-color: var(--azul-700);
}

html.v2 #puentes .puente::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--oro-500);
  transform: scaleX(var(--v2-puente, 0));
  transform-origin: left;
  box-shadow: 0 0 12px color-mix(in srgb, var(--oro-500) 18%, transparent);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  html.v2.js .revelar {
    transform: none;
    transition-property: opacity;
    transition-duration: 720ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.v2 .eje__recorrido,
  html.v2 #capacidades .cap-orbe::after,
  html.v2 #significado .simetria::before,
  html.v2 #puentes .paso:not(:last-child)::after {
    transform: scaleY(1);
  }

  html.v2 #puentes .puente::before { transform: scaleX(1); }
}