/* =============================================================================
 * TechnoSense-Caelum — carga.css · la pantalla de carga «el pase» (variante A).
 * -----------------------------------------------------------------------------
 * Copiado TAL CUAL de marca/carga/caelum-carga.html (el bloque <style> de .tsb).
 * Si cambia la marca, se vuelve a copiar de ahí; tests/test_frontend.php
 * compara este archivo con el de la marca.
 *
 * Lo único propio de la plataforma es la última regla: con la clase sin-carga
 * en <html> (la pone core/head.php si ya se vio en esta pestaña) no se pinta.
 * ============================================================================= */
.tsb{--tsb-paper:#0B1120;--tsb-glow:#0C2A3E;--tsb-sky:#0EA5E9;--tsb-muted:#94A3B8;--w:min(calc(100vw - 32px),88.24vh,720px);
  position:fixed;inset:0;z-index:2147483000;overflow:hidden;background:var(--tsb-paper);
  font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  animation:tsb-fs .195s 8s cubic-bezier(0,0,.58,1) forwards}
.tsb[data-demo],.tsb.espera{animation:none}
.tsb.out{pointer-events:none;animation:tsb-out .195s .105s cubic-bezier(0,0,.58,1) forwards}
.tsb.out .tsb-blk{animation:tsb-out .15s cubic-bezier(.42,0,1,1) forwards}
.tsb-scene,.tsb-blk,.tsb-glow{position:absolute;inset:0}
.tsb-glow{background:radial-gradient(1200px 500px at 50% -10%,var(--tsb-glow),transparent 70%);animation:tsb-in .6s cubic-bezier(0,0,.58,1) both}
.tsb svg{position:absolute;left:50%;top:calc(46% - var(--w)*.3853);width:var(--w);height:auto;aspect-ratio:340/262;transform:translateX(-50%);overflow:visible}
.tsb .linea,.tsb .linea-m,.tsb .deco,.tsb .barrido{transform-box:fill-box}
.tsb .cielo{animation:tsb-in .8s .1s both}
.tsb .linea{transform-origin:50% 50%;animation:tsb-linea .4s cubic-bezier(.215,.61,.355,1) both}
.tsb .antena{animation:tsb-up .34s .12s cubic-bezier(.215,.61,.355,1) both}
.tsb .domo{animation:tsb-in .45s .18s both}
/* El pase: satélite, haz y antena giran juntos sobre el eje de la antena (170,112); la estela sigue con la misma curva. */
.tsb .gira{transform-origin:170px 112px;transform:rotate(38deg);animation:tsb-gira 1.45s .22s cubic-bezier(.3,.08,.25,1) both}
.tsb .estela{stroke-dasharray:1 2;animation:tsb-estela 1.45s .22s cubic-bezier(.3,.08,.25,1) both}
.tsb .haz{animation:tsb-in .25s .5s both}
.tsb .flujo{animation:tsb-flujo .5s linear infinite}
.tsb .marco{animation:tsb-in .3s .36s both}
/* La decodificación: una tapa que se encoge hacia abajo en 32 escalones de 2 u (una línea de imagen cada uno) y la
   línea de barrido encima. Tapa y no clipPath animado: Safari no siempre repinta un clipPath que se mueve. */
.tsb .deco{transform-origin:50% 100%;transform:scaleY(0);animation:tsb-deco 1.15s .6s steps(32,end) both}
.tsb .barrido{opacity:0;animation:tsb-barre 1.15s .6s steps(32,end) both,tsb-barre-a 1.15s .6s linear both}
.tsb .linea-m{transform-origin:0 50%;animation:tsb-linea .45s 1.62s cubic-bezier(.645,.045,.355,1) both}
.tsb .marca{animation:tsb-up .42s 1.72s cubic-bezier(.215,.61,.355,1) both}
.tsb .lema{animation:tsb-up .42s 1.82s cubic-bezier(.215,.61,.355,1) both}
.tsb-st{position:absolute;left:16px;right:16px;bottom:max(24px,6vh);margin:0;display:flex;align-items:center;justify-content:center;gap:.6em;
  font-size:clamp(13px,calc(var(--w)*.03),18px);line-height:1.4;color:var(--tsb-muted);text-align:center;animation:tsb-up .42s 1.92s cubic-bezier(.215,.61,.355,1) both}
.tsb-dot{flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--tsb-sky);animation:tsb-vivo 2s infinite}
@keyframes tsb-in{from{opacity:0}}
@keyframes tsb-up{from{opacity:0;transform:translateY(8px)}}
@keyframes tsb-linea{from{transform:scaleX(0)}}
@keyframes tsb-gira{from{transform:rotate(-110deg)}}
@keyframes tsb-estela{from{stroke-dashoffset:1}}
@keyframes tsb-flujo{to{stroke-dashoffset:-8}}
@keyframes tsb-deco{from{transform:scaleY(1)}}
@keyframes tsb-barre{to{transform:translateY(64px)}}
@keyframes tsb-barre-a{3%,94%{opacity:1}}
@keyframes tsb-vivo{50%{opacity:.3}}
@keyframes tsb-out{to{opacity:0;visibility:hidden}}
/* El apagado sin JS lleva su propio nombre: si fuera tsb-out, .out solo le cambiaría el retraso y la salida sería un corte. */
@keyframes tsb-fs{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.tsb-scene,.tsb-scene *{animation:none!important}}

/* Ya se vio en esta pestaña: no se pinta (core/head.php pone la clase antes del <body>). */
.sin-carga .tsb{display:none}