/* ============================================================================
   SERVICIOS · ESCENA (LAB, 2026-10-08) — método Home / Diseño Web.
   Conserva la escena firma (mapa de orientación, N5). Cambia:
   · evidencia real ya en el umbral (N1)
   · recorridos como diagrama problema → cable → sistema (N3, propagación)
   · evidencia en muro breve: imagen, una línea, destino real (N2)
   Capa opt-in: <html data-rh-sv="escena">. Sin dependencias nuevas.
   ========================================================================== */

/* --- Umbral: trabajo real a la vista ------------------------------------ */
[data-rh-sv="escena"] .sv-live {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(26px, 4vh, 40px);
}
[data-rh-sv="escena"] .sv-live__label {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 4px;
  font-family: var(--sx-mono, monospace); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sx-cool-l);
}
[data-rh-sv="escena"] .sv-live__label i { width: 7px; height: 7px; border-radius: 50%; background: #3fd07a; }
[data-rh-sv="escena"] .sv-live a:not(.sv-live__more) {
  display: block; width: 92px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s var(--sx-ease, ease), border-color 0.35s;
}
[data-rh-sv="escena"] .sv-live a img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
[data-rh-sv="escena"] .sv-live a:not(.sv-live__more):hover,
[data-rh-sv="escena"] .sv-live a:not(.sv-live__more):focus-visible { transform: translateY(-3px); border-color: rgba(242, 106, 27, 0.6); }
[data-rh-sv="escena"] .sv-live__more { margin-left: 6px; font-size: 14px; font-weight: 600; color: #fff; }

/* --- Recorridos: diagrama problema → sistema ----------------------------- */
[data-rh-sv="escena"] #sv-routes { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--sx-line); }
[data-rh-sv="escena"] #sv-routes .sx-route {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(48px, 0.5fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-items: center;
  padding: 18px 4px;
  border: 0; border-bottom: 1px solid var(--sx-line); border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background 0.35s;
}
[data-rh-sv="escena"] #sv-routes .sx-route:hover { background: rgba(255, 255, 255, 0.025); }
[data-rh-sv="escena"] #sv-routes .sx-route__room { grid-column: 1; grid-row: 1; }
[data-rh-sv="escena"] #sv-routes .sx-route__t { grid-column: 1; grid-row: 2; margin: 6px 0 0; font-size: clamp(17px, 1.5vw, 20px); }
[data-rh-sv="escena"] #sv-routes .sv-wire { grid-column: 2; grid-row: 1 / span 2; position: relative; display: block; height: 2px; background: var(--sx-line); overflow: hidden; }
[data-rh-sv="escena"] #sv-routes .sv-wire::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--sx-cool-l), var(--sx-warm));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s var(--sx-ease, ease) 0.2s;
}
[data-rh-sv="escena"] #sv-routes .sx-route.is-visible .sv-wire::after,
[data-rh-sv="escena"] .rocalde-home:not(.rh-js) #sv-routes .sv-wire::after { transform: scaleX(1); }
[data-rh-sv="escena"] #sv-routes .sx-route__name { grid-column: 3; grid-row: 1; margin: 0; font-size: 12px; }
[data-rh-sv="escena"] #sv-routes .sx-route__name b { display: block; margin-top: 4px; font-size: clamp(16px, 1.4vw, 19px); }
[data-rh-sv="escena"] #sv-routes .sx-route__d { display: none; }
[data-rh-sv="escena"] #sv-routes .sx-route__foot { grid-column: 3; grid-row: 2; margin: 0; }
[data-rh-sv="escena"] #sv-routes .sx-route__go { min-height: 36px; }
[data-rh-sv="escena"] #sv-routes .sx-route__deep { display: none; }
[data-rh-sv="escena"] #sv-routes .sx-route--diag .sv-wire::after { background: linear-gradient(90deg, #eef2f6, var(--sx-warm)); }

/* --- Evidencia: muro breve ---------------------------------------------- */
[data-rh-sv="escena"] .sx-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vh, 44px) clamp(18px, 2vw, 28px); }
[data-rh-sv="escena"] .sx-ev__kind { margin-top: 14px; }
[data-rh-sv="escena"] .sx-ev__name { margin: 6px 0 6px; }
[data-rh-sv="escena"] .sx-ev__desc { font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; }
[data-rh-sv="escena"] .sx-ev__desc b { display: block; font-size: 12.5px; font-weight: 600; color: var(--sx-faint); margin-bottom: 2px; }
[data-rh-sv="escena"] .sx-ev__proof { margin-bottom: 4px; }
[data-rh-sv="escena"] .sx-ev__media { overflow: hidden; }
[data-rh-sv="escena"] .sx-ev__media img { object-position: top; }
[data-rh-sv="escena"] .sx-ev:hover .sx-ev__media img { transform: scale(1.025); transition: transform 0.6s var(--sx-ease, ease), filter 1.6s; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  [data-rh-sv="escena"] .sx-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  [data-rh-sv="escena"] .sv-live a:not(.sv-live__more) { width: calc(25% - 8px); }
  [data-rh-sv="escena"] .sv-live__label { width: 100%; }
  [data-rh-sv="escena"] .sv-live__more { width: 100%; margin: 4px 0 0; }
  [data-rh-sv="escena"] #sv-routes .sx-route { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 6px; padding: 18px 0; }
  [data-rh-sv="escena"] #sv-routes .sx-route__room,
  [data-rh-sv="escena"] #sv-routes .sx-route__t,
  [data-rh-sv="escena"] #sv-routes .sv-wire,
  [data-rh-sv="escena"] #sv-routes .sx-route__name,
  [data-rh-sv="escena"] #sv-routes .sx-route__foot { grid-column: 1; grid-row: auto; }
  [data-rh-sv="escena"] #sv-routes .sv-wire { width: 2px; height: 18px; margin-left: 6px; }
  [data-rh-sv="escena"] #sv-routes .sv-wire::after { transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, var(--sx-cool-l), var(--sx-warm)); }
  [data-rh-sv="escena"] #sv-routes .sx-route.is-visible .sv-wire::after { transform: scaleY(1); }
  [data-rh-sv="escena"] .sx-cases { grid-template-columns: 1fr; }
}

/* --- Reduced motion: estado final --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-rh-sv="escena"] #sv-routes .sv-wire::after { transform: none !important; transition: none; }
  [data-rh-sv="escena"] .sv-live a, [data-rh-sv="escena"] .sx-ev__media img { transition: none !important; }
}