/* La seña de «sigue bajando» (8-oct-2026). Un puntito, hermano chico del punto de la película, que cae con su línea,
   rebota dos veces en la orilla de abajo de la pantalla, se queda un instante de punto final y el piso se le va: sale
   por abajo. No dice «desliza» (Rodrigo no lo quiso): lo enseña. Solo sale cuando la película lleva un rato quieta en
   una parada que no es la última (lo decide sena.js) y se va en cuanto algo se mueve.
   Dónde: en el inicio, abajo al centro (si cabe); en las demás, en la esquina de abajo a la derecha, dentro de la orilla
   de la página: es la esquina que queda libre en todas las paradas (ahí vivía la bocina).
   Todo es transform y opacidad: no repinta ni le quita cuadros a la película. */
.sena { position: absolute; z-index: 40; width: calc(20px * var(--u, 1)); height: var(--alto); pointer-events: none; opacity: 0; visibility: hidden; color: var(--tinta, #0b132b); transition: opacity .18s ease, visibility 0s .18s;
  --d: calc(9px * var(--u, 1)); --w: calc(2.5px * var(--u, 1)); --alto: calc(46px * var(--u, 1)); --piso: calc(14px * var(--u, 1)); --cae: calc(var(--alto) - var(--d)); --sale: calc(var(--piso) + var(--d) + 4px);
  right: calc(1px * var(--u, 1)); bottom: var(--piso); }
.sena--compu { position: fixed; width: calc(24px * var(--S, 1));
  --d: calc(11px * var(--S, 1)); --w: calc(3px * var(--S, 1)); --alto: calc(58px * var(--S, 1)); --piso: calc(22px * var(--S, 1));
  right: calc(var(--orilla, var(--gutter, 64px)) + 14px * var(--S, 1)); }
.sena--centro { right: auto; left: 50%; margin-left: calc(-10px * var(--u, 1)); }
.sena--compu.sena--centro { margin-left: calc(-12px * var(--S, 1)); }
.sena.ve { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.col.abierto .sena { opacity: 0; visibility: hidden; }

.sena__p, .sena__l { position: absolute; left: 50%; background: currentColor; }
.sena__p { top: 0; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); border-radius: 50%; transform-origin: 50% 100%; transform: scale(0); }
.sena__l { top: calc(var(--d) / 2); width: var(--w); height: var(--cae); margin-left: calc(var(--w) / -2); border-radius: var(--w); transform-origin: 50% 0; transform: scaleY(0); }
.sena.ve .sena__p { animation: sena-p 4s linear infinite; }
.sena.ve .sena__l { animation: sena-l 4s linear infinite; }

/* el puntito (4 s): aparece · cuelga · cae · se aplasta · rebota · rebotito · punto final · se le va el piso · descansa */
@keyframes sena-p {
  0%     { transform: translateY(0) scale(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.6, .6, 1); }
  4.5%   { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: linear; }
  9%     { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  18.5%  { transform: translateY(var(--cae)) scale(.92, 1.1); animation-timing-function: ease-out; }
  20%    { transform: translateY(var(--cae)) scale(1.32, .66); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  25.5%  { transform: translateY(calc(var(--cae) * .5)) scale(.96, 1.05); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  31%    { transform: translateY(var(--cae)) scale(1); animation-timing-function: ease-out; }
  32.2%  { transform: translateY(var(--cae)) scale(1.18, .82); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  35.5%  { transform: translateY(calc(var(--cae) * .83)) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  38.8%  { transform: translateY(var(--cae)) scale(1.07, .93); animation-timing-function: ease-out; }
  40%    { transform: translateY(var(--cae)) scale(1); opacity: 1; animation-timing-function: linear; }
  52%    { transform: translateY(var(--cae)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, 1, .55); }
  59%    { transform: translateY(calc(var(--cae) + var(--sale))) scale(.9, 1.12); opacity: 1; }
  59.1%, 100% { transform: translateY(calc(var(--cae) + var(--sale))) scale(0); opacity: 0; }
}
/* su línea: se dibuja con la caída y se apaga mientras rebota */
@keyframes sena-l {
  0%, 9% { transform: scaleY(0); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  18.5%  { transform: scaleY(1); opacity: 1; animation-timing-function: ease-out; }
  33%    { transform: scaleY(1); opacity: 0; }
  100%   { transform: scaleY(1); opacity: 0; }
}