/* ============================================================
   SISTEMA VISUAL ROCALDE · kit N2 (SISTEMA_VISUAL_ROCALDE.md)
   Capa sobre site.css (shell: header, footer, botones, reveals).
   Se activa con .rocalde-home.sx. Grafito como base, frío = señal /
   no integrado, naranja = integración / acción. Sin superficies claras.
   Componentes: campo, título iluminado, vidrio, glint, pista, señal,
   frame de evidencia, umbral/encuentro + escenas de Servicios,
   Sistemas y Automatizaciones.
   ============================================================ */

html:has(.rocalde-home.sx), body:has(> .rocalde-home.sx) { background: #05080d; }

.rocalde-home.sx {
  --sx-bg: #05080d;
  --sx-g1: #091017;
  --sx-g2: #0d151e;
  --sx-g3: #131d28;
  --sx-ink: #eef2f6;
  --sx-dim: rgba(198, 214, 226, 0.76);
  --sx-faint: rgba(198, 214, 226, 0.6);
  --sx-ghost: rgba(198, 214, 226, 0.56);
  --sx-line: rgba(214, 222, 227, 0.11);
  --sx-line2: rgba(214, 222, 227, 0.2);
  --sx-cool: #1E9BC4;
  --sx-cool-l: #7fd0ea;
  --sx-warm: #F26A1B;
  --sx-warm-l: #ffb38a;
  --sx-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
  --sx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sx-gut: clamp(20px, 5vw, 48px);
  background: var(--sx-bg);
  color: var(--sx-ink);
}
.rocalde-home.sx .rh-lead--dark { color: var(--sx-dim); }

/* ---------- estructura ---------- */
.sx .sx-sec { position: relative; padding: clamp(84px, 13vh, 150px) 0; }
.sx .sx-sec--tight { padding: clamp(56px, 9vh, 96px) 0; }
.sx .sx-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 var(--sx-gut); }
.sx .sx-inner--wide { max-width: 1320px; }
.sx .sx-lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--sx-dim); max-width: 60ch; margin-bottom: 28px; }
.sx .sx-sec__head { max-width: 760px; margin-bottom: clamp(36px, 6vh, 64px); }
.sx .sx-sec--g1 { background: var(--sx-g1); }
.sx .sx-sec + .sx-sec--g1, .sx .sx-sec--g1 + .sx-sec { border-top: 1px solid var(--sx-line); }
.sx .sx-small { font-size: 13px; color: var(--sx-faint); }
.sx .sx-a { color: var(--sx-cool-l); border-bottom: 1px solid rgba(127, 208, 234, 0.35); transition: color .25s ease, border-color .25s ease; }
.sx .sx-a:hover { color: #fff; border-color: var(--sx-warm); }

/* ---------- hero con campo ---------- */
.sx .sx-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(86vh, 860px);
  display: flex; align-items: flex-end;
  margin-top: calc(-1 * var(--rh-nav-h, 88px));
  padding-top: var(--rh-nav-h, 88px);
}
.sx .sx-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(40px, 8vh, 80px) var(--sx-gut) clamp(56px, 10vh, 110px); }
.sx .sx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(30, 155, 196, 0.16), transparent 62%),
    radial-gradient(420px 320px at 86% 62%, rgba(242, 106, 27, 0.10), transparent 64%),
    radial-gradient(2px 2px at 86% 62%, rgba(255, 214, 190, 0.9), transparent 3px);
}
.sx .sx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(5, 8, 13, 0) 30%, rgba(5, 8, 13, 0.85) 100%),
    linear-gradient(180deg, rgba(5, 8, 13, 0) 55%, var(--sx-bg) 100%);
}
.sx .sx-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sx .sx-hero .sx-field { z-index: 0; }
.sx .sx-hero__kicker { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sx-cool-l); margin-bottom: 22px; }
.sx .sx-hero__kicker b { color: var(--sx-warm); font-weight: 600; }
.sx .sx-title {
  font-size: clamp(38px, 6.4vw, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  color: #fff; max-width: 15ch; margin-bottom: 24px;
}
.sx .sx-hero__sub { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--sx-dim); max-width: 54ch; margin-bottom: 34px; }
.sx .sx-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* título revelado por la luz (latente → iluminado). Sin soporte: blanco. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sx.rh-js .sx-lit {
    background-image: linear-gradient(100deg, #fff 0%, #fff 36%, #ffd7bf 42%, #fff 46%, rgba(238, 242, 246, 0.22) 56%, rgba(238, 242, 246, 0.22) 100%);
    background-size: 280% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: sx-lit 2.6s var(--sx-ease) 0.25s forwards;
  }
}
@keyframes sx-lit { to { background-position: 0% 0; } }

/* ---------- señal entre secciones (baja con el scroll) ---------- */
.sx .sx-signal { position: relative; height: var(--sig, 16vh); width: 1px; margin: 0 auto; pointer-events: none; }
.sx .sx-signal::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(30, 155, 196, 0), rgba(127, 208, 234, 0.7));
  transform-origin: top; transform: scaleY(var(--draw, 0));
}
.sx .sx-signal i {
  position: absolute; left: -3px; top: calc(var(--draw, 0) * 100% - 3px); width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 2px rgba(127, 208, 234, 0.8), 0 0 28px 6px rgba(30, 155, 196, 0.35);
  opacity: calc(var(--draw, 0) * 1.4);
}
.sx .sx-signal--w::before { background: linear-gradient(180deg, rgba(242, 106, 27, 0), rgba(255, 179, 138, 0.75)); }
.sx .sx-signal--w i { box-shadow: 0 0 10px 2px rgba(255, 179, 138, 0.85), 0 0 28px 6px rgba(242, 106, 27, 0.35); }

/* ---------- vidrio ---------- */
.sx .sx-glass {
  position: relative; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 30, 41, 0.66), rgba(9, 14, 20, 0.78));
  border: 1px solid var(--sx-line);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.sx .sx-glass::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190, 230, 255, 0.55), transparent); opacity: 0.55;
}
.sx .sx-glass--warm { border-color: rgba(242, 106, 27, 0.28); }
.sx .sx-glass--warm::before { background: linear-gradient(90deg, transparent, rgba(255, 190, 150, 0.8), transparent); opacity: 0.8; }

/* glint: chispa física en una esquina cuando algo se activa */
.sx .sx-glint::after {
  content: ""; position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.5px, rgba(255, 214, 184, 0.5) 2.5px, transparent 5px),
    linear-gradient(90deg, transparent 0 40%, rgba(255, 230, 210, 0.85) 50%, transparent 60% 100%) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent 0 40%, rgba(255, 230, 210, 0.85) 50%, transparent 60% 100%) center / 1px 100% no-repeat;
}
.sx .sx-glint.is-lit::after { animation: sx-glint 1.5s var(--sx-ease) forwards; }
@keyframes sx-glint {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  25% { opacity: 1; transform: scale(1.25) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(45deg); }
}

/* ---------- pista técnica ---------- */
.sx .sx-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sx-faint); white-space: nowrap;
}
.sx .sx-hint::before { content: ""; width: 6px; height: 1px; background: currentColor; opacity: 0.8; }
.sx .sx-hint--w { color: var(--sx-warm-l); }

