(el JS crea los ladrillos) */
.sx-progress { display: grid; grid-template-columns: repeat(var(--n, 12), 1fr); gap: 3px; height: 0.875rem; }
.sx-progress i { background: var(--sx-border); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); transition: background-color var(--sx-dur-base) var(--sx-ease-out), transform var(--sx-dur-slow) var(--sx-ease-spring); transition-delay: calc(var(--i) * 35ms); }
.sx-progress i.is-on { background: var(--sx-primary); transform: translateY(-1px); }
.sx-progress i.is-on:last-of-type { background: var(--sx-jungle); }
/* Indicador "escribiendo" */
.sx-typing { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.sx-typing i { width: 0.5em; height: 0.5em; background: currentColor; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); animation: sx-typing 1.1s var(--sx-ease-in-out) infinite; }
.sx-typing i:nth-child(2) { animation-delay: 0.14s; } .sx-typing i:nth-child(3) { animation-delay: 0.28s; }
@keyframes sx-typing { 0%, 60%, 100% { transform: none; opacity: 0.35; } 30% { transform: translateY(-45%); opacity: 1; } }
/* Barra de avance de lectura (sólo CSS, progresivo) */
.sx-scrollprogress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--sx-z-toast); background: var(--sx-sky); transform-origin: left; transform: scaleX(0); animation: sx-scrollprogress linear both; animation-timeline: scroll(root); }
@keyframes sx-scrollprogress { to { transform: scaleX(1); } }
@supports not (animation-timeline: scroll()) { .sx-scrollprogress { display: none; } }
/* Luz que sigue al cursor en secciones oscuras (padre con data-sx-spotlight) */
.sx-glowspot { position: absolute; left: 0; top: 0; width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%; pointer-events: none; z-index: 0;
background: var(--sx-sky); opacity: 0.22; filter: blur(110px); transform: translate(var(--mx, 70vw), var(--my, 20vh)); transition: transform 600ms var(--sx-ease-out); }
/* Ladrillos vivos:
— el JS dibuja la trama y enciende ladrillos */
.sx-bricks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sx-bricks svg { width: 100%; height: 100%; }
.sx-bricks path { fill: var(--tone, var(--sx-sky)); fill-opacity: 0; stroke: var(--sx-pattern-ink); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill-opacity 1100ms var(--sx-ease-out); }
.sx-bricks path.is-on { fill-opacity: var(--on, 0.55); transition-duration: 380ms; }
.sx-bricks--fade { -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%); mask-image: linear-gradient(100deg, transparent 20%, #000 75%); }
/* Transición de página con barrido diagonal: */
[data-sx-vt="wipe"]::view-transition-old(root) { animation: none; }
[data-sx-vt="wipe"]::view-transition-new(root) { animation: sx-vt-wipe 800ms var(--sx-ease-in-out) both; }
@keyframes sx-vt-wipe { from { clip-path: polygon(-10% -10%, -10% -10%, -10% -10%); } to { clip-path: polygon(-10% -10%, 240% -10%, -10% 240%); } }
/* ---- 20. Movimiento reducido --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
.sx-js [data-sx-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; }
.sx-stream__w { opacity: 1; filter: none; transform: none; }
[data-sx-tilt] { transform: none; }
.sx-split__w > span { transform: none; }
.sx-marquee__track { animation: none; }
.sx-glowspot { display: none; }
.sx-signo--build path, .sx-signo--scan path, .sx-signo--loading path { animation: none !important; }
}
*/
.sx-logo { position: relative; display: inline-block; height: var(--h, 2rem); aspect-ratio: 318.33 / 64.71; flex: none; }
.sx-logo > img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 17.5%); }
.sx-logo .sx-signo { position: absolute; left: 0; top: 0; width: 16.973%; margin: 0; }
.sx-logo--reveal > img { animation: sx-word-reveal 900ms var(--sx-ease-out) 520ms both; }
@keyframes sx-word-reveal { from { clip-path: inset(0 82.5% 0 17.5%); transform: translateX(-5%); opacity: 0; } }
/* ---- 19b. Más transiciones ------------------------------------------------ */
/* Variantes de reveal */
.sx-js [data-sx-reveal="left"] { transform: translateX(-28px); }
.sx-js [data-sx-reveal="right"] { transform: translateX(28px); }
.sx-js [data-sx-reveal="scale"] { transform: scale(0.94); }
.sx-js [data-sx-reveal="blur"] { transform: none; filter: blur(14px); }
.sx-js :is([data-sx-reveal="left"], [data-sx-reveal="right"], [data-sx-reveal="scale"], [data-sx-reveal="blur"]).is-in { transform: none; filter: none; }
/* Título que sube palabra por palabra desde un recorte (data-sx-split) */
.sx-split__w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sx-split__w > span { display: inline-block; transform: translateY(115%); transition: transform 900ms var(--sx-ease-out); transition-delay: calc(var(--i) * 55ms); }
.is-in > .sx-split__w > span, .sx-split__w.is-in > span { transform: none; }
/* Cambio de ícono: */
.sx-iconswap { display: inline-grid; place-items: center; }
.sx-iconswap > .sx-icon { grid-area: 1 / 1; transition: transform var(--sx-dur-slow) var(--sx-ease-spring), opacity var(--sx-dur-fast), filter var(--sx-dur-fast); }
.sx-iconswap > .sx-icon:last-child { opacity: 0; transform: scale(0.3) rotate(-40deg); filter: blur(3px); }
.sx-iconswap:is([aria-pressed="true"], .is-on) > .sx-icon:first-child { opacity: 0; transform: scale(0.3) rotate(40deg); filter: blur(3px); }
.sx-iconswap:is([aria-pressed="true"], .is-on) > .sx-icon:last-child { opacity: 1; transform: none; filter: none; }
/* Panel lateral: