/* ============================================================================
   SERVICIOS · RECORRIDO DOBLE (LAB, 2026-10-08)
   Concepto: «Lo que vive tu cliente y el trabajo que lo hace posible».
   Delante: el teléfono del cliente. Detrás: el plano de trabajo de ROCALDE.
   Mismo motor que el ensamblaje de Diseño Web: escena fija, un paso por tramo,
   DOM en estado final (chat + medición), reduced-motion = composición estática.
   ========================================================================== */

[data-rh-sv="escena"] .sv-journey {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(50% 60% at 78% 40%, rgba(242, 106, 27, 0.10), transparent 70%),
    radial-gradient(40% 50% at 20% 70%, rgba(30, 155, 196, 0.10), transparent 70%),
    linear-gradient(180deg, #050b10 0%, #07141c 100%);
}
[data-rh-sv="escena"] .sv-journey.sv-ready { height: calc(100svh + 7 * 24vh); padding: 0; }
[data-rh-sv="escena"] .sv-journey.sv-ready .sv-journey__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 60px; }
[data-rh-sv="escena"] .sv-journey__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; width: 100%; }
[data-rh-sv="escena"] .sv-journey .rh-h2 { margin-bottom: 0; font-size: clamp(26px, 2.6vw, 38px); }

/* Leyenda de los dos carriles */
[data-rh-sv="escena"] .sv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: rgba(244, 247, 250, 0.8); }
[data-rh-sv="escena"] .sv-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
[data-rh-sv="escena"] .sv-legend__front::before { background: #7fd0ea; }
[data-rh-sv="escena"] .sv-legend__back::before { background: #f26a1b; }

/* Etapas */
[data-rh-sv="escena"] .sv-stages { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: svs; }
[data-rh-sv="escena"] .sv-stages li { counter-increment: svs; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 8px 0; border-top: 1px solid rgba(214, 222, 227, 0.09); transition: opacity 0.35s ease; }
[data-rh-sv="escena"] .sv-stages li::before { content: "0" counter(svs); grid-row: span 3; padding-top: 3px; font-size: 11px; font-weight: 700; color: rgba(198, 214, 226, 0.5); }
[data-rh-sv="escena"] .sv-stages b { font-size: clamp(15px, 1.3vw, 17px); color: #fff; letter-spacing: -0.01em; }
[data-rh-sv="escena"] .sv-stages .sv-f,
[data-rh-sv="escena"] .sv-stages .sv-b { display: block; font-size: 13.5px; line-height: 1.4; padding-left: 15px; position: relative; }
[data-rh-sv="escena"] .sv-stages .sv-f { color: #bfe6f3; margin-top: 4px; }
[data-rh-sv="escena"] .sv-stages .sv-b { color: #ffc7a6; margin-top: 2px; }
[data-rh-sv="escena"] .sv-stages .sv-f::before,
[data-rh-sv="escena"] .sv-stages .sv-b::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; }
[data-rh-sv="escena"] .sv-stages .sv-f::before { background: #7fd0ea; }
[data-rh-sv="escena"] .sv-stages .sv-b::before { background: #f26a1b; }

[data-rh-sv="escena"] .sv-ready .sv-stages li { opacity: 0.36; }
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-done { opacity: 0.6; }
[data-rh-sv="escena"] .sv-ready .sv-stages li .sv-f,
[data-rh-sv="escena"] .sv-ready .sv-stages li .sv-b { display: none; }
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-current { opacity: 1; }
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-current::before { color: #f26a1b; }
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-current .sv-f,
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-current .sv-b { display: block; animation: sv-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-rh-sv="escena"] .sv-ready .sv-stages li.is-current .sv-b { animation-delay: 0.08s; }
@keyframes sv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

[data-rh-sv="escena"] .sv-journey__bar { display: none; }
[data-rh-sv="escena"] .sv-ready .sv-journey__bar { display: block; height: 2px; margin-top: 12px; background: rgba(214, 222, 227, 0.12); }
[data-rh-sv="escena"] .sv-journey__bar i { display: block; height: 100%; background: linear-gradient(90deg, #7fd0ea, #f26a1b); transform: scaleX(var(--sv-p, 1)); transform-origin: 0 50%; }

/* --- Escena: dos planos ---------------------------------------------------- */
[data-rh-sv="escena"] .sv-scene { position: relative; aspect-ratio: 1.22; perspective: 1600px; }
[data-rh-sv="escena"] .sv-scene::before { /* el hilo que une lo que se ve con lo que se hace */
  content: ""; position: absolute; left: 22%; right: 30%; top: 52%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(242, 106, 27, 0.75) 0 6px, transparent 6px 12px);
  z-index: 1;
}
[data-rh-sv="escena"] .sv-back {
  position: absolute; right: 0; top: 2%; width: 74%; height: 84%;
  border-radius: 14px; border: 1px dashed rgba(242, 106, 27, 0.45);
  background:
    repeating-linear-gradient(0deg, rgba(127, 208, 234, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(127, 208, 234, 0.05) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #0b1e2a, #091520);
  transform: rotateY(-9deg) rotateX(3deg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
[data-rh-sv="escena"] .sv-back__tag { position: absolute; left: 4%; top: 4%; z-index: 2; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 199, 166, 0.85); }
[data-rh-sv="escena"] .sv-back__tag b { color: #fff; letter-spacing: 0.04em; }
[data-rh-sv="escena"] .sv-back__canvas { position: absolute; left: 30%; right: 5%; top: 15%; bottom: 7%; container-type: inline-size; }

[data-rh-sv="escena"] .sv-phone {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: 33%; aspect-ratio: 9 / 18.5;
  padding: 2.2%; border-radius: 26px;
  background: #0b0f13; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 50px 90px -20px rgba(0, 0, 0, 0.85), 0 0 0 6px rgba(127, 208, 234, 0.08);
}
[data-rh-sv="escena"] .sv-phone__notch { position: absolute; left: 50%; top: 2.6%; z-index: 4; width: 28%; height: 2.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }
[data-rh-sv="escena"] .sv-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 20px; background: #0d1c26; container-type: inline-size; }
[data-rh-sv="escena"] .sv-scene__count { position: absolute; right: 0; bottom: -2%; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(198, 214, 226, 0.65); }
[data-rh-sv="escena"] .sv-count { color: #f26a1b; font-size: 18px; }

/* Pantallas (delante) y capas (detrás): una por paso, con fundido */
[data-rh-sv="escena"] .sv-p,
[data-rh-sv="escena"] .sv-k { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s; transform: translateY(4%); }
[data-rh-sv="escena"] .sv-p.is-on,
[data-rh-sv="escena"] .sv-k.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-rh-sv="escena"] .sv-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-rh-sv="escena"] .sv-p i, [data-rh-sv="escena"] .sv-p em,
[data-rh-sv="escena"] .sv-k i, [data-rh-sv="escena"] .sv-k em { font-style: normal; }

/* 1 · feed */
[data-rh-sv="escena"] .sv-p--feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.75)); }
[data-rh-sv="escena"] .sv-play { position: absolute; left: 50%; top: 45%; z-index: 1; width: 22cqw; height: 22cqw; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.22); border: 2px solid rgba(255, 255, 255, 0.8); }
[data-rh-sv="escena"] .sv-play::after { content: ""; position: absolute; left: 40%; top: 30%; border-left: 7cqw solid #fff; border-top: 4.5cqw solid transparent; border-bottom: 4.5cqw solid transparent; }
[data-rh-sv="escena"] .sv-handle { position: absolute; left: 7%; bottom: 15%; z-index: 1; font-size: 6cqw; font-weight: 700; color: #fff; }
[data-rh-sv="escena"] .sv-cap { position: absolute; left: 7%; right: 7%; bottom: 6%; z-index: 1; font-size: 5.2cqw; line-height: 1.3; color: rgba(255, 255, 255, 0.85); }
/* 2 · web */
[data-rh-sv="escena"] .sv-p--web img { object-position: 4% 0; }
/* 3 · entiende */
[data-rh-sv="escena"] .sv-p--read { background: #f6efe2; padding: 22cqw 8% 0; display: flex; flex-direction: column; gap: 4cqw; }
[data-rh-sv="escena"] .sv-read__h { font-size: 8cqw; font-weight: 800; color: #2a1b14; letter-spacing: -0.02em; }
[data-rh-sv="escena"] .sv-card { display: block; padding: 6cqw 6cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 2cqw 6cqw rgba(60, 40, 20, 0.12); border-left: 1.4cqw solid #b8432f; }
[data-rh-sv="escena"] .sv-card b { font-size: 5.6cqw; color: #2a1b14; }
[data-rh-sv="escena"] .sv-p--read.is-on .sv-card { animation: sv-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-rh-sv="escena"] .sv-p--read.is-on .sv-card:nth-of-type(2) { animation-delay: 0.1s; }
[data-rh-sv="escena"] .sv-p--read.is-on .sv-card:nth-of-type(3) { animation-delay: 0.2s; }
/* 4 · explora */
[data-rh-sv="escena"] .sv-dots { position: absolute; left: 50%; bottom: 7%; z-index: 1; display: flex; gap: 2cqw; transform: translateX(-50%); }
[data-rh-sv="escena"] .sv-dots u { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
[data-rh-sv="escena"] .sv-dots u:nth-child(2) { background: #fff; }
[data-rh-sv="escena"] .sv-swipe { position: absolute; left: 60%; top: 55%; z-index: 1; width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3cqw rgba(255, 255, 255, 0.18); }
[data-rh-sv="escena"] .sv-p--explore.is-on .sv-swipe { animation: sv-swipe 1.6s ease-in-out 0.3s 2 both; }
@keyframes sv-swipe { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateX(-30cqw); opacity: 1; } 100% { transform: translateX(-30cqw); opacity: 0; } }
/* 5 · decide */
[data-rh-sv="escena"] .sv-p--cta img { filter: brightness(0.55); }
[data-rh-sv="escena"] .sv-wa { position: absolute; left: 8%; right: 8%; bottom: 12%; z-index: 1; padding: 5cqw 0; border-radius: 3cqw; background: #25d366; text-align: center; font-size: 5.8cqw; font-weight: 800; color: #062b14; }
[data-rh-sv="escena"] .sv-tap { position: absolute; left: 62%; bottom: 14%; z-index: 2; width: 10cqw; height: 10cqw; border-radius: 50%; border: 1cqw solid #fff; opacity: 0; }
[data-rh-sv="escena"] .sv-p--cta.is-on .sv-tap { animation: sv-tap 1.4s ease-out 0.4s 2; }
@keyframes sv-tap { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2); } }
/* 6 · conversa */
[data-rh-sv="escena"] .sv-p--chat { background: #0b141a; padding: 0 5%; }
[data-rh-sv="escena"] .sv-chat__top { display: block; margin: 0 -6%; padding: 16cqw 8% 4cqw; background: #1f2c33; font-size: 5.6cqw; font-weight: 700; color: #e9edef; }
[data-rh-sv="escena"] .sv-msg { display: block; max-width: 82%; margin-top: 5cqw; padding: 3.4cqw 4cqw; border-radius: 3cqw; font-size: 5cqw; line-height: 1.35; color: #e9edef; }
[data-rh-sv="escena"] .sv-msg--in { background: #202c33; }
[data-rh-sv="escena"] .sv-msg--in small { display: block; margin-top: 2cqw; font-size: 3.8cqw; color: #f2a36f; }
[data-rh-sv="escena"] .sv-msg--out { margin-left: auto; background: #005c4b; }
[data-rh-sv="escena"] .sv-p--chat.is-on .sv-msg--in { animation: sv-in 0.45s ease both 0.15s; }
[data-rh-sv="escena"] .sv-p--chat.is-on .sv-msg--out { animation: sv-in 0.45s ease both 0.9s; }

/* Detrás 1 · narrativa y video */
[data-rh-sv="escena"] .sv-k--story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; align-content: center; }
[data-rh-sv="escena"] .sv-k--story figure { margin: 0; }
[data-rh-sv="escena"] .sv-k--story img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1.5cqw; }
[data-rh-sv="escena"] .sv-k--story figcaption { margin-top: 2cqw; font-size: 3cqw; letter-spacing: 0.1em; text-transform: uppercase; color: #ffc7a6; }
[data-rh-sv="escena"] .sv-k__cut { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; aspect-ratio: auto; }
[data-rh-sv="escena"] .sv-k__cut span { font-size: 2.8cqw; letter-spacing: 0.1em; color: rgba(198, 214, 226, 0.7); }
[data-rh-sv="escena"] .sv-k__cut i { display: block; height: 4cqw; border-radius: 1cqw; background: linear-gradient(90deg, #f26a1b 0 30%, #1e9bc4 30% 70%, #7fd0ea 70%); transform-origin: 0 50%; }
[data-rh-sv="escena"] .sv-k__cut i:nth-of-type(2) { width: 80%; } [data-rh-sv="escena"] .sv-k__cut i:nth-of-type(3) { width: 60%; }
[data-rh-sv="escena"] .sv-k--story.is-on .sv-k__cut i { animation: sv-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Detrás 2 · dirección visual */
[data-rh-sv="escena"] .sv-k--visual { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 3cqw; align-content: center; }
[data-rh-sv="escena"] .sv-sw { display: block; aspect-ratio: 1; border-radius: 2cqw; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.15); }
[data-rh-sv="escena"] .sv-k--visual.is-on .sv-sw { animation: sv-in 0.5s ease both; }
[data-rh-sv="escena"] .sv-k--visual.is-on .sv-sw:nth-child(2) { animation-delay: 0.08s; } [data-rh-sv="escena"] .sv-k--visual.is-on .sv-sw:nth-child(3) { animation-delay: 0.16s; } [data-rh-sv="escena"] .sv-k--visual.is-on .sv-sw:nth-child(4) { animation-delay: 0.24s; }
[data-rh-sv="escena"] .sv-type { grid-column: 1 / span 2; font-size: 20cqw; font-weight: 800; line-height: 1; color: #f3ead8; letter-spacing: -0.04em; }
[data-rh-sv="escena"] .sv-type-n { grid-column: 3 / span 2; align-self: center; font-size: 3.6cqw; color: rgba(198, 214, 226, 0.8); }
/* Detrás 3 · arquitectura */
[data-rh-sv="escena"] .sv-k--arch svg { position: absolute; left: 0; top: 18%; width: 100%; height: 60%; }
[data-rh-sv="escena"] .sv-k--arch path { fill: none; stroke: rgba(127, 208, 234, 0.6); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 0; }
[data-rh-sv="escena"] .sv-k--arch.is-on path { animation: sv-draw 0.9s ease both; }
@keyframes sv-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
[data-rh-sv="escena"] .sv-node { position: absolute; padding: 2.2cqw 3.4cqw; border-radius: 1.6cqw; background: #12293a; border: 1px solid rgba(127, 208, 234, 0.5); font-size: 3.6cqw; font-weight: 600; color: #e9f6fb; transform: translateX(-50%); white-space: nowrap; }
[data-rh-sv="escena"] .sv-node--root { left: 50%; top: 10%; border-color: #f26a1b; }
[data-rh-sv="escena"] .sv-node:nth-child(2) { left: 16.6%; top: 62%; } [data-rh-sv="escena"] .sv-node:nth-child(3) { left: 50%; top: 62%; } [data-rh-sv="escena"] .sv-node:nth-child(4) { left: 83.3%; top: 62%; }
/* Detrás 4 · desarrollo e interacción */
[data-rh-sv="escena"] .sv-k--dev { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4cqw; align-items: center; }
[data-rh-sv="escena"] .sv-k--dev code { padding: 4cqw; border-radius: 2cqw; background: #050c12; border: 1px solid rgba(127, 208, 234, 0.25); font-size: 3.6cqw; line-height: 1.6; color: #9fdcef; }
[data-rh-sv="escena"] .sv-k--dev code b { color: #ffc7a6; }
[data-rh-sv="escena"] .sv-k--dev svg { width: 100%; }
[data-rh-sv="escena"] .sv-curve { fill: none; stroke: #f26a1b; stroke-width: 2.5; stroke-dasharray: 160; }
[data-rh-sv="escena"] .sv-k--dev.is-on .sv-curve { animation: sv-curve 1s ease both 0.2s; }
@keyframes sv-curve { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
[data-rh-sv="escena"] .sv-k--dev em { grid-column: 2; font-size: 3.2cqw; color: rgba(198, 214, 226, 0.7); }
/* Detrás 5 y 6 · conversión y seguimiento */
[data-rh-sv="escena"] .sv-k--conv, [data-rh-sv="escena"] .sv-k--follow { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2.4cqw; }
[data-rh-sv="escena"] .sv-pill { padding: 3cqw 4.4cqw; border-radius: 99px; background: #12293a; border: 1px solid rgba(127, 208, 234, 0.45); font-size: 4cqw; font-weight: 600; color: #e9f6fb; }
[data-rh-sv="escena"] .sv-pill--hot { border-color: #f26a1b; background: rgba(242, 106, 27, 0.16); }
[data-rh-sv="escena"] .sv-arrow { width: 2px; height: 6cqw; margin-left: 8cqw; background: linear-gradient(180deg, #7fd0ea, #f26a1b); }
[data-rh-sv="escena"] .sv-k--conv.is-on > *, [data-rh-sv="escena"] .sv-k--follow.is-on > * { animation: sv-in 0.45s ease both; }
[data-rh-sv="escena"] .sv-k.is-on > *:nth-child(2) { animation-delay: 0.1s; } [data-rh-sv="escena"] .sv-k.is-on > *:nth-child(3) { animation-delay: 0.2s; }
[data-rh-sv="escena"] .sv-k.is-on > *:nth-child(4) { animation-delay: 0.3s; } [data-rh-sv="escena"] .sv-k.is-on > *:nth-child(5) { animation-delay: 0.4s; }
/* Detrás 7 · medición */
[data-rh-sv="escena"] .sv-k--data { display: flex; flex-direction: column; justify-content: center; gap: 3.6cqw; }
[data-rh-sv="escena"] .sv-k--data em { font-size: 3.4cqw; letter-spacing: 0.12em; text-transform: uppercase; color: #7fd0ea; }
[data-rh-sv="escena"] .sv-ev { display: block; }
[data-rh-sv="escena"] .sv-ev b { display: block; font-size: 4.2cqw; font-weight: 600; color: #e9f6fb; margin-bottom: 1.4cqw; }
[data-rh-sv="escena"] .sv-ev i { display: block; height: 1.6cqw; border-radius: 1cqw; background: linear-gradient(90deg, #7fd0ea, #f26a1b); transform-origin: 0 50%; }
[data-rh-sv="escena"] .sv-ev:nth-of-type(1) i { width: 100%; } [data-rh-sv="escena"] .sv-ev:nth-of-type(2) i { width: 72%; } [data-rh-sv="escena"] .sv-ev:nth-of-type(3) i { width: 48%; } [data-rh-sv="escena"] .sv-ev:nth-of-type(4) i { width: 28%; }
[data-rh-sv="escena"] .sv-k--data.is-on .sv-ev i { animation: sv-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-rh-sv="escena"] .sv-k--data.is-on .sv-ev:nth-of-type(2) i { animation-delay: 0.1s; } [data-rh-sv="escena"] .sv-k--data.is-on .sv-ev:nth-of-type(3) i { animation-delay: 0.2s; } [data-rh-sv="escena"] .sv-k--data.is-on .sv-ev:nth-of-type(4) i { animation-delay: 0.3s; }

/* --- Responsive: misma idea, traducción propia (P09) ---------------------- */
@media (max-width: 900px) {
  [data-rh-sv="escena"] .sv-journey__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  [data-rh-sv="escena"] .sv-journey.sv-ready { height: calc(100svh + 7 * 20vh); }
  [data-rh-sv="escena"] .sv-journey.sv-ready .sv-journey__pin { align-items: flex-start; padding-top: 72px; }
  [data-rh-sv="escena"] .sv-journey__grid { display: flex; flex-direction: column; gap: 12px; }
  [data-rh-sv="escena"] .sv-journey__copy { display: contents; }
  [data-rh-sv="escena"] .sv-journey .rh-eyebrow { order: 0; margin: 0; }
  [data-rh-sv="escena"] .sv-journey .rh-h2 { order: 1; font-size: 23px; }
  [data-rh-sv="escena"] .sv-legend { order: 2; margin: 0; font-size: 11px; }
  [data-rh-sv="escena"] .sv-scene { order: 3; width: 100%; aspect-ratio: 1.1; }
  [data-rh-sv="escena"] .sv-phone { width: 40%; border-radius: 18px; }
  [data-rh-sv="escena"] .sv-phone__screen { border-radius: 13px; }
  [data-rh-sv="escena"] .sv-back { width: 68%; transform: none; }
  [data-rh-sv="escena"] .sv-back__canvas { left: 34%; right: 4%; top: 18%; }
  [data-rh-sv="escena"] .sv-back__tag { left: 36%; right: 4%; font-size: 9px; line-height: 1.3; }
  [data-rh-sv="escena"] .sv-scene::before { left: 30%; right: 40%; }
  [data-rh-sv="escena"] .sv-scene__count { bottom: -5%; font-size: 10.5px; }
  [data-rh-sv="escena"] .sv-stages { order: 4; width: 100%; margin-top: 18px; }
  [data-rh-sv="escena"] .sv-journey__bar { order: 5; width: 100%; }
  [data-rh-sv="escena"] .sv-ready .sv-stages { position: relative; min-height: 104px; }
  [data-rh-sv="escena"] .sv-ready .sv-stages li { position: absolute; inset: 0 0 auto 0; border-top: 0; opacity: 0; }
  [data-rh-sv="escena"] .sv-ready .sv-stages li.is-done { opacity: 0; }
  [data-rh-sv="escena"] .sv-ready .sv-stages li.is-current { opacity: 1; }
}

/* --- Reduced motion: composición final estática --------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-rh-sv="escena"] .sv-p, [data-rh-sv="escena"] .sv-k { transition: none; }
  [data-rh-sv="escena"] .sv-journey *, [data-rh-sv="escena"] .sv-journey *::before { animation: none !important; }
}