/* ============================================================
   14-metodo.css · Restyle "pipeline" del timeline #metodo (Home)
   Override visual de .method* (nodo/chip/línea). El reveal y la
   estructura viven en 05-components.css (NO se tocan).
   ============================================================ */

/* ── Nodo: círculo morado sólido + índice mono claro ── */
.method__step { grid-template-columns: 52px 1fr; }
.method__step-num {
  width: 52px; height: 52px;
  background: var(--vp-azul-profundo);
  border: none;
  color: #fff;
}
.method__step:hover .method__step-num { background: var(--vp-azul-ejecutivo); color: #fff; transform: scale(1.06); }
.method__step-num svg { display: none; }      /* D-MET-01: ocultar icono */
.method__step-num span {
  font-family: var(--font-mono);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; margin: 0;
}

/* ── Línea conectora: alineada al nodo 52px + "dibujado" atado al scroll ──
   Estado inicial colapsada (scaleY 0). El observer pone .is-visible en
   .method__viz al entrar en viewport → la línea se "dibuja". */
.method__line {
  left: 25px;
  background: linear-gradient(to bottom, var(--vp-lavanda), var(--vp-azul-ejecutivo), var(--vp-azul-profundo));
  opacity: 0.5;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1400ms var(--ease);
}
.method__viz.is-visible .method__line { transform: scaleY(1); }

/* ── Chip "output" (Entrega + valor) ── */
.method__deliverable {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: #EEEDFE; border-radius: var(--radius-md);
  padding: 6px 12px;
}
.method__deliverable-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-azul-ejecutivo);
}
.method__deliverable-val { font-size: 13px; font-weight: 600; color: var(--vp-azul-profundo); }

@media (max-width: 600px) {
  .method__step { grid-template-columns: 44px 1fr; }
  .method__step-num { width: 44px; height: 44px; }
  .method__line { left: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .method__line { transition: none; transform: scaleY(1); }
}