/* ============================================================================
   SISTEMAS · ESCENA «DEL ACONTECIMIENTO AL SISTEMA» (LAB, 2026-10-08)
   Una sola escena espacial, fija, que la cámara recorre:
   acontecimiento → causas → ramificaciones → transformación → consecuencia.
   Material, elegante y cinematográfica: piedra clara, bronce, luz cálida.
   Sin WebGL o con reduced-motion: el texto de las 5 etapas queda como lectura.
   ========================================================================== */

[data-rh-ss="escena"] .ss-scene {
  position: relative;
  background: radial-gradient(120% 90% at 50% 30%, #0b1d27 0%, #06121a 55%, #040b10 100%);
}
[data-rh-ss="escena"] .ss-scene.ss-live { height: calc(100svh + 5 * 80vh); }
[data-rh-ss="escena"] .ss-pin { position: relative; min-height: 100svh; overflow: hidden; }
[data-rh-ss="escena"] .ss-live .ss-pin { position: sticky; top: 0; height: 100svh; }

[data-rh-ss="escena"] .ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
[data-rh-ss="escena"] .ss-live .ss-canvas { display: block; }
[data-rh-ss="escena"] .ss-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 11, 16, 0.82) 0%, rgba(4, 11, 16, 0.35) 34%, transparent 58%),
    linear-gradient(0deg, rgba(4, 11, 16, 0.55) 0%, transparent 30%);
}

