/* Alphyx v9 — presentación del ejemplo Pistón (órdenes de servicio de un taller mecánico ficticio) en el bloque
 * Software a medida de la portada y en software.html. Se añade a styles.css/motion.css sin modificarlos. Prefijo sp-.
 * Las pantallas en miniatura usan la paleta de Pistón (gris lámina, barra grafito, colores de etapa con texto) dentro
 * de una laptop dibujada; lo que las rodea mantiene la identidad Alphyx. Las fotos (o sus marcadores «Foto
 * pendiente») comparten las clases ps-media/ps-fill/ps-ph del ejemplo, con estilo propio aquí. Movimiento en
 * software-piston.js. */

.sp-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; color: var(--light-blue, #6cb0ff); }
.sp-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.night .sp-link:focus-visible { outline-color: var(--light-blue, #6cb0ff); }

/* Etapas (mismos valores que Pistón) */
.sp-laptop .ps-st--recibido { --st: #46535b; --st-soft: #e2e7ea; }
.sp-laptop .ps-st--diagnostico { --st: #5a3ea0; --st-soft: #ece7fa; }
.sp-laptop .ps-st--esperando { --st: #7a4f00; --st-soft: #fbefd0; }
.sp-laptop .ps-st--reparacion { --st: #1c4d8c; --st-soft: #dfe9f7; }
.sp-laptop .ps-st--listo { --st: #22683a; --st-soft: #dcf1e2; }
.sp-laptop .ps-st--entregado { --st: #3b4247; --st-soft: #e6e8e9; }

/* ——— Laptop dibujada ——— */
.sp-laptop { position: relative; container-type: inline-size; width: 100%; margin: 0 auto; perspective: 1600px; text-align: left; }
.sp-lid { position: relative; padding: 2.1% 2.1% 2.6%; border-radius: 1.6cqi 1.6cqi 0.4cqi 0.4cqi; background: linear-gradient(#262b2f, #15181b); box-shadow: inset 0 0 0 1px #4b5358, 0 40px 70px -40px #000c; transform-origin: 50% 100%; }
.sp-lid::before { content: ""; position: absolute; left: 50%; top: 0.8%; width: 0.6cqi; height: 0.6cqi; margin-left: -0.3cqi; border-radius: 50%; background: #3d4449; }
.sp-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.5cqi; background: #e7eaeb; }
.sp-base { position: relative; height: 2.6cqi; margin: 0 -6.5%; border-radius: 0 0 2cqi 2cqi / 0 0 100% 100%; background: linear-gradient(#e2e5e7 0 18%, #b8bec2 60%, #8f969b); box-shadow: 0 18px 30px -18px #000b; }
.sp-notch { position: absolute; left: 50%; top: 0; width: 13%; height: 36%; transform: translateX(-50%); border-radius: 0 0 1cqi 1cqi; background: #a7aeb3; }
.sp-promo .sp-promo-art { padding: 14px 0 30px; }
.sp-promo .sp-laptop { width: min(86%, 620px); }
.sp-hero .sp-hero-art { width: min(1000px, calc(100% - 48px)); margin: 48px auto 0; }
.sp-hero .concept-label { margin-top: 44px; }

/* ——— Pantallas en miniatura (no interactivas) ——— */
.sp-s { position: absolute; inset: 0; display: flex; overflow: hidden; background: #e7eaeb; color: #15191c; font: clamp(4px, 1.28cqi, 13px)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
.sp-s-side { width: 16%; flex: none; display: flex; flex-direction: column; gap: 0.35em; padding: 1.1em 0.7em; background: radial-gradient(circle at 1px 1px, #ffffff17 1px, transparent 1.3px) 0 0 / 0.9em 0.9em, #1f2528; color: #e8ecee; }
.sp-s-brand { display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.6em; font-weight: 700; font-size: 1.2em; color: #fff; --ps-mark-cut: #1f2528; }
.sp-s-mark { width: 1.3em; height: 1.3em; color: #eef1f3; }
.sp-s-nav { padding: 0.35em 0.5em; border-radius: 0.4em; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-s-nav.on { background: #ffffff26; box-shadow: inset 0.2em 0 0 #fff; color: #fff; font-weight: 600; }
.sp-s-new { margin-top: 0.5em; padding: 0.4em; border-radius: 0.4em; background: #f3f5f6; color: #15191c; font-size: 0.8em; font-weight: 650; text-align: center; white-space: nowrap; }
.sp-s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8em; padding: 1.1em 1.2em; }
.sp-s-title { display: flex; align-items: baseline; gap: 0.8em; }
.sp-s-title b { font-size: 1.55em; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.sp-s-title small { color: #566067; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tag { position: relative; display: inline-flex; align-items: center; height: 1.6em; padding: 0 0.55em 0 1.2em; border: 0.09em solid var(--st); border-radius: 0.25em 0.8em 0.8em 0.25em; background: var(--st-soft); color: var(--st); font: 700 0.78em/1 ui-monospace, Consolas, monospace; white-space: nowrap; }
.sp-tag > i { position: absolute; left: 0.35em; top: 50%; width: 0.45em; height: 0.45em; margin-top: -0.225em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.09em var(--st); }
.sp-tag--l { height: 2.6em; padding: 0 1em 0 2em; font-size: 1.1em; border-width: 0.12em; border-radius: 0.35em 1.3em 1.3em 0.35em; }
.sp-tag--l > i { left: 0.6em; width: 0.7em; height: 0.7em; margin-top: -0.35em; }
.sp-s-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6em; }
.sp-s-col { display: flex; flex-direction: column; gap: 0.5em; padding: 0.55em 0.45em; border-radius: 0.7em; background: #dde2e4; border-top: 0.25em solid var(--st); }
.sp-s-colh { display: flex; align-items: center; gap: 0.35em; font-weight: 700; font-size: 0.85em; }
.sp-s-colh > i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--st); }
.sp-s-colh em { margin-left: auto; padding: 0 0.45em; border-radius: 1em; background: #fff; font: 650 0.9em ui-monospace, Consolas, monospace; font-style: normal; }
.sp-s-card { display: grid; gap: 0.2em; padding: 0.55em; border-radius: 0.55em; background: #fff; box-shadow: 0 0.05em 0 #00000014, 0 0 0 0.06em #00000012; }
.sp-s-card b { font-size: 0.88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.2em; }
.sp-s-card small { color: #566067; font-size: 0.72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-s-foot { display: flex; align-items: center; gap: 0.35em; color: #434c52; font-size: 0.7em; white-space: nowrap; }
.sp-s-av { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--m); color: #fff; font: 700 0.8em/1 system-ui, sans-serif; font-style: normal; }
.sp-s-hooks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5em; padding: 0.7em; border-radius: 0.8em; background: #fff; }
.sp-s-hook { display: grid; gap: 0.2em; padding: 0.45em 0.5em 0.6em; border-radius: 0.6em; background: #f3f5f5; border-top: 0.22em solid var(--st); }
.sp-s-hook > span:first-child { color: var(--st); font-weight: 650; font-size: 0.72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-s-hook em { font-style: normal; font-weight: 700; font-size: 1.6em; line-height: 1; }
.sp-s-tags { display: flex; gap: 0.25em; padding-top: 0.35em; border-top: 0.25em solid #8a9398; }
.sp-s-tags .sp-tag { writing-mode: vertical-rl; height: auto; width: 1.35em; padding: 1em 0 0.35em; justify-content: flex-start; border-radius: 0.2em 0.2em 0.7em 0.7em; font-size: 0.62em; }
.sp-s-tags .sp-tag > i { left: 50%; top: 0.3em; margin: 0 0 0 -0.225em; }
.sp-s-dash { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.6em; }
.sp-s-panel { display: grid; align-content: start; gap: 0.35em; padding: 0.7em 0.8em; border-radius: 0.8em; background: #fff; min-width: 0; }
.sp-s-panel > b { font-size: 0.95em; margin-bottom: 0.15em; display: flex; justify-content: space-between; gap: 0.5em; }
.sp-s-panel > b em { font-style: normal; font-size: 0.7em; padding: 0.1em 0.4em; border-radius: 0.3em; background: #fbefd0; color: #6b4500; }
.sp-s-row { display: flex; align-items: center; gap: 0.45em; padding: 0.25em 0; border-top: 0.06em solid #e6e9eb; font-size: 0.8em; white-space: nowrap; min-width: 0; }
.sp-s-row > em { font: 650 0.9em ui-monospace, Consolas, monospace; font-style: normal; }
.sp-s-row > span:not(.sp-tag) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-s-st { padding: 0.1em 0.5em; border-radius: 1em; background: var(--st-soft); color: var(--st); font-style: normal; font-weight: 650; font-size: 0.85em; white-space: nowrap; }
.sp-s-load { display: flex; align-items: center; gap: 0.5em; }
.sp-s-bar { position: relative; flex: 1; height: 0.4em; border-radius: 0.2em; background: #dde2e4; overflow: hidden; }
.sp-s-bar > span { position: absolute; inset: 0; background: #434c52; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.sp-s-main--ficha { gap: 0.7em; }
.sp-s-fhead { display: flex; align-items: center; gap: 1em; padding: 0.8em 1em; border-radius: 0.8em; background: #fff; }
.sp-s-fhead > span { display: grid; gap: 0.15em; min-width: 0; }
.sp-s-fhead small { color: #566067; font-size: 0.7em; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.sp-s-fhead b { font-size: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-s-fhead .sp-s-st { justify-self: start; font-size: 0.75em; }
.sp-s-prog { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; padding: 0 1.5em; background: linear-gradient(#b4bdc2, #b4bdc2) 1.5em 50% / calc(100% - 3em) 0.15em no-repeat; }
.sp-s-prog i { justify-self: center; width: 0.8em; height: 0.8em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.14em #b4bdc2; }
.sp-s-prog i.done { background: #434c52; box-shadow: none; }
.sp-s-prog i.on { width: 1.8em; border-radius: 0.4em; background: #15191c; box-shadow: none; }
.sp-s-fgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.6em; }
.sp-s-line { display: flex; justify-content: space-between; gap: 0.6em; padding: 0.22em 0; border-bottom: 0.06em solid #e6e9eb; font-size: 0.75em; white-space: nowrap; }
.sp-s-line > span { overflow: hidden; text-overflow: ellipsis; }
.sp-s-line em { font-style: normal; font-weight: 600; }
.sp-s-tot { border-bottom: 0; border-top: 0.14em solid #15191c; font-size: 0.9em; font-weight: 700; }
.sp-s-btn { justify-self: start; margin-top: 0.3em; padding: 0.45em 0.8em; border-radius: 0.5em; background: #15191c; color: #fff; font-size: 0.75em; font-weight: 650; white-space: nowrap; }
.sp-s-btn--r { align-self: flex-end; }
.sp-s-hist { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.4em; font-size: 0.72em; }
.sp-s-hist em { font: 650 0.95em ui-monospace, Consolas, monospace; font-style: normal; color: #434c52; }
.sp-s-steps { display: flex; gap: 1.2em; font-size: 0.85em; color: #566067; }
.sp-s-steps span { display: flex; align-items: center; gap: 0.4em; }
.sp-s-steps i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.9em; box-shadow: inset 0 0 0 0.12em #aeb7bc; font-style: normal; font-weight: 700; font-size: 0.85em; }
.sp-s-steps .done i { background: #434c52; color: #fff; box-shadow: none; }
.sp-s-steps .on { color: #15191c; font-weight: 700; }
.sp-s-steps .on i { width: 3.2em; background: #15191c; color: #fff; box-shadow: none; }
.sp-s-opts { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0.5em; padding: 1em; border-radius: 0.8em; background: #fff; }
.sp-s-opts > b { grid-column: 1 / -1; font-size: 0.9em; margin-top: 0.3em; }
.sp-s-opts > span { padding: 0.55em 0.7em; border-radius: 0.5em; box-shadow: inset 0 0 0 0.07em #aeb7bc; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-s-opts > span.on { box-shadow: inset 0 0 0 0.14em #15191c; background: #f1f3f4; font-weight: 650; }
.sp-s-chk::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; vertical-align: -0.1em; border-radius: 50%; box-shadow: inset 0 0 0 0.12em #8f999f; }
.sp-s-chk.on::before { background: #15191c; box-shadow: none; }

/* ——— Fotos y marcadores (clases de Pistón) ——— */
.sp-shop .ps-media { position: relative; overflow: hidden; background: #cfd5d8; }
.sp-shop .ps-fill, .sp-shop .ps-fill img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-shop .ps-fill img { object-fit: cover; }
.sp-shop .ps-ph { background: radial-gradient(120% 90% at 28% 16%, #ffffffa6, transparent 60%), linear-gradient(160deg, #e3e7e9, #cbd2d5); }
.sp-shop .ps-ph-shape { position: absolute; left: 50%; top: 46%; width: 34%; transform: translate(-50%, -50%); color: #6f7a80; opacity: .75; }
.sp-shop .ps-ph-note { position: absolute; left: 12px; bottom: 12px; padding: 1px 8px; border-radius: 6px; background: #f7f8f8eb; color: #3f484d; font: 600 12px/1.6 ui-monospace, Consolas, monospace; }
.sp-credits { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; margin: 8px 20px 0; }
.sp-credits a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.night .sp-credits { color: #b9bec8; }
.night .sp-credits a { color: var(--light-blue, #6cb0ff); }

/* ——— Recorrido «Un día de taller» (#ejemplo) ——— */
.sp-scene { background: #fff; padding: 110px 0 96px; }
.sp-scene-head { text-align: center; }
.sp-scene-head h2 { font-size: clamp(34px, 4.3vw, 58px); max-width: 880px; margin: 0 auto; }
.sp-scene-head p:not(.eyebrow) { font-size: 19px; color: var(--muted); max-width: 660px; margin: 20px auto 0; }
.sp-scene-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; width: min(1080px, calc(100% - 64px)); margin: 56px auto 0; }
.sp-scene:not(.sp-scene-live) .sp-laptop--scene .sp-screen { aspect-ratio: auto; background: none; overflow: visible; }
.sp-scene:not(.sp-scene-live) .sp-laptop--scene { container-type: normal; }
.sp-scene:not(.sp-scene-live) .sp-laptop--scene .sp-lid { padding: 0; background: none; box-shadow: none; }
.sp-scene:not(.sp-scene-live) .sp-laptop--scene .sp-lid::before, .sp-scene:not(.sp-scene-live) .sp-laptop--scene .sp-base { display: none; }
.sp-scene:not(.sp-scene-live) .sp-scene-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sp-scene:not(.sp-scene-live) .sp-scene-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #0000001a, 0 24px 44px -26px #1d2a3a66; }
.sp-scene-screen .sp-s { font-size: clamp(4px, 1.4cqi, 13px); }
.sp-scene-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 8px 0 0; padding: 0; }
.sp-scene-steps li { font-size: 15px; line-height: 1.45; color: var(--muted); }
.sp-scene-steps b { color: var(--ink); font-weight: 600; }
.sp-scene-bar { display: block; height: 2px; margin-bottom: 14px; background: var(--line); overflow: hidden; }
.sp-scene-bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.sp-scene:not(.sp-scene-live) .sp-scene-bar span { transform: none; }
.sp-scene-foot { margin-top: 64px; text-align: center; }
.sp-scene-foot .actions { justify-content: center; }
.sp-scene-foot .concept-label { margin-top: 18px; }
.sp-scene-live { height: 380vh; min-height: 2600px; padding: 0; }
.sp-scene-live .sp-scene-pin { position: sticky; top: var(--sp-nav-h, 64px); height: calc(100svh - var(--sp-nav-h, 64px)); display: flex; flex-direction: column; justify-content: center; padding: 20px 0 16px; overflow: hidden; }
.sp-scene-live .sp-scene-head p:not(.eyebrow), .sp-scene-live .sp-scene-foot { display: none; }
.sp-scene-live .sp-scene-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.sp-scene-live .sp-scene-stage { flex: 1; min-height: 0; grid-template-columns: minmax(0, 780px) minmax(0, 280px); justify-content: center; align-items: center; gap: 32px 56px; margin-top: 24px; }
.sp-scene-live .sp-laptop--scene { align-self: center; width: min(100%, calc((100svh - var(--sp-nav-h, 64px) - 200px) * 1.55)); justify-self: center; }
.sp-scene-live .sp-scene-screens { position: absolute; inset: 0; }
.sp-scene-live .sp-scene-screen { position: absolute; inset: 0; visibility: hidden; container-type: inline-size; }
.sp-scene-live .sp-scene-screen.is-on { visibility: visible; }
.sp-scene-live .sp-scene-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
.sp-scene-live .sp-scene-steps li { transition: color .25s ease; }
.sp-scene-live .sp-scene-steps li.is-active { color: var(--ink); }
/* Aunque la escena en vivo no está activa, la «pantalla» de la laptop reserva su proporción. */
.sp-scene-live .sp-laptop--scene .sp-screen { aspect-ratio: 16 / 10; }

/* ——— El taller ficticio ——— */
.sp-shop { background: var(--soft); padding: 100px 0; }
.sp-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.sp-shop-media { aspect-ratio: 4 / 3; border-radius: 24px; }
.sp-shop-copy h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 520px; }
.sp-shop-copy p:not(.eyebrow) { margin-top: 18px; font-size: 18px; color: var(--muted); }
.sp-shop-copy .sp-shop-note { font-size: 14px; }
.sp-shop-copy .sp-credits { text-align: left; margin: 10px 0 0; }

/* ——— Detalles ——— */
.sp-notes { background: #fff; padding: 110px 0; }
.sp-notes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; }
.sp-notes h2 { font-size: clamp(32px, 3.6vw, 50px); max-width: 520px; }
.sp-notes-list { margin: 0; border-top: 1px solid var(--line); }
.sp-notes-list div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.sp-notes-list dt { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sp-notes-list dd { margin: 0; font-size: 17px; color: var(--muted); }

/* Estado oculto solo con JS y movimiento permitido (lo quita software-piston.js). */
.sp-motion .sp-pending .sp-laptop { opacity: 0; }

@media (max-width: 1100px) {
  .sp-scene-live .sp-scene-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; width: calc(100% - 48px); }
  .sp-scene-live .sp-laptop--scene { width: min(100%, 720px, calc((100svh - var(--sp-nav-h, 64px) - 250px) * 1.55)); }
  .sp-scene-live .sp-scene-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .sp-scene-live .sp-scene-steps li { font-size: 13px; line-height: 1.3; }
  .sp-scene-live .sp-scene-steps li .sp-step-text { display: none; }
  .sp-notes-grid, .sp-shop-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sp-promo .sp-laptop { width: 90%; }
  .sp-hero .sp-hero-art { width: calc(100% - 32px); margin-top: 36px; }
  .sp-scene { padding: 72px 0 64px; }
  .sp-scene-stage { width: calc(100% - 40px); gap: 16px; }
  .sp-scene:not(.sp-scene-live) .sp-scene-screens { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sp-scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-scene-steps li { font-size: 14px; }
  .sp-scene-bar { margin-bottom: 8px; }
  .sp-scene-live .sp-scene-pin { padding: 12px 0 10px; }
  .sp-scene-live .sp-scene-head .eyebrow { display: none; }
  .sp-scene-live .sp-scene-head h2 { font-size: 24px; padding: 0 16px; }
  .sp-scene-live .sp-scene-stage { width: calc(100% - 32px); margin-top: 12px; }
  .sp-scene-live .sp-scene-steps li { font-size: 12px; }
  .sp-shop, .sp-notes { padding: 72px 0; }
  .sp-notes-list div { grid-template-columns: minmax(0, 1fr); }
  .sp-s-side { width: 0; padding: 0; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-scene-steps li { transition: none !important; }
}

/* v13 (fluidez): pseudo-elementos que sustituyen animaciones que el navegador no compone o que no conviene animar.
   - Velo de la pantalla: su opacidad (0,75 → 0) equivale exactamente a filter: brightness(.25 → 1) sobre la pantalla.
   - Sombra de la orden que viaja de «Esperando» a «Reparación»: la sombra está quieta y solo se desvanece su opacidad
     (antes se animaba box-shadow, que repinta en cada cuadro). Solo existe en la primera tarjeta de esa columna. */
.sp-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none;}
.sp-s-col[data-sp-col="reparacion"] > .sp-s-card:nth-child(1 of .sp-s-card) { position: relative;}
.sp-s-col[data-sp-col="reparacion"] > .sp-s-card:nth-child(1 of .sp-s-card)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 16px 30px -10px #0008; opacity: 0; pointer-events: none;}
.sp-scene-screen .sp-s-col[data-sp-col="reparacion"] > .sp-s-card:nth-child(1 of .sp-s-card)::after { box-shadow: 0 12px 24px -8px #0006;}
/* v13: el paso activo del recorrido crece desde la izquierda (origen fijo aquí, no en los fotogramas). */
.sp-s-steps .on i { transform-origin: left center;}