/* Cuadro demo de la portada en CELULAR (<= 640 px): la B, el diagrama Supplier → Contractor → DLA.
   Elegida por Ivan el 2 oct 2026 («me encanta la B»). Origen: salida/prueba-demo-celular/ (propuestas.css, solo la parte B).
   Por encima de 640 px .md-wrap no se muestra y el escritorio queda idéntico a la v7. */
.md-wrap { display: none; }

@media (max-width: 640px) {
  .hx2 .fd-wrap { display: none; }
  .hx2 .md-wrap { display: block; order: 2; }
  @media (prefers-reduced-motion: no-preference) {
    .hx2 .md-wrap { animation: hx-lift 700ms var(--ease) 80ms both; }
  }

  /* ---- común: marco, cabecera y el ítem ---- */
  .md { margin: 0; padding: 14px 16px 14px; border-radius: 18px; background: rgba(20, 30, 60, .72);
    border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 24px 50px -28px rgba(6, 10, 26, .8); }
  /* sin cabecera: el ítem manda. Fila 1 = nombre + Pause; fila 2 = NSN y cantidad + "Example data" (nota tipográfica, sin píldora) */
  .md-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .md-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
  .md-name { grid-column: 1; grid-row: 1; font: 700 1.0625rem/1.3 var(--display); letter-spacing: -.01em; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-sub { grid-column: 1; grid-row: 2; display: flex; gap: 10px; align-items: baseline; margin-top: 2px; }
  .md-nsn { font: 500 .8125rem/1.3 var(--mono); color: #fff; letter-spacing: .01em; }
  .md-qty { font: 400 .8125rem/1.3 var(--text); color: var(--tint-3); }
  .md-tag { grid-column: 2; grid-row: 2; justify-self: end; font: 400 .8125rem/1.3 var(--text); color: var(--tint-3); }
  /* Pause: 44 × 44 tocable sin agrandar la fila (el área sobra hacia el padding) */
  .md-pp { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; appearance: none; border: 0; background: none; cursor: pointer;
    min-width: 44px; height: 44px; margin: -12px -8px -10px 0; padding: 0 8px;
    color: #fff; font: 700 .8125rem/1 var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
  .md-pp:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
  .md-run .md-name, .md-run .md-sub { transition: opacity .3s ease, transform .5s var(--ease); }
  .md-run .md-item.is-swap .md-name, .md-run .md-item.is-swap .md-sub { opacity: 0; transform: translateY(6px); }
  .md-snap, .md-snap * { transition: none !important; animation: none !important; }

  /* ================= B · Diagrama: 3 nodos y la pieza que viaja ================= */
  .mb-dia { position: relative; margin: 14px 0 0; }
  .mb-nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
  .mb-n { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
  .mb-c { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy-d);
    box-shadow: 0 0 0 4px #182446; }
  .mb-c svg { width: 21px; height: 21px; }
  .mb-l { font: 700 .875rem/1.25 var(--display); color: #fff; }
  /* riel entre los centros de los nodos (1/6 y 5/6 del ancho), detrás de los nodos */
  .mb-rail { position: absolute; top: 20px; left: 16.667%; right: 16.667%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
  .mb-fill { position: absolute; inset: 0; border-radius: 2px; background: #fff; transform-origin: left; transform: scaleX(var(--p, 1)); }
  /* la pieza: un cuadradito blanco que recorre el riel; el contenedor ocupa el ancho entero y se corre de a 1/3 */
  .mb-go { position: absolute; top: 0; left: 0; width: 100%; height: 42px; z-index: 0; pointer-events: none; transform: translateX(calc(var(--k, 2) * 33.333%)); }
  .mb-part { position: absolute; left: calc(16.667% - 7px); top: 14px; width: 14px; height: 14px; border-radius: 4px; background: #fff;
    box-shadow: 0 0 0 3px #182446; opacity: 0; }
  .mb-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; min-height: 20px;
    font: 400 .875rem/1.3 var(--text); color: var(--tint-3); text-align: center; }
  .mb-status svg { width: 14px; height: 14px; flex: none; color: #fff; }
  .mb-status b { font-weight: 700; color: #fff; }
  .mb-status:not(.is-done) svg { display: none; }

  .md-run .mb-go { transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
  .md-run .mb-part { transition: opacity .3s ease; }
  .md-run .mb-part { opacity: 1; }
  .md-run .mb-fill { transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
  .md-run .mb-c { transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
  .md-run .mb-n:not(.is-on) .mb-c { background: #182446; color: var(--tint-3); box-shadow: 0 0 0 4px #182446, inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
  .md-run .mb-n:not(.is-on) .mb-l { color: var(--tint-3); }
  .md-run .mb-status { transition: opacity .25s ease; }
  .md-run .mb-status.is-swap { opacity: 0; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hx2 .md-wrap { animation: none; }
}