/* ══════════════════════════════════════════════════════════════════════════════
   EL LOGO DE LÍA Y SUS ANIMACIONES

   Lo cargan el panel y las landings: es el mismo logo en los dos lados.

   ═══ QUÉ SE MUEVE Y CUÁNDO ═══

     quieto        no se mueve. Al pasar el cursor da un sexto de vuelta —un
                   pétalo— y regresa: responde, no distrae.
     .lia-trabajando  gira como rehilete y respira. Es la señal de «estoy en
                   ello» del chat, del lector de tickets y del diseñador. Los
                   pétalos van en el sentido en que se curvan, así que el giro
                   se lee como impulso y no como un ícono de carga genérico.
     .lia-gira     una vuelta cada 24 s, para las landings. Se nota si se mira;
                   no llama la atención si no.
     .lia-aparece  entra una vez con un giro corto y un rebote.

   Quien pide menos movimiento en su sistema ve el logo quieto siempre; «está
   trabajando» lo sigue diciendo el texto que lo acompaña.
   ══════════════════════════════════════════════════════════════════════════════ */

.lia-logo{
    --lia-oro:#FAB93D;
    --lia-placa:#014057;
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:var(--lia-w,20px);height:var(--lia-w,20px);
    color:var(--lia-oro);line-height:0;vertical-align:middle}
.lia-logo svg{width:100%;height:100%;display:block;transform-origin:50% 50%;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1)}

/* Sobre la placa azul del logo original. */
.lia-logo-fondo{background:var(--lia-placa);border-radius:28%;padding:calc(var(--lia-w,20px) * .16);box-sizing:border-box}

@media (prefers-reduced-motion:no-preference){
    :where(a,button,.lia-logo):hover > .lia-logo:not(.lia-trabajando):not(.lia-gira) svg,
    .lia-logo:not(.lia-trabajando):not(.lia-gira):hover svg{transform:rotate(60deg)}

    .lia-trabajando svg{animation:lia-rehilete 1.8s cubic-bezier(.45,.05,.35,1) infinite}
    .lia-trabajando{animation:lia-respira 1.8s ease-in-out infinite}

    .lia-gira svg{animation:lia-vuelta 24s linear infinite}

    .lia-aparece svg{animation:lia-entra .9s cubic-bezier(.34,1.56,.64,1) both}
}

/* Acelera, gira un pétalo de más y frena: se siente como un empujón, no un motor. */
@keyframes lia-rehilete{
    0%  {transform:rotate(0) scale(1)}
    55% {transform:rotate(250deg) scale(.9)}
    100%{transform:rotate(360deg) scale(1)}
}
@keyframes lia-respira{
    0%,100%{filter:drop-shadow(0 0 0 rgba(250,185,61,0))}
    50%    {filter:drop-shadow(0 0 calc(var(--lia-w,20px) * .22) rgba(250,185,61,.55))}
}
@keyframes lia-vuelta{to{transform:rotate(360deg)}}
@keyframes lia-entra{
    from{transform:rotate(-120deg) scale(.4);opacity:0}
    to  {transform:rotate(0) scale(1);opacity:1}
}

/* El sitio tiene su propio «Pausar movimiento» (lia-editorial.js): pausado, el
   logo se queda quieto igual que con movimiento reducido. */
html[data-motion-paused="true"] .lia-logo svg,
html[data-motion-paused="true"] .lia-logo{animation:none !important}

/* ── Dónde va en este sitio ── */
.lia-seal.lia-logo{font-size:0}
.lia-demo-heading b{display:inline-flex;align-items:center;gap:9px}
.lia-kind .lia-logo,#navegacion .lia-logo,.eyebrow .lia-logo{margin-right:6px;vertical-align:-3px}
/* Fuera del header el logo de Lía va grande: en los antetítulos se centra con el texto, no se baja. */
.eyebrow .lia-logo{margin-right:2px;vertical-align:middle}
.lia-kind .lia-logo{vertical-align:middle}
/* Sobre el fondo claro el oro solo contrasta poco: en tamaños chicos va sobre su placa. */
.lia-demo-heading .lia-logo,.lia-kind .lia-logo{background:var(--lia-placa);border-radius:28%;padding:3px;box-sizing:content-box}