/* --- Etapas (texto en el DOM) -------------------------------------------- */
[data-rh-ss="escena"] .ss-acts {
  position: relative; z-index: 2;
  width: min(1240px, calc(100% - 40px)); margin: 0 auto;
  padding: clamp(110px, 14vh, 150px) 0 clamp(60px, 10vh, 100px);
  display: grid; gap: 40px;
}
[data-rh-ss="escena"] .ss-live .ss-acts { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: block; padding: 0; }
[data-rh-ss="escena"] .ss-act { max-width: 560px; color: #f4f7fa; }
[data-rh-ss="escena"] .ss-live .ss-act {
  position: absolute; left: 0; bottom: clamp(70px, 12vh, 120px);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rh-ss="escena"] .ss-live .ss-act--hero { bottom: auto; top: 50%; transform: translateY(-40%); }
[data-rh-ss="escena"] .ss-live .ss-act.is-current { opacity: 1; transform: none; pointer-events: auto; }
[data-rh-ss="escena"] .ss-live .ss-act--hero.is-current { transform: translateY(-50%); }

[data-rh-ss="escena"] .ss-act__k { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7fd0ea; }
[data-rh-ss="escena"] .ss-act__h1 { margin: 0 0 18px; font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
[data-rh-ss="escena"] .ss-act__p { margin: 0 0 26px; max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: rgba(214, 226, 234, 0.82); }
[data-rh-ss="escena"] .ss-act__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
[data-rh-ss="escena"] .ss-act__n { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #f2a36f; }
[data-rh-ss="escena"] .ss-act__h { margin: 0; font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }

/* --- Etiquetas proyectadas desde la escena ------------------------------ */
[data-rh-ss="escena"] .ss-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
[data-rh-ss="escena"] .ss-label {
  position: absolute; left: 0; top: 0;
  padding: 5px 10px; border-radius: 99px;
  background: rgba(6, 18, 26, 0.72); border: 1px solid rgba(243, 234, 216, 0.22);
  font-size: 12px; font-weight: 600; white-space: nowrap; color: #f3ead8;
  opacity: 0; transition: opacity 0.45s ease;
  will-change: transform;
}
[data-rh-ss="escena"] .ss-label.is-on { opacity: 1; }
[data-rh-ss="escena"] .ss-label--warm { border-color: rgba(242, 106, 27, 0.55); color: #ffd2b8; }
[data-rh-ss="escena"] .ss-label--cool { border-color: rgba(127, 208, 234, 0.55); color: #d6f1fa; }

/* --- Riel de navegación ------------------------------------------------- */
[data-rh-ss="escena"] .ss-rail { display: none; }
[data-rh-ss="escena"] .ss-live .ss-rail {
  position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; z-index: 3;
  display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%);
}
[data-rh-ss="escena"] .ss-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: rgba(214, 226, 234, 0.5); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
[data-rh-ss="escena"] .ss-rail a span { order: -1; opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s; }
[data-rh-ss="escena"] .ss-rail a:hover span, [data-rh-ss="escena"] .ss-rail a:focus-visible span, [data-rh-ss="escena"] .ss-rail a.is-current span { opacity: 1; transform: none; }
[data-rh-ss="escena"] .ss-rail i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(214, 226, 234, 0.5); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
[data-rh-ss="escena"] .ss-rail a.is-done i { background: rgba(127, 208, 234, 0.5); border-color: transparent; }
[data-rh-ss="escena"] .ss-rail a.is-current { color: #fff; }
[data-rh-ss="escena"] .ss-rail a.is-current i { background: #f26a1b; border-color: #f26a1b; transform: scale(1.4); }

[data-rh-ss="escena"] .ss-hint { display: none; }
[data-rh-ss="escena"] .ss-live .ss-hint {
  display: block; position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(214, 226, 234, 0.5);
  transition: opacity 0.4s;
}
[data-rh-ss="escena"] .ss-live .ss-hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(180deg, rgba(214, 226, 234, 0.6), transparent); }
[data-rh-ss="escena"] .ss-live.is-moving .ss-hint { opacity: 0; }

/* --- Móvil: la escena ocupa el cuadro superior y el texto queda abajo ---- */
@media (max-width: 720px) {
  [data-rh-ss="escena"] .ss-scene.ss-live { height: calc(100svh + 5 * 70vh); }
  [data-rh-ss="escena"] .ss-vignette { background: linear-gradient(0deg, rgba(4, 11, 16, 0.94) 0%, rgba(4, 11, 16, 0.7) 34%, transparent 62%); }
  [data-rh-ss="escena"] .ss-live .ss-act { bottom: 56px; right: 0; }
  [data-rh-ss="escena"] .ss-live .ss-act--hero { top: auto; bottom: 56px; transform: translateY(14px); }
  [data-rh-ss="escena"] .ss-live .ss-act--hero.is-current { transform: none; }
  [data-rh-ss="escena"] .ss-act__h1 { font-size: 34px; }
  [data-rh-ss="escena"] .ss-act__h { font-size: 23px; }
  [data-rh-ss="escena"] .ss-act__p { font-size: 15.5px; margin-bottom: 18px; }
  [data-rh-ss="escena"] .ss-act__ctas .rh-btn { flex: 1 1 auto; justify-content: center; }
  [data-rh-ss="escena"] .ss-live .ss-rail { top: 84px; right: 14px; transform: none; flex-direction: row; gap: 9px; }
  [data-rh-ss="escena"] .ss-rail a span { display: none; }
  [data-rh-ss="escena"] .ss-label { font-size: 10.5px; padding: 4px 8px; }
  [data-rh-ss="escena"] .ss-live .ss-hint { display: none; }
}

/* --- Fallback (reduced-motion / sin WebGL): imagen fija de la arquitectura final --- */
[data-rh-ss="escena"] .ss-poster {
  position: absolute; right: 2%; top: 96px; z-index: 0;
  width: min(54%, 680px); height: auto;
  /* se funde con el fondo de la escena: sin bordes ni recuadro de captura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}
[data-rh-ss="escena"] .ss-live .ss-poster { display: none; }
@media (max-width: 720px) {
  [data-rh-ss="escena"] .ss-poster { position: relative; right: auto; top: auto; display: block; width: 100%; margin: 72px 0 -40px; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
  [data-rh-ss="escena"] .ss-scene:not(.ss-live) .ss-acts { padding-top: 0; }
}