/*
 * Noa con vida (lote 029b): Noa es la mascota oficial de Wiio, la «W» 3D con «wiio». Está armada por piezas
 * (assets/img/noa/rig: patas, brazos y cuerpo sin cara, posiciones y pivotes de design/mascota-wiio/rig/rig.json) y su cara
 * es vector (includes/noa/cara-noa.svg, una vez por página; cada Noa la usa con <use>).
 * El JS (assets/js/noa-vivo.js) solo cambia variables (--gx/--gy/--gk: mirada; --noa-rot/--noa-s: inclinación) y clases
 * (is-<cara>, is-parpadeo, is-boca, is-saluda, is-salta, is-pose…). Las poses (assets/img/noa/poses) entran con un rebote
 * y luego vuelve la Noa armada. Sin estilos en línea (CSP).
 */
.noa-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.noa-av { position: relative; display: inline-block; flex: none; vertical-align: middle; isolation: isolate; width: 40px; height: 40px;
  background: none; rotate: var(--noa-rot, 0deg); scale: var(--noa-s, 1);
  transition: rotate .45s cubic-bezier(.22, 1, .36, 1), scale .45s cubic-bezier(.22, 1, .36, 1); }
.noa-av--cuerpo { width: 88px; height: 86px; }

/* El rig: lienzo de 533×521 alineado abajo y al centro; el torso respira desde la base del cuerpo. */
.nr { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 533 / 521; translate: -50% 0;
  transition: opacity .22s ease, scale .3s cubic-bezier(.22, 1, .36, 1); }
.nr__p { position: absolute; display: block; max-width: none; margin: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.nr__torso { position: absolute; inset: 0; animation: nr-respira 3.6s ease-in-out infinite; }
.nr__brazo--d { animation: nr-brazo-reposo 5.2s ease-in-out infinite; }
.nr__brazo--i { animation: nr-brazo-reposo 5.2s ease-in-out -2.6s infinite; }
.noa-av__cara { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@keyframes nr-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.008, 1.018); } }
@keyframes nr-brazo-reposo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
/* Pupilas (generado por fix029b/cara.py): base de cada expresión y alcance de la mirada */
.nq-p1 { --bx: 7; --by: -1; --m: 10.5; }
.nq-p2 { --bx: -7; --by: -1; --m: 10.5; }
.nq-p3 { --bx: 6; --by: -2; --m: 10.5; }
.nq-p4 { --bx: 2; --by: 0; --m: 21; }
.nq-p5 { --bx: -2; --by: 0; --m: 21; }
.nq-p6 { --bx: -8; --by: -11; --m: 10.5; }
.nq-p7 { --bx: -10; --by: -11; --m: 10.5; }
.nq-p8 { --bx: 3; --by: 7; --m: 10.5; }
.nq-p9 { --bx: -3; --by: 7; --m: 10.5; }
.nq-p10 { --bx: -6; --by: 2; --m: 15.5; }
.nq-p11 { --bx: -9; --by: 2; --m: 15.5; }
.nq-p12 { --bx: 3; --by: 9; --m: 10.5; }
.nq-p13 { --bx: -3; --by: 9; --m: 10.5; }
.nq-p14 { --bx: 8; --by: -8; --m: 10.5; }
.nq-p15 { --bx: -2; --by: 7; --m: 13.5; }
.nq-p16 { --bx: -10; --by: 3; --m: 10.5; }
.nq-p17 { --bx: 2; --by: -10; --m: 10.5; }
.nq-p18 { --bx: -2; --by: -10; --m: 10.5; }
/* Rig: lienzo 533×521; piezas en % del lienzo, pivotes de rig.json */
.nr__cuerpo { left: 6.567%; top: 2.495%; width: 87.054%; height: 72.169%; }
.nr__brazo--i { left: 2.439%; top: 41.459%; width: 20.075%; height: 34.933%; transform-origin: 75.61% 16.48%; }
.nr__brazo--d { left: 77.486%; top: 41.459%; width: 20.075%; height: 35.125%; transform-origin: 23.74% 16.78%; }
.nr__pata--i { left: 31.520%; top: 67.754%; width: 13.508%; height: 29.750%; transform-origin: 63.89% 15.48%; }
.nr__pata--d { left: 54.972%; top: 67.946%; width: 13.508%; height: 29.559%; transform-origin: 35.42% 14.94%; }
.nr__torso { transform-origin: 49.906% 73.321%; }

