/* Animaciones con el logo: intro a pantalla completa, carga y bienvenida. Va ultimo. */

/* ===== Intro a pantalla completa v2 (4,8 s): el logo cobra vida =====
   El logo se arma con 40 piezas (cabeza, cuerpo y cada letra) de img/logo/intro-piezas.png sobre un lienzo de 580 x 225.
   --u = 1 unidad del lienzo en pixeles (para desplazar en proporcion al tamano del logo).
   Lineas de tiempo: personaje solo 0-1,7 s · el logo se arma 1,7-3,3 s · pulso + brillo 3,3-4,1 s · salida 4,15-4,8 s */
#intro{display:none}
.con-intro #intro{--k:.66;--d:.145s;--lw:min(86vw,620px);position:fixed;inset:0;z-index:1000;display:block;
  background:radial-gradient(ellipse at 50% 42%,#fff 0%,#F3F6FD 55%,#E4EBFA 100%);animation:introSalida .65s 9.5s ease forwards}
.con-intro,.con-intro body{overflow:hidden}
/* La intro espera a que el sprite este cargado para que no se pierda el comienzo; y si algo falla, la pagina se libera sola */
.con-intro:not(.intro-lista) #intro,.con-intro:not(.intro-lista) #intro *,.con-intro:not(.intro-lista) #intro *::after{animation-play-state:paused!important}
.con-intro body{animation:introSoltar 0s 10s forwards}
@keyframes introSoltar{to{overflow:visible}}
.intro-luz{position:absolute;left:50%;top:50%;width:min(82vw,640px);aspect-ratio:1;margin:calc(min(82vw,640px)/-2) 0 0 calc(min(82vw,640px)/-2);border-radius:50%;
  background:radial-gradient(circle,rgba(11,58,154,.16),rgba(200,35,27,.05) 45%,transparent 68%);opacity:0;animation:luzEntra calc(1.2s*var(--k)) calc(.1s*var(--k)) ease-out forwards,luzRespira calc(2.8s*var(--k)) calc(1.3s*var(--k)) ease-in-out infinite}
.intro-lg{--u:calc(var(--lw)/580);position:absolute;left:50%;top:50%;margin:calc(var(--lw)*-225/1160) 0 0 calc(var(--lw)/-2);width:var(--lw);aspect-ratio:580/225;animation:logoPulso calc(.75s*var(--k)) calc(3.3s*var(--k) + var(--d)) ease-in-out both,logoRespira 2.6s calc(3.3s*var(--k) + var(--d) + .6s) ease-in-out infinite}
.intro-lg .p,.intro-lg .pp,.intro-lg .pj,.intro-lg .ola,.intro-lg .sombra{position:absolute;display:block}
.intro-lg .p{left:var(--x);top:var(--y);width:var(--w);height:var(--h);background-image:url(../img/logo/intro-piezas.png);background-repeat:no-repeat;background-position:var(--bp);background-size:var(--bs)}
.intro-lg .pp{left:var(--x);top:var(--y);width:var(--w);height:var(--h);background-repeat:no-repeat;background-size:100% 100%}
.intro-lg .cuerpo{background-image:url(../img/logo/intro-cuerpo.png)}
.intro-lg .cabeza{background-image:url(../img/logo/intro-cabeza.png)}
.intro-lg .pj{inset:0;transform-origin:12.7% 84.4%;animation:pjViaje 1.5s linear both;will-change:transform}
.intro-lg .sombra{left:7%;top:80.5%;width:19%;height:5.5%;border-radius:50%;background:radial-gradient(ellipse,rgba(8,42,116,.38),transparent 70%);opacity:0;animation:sombraJuega 1.3s ease-out both}
.intro-lg .cabeza{transform-origin:var(--ox) var(--oy);animation:cabezaVida calc(4s*var(--k) + var(--d)) linear both}
.lg-brillo{overflow:hidden}
.cabeza.lg-brillo::after{-webkit-mask:url(../img/logo/intro-cabeza.png) 0 0/100% 100% no-repeat;mask:url(../img/logo/intro-cabeza.png) 0 0/100% 100% no-repeat}
.lg-brillo::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) -140% 0/280% 100% no-repeat;opacity:0;-webkit-mask:url(../img/logo/intro-piezas.png) var(--bp)/var(--bs) no-repeat;mask:url(../img/logo/intro-piezas.png) var(--bp)/var(--bs) no-repeat;animation:brilloCasco .8s .3s ease-out both,brilloCasco calc(.9s*var(--k)) calc(3.45s*var(--k) + var(--d)) ease-out both}
/* Letras: cada una entra con su propio rebote, desfasadas segun --i */
.intro-lg .l{opacity:0;transform-origin:50% 100%}
.intro-lg .cr{animation:letraSube calc(.85s*var(--k)) calc((1.75s + var(--i)*.085s)*var(--k) + var(--d)) both}
.intro-lg .di{animation:letraCae calc(.7s*var(--k)) calc((2.2s + var(--i)*.04s)*var(--k) + var(--d)) both}
.intro-lg .my{animation:letraAbre calc(.7s*var(--k)) calc((2.5s + var(--i)*.055s)*var(--k) + var(--d)) both}
/* Ola de brillo sobre todo el logo (recortada con la silueta del propio logo) */
.intro-lg .ola{inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%) -130% 0/260% 100% no-repeat;-webkit-mask:url(../img/logo-sprite.png) 0 0/100% 100% no-repeat;mask:url(../img/logo-sprite.png) 0 0/100% 100% no-repeat;opacity:0;animation:brilloCasco calc(1s*var(--k)) calc(3.4s*var(--k) + var(--d)) ease-in-out both;pointer-events:none}
.intro-barra{position:absolute;left:50%;margin-left:calc(min(60vw,360px)/-2);top:calc(50% + var(--lw)*225/1160 + 30px);width:min(60vw,360px);height:4px;border-radius:3px;background:rgba(11,58,154,.12);overflow:hidden;opacity:0;animation:barraEntra .2s calc(1.7s*var(--k) + var(--d)) forwards}
.intro-barra i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--azul),var(--rojo));transform-origin:left;animation:introBarra calc(1.7s*var(--k)) calc(1.75s*var(--k) + var(--d)) cubic-bezier(.4,0,.2,1) both}
.intro-saltar{position:absolute;right:18px;bottom:18px;padding:8px 16px;border-radius:20px;border:1px solid rgba(11,58,154,.25);background:rgba(255,255,255,.7);color:var(--azul);font-size:13px;opacity:0;animation:introSale .3s calc(.8s*var(--k)) ease forwards}
.intro-saltar:hover{background:#fff}
#intro.saliendo{animation:introSalida .45s ease forwards}
.saliendo .intro-lg{animation:logoSale .45s ease-in forwards}

/* El personaje entra solo, grande y centrado (rebote con estiramiento y aplastamiento), respira, y recien despues se acomoda en el logo */
@keyframes pjViaje{
  0%{opacity:0;transform:translate(calc(var(--u)*210.5),calc(var(--u)*73.2)) scale(1.38)}
  13%{opacity:1;transform:translate(calc(var(--u)*210.5),calc(var(--u)*73.2)) scale(1.68);animation-timing-function:ease-in-out}
  20%{opacity:1;transform:translate(calc(var(--u)*210.5),calc(var(--u)*73.2)) scale(1.6)}
  33%{transform:translate(calc(var(--u)*210.5),calc(var(--u)*73.2)) scale(1.6,1.645);animation-timing-function:ease-in-out}
  47%{transform:translate(calc(var(--u)*210.5),calc(var(--u)*73.2)) scale(1.6,1.6);animation-timing-function:cubic-bezier(.5,0,.15,1)}
  87%{opacity:1;transform:translate(calc(var(--u)*-5),0) scale(.99,1.01);animation-timing-function:ease-out}
  100%{opacity:1;transform:none}
}
@keyframes cabezaVida{
  0%,10%{transform:rotate(0)}
  15%{transform:rotate(-7deg)}
  20%{transform:rotate(4deg)}
  25%{transform:rotate(-2deg)}
  30%,80%{transform:rotate(0)}
  84%{transform:rotate(5deg) translateY(calc(var(--u)*-1.5))}
  90%{transform:rotate(-1.5deg)}
  100%{transform:rotate(0)}
}
@keyframes sombraJuega{
  0%{opacity:0;transform:scale(.6)}
  15%{opacity:.85;transform:scale(1.15)}
  50%{opacity:.75;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}
@keyframes brilloCasco{0%{opacity:1;background-position:-140% 0}100%{opacity:1;background-position:240% 0}}
@keyframes letraSube{
  0%{opacity:0;transform:translateY(calc(var(--u)*50)) rotate(-9deg) scale(.65)}
  45%{opacity:1;transform:translateY(calc(var(--u)*-9)) rotate(2.5deg) scale(1.07)}
  68%{transform:translateY(calc(var(--u)*3)) rotate(-.8deg) scale(.985)}
  85%{transform:translateY(calc(var(--u)*-1)) rotate(.2deg) scale(1.005)}
  100%{opacity:1;transform:none}
}
@keyframes letraCae{
  0%{opacity:0;transform:translateY(calc(var(--u)*-34)) rotate(7deg) scale(.8)}
  50%{opacity:1;transform:translateY(calc(var(--u)*5)) rotate(-1.5deg) scale(1.04)}
  75%{transform:translateY(calc(var(--u)*-1.5)) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
@keyframes letraAbre{
  0%{opacity:0;transform:translateX(calc(var(--u)*var(--dx))) scale(.5)}
  55%{opacity:1;transform:translateX(calc(var(--u)*var(--dx)*-.06)) scale(1.1)}
  100%{opacity:1;transform:none}
}
@keyframes logoPulso{0%,100%{transform:none}45%{transform:scale(1.035)}}
@keyframes logoSale{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.09)}}
@keyframes luzEntra{to{opacity:1}}
@keyframes luzRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes barraEntra{to{opacity:1}}
@keyframes introBarra{0%{transform:scaleX(0)}100%{transform:scaleX(.85)}}
@keyframes logoRespira{0%,100%{transform:none}50%{transform:scale(1.02)}}
@keyframes introSale{to{opacity:1}}
@keyframes introSalida{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}

/* ===== Carga (reutilizable) ===== */
.cargando{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 10px;color:var(--gris);font-size:14px;text-align:center}
.cargando img{width:56px;height:auto;transform-origin:50% 100%;animation:cargaInclina 1.1s ease-in-out infinite}
.cargando .c-barra{width:120px;height:4px;border-radius:2px;background:rgba(11,58,154,.12);overflow:hidden}
.cargando .c-barra i{display:block;height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--azul),var(--rojo));transform-origin:left;transform:scaleX(0);animation:cargaLlena 3.2s cubic-bezier(.12,.7,.2,1) forwards}
.cargando.grande img{width:110px;animation-name:cargaLate}
.cargando.grande .c-barra{width:200px}
.sec-grid .cargando{grid-column:1/-1}
@keyframes cargaInclina{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-3px)}}
@keyframes cargaLate{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cargaLlena{0%{transform:scaleX(0)}100%{transform:scaleX(.9)}}

/* ===== Bienvenida al iniciar sesion ===== */
#bienvenida{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,42,116,.55);cursor:pointer}
#bienvenida.abierta{display:flex;animation:bvVelo .3s ease both}
.bv-card{position:relative;background:#fff;border-radius:18px;width:min(92vw,420px);padding:28px 24px 26px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden;animation:bvCard .5s cubic-bezier(.2,1.2,.4,1) both}
.bv-card::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--azul),var(--rojo))}
.bv-pj{width:92px;height:auto;margin:0 auto 6px;transform-origin:50% 100%;animation:bvSaluda 1.3s .2s ease-in-out both}
.bv-tit{font:700 clamp(26px,7vw,34px)/1.05 'Roboto Condensed',sans-serif;text-transform:uppercase;color:var(--azul-osc)}
.bv-tit span{display:inline-block;margin:0 .12em;opacity:0;transform:translateY(14px);animation:bvPalabra .45s ease forwards}
.bv-tit .bv-nom{color:var(--rojo)}
.bv-sub{margin-top:10px;color:var(--gris);font-size:15px;opacity:0;animation:bvPalabra .5s 1.1s ease forwards}
.bv-cinta{display:inline-block;margin-top:14px;padding:6px 16px;border-radius:4px;background:var(--rojo);color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-8deg) translateX(-130%);opacity:0;animation:bvCinta .55s 1s cubic-bezier(.2,1,.3,1) forwards}
@keyframes bvVelo{from{opacity:0}to{opacity:1}}
@keyframes bvCard{0%{opacity:0;transform:translateY(30px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes bvSaluda{0%{transform:translateX(-90px) rotate(-12deg);opacity:0}35%{transform:translateX(0) rotate(0);opacity:1}55%{transform:rotate(-7deg) translateY(-8px)}75%{transform:rotate(5deg) translateY(-3px)}100%{transform:none;opacity:1}}
@keyframes bvPalabra{to{opacity:1;transform:none}}
@keyframes bvCinta{to{opacity:1;transform:skewX(-8deg) translateX(0)}}

/* Sin versión de «movimiento reducido»: la intro, la carga y la bienvenida se ven IGUAL en la PC y en el celular, aunque el sistema tenga las animaciones apagadas (pedido del usuario). */