/* Copiado de wsc-marca/src/estilos/base/movimiento.css (4f300a7 2026-10-14) por web/traer-sistema.py. No se edita aquí: se cambia en el sistema y se vuelve a traer. */
/* Copiado de wsc-sistema/css/movimiento.css (02/10/2026). Sin las l. 8–42 (tiempos, curvas y distancias: en valores.css bloque 9).
   Los valores (color, letra, espacio, forma, movimiento) están en ../valores.css: aquí solo hay reglas
   que usan sus nombres. Si cambias algo aquí, cambia la cara de todas las páginas. */
/* ==========================================================================
   WSC · Movimiento
   Dos registros: respuesta (lo que reacciona a la persona) y relato (lo que
   se cuenta una vez). Siete tiempos, cinco curvas, recetas con nombre.
   Tres llaves: html[data-mov] (lo pone el JS) + prefers-reduced-motion:
   no-preference + la clase de la receta. Sin JS, nada se oculta.
   ========================================================================== */

/* ---- Recetas de relato (solo con las tres llaves) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* LLEGAR: fundido + 12 px, una vez */
  html[data-mov] .llega {
    animation:
      m-aparecer var(--m-t5) var(--m-suave) both,
      m-subir var(--m-t6) var(--m-sale) both;
    animation-delay: min(calc(var(--i, 0) * var(--m-paso)), var(--m-paso-max));
  }
  html[data-mov] .lista .llega { animation-delay: min(calc(var(--i, 0) * var(--m-paso-fino)), var(--m-paso-max)); }

  /* LUZ del botón principal: dos vueltas al aparecer (.luz, una vez, cuando el botón
     entra en la ventana) y una al pasar el puntero; después se apaga. Nunca en bucle.
     La curva va cocida en los fotogramas (--m-traza): entre ellos, lineal. Al pasar
     el puntero, la vuelta se suma a la de aparecer sin reiniciarla. */
  html[data-mov] :is(.boton--primario, .boton--luz).luz::after {
    animation: m-luz calc(2 * var(--m-t7)) linear backwards;
  }
  @media (hover: hover) {
    html[data-mov] :is(.boton--primario, .boton--luz):hover::after {
      animation: m-luz-encima var(--m-t6) linear backwards;
    }
    html[data-mov] :is(.boton--primario, .boton--luz).luz:hover::after {
      animation: m-luz calc(2 * var(--m-t7)) linear backwards, m-luz-encima var(--m-t6) linear backwards;
    }
  }

  /* DESLIZAR: titular que entra en horizontal, ≤ 24 px */
  html[data-mov] .desliza {
    animation:
      m-aparecer var(--m-t5) var(--m-suave) both,
      m-deslizar var(--m-t6) var(--m-sale) both;
    animation-delay: min(calc(var(--i, 0) * var(--m-paso)), var(--m-paso-max));
  }

  /* TRAZAR: la línea se dibuja una vez (path con pathLength="1") */
  html[data-mov] .traza :is(path, line, polyline, rect, circle) {
    stroke-dasharray: 1;
    animation: m-trazar var(--m-t7) var(--m-traza) both;
    animation-delay: min(calc(var(--i, 0) * var(--m-paso)), var(--m-paso-max));
  }

  /* FILETE de la IA: se traza una vez al abrir la nota (la clase la pone el JS) */
  html[data-mov] .nota-ia.traza-filete::before { animation: m-filete var(--m-t7) var(--m-traza) both; }

  /* CRECER: barras que se revelan desde su base con clip-path */
  html[data-mov] .crece {
    animation: m-crecer var(--m-t6) var(--m-sale) both;
    animation-delay: min(calc(var(--i, 0) * var(--m-paso-fino)), var(--m-paso-max));
  }
  html[data-mov] .crece-x {
    animation: m-crecer-x var(--m-t6) var(--m-sale) both;
    animation-delay: min(calc(var(--i, 0) * var(--m-paso-fino)), var(--m-paso-max));
  }
}

@keyframes m-aparecer { from { opacity: 0; } to { opacity: 1; } }
/* LUZ del botón principal. Sale del ángulo de arriba a la izquierda, recorre el borde
   en el sentido de las agujas del reloj y vuelve a él ya apagada. La cola mide el 28 %
   del borde. Un giro constante del degradado cónico no corre igual por el borde de un
   rectángulo (se arrastra a mitad del lado largo y vuela en las esquinas): estos
   fotogramas dan a cada ángulo su momento para que la cabeza recorra el perímetro
   siguiendo la curva --m-traza (arranca despacio, recorre y frena) en un botón de
   proporción 3,2 : 1 (M, dos o tres palabras); entre 2,4 y 4,6 la velocidad se
   mantiene por tramos entre 0,5 y 1,9 veces la de la curva. Error de interpolación < 1 px. */