/* Avatar (barra de arriba, chats, listas): cuerpo y cara encuadrados, sin brazos ni patas. */
.noa-av--cara .nr { left: -7.55%; top: 6.7%; bottom: auto; width: 114.9%; height: 112.3%; translate: none; aspect-ratio: auto; }
.noa-av--cara .nr__pata, .noa-av--cara .nr__brazo { display: none; }

/* Expresiones: una capa por cara (la activa la decide is-<cara>). «aburrida» usa la de cansada. */
.nx { display: none; }
.noa-av.is-normal .nx--normal, .noa-av.is-feliz .nx--feliz, .noa-av.is-guino .nx--guino, .noa-av.is-sorprendida .nx--sorprendida,
.noa-av.is-pensando .nx--pensando, .noa-av.is-triste .nx--triste, .noa-av.is-preocupada .nx--preocupada, .noa-av.is-cansada .nx--cansada,
.noa-av.is-aburrida .nx--cansada, .noa-av.is-confundida .nx--confundida, .noa-av.is-coqueta .nx--coqueta, .noa-av.is-idea .nx--idea,
.noa-av.is-dormida .nx--dormida { display: inline; }

/* Mirada: base de la expresión y, hacia el puntero, hasta su alcance (--gk = cuánto mira). */
.nq-pup { transform: translate(calc((var(--bx, 0) * (1 - var(--gk, 0)) + var(--gx, 0) * var(--m, 10)) * 1px), calc((var(--by, 0) * (1 - var(--gk, 0)) + var(--gy, 0) * var(--m, 10)) * 1px));
  transition: transform .14s ease-out; }