/* ---------- frame de evidencia (frío → real al entrar) ---------- */
.sx .sx-ev { position: relative; display: flex; flex-direction: column; }
.sx .sx-ev__media {
  position: relative; overflow: hidden; border-radius: 8px; background: #0b1118; aspect-ratio: 16 / 10; margin: 0;
}
.sx .sx-ev__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); pointer-events: none; }
.sx .sx-ev__media::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 165, 0.95), transparent);
  transform: scaleX(0); transition: transform 1.4s var(--sx-ease) 0.2s;
}
.sx .sx-ev__media img { width: 100%; height: 100%; object-fit: cover; }
.sx.rh-js .sx-ev__media img { filter: saturate(0.25) brightness(0.5) blur(3px); transform: scale(1.03); transition: filter 1.6s var(--sx-ease) 0.15s, transform 1.8s var(--sx-ease) 0.15s; }
.sx.rh-js .sx-ev.is-in .sx-ev__media img { filter: saturate(0.95) brightness(0.95); transform: none; }
.sx .sx-ev.is-in .sx-ev__media::before { transform: scaleX(1); }
.sx .sx-ev__kind { display: block; margin-top: 18px; font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-faint); }
.sx .sx-ev__name { margin: 8px 0 8px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.sx .sx-ev__desc { font-size: 15px; line-height: 1.6; color: var(--sx-dim); margin-bottom: 12px; }
.sx .sx-ev__desc b { color: var(--sx-ink); font-weight: 600; }
.sx .sx-ev__caps { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--sx-line); }
.sx .sx-ev__caps li { position: relative; padding-left: 15px; margin: 0.4em 0; font-size: 14px; line-height: 1.5; color: var(--sx-dim); }
.sx .sx-ev__caps li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-cool); }
.sx .sx-ev__proof { font-size: 13px; color: var(--sx-faint); margin-bottom: 10px; }
.sx .sx-ev__proof a { display: inline-block; padding: 4px 0; color: var(--sx-cool-l); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sx .sx-ev__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--sx-ink); }
.sx .sx-ev__go i { font-style: normal; color: var(--sx-warm); transition: transform .3s var(--sx-ease); }
.sx .sx-ev__go:hover i { transform: translateX(4px); }