@keyframes m-luz {
  0% { --luz-giro: 206.4deg; --luz-cola: 81.0deg; opacity: 0; }
  4.7% { --luz-giro: 218.7deg; --luz-cola: 70.3deg; }
  6% { --luz-giro: 223.2deg; --luz-cola: 66.8deg; opacity: 1; }
  9.27% { --luz-giro: 234.5deg; --luz-cola: 59.1deg; }
  11.8% { --luz-giro: 242.2deg; --luz-cola: 56.9deg; }
  13.83% { --luz-giro: 247.3deg; --luz-cola: 60.2deg; }
  15.53% { --luz-giro: 250.9deg; --luz-cola: 70.3deg; }
  16.5% { --luz-giro: 252.9deg; --luz-cola: 81.4deg; }
  19.13% { --luz-giro: 270.8deg; --luz-cola: 117.9deg; }
  20.5% { --luz-giro: 281.9deg; --luz-cola: 127.8deg; }
  21.27% { --luz-giro: 287.7deg; --luz-cola: 129.8deg; }
  22.43% { --luz-giro: 291.8deg; --luz-cola: 133.8deg; }
  23.43% { --luz-giro: 297.8deg; --luz-cola: 132.6deg; }
  24.07% { --luz-giro: 303.7deg; --luz-cola: 129.0deg; }
  24.87% { --luz-giro: 316.1deg; --luz-cola: 125.7deg; }
  25.67% { --luz-giro: 338.5deg; --luz-cola: 113.5deg; }
  26.9% { --luz-giro: 388.3deg; --luz-cola: 79.3deg; }
  27.63% { --luz-giro: 408.4deg; --luz-cola: 62.9deg; }
  28.37% { --luz-giro: 420.1deg; --luz-cola: 57.0deg; }
  29.03% { --luz-giro: 426.6deg; --luz-cola: 59.2deg; }
  29.67% { --luz-giro: 430.8deg; --luz-cola: 69.7deg; }
  30.03% { --luz-giro: 432.7deg; --luz-cola: 81.1deg; }
  31.33% { --luz-giro: 453.6deg; --luz-cola: 121.6deg; }
  31.93% { --luz-giro: 463.4deg; --luz-cola: 128.3deg; }
  32.23% { --luz-giro: 467.6deg; --luz-cola: 129.6deg; }
  32.9% { --luz-giro: 471.6deg; --luz-cola: 133.7deg; }
  33.6% { --luz-giro: 478.2deg; --luz-cola: 132.4deg; }
  34% { --luz-giro: 483.9deg; --luz-cola: 129.0deg; }
  34.6% { --luz-giro: 497.1deg; --luz-cola: 125.3deg; }
  35.27% { --luz-giro: 522.5deg; --luz-cola: 110.9deg; }
  36.2% { --luz-giro: 567.9deg; --luz-cola: 79.6deg; }
  36.83% { --luz-giro: 587.5deg; --luz-cola: 63.5deg; }
  37.5% { --luz-giro: 599.0deg; --luz-cola: 57.2deg; }
  38.23% { --luz-giro: 606.3deg; --luz-cola: 58.9deg; }
  38.93% { --luz-giro: 610.7deg; --luz-cola: 69.2deg; }
  39.4% { --luz-giro: 613.1deg; --luz-cola: 81.7deg; }
  40.83% { --luz-giro: 632.1deg; --luz-cola: 119.7deg; }
  41.6% { --luz-giro: 641.8deg; --luz-cola: 127.7deg; }
  42.17% { --luz-giro: 647.7deg; --luz-cola: 129.8deg; }
  43.07% { --luz-giro: 651.5deg; --luz-cola: 133.7deg; }
  44.07% { --luz-giro: 657.8deg; --luz-cola: 132.6deg; }
  44.73% { --luz-giro: 663.8deg; --luz-cola: 129.0deg; }
  45.77% { --luz-giro: 678.3deg; --luz-cola: 124.8deg; }
  47% { --luz-giro: 707.9deg; --luz-cola: 107.3deg; }
  48.5% { --luz-giro: 748.8deg; --luz-cola: 78.9deg; }
  49.67% { --luz-giro: 767.8deg; --luz-cola: 63.3deg; }
  50.9% { --luz-giro: 778.8deg; --luz-cola: 57.3deg; }
  52.33% { --luz-giro: 786.0deg; --luz-cola: 58.6deg; }
  53.97% { --luz-giro: 790.8deg; --luz-cola: 69.6deg; }
  54.97% { --luz-giro: 793.1deg; --luz-cola: 81.7deg; }
  58.2% { --luz-giro: 811.1deg; --luz-cola: 118.4deg; }
  60.1% { --luz-giro: 820.5deg; --luz-cola: 127.2deg; }
  61.9% { --luz-giro: 827.6deg; --luz-cola: 129.7deg; }
  64.33% { --luz-giro: 831.1deg; --luz-cola: 133.6deg; }
  67.27% { --luz-giro: 836.6deg; --luz-cola: 133.1deg; }
  70.33% { --luz-giro: 844.1deg; --luz-cola: 129.0deg; }
  72% { --luz-giro: 849.3deg; --luz-cola: 128.1deg; opacity: 1; }
  79.33% { --luz-giro: 879.9deg; --luz-cola: 112.6deg; }
  86.93% { --luz-giro: 910.0deg; --luz-cola: 92.0deg; }
  95.2% { --luz-giro: 924.5deg; --luz-cola: 82.2deg; }
  100% { --luz-giro: 926.4deg; --luz-cola: 81.0deg; opacity: 0; }
}
@keyframes m-luz-encima {
  0% { --luz-giro: 206.4deg; --luz-cola: 81.0deg; opacity: 0; }
  6.67% { --luz-giro: 217.1deg; --luz-cola: 71.7deg; }
  11.53% { --luz-giro: 229.4deg; --luz-cola: 62.2deg; }
  12% { --luz-giro: 230.6deg; --luz-cola: 61.4deg; opacity: 1; }
  15.53% { --luz-giro: 239.5deg; --luz-cola: 57.1deg; }
  18.27% { --luz-giro: 245.4deg; --luz-cola: 58.1deg; }
  20.47% { --luz-giro: 249.5deg; --luz-cola: 65.0deg; }
  22.4% { --luz-giro: 252.6deg; --luz-cola: 80.6deg; }
  25.4% { --luz-giro: 269.2deg; --luz-cola: 115.4deg; }
  27.1% { --luz-giro: 280.6deg; --luz-cola: 127.2deg; }
  28.23% { --luz-giro: 287.7deg; --luz-cola: 129.7deg; }
  29.77% { --luz-giro: 292.0deg; --luz-cola: 133.8deg; }
  31.13% { --luz-giro: 298.5deg; --luz-cola: 132.3deg; }
  31.9% { --luz-giro: 303.9deg; --luz-cola: 129.0deg; }
  33.13% { --luz-giro: 317.9deg; --luz-cola: 125.0deg; }
  34.47% { --luz-giro: 344.4deg; --luz-cola: 109.6deg; }
  36.27% { --luz-giro: 388.5deg; --luz-cola: 79.1deg; }
  37.53% { --luz-giro: 407.6deg; --luz-cola: 63.4deg; }
  38.87% { --luz-giro: 418.8deg; --luz-cola: 57.3deg; }
  40.4% { --luz-giro: 426.0deg; --luz-cola: 58.6deg; }
  42.13% { --luz-giro: 430.8deg; --luz-cola: 69.6deg; }
  43.2% { --luz-giro: 433.0deg; --luz-cola: 81.7deg; }
  46.67% { --luz-giro: 450.9deg; --luz-cola: 118.1deg; }
  48.73% { --luz-giro: 460.3deg; --luz-cola: 127.0deg; }
  50.83% { --luz-giro: 467.7deg; --luz-cola: 129.7deg; }
  53.57% { --luz-giro: 471.1deg; --luz-cola: 133.6deg; }
  56.9% { --luz-giro: 476.3deg; --luz-cola: 133.2deg; }
  60% { --luz-giro: 482.5deg; --luz-cola: 129.8deg; opacity: 1; }
  67% { --luz-giro: 502.2deg; --luz-cola: 123.0deg; }
  75.97% { --luz-giro: 533.8deg; --luz-cola: 103.2deg; }
  86.13% { --luz-giro: 557.5deg; --luz-cola: 86.9deg; }
  98.47% { --luz-giro: 566.3deg; --luz-cola: 81.0deg; }
  100% { --luz-giro: 566.4deg; --luz-cola: 81.0deg; opacity: 0; }
}
@keyframes m-subir { from { transform: translateY(var(--m-dy)); } to { transform: none; } }
@keyframes m-deslizar { from { transform: translateX(calc(-1 * var(--m-dx))); } to { transform: none; } }
@keyframes m-filete { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-crecer { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-crecer-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Recetas de respuesta ---- */
/* PASAR: fundido cruzado entre dos estados */
.pasar { display: grid; }
.pasar > * { grid-area: 1 / 1; transition: opacity var(--m-encima) var(--m-suave); }
.pasar > [aria-hidden="true"] { opacity: 0; }

/* FILA: al pasar, el titular se desliza (listados) */
.fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-24); text-decoration: none; color: inherit; }
.fila .fila-titulo { transition: transform var(--m-encima) var(--m-sale); }
@media (hover: hover) {
  .fila:hover .fila-titulo { transform: translateX(var(--m-dx)); }
}
.fila:focus-visible .fila-titulo { transform: translateX(var(--m-dx)); }

/* BANDA: el color de fondo de la sección cambia con un velo plano */
.banda-cambia { position: relative; isolation: isolate; }
.banda-cambia > .velo-banda {
  position: absolute; inset: 0; z-index: -1;
  background: var(--banda-nueva, var(--banda-cambia));
  opacity: 0;
  transition: opacity var(--m-t6) var(--m-suave);
}
.banda-cambia.activa > .velo-banda { opacity: 1; }

/* PANEL lateral */
.panel-lateral { transform: translateX(100%); transition: transform var(--m-t3) var(--m-va); }
.panel-lateral.abierto { transform: none; transition: transform var(--m-t5) var(--m-traza); }

/* Transición entre páginas (navegación del mismo origen) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--m-t3); animation-timing-function: var(--m-suave); }
.cabecera { view-transition-name: cabecera; }

/* Con «reducir movimiento» no se desplaza nada */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}