/* Parpadeo y boca (habla abriendo y cerrando). */
.nq-cierre { opacity: var(--nq-cierre, 0); }
.noa-av.is-parpadeo { --nq-cierre: 1; }
.nq-boca-a { display: var(--nq-a, none); }
.nq-boca-c { display: var(--nq-c, inline); }
.noa-av.is-boca { --nq-a: inline; --nq-c: none; }
/* Dormida: las «z» suben; idea: los destellos laten. */
.nq-zzz text { animation: nq-z 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nq-zzz text:nth-child(2) { animation-delay: .4s; }
.nq-zzz text:nth-child(3) { animation-delay: .8s; }
@keyframes nq-z { 0%, 100% { opacity: .25; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }
.nq-destellos { animation: nq-destello 1.4s ease-in-out infinite; }
@keyframes nq-destello { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Saluda con el brazo (el de la izquierda de la imagen sube y se mece). */
.noa-av.is-saluda .nr__brazo--i { animation: nr-saludo 1.6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nr-saludo { 0% { transform: rotate(0); } 18% { transform: rotate(118deg); } 30% { transform: rotate(96deg); } 42% { transform: rotate(122deg); }
  54% { transform: rotate(96deg); } 66% { transform: rotate(122deg); } 80% { transform: rotate(104deg); } 100% { transform: rotate(0); } }
/* Camina (patas y brazos alternados, rebote) y corre (más rápido y más amplio). */
.is-camina .noa-av--cuerpo .nr__pata--i, .noa-av--cuerpo.is-camina .nr__pata--i { animation: nr-pata .56s ease-in-out infinite; }
.is-camina .noa-av--cuerpo .nr__pata--d, .noa-av--cuerpo.is-camina .nr__pata--d { animation: nr-pata .56s ease-in-out -.28s infinite; }
.is-camina .noa-av--cuerpo .nr__brazo--i, .noa-av--cuerpo.is-camina .nr__brazo--i { animation: nr-brazo .56s ease-in-out -.28s infinite; }
.is-camina .noa-av--cuerpo .nr__brazo--d, .noa-av--cuerpo.is-camina .nr__brazo--d { animation: nr-brazo .56s ease-in-out infinite; }
.is-camina .noa-av--cuerpo .nr, .noa-av--cuerpo.is-camina .nr { animation: nr-rebote .28s ease-in-out infinite alternate; }
.is-corre .noa-av--cuerpo .nr__pata--i { animation: nr-pata-corre .3s ease-in-out infinite; }
.is-corre .noa-av--cuerpo .nr__pata--d { animation: nr-pata-corre .3s ease-in-out -.15s infinite; }
.is-corre .noa-av--cuerpo .nr__brazo--i { animation: nr-brazo-corre .3s ease-in-out -.15s infinite; }
.is-corre .noa-av--cuerpo .nr__brazo--d { animation: nr-brazo-corre .3s ease-in-out infinite; }
.is-corre .noa-av--cuerpo .nr { animation: nr-rebote .15s ease-in-out infinite alternate; }
@keyframes nr-pata { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes nr-brazo { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes nr-pata-corre { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes nr-brazo-corre { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes nr-rebote { from { transform: translateY(0); } to { transform: translateY(-2.2%); } }

/* Poses: la Noa armada se esconde, la pose entra con un rebote suave; al terminar, vuelve la armada. */
.noa-av__pose { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0; opacity: 0;
  pointer-events: none; transform-origin: 50% 100%; user-select: none; }
.noa-av__pose[hidden] { display: none; }
.noa-av.is-pose .nr { opacity: 0; scale: .7; }
.noa-av.is-pose .noa-av__pose { animation: nr-pose-entra .6s cubic-bezier(.22, 1, .36, 1) forwards; }
.noa-av.is-pose.is-pose-anda .noa-av__pose { animation: nr-pose-entra .3s cubic-bezier(.22, 1, .36, 1) forwards, nr-anda .5s ease-in-out .3s infinite; }
.noa-av.is-pose.is-pose-corre .noa-av__pose { animation: nr-pose-entra .25s cubic-bezier(.22, 1, .36, 1) forwards, nr-anda .28s ease-in-out .25s infinite; }
.noa-av.is-pose-sale .noa-av__pose { opacity: 1; animation: nr-pose-sale .26s ease-in forwards; }
.noa-av.is-voltea .noa-av__pose { scale: -1 1; }
.noa-av.is-vuelve .nr { animation: nr-vuelve .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes nr-pose-entra { 0% { opacity: 0; transform: scale(.55) translateY(6%); } 55% { opacity: 1; transform: scale(1.07) translateY(-2%); } 78% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes nr-pose-sale { to { opacity: 0; transform: scale(.7); } }
@keyframes nr-anda { 0%, 100% { opacity: 1; transform: translateY(0) rotate(-2deg); } 50% { opacity: 1; transform: translateY(-5%) rotate(2deg); } }
@keyframes nr-vuelve { 0% { scale: .7; } 60% { scale: 1.06; } 100% { scale: 1; } }

/* Pensando: se mece de un lado a otro, como quien busca una idea. */
.noa-av.is-piensa { animation: noa-piensa 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes noa-piensa { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }

/* Movimientos del cuerpo */
.noa-av.is-hola { animation: noa-hola .9s cubic-bezier(.36, .07, .19, .97); }
@keyframes noa-hola { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg) scale(1.05); } 45% { transform: rotate(8deg) scale(1.05); } 70% { transform: rotate(-4deg); } }
.noa-av--cuerpo.is-hola { animation: none; }
.noa-av--cuerpo.is-hola .nr__brazo--i { animation: nr-saludo 1.2s cubic-bezier(.22, 1, .36, 1) both; }
.noa-av.is-salta { animation: noa-salta .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes noa-salta { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14%) scale(1.04, .96); } 55% { transform: translateY(0) scale(1.06, .94); } 75% { transform: translateY(-4%); } }
.noa-av.is-alerta { animation: noa-alerta 1.6s ease-in-out 2; }
@keyframes noa-alerta { 0%, 100% { transform: none; } 10%, 30% { transform: translateY(-8%) rotate(-6deg); } 20%, 40% { transform: translateY(-8%) rotate(6deg); } 50% { transform: none; } }

/* Lote 030 · Al prender el sonido: levanta el brazo derecho con su megáfono (gira con el brazo) y anuncia. */
.nr__mega { position: absolute; left: 77.486%; top: 41.459%; width: 20.075%; height: 35.125%; transform-origin: 23.74% 16.78%;
  opacity: 0; pointer-events: none; z-index: 2; }
.nr__mega svg { position: absolute; left: 22%; top: 70%; width: 140%; height: auto; overflow: visible; }
.noa-av.is-megafono .nr__brazo--d { z-index: 1; animation: nr-megafono 2.6s cubic-bezier(.22, 1, .36, 1) both; }
.noa-av.is-megafono .nr__mega { animation: nr-megafono 2.6s cubic-bezier(.22, 1, .36, 1) both, nr-mega-ve 2.6s linear both; }
.noa-av.is-megafono .nr { animation: nr-anuncia 2.6s ease-in-out both; transform-origin: 50% 100%; }
@keyframes nr-megafono { 0% { transform: rotate(0); } 16% { transform: rotate(-118deg); } 28% { transform: rotate(-104deg); } 40% { transform: rotate(-114deg); }
  52% { transform: rotate(-104deg); } 64% { transform: rotate(-112deg); } 84% { transform: rotate(-108deg); } 100% { transform: rotate(0); } }
@keyframes nr-mega-ve { 0%, 6% { opacity: 0; } 14%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes nr-anuncia { 0%, 100% { transform: none; } 14% { transform: translateY(-6%) rotate(-4deg); } 26% { transform: translateY(0) rotate(-3deg); } 80% { transform: rotate(-2deg); } }
/* Al silenciar: triste, se encoge y mira abajo; luego se tapa la boca (pose «avergonzada»). */
.noa-av.is-silencia .nr { animation: nr-encoge .5s ease-out both; transform-origin: 50% 100%; }
@keyframes nr-encoge { from { transform: none; } to { transform: scale(.97, .95) rotate(3deg); } }

/* Lote 030 · Vida en reposo: micro-gestos (se balancea, golpecito con el pie, se estira, mira el reloj). */
.noa-av.is-mg-balancea .nr { animation: nr-balancea 2s ease-in-out; transform-origin: 50% 100%; }
@keyframes nr-balancea { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 50% { transform: rotate(3.5deg); } 75% { transform: rotate(-2deg); } }
.noa-av.is-mg-pie .nr__pata--d { animation: nr-pie .42s ease-in-out 3; }
@keyframes nr-pie { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-16deg); } }
.noa-av.is-mg-estira .nr__brazo--i { animation: nr-estira-i 1.6s ease-in-out; }
.noa-av.is-mg-estira .nr__brazo--d { animation: nr-estira-d 1.6s ease-in-out; }
.noa-av.is-mg-estira .nr__torso { animation: nr-estira-t 1.6s ease-in-out; }
@keyframes nr-estira-i { 0%, 100% { transform: rotate(0); } 35%, 70% { transform: rotate(124deg); } }
@keyframes nr-estira-d { 0%, 100% { transform: rotate(0); } 35%, 70% { transform: rotate(-124deg); } }
@keyframes nr-estira-t { 0%, 100% { transform: scale(1, 1); } 35%, 70% { transform: scale(.98, 1.05); } }
.noa-av.is-mg-reloj .nr__brazo--i { z-index: 3; animation: nr-reloj 1.9s cubic-bezier(.22, 1, .36, 1); }
@keyframes nr-reloj { 0%, 100% { transform: rotate(0); } 22%, 78% { transform: rotate(-72deg); } }

@media (prefers-reduced-motion: reduce) {
  .nr__mega { display: none; }
  .noa-av, .nr, .nr__torso, .nr__p, .nq-pup, .nq-zzz text, .nq-destellos, .noa-av__pose { animation: none !important; transition: none !important; }
  .noa-av.is-pose .noa-av__pose { opacity: 1; }
}
[data-noa-ir] { cursor: pointer; }