/* ---------- umbral final: el encuentro en miniatura ---------- */
.sx .sx-meet { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); }
.sx .sx-meet__glow {
  position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; max-width: 220vw; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--meet, 1)); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 190, 1) 0, rgba(242, 106, 27, 0.6) 1.4%, rgba(242, 106, 27, 0.2) 11%, rgba(242, 106, 27, 0.06) 30%, transparent 60%);
  opacity: 1;
}
.sx .sx-meet .sx-inner { z-index: 1; }
.sx .sx-meet__title { font-size: clamp(30px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: #fff; max-width: 20ch; margin: 0 auto 18px; }
.sx .sx-meet__sub { font-size: 17px; color: var(--sx-dim); max-width: 52ch; margin: 0 auto 34px; }
.sx .sx-meet__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sx .sx-meet__alt { margin-top: 26px; font-size: 14px; color: var(--sx-faint); }

/* ---------- botones de opción (sin estética de quiz) ---------- */
.sx .sx-chip {
  display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--rh-font); letter-spacing: 0.02em;
  color: var(--sx-dim); padding: 11px 16px; min-height: 42px; border-radius: 999px; cursor: pointer;
  background: rgba(13, 21, 30, 0.7); border: 1px solid var(--sx-line2); transition: color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.sx .sx-chip:hover { color: #fff; border-color: rgba(127, 208, 234, 0.5); }
.sx .sx-chip[aria-pressed="true"] { color: #fff; border-color: rgba(242, 106, 27, 0.7); background: rgba(242, 106, 27, 0.12); box-shadow: 0 0 22px rgba(242, 106, 27, 0.18); }
.sx .sx-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.sx .sx-chip[aria-pressed="true"] .sx-chip__dot { background: var(--sx-warm); opacity: 1; box-shadow: 0 0 8px var(--sx-warm); }

/* ============================================================
   SERVICIOS · el mapa que se enciende
   ============================================================ */
.sx .sx-orient { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.sx:not(.rh-js) .sx-orient { display: none; }
.sx .sx-orient__map { position: sticky; top: calc(var(--rh-nav-h, 88px) + 16px); }
.sx .sx-map { position: relative; width: 100%; aspect-ratio: 10 / 7; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #0b131c 0%, #06090e 70%); border: 1px solid var(--sx-line); }
.sx .sx-map .sx-field { opacity: 0.9; }
.sx .sx-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx .sx-map__fog {
  position: absolute; inset: -10%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(60% 50% at 50% 50%, rgba(120, 140, 160, 0.10), transparent 70%), radial-gradient(40% 35% at 30% 60%, rgba(150, 170, 190, 0.10), transparent 70%), radial-gradient(45% 40% at 72% 38%, rgba(150, 170, 190, 0.09), transparent 70%);
  filter: blur(8px);
}
.sx .sx-map.is-fog .sx-map__fog { opacity: 1; }
.sx .sx-map__legend { position: absolute; left: 18px; top: 24px; display: flex; flex-wrap: wrap; gap: 14px; z-index: 3; }
.sx .sx-map__all { position: absolute; right: 14px; top: 14px; z-index: 3; }

/* líneas y nodos del mapa (SVG) */
.sx .mp-base { stroke: rgba(214, 222, 227, 0.1); stroke-width: 1; fill: none; }
.sx .mp-link { stroke: rgba(242, 106, 27, 0.85); stroke-width: 1.4; fill: none; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.2s var(--sx-ease), opacity .6s ease; filter: drop-shadow(0 0 4px rgba(242, 106, 27, 0.6)); }
.sx .mp-link.is-on { stroke-dashoffset: 0; }
.sx .mp-path { stroke: rgba(255, 179, 138, 0.95); stroke-width: 2; fill: none; stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); transition: stroke-dashoffset 2.2s var(--sx-ease); filter: drop-shadow(0 0 6px rgba(242, 106, 27, 0.7)); }
.sx .mp-path.is-on { stroke-dashoffset: 0; }
.sx .mp-sig { stroke: rgba(127, 208, 234, 0.9); stroke-width: 1.3; fill: none; filter: drop-shadow(0 0 4px rgba(30, 155, 196, 0.8)); }
.sx .mp-core circle { fill: #0d1620; stroke: rgba(214, 222, 227, 0.25); }
.sx .mp-core text { fill: rgba(198, 214, 226, 0.6); font: 600 10px/1 var(--sx-mono); letter-spacing: 0.18em; text-anchor: middle; }
.sx .mp-room .mp-halo { fill: url(#mpHaloCool); opacity: 0; transition: opacity .9s ease; }
.sx .mp-room .mp-ring { fill: rgba(9, 14, 20, 0.85); stroke: rgba(214, 222, 227, 0.22); stroke-width: 1; transition: stroke .6s ease, fill .6s ease; }
.sx .mp-room .mp-core-dot { fill: rgba(198, 214, 226, 0.35); transition: fill .6s ease; }
.sx .mp-room .mp-piece { fill: rgba(20, 30, 41, 0.9); stroke: rgba(255, 190, 150, 0.9); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity .7s ease, transform .9s var(--sx-ease); }
.sx .mp-room.is-awake .mp-halo { opacity: 0.9; }
.sx .mp-room.is-awake .mp-ring { stroke: rgba(127, 208, 234, 0.9); }
.sx .mp-room.is-awake .mp-core-dot { fill: var(--sx-cool-l); }
.sx .mp-room.is-warm .mp-halo { fill: url(#mpHaloWarm); opacity: 1; }
.sx .mp-room.is-warm .mp-ring { stroke: rgba(255, 179, 138, 0.95); }
.sx .mp-room.is-warm .mp-core-dot { fill: #fff; }
.sx .mp-room.is-piece .mp-piece { opacity: 1; transform: scale(1); }
.sx .mp-room.is-piece .mp-ring { stroke-dasharray: 3 5; }
.sx .mp-room.is-dim { opacity: 0.45; transition: opacity .8s ease; }
.sx .mp-diag .mp-ring { fill: rgba(9, 14, 20, 0.7); stroke: rgba(214, 222, 227, 0.2); stroke-dasharray: 2 4; }
.sx .mp-diag .mp-blue { stroke: rgba(127, 208, 234, 0.0); fill: none; transition: stroke 1s ease; }
.sx .mp-diag.is-on .mp-ring { stroke: rgba(238, 242, 246, 0.9); stroke-dasharray: none; }
.sx .mp-diag.is-on .mp-blue { stroke: rgba(127, 208, 234, 0.55); }
.sx .mp-diag.is-on .mp-halo { opacity: 1; }
.sx .mp-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sx .mp-glint.is-on { animation: sx-glint 1.6s var(--sx-ease) forwards; }

/* etiquetas de habitación (botones HTML sobre el SVG) */
.sx .sx-room {
  position: absolute; z-index: 2; transform: translate(-50%, 0); margin-top: 30px; text-align: center; cursor: pointer;
  background: none; border: 0; padding: 6px 8px; color: var(--sx-faint); font: 700 11px/1.25 var(--rh-font); letter-spacing: 0.18em; text-transform: uppercase;
  transition: color .5s ease;
}
.sx .sx-room small { display: block; margin-top: 5px; font: 500 12px/1.35 var(--rh-font); letter-spacing: 0; text-transform: none; color: var(--sx-ghost); max-width: 17ch; transition: color .5s ease; }
.sx .sx-room:hover, .sx .sx-room.is-awake { color: var(--sx-cool-l); }
.sx .sx-room.is-warm { color: var(--sx-warm-l); }
.sx .sx-room.is-awake small, .sx .sx-room.is-warm small { color: var(--sx-dim); }
.sx .sx-room--diag { letter-spacing: 0.14em; transform: translate(-50%, -100%); margin-top: -26px; }

/* preguntas */
.sx .sx-q { padding: 0 0 clamp(26px, 4vh, 40px); }
.sx .sx-q + .sx-q { border-top: 1px solid var(--sx-line); padding-top: clamp(26px, 4vh, 40px); }
.sx .sx-q__n { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--sx-warm); margin-bottom: 10px; display: block; }
.sx .sx-q__t { font-size: clamp(21px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.015em; color: #fff; margin-bottom: 6px; }
.sx .sx-q__h { font-size: 14px; color: var(--sx-faint); margin-bottom: 18px; }
.sx .sx-q__opts { display: grid; gap: 10px; }
.sx .sx-phrase {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 10px; font: 500 15.5px/1.4 var(--rh-font); color: var(--sx-dim);
  background: linear-gradient(180deg, rgba(20, 30, 41, 0.5), rgba(9, 14, 20, 0.6)); border: 1px solid var(--sx-line);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .4s var(--sx-ease), opacity .4s ease, filter .4s ease;
}
.sx .sx-phrase::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--sx-ghost); transition: all .35s ease; }
.sx .sx-phrase:hover { color: #fff; border-color: rgba(127, 208, 234, 0.45); }
.sx .sx-phrase[aria-pressed="true"] { color: #fff; border-color: rgba(127, 208, 234, 0.7); background: linear-gradient(180deg, rgba(30, 155, 196, 0.14), rgba(9, 14, 20, 0.6)); }
.sx .sx-phrase[aria-pressed="true"]::before { background: var(--sx-cool-l); border-color: var(--sx-cool-l); box-shadow: 0 0 10px var(--sx-cool); }
.sx .sx-q.has-choice .sx-phrase[aria-pressed="false"] { opacity: 0.62; }
.sx .sx-q.has-choice .sx-phrase[aria-pressed="false"]:hover { opacity: 1; }
.sx .sx-q--later { display: none; }
.sx .sx-q--later.is-open { display: block; animation: sx-rise .8s var(--sx-ease) both; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* revelado de recorridos */
.sx .sx-reveal-panel { margin-top: clamp(28px, 4vh, 40px); }
.sx .sx-reveal-panel:empty { display: none; }
.sx .sx-reveal-panel__lead { font-size: 14px; color: var(--sx-faint); margin-bottom: 14px; }
.sx .sx-reveal-panel .sx-route { animation: sx-rise .9s var(--sx-ease) both; }
.sx .sx-reveal-panel .sx-route + .sx-route { margin-top: 12px; }
.sx .sx-note { margin-top: 14px; padding: 14px 16px; border-left: 2px solid rgba(238, 242, 246, 0.5); font-size: 14.5px; color: var(--sx-dim); background: rgba(13, 21, 30, 0.55); border-radius: 0 8px 8px 0; }
.sx .sx-note a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }

/* tarjeta de recorrido */
.sx .sx-route { display: flex; flex-direction: column; padding: 22px 22px 18px; }
.sx .sx-route__room { font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-cool-l); }
.sx .sx-route__t { margin: 10px 0 8px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: #fff; }
.sx .sx-route__name { font-size: 13px; color: var(--sx-faint); margin-bottom: 8px; }
.sx .sx-route__name b { color: var(--sx-warm-l); font-weight: 600; }
.sx .sx-route__d { font-size: 15px; line-height: 1.6; color: var(--sx-dim); margin-bottom: 14px; }
.sx .sx-route__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.sx .sx-route__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 14.5px; color: #fff; }
.sx .sx-route__go i { font-style: normal; color: var(--sx-warm); transition: transform .3s var(--sx-ease); }
.sx .sx-route__go:hover i { transform: translateX(4px); }
.sx .sx-route__deep { font-size: 13px; color: var(--sx-faint); border-bottom: 1px solid var(--sx-line2); padding: 12px 0 2px; }
.sx .sx-route__deep:hover { color: #fff; }
.sx .sx-route--diag { border-color: rgba(238, 242, 246, 0.22); }
.sx .sx-route--diag .sx-route__room { color: #fff; }
.sx .sx-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sx .sx-routes .sx-route--diag { grid-column: span 1; }

/* segunda capa: soluciones directas */
.sx .sx-direct { margin-top: clamp(56px, 9vh, 90px); }
.sx .sx-direct__t { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-faint); margin-bottom: 8px; }
.sx .sx-direct__lead { font-size: 15px; color: var(--sx-dim); margin-bottom: 18px; max-width: 64ch; }
.sx .sx-direct__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sx-line); }
.sx .sx-direct__list li { border-bottom: 1px solid var(--sx-line); }
.sx .sx-direct__list li:nth-child(odd) { border-right: 1px solid var(--sx-line); }
.sx .sx-dline { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px 16px 0; min-height: 56px; transition: background-color .3s ease; }
.sx .sx-direct__list li:nth-child(even) .sx-dline { padding-left: 18px; }
.sx .sx-dline b { font-size: 15.5px; font-weight: 600; color: var(--sx-ink); }
.sx .sx-dline span { font-size: 13.5px; color: var(--sx-faint); }
.sx .sx-dline i { margin-left: auto; font-style: normal; color: var(--sx-warm); transition: transform .3s var(--sx-ease); }
.sx .sx-dline:hover b { color: #fff; }
.sx .sx-dline:hover i { transform: translateX(4px); }
.sx .sx-dline.is-hit { background: linear-gradient(90deg, rgba(242, 106, 27, 0.08), transparent 70%); }
.sx .sx-dline.is-hit b::after { content: " ·"; color: var(--sx-warm); }

/* casos: evidencia */
.sx .sx-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vh, 64px) clamp(24px, 3vw, 44px); }
.sx .sx-cases .sx-ev--wide { grid-column: 1 / -1; }
.sx .sx-cases .sx-ev--wide .sx-ev__media { aspect-ratio: 21 / 8; }
.sx .sx-cases__note { margin-top: clamp(36px, 6vh, 56px); font-size: 14px; color: var(--sx-faint); max-width: 70ch; }

/* ============================================================
   SISTEMAS · mismas piezas, distinta arquitectura
   ============================================================ */
.sx .sx-arch { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); max-width: 1320px; margin: 0 auto; padding: 0 var(--sx-gut); }
.sx .sx-arch__stage { position: sticky; top: calc(var(--rh-nav-h, 88px) + 12px); height: calc(100vh - var(--rh-nav-h, 88px) - 24px); max-height: 820px; order: 2; }
.sx .sx-stage { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: radial-gradient(110% 90% at 50% 40%, #0c141d 0%, #05080d 72%); border: 1px solid var(--sx-line); }
.sx .sx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx .sx-stage__hints { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sx .sx-stage__hints .sx-hint { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s ease; will-change: transform, opacity; }
.sx .sx-stage__hints .sx-hint.is-on { opacity: 1; }
.sx .sx-stage__state { position: absolute; left: 18px; top: 16px; font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-faint); }
.sx .sx-stage__state b { color: var(--sx-warm-l); font-weight: 600; }
.sx .sx-stage__fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.sx .sx-stage.is-fallback .sx-stage__fallback { display: block; }
.sx .sx-stage__legend { position: absolute; left: 18px; bottom: 14px; right: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sx .sx-arch__steps { order: 1; padding: 6vh 0 18vh; }
.sx .sx-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 4vh 0; opacity: 0.35; transition: opacity .6s ease; }
.sx .sx-step.is-active { opacity: 1; }
.sx .sx-step__n { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--sx-warm); margin-bottom: 14px; }
.sx .sx-step__t { font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: #fff; margin-bottom: 16px; max-width: 16ch; }
.sx .sx-step__p { font-size: 16.5px; line-height: 1.65; color: var(--sx-dim); max-width: 44ch; margin-bottom: 14px; }
.sx .sx-step__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sx .sx-step__list li { font-family: var(--sx-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--sx-dim); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--sx-line2); background: rgba(13, 21, 30, 0.6); }
.sx .sx-step__list li b { color: var(--sx-warm-l); font-weight: 600; }
.sx .sx-verbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; max-width: 460px; }
.sx .sx-verb { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--sx-line); background: rgba(13, 21, 30, 0.6); }
.sx .sx-verb b { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.sx .sx-verb span { font-size: 13px; color: var(--sx-faint); line-height: 1.45; display: block; }
.sx .sx-verb--keep b::before, .sx .sx-verb--link b::before, .sx .sx-verb--redir b::before, .sx .sx-verb--new b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; vertical-align: 0; }
.sx .sx-verb--keep b::before { background: rgba(198, 214, 226, 0.8); }
.sx .sx-verb--link b::before { background: var(--sx-cool-l); }
.sx .sx-verb--redir b::before { background: transparent; border: 1px solid var(--sx-cool-l); transform: rotate(45deg); }
.sx .sx-verb--new b::before { background: var(--sx-warm); }
.sx .sx-arch__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* gestos: regla / propuesta / confirmación */
.sx .sx-gest { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--sx-dim); }
.sx .sx-gest svg { width: 30px; height: 14px; flex: 0 0 auto; overflow: visible; }
.sx .g-rail { stroke: var(--sx-cool-l); stroke-width: 1.6; fill: none; }
.sx .g-lens { stroke: var(--sx-cool-l); stroke-width: 1.2; fill: rgba(30, 155, 196, 0.15); }
.sx .g-ray { stroke: rgba(127, 208, 234, 0.45); stroke-width: 1; stroke-dasharray: 2 2; fill: none; }
.sx .g-gate { stroke: var(--sx-warm); stroke-width: 1.8; fill: none; }
.sx .g-gate-f { fill: rgba(242, 106, 27, 0.22); stroke: none; }
.sx .g-node { fill: #0d1620; stroke: rgba(214, 222, 227, 0.4); stroke-width: 1; }
.sx .g-node--end { stroke: rgba(255, 179, 138, 0.95); fill: rgba(242, 106, 27, 0.14); }
.sx .g-txt { fill: var(--sx-dim); font: 500 12px/1 var(--rh-font); }
.sx .g-txt--s { fill: var(--sx-faint); font: 500 10px/1 var(--sx-mono); letter-spacing: 0.06em; }
.sx .g-edge { stroke: rgba(214, 222, 227, 0.22); stroke-width: 1.2; fill: none; }
.sx .g-pulse { fill: #fff; filter: drop-shadow(0 0 4px rgba(127, 208, 234, 0.95)); }
.sx .g-pulse--w { filter: drop-shadow(0 0 5px rgba(242, 106, 27, 0.95)); }

.sx .sx-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0 0 clamp(28px, 4vh, 40px); padding: 16px 18px; border-radius: 10px; border: 1px solid var(--sx-line); background: rgba(9, 14, 20, 0.6); }

/* procesos internos: microdiagramas */
.sx .sx-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx .sx-flow { padding: 22px 22px 18px; }
.sx .sx-flow__t { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.sx .sx-flow__d { font-size: 14px; color: var(--sx-faint); margin-bottom: 14px; }
.sx .sx-flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.sx .sx-flow__steps { margin-top: 12px; font-size: 13.5px; color: var(--sx-dim); }
.sx .sx-flow__steps b { color: var(--sx-warm-l); font-weight: 600; }

/* funcionando: tres evidencias */
.sx .sx-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sx .sx-proof__card { padding: 20px 20px 18px; display: flex; flex-direction: column; }
.sx .sx-proof__kind { font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-cool-l); }
.sx .sx-proof__t { font-size: 18px; font-weight: 700; color: #fff; margin: 10px 0 6px; line-height: 1.3; }
.sx .sx-proof__d { font-size: 14px; line-height: 1.6; color: var(--sx-dim); margin-bottom: 16px; }
.sx .sx-proof__status { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sx-line); font-size: 12.5px; color: var(--sx-faint); }
.sx .sx-proof__status b { color: var(--sx-ink); font-weight: 600; }
.sx .sx-mock { position: relative; border-radius: 10px; border: 1px solid var(--sx-line2); background: #0a1118; padding: 14px; margin-bottom: 14px; min-height: 196px; overflow: hidden; }
.sx .sx-mock__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(214, 222, 227, 0.1); font-size: 12.5px; color: var(--sx-dim); opacity: 0.35; transition: opacity .5s ease, color .5s ease; }
.sx .sx-mock__row:last-child { border-bottom: 0; }
.sx .sx-mock__row i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--sx-ghost); }
.sx .sx-mock__row em { margin-left: auto; font-style: normal; font-family: var(--sx-mono); font-size: 10.5px; color: var(--sx-faint); }
.sx .sx-mock__row.is-done { opacity: 1; }
.sx .sx-mock__row.is-done i { background: var(--sx-cool-l); border-color: var(--sx-cool-l); }
.sx .sx-mock__row.is-done.is-w i { background: var(--sx-warm); border-color: var(--sx-warm); box-shadow: 0 0 8px var(--sx-warm); }
.sx .sx-mock__row.is-gate { color: var(--sx-warm-l); }
.sx .sx-doc { position: relative; width: 70%; margin: 4px auto 0; aspect-ratio: 0.72; border-radius: 4px; background: linear-gradient(180deg, #121b25, #0c131b); border: 1px solid var(--sx-line2); padding: 12% 10%; }
.sx .sx-doc span { display: block; height: 5px; border-radius: 3px; background: rgba(198, 214, 226, 0.14); margin-bottom: 9%; }
.sx .sx-doc span:nth-child(1) { width: 55%; background: rgba(198, 214, 226, 0.28); }
.sx .sx-doc span:nth-child(3) { width: 80%; }
.sx .sx-doc span:nth-child(4) { width: 64%; }
.sx .sx-doc__stamp { position: absolute; right: 10%; bottom: 10%; font-family: var(--sx-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; color: var(--sx-faint); border: 1px solid var(--sx-line2); transition: all .6s ease; }
.sx .sx-doc.is-approved .sx-doc__stamp { color: var(--sx-warm-l); border-color: rgba(242, 106, 27, 0.7); box-shadow: 0 0 14px rgba(242, 106, 27, 0.25); }
.sx .sx-proof .sx-ev__media { aspect-ratio: 4 / 5; margin-bottom: 14px; }

/* recorridos posibles (los 5 de la Matriz) */
.sx .sx-paths { display: grid; gap: 0; border-top: 1px solid var(--sx-line); }
.sx .sx-path { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(18px, 3vw, 40px); padding: clamp(28px, 4vh, 40px) 0; border-bottom: 1px solid var(--sx-line); align-items: start; }
.sx .sx-path__form svg { width: 100%; height: auto; display: block; }
.sx .sx-path__name { font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sx-cool-l); margin-bottom: 10px; }
.sx .sx-path__t { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; color: #fff; margin-bottom: 10px; }
.sx .sx-path__d { font-size: 15px; line-height: 1.65; color: var(--sx-dim); }
.sx .sx-path__sig { display: grid; gap: 8px; align-content: start; }
.sx .sx-path__sig p { font-size: 14px; line-height: 1.5; color: var(--sx-dim); padding-left: 14px; border-left: 1px solid rgba(127, 208, 234, 0.35); }
.sx .sx-path__sig a { margin-top: 6px; justify-self: start; }
.sx .sx-flow .g-txt { font-size: 15px; }
.sx .pf-node { fill: #0d1620; stroke: rgba(127, 208, 234, 0.7); stroke-width: 1.2; }
.sx .pf-node--w { stroke: rgba(255, 179, 138, 0.95); fill: rgba(242, 106, 27, 0.18); }
.sx .pf-edge { stroke: rgba(214, 222, 227, 0.28); stroke-width: 1.2; fill: none; }
.sx .pf-edge--w { stroke: rgba(242, 106, 27, 0.7); }

/* ============================================================
   AUTOMATIZACIONES · procesos que continúan solos
   ============================================================ */
.sx .sx-proc { padding: clamp(20px, 3vw, 34px); }
.sx .sx-proc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.sx .sx-proc__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.sx .sx-mode { text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 10px; background: rgba(9, 14, 20, 0.7); border: 1px solid var(--sx-line2); color: var(--sx-dim); font: inherit; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.sx .sx-mode b { display: block; font-size: 15.5px; color: #fff; margin-bottom: 4px; }
.sx .sx-mode span { display: block; font-size: 13.5px; line-height: 1.45; }
.sx .sx-mode:hover { border-color: rgba(127, 208, 234, 0.5); }
.sx .sx-mode[aria-pressed="true"] { border-color: rgba(242, 106, 27, 0.7); background: linear-gradient(180deg, rgba(242, 106, 27, 0.12), rgba(9, 14, 20, 0.7)); box-shadow: 0 0 26px rgba(242, 106, 27, 0.14); }
.sx .sx-mode[aria-pressed="true"] b::after { content: " ·"; color: var(--sx-warm); }
.sx .sx-proc__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sx .sx-proc__mode-d { font-size: 15.5px; line-height: 1.6; color: var(--sx-dim); max-width: 70ch; margin-bottom: 24px; min-height: 3.2em; }
.sx .sx-proc__mode-d b { color: #fff; }
.sx [hidden] { display: none !important; }
.sx .sx-pipewrap { position: relative; transition: padding-bottom .5s var(--sx-ease); }
.sx .sx-pipewrap.has-gate { padding-bottom: 66px; }
.sx .sx-pnode__txt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sx .sx-pipe { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.sx .sx-pipe::before { content: ""; position: absolute; left: 4%; right: 4%; top: 31px; height: 1px; background: rgba(214, 222, 227, 0.14); }
.sx .sx-pnode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sx .sx-pnode__g { position: relative; width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; background: #0b121a; border: 1px solid var(--sx-line2); transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease; }
.sx .sx-pnode__g svg { width: 26px; height: 26px; stroke: var(--sx-faint); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; }
.sx .sx-pnode__t { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--sx-dim); transition: color .4s ease; }
.sx .sx-pnode__k { font-family: var(--sx-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-ghost); }
.sx .sx-pnode.is-active .sx-pnode__g { border-color: rgba(127, 208, 234, 0.9); box-shadow: 0 0 0 4px rgba(30, 155, 196, 0.12), 0 0 26px rgba(30, 155, 196, 0.35); }
.sx .sx-pnode.is-active .sx-pnode__g svg { stroke: #fff; }
.sx .sx-pnode.is-done .sx-pnode__g { border-color: rgba(127, 208, 234, 0.45); }
.sx .sx-pnode.is-done .sx-pnode__g svg { stroke: var(--sx-cool-l); }
.sx .sx-pnode.is-active .sx-pnode__t, .sx .sx-pnode.is-done .sx-pnode__t { color: #fff; }
.sx .sx-pnode--lens .sx-pnode__g { border-radius: 50%; }
.sx .sx-pnode--lens.is-active .sx-pnode__g { box-shadow: 0 0 0 4px rgba(30, 155, 196, 0.12), 0 0 30px rgba(127, 208, 234, 0.45); }
.sx .sx-pnode--gate .sx-pnode__g { border-color: rgba(242, 106, 27, 0.45); }
.sx .sx-pnode--gate.is-active .sx-pnode__g { border-color: var(--sx-warm); box-shadow: 0 0 0 4px rgba(242, 106, 27, 0.14), 0 0 28px rgba(242, 106, 27, 0.4); animation: sx-wait 1.6s ease-in-out infinite; }
.sx .sx-pnode--gate.is-done .sx-pnode__g svg, .sx .sx-pnode--end.is-done .sx-pnode__g svg { stroke: var(--sx-warm-l); }
.sx .sx-pnode--end.is-done .sx-pnode__g { border-color: rgba(242, 106, 27, 0.7); box-shadow: 0 0 22px rgba(242, 106, 27, 0.25); }
.sx .sx-pnode.is-fail .sx-pnode__g { border-color: rgba(255, 196, 120, 0.9); box-shadow: 0 0 0 4px rgba(255, 196, 120, 0.12); }
@keyframes sx-wait { 50% { box-shadow: 0 0 0 7px rgba(242, 106, 27, 0.08), 0 0 36px rgba(242, 106, 27, 0.5); } }
.sx .sx-pnode__rays { position: absolute; left: 50%; top: 31px; width: 0; height: 0; pointer-events: none; }
.sx .sx-pnode__rays i { position: absolute; left: 0; top: 0; width: 44px; height: 1px; transform-origin: 0 0; background: linear-gradient(90deg, rgba(127, 208, 234, 0.6), transparent); opacity: 0; transition: opacity .5s ease; }
.sx .sx-pnode--lens.is-active .sx-pnode__rays i { opacity: 1; }
.sx .sx-pnode__rays i:nth-child(1) { transform: rotate(-32deg) translateX(34px); }
.sx .sx-pnode__rays i:nth-child(2) { transform: rotate(0deg) translateX(34px); }
.sx .sx-pnode__rays i:nth-child(3) { transform: rotate(32deg) translateX(34px); }
.sx .sx-pulse { position: absolute; z-index: 2; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(127, 208, 234, 0.9), 0 0 26px 6px rgba(30, 155, 196, 0.4); opacity: 0; transition: transform .9s var(--sx-ease), opacity .3s ease; pointer-events: none; }
.sx .sx-pulse.is-w { box-shadow: 0 0 10px 2px rgba(255, 179, 138, 0.95), 0 0 26px 6px rgba(242, 106, 27, 0.45); }
.sx .sx-gatebtn { position: absolute; z-index: 3; bottom: 6px; transform: translate(-50%, 0); display: none; white-space: nowrap; }
.sx .sx-gatebtn.is-on { display: inline-flex; animation: sx-rise .5s var(--sx-ease) both; }
.sx .sx-proc__out { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.sx .sx-log { border-radius: 10px; border: 1px solid var(--sx-line); background: #070c12; padding: 14px 16px; min-height: 212px; font-family: var(--sx-mono); font-size: 12px; line-height: 1.55; }
.sx .sx-log__h { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-ghost); margin-bottom: 10px; }
.sx .sx-log li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 4px 0; color: var(--sx-dim); animation: sx-rise .45s var(--sx-ease) both; }
.sx .sx-log li time { color: var(--sx-ghost); }
.sx .sx-log li.is-w { color: var(--sx-warm-l); }
.sx .sx-log li.is-h { color: #fff; }
.sx .sx-log li.is-x { color: rgba(255, 210, 150, 0.95); }
.sx .sx-conseq { padding: 18px 18px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.sx .sx-conseq__h { font-family: var(--sx-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-warm-l); margin-bottom: 10px; }
.sx .sx-conseq__t { font-size: 17px; line-height: 1.5; color: var(--sx-dim); transition: color .6s ease; }
.sx .sx-conseq.is-done .sx-conseq__t { color: #fff; }
.sx .sx-msg { margin-top: 16px; align-self: flex-start; max-width: 100%; padding: 10px 14px 8px; border-radius: 14px 14px 14px 4px; background: #16222e; border: 1px solid var(--sx-line2); font-size: 14px; color: var(--sx-ink); opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s var(--sx-ease); }
.sx .sx-msg small { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: var(--sx-faint); }
.sx .sx-msg.is-on { opacity: 1; transform: none; }
.sx .sx-proc__note { margin-top: 18px; font-size: 13.5px; color: var(--sx-faint); }

.sx .sx-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx .sx-exc { padding: 22px; display: flex; flex-direction: column; }
.sx .sx-exc__k { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.sx .sx-exc__t { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin-bottom: 8px; }
.sx .sx-exc__chain { font-family: var(--sx-mono); font-size: 12px; line-height: 1.7; color: var(--sx-dim); margin-bottom: 12px; }
.sx .sx-exc__chain b { color: var(--sx-warm-l); font-weight: 600; }
.sx .sx-exc__chain em { font-style: normal; color: #fff; }
.sx .sx-exc__c { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sx-line); font-size: 14.5px; line-height: 1.55; color: var(--sx-dim); }
.sx .sx-exc__c b { color: #fff; font-weight: 600; }

.sx .sx-nogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx .sx-nogo__i { padding: 20px 18px; }
.sx .sx-nogo__i svg { width: 100%; height: 26px; margin-bottom: 14px; overflow: visible; }
.sx .sx-nogo__i h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.sx .sx-nogo__i p { font-size: 14px; line-height: 1.6; color: var(--sx-dim); }
.sx .ng-rail { stroke: rgba(127, 208, 234, 0.55); stroke-width: 1.4; fill: none; }
.sx .ng-break { stroke: rgba(255, 196, 120, 0.85); stroke-width: 1.4; fill: none; }
.sx .ng-dot { fill: rgba(198, 214, 226, 0.5); }

.sx .sx-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sx-line); }
.sx .sx-steps4 li { padding: 26px 22px 8px 0; border-right: 1px solid var(--sx-line); }
.sx .sx-steps4 li + li { padding-left: 22px; }
.sx .sx-steps4 li:last-child { border-right: 0; }
.sx .sx-steps4 span { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--sx-warm); }
.sx .sx-steps4 h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 12px 0 8px; }
.sx .sx-steps4 p { font-size: 14.5px; line-height: 1.6; color: var(--sx-dim); }

.sx .sx-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sx .sx-tools__list li { padding: 14px 0; border-bottom: 1px solid var(--sx-line); font-size: 15px; line-height: 1.55; color: var(--sx-dim); }
.sx .sx-tools__list li b { color: #fff; font-weight: 600; }
.sx .sx-tools__side .sx-hint { white-space: normal; line-height: 1.6; }
.sx .sx-tools__side p { font-size: 15px; line-height: 1.6; color: var(--sx-dim); padding: 14px 16px; border-left: 2px solid rgba(127, 208, 234, 0.4); margin-bottom: 12px; background: rgba(13, 21, 30, 0.5); border-radius: 0 8px 8px 0; }

.sx .sx-bridge { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); align-items: center; }
.sx .sx-bridge p { font-size: 16px; line-height: 1.65; color: var(--sx-dim); }
.sx .sx-bridge p + p { margin-top: 12px; }
.sx .sx-bridge__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.sx .sx-exits { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; text-align: left; max-width: 980px; margin: 0 auto; }
.sx .sx-exit { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.sx .sx-exit__k { font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sx-warm-l); }
.sx .sx-exit--alt .sx-exit__k { color: var(--sx-faint); }
.sx .sx-exit h3 { font-size: 21px; font-weight: 700; color: #fff; line-height: 1.25; }
.sx .sx-exit p { font-size: 15px; line-height: 1.6; color: var(--sx-dim); }
.sx .sx-exit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }

.sx .sx-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 36px); }
.sx .sx-live p { font-size: 15.5px; line-height: 1.65; color: var(--sx-dim); }
.sx .sx-live p + p { margin-top: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .sx .sx-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .sx-nogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .sx-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .sx-steps4 li:nth-child(2) { border-right: 0; }
  .sx .sx-steps4 li:nth-child(3) { padding-left: 0; }
  .sx .sx-path { grid-template-columns: 130px minmax(0, 1fr); }
  .sx .sx-path__sig { grid-column: 2; }
}
@media (max-width: 900px) {
  .sx .sx-orient { grid-template-columns: 1fr; }
  .sx .sx-orient__map { order: -1; top: calc(var(--rh-nav-h, 72px) + 6px); z-index: 5; margin: 0 -8px; }
  .sx .sx-map { border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9); }
  .sx .sx-map__legend { display: none; }
  .sx .sx-room small { display: none; }
  .sx .sx-room { font-size: 9.5px; letter-spacing: 0.14em; margin-top: 18px; padding: 8px 6px; }
  .sx .sx-room--diag { margin-top: -16px; }
  .sx .sx-arch { grid-template-columns: 1fr; padding: 0; }
  .sx .sx-arch__stage { order: 0; top: calc(var(--rh-nav-h, 72px) + 4px); height: 46vh; min-height: 300px; z-index: 5; padding: 0 12px; }
  .sx .sx-stage__legend { display: none; }
  .sx .sx-stage__hints .sx-hint { font-size: 9.5px; }
  .sx .sx-stage { border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9); }
  .sx .sx-arch__steps { order: 1; padding: 2vh var(--sx-gut) 10vh; }
  .sx .sx-step { min-height: 64vh; justify-content: flex-start; padding-top: 6vh; }
  .sx .sx-step__t { font-size: 27px; }
  .sx .sx-proc__modes { grid-template-columns: 1fr; }
  .sx .sx-flows, .sx .sx-proof, .sx .sx-ex, .sx .sx-cases, .sx .sx-tools, .sx .sx-bridge, .sx .sx-exits, .sx .sx-live, .sx .sx-proc__out { grid-template-columns: 1fr; }
  .sx .sx-pipe { grid-template-columns: 1fr; gap: 0; }
  .sx .sx-pipe::before { left: 31px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; }
  .sx .sx-pnode { flex-direction: row; text-align: left; gap: 14px; padding: 7px 0; }
  .sx .sx-pnode__g { width: 62px; height: 46px; flex: 0 0 auto; }
  .sx .sx-pnode__rays { top: 50%; left: 62px; }
  .sx .sx-pnode__rays i { width: 26px; }
  .sx .sx-pnode__rays i:nth-child(n) { transform-origin: 0 0; }
  .sx .sx-pnode__txt { align-items: flex-start; gap: 3px; }
  .sx .sx-gatebtn { transform: none; left: 0 !important; }
}
@media (max-width: 640px) {
  .sx .sx-routes, .sx .sx-direct__list, .sx .sx-nogo, .sx .sx-steps4 { grid-template-columns: 1fr; }
  .sx .sx-direct__list li:nth-child(odd) { border-right: 0; }
  .sx .sx-direct__list li:nth-child(even) .sx-dline { padding-left: 0; }
  .sx .sx-steps4 li, .sx .sx-steps4 li + li { padding: 22px 0 8px; border-right: 0; border-bottom: 1px solid var(--sx-line); }
  .sx .sx-path { grid-template-columns: 1fr; gap: 14px; }
  .sx .sx-path__form { width: 150px; }
  .sx .sx-path__sig { grid-column: auto; }
  .sx .sx-cases .sx-ev--wide .sx-ev__media { aspect-ratio: 16 / 10; }
  .sx .sx-verbs { grid-template-columns: 1fr 1fr; }
  .sx .sx-hero { min-height: 78vh; }
  .sx .sx-title { font-size: clamp(34px, 10vw, 46px); }
}

/* ============================================================
   REDUCED MOTION — estado final, sin desplazamientos
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sx .sx-lit { animation: none !important; background: none !important; color: #fff !important; }
  .sx.rh-js .sx-ev__media img { filter: none; transform: none; transition: none; }
  .sx .sx-ev__media::before { transform: scaleX(1); transition: none; }
  .sx .sx-glint.is-lit::after, .sx .mp-glint.is-on { animation: none; }
  .sx .mp-link, .sx .mp-path { transition: none; }
  .sx .sx-q--later.is-open, .sx .sx-reveal-panel .sx-route, .sx .sx-log li, .sx .sx-gatebtn.is-on { animation: none; }
  .sx .sx-pnode--gate.is-active .sx-pnode__g { animation: none; }
  .sx .sx-pulse { transition: none; }
  .sx .sx-signal::before { transform: none; }
  .sx .sx-signal i { top: calc(100% - 3px); opacity: 1; }
  .sx .sx-step { opacity: 1; }
}

/* ============================================================
   CONTACTO · la luz baja a la conversación (N3)
   ============================================================ */
.sx .sx-hero--contact, .sx .sx-hero--dg { min-height: min(72vh, 720px); }
.sx .sx-lamp { position: absolute; left: 50%; top: 0; width: 900px; max-width: 160vw; height: 70%; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(242, 106, 27, 0.22), rgba(242, 106, 27, 0.06) 45%, transparent 75%); }
.sx .sx-lamp::after { content: ""; position: absolute; left: 50%; top: 0; width: 220px; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 214, 190, 0.95), transparent); box-shadow: 0 0 18px 3px rgba(242, 106, 27, 0.55); }
.sx .sx-ctx { position: relative; max-width: 620px; margin: -6px 0 22px; padding: 16px 18px 14px; border-radius: 12px; border: 1px solid rgba(242, 106, 27, 0.35); background: linear-gradient(180deg, rgba(242, 106, 27, 0.10), rgba(9, 14, 20, 0.6)); animation: sx-rise .8s var(--sx-ease) both; }
.sx .sx-ctx__k { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-warm-l); margin-bottom: 6px; }
.sx .sx-ctx__t { font-size: 17px; line-height: 1.5; color: #fff; }
.sx .sx-ctx__x { margin-top: 8px; min-height: 36px; background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 13px/1 var(--rh-font); color: var(--sx-faint); text-decoration: underline; text-underline-offset: 3px; }
.sx .sx-ctx__x:hover { color: #fff; }
.sx .sx-talk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sx .sx-compose { padding: clamp(22px, 3vw, 34px); }
.sx .sx-compose__t { font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 18px; }
.sx .sx-compose__l { display: block; font-size: 14px; font-weight: 600; color: var(--sx-dim); margin-bottom: 8px; }
.sx .sx-compose__f { width: 100%; min-height: 128px; resize: vertical; padding: 14px 16px; border-radius: 10px; background: #070c12; border: 1px solid var(--sx-line2); color: var(--sx-ink); font: 400 16px/1.55 var(--rh-font); }
.sx .sx-compose__f::placeholder { color: var(--sx-ghost); }
.sx .sx-compose__f:focus { outline: 2px solid var(--sx-cool); outline-offset: 2px; border-color: transparent; }
.sx .sx-compose__ctxnote { margin-top: 10px; font-size: 13.5px; color: var(--sx-warm-l); }
.sx .sx-compose__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.sx .sx-compose__foot .sx-small { max-width: 30ch; }
.sx .sx-doors__t { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-faint); margin: 6px 0 10px; }
.sx .sx-door { position: relative; display: block; padding: 16px 44px 16px 0; border-top: 1px solid var(--sx-line); transition: background-color .3s ease, opacity .3s ease; }
.sx .sx-door:last-child { border-bottom: 1px solid var(--sx-line); }
.sx .sx-door__k { display: block; font-family: var(--sx-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-cool-l); margin-bottom: 4px; }
.sx .sx-door b { display: block; font-size: 16.5px; color: #fff; margin-bottom: 4px; }
.sx .sx-door__d { display: block; font-size: 14px; line-height: 1.5; color: var(--sx-dim); }
.sx .sx-door i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--sx-warm); transition: transform .3s var(--sx-ease); }
.sx .sx-door:hover i { transform: translate(4px, -50%); }
.sx .sx-door:hover b { color: var(--sx-warm-l); }
.sx .sx-door.is-suggest { background: linear-gradient(90deg, rgba(242, 106, 27, 0.09), transparent 75%); padding-left: 14px; }
.sx .sx-door.is-suggest .sx-door__k { color: var(--sx-warm-l); }
.sx .sx-door.is-quiet { opacity: 0.72; }
.sx .sx-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx .sx-steps4, .sx .sx-pipe, .sx .sx-log ol, .sx ol.sx-log { list-style: none; }
.sx .sx-hero--contact { min-height: 0; }
.sx .sx-hero--contact .sx-hero__inner { padding-top: clamp(56px, 10vh, 110px); padding-bottom: clamp(28px, 5vh, 56px); }

/* ============================================================
   DIAGNÓSTICO · de la niebla a una prioridad (N3)
   ============================================================ */
.sx .sx-banner { max-width: 640px; margin: -4px 0 26px; padding: 14px 16px; border-left: 2px solid rgba(238, 242, 246, 0.6); background: rgba(13, 21, 30, 0.7); border-radius: 0 10px 10px 0; font-size: 15.5px; line-height: 1.55; color: #fff; animation: sx-rise .8s var(--sx-ease) both; }
.sx .sx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sx-line); }
.sx .sx-facts li { padding: 20px 20px 4px 0; font-size: 14.5px; line-height: 1.6; color: var(--sx-dim); }
.sx .sx-facts li + li { padding-left: 20px; border-left: 1px solid var(--sx-line); }
.sx .sx-facts b { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-cool-l); margin-bottom: 8px; }
.sx .sx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx .sx-split__i { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; align-items: flex-start; }
.sx .sx-split__k { font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-warm-l); margin-bottom: 12px; }
.sx .sx-split__i--alt .sx-split__k { color: var(--sx-cool-l); }
.sx .sx-split__i h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 700; line-height: 1.3; color: #fff; margin-bottom: 14px; }
.sx .sx-split__i p { font-size: 15px; line-height: 1.65; color: var(--sx-dim); margin-bottom: 10px; }
.sx .sx-split__list { margin-bottom: 20px; }
.sx .sx-split__list li { position: relative; padding: 10px 0 10px 18px; border-bottom: 1px dashed rgba(214, 222, 227, 0.12); font-size: 15px; line-height: 1.5; color: var(--sx-ink); }
.sx .sx-split__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--sx-cool-l); }
.sx .sx-split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
.sx .sx-step__mine { margin-top: 8px; font-size: 14px; color: var(--sx-warm-l); }
.sx .sx-deliver { padding: 24px; }
.sx .sx-deliver h3 { font-size: 17px; color: #fff; margin-bottom: 12px; }
.sx .sx-deliver li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--sx-line); font-size: 15px; color: var(--sx-ink); }
.sx .sx-deliver li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 10px; height: 5px; border-left: 2px solid var(--sx-warm); border-bottom: 2px solid var(--sx-warm); transform: rotate(-45deg); }
.sx .sx-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--sx-line); }
.sx .sx-faq article { padding: 22px 0; border-bottom: 1px solid var(--sx-line); }
.sx .sx-faq h3 { font-size: 17px; color: #fff; margin-bottom: 8px; }
.sx .sx-faq p { font-size: 15px; line-height: 1.65; color: var(--sx-dim); }
.sx .sx-recap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--sx-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-faint); }
.sx .sx-recap span { padding: 7px 11px; border: 1px solid var(--sx-line2); border-radius: 999px; }
.sx .sx-recap .is-focus { color: var(--sx-warm-l); border-color: rgba(242, 106, 27, 0.6); }
.sx .sx-recap i { font-style: normal; color: var(--sx-ghost); }

/* escena SVG */
.sx .sx-stage--dg { background: radial-gradient(110% 90% at 50% 45%, #0b131c 0%, #05080d 72%); }
.sx .sn { position: absolute; left: 3%; top: 8%; width: 94%; height: 80%; overflow: visible; }
.sx .sn-grid path { stroke: rgba(127, 208, 234, 0.06); stroke-width: 1; fill: none; stroke-dasharray: 2 6; }
.sx .sn-n rect { fill: rgba(12, 20, 29, 0.92); stroke: rgba(127, 208, 234, 0.45); stroke-width: 1.2; transition: stroke .7s ease, fill .7s ease, opacity .7s ease; }
.sx .sn-n text { fill: var(--sx-ink); font: 600 21px/1 var(--rh-font); text-anchor: middle; transition: fill .7s ease, opacity .7s ease; }
.sx .sn-n .sn-tag { font: 600 15px/1 var(--sx-mono); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--sx-faint); opacity: 0; }
.sx .sn-n .sn-tag--p { fill: var(--sx-warm-l); }
.sx .sn-n .sn-tag--no { fill: rgba(255, 210, 150, 0.95); }
.sx .sn-n.is-mine rect { stroke: #fff; stroke-width: 1.8; stroke-dasharray: 5 4; }
.sx .sn-strike { stroke: rgba(255, 196, 120, 0.9); stroke-width: 2; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1s var(--sx-ease) .3s; }
.sx .sn-e { stroke: rgba(127, 208, 234, 0.6); stroke-width: 1.4; fill: none; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.3s var(--sx-ease); }
.sx .sn-e--dash { stroke-dasharray: 5 6; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s ease; }
.sx .sn-halo { opacity: 0; transition: opacity 1.2s ease; }
.sx .sn-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sx .sn-next { stroke: rgba(255, 179, 138, 0.95); stroke-width: 2.2; fill: none; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--sx-ease); filter: drop-shadow(0 0 5px rgba(242, 106, 27, 0.7)); }
.sx .sn-out { opacity: 0; transition: opacity .9s ease .6s; }
.sx .sn-out rect { fill: rgba(242, 106, 27, 0.14); stroke: rgba(255, 179, 138, 0.95); stroke-width: 1.4; }
.sx .sn-out text { fill: #fff; font: 700 21px/1 var(--rh-font); text-anchor: middle; }
.sx .sn-fog { opacity: 1; transition: opacity 1.4s ease; pointer-events: none; }
/* estados acumulativos; sin JS = estado final */
.sx .sn.st-1 .sn-e, .sx:not(.rh-js) .sn .sn-e { stroke-dashoffset: 0; }
.sx .sn.st-1 .sn-e--dash, .sx:not(.rh-js) .sn .sn-e--dash { opacity: 1; }
.sx .sn.st-1 .sn-fog { opacity: 0.45; }
.sx .sn.st-2 .sn-fog, .sx:not(.rh-js) .sn .sn-fog { opacity: 0; }
.sx .sn.st-2 .sn-halo, .sx:not(.rh-js) .sn .sn-halo { opacity: 1; }
.sx .sn.st-2 .sn-n--p rect, .sx:not(.rh-js) .sn .sn-n--p rect { stroke: rgba(255, 179, 138, 1); stroke-width: 2; fill: rgba(242, 106, 27, 0.14); }
.sx .sn.st-2 .sn-tag, .sx:not(.rh-js) .sn .sn-tag { opacity: 1; transition: opacity .8s ease .4s; }
.sx .sn.st-2 .sn-n:not(.sn-n--p):not([data-s="presencia"]):not([data-s="conversacion"]) rect,
.sx:not(.rh-js) .sn .sn-n:not(.sn-n--p):not([data-s="presencia"]):not([data-s="conversacion"]) rect { opacity: 0.55; }
.sx .sn.st-2 .sn-n:not(.sn-n--p):not([data-s="presencia"]):not([data-s="conversacion"]) text:not(.sn-tag),
.sx:not(.rh-js) .sn .sn-n:not(.sn-n--p):not([data-s="presencia"]):not([data-s="conversacion"]) text:not(.sn-tag) { fill: var(--sx-faint); }
.sx .sn.st-2 .sn-glint { animation: sx-glint 1.8s var(--sx-ease) .5s forwards; }
.sx .sn.st-3 .sn-next, .sx:not(.rh-js) .sn .sn-next { stroke-dashoffset: 0; }
.sx .sn.st-3 .sn-out, .sx:not(.rh-js) .sn .sn-out { opacity: 1; }
.sx .sn.st-3 .sn-strike, .sx:not(.rh-js) .sn .sn-strike { stroke-dashoffset: 0; }
.sx .sn .sn-n[data-s="pauta"] .sn-tag--no { opacity: 0; }
.sx .sn.st-3 .sn-n[data-s="pauta"] .sn-tag--no, .sx:not(.rh-js) .sn .sn-n[data-s="pauta"] .sn-tag--no { opacity: 1; }
.sx:not(.rh-js) .sx-step { opacity: 1; }

@media (max-width: 1080px) {
  .sx .sx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .sx-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .sx .sx-talk, .sx .sx-split, .sx .sx-faq { grid-template-columns: 1fr; }
  .sx .sx-steps3 { grid-template-columns: 1fr; }
  .sx .sx-arch--dg .sx-arch__stage { position: relative; top: auto; height: auto; min-height: 0; padding: 0 var(--sx-gut); }
  .sx .sx-stage--dg { height: auto; aspect-ratio: 600 / 1090; box-shadow: none; }
  .sx .sx-stage--dg .sx-stage__legend { display: flex; }
  .sx .sn { left: 2%; top: 5%; width: 96%; height: 84%; }
  .sx .sx-arch--dg .sx-step { min-height: 0; padding: 18px 0; opacity: 1; }
  .sx .sn-n text { font-size: 19.5px; }
  .sx .sn-n .sn-tag { font-size: 16px; }
}
@media (max-width: 640px) {
  .sx .sx-facts { grid-template-columns: 1fr; }
  .sx .sx-facts li, .sx .sx-facts li + li { padding: 16px 0 4px; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sx .sx-ctx, .sx .sx-banner { animation: none; }
  .sx .sn-e, .sx .sn-next, .sx .sn-strike, .sx .sn-halo, .sx .sn-out, .sx .sn-fog, .sx .sn-n rect, .sx .sn-n text { transition: none; }
  .sx .sn.st-2 .sn-glint { animation: none; }
}

@media (max-width: 1080px) {
  .sx .sx-steps3 li:nth-child(2) { border-right: 1px solid var(--sx-line); }
  .sx .sx-steps3 li:nth-child(3) { padding-left: 22px; }
}
@media (max-width: 900px) {
  .sx .sx-steps3 li, .sx .sx-steps3 li + li { padding: 22px 0 8px; border-right: 0; border-bottom: 1px solid var(--sx-line); }
}

/* pulso que recorre un microdiagrama (offset-path) */
.sx .sx-offset { offset-rotate: 0deg; offset-distance: 0%; opacity: 0; animation: sx-travel 4.2s linear infinite; }
.sx .sx-flow:nth-child(2) .sx-offset { animation-delay: -1.1s; }
.sx .sx-flow:nth-child(3) .sx-offset { animation-delay: -2.3s; }
.sx .sx-flow:nth-child(4) .sx-offset { animation-delay: -3.2s; }
@keyframes sx-travel { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sx .sx-offset { display: none; } }

/* utilidad: texto solo para lectores de pantalla */
.sx .sx-visually { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }