/* ===================================================================================================
   Páginas de solución: una pieza propia por página (ver src/solutions/render.mjs). Mismo sistema que la
   home ("Jugar en serio": tinta, papel, oro de trofeo, azul de acción, Archivo ancho y pesado), pero cada
   página tiene su momento: la receta (Formación), la estantería (Catálogo), la máquina y el mapa de
   niveles (Onboarding), la sesión con el avatar (AI Role Play), la órbita (Mars), el pipeline (Ventas), el
   marcador (AI Role Play ventas, Kepler), el playbook que se vuelve misiones y la ficha de 2100.
   El movimiento es casi todo respuesta al usuario (pestañas, filtros, flechas); lo automático se limita a
   contar cifras al aparecer y a una entrada por pieza estrella. Con movimiento reducido no se anima nada.
   =================================================================================================== */
.sx{--sx-pad:clamp(72px,8vw,120px);--rust:#E0773A}
.sx-sec{position:relative;padding:var(--sx-pad) 0;overflow-x:clip}
.sx-white{background:#fff}
.sx-paper{background:var(--paper)}
.sx-ink{background:var(--ink);color:#fff}
.sx-ink h2,.sx-ink h3{color:#fff}
.sx-ink p,.sx-ink .sx-intro{color:var(--fog)}
.sx-head{max-width:860px;margin:0 0 clamp(36px,4.5vw,56px)}
.sx-head h2{margin:0;font:820 clamp(32px,4.1vw,54px)/1.02 var(--font-head);font-stretch:118%;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.sx-ink .sx-head h2{color:#fff}
.sx-intro{margin:18px 0 0;max-width:42em;color:var(--muted);font-size:clamp(17px,1.3vw,19px);line-height:1.6;text-wrap:pretty}
.sx h3{text-wrap:balance}
.sx p{text-wrap:pretty}
.sx-ic{width:24px;height:24px;flex:none}
.sx-note,.sx-source{margin:28px 0 0;max-width:60em;color:var(--muted);font-size:13.5px;line-height:1.5}
/* la nota de fuente ("*Métricas de nuestras encuestas…") cabe en una línea en escritorio: sin tope de ancho */
.sx-note{max-width:none}
.sx-ink .sx-note,.sx-ink .sx-source{color:var(--mist)}
.sx-btnrow{margin:40px 0 0;display:flex;justify-content:center}
.sx-btnrow-left{justify-content:flex-start}
.sx-link{display:inline-block;margin-top:14px;color:var(--action);font-weight:700;font-size:15.5px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(0,100,209,.3)}
a:hover .sx-link{text-decoration-color:currentColor}
.sx-media{display:block;width:100%;height:auto;object-fit:cover;border-radius:inherit}
.sx a:focus-visible,.sx button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* datos del héroe (hechos reales, con check dorado) */
.sx-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0;color:var(--fog);font-size:15px;font-weight:600}
.sx-facts li{display:flex;align-items:center;gap:8px}
.sx-facts .sx-ic{width:18px;height:18px;color:var(--gold);stroke-width:2.6}

/* ---------- hueco para visual (lo rellena el cliente) ---------- */
.sx-slot{position:relative;display:grid;place-items:center;width:100%;min-height:180px;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(0,100,209,.05) 0 14px,rgba(0,100,209,.1) 14px 28px),#EEF3F9;box-shadow:inset 0 0 0 2px rgba(0,100,209,.35);color:var(--ink)}
.sx-slot > span{display:grid;justify-items:center;gap:8px;max-width:30em;padding:20px;text-align:center}
.sx-slot .sx-ic{width:34px;height:34px;color:var(--action)}
.sx-slot b{font:680 15px/1.4 var(--font-body)}
.sx-slot small{color:var(--muted);font:600 12.5px/1.3 var(--font-body)}
.sx-ink .sx-slot{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 14px,rgba(255,255,255,.07) 14px 28px),var(--ink-2);box-shadow:inset 0 0 0 2px rgba(255,181,71,.45);color:#fff}
.sx-ink .sx-slot .sx-ic{color:var(--gold)}
.sx-ink .sx-slot small{color:var(--mist)}
.sx-wide-media{margin:clamp(40px,5vw,64px) 0 0;border-radius:22px;overflow:clip;box-shadow:0 30px 70px -44px rgba(11,27,48,.55)}
.sx-wide-media img{display:block;width:100%;height:auto}
.sx-wide-media figcaption{padding:14px 18px;background:#fff;color:var(--muted);font-size:14.5px}
.sx-k-media .sx-wide-media{margin-top:0}

/* ---------- cifras que cuentan ---------- */
[data-count]{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Formación: la receta ---------- */
.sx-recipe{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1.15fr);align-items:stretch}
.sx-ing{padding:28px 24px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-ing > .sx-ic{width:44px;height:44px;padding:10px;margin-bottom:18px;border-radius:13px;background:#E3EEFB;color:var(--action)}
.sx-ing h3{margin:0 0 8px;font:780 20px/1.2 var(--font-head);font-stretch:112%;color:var(--ink)}
.sx-ing p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.sx-op{display:grid;place-items:center;color:var(--gold);font:900 44px/1 var(--font-head);text-shadow:0 2px 0 #E59A2A}
.sx-result{background:var(--ink);box-shadow:none}
.sx-result h3{color:#fff;font-size:22px}
.sx-result ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.sx-result li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.sx-result b{font:830 34px/1 var(--font-head);font-stretch:125%;letter-spacing:-.03em;color:var(--gold)}
.sx-result span{color:var(--fog);font-size:14.5px;line-height:1.35}
.sx-recipe.is-armed .sx-ing,.sx-recipe.is-armed .sx-op{opacity:0}
.sx-recipe.is-in .sx-ing,.sx-recipe.is-in .sx-op{animation:sx-snap .6s cubic-bezier(.2,.8,.2,1) both}
.sx-recipe.is-in > :nth-child(1){--x:-40px;animation-delay:0s}
.sx-recipe.is-in > :nth-child(3){--x:0;--y:40px;animation-delay:.12s}
.sx-recipe.is-in > :nth-child(5){--x:40px;animation-delay:.24s}
.sx-recipe.is-in > .sx-op{--x:0;--y:0;animation-name:sx-pop;animation-delay:.42s}
.sx-recipe.is-in > .sx-result{--x:60px;animation-delay:.62s}
@keyframes sx-snap{from{opacity:0;transform:translate(var(--x,0),var(--y,0))}to{opacity:1;transform:none}}
@keyframes sx-pop{from{opacity:0;transform:scale(.3)}70%{transform:scale(1.2)}to{opacity:1;transform:none}}

/* ---------- Formación: elige modo (bento) ---------- */
.sx-modes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.sx-mode{grid-column:span 6}
.sx-mode-1,.sx-mode-4{grid-column:span 7}
.sx-mode-2,.sx-mode-3{grid-column:span 5}
.sx-mode a{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:clip;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;transition:box-shadow .25s,transform .25s}
.sx-mode a:hover{box-shadow:0 0 0 2px var(--gold),0 30px 60px -40px rgba(11,27,48,.6);transform:translateY(-4px)}
.sx-mode-img{display:block;position:relative;height:clamp(190px,19vw,270px);overflow:clip;background:var(--ink)}
.sx-mode-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sx-mode a:hover .sx-mode-img img{transform:scale(1.05)}
.sx-mode-body{display:block;padding:24px 26px 26px}
.sx-mode-tag{display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;background:var(--gold);color:var(--ink);font:720 13px/1.2 var(--font-body)}
.sx-mode h3{margin:0 0 8px;font:800 clamp(22px,2.2vw,28px)/1.1 var(--font-head);font-stretch:116%;letter-spacing:-.015em}
.sx-mode p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}

/* ---------- vídeo en banda oscura ---------- */
.sx-video{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.sx-video .sx-head{margin:0}
.sx-video .sx-head h2{font-size:clamp(28px,3.2vw,42px)}
/* en rejilla, el marco del vídeo (con margin:auto y el iframe absoluto) se quedaba a 0 de ancho */
.sx .video-frame{width:100%;max-width:none;margin:0}
.sx-video .video-frame{box-shadow:0 40px 80px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}

/* ---------- testimonios ---------- */
.sx-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sx-quotes figure{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;margin:0;padding:34px 28px 26px;border-radius:22px;background:var(--paper)}
.sx-paper .sx-quotes figure{background:#fff}
.sx-quotes figure::before{content:"“";position:absolute;top:-6px;left:22px;color:var(--gold);font:900 84px/1 Georgia,serif}
.sx-quotes blockquote{margin:0}
.sx-quotes blockquote p{margin:0;font:560 18px/1.5 var(--font-body);color:var(--ink)}
.sx-quotes figcaption{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35}
.sx-quotes figcaption img,.sx-q-ini{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover}
.sx-q-ini{display:grid;place-items:center;background:var(--ink);color:var(--gold);font:800 20px/1 var(--font-head)}
.sx-quotes figcaption strong{display:block;color:var(--ink);font-size:15px}
.sx-quotes figcaption span span{color:var(--muted)}

.sx-quotes-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- preguntas frecuentes ---------- */
.sx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-faq-side{position:sticky;top:32px}
.sx-faq .faq{margin:0}
.sx-faq .faq details{background:#fff}

/* ---------- Catálogo: la estantería ---------- */
.sx-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.sx-chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule);color:var(--ink);font:650 14.5px/1 var(--font-body);cursor:pointer;transition:box-shadow .2s,background-color .2s}
.sx-chip span{color:var(--muted);font-weight:600;font-size:13px}
.sx-chip:hover{box-shadow:inset 0 0 0 1.5px var(--action)}
.sx-chip.is-on{background:var(--ink);box-shadow:none;color:#fff}
.sx-chip.is-on span{color:var(--gold)}
.sx-shelf-box{position:relative}
.sx-shelf-row{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,21vw,256px);gap:18px;margin:0;padding:6px 4px 26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:4px;scrollbar-width:thin;scrollbar-color:var(--fog) transparent}
.sx-shelf-row li{scroll-snap-align:start}
.sx-shelf-row li[hidden]{display:none}
.sx-shelf-row a,.sx-mini-shelf a{display:block;height:100%;padding:10px 10px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.sx-shelf-row a:hover,.sx-mini-shelf a:hover{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 0 0 2px var(--gold),0 24px 44px -28px rgba(11,27,48,.55)}
.sx-cover{display:block;aspect-ratio:16/10;margin-bottom:12px;border-radius:11px;overflow:clip;background:var(--ink-2)}
.sx-cover img{display:block;width:100%;height:100%;object-fit:cover}
.sx-shelf-row strong,.sx-mini-shelf strong{display:block;padding:0 6px;font:800 17px/1.2 var(--font-head);font-stretch:112%}
.sx-shelf-row small,.sx-mini-shelf small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;padding:0 6px;color:var(--muted);font-size:14px;line-height:1.35}
.sx-nav{position:absolute;top:calc(50% - 34px);z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(11,27,48,.7);cursor:pointer;transition:opacity .2s,background-color .2s}
.sx-nav:hover{background:var(--action)}
.sx-nav[disabled]{opacity:0;pointer-events:none}
.sx-prev{left:-18px}.sx-next{right:-18px}
.sx-shelf:not(.is-ready) .sx-nav{display:none}

/* ---------- tres niveles con cifra (fórmula) ---------- */
.sx-formula{list-style:none;counter-reset:sxf;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sx-formula li{counter-increment:sxf;position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--paper);overflow:clip}
.sx-paper .sx-formula li{background:#fff}
.sx-formula-img{display:block;aspect-ratio:16/9;overflow:clip}
.sx-formula-img img{display:block;width:100%;height:100%;object-fit:cover}
.sx-formula-stat{display:flex;flex-direction:column;gap:8px;margin:-34px 20px 0;padding:18px 20px;border-radius:16px;background:var(--ink);color:#fff;position:relative}
.sx-formula-stat::before{content:counter(sxf);position:absolute;top:-14px;right:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gold);color:var(--ink);font:850 16px/1 var(--font-head);transform:rotate(-6deg)}
.sx-formula-stat b{font:840 clamp(38px,3.6vw,48px)/.95 var(--font-head);font-stretch:125%;letter-spacing:-.035em;color:var(--gold)}
.sx-formula-stat span{color:var(--fog);font-size:14px;line-height:1.35}
.sx-formula h3{margin:22px 24px 8px;font:780 21px/1.2 var(--font-head);font-stretch:112%;color:var(--ink)}
.sx-formula p{margin:0 24px 26px;color:var(--muted);font-size:15.5px;line-height:1.55}
/* variante en filas sobre tinta (catálogo de ventas): cifra grande a la izquierda, sin fotos */
.sx-formula-rows{grid-template-columns:minmax(0,1fr);gap:0}
.sx-formula-rows li{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);column-gap:clamp(24px,5vw,72px);align-items:center;padding:34px 0;border-radius:0;background:none;border-top:1px solid rgba(255,255,255,.14)}
.sx-formula-rows li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.sx-formula-rows .sx-formula-stat{grid-row:span 2;margin:0;padding:0;background:none;flex-direction:column;gap:8px}
.sx-formula-rows .sx-formula-stat::before{content:none}
.sx-formula-rows .sx-formula-stat b{font-size:clamp(64px,8vw,112px)}
.sx-formula-rows .sx-formula-stat span{font-size:15px;max-width:16em}
.sx-formula-rows h3{margin:0 0 8px;color:#fff;font-size:clamp(22px,2.3vw,28px)}
.sx-formula-rows p{margin:0;color:var(--fog);font-size:16.5px}

/* ---------- pilares ---------- */
.sx-pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-pillars li{padding:34px 30px;border-left:1px solid var(--rule)}
.sx-pillars li:first-child{border-left:0}
.sx-pillars .sx-ic{width:48px;height:48px;padding:11px;margin-bottom:22px;border-radius:14px;background:var(--gold);color:var(--ink);transform:rotate(-4deg)}
.sx-pillars h3{margin:0 0 10px;font:800 24px/1.15 var(--font-head);font-stretch:116%;color:var(--ink)}
.sx-pillars p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.sx-stamp{display:flex;align-items:center;gap:14px;max-width:640px;margin:28px 0 0;padding:16px 20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--ink);font-weight:650;line-height:1.45}
.sx-stamp .sx-ic{width:30px;height:30px;color:#C9831D}

/* ---------- minijuego: pantalla de recreativa ---------- */
.sx-arcade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.sx-arcade-screen{position:relative;display:block;padding:14px;border-radius:28px;background:linear-gradient(160deg,#1C3556,#0A1628);box-shadow:0 0 0 2px rgba(255,181,71,.55),0 40px 80px -40px rgba(0,0,0,.9)}
.sx-arcade-screen img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;filter:saturate(1.1)}
.sx-arcade-play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 6px 0 #C9831D,0 20px 40px -10px rgba(0,0,0,.6);transition:transform .2s}
.sx-arcade-play .sx-ic{width:40px;height:40px;fill:currentColor;margin-left:5px}
.sx-arcade-screen:hover .sx-arcade-play{transform:scale(1.08)}
.sx-arcade-copy h2{margin:0;font:840 clamp(34px,4.2vw,56px)/1 var(--font-head);font-stretch:122%;letter-spacing:-.03em}
.sx-arcade-copy p{margin:18px 0 30px;font-size:18px;line-height:1.6}
.sx-white .sx-arcade-copy h2{color:var(--ink)}
.sx-white .sx-arcade-copy p{color:var(--muted)}

/* ---------- sigue explorando ---------- */
.sx-cross{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.sx-cross a{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:18px;height:100%;padding:12px 18px 12px 12px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.sx-white .sx-cross a{background:var(--paper);box-shadow:none}
.sx-cross a:hover{box-shadow:0 0 0 2px var(--action);transform:translateY(-3px)}
.sx-cross img{width:112px;height:84px;object-fit:cover;border-radius:12px}
.sx-cross strong{display:block;font:780 18px/1.2 var(--font-head);font-stretch:110%}
.sx-cross span span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.4}
.sx-k-cross .sx-head{margin-bottom:32px}
.sx-k-cross .sx-head h2{font-size:clamp(26px,2.8vw,36px)}

/* ---------- Onboarding: la máquina ---------- */
.sx-tf{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:20px}
.sx-tf-col{padding:30px 28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-tf-out{background:var(--ink);box-shadow:none}
.sx-tf-col h3{margin:0 0 8px;font:800 26px/1.1 var(--font-head);font-stretch:116%;color:var(--ink)}
.sx-tf-out h3{color:#fff}
.sx-tf-col > p{margin:0 0 22px;color:var(--muted);font-size:16px;line-height:1.55}
.sx-tf-out > p{color:var(--fog)}
.sx-tf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sx-tf-col li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--paper);color:var(--ink);font-weight:650;font-size:15px}
.sx-tf-col li .sx-ic{width:20px;height:20px;color:var(--action)}
.sx-tf-out li{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sx-tf-out li .sx-ic{color:var(--gold)}
.sx-tf-machine{position:relative;display:grid;place-items:center;height:100%}
.sx-tf-machine::before{content:"";position:absolute;left:-20px;right:-20px;top:50%;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 22px);transform:translateY(-50%)}
.sx-tf-machine span{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:var(--gold);color:var(--ink);box-shadow:0 6px 0 #C9831D;transform:rotate(-6deg)}
.sx-tf-machine .sx-ic{width:42px;height:42px}
.sx-tf.is-armed li{opacity:0}
.sx-tf.is-in li{animation:sx-snap .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 70ms)}
.sx-tf.is-in .sx-tf-col:first-child li{--x:-16px}
.sx-tf.is-in .sx-tf-out li{--x:16px;animation-delay:calc(.55s + var(--d) * 80ms)}
.sx-tf.is-in .sx-tf-machine::before{animation:sx-belt 1.2s linear 2}
.sx-tf.is-in .sx-tf-machine span{animation:sx-wiggle .5s ease .4s 2}
@keyframes sx-belt{to{background-position:44px 0}}
@keyframes sx-wiggle{50%{transform:rotate(6deg) scale(1.06)}}

/* ---------- Onboarding: mapa de niveles ---------- */
.sx-levels-wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-levels{--p:0;list-style:none;position:relative;margin:0;padding:0 0 0 76px;display:grid;gap:30px}
.sx-levels::before,.sx-levels::after{content:"";position:absolute;left:26px;top:26px;bottom:26px;width:4px;border-radius:4px;background:var(--rule)}
.sx-levels::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--p))}
.sx-levels li{position:relative}
.sx-lv-n{position:absolute;left:-76px;top:0;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--rule);color:var(--ink);font:850 22px/1 var(--font-head);font-stretch:120%;transition:background-color .3s,box-shadow .3s,transform .3s}
.sx-levels li.is-on .sx-lv-n{background:var(--gold);box-shadow:0 4px 0 #C9831D;transform:rotate(-6deg)}
.sx-levels h3{margin:4px 0 6px;font:800 22px/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-levels p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.sx-levels-media{position:sticky;top:32px;margin:0;border-radius:22px;overflow:clip;background:#fff;box-shadow:0 30px 70px -44px rgba(11,27,48,.6),0 0 0 1px var(--rule)}
.sx-levels-media img{display:block;width:100%;height:auto}
.sx-levels-media figcaption{padding:14px 18px;color:var(--muted);font-size:14.5px}

/* ---------- ventajas ("power-ups") ---------- */
.sx-power{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sx-power-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-power li{padding:28px 26px;border-radius:20px;background:var(--paper);transition:transform .25s}
.sx-paper .sx-power li{background:#fff}
.sx-ink .sx-power li{background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sx-power-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border-radius:15px;background:var(--ink);color:var(--gold);box-shadow:0 4px 0 #06101E}
.sx-ink .sx-power-ic{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 #C9831D}
.sx-power li:hover .sx-power-ic{animation:sx-wiggle .5s ease}
.sx-power h3{margin:0 0 8px;font:780 20px/1.2 var(--font-head);font-stretch:110%;color:var(--ink)}
.sx-ink .sx-power h3{color:#fff}
.sx-power p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.sx-ink .sx-power p{color:var(--fog)}

/* ---------- filas imagen + texto ---------- */
.sx-rows{display:grid;gap:clamp(56px,6vw,96px)}
.sx-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px);align-items:center}
.sx-row-rev figure{order:2}
.sx-row figure{margin:0;border-radius:22px;overflow:clip;box-shadow:0 30px 60px -40px rgba(11,27,48,.55)}
.sx-row figure img{display:block;width:100%;height:auto}
.sx-row h3{margin:0 0 14px;font:800 clamp(24px,2.5vw,32px)/1.12 var(--font-head);font-stretch:114%;letter-spacing:-.015em;color:var(--ink)}
.sx-row p{margin:0 0 .8em;color:var(--muted);font-size:17px;line-height:1.65}

/* ---------- 2 × 2 ---------- */
.sx-quad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sx-quad:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-quad:has(> li:nth-child(3):last-child) .sx-quad-img{aspect-ratio:16/10}
.sx-quad li{border-radius:22px;background:var(--paper);overflow:clip}
.sx-paper .sx-quad li{background:#fff}
.sx-quad-img{display:block;aspect-ratio:21/9;overflow:clip;border-radius:22px 22px 0 0}
.sx-quad-img img{display:block;width:100%;height:100%;object-fit:cover}
.sx-quad-img .sx-slot{height:100%;min-height:0;border-radius:0}
.sx-quad h3{margin:22px 26px 8px;font:780 21px/1.2 var(--font-head);font-stretch:112%;color:var(--ink)}
.sx-quad p{margin:0 26px 26px;color:var(--muted);font-size:15.5px;line-height:1.55}

/* ---------- pestañas ---------- */
.sx-tabs{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);align-items:start}
.sx-tabs-media{grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr) minmax(0,.8fr)}
.sx-tablist{display:grid;gap:8px}
.sx-tablist [role=tab]{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:0;border-radius:14px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule);color:var(--ink);font:680 16px/1.25 var(--font-body);text-align:left;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.sx-paper .sx-tablist [role=tab]{background:#fff}
.sx-tablist [role=tab] .sx-ic{width:22px;height:22px;color:var(--action)}
.sx-tablist [role=tab]:hover{box-shadow:inset 0 0 0 1.5px var(--action)}
.sx-tablist [role=tab][aria-selected=true]{background:var(--ink);box-shadow:none;color:#fff}
.sx-tablist [role=tab][aria-selected=true] .sx-ic{color:var(--gold)}
.sx-panel{padding:32px 34px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-white .sx-panel{background:var(--paper);box-shadow:none}
.sx-panel h3{margin:0 0 12px;font:820 clamp(26px,2.6vw,34px)/1.08 var(--font-head);font-stretch:118%;letter-spacing:-.02em;color:var(--ink)}
.sx-panel p{margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.sx-panel[hidden]{display:none}
.sx-tabs.is-ready .sx-panel:not([hidden]){animation:sx-panel .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sx-panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sx-tabs:not(.is-ready) .sx-tablist{display:none}
.sx-tabs-side .sx-btnrow{margin-top:24px}
.sx-tabs:not(.is-ready) .sx-tabs-side{display:contents}
.sx-tabs:not(.is-ready) .sx-panels{display:grid;gap:14px;grid-column:1/-2}
.sx-tabs-fig{margin:0;align-self:center}
.sx-tabs-fig img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(11,27,48,.3))}
.sx-mini-shelf{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.sx-mini-shelf strong{font-size:15.5px}
.sx-mini-shelf small{font-size:13px}
/* fases de un deal (AI Role Play ventas): las pestañas son un pipeline horizontal */
.sx-tabs-stages{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}
.sx-tabs-stages .sx-tablist{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;position:relative;counter-reset:none}
.sx-tabs-stages .sx-tablist::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:4px;border-radius:4px;background:var(--rule)}
.sx-tabs-stages [role=tab]{position:relative;flex-direction:column;align-items:center;gap:10px;min-height:0;padding:0 6px;box-shadow:none;background:transparent!important;text-align:center;font-size:15px}
.sx-tabs-stages [role=tab]:hover{box-shadow:none}
.sx-tab-n{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--rule);color:var(--ink);font:850 20px/1 var(--font-head);transition:background-color .25s,transform .25s,box-shadow .25s}
.sx-tabs-stages [role=tab]:hover .sx-tab-n{box-shadow:inset 0 0 0 2px var(--action)}
.sx-tabs-stages [role=tab][aria-selected=true]{color:var(--ink)}
.sx-tabs-stages [role=tab][aria-selected=true] .sx-tab-n{background:var(--gold);box-shadow:0 4px 0 #C9831D;transform:scale(1.08)}
.sx-tabs-stages .sx-panels{margin-top:12px;align-self:center}
.sx-tabs-stages .sx-panel{padding:40px 42px}
.sx-tabs-stages .sx-panel p{font-size:18.5px}
.sx-tabs-stages .sx-tabs-fig{margin-top:12px}

/* ---------- AI Role Play: la sesión ---------- */
.sx-session{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sx-session > li{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule);overflow:clip}
.sx-ss-media{border-radius:22px 22px 0 0;overflow:clip}
.sx-ss-media:empty{display:none}
.sx-ss-media .sx-slot{border-radius:0}
.sx-ss-body{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding:24px 26px 26px}
.sx-ss-body > :not(.sx-ss-ic){grid-column:2}
.sx-ss-ic{grid-row:span 4}
.sx-ss-ic{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ink);color:var(--gold)}
.sx-ss-n{display:block;margin-bottom:6px;color:var(--action);font:720 13.5px/1 var(--font-body)}
.sx-ss-body h3{margin:0 0 8px;font:800 23px/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-ss-body p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.sx-ss-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.sx-ss-chips li{padding:5px 10px;border-radius:999px;background:var(--paper);color:var(--ink);font:620 12.5px/1.2 var(--font-body)}
/* la ola de voz del paso "habla con el avatar" */
.sx-wave{grid-template-columns:repeat(5,4px);gap:3px;justify-content:center;align-content:center;background:var(--gold);color:var(--ink)}
.sx-wave .sx-ic{display:none}
.sx-wave i{display:block;width:4px;height:8px;border-radius:3px;background:var(--ink);animation:sx-wave 1.1s ease-in-out infinite}
.sx-wave i:nth-child(3){animation-delay:.15s}.sx-wave i:nth-child(4){animation-delay:.3s}.sx-wave i:nth-child(5){animation-delay:.45s}.sx-wave i:nth-child(6){animation-delay:.6s}
@keyframes sx-wave{0%,100%{height:8px}50%{height:26px}}
.sx-session.is-armed > li{opacity:0}
.sx-session.is-in > li{animation:sx-snap .5s cubic-bezier(.2,.8,.2,1) both;--y:24px}
.sx-session.is-in > li:nth-child(2){animation-delay:.12s}.sx-session.is-in > li:nth-child(3){animation-delay:.24s}.sx-session.is-in > li:nth-child(4){animation-delay:.36s}
.sx-k-powerups .sx-wide-media{max-width:980px;margin-inline:auto}
.sx-session-video{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:32px;align-items:center;margin-top:clamp(48px,6vw,80px)}
.sx-session-video h3{margin:0;font:820 clamp(28px,3vw,40px)/1.05 var(--font-head);font-stretch:118%;color:var(--ink)}

/* ---------- Mars: la órbita ---------- */
.sx-k-orbit{background:radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 88% 68%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 34% 84%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 52% 40%,rgba(255,255,255,.35),transparent 60%),radial-gradient(60% 70% at 80% 50%,rgba(224,119,58,.18),transparent 70%),var(--ink)}
.sx-orbit-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.sx-orbit-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sx-orbit-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:12px 14px;border-radius:14px;transition:background-color .3s}
.sx-orbit-list li.is-on{background:rgba(255,255,255,.07)}
.sx-orbit-list b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--fog);font:850 17px/1 var(--font-head);transition:background-color .3s,color .3s}
.sx-orbit-list li.is-on b{background:var(--rust);color:#fff}
.sx-orbit-list h3{margin:6px 0 4px;font:760 19px/1.2 var(--font-head);font-stretch:110%}
.sx-orbit-list p{margin:0;font-size:15px;line-height:1.5}
.sx-orbit{--r:min(40%,210px);position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center}
.sx-ring{position:absolute;inset:10%;border-radius:50%;border:2px dashed rgba(255,255,255,.22);animation:sx-spin 80s linear infinite}
.sx-planet{position:absolute;inset:31%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFB36B,#E0773A 45%,#8E3A18 100%);box-shadow:inset -18px -18px 40px rgba(60,16,4,.55),0 0 80px rgba(224,119,58,.45)}
.sx-planet span{max-width:8em;color:#fff;font:800 clamp(14px,1.4vw,18px)/1.15 var(--font-head);font-stretch:112%;text-align:center;text-shadow:0 2px 8px rgba(60,16,4,.6)}
.sx-node{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:18px;background:var(--ink-2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);color:var(--fog);transform:rotate(calc(360deg / var(--n) * var(--i) - 90deg)) translate(clamp(120px,19vw,208px)) rotate(calc(-360deg / var(--n) * var(--i) + 90deg));transition:background-color .35s,color .35s,box-shadow .35s}
.sx-node .sx-ic{width:28px;height:28px}
.sx-node.is-on{background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #C9831D,0 0 40px rgba(255,181,71,.45)}
@keyframes sx-spin{to{transform:rotate(1turn)}}

/* ---------- Ventas: el pipeline de un comercial ---------- */
.sx-pipe{--p:0;position:relative}
.sx-pipe ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sx-pipe-line{position:absolute;left:10%;right:10%;top:27px;height:4px;border-radius:4px;background:var(--rule)}
.sx-pipe-line i{display:block;height:100%;border-radius:inherit;background:var(--gold);transform-origin:left;transform:scaleX(var(--p))}
.sx-pipe li{position:relative;display:flex;flex-direction:column;align-items:center}
.sx-pipe-dot{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--gold);box-shadow:0 0 0 6px var(--paper)}
.sx-pipe-stage{margin:12px 0 14px;color:var(--ink);font:820 17px/1 var(--font-head);font-stretch:116%}
.sx-pipe-card{display:flex;flex-direction:column;width:100%;height:100%;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;overflow:clip;transition:box-shadow .2s,transform .25s}
.sx-pipe-card:hover{box-shadow:0 0 0 2px var(--gold),0 24px 48px -30px rgba(11,27,48,.55);transform:translateY(-5px)}
.sx-pipe-img{display:block;aspect-ratio:16/10;overflow:clip;background:var(--ink)}
.sx-pipe-img img{display:block;width:100%;height:100%;object-fit:cover}
.sx-pipe-card h3{margin:18px 18px 6px;font:790 18px/1.2 var(--font-head);font-stretch:110%}
.sx-pipe-card p{margin:0 18px;color:var(--muted);font-size:14.5px;line-height:1.5}
.sx-pipe-card .sx-link{margin:12px 18px 18px;font-size:14.5px}

/* ---------- marcador ---------- */
.sx-score{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:24px;background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sx-score li{display:flex;flex-direction:column;padding:34px 28px 30px;border-left:1px solid rgba(255,255,255,.1)}
.sx-score li:first-child{border-left:0}
.sx-score b{font:850 clamp(48px,5.4vw,76px)/.92 var(--font-head);font-stretch:125%;letter-spacing:-.04em;color:#fff}
.sx-score b::after{content:"";display:block;width:36px;height:5px;margin:18px 0 14px;border-radius:5px;background:var(--gold)}
.sx-score span{color:var(--fog);font-size:15.5px;line-height:1.45}
/* cifras largas ("5.000+"): un punto más pequeñas para que quepan en su casilla */
.sx-score-long b{font-size:clamp(40px,4.3vw,62px)}
.sx-score a{margin-top:auto;padding-top:14px;color:var(--gold);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px}

/* ---------- barras (caso Kepler) ---------- */
.sx-bars-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.sx-bars-wrap .sx-head{margin:0}
.sx-bars{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.sx-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:18px;row-gap:8px;align-items:center}
.sx-bar-l{color:var(--fog);font-size:15.5px;font-weight:600}
.sx-bar{grid-column:1;height:16px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
.sx-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFC46B,var(--gold));transform-origin:left;transform:scaleX(var(--v))}
.sx-bars b{grid-column:2;grid-row:1/3;justify-self:end;min-width:3.1em;text-align:right;font:850 clamp(38px,3.8vw,52px)/1 var(--font-head);font-stretch:125%;letter-spacing:-.03em;color:#fff}
.sx-bars.is-armed .sx-bar i{transform:scaleX(0)}
.sx-bars.is-in .sx-bar i{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sx-bars.is-in li:nth-child(2) .sx-bar i{transition-delay:.1s}.sx-bars.is-in li:nth-child(3) .sx-bar i{transition-delay:.2s}.sx-bars.is-in li:nth-child(4) .sx-bar i{transition-delay:.3s}

/* ---------- pasos en el tiempo (Kepler) ---------- */
.sx-steps{--p:0;list-style:none;position:relative;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sx-steps-line{position:absolute;left:0;right:0;top:66px;height:4px;border-radius:4px;background:var(--rule)}
.sx-steps-line i{display:block;height:100%;border-radius:inherit;background:var(--gold);transform-origin:left;transform:scaleX(var(--p))}
.sx-steps > li:not(.sx-steps-line){position:relative}
.sx-when{display:inline-block;margin-bottom:16px;padding:7px 13px;border-radius:999px;background:var(--ink);color:#fff;font:720 14px/1.2 var(--font-body)}
.sx-step-n{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:15px;background:var(--gold);color:var(--ink);font:850 21px/1 var(--font-head);box-shadow:0 0 0 6px #fff,0 4px 0 6px #fff;transform:rotate(-5deg)}
.sx-paper .sx-step-n{box-shadow:0 0 0 6px var(--paper)}
.sx-steps h3{margin:0 0 8px;font:800 22px/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-steps p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}

/* ---------- Onboarding comercial: playbook → misiones ---------- */
.sx-pb{display:grid;grid-template-columns:minmax(0,.9fr) 90px minmax(0,1.1fr);gap:18px;align-items:center}
.sx-pb-doc{position:relative;padding:30px 30px 26px;border-radius:6px 22px 22px 6px;background:#fff;box-shadow:0 0 0 1px var(--rule),8px 8px 0 -1px #E6ECF3,8px 8px 0 0 var(--rule);background-image:repeating-linear-gradient(180deg,transparent 0 35px,#EEF2F7 35px 36px);background-position:0 78px}
.sx-pb-t{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--ink);font:800 22px/1.15 var(--font-head);font-stretch:114%}
.sx-pb-t .sx-ic{color:var(--action)}
.sx-pb-doc ul{list-style:none;margin:0;padding:0}
.sx-pb-doc li{display:flex;align-items:center;gap:10px;height:36px;color:var(--ink);font-size:16px;font-weight:600}
.sx-pb-doc li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--fog)}
.sx-pb-cap{margin:18px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.sx-pb-arrow{display:grid;place-items:center;width:72px;height:72px;justify-self:center;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #C9831D}
.sx-pb-arrow .sx-ic{width:34px;height:34px}
.sx-pb-mis{padding:30px 28px 26px;border-radius:22px;background:var(--ink)}
.sx-pb-mis .sx-pb-t{color:#fff}
.sx-pb-mis .sx-pb-t .sx-ic{color:var(--gold)}
.sx-pb-mis ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sx-pb-mis li{position:relative;display:grid;gap:4px;padding:13px 40px 13px 14px;border-radius:14px;background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sx-pb-mis li span{color:var(--gold);font:720 12.5px/1 var(--font-body)}
.sx-pb-mis li strong{color:#fff;font:720 15.5px/1.25 var(--font-body)}
.sx-pb-mis li .sx-ic{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--gold);fill:var(--gold)}
.sx-pb-mis .sx-pb-cap{color:var(--fog)}
.sx-pb.is-armed .sx-pb-mis li{opacity:0}
.sx-pb.is-in .sx-pb-mis li{animation:sx-snap .45s cubic-bezier(.2,.8,.2,1) both;--x:-40px;animation-delay:calc(.2s + var(--d) * 90ms)}
.sx-pb.is-in .sx-pb-arrow{animation:sx-wiggle .5s ease .1s 2}

/* ---------- 2100: la ficha ---------- */
.sx-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sx-sheet-col{padding:30px 28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-sheet-col h3{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:800 21px/1.15 var(--font-head);font-stretch:112%;color:var(--ink)}
.sx-sheet-col h3 .sx-ic{width:44px;height:44px;padding:10px;border-radius:13px;background:var(--ink);color:var(--gold)}
.sx-sheet-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sx-sheet-chips ul{display:flex;flex-wrap:wrap;gap:8px}
.sx-sheet-chips li{padding:8px 12px;border-radius:12px;background:var(--paper);color:var(--ink);font-weight:620;font-size:14.5px;line-height:1.35}
.sx-sheet-strike li{position:relative;padding-left:30px;color:var(--ink);font-size:15.5px;line-height:1.45}
.sx-sheet-strike li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:5px;background:#FDE3D6;box-shadow:inset 0 0 0 1.5px var(--rust)}
.sx-sheet-strike li span{background:linear-gradient(var(--rust),var(--rust)) no-repeat 0 55%/0 2px;transition:background-size .6s cubic-bezier(.2,.8,.2,1)}
.sx-sheet.is-in .sx-sheet-strike li span{background-size:100% 2px;transition-delay:calc(.3s + var(--d) * .25s)}
.sx-sheet.is-in .sx-sheet-strike li{color:var(--muted);transition:color .4s calc(.5s + var(--d) * .25s)}
.sx-sheet-checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--ink);font-size:15.5px;line-height:1.45}
.sx-sheet-checks .sx-ic{width:22px;height:22px;padding:3px;border-radius:6px;background:var(--gold);color:var(--ink);stroke-width:3}

/* ---------- tienda (PYMEs) ---------- */
.sx-store{list-style:none;counter-reset:sxs;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sx-store li{counter-increment:sxs;position:relative;padding:34px 28px 30px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-store li::after{content:counter(sxs);position:absolute;top:22px;right:26px;color:var(--rule);font:900 64px/1 var(--font-head);font-stretch:125%}
.sx-store .sx-ic{width:56px;height:56px;padding:13px;margin-bottom:22px;border-radius:16px;background:var(--action);color:#fff;box-shadow:0 4px 0 var(--action-floor)}
.sx-store h3{margin:0 0 8px;font:800 22px/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-store p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}

/* ---------- cifras (PYMEs) ---------- */
.sx-claims{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sx-claims li{padding:28px 26px;border-radius:20px;background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sx-claims b{display:block;font:850 clamp(46px,4.8vw,64px)/.95 var(--font-head);font-stretch:125%;letter-spacing:-.035em;color:#fff}
.sx-claims b::after{content:"";display:block;width:36px;height:5px;margin:16px 0 14px;border-radius:5px;background:var(--gold)}
.sx-claims p{margin:0;color:var(--fog);font-size:15.5px;line-height:1.45}

/* ---------- texto + visual ---------- */
.sx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.sx-split .sx-head{margin-bottom:20px}
.sx-split p{margin:0 0 1em;color:var(--muted);font-size:17.5px;line-height:1.65}
.sx-ink .sx-split p{color:var(--fog)}
.sx-split .sx-btnrow{margin-top:26px}
.sx-split figure{margin:0;border-radius:22px;overflow:clip;box-shadow:0 30px 70px -44px rgba(11,27,48,.55)}
.sx-split figure img{display:block;width:100%;height:auto}
.sx-ink .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.sx-ink .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- CSM: la carretera de tu objetivo a tus resultados ----------
   El asfalto va en tinta sobre blanco y la trazada dorada se dibuja al bajar (--p la pone solutions.js);
   cada parada se enciende cuando la trazada llega a ella. El sello dorado recuerda que el CSM te acompaña
   siempre. En móvil la carretera se endereza en vertical, como el mapa de niveles. */
.sx-csm-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.sx-csm-h span{display:block}
.sx-csm-punch{margin:14px 0 0;max-width:42em;color:var(--ink);font:720 clamp(17px,1.3vw,19px)/1.45 var(--font-body)}
.sx-csm-sticker{position:relative;display:grid;place-content:center;justify-items:center;width:172px;height:172px;margin:4px 10px 0 0;border-radius:50%;background:var(--gold);color:var(--ink);text-align:center;transform:rotate(-8deg);box-shadow:0 6px 0 #C9831D,0 30px 44px -26px rgba(11,27,48,.55)}
.sx-csm-sticker::before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px dashed rgba(11,27,48,.3)}
.sx-csm-sticker b{font:880 28px/1 var(--font-head);font-stretch:118%;letter-spacing:-.02em}
.sx-csm-sticker span{max-width:8.5em;margin-top:6px;font:700 15px/1.2 var(--font-body);text-wrap:balance}
.sx-road{--p:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"start end" "track track" "stops stops" "lap lap"}
.sx-road-sign{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--ink)}
.sx-road-start{grid-area:start}
.sx-road-end{grid-area:end;justify-self:end;flex-direction:row-reverse;text-align:right}
.sx-road-sign > .sx-ic{width:46px;height:46px;padding:11px;border-radius:14px;background:var(--ink);color:var(--gold)}
.sx-road-sign span{display:grid;gap:2px}
.sx-road-sign small{color:var(--muted);font:650 14px/1.2 var(--font-body)}
.sx-road-sign strong{font:820 23px/1.1 var(--font-head);font-stretch:116%;letter-spacing:-.01em}
.sx-road-track{grid-area:track;position:relative}
.sx-road-track svg{display:block;width:100%;height:auto;overflow:visible}
.sx-road-track path{fill:none}
.sx-road-asphalt{stroke:var(--ink-2);stroke-width:30}
.sx-road-dash{stroke:rgba(255,255,255,.5);stroke-width:1.6;stroke-dasharray:9 11}
.sx-road-trail{stroke:var(--gold);stroke-width:5;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p) * 100)}
.sx-road-pin{position:absolute;left:calc(var(--x) * 100%);top:50%;display:grid;place-items:center;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--ink-2),0 12px 22px -12px rgba(11,27,48,.7);transition:background-color .35s,transform .35s cubic-bezier(.2,.8,.2,1.4)}
.sx-road-pin .sx-ic{width:25px;height:25px}
.sx-road-pin.is-on{background:var(--gold);transform:rotate(-8deg) scale(1.08)}
.sx-road-stops{grid-area:stops;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;text-align:center}
.sx-road-dot{display:none}
.sx-road-stops h3{margin:0 0 8px;font:800 19.5px/1.2 var(--font-head);font-stretch:112%;color:var(--ink)}
.sx-road-stops p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.sx-road-lap{grid-area:lap;display:flex;align-items:center;justify-content:center;gap:14px;margin:44px 0 0;padding:18px 24px;border-radius:16px;background:var(--paper);color:var(--ink);line-height:1.45;text-align:left}
.sx-road-lap .sx-ic{width:26px;height:26px;flex:none;color:#C9831D}
.sx-road-lap b{font-weight:720}
.sx-road-lap > span{text-wrap:balance}
.sx-paper .sx-road-lap{background:#fff}
.sx-road-lap span span{display:block;font-weight:500;color:var(--muted)}
@media (max-width:1100px){
  .sx-road-stops{gap:16px}
  .sx-road-stops h3{font-size:18px}
  .sx-road-stops p{font-size:15px}
}
@media (max-width:960px){
  .sx-csm-top{grid-template-columns:minmax(0,1fr);gap:0}
  .sx-csm-sticker{width:136px;height:136px;margin:-14px 0 40px 6px}
  .sx-csm-sticker b{font-size:22px}
  .sx-csm-sticker span{font-size:13px}
  .sx-road{grid-template-columns:minmax(0,1fr);grid-template-areas:"start" "stops" "end" "lap"}
  .sx-road-track{display:none}
  .sx-road-end{justify-self:start;flex-direction:row;text-align:left;margin:18px 0 0}
  .sx-road-stops{position:relative;grid-template-columns:minmax(0,1fr);gap:28px;margin:4px 0 0;padding:14px 0 14px 70px;text-align:left}
  .sx-road-stops::before,.sx-road-stops::after{content:"";position:absolute;left:20px;top:0;bottom:0;width:6px;border-radius:3px;background:var(--ink-2)}
  .sx-road-stops::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--p))}
  .sx-road-stops li{position:relative;min-height:46px}
  .sx-road-dot{position:absolute;z-index:1;left:-70px;top:0;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--ink-2);transition:background-color .35s,transform .35s}
  .sx-road-dot .sx-ic{width:22px;height:22px}
  .sx-road-stops li.is-on .sx-road-dot{background:var(--gold);transform:rotate(-8deg)}
  .sx-road-stops h3{padding-top:10px}
  .sx-road-lap{justify-content:flex-start;margin-top:32px;padding:16px 18px}
}

/* ---------- títulos pequeños sobre el H2 (Programa de Partners) ---------- */
.sx-kicker{margin:0 0 12px;color:var(--action);font:720 15px/1.3 var(--font-body)}
.sx-ink .sx-kicker{color:var(--gold)}
.lp-hero-media > video.sx-media{display:block;width:min(100%,460px);margin:0 auto;border-radius:24px;box-shadow:0 40px 80px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}

/* ---------- Partners: dos tarjetas grandes ---------- */
.sx-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sx-bento-card{display:flex;flex-direction:column;padding:34px 32px 30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-bento-card .sx-kicker{margin-bottom:8px}
.sx-bento-card h3{margin:0 0 14px;font:800 clamp(22px,2vw,27px)/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-bento-card > p:not(.sx-kicker){margin:0;color:var(--muted);font-size:16.5px;line-height:1.6}
.sx-bento-checks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px}
.sx-bento-checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:16.5px;line-height:1.45}
.sx-bento-checks .sx-ic{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--gold);color:var(--ink);stroke-width:3}
.sx-bento-tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sx-bento-tags li{padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font:700 14.5px/1.2 var(--font-body)}
.sx-bento-card .sx-link{margin-top:auto;padding-top:22px}

/* ---------- Partners: perfiles ---------- */
.sx-profiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sx-profiles li{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:18px;background:var(--paper);color:var(--ink);font:760 18px/1.3 var(--font-head);font-stretch:108%}
.sx-profiles .sx-ic{width:48px;height:48px;padding:12px;border-radius:14px;background:var(--ink);color:var(--gold)}
.sx-k-profiles .sx-stamp{max-width:none}

/* ---------- Partners: la red (mapa + región elegida) ---------- */
.sx-net{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px 32px;align-items:start}
.sx-net-geo{position:relative}
.sx-net-map{border-radius:24px;background:var(--ink);padding:18px;box-shadow:0 30px 70px -44px rgba(11,27,48,.6)}
.sx-net-map svg{display:block;width:100%;height:auto}
.sx-net-map path{fill:#27456B}
.sx-net-pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;border-radius:50%;background:var(--action);box-shadow:0 0 0 5px rgba(0,100,209,.3);cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .2s}
/* el nombre de la región solo aparece en la chincheta elegida (o al pasar por encima): juntas se pisan */
.sx-net-pin span{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:6px 10px;border-radius:9px;background:#fff;color:var(--ink);font:720 13px/1.2 var(--font-body);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .15s}
.sx-net-pin:hover span,.sx-net-pin:focus-visible span,.sx-net-pin[aria-pressed=true] span{opacity:1}
.sx-net-pin:hover,.sx-net-pin:focus-visible{z-index:2}
.sx-net-pin[aria-pressed=true]{z-index:1}
.sx-net-pin:hover,.sx-net-pin[aria-pressed=true]{background:var(--gold);box-shadow:0 0 0 6px rgba(255,181,71,.35);transform:scale(1.15)}
.sx-net-side{padding:30px 30px 28px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.sx-net-panel .sx-kicker{margin-bottom:6px}
.sx-net-panel h3{margin:0 0 10px;font:820 26px/1.15 var(--font-head);font-stretch:114%;color:var(--ink)}
.sx-net-panel > p:not(.sx-kicker){margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.55}
.sx-net:not(.is-ready) .sx-net-panel + .sx-net-panel{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.sx-net-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sx-net-chips li{padding:6px 12px;border-radius:999px;background:var(--paper);color:var(--ink);font:650 14px/1.2 var(--font-body)}
.sx-net-bars{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;gap:12px}
.sx-net-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;align-items:center;gap:12px;color:var(--muted);font:650 14.5px/1.2 var(--font-body)}
.sx-net-bars i{position:relative;height:10px;border-radius:5px;background:var(--paper)}
.sx-net-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--action);transition:background-color .2s}
.sx-net-bars b{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sx-net-bars li.is-on{color:var(--ink)}
.sx-net-bars li.is-on i::after{background:var(--gold)}
.sx-net-tabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.sx-net-tabs button{min-height:46px;padding:0 18px;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule);font:680 15px/1 var(--font-body);cursor:pointer}
.sx-net-tabs button b{margin-right:4px;font-weight:850}
.sx-net-tabs button:hover{box-shadow:inset 0 0 0 1.5px var(--action)}
.sx-net-tabs button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.sx-net:not(.is-ready) .sx-net-tabs,.sx-net:not(.is-ready) .sx-net-pin{pointer-events:none}

/* ---------- Partners: pasos de 4 ---------- */
.sx-store-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sx-store-4 li{padding:30px 24px 26px}

/* ---------- Partners: solicitud con el formulario ---------- */
.sx-apply{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-apply-copy{position:sticky;top:32px}
.sx-apply-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sx-apply-list li{display:flex;gap:12px;align-items:center;color:#fff;font-weight:650;font-size:17px}
.sx-apply-list .sx-ic{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--gold);color:var(--ink);stroke-width:3}
.sx-apply-form{min-height:600px;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1)}
.sx-apply-form iframe{display:block;width:100%;border:0;transition:height .5s ease}
.sx-apply-form noscript p{margin:24px;color:var(--ink)}
@media (max-width:1100px){
  .sx-store-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-profiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .sx-bento,.sx-net,.sx-apply{grid-template-columns:minmax(0,1fr)}
  .sx-apply-copy{position:static}
  .sx-net-pin span{display:none}
}
@media (max-width:640px){
  .sx-profiles,.sx-store-4{grid-template-columns:minmax(0,1fr)}
  .sx-bento-card,.sx-net-side{padding:26px 22px}
  .sx-net-map{padding:10px;border-radius:18px}
  .sx-net-pin{width:16px;height:16px;margin:-8px 0 0 -8px}
  .sx-net-bars li{grid-template-columns:96px minmax(0,1fr) 40px}
}

/* ---------- Sobre nosotros ----------
   Manifiesto: el título fijo a la izquierda y las cuatro estrofas a la derecha, con la primera línea de cada una
   en grande. Vitrina: un estante dorado por año con sus premios encima. ADN: Ubuntu y la cita a un lado, las seis
   fichas de valores al otro. */
.sx-mani{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.sx-mani-t{position:sticky;top:40px;margin:0;font:840 clamp(40px,5.2vw,72px)/.98 var(--font-head);font-stretch:120%;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.sx-mani-body{display:grid;gap:clamp(34px,4vw,54px)}
.sx-mani-st{display:grid;gap:6px;margin:0;padding-left:26px;border-left:5px solid var(--gold);color:var(--muted);font-size:clamp(17px,1.35vw,19.5px);line-height:1.5}
.sx-mani-st strong{margin-bottom:6px;color:var(--ink);font:800 clamp(24px,2.5vw,34px)/1.12 var(--font-head);font-stretch:112%;letter-spacing:-.02em}
.sx-trophy{display:grid;gap:10px}
.sx-trophy-row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:end;gap:24px}
.sx-trophy-y{margin:0 0 14px;color:var(--gold);font:860 clamp(30px,3vw,42px)/1 var(--font-head);font-stretch:125%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sx-trophy-row ul{list-style:none;position:relative;display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0 14px 16px}
.sx-trophy-row ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:4px;background:linear-gradient(180deg,#FFC766,#C9831D);box-shadow:0 10px 18px -8px rgba(0,0,0,.6)}
.sx-trophy-row li{display:grid;justify-items:center;gap:6px;width:112px}
.sx-trophy-row img{display:block;width:92px;height:auto;aspect-ratio:207/199;object-fit:contain;padding:8px;border-radius:16px;background:#fff;box-shadow:0 10px 20px -12px rgba(0,0,0,.7)}
.sx-trophy-row span{color:var(--fog);font:600 12px/1.25 var(--font-body);text-align:center}
.sx-values{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-values-side .sx-head{margin-bottom:22px}
.sx-values-txt{margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.sx-values-q{margin:28px 0 0;padding:26px 28px;border-radius:22px;background:var(--ink);color:#fff}
.sx-values-q blockquote{margin:0}
.sx-values-q p{margin:0;color:#fff;font:600 clamp(17px,1.35vw,19px)/1.55 var(--font-body)}
.sx-values-q p::before{content:"“";display:block;margin-bottom:4px;color:var(--gold);font:900 54px/.6 var(--font-head)}
.sx-values-q figcaption{margin-top:14px;color:var(--gold);font:720 15px/1.2 var(--font-body)}
.sx-values-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){
  .sx-mani,.sx-values{grid-template-columns:minmax(0,1fr)}
  .sx-mani-t{position:static}
  .sx-trophy-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .sx-trophy-y{margin:12px 0 0}
}
@media (max-width:640px){
  .sx-values-list{grid-template-columns:minmax(0,1fr)}
  .sx-trophy-row li{width:92px}
  .sx-trophy-row img{width:76px}
}

/* ---------- adaptable ---------- */
@media (max-width:1100px){
  .sx-recipe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .sx-op{display:none}
  .sx-pipe ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .sx-pipe-line{display:none}
  .sx-power-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-tabs-media{grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr)}
  .sx-tabs-media .sx-tabs-fig{display:none}
  .sx-tabs-stages .sx-tabs-fig{display:block}
}
@media (max-width:960px){
  .sx-mode,.sx-mode-1,.sx-mode-2,.sx-mode-3,.sx-mode-4{grid-column:span 12}
  .sx-video,.sx-faq,.sx-arcade,.sx-levels-wrap,.sx-orbit-wrap,.sx-bars-wrap,.sx-split,.sx-session-video{grid-template-columns:minmax(0,1fr)}
  .sx-faq-side,.sx-levels-media{position:static}
  .sx-quotes,.sx-formula,.sx-pillars,.sx-sheet,.sx-store,.sx-claims{grid-template-columns:minmax(0,1fr)}
  .sx-pillars li{border-left:0;border-top:1px solid var(--rule)}
  .sx-pillars li:first-child{border-top:0}
  .sx-formula-rows li{grid-template-columns:minmax(0,1fr)}
  .sx-formula-rows .sx-formula-stat{grid-row:auto;margin-bottom:12px}
  .sx-tf,.sx-pb{grid-template-columns:minmax(0,1fr)}
  .sx-tf-machine{height:84px}
  .sx-tf-machine::before{left:50%;right:auto;top:-20px;bottom:-20px;width:4px;height:auto;transform:translateX(-50%);background:repeating-linear-gradient(180deg,var(--gold) 0 12px,transparent 12px 22px)}
  .sx-pb-arrow{transform:rotate(90deg)}
  .sx-steps{grid-template-columns:minmax(0,1fr)}
  .sx-steps-line{display:none}
  .sx-score{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-score li:nth-child(3){border-left:0}
  .sx-score li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .sx-row{grid-template-columns:minmax(0,1fr)}
  .sx-row-rev figure{order:0}
  .sx-tabs,.sx-tabs-media,.sx-tabs-stages{grid-template-columns:minmax(0,1fr)}
  /* en móvil el botón vuelve debajo del panel */
  .sx-tabs-side{display:contents}
  .sx-tabs-side .sx-btnrow{order:3;margin-top:8px}
  .sx-tablist{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .sx-tablist [role=tab]{flex:none;width:auto;min-height:48px;white-space:nowrap}
  .sx-tabs-stages .sx-tablist::before{display:none}
  .sx-tabs-stages [role=tab]{flex-direction:row;padding:6px 14px 6px 6px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--rule)}
  .sx-tabs-stages .sx-tab-n{width:36px;height:36px;font-size:15px}
  .sx-tabs-fig img{max-height:420px;margin:0 auto}
  .sx-orbit{max-width:420px}
}
@media (max-width:640px){
  .sx-quad,.sx-power,.sx-power-4,.sx-session,.sx-recipe,.sx-pipe ol,.sx-pb-mis ol{grid-template-columns:minmax(0,1fr)}
  .sx-quad:has(> li:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}
  .sx-score{grid-template-columns:minmax(0,1fr)}
  .sx-score li{border-left:0!important;border-top:1px solid rgba(255,255,255,.1)}
  .sx-score li:first-child{border-top:0}
  .sx-prev,.sx-next{display:none!important}
  .sx-shelf-row{grid-auto-columns:72%}
  .sx-cross a{grid-template-columns:88px minmax(0,1fr)}
  .sx-cross img{width:88px;height:70px}
  .sx-node{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:14px;transform:rotate(calc(360deg / var(--n) * var(--i) - 90deg)) translate(38vw) rotate(calc(-360deg / var(--n) * var(--i) + 90deg))}
  .sx-node .sx-ic{width:22px;height:22px}
  .sx-panel{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
  .sx *,.sx *::before,.sx *::after{animation:none!important;transition:none!important}
  .sx .is-armed *{opacity:1!important}
  .sx-bars.is-armed .sx-bar i{transform:scaleX(var(--v))}
}

/* GIF del iPad de AI Role Play: la imagen trae fondo gris claro y sombra "pegados"; se recorta justo por el
   borde del dispositivo (con sus esquinas) y la sombra la pone el CSS, así no se ve ningún marco. */
.sx-ipad{clip-path:inset(.2% 7.3% 0 6.4% round 5.9% / 4.7%)}
figure:has(> .sx-ipad),div:has(> .sx-ipad){filter:drop-shadow(0 30px 40px rgba(11,27,48,.28))}

/* ---------- página de preguntas frecuentes: buscador y temas ---------- */
.sx-fh{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-fh-rail{position:sticky;top:24px;display:grid;gap:18px}
.sx-fh-search{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border:1.5px solid var(--rule);border-radius:999px;background:#fff;cursor:text}
.sx-fh-search:focus-within{border-color:var(--action);box-shadow:0 0 0 4px rgba(0,100,209,.14)}
.sx-fh-search .sx-ic{flex:none;width:20px;height:20px;color:var(--mist)}
.sx-fh-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 16px/1.2 var(--font-body)}
.sx-fh-search input::placeholder{color:var(--muted);opacity:.85}
.sx-fh-chips{display:grid;gap:4px}
.sx-fh-chips button{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:680 15.5px/1.25 var(--font-head);text-align:left;cursor:pointer;transition:background-color .15s}
.sx-fh-chips button b{flex:none;min-width:28px;padding:4px 8px;border-radius:999px;background:var(--paper);color:var(--ink);font:700 12.5px/1 var(--font-body);text-align:center}
.sx-fh-chips button:hover{background:var(--paper)}
.sx-fh-chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.sx-fh-chips button[aria-pressed="true"] b{background:var(--gold);color:var(--ink)}
.sx-fh-chips button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sx-fh-main{display:grid;gap:clamp(44px,5vw,64px);min-width:0}
.sx-fh-g{scroll-margin-top:24px}
.sx-fh-g h2{margin:0 0 20px;font:800 clamp(24px,2.3vw,30px)/1.15 var(--font-head);font-stretch:112%;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sx-fh .faq{margin:0}
.sx-fh .faq details{scroll-margin-top:24px}
.sx-fh .faq .ans a{color:var(--action);text-underline-offset:3px}
.sx-fh [hidden]{display:none}
.sx-fh-empty{margin:0;padding:24px 26px;border-radius:18px;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.5}
.sx-fh-empty a{color:var(--action);font-weight:700}
.sx-fh-outro{padding:clamp(28px,3.5vw,44px);border-radius:24px;background:var(--paper)}
.sx-fh-outro h2{margin:0 0 14px;font:800 clamp(22px,2.1vw,28px)/1.15 var(--font-head);font-stretch:112%;letter-spacing:-.02em;color:var(--ink)}
.sx-fh-outro p{margin:0 0 12px;color:#475464;font-size:16.5px;line-height:1.6}
.sx-fh-outro p:last-child{margin:0}
@media (max-width:900px){
  .sx-quotes-2{grid-template-columns:minmax(0,1fr)}
  .sx-fh{grid-template-columns:minmax(0,1fr);gap:32px}
  .sx-fh-rail{position:static}
  .sx-fh-chips{display:flex;gap:8px;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
  .sx-fh-chips::-webkit-scrollbar{display:none}
  .sx-fh-chips button{flex:none;padding:9px 12px 9px 16px;border:1.5px solid var(--rule);border-radius:999px;font-size:15px}
  .sx-fh-chips button[aria-pressed="true"]{border-color:var(--ink)}
}