.stoa-loader {
  --t-step: 120ms;                          /* token existente */
  --ease-out: cubic-bezier(0, 0, 0, 1);     /* token existente */
  --ease-io: cubic-bezier(.65, 0, .35, 1);  /* token existente */
  --loader-muro: 600ms;                     /* = --t-in */
  --loader-pilar: 400ms;                    /* subida de cada pilar: 600 + 400 = 1 s de construcción */
  --loader-build: 1000ms;
  --loader-pausa: 1200ms;                   /* quietud mínima antes de repetir */
  --loader-ciclo: 4000ms;                   /* ciclo lento: 2.12 s de movimiento + 1.88 s quieto */
  --loader-fade: 400ms;
  --loader-max: 8000ms;                     /* tope: pase lo que pase, se quita */
  --loader-fondo: #EFEBE4;                  /* Cal */
  --loader-tinta: #1E1D1B;                  /* Carbón */
  --loader-vano: #27694A;                     position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center;
  background: var(--loader-fondo); color: var(--loader-tinta);
  transition: opacity var(--loader-fade) var(--ease-io), visibility 0s linear var(--loader-fade);
}
html.js:not(.sin-loader) .stoa-loader { display: grid; }
.stoa-loader--carbon { --loader-fondo: #1E1D1B; --loader-tinta: #EFEBE4; --loader-vano: #63A482; }
.stoa-loader__iso { display: block; width: var(--loader-ancho, 56px); height: calc(var(--loader-ancho, 56px) * 16 / 28); overflow: visible; }  /* 56 px = 2 px por u (píxel exacto); alternativa 84 px = 3 px por u */
.stoa-loader__iso .muro, .stoa-loader__iso .pilar { fill: currentColor; transform-box: fill-box; }
.stoa-loader__iso .muro { transform-origin: left center; animation: stoa-muro var(--loader-muro) var(--ease-out) both; }
.stoa-loader__iso .pilar {
  transform-origin: center bottom;
  animation: stoa-pilar var(--loader-pilar) var(--ease-out) both;
  animation-delay: calc(2 * var(--t-step) + var(--i) * var(--t-step));
}
.stoa-loader__iso .vano { fill: var(--loader-vano); opacity: 0; }
.stoa-loader--vano .stoa-loader__iso .vano { animation: stoa-vano var(--loader-muro) var(--ease-out) var(--loader-build) both; }
.stoa-loader.is-ciclo .pilar {
  animation: stoa-ciclo var(--loader-ciclo) var(--ease-io) infinite;
  animation-delay: calc(var(--i) * 2 * var(--t-step));   /* 0 / 240 / 480 / 720 ms: más lento que la construcción */
}
.stoa-loader.is-saliendo { opacity: 0; visibility: hidden; pointer-events: none; }
.stoa-loader__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes stoa-muro  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes stoa-pilar { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stoa-vano  { from { opacity: 0; } to { opacity: 1; } }
@keyframes stoa-ciclo {           /* 4 s: baja 480 ms · abajo 200 ms · sube 720 ms · quieto el resto */
  0%   { transform: none; }
  12%  { transform: scaleY(0); }
  17%  { transform: scaleY(0); }
  35%  { transform: none; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stoa-loader__iso .muro, .stoa-loader__iso .pilar, .stoa-loader.is-ciclo .pilar { animation: none !important; transform: none; opacity: 1; }
  .stoa-loader--vano .stoa-loader__iso .vano { animation: none !important; opacity: 1; }
  .stoa-loader { transition: none; }
}