/* ==========================================================================
   Pantallas de carga de marca (Forja, Origen, Vuelo, Panal y Firma)
   El contenedor .preloader y el estilo «clásico» están en main.css. El estilo se elige en el panel
   (app/helpers/preloader.php). Todas las duraciones se multiplican por --pl-k (velocidad y versión breve).
   Piezas del isotipo: assets/images/marca/ (mismo lienzo 516×545: superpuestas forman el logo exacto).
   ========================================================================== */

/* Fondo blanco liso para los estilos de marca (el clásico conserva su degradado) */
.preloader:is(.pl-forja,.pl-origen,.pl-panal,.pl-firma){background:#fff}
.preloader:is(.pl-forja,.pl-origen,.pl-vuelo,.pl-panal,.pl-firma)::before{display:none}
/* «Solo si tarda»: invisible y sin bloquear hasta que se decide mostrarla */
.preloader.is-pending{opacity:0;visibility:hidden;pointer-events:none;transition:none}

/* Isotipo por piezas */
.pl-mark{position:relative;width:clamp(110px,24vmin,200px);aspect-ratio:516/545}
.pl-iso{position:absolute;inset:0}
.pl-iso>i{position:absolute;inset:0;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.pl-sup{background-image:url("../images/marca/mano-superior.webp")}
.pl-inf{background-image:url("../images/marca/mano-inferior.webp")}
.pl-ala{background-image:url("../images/marca/ala.webp")}
.pl-agu{background-image:url("../images/marca/aguila.webp")}
.pl-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
/* Negativo oficial (blanco sobre rojo, manual p. 13): la misma pieza como máscara */
.pl-mark.is-white .pl-iso>i{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.is-white .pl-sup{-webkit-mask-image:url("../images/marca/mano-superior.webp");mask-image:url("../images/marca/mano-superior.webp")}
.is-white .pl-inf{-webkit-mask-image:url("../images/marca/mano-inferior.webp");mask-image:url("../images/marca/mano-inferior.webp")}
.is-white .pl-ala{-webkit-mask-image:url("../images/marca/ala.webp");mask-image:url("../images/marca/ala.webp")}
.is-white .pl-agu{-webkit-mask-image:url("../images/marca/aguila.webp");mask-image:url("../images/marca/aguila.webp")}

@keyframes pl-b-draw{to{stroke-dashoffset:0}}
@keyframes pl-b-out{to{opacity:0}}
@keyframes pl-b-in{to{opacity:1}}
@keyframes pl-b-join{to{opacity:1;transform:none}}
@keyframes pl-b-clip{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes pl-b-pop{to{transform:none}}

/* ---------- Forja (inspirada en el arranque de Armoury Crate) ---------- */
.pl-beam{position:absolute;left:50%;top:50%;width:62vmax;height:2px;border-radius:2px;opacity:0;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red) 70%,transparent)}
.pl-beam.is-a{animation:pl-beam-a calc(.55s * var(--pl-k)) cubic-bezier(.65,0,.35,1) forwards}
.pl-beam.is-b{background:linear-gradient(90deg,transparent,var(--gray-700) 30%,var(--gray-700) 70%,transparent);animation:pl-beam-b calc(.55s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(.06s * var(--pl-k)) forwards}
@keyframes pl-beam-a{0%{opacity:1;transform:translate(-50%,-50%) translate(55vw,-28vw) rotate(-26deg)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scaleX(.1)}}
@keyframes pl-beam-b{0%{opacity:1;transform:translate(-50%,-50%) translate(-55vw,28vw) rotate(-26deg)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scaleX(.1)}}
.pl-forja .pl-trace{stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1}
.pl-forja .pl-trace.is-top{stroke:var(--red);animation:pl-b-draw calc(.55s * var(--pl-k)) var(--ease) calc(.45s * var(--pl-k)) forwards,pl-b-out calc(.3s * var(--pl-k)) ease calc(1.25s * var(--pl-k)) forwards}
.pl-forja .pl-trace.is-bottom{stroke:var(--gray-700);animation:pl-b-draw calc(.55s * var(--pl-k)) var(--ease) calc(.5s * var(--pl-k)) forwards,pl-b-out calc(.3s * var(--pl-k)) ease calc(1.25s * var(--pl-k)) forwards}
.pl-forja .pl-ghost{stroke:var(--gray-200);stroke-width:3;transform-origin:257.5px 271.5px;opacity:0;animation:pl-ghost calc(.7s * var(--pl-k)) var(--ease) calc(.5s * var(--pl-k)) forwards}
.pl-forja .pl-inner{stroke:var(--red);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transform-origin:257.5px 271.5px;transform:scale(.7);animation:pl-b-draw calc(.45s * var(--pl-k)) var(--ease) calc(.8s * var(--pl-k)) forwards,pl-b-out calc(.3s * var(--pl-k)) ease calc(1.25s * var(--pl-k)) forwards}
@keyframes pl-ghost{0%{opacity:.9;transform:scale(1.16) rotate(4deg)}80%{opacity:.6}100%{opacity:0;transform:none}}
.pl-forja .pl-sup{clip-path:inset(0 0 100% 0);transform:translate(4%,-3%);animation:pl-b-clip calc(.45s * var(--pl-k)) var(--ease) calc(1.05s * var(--pl-k)) forwards}
.pl-forja .pl-inf{clip-path:inset(100% 0 0 0);transform:translate(-4%,3%);animation:pl-b-clip calc(.45s * var(--pl-k)) var(--ease) calc(1.1s * var(--pl-k)) forwards}
.pl-forja .pl-agu{clip-path:inset(100% 0 0 0);transform:translateY(5%);animation:pl-b-clip calc(.5s * var(--pl-k)) var(--ease) calc(1.45s * var(--pl-k)) forwards}
.pl-forja .pl-ala{transform:scale(0);transform-origin:46% 37%;animation:pl-b-pop calc(.35s * var(--pl-k)) cubic-bezier(.34,1.56,.64,1) calc(1.7s * var(--pl-k)) forwards}
.pl-sheen{position:absolute;inset:0;-webkit-mask:url("../images/marca/manos.webp") center/100% 100% no-repeat;mask:url("../images/marca/manos.webp") center/100% 100% no-repeat;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:pl-sheen calc(.7s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(1.5s * var(--pl-k)) forwards}
@keyframes pl-sheen{to{background-position:-60% 0}}

/* ---------- Origen (las 4 formas base del manual) ---------- */
.pl-origin{display:grid;justify-items:center;gap:22px}
.pl-origen .pl-mark{width:clamp(120px,26vmin,210px)}
.pl-form{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:0;transform:scale(.85)}
.pl-form.is-1{background-image:url("../images/marca/forma-hexagono.webp");animation:pl-step calc(.55s * var(--pl-k)) var(--ease) forwards}
.pl-form.is-2{background-image:url("../images/marca/forma-manos.webp");animation:pl-step calc(.55s * var(--pl-k)) var(--ease) calc(.4s * var(--pl-k)) forwards}
.pl-form.is-3{background-image:url("../images/marca/forma-union.webp");animation:pl-step calc(.55s * var(--pl-k)) var(--ease) calc(.8s * var(--pl-k)) forwards}
.pl-form.is-4{background-image:url("../images/marca/forma-aguila.webp");animation:pl-step calc(.55s * var(--pl-k)) var(--ease) calc(1.2s * var(--pl-k)) forwards}
@keyframes pl-step{0%{opacity:0;transform:scale(.85)}25%,72%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.05)}}
.pl-origen .pl-iso>i{opacity:0}
.pl-origen .pl-sup,.pl-origen .pl-inf{animation:pl-b-in calc(.35s * var(--pl-k)) var(--ease) calc(1.55s * var(--pl-k)) forwards}
.pl-origen .pl-agu{animation:pl-b-in calc(.35s * var(--pl-k)) var(--ease) calc(1.7s * var(--pl-k)) forwards}
.pl-origen .pl-ala{animation:pl-b-in calc(.3s * var(--pl-k)) var(--ease) calc(1.8s * var(--pl-k)) forwards}
.pl-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font:600 .85rem var(--font-body);color:var(--gray-200)}
.pl-labels span{animation:pl-label calc(1.9s * var(--pl-k)) steps(1) forwards}
.pl-labels span:nth-child(2){animation-delay:calc(.4s * var(--pl-k))}
.pl-labels span:nth-child(3){animation-delay:calc(.8s * var(--pl-k))}
.pl-labels span:nth-child(4){animation-delay:calc(1.2s * var(--pl-k))}
@keyframes pl-label{0%{color:var(--red)}to{color:var(--gray-700)}}

/* ---------- Vuelo (negativo blanco sobre rojo) ---------- */
.preloader.pl-vuelo{background:transparent}
.pl-wedge{position:absolute;inset:0;background:var(--red)}
.pl-wedge.is-1{clip-path:polygon(100% 0,100% 0,100% 0);animation:pl-w1 calc(.55s * var(--pl-k)) cubic-bezier(.65,0,.35,1) forwards}
.pl-wedge.is-2{background:var(--red-deep);clip-path:polygon(0 100%,0 100%,0 100%);animation:pl-w2 calc(.55s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(.08s * var(--pl-k)) forwards}
@keyframes pl-w1{to{clip-path:polygon(-60% 0,100% 0,100% 180%)}}
@keyframes pl-w2{to{clip-path:polygon(0 -40%,0 100%,170% 100%)}}
.pl-vuelo .pl-sup{opacity:0;transform:translate(14%,-10%);animation:pl-b-join calc(.5s * var(--pl-k)) var(--ease) calc(.5s * var(--pl-k)) forwards}
.pl-vuelo .pl-inf{opacity:0;transform:translate(-14%,10%);animation:pl-b-join calc(.5s * var(--pl-k)) var(--ease) calc(.55s * var(--pl-k)) forwards}
.pl-vuelo .pl-agu{opacity:0;transform:translateY(22%) scale(.9);animation:pl-b-join calc(.7s * var(--pl-k)) var(--ease) calc(.85s * var(--pl-k)) forwards}
.pl-vuelo .pl-ala{opacity:0;animation:pl-b-in calc(.3s * var(--pl-k)) ease calc(1.35s * var(--pl-k)) forwards}
/* Salida: el rojo y el logo se van volando hacia arriba */
.preloader.pl-vuelo.is-done{opacity:1;visibility:hidden;transition:visibility 0s linear .8s}
.pl-vuelo.is-done .pl-wedge{animation:none;clip-path:polygon(100% -100%,200% -100%,200% 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.pl-vuelo.is-done .pl-wedge.is-2{transition-delay:.06s}
.pl-vuelo.is-done .pl-mark{transform:translate(40%,-90%) scale(.5);opacity:0;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .5s ease .2s}

/* ---------- Panal (seis celdas vuelven al centro) ---------- */
.pl-panal .pl-mark{width:clamp(80px,15vmin,120px)}
.pl-cell{position:absolute;inset:0;transform:translate(var(--x),var(--y));opacity:0;animation:pl-b-in calc(.4s * var(--pl-k)) var(--ease) calc(var(--n) * .08s * var(--pl-k)) forwards,pl-cell-home calc(.45s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(1.05s * var(--pl-k)) forwards}
.pl-cell svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:9}
.pl-cell:nth-child(odd) svg{stroke:var(--red)}
.pl-cell:nth-child(even) svg{stroke:var(--gray-200)}
@keyframes pl-cell-home{to{transform:none;opacity:0}}
.pl-panal .pl-iso>i{opacity:0;transform:scale(.6);animation:pl-click calc(.45s * var(--pl-k)) cubic-bezier(.34,1.56,.64,1) calc(1.35s * var(--pl-k)) forwards}
.pl-panal .pl-agu{animation-delay:calc(1.5s * var(--pl-k))}
.pl-panal .pl-ala{animation-delay:calc(1.6s * var(--pl-k))}
@keyframes pl-click{to{opacity:1;transform:none}}

/* ---------- Firma (imagotipo completo) ---------- */
.pl-lockup{display:flex;align-items:center;gap:clamp(12px,2.4vw,22px);width:min(86vw,560px)}
.pl-firma .pl-mark{width:24%;flex:none}
.pl-word{position:relative;flex:1 1 0;min-width:0;aspect-ratio:900/334}
.pl-word>i{position:absolute;inset:0;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.pl-word-red{background-image:url("../images/marca/palabra-rojo.webp");clip-path:inset(0 100% 0 0);animation:pl-b-clip calc(.7s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(.55s * var(--pl-k)) forwards}
.pl-word-gray{background-image:url("../images/marca/palabra-gris.webp");opacity:0;animation:pl-b-in calc(.4s * var(--pl-k)) ease calc(1.05s * var(--pl-k)) forwards}
.pl-scan{position:absolute;top:-4%;bottom:-4%;left:0;width:2px;background:var(--red);box-shadow:0 0 12px 2px rgba(227,6,19,.45);opacity:0;animation:pl-scan calc(.7s * var(--pl-k)) cubic-bezier(.65,0,.35,1) calc(.55s * var(--pl-k)) forwards}
@keyframes pl-scan{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.pl-firma .pl-sup{opacity:0;transform:translate(12%,-8%);animation:pl-b-join calc(.45s * var(--pl-k)) var(--ease) forwards}
.pl-firma .pl-inf{opacity:0;transform:translate(-12%,8%);animation:pl-b-join calc(.45s * var(--pl-k)) var(--ease) calc(.05s * var(--pl-k)) forwards}
.pl-firma .pl-agu{clip-path:inset(100% 0 0 0);animation:pl-b-clip calc(.45s * var(--pl-k)) var(--ease) calc(.35s * var(--pl-k)) forwards}
.pl-firma .pl-ala{transform:scale(0);transform-origin:46% 37%;animation:pl-b-pop calc(.3s * var(--pl-k)) cubic-bezier(.34,1.56,.64,1) calc(.6s * var(--pl-k)) forwards}

/* Al retirarse, el logo se agranda un poco mientras se desvanece (como el clásico) */
.preloader:is(.pl-forja,.pl-origen,.pl-panal,.pl-firma).is-done :is(.pl-mark,.pl-lockup){transform:scale(1.08);transition:transform .5s var(--ease)}

/* Vista previa dentro de una tarjeta del panel (admin/preloader.php): mismo dibujo, medido por su recuadro */
.adm-pl-demo{container-type:size}
.preloader.is-demo{position:absolute;z-index:auto;gap:8px;animation:none;transition:none}
.preloader.is-demo .pl-mark{width:clamp(48px,34cqmin,120px)}
.preloader.is-demo.pl-panal .pl-mark{width:clamp(34px,20cqmin,70px)}
.preloader.is-demo .pl-lockup{width:88cqw;gap:3cqw}
.preloader.is-demo .pl-origin{gap:6px}
.preloader.is-demo .pl-labels{font-size:clamp(.5rem,4cqw,.7rem);gap:2px 8px}
.preloader.is-demo .pl-beam{width:120cqw}
.preloader.is-demo .pl-stage{width:52cqmin}
.preloader.is-demo .pl-bar{width:40cqw}
.preloader.is-demo .pl-hex{--d:calc(var(--s) * 4)}

/* Reducir movimiento: sin esperas ni recorridos, se ve directamente el logo terminado */
@media (prefers-reduced-motion:reduce){
    .preloader *{animation-delay:0s!important}
}