/* =================================================================
   Visuales pixel de servicio
   [sozpic_animation type="pixel" variant="…"] · template-parts/pixel/

   Escenas del vídeo de servicios, animadas solo con CSS. Reglas:
   - Los estilos base son el ESTADO FINAL. Los keyframes animan desde el
     estado inicial, así que sin animación siempre se ve la composición.
   - Todo el movimiento va dentro de prefers-reduced-motion: no-preference.
   - Una sola pasada: todo termina antes de 4,8 s (WCAG 2.2.2, sin bucles).
   - Dentro del SVG las longitudes van en px, que equivalen a unidades del
     viewBox y escalan con él (la excepción a la regla de rem).
   - Nombres de keyframes literales, nunca a través de var(): RUCSS.
   - Los tiempos por elemento (--i, --c, --r, --t, --dx…) llegan en el
     style del marcado; los calcula cada parcial.
   ================================================================= */

.szp-pixel {
  --pixel-ink: #0a0a0a;
  --pixel-paper: #ffffff;
  --pixel-mist: #d9d9d9;
  --pixel-cloud: #ededed;
  --pixel-azure: var(--color-accent, #0077ff);
  --pixel-muted: #5b6166;
  --pixel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pixel-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
  max-width: 34rem;
}

.szp-pixel__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* -----------------------------------------------------------------
   Piezas compartidas
   ----------------------------------------------------------------- */

/* Retícula de puntos: guiones de largo cero con remate cuadrado */
.szp-pixel__grid {
  fill: none;
  stroke: var(--pixel-mist);
  stroke-width: 1.5px;
  stroke-linecap: square;
  stroke-dasharray: 0 20;
}

/* Etiquetas en mono */
.szp-pixel__label {
  font-family: var(--font-subheading, 'DM Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--pixel-muted);
}

/* Líneas que se trazan (pathLength="1" en el marcado):
   negras para conectores, ejes y marcos; azules para rutas y tendencias */
.szp-pixel__wire,
.szp-pixel__route {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.szp-pixel__wire {
  stroke: var(--pixel-ink);
  stroke-width: 1px;
}

.szp-pixel__route {
  stroke: var(--pixel-azure);
  stroke-width: 2px;
}

/* -----------------------------------------------------------------
   01 · Consultoría: escaneo → oportunidades en azul → hoja de ruta
   ----------------------------------------------------------------- */

.szp-pixel--consultoria {
  --pixel-scan-start: 1s;
  --pixel-scan-dur: 2s;
}

.szp-pixel__cell {
  fill: var(--pixel-cloud);
  stroke: transparent;
  stroke-width: 1px;
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__cell--hit {
  fill: var(--pixel-azure);
}

.szp-pixel__scan {
  opacity: 0;
}

.szp-pixel__scan-band {
  fill: var(--pixel-azure);
  fill-opacity: 0.1;
}

.szp-pixel__scan-line {
  fill: none;
  stroke: var(--pixel-azure);
  stroke-width: 1.5px;
}

@media (prefers-reduced-motion: no-preference) {
  /* La celda cambia cuando la línea del escáner pasa por su centro:
     el escáner va de x=4 a x=396 y el centro de la columna c está en 64c + 40. */
  .szp-pixel--consultoria .szp-pixel__cell {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-scan-fill 0.18s linear both;
    animation-delay:
      calc(0.4s + (var(--c) + var(--r)) * 0.03s),
      calc(var(--pixel-scan-start) + (var(--c) * 64 + 36) / 392 * var(--pixel-scan-dur));
  }

  .szp-pixel--consultoria .szp-pixel__cell--hit {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-scan-fill 0.18s linear both,
      szp-pixel-bump 0.45s var(--pixel-ease);
    animation-delay:
      calc(0.4s + (var(--c) + var(--r)) * 0.03s),
      calc(var(--pixel-scan-start) + (var(--c) * 64 + 36) / 392 * var(--pixel-scan-dur)),
      calc(var(--pixel-scan-start) + (var(--c) * 64 + 36) / 392 * var(--pixel-scan-dur));
  }

  .szp-pixel--consultoria .szp-pixel__scan {
    animation: szp-pixel-scan 2s linear both;
    animation-delay: var(--pixel-scan-start);
  }

  .szp-pixel--consultoria .szp-pixel__route {
    animation: szp-pixel-draw 0.8s var(--pixel-ease) both;
    animation-delay: 3.2s;
  }
}

/* -----------------------------------------------------------------
   02 · Agentes: entrada → agente → ERP · CRM
   ----------------------------------------------------------------- */

.szp-pixel__node {
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__node--input {
  fill: var(--pixel-paper);
  stroke: var(--pixel-ink);
  stroke-width: 1.5px;
}

.szp-pixel__node--agent {
  fill: var(--pixel-azure);
}

.szp-pixel__node--system {
  fill: var(--pixel-ink);
}

.szp-pixel__packet {
  fill: var(--pixel-ink);
}

.szp-pixel__packet--out {
  fill: var(--pixel-azure);
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--agentes .szp-pixel__node {
    animation: szp-pixel-pop-in 0.4s var(--pixel-pop) backwards;
    animation-delay: calc(0.4s + var(--i) * 0.1s);
  }

  /* Late dos veces: cuando le llegan el primer y el segundo paquete */
  .szp-pixel--agentes .szp-pixel__node--agent {
    animation:
      szp-pixel-pop-in 0.4s var(--pixel-pop) backwards,
      szp-pixel-pulse-twice 0.9s ease-in-out;
    animation-delay: calc(0.4s + var(--i) * 0.1s), 1.65s;
  }

  .szp-pixel--agentes .szp-pixel__wire {
    animation: szp-pixel-draw 0.4s var(--pixel-ease) both;
    animation-delay: calc(0.7s + var(--i) * 0.15s);
  }

  .szp-pixel--agentes .szp-pixel__packet {
    animation: szp-pixel-slide 0.7s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-duration: var(--d);
    animation-delay: calc(1.2s + var(--i) * 0.6s);
  }

  /* Cada paquete azul sale en cuanto el agente ha recibido el negro */
  .szp-pixel--agentes .szp-pixel__packet--out {
    animation-delay: calc(1.85s + var(--i) * 0.6s);
  }

  .szp-pixel--agentes .szp-pixel__label {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: calc(0.8s + var(--i) * 0.1s);
  }
}

/* -----------------------------------------------------------------
   03 · IA generativa: tus datos → documento que se escribe solo
   ----------------------------------------------------------------- */

.szp-pixel__block,
.szp-pixel__heading {
  fill: var(--pixel-ink);
}

.szp-pixel__heading,
.szp-pixel__text-line {
  transform-box: fill-box;
  transform-origin: 0 50%;
}

.szp-pixel__text-line {
  fill: var(--pixel-mist);
}

.szp-pixel__cursor {
  fill: var(--pixel-azure);
  opacity: 0;
}

.szp-pixel__packet--feed {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--generativa .szp-pixel__block {
    animation: szp-pixel-stack 0.5s var(--pixel-ease) both;
    animation-delay: calc(0.4s + var(--i) * 0.08s);
  }

  .szp-pixel--generativa .szp-pixel__wire--frame {
    animation: szp-pixel-draw 0.6s var(--pixel-ease) both;
    animation-delay: 0.5s;
  }

  .szp-pixel--generativa .szp-pixel__wire--feed {
    animation: szp-pixel-draw 0.25s linear both;
    animation-delay: 0.8s;
  }

  .szp-pixel--generativa .szp-pixel__packet--feed {
    animation: szp-pixel-feed 0.5s linear both;
    animation-delay: calc(1s + var(--i) * 0.55s);
  }

  .szp-pixel--generativa .szp-pixel__heading {
    animation: szp-pixel-grow-x 0.3s linear both;
    animation-delay: 1.1s;
  }

  .szp-pixel--generativa .szp-pixel__text-line {
    animation: szp-pixel-grow-x 0.26s linear both;
    animation-delay: calc(1.45s + var(--i) * 0.3s);
  }

  /* El cursor avanza con su línea y desaparece; el último parpadea dos veces */
  .szp-pixel--generativa .szp-pixel__cursor {
    animation: szp-pixel-type 0.26s linear both;
    animation-delay: calc(1.45s + var(--i) * 0.3s);
  }

  .szp-pixel--generativa .szp-pixel__cursor--heading {
    animation: szp-pixel-type 0.3s linear both;
    animation-delay: 1.1s;
  }

  .szp-pixel--generativa .szp-pixel__cursor--last {
    animation: szp-pixel-type-last 1.16s linear both;
    animation-delay: calc(1.45s + var(--i) * 0.3s);
  }

  .szp-pixel--generativa .szp-pixel__label {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: 0.7s;
  }
}

/* -----------------------------------------------------------------
   04 · Modelos: la nube converge en la curva de aprendizaje
   ----------------------------------------------------------------- */

.szp-pixel__point {
  fill: var(--pixel-azure);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--modelos .szp-pixel__wire--axes {
    animation: szp-pixel-draw 0.5s var(--pixel-ease) both;
    animation-delay: 0.3s;
  }

  .szp-pixel--modelos .szp-pixel__point {
    animation:
      szp-pixel-converge 2s linear both,
      szp-pixel-to-azure 0.2s linear both;
    animation-delay:
      calc(0.5s + var(--i) * 0.02s),
      calc(2.8s + var(--i) * 0.025s);
  }

  .szp-pixel--modelos .szp-pixel__route {
    animation: szp-pixel-draw 0.9s var(--pixel-ease) both;
    animation-delay: 3.2s;
  }

  .szp-pixel--modelos .szp-pixel__label {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: 0.5s;
  }
}

/* -----------------------------------------------------------------
   05 · SAP Business One: el proceso recorre todos los módulos
   ----------------------------------------------------------------- */

.szp-pixel__module {
  fill: var(--pixel-ink);
  stroke: transparent;
  stroke-width: 1px;
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__walker-block {
  fill: var(--pixel-azure);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--sap .szp-pixel__module {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-scan-fill 0.15s linear both;
    animation-delay: calc(0.4s + var(--i) * 0.03s), var(--t);
  }

  /* Ruta y cursor van a la misma velocidad: la línea llega justo debajo del cursor */
  .szp-pixel--sap .szp-pixel__route--walk {
    animation: szp-pixel-draw 2.8s linear both;
    animation-delay: 1.1s;
  }

  .szp-pixel--sap .szp-pixel__walker {
    animation: szp-pixel-walk 2.8s linear both;
    animation-delay: 1.1s;
  }

  .szp-pixel--sap .szp-pixel__walker-block {
    animation: szp-pixel-pop-in 0.25s var(--pixel-pop) backwards;
    animation-delay: 0.95s;
  }

  .szp-pixel--sap .szp-pixel__label {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: 0.8s;
  }
}

/* -----------------------------------------------------------------
   06 · Business analytics: barras → tendencia → predicción
   ----------------------------------------------------------------- */

.szp-pixel__bar-rise,
.szp-pixel__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.szp-pixel__bar {
  fill: var(--pixel-ink);
}

.szp-pixel__bar--up,
.szp-pixel__marker {
  fill: var(--pixel-azure);
}

.szp-pixel__marker {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--analytics .szp-pixel__wire--base {
    animation: szp-pixel-draw 0.4s var(--pixel-ease) both;
    animation-delay: 0.3s;
  }

  /* Primera subida escalonada (el grupo) y segunda, casi a la vez (la barra) */
  .szp-pixel--analytics .szp-pixel__bar-rise {
    animation: szp-pixel-rise 0.4s var(--pixel-ease) backwards;
    animation-delay: calc(0.5s + var(--i) * 0.1s);
  }

  .szp-pixel--analytics .szp-pixel__bar {
    animation: szp-pixel-regrow 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
    animation-delay: calc(1.8s + var(--i) * 0.03s);
  }

  .szp-pixel--analytics .szp-pixel__route {
    animation: szp-pixel-draw 1s var(--pixel-ease) both;
    animation-delay: 2.5s;
  }

  .szp-pixel--analytics .szp-pixel__marker {
    animation: szp-pixel-pop-in 0.3s var(--pixel-pop) backwards;
    animation-delay: 3.45s;
  }

  .szp-pixel--analytics .szp-pixel__label {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: 0.5s;
  }
}

/* -----------------------------------------------------------------
   07 · Formación: el cuadrado azul sube la escalera
   ----------------------------------------------------------------- */

.szp-pixel__step {
  fill: var(--pixel-ink);
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__climber-block {
  fill: var(--pixel-azure);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel--formacion .szp-pixel__wire--base {
    animation: szp-pixel-draw 0.4s var(--pixel-ease) both;
    animation-delay: 0.3s;
  }

  .szp-pixel--formacion .szp-pixel__step {
    animation:
      szp-pixel-drop 0.35s var(--pixel-ease) backwards,
      szp-pixel-to-ink 0.15s linear both;
    animation-delay: calc(0.4s + var(--c) * 0.06s + var(--r) * 0.03s), var(--t);
  }

  .szp-pixel--formacion .szp-pixel__climber {
    animation: szp-pixel-climb 2.42s linear both;
    animation-delay: 1.3s;
  }

  .szp-pixel--formacion .szp-pixel__climber-block {
    animation: szp-pixel-pop-in 0.25s var(--pixel-pop) backwards;
    animation-delay: 1s;
  }
}

/* -----------------------------------------------------------------
   Utilidades (escenas de marketing, desarrollo y barrido)
   Cada elemento lleva en su style el retardo (--d) y, si combina
   animaciones, los demás (--t relleno, --b latido). --dur cambia la
   duración de las que van solas.
   ----------------------------------------------------------------- */

.szp-pixel__tile {
  stroke: transparent;
  stroke-width: 1.5px;
}

.szp-pixel__tile--ink { fill: var(--pixel-ink); }
.szp-pixel__tile--paper { fill: var(--pixel-paper); }
.szp-pixel__tile--mist { fill: var(--pixel-mist); }
.szp-pixel__tile--cloud { fill: var(--pixel-cloud); }
.szp-pixel__tile--azure { fill: var(--pixel-azure); }

.szp-pixel__wire--strong { stroke-width: 1.5px; }
.szp-pixel__route--thin { stroke-width: 1.5px; }

.szp-pixel__fx--pop,
.szp-pixel__fx--bump,
.szp-pixel__fx--drop {
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__fx--grow-x {
  transform-box: fill-box;
  transform-origin: 0 50%;
}

.szp-pixel__fx--grow-y {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Estos acaban ocultos: su estado final es no estar */
.szp-pixel__fx--send,
.szp-pixel__fx--feed,
.szp-pixel__fx--caret,
.szp-pixel__loadbar,
.szp-pixel__notify {
  opacity: 0;
}

.szp-pixel__caret,
.szp-pixel__loadbar {
  fill: var(--pixel-azure);
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel__fx--pop {
    animation: szp-pixel-pop-in 0.35s var(--pixel-pop) backwards;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--drop {
    animation: szp-pixel-drop 0.35s var(--pixel-ease) backwards;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--grow-x {
    animation: szp-pixel-grow-x 0.3s linear both;
    animation-duration: var(--dur, 0.3s);
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--grow-y {
    animation: szp-pixel-rise 0.4s var(--pixel-ease) backwards;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--draw {
    animation: szp-pixel-draw 0.4s var(--pixel-ease) both;
    animation-duration: var(--dur, 0.4s);
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--fade {
    animation: szp-pixel-fade-up 0.35s var(--pixel-ease) both;
    animation-delay: var(--d, 0s);
  }

  /* Aparece al arrancar y llega desde --dx/--dy */
  .szp-pixel__fx--slide {
    animation: szp-pixel-slide 0.5s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-duration: var(--dur, 0.5s);
    animation-delay: var(--d, 0s);
  }

  /* Visible desde el principio: espera en --dx/--dy y luego se mueve */
  .szp-pixel__fx--move {
    animation: szp-pixel-move 0.4s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-duration: var(--dur, 0.4s);
    animation-delay: var(--d, 0s);
  }

  /* Viaja hasta --dx y se desvanece al llegar */
  .szp-pixel__fx--send {
    animation: szp-pixel-send 0.4s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-delay: var(--d, 0s);
  }

  /* Viene desde --dx y se desvanece al llegar */
  .szp-pixel__fx--feed {
    animation: szp-pixel-feed 0.4s linear both;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--fill {
    animation: szp-pixel-scan-fill 0.18s linear both;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--azure-in {
    animation: szp-pixel-azure-in 0.2s linear both;
    animation-delay: var(--t, 0s);
  }

  .szp-pixel__fx--caret {
    animation: szp-pixel-type-last 1.16s linear both;
    animation-delay: var(--d, 0s);
  }

  .szp-pixel__fx--pop.szp-pixel__fx--fill {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-scan-fill 0.18s linear both;
    animation-delay: var(--d, 0s), var(--t, 0s);
  }

  .szp-pixel__fx--pop.szp-pixel__fx--bump {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-bump 0.4s var(--pixel-ease);
    animation-delay: var(--d, 0s), var(--b, 0s);
  }

  .szp-pixel__fx--pop.szp-pixel__fx--fill.szp-pixel__fx--bump {
    animation:
      szp-pixel-pop-in 0.35s var(--pixel-pop) backwards,
      szp-pixel-scan-fill 0.18s linear both,
      szp-pixel-bump 0.4s var(--pixel-ease);
    animation-delay: var(--d, 0s), var(--t, 0s), var(--b, 0s);
  }
}

/* SEO: tu resultado adelanta tres puestos (1,9 s, 2,4 s y 2,9 s) */
@media (prefers-reduced-motion: no-preference) {
  .szp-pixel__seo-climb {
    animation: szp-pixel-seo-climb 1.35s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-delay: 1.9s;
  }
}

/* CRM: recorrido de cada ficha, todas entre 1,2 s y 3,35 s */
@media (prefers-reduced-motion: no-preference) {
  .szp-pixel__crm-card {
    animation: 2.15s cubic-bezier(0.45, 0, 0.55, 1) 1.2s both;
  }

  .szp-pixel__crm-card--c1 { animation-name: szp-pixel-crm-c1; }
  .szp-pixel__crm-card--c2 { animation-name: szp-pixel-crm-c2; }
  .szp-pixel__crm-card--c3 { animation-name: szp-pixel-crm-c3; }
  .szp-pixel__crm-card--c4 { animation-name: szp-pixel-crm-c4; }
  .szp-pixel__crm-card--n1 { animation-name: szp-pixel-crm-n1; }
  .szp-pixel__crm-card--n2 { animation-name: szp-pixel-crm-n2; }
}

/* Web y CRO: la barra de carga se llena y se va */
@media (prefers-reduced-motion: no-preference) {
  .szp-pixel__loadbar {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: szp-pixel-load 0.7s ease-out both;
    animation-delay: 1s;
  }
}

/* Apps: tu app cae en su hueco, avisa y se abre desde el icono */
.szp-pixel__app-drop {
  transform-box: fill-box;
  transform-origin: center;
}

.szp-pixel__app-screen {
  transform-box: view-box;
  transform-origin: 214px 102px;
}

@media (prefers-reduced-motion: no-preference) {
  .szp-pixel__app-drop {
    animation: szp-pixel-app-drop 0.5s var(--pixel-ease) both;
    animation-delay: 1.5s;
  }

  .szp-pixel__notify {
    animation: szp-pixel-notify 1s var(--pixel-ease) both;
    animation-delay: 2.05s;
  }

  .szp-pixel__app-screen {
    animation: szp-pixel-open 0.4s var(--pixel-ease) both;
    animation-delay: 2.7s;
  }
}

/* -----------------------------------------------------------------
   Tema oscuro (theme="dark"): para fondos negros o #222
   ----------------------------------------------------------------- */

.szp-pixel--dark {
  --pixel-ink: #ffffff;
  --pixel-paper: transparent;
  --pixel-mist: rgba(255, 255, 255, 0.18);
  --pixel-cloud: rgba(255, 255, 255, 0.08);
  --pixel-muted: #9aa0a6;
}

/* El barrido rellena el contenedor del banner, sea cual sea su forma */
.szp-pixel--barrido {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.szp-pixel--barrido .szp-pixel__svg {
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------
   Keyframes
   ----------------------------------------------------------------- */

@keyframes szp-pixel-pop-in {
  from { transform: scale(0); }
}

@keyframes szp-pixel-bump {
  40% { transform: scale(1.22); }
}

@keyframes szp-pixel-pulse-twice {
  17%,
  83% { transform: scale(1.06); }
  34%,
  66% { transform: scale(1); }
}

@keyframes szp-pixel-draw {
  from { stroke-dashoffset: 1; }
}

@keyframes szp-pixel-fade-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes szp-pixel-scan-fill {
  from {
    fill: var(--pixel-paper);
    stroke: var(--pixel-ink);
  }
}

@keyframes szp-pixel-scan {
  0% {
    opacity: 0;
    transform: translateX(4px);
  }
  6%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(396px);
  }
}

/* Invisibles hasta que arrancan: antes, el nodo que los tapa aún no ha aparecido */
@keyframes szp-pixel-slide {
  0% {
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, 0px));
  }
  1% { opacity: 1; }
}

@keyframes szp-pixel-stack {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
    fill: var(--pixel-muted);
  }
}

@keyframes szp-pixel-feed {
  0% {
    opacity: 0;
    transform: translateX(var(--dx));
  }
  1%,
  80% { opacity: 1; }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes szp-pixel-grow-x {
  from { transform: scaleX(0); }
}

/* El cursor está dibujado al final de su línea y viaja desde su principio (-w) */
@keyframes szp-pixel-type {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--w) * -1));
  }
  1% {
    opacity: 1;
    transform: translateX(calc(var(--w) * -1));
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes szp-pixel-type-last {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--w) * -1));
  }
  1% {
    opacity: 1;
    transform: translateX(calc(var(--w) * -1));
  }
  22% {
    opacity: 1;
    transform: none;
  }
  44% { opacity: 1; }
  45%,
  60% { opacity: 0; }
  61%,
  82% { opacity: 1; }
  83%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Aparece en la nube (0–17,5 %), espera y viaja a su sitio en la curva (30–100 %) */
@keyframes szp-pixel-converge {
  0% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  17.5% { transform: translate(var(--dx), var(--dy)) scale(1); }
  30% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes szp-pixel-to-azure {
  from { fill: var(--pixel-ink); }
}

@keyframes szp-pixel-to-ink {
  from { fill: var(--pixel-mist); }
}

/* Serpentina de 936: esquinas a 264, 336, 600 y 672 del recorrido */
@keyframes szp-pixel-walk {
  0% { transform: translate(-264px, -144px); }
  28.205% { transform: translate(0, -144px); }
  35.897% { transform: translate(0, -72px); }
  64.103% { transform: translate(-264px, -72px); }
  71.795% { transform: translate(-264px, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes szp-pixel-rise {
  from { transform: scaleY(0); }
}

@keyframes szp-pixel-regrow {
  from { transform: scaleY(var(--h1)); }
}

@keyframes szp-pixel-drop {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
}

/* Seis saltos de 0,32 s con 0,1 s de pausa: sube frenando, baja acelerando */
@keyframes szp-pixel-climb {
  0% {
    transform: translate(-276px, 270px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  6.61% {
    transform: translate(-253px, 210px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  13.22%,
  17.36% {
    transform: translate(-230px, 230px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  23.97% {
    transform: translate(-207px, 164px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  30.58%,
  34.71% {
    transform: translate(-184px, 184px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  41.32% {
    transform: translate(-161px, 118px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  47.93%,
  52.07% {
    transform: translate(-138px, 138px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  58.68% {
    transform: translate(-115px, 72px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  65.29%,
  69.42% {
    transform: translate(-92px, 92px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  76.03% {
    transform: translate(-69px, 26px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  82.64%,
  86.78% {
    transform: translate(-46px, 46px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  93.39% {
    transform: translate(-23px, -20px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  100% { transform: translate(0, 0); }
}

/* --- Keyframes de las utilidades y de las escenas de marketing y desarrollo --- */

@keyframes szp-pixel-move {
  from { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}

@keyframes szp-pixel-send {
  0% {
    opacity: 0;
    transform: none;
  }
  5% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(var(--dx));
  }
}

@keyframes szp-pixel-azure-in {
  from { fill: var(--pixel-mist); }
}

@keyframes szp-pixel-seo-climb {
  0% { transform: translateY(132px); }
  25.93%,
  37.04% { transform: translateY(88px); }
  62.96%,
  74.07% { transform: translateY(44px); }
  100% { transform: none; }
}

/* CRM, ventana de 1,2 s a 3,35 s: 1,55 = 16,28 % · 1,7 = 23,26 % · 2,05 = 39,53 % ·
   2,2 = 46,51 % · 2,55 = 62,79 % · 2,7 = 69,77 % · 3 = 83,72 % · 3,05 = 86,05 % */
@keyframes szp-pixel-crm-c1 {
  0% { transform: translate(-240px, 0); }
  16.28%,
  23.26% { transform: translate(-120px, 0); }
  39.53%,
  100% { transform: none; }
}

@keyframes szp-pixel-crm-c2 {
  0%,
  23.26% { transform: translate(-240px, 0); }
  39.53%,
  46.51% { transform: translate(-120px, -34px); }
  62.79%,
  100% { transform: none; }
}

@keyframes szp-pixel-crm-c3 {
  0%,
  46.51% { transform: translate(-120px, 68px); }
  62.79%,
  100% { transform: none; }
}

@keyframes szp-pixel-crm-c4 {
  0%,
  46.51% { transform: translate(0, 102px); }
  62.79%,
  100% { transform: none; }
}

@keyframes szp-pixel-crm-n1 {
  0%,
  69.77% {
    opacity: 0;
    transform: translate(-150px, 0);
  }
  86.05%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes szp-pixel-crm-n2 {
  0%,
  83.72% {
    opacity: 0;
    transform: translate(-150px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes szp-pixel-load {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  65% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes szp-pixel-app-drop {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  60% {
    opacity: 1;
    transform: translateY(4px);
  }
  100% { transform: none; }
}

@keyframes szp-pixel-notify {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% { opacity: 0; }
}

@keyframes szp-pixel-open {
  0% {
    opacity: 0;
    transform: scale(0.17);
  }
  30% { opacity: 1; }
  100% {
    opacity: 1;
    transform: none;
  }
}