/* ════════════════════════════════════════════════════════════════
   mascot.css — MOTOR VISUAL de la mascota Espumadera (EscandUP)
   Fuente única de animación. La consumen tanto la demo (index.html)
   como el widget de producción (chatbot-widget.js, vía build).

   Principio rector (ver GUIA_EMOCIONES_Y_COMPORTAMIENTO.md):
   la emoción se lee en la CARA — cejas + párpados + mirada + boca —
   y el cuerpo solo la amplifica. El timing (easing) transmite el
   sentimiento tanto como la pose.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   DEFAULTS OCULTOS
   Bocas, ojos cerrados y accesorios: opacity 0.
   Se usa opacity (no display) porque display no anima en SVG.
───────────────────────────────────────────── */
#boca_neutra,
#boca_sonrisa,
#boca_sonrisa_abierta,
#boca_hablando_1,
#boca_hablando_2,
#boca_sorpresa,
#boca_preocupacion,
#boca_duda,
#boca_orgulloso,
#lengua {
  opacity: 0;
  transition: opacity .18s ease;
}

#ojo_izquierdo_cerrado,
#ojo_derecho_cerrado {
  transition: opacity .3s ease;
}

#bombilla_idea,
#destellos_orgullo,
#alerta_coste,
#burbuja_pensando,
#lupa_analisis,
#burbuja_grafico,
#zzz_dormir,
#burbuja_aburrido,
#lineas_saludo,
#burbuja_consejo,
#confeti_celebrar {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .3s ease, transform .3s ease;
}

/* Sub-elementos que se animan por separado */
#zzz_1, #zzz_2, #zzz_3,
.confeti_pieza,
#punto_aburrido_1, #punto_aburrido_2, #punto_aburrido_3 {
  transform-box: fill-box;
  transform-origin: center;
}

/* ─────────────────────────────────────────────
   MOTOR BASE — vida permanente (línea base CASA)
   Respiración + parpadeo: la mascota NUNCA está congelada.
───────────────────────────────────────────── */
#cuerpo_completo {
  transform-origin: 250px 290px;
  animation: breathe 3.8s ease-in-out infinite;
}

#pupila_izquierda,
#pupila_derecha {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}

#parpado_izquierdo_superior {
  transform-box: fill-box;
  transform-origin: center top;
  animation: blink 5.8s infinite;
  transition: transform .25s ease;
}
#parpado_derecho_superior {
  transform-box: fill-box;
  transform-origin: center top;
  animation: blink 5.8s 0.06s infinite; /* desincronizado: más orgánico */
  transition: transform .25s ease;
}

#ceja_izquierda,
#ceja_derecha {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* Brazos — rig de 2 segmentos: hombro (grupo) + codo (fore). Reposo = abajo.
   Las poses se aplican como transform estático + transition (como la cara),
   no como keyframes, para que el brazo SUBA y se MANTENGA, y baje al salir. */
#brazo_izquierdo_grupo { transform-origin: 220px 320px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#brazo_derecho_grupo   { transform-origin: 286px 320px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#brazo_izq_fore        { transform-origin: 194px 400px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#brazo_der_fore        { transform-origin: 312px 400px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }

#micro_pulso {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ════════════════════════════════════════════
   ESTADO: NEUTRAL — espera amable, viva
═══════════════════════════════════════════ */
.state-neutral #boca_sonrisa { opacity: 1; }

/* ════════════════════════════════════════════
   ESTADO: LISTENING — atención hacia el usuario
   Eje Z: el cuerpo se inclina HACIA ADELANTE (acercamiento).
═══════════════════════════════════════════ */
.state-listening #boca_neutra { opacity: 1; }
.state-listening #micro_pulso {
  opacity: 1;
  animation: micPulse 1s ease-in-out infinite;
}
.state-listening #cuerpo_completo {
  animation: listenLean 2.4s ease-in-out infinite;
}
.state-listening #pupila_izquierda,
.state-listening #pupila_derecha {
  transform: translate(3px, 3px); /* mira al usuario */
}
.state-listening #ceja_izquierda { transform: translateY(-4px); }
.state-listening #ceja_derecha   { transform: translateY(-4px); }

/* ════════════════════════════════════════════
   ESTADO: THINKING — concentración pensativa
   Mirada ARRIBA (al "techo"), asimetría de cejas, balanceo lento.
═══════════════════════════════════════════ */
.state-thinking #burbuja_pensando {
  opacity: 1;
  animation: thinkBubblePulse 2.2s ease-in-out infinite;
}
.state-thinking #boca_duda { opacity: 1; }
.state-thinking #pupila_izquierda { transform: translate(-5px, -10px); }
.state-thinking #pupila_derecha   { transform: translate(-3px, -10px); }
.state-thinking #ceja_izquierda { transform: translateY(-9px) rotate(-6deg); }
.state-thinking #ceja_derecha   { transform: translateY(-2px) rotate(4deg); }
.state-thinking #parpado_izquierdo_superior {
  animation: none;
  transform: translateY(4px);
}
.state-thinking #cuerpo_completo {
  animation: thinkRock 3.2s ease-in-out infinite;
}
.state-thinking #brazo_derecho_grupo { transform: rotate(-104deg); }  /* sube el brazo */
.state-thinking #brazo_der_fore       { transform: rotate(-58deg); }  /* dobla el codo → mano a la sien */

/* ════════════════════════════════════════════
   ESTADO: IDEA — chispa de energía (temporal)
═══════════════════════════════════════════ */
.state-idea #bombilla_idea {
  opacity: 1;
  animation: ideaBulb .9s ease-in-out infinite;
}
.state-idea #boca_sonrisa_abierta { opacity: 1; }
.state-idea #lengua               { opacity: 1; }
.state-idea #ceja_izquierda { transform: translateY(-12px) rotate(-4deg); }
.state-idea #ceja_derecha   { transform: translateY(-12px) rotate(4deg); }
.state-idea #parpado_izquierdo_superior { animation: none; transform: translateY(-5px); }
.state-idea #parpado_derecho_superior   { animation: none; transform: translateY(-5px); }
.state-idea #cuerpo_completo {
  animation: ideaPop 1.1s cubic-bezier(.36,0,.66,-.56) infinite;
}
.state-idea #brazo_derecho_grupo { transform: rotate(-148deg); }  /* brazo arriba */
.state-idea #brazo_der_fore       { transform: rotate(-18deg); }   /* mano señalando */

/* ════════════════════════════════════════════
   ESTADO: EXPLAINING — habla y gesticula
═══════════════════════════════════════════ */
.state-explaining #burbuja_grafico {
  opacity: 1;
  animation: floatY 2s ease-in-out infinite;
}
.state-explaining #boca_hablando_1 { animation: talkA .42s steps(1, end) infinite; }
.state-explaining #boca_hablando_2 { animation: talkB .42s steps(1, end) infinite; }
.state-explaining #brazo_izquierdo_grupo { transform: rotate(-26deg); }            /* levanta un poco */
.state-explaining #brazo_izq_fore { animation: explainFore 1s ease-in-out infinite; } /* gesticula con el antebrazo */
.state-explaining #cuerpo_completo {
  animation: talkBob .84s ease-in-out infinite;
}
.state-explaining #pupila_izquierda,
.state-explaining #pupila_derecha {
  transform: translate(3px, 1px);
}

/* ════════════════════════════════════════════
   ESTADO: ANALYZING — escaneo lógico
   Ojos leen IZQUIERDA→DERECHA (procesando datos).
═══════════════════════════════════════════ */
.state-analyzing #lupa_analisis {
  opacity: 1;
  animation: lupaSweep 2.2s ease-in-out infinite;
}
.state-analyzing #burbuja_grafico { opacity: 1; }
.state-analyzing #boca_sonrisa    { opacity: 1; }
.state-analyzing #pupila_izquierda,
.state-analyzing #pupila_derecha {
  animation: scanEyes 1.6s ease-in-out infinite;
}
.state-analyzing #ceja_izquierda { transform: translateY(7px) rotate(8deg); }
.state-analyzing #ceja_derecha   { transform: translateY(7px) rotate(-8deg); }
.state-analyzing #parpado_izquierdo_superior { animation: none; transform: translateY(5px); }
.state-analyzing #parpado_derecho_superior   { animation: none; transform: translateY(5px); }
.state-analyzing #cuerpo_completo {
  animation: analyzeForward 2.4s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   ESTADO: PROUD — satisfacción (temporal)
   Ojos en "luna creciente" = felicidad genuina.
═══════════════════════════════════════════ */
.state-proud #destellos_orgullo {
  opacity: 1;
  animation: sparkleRotate 1s ease-in-out infinite;
}
.state-proud #boca_orgulloso { opacity: 1; }
.state-proud #lengua         { opacity: 1; }
.state-proud #ceja_izquierda { transform: translateY(-8px) rotate(-5deg); }
.state-proud #ceja_derecha   { transform: translateY(-8px) rotate(5deg); }
.state-proud #parpado_izquierdo_superior { animation: none; transform: translateY(8px) scaleY(1.5); }
.state-proud #parpado_derecho_superior   { animation: none; transform: translateY(8px) scaleY(1.5); }
.state-proud #cuerpo_completo {
  animation: proudHop 1s cubic-bezier(.36,0,.66,-.56) infinite;
}
.state-proud #brazo_izquierdo_grupo { transform: rotate(132deg); }   /* V de victoria: brazo izq arriba */
.state-proud #brazo_izq_fore         { transform: rotate(28deg); }
.state-proud #brazo_derecho_grupo    { transform: rotate(-132deg); } /* brazo dcho arriba */
.state-proud #brazo_der_fore         { transform: rotate(-28deg); }

/* ════════════════════════════════════════════
   ESTADO: WARNING — alarma de coste
   Cejas en V hacia el centro, mirada al problema, sacudida.
═══════════════════════════════════════════ */
.state-warning #alerta_coste {
  opacity: 1;
  animation: warningBulge .45s ease-in-out infinite;
}
.state-warning #boca_preocupacion { opacity: 1; }
.state-warning #ceja_izquierda { transform: translateY(10px) rotate(22deg) translateX(4px); }
.state-warning #ceja_derecha   { transform: translateY(10px) rotate(-22deg) translateX(-4px); }
.state-warning #parpado_izquierdo_superior { animation: none; transform: translateY(7px) rotate(5deg); }
.state-warning #parpado_derecho_superior   { animation: none; transform: translateY(7px) rotate(-5deg); }
.state-warning #pupila_izquierda { transform: translate(5px, 7px); }
.state-warning #pupila_derecha   { transform: translate(-5px, 7px); }
.state-warning #cuerpo_completo {
  animation: warningShake .45s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   ESTADO: ERROR — confusión total (todo asimétrico)
═══════════════════════════════════════════ */
.state-error #boca_duda { opacity: 1; }
.state-error #cuerpo_completo {
  animation: errorTilt 2s ease-in-out infinite;
}
.state-error #pupila_izquierda { transform: translate(-10px, -4px); }
.state-error #pupila_derecha   { transform: translate(8px, 6px); }
.state-error #ceja_izquierda { transform: translateY(-10px) rotate(-12deg); }
.state-error #ceja_derecha   { transform: translateY(6px)  rotate(-10deg); }
.state-error #parpado_izquierdo_superior { animation: none; transform: translateY(-4px); }
.state-error #parpado_derecho_superior   { animation: none; transform: translateY(8px); }

/* ════════════════════════════════════════════
   ESTADO: GREETING — saludo de bienvenida (temporal)
   Entrada tipo Clippy: aparece, saluda con la mano, sonríe.
═══════════════════════════════════════════ */
.state-greeting #boca_sonrisa_abierta { opacity: 1; }
.state-greeting #lineas_saludo {
  opacity: 1;
  animation: wavePulse .5s ease-in-out infinite;
}
.state-greeting #ceja_izquierda { transform: translateY(-6px); }
.state-greeting #ceja_derecha   { transform: translateY(-6px); }
.state-greeting #pupila_izquierda,
.state-greeting #pupila_derecha { transform: translate(2px, 2px); }
.state-greeting #cuerpo_completo {
  animation: greetBob 1.4s ease-in-out infinite;
}
.state-greeting #brazo_derecho_grupo { transform: rotate(-150deg); }                /* brazo arriba */
.state-greeting #brazo_der_fore { animation: waveFore .6s ease-in-out infinite; }   /* saluda con el antebrazo */

/* ════════════════════════════════════════════
   ESTADO: TIP / CONSEJO — sugerencia proactiva (temporal)
   El "buen Clippy": una ceja arriba (complicidad), se inclina
   hacia el usuario (eje Z), dedo índice arriba, globo con "!".
═══════════════════════════════════════════ */
.state-tip #burbuja_consejo {
  opacity: 1;
  animation: floatY 2s ease-in-out infinite;
}
.state-tip #boca_sonrisa { opacity: 1; }
.state-tip #ceja_izquierda { transform: translateY(-10px) rotate(-5deg); } /* ceja cómplice */
.state-tip #ceja_derecha   { transform: translateY(-1px); }
.state-tip #pupila_izquierda,
.state-tip #pupila_derecha { transform: translate(3px, 1px); } /* mira al usuario */
.state-tip #parpado_derecho_superior { animation: none; transform: translateY(3px); } /* guiño sutil */
.state-tip #cuerpo_completo {
  animation: tipLean 2.4s ease-in-out infinite;
}
.state-tip #brazo_derecho_grupo { transform: rotate(-150deg); }                  /* brazo arriba, dedo índice */
.state-tip #brazo_der_fore { animation: tipFore 2.4s ease-in-out infinite; }     /* pequeño toque cómplice */

/* ════════════════════════════════════════════
   ESTADO: CELEBRATING — celebración de hito (temporal)
   Más grande que PROUD: salto alto, dos brazos arriba, confeti.
═══════════════════════════════════════════ */
.state-celebrating #confeti_celebrar { opacity: 1; }
.state-celebrating .confeti_pieza { animation: confettiFall 1.7s linear infinite; }
.state-celebrating .confeti_pieza:nth-child(2)  { animation-delay: .15s; }
.state-celebrating .confeti_pieza:nth-child(3)  { animation-delay: .45s; }
.state-celebrating .confeti_pieza:nth-child(4)  { animation-delay: .25s; }
.state-celebrating .confeti_pieza:nth-child(5)  { animation-delay: .65s; }
.state-celebrating .confeti_pieza:nth-child(6)  { animation-delay: .10s; }
.state-celebrating .confeti_pieza:nth-child(7)  { animation-delay: .55s; }
.state-celebrating .confeti_pieza:nth-child(8)  { animation-delay: .35s; }
.state-celebrating .confeti_pieza:nth-child(9)  { animation-delay: .80s; }
.state-celebrating .confeti_pieza:nth-child(10) { animation-delay: .20s; }
.state-celebrating .confeti_pieza:nth-child(11) { animation-delay: .70s; }
.state-celebrating .confeti_pieza:nth-child(12) { animation-delay: .40s; }
.state-celebrating #destellos_orgullo {
  opacity: 1;
  animation: sparkleRotate 1s ease-in-out infinite;
}
.state-celebrating #boca_orgulloso { opacity: 1; }
.state-celebrating #lengua         { opacity: 1; }
.state-celebrating #ceja_izquierda { transform: translateY(-12px) rotate(-5deg); }
.state-celebrating #ceja_derecha   { transform: translateY(-12px) rotate(5deg); }
.state-celebrating #parpado_izquierdo_superior { animation: none; transform: translateY(-6px); }
.state-celebrating #parpado_derecho_superior   { animation: none; transform: translateY(-6px); }
.state-celebrating #cuerpo_completo {
  animation: celebrateJump .9s cubic-bezier(.34,1.56,.64,1) infinite;
}
.state-celebrating #brazo_izquierdo_grupo { transform: rotate(134deg); }
.state-celebrating #brazo_derecho_grupo   { transform: rotate(-134deg); }
.state-celebrating #brazo_izq_fore { animation: celebForeL .5s ease-in-out infinite; }  /* rebote de antebrazos */
.state-celebrating #brazo_der_fore { animation: celebForeR .5s ease-in-out infinite; }

/* ════════════════════════════════════════════
   ESTADO: SLEEPING — dormido (reposo profundo CASA)
   Ojos CERRADOS, cuerpo desplomado, respiración lenta, Zzz.
═══════════════════════════════════════════ */
.state-sleeping #ojo_izquierdo_cerrado,
.state-sleeping #ojo_derecho_cerrado { opacity: 1; }
.state-sleeping #pupila_izquierda,
.state-sleeping #pupila_derecha,
.state-sleeping #ojo_izquierdo_brillo,
.state-sleeping #ojo_derecho_brillo { opacity: 0; }
.state-sleeping #ojo_izquierdo_blanco,
.state-sleeping #ojo_derecho_blanco { opacity: .2; }
.state-sleeping #parpado_izquierdo_superior,
.state-sleeping #parpado_derecho_superior { animation: none; opacity: 0; }
.state-sleeping #ceja_izquierda { transform: translateY(4px); opacity: .55; }
.state-sleeping #ceja_derecha   { transform: translateY(4px); opacity: .55; }
.state-sleeping #boca_duda { opacity: 1; }
.state-sleeping #cuerpo_completo {
  animation: sleepBreathe 4.6s ease-in-out infinite;
}
.state-sleeping #zzz_dormir { opacity: 1; }
.state-sleeping #zzz_1 { animation: zzzFloat 3s ease-in-out 0s   infinite; }
.state-sleeping #zzz_2 { animation: zzzFloat 3s ease-in-out .6s  infinite; }
.state-sleeping #zzz_3 { animation: zzzFloat 3s ease-in-out 1.2s infinite; }

/* ════════════════════════════════════════════
   ESTADO: BORED — aburrido (Boredom Timer 30s, CASA)
   Párpados a media asta, mirada que vaga, balanceo apático, "...".
═══════════════════════════════════════════ */
.state-bored #boca_neutra { opacity: 1; }
.state-bored #burbuja_aburrido { opacity: 1; }
.state-bored #punto_aburrido_1 { animation: boredDot 1.6s ease-in-out 0s   infinite; }
.state-bored #punto_aburrido_2 { animation: boredDot 1.6s ease-in-out .25s infinite; }
.state-bored #punto_aburrido_3 { animation: boredDot 1.6s ease-in-out .5s  infinite; }
.state-bored #ceja_izquierda { transform: translateY(4px) rotate(-6deg); }
.state-bored #ceja_derecha   { transform: translateY(4px) rotate(6deg); }
.state-bored #parpado_izquierdo_superior { animation: none; transform: translateY(6px); }
.state-bored #parpado_derecho_superior   { animation: none; transform: translateY(6px); }
.state-bored #pupila_izquierda,
.state-bored #pupila_derecha { animation: boredLook 5s ease-in-out infinite; }
.state-bored #cuerpo_completo {
  animation: boredSway 5s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */

/* Vida base */
@keyframes breathe {
  0%,100% { transform: translateY(0) scale(1,1); }
  50%     { transform: translateY(-5px) scale(1.008,0.994); }
}
@keyframes blink {
  0%,86%,100% { transform: scaleY(1); }
  90%,94%     { transform: scaleY(3.5); }
}

/* Listening */
@keyframes micPulse {
  0%,100% { opacity: .12; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.28); }
}
@keyframes listenLean {
  0%,100% { transform: rotate(0deg) translateY(0) scale(1); }
  50%     { transform: rotate(-3deg) translateY(-2px) scale(1.02); }
}

/* Thinking */
@keyframes thinkRock {
  0%   { transform: rotate(0deg) translateY(0); }
  30%  { transform: rotate(-8deg) translateY(-5px); }
  60%  { transform: rotate(-5deg) translateY(-3px); }
  100% { transform: rotate(0deg) translateY(0); }
}
@keyframes thinkBubblePulse {
  0%,100% { transform: scale(1) translateY(0);     opacity: .9; }
  50%     { transform: scale(1.07) translateY(-4px); opacity: 1; }
}
@keyframes chinStroke {
  0%,100% { transform: rotate(0deg); }
  35%     { transform: rotate(-68deg) translateY(-5px); }
  55%     { transform: rotate(-58deg) translateY(-3px); }
}

/* Idea */
@keyframes ideaBulb {
  0%,100% { transform: scale(1);    opacity: .85; filter: brightness(1); }
  50%     { transform: scale(1.22); opacity: 1;   filter: brightness(1.5) drop-shadow(0 0 12px #ffd15a); }
}
@keyframes ideaPop {
  0%   { transform: translateY(0)    scale(1,1); }
  18%  { transform: translateY(-4px) scale(0.96,1.04); }   /* anticipación */
  40%  { transform: translateY(-22px) scale(1.06,0.92); }
  52%  { transform: translateY(-24px) scale(0.96,1.05); }
  70%  { transform: translateY(-12px) scale(1.03,0.97); }
  85%  { transform: translateY(-2px) scale(0.98,1.03); }
  100% { transform: translateY(0)    scale(1,1); }
}
@keyframes ideaArm {
  0%,100% { transform: rotate(0deg); }
  45%     { transform: rotate(-18deg) translateY(-12px); }
}

/* Explaining */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@keyframes talkA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talkB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes talkBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-4px) rotate(.6deg); }
}
@keyframes explainSwing {
  0%,100% { transform: rotate(-15deg); }
  50%     { transform: rotate(18deg); }
}

/* Analyzing */
@keyframes scanEyes {
  0%,100% { transform: translateX(-10px); }
  50%     { transform: translateX(10px); }
}
@keyframes lupaSweep {
  0%,100% { transform: translateX(0)    rotate(-8deg); }
  50%     { transform: translateX(10px) rotate(8deg); }
}
@keyframes analyzeForward {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(5px) scale(1.012); }
}

/* Proud */
@keyframes sparkleRotate {
  0%,100% { opacity: .55; transform: scale(.88) rotate(0deg); }
  50%     { opacity: 1;   transform: scale(1.18) rotate(18deg); }
}
@keyframes proudHop {
  0%   { transform: translateY(0)     scale(1,1); }
  15%  { transform: translateY(-4px)  scale(0.95,1.05); }
  38%  { transform: translateY(-24px) scale(1.07,0.91); }
  50%  { transform: translateY(-26px) scale(0.95,1.06); }
  68%  { transform: translateY(-14px) scale(1.04,0.95); }
  82%  { transform: translateY(-3px)  scale(0.97,1.04); }
  100% { transform: translateY(0)     scale(1,1); }
}
@keyframes proudArmL {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(108deg) translateY(-8px); }
}
@keyframes proudArmR {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(-22deg) translateY(-14px); }
}

/* Warning */
@keyframes warningBulge {
  0%,100% { transform: scale(1);    opacity: .85; }
  50%     { transform: scale(1.18); opacity: 1;   filter: drop-shadow(0 0 8px #ffcf58); }
}
@keyframes warningShake {
  0%,100% { transform: translateX(0)   rotate(0deg); }
  20%     { transform: translateX(-8px) rotate(-2.5deg); }
  40%     { transform: translateX(8px)  rotate(2.5deg); }
  60%     { transform: translateX(-5px) rotate(-1.5deg); }
  80%     { transform: translateX(5px)  rotate(1.5deg); }
}

/* Error */
@keyframes errorTilt {
  0%,100% { transform: rotate(0deg) translateY(0); }
  40%     { transform: rotate(6deg) translateY(4px); }
  60%     { transform: rotate(4deg) translateY(2px); }
}

/* Greeting */
@keyframes greetBob {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.01); }
}
@keyframes waveArm {
  0%,100% { transform: rotate(-6deg); }
  50%     { transform: rotate(10deg); }
}
@keyframes wavePulse {
  0%,100% { opacity: .3; }
  50%     { opacity: 1; }
}

/* Tip / consejo */
@keyframes tipLean {
  0%,100% { transform: scale(1) translateY(0); }
  18%     { transform: scale(1.03) translateY(-2px); }   /* se acerca */
  36%     { transform: scale(1.015) translateY(0); }
}
/* Antebrazos (codo) — gestos del rig nuevo */
@keyframes explainFore { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(-52deg); } }
@keyframes waveFore    { 0%,100% { transform: rotate(-28deg); } 50% { transform: rotate(6deg); } }
@keyframes tipFore     { 0%,100% { transform: rotate(-6deg); }  25% { transform: rotate(-20deg); } }
@keyframes celebForeL  { 0%,100% { transform: rotate(24deg); }  50% { transform: rotate(42deg); } }
@keyframes celebForeR  { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(-42deg); } }

/* Celebrating */
@keyframes celebrateJump {
  0%   { transform: translateY(0)    scale(1,1); }
  12%  { transform: translateY(-5px) scale(0.94,1.06); }  /* anticipación */
  35%  { transform: translateY(-32px) scale(1.08,0.90); }
  48%  { transform: translateY(-34px) scale(0.95,1.06); }
  68%  { transform: translateY(-16px) scale(1.05,0.95); }
  84%  { transform: translateY(-3px) scale(0.97,1.04); }
  100% { transform: translateY(0)    scale(1,1); }
}
@keyframes celebrateArmR {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(-34deg) translateY(-16px); }
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translateY(-12px) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(130px) rotate(220deg); }
}

/* Sleeping */
@keyframes sleepBreathe {
  0%,100% { transform: rotate(3deg) translateY(7px) scale(1,0.99); }
  50%     { transform: rotate(3deg) translateY(2px) scale(1.006,1); }
}
@keyframes zzzFloat {
  0%   { opacity: 0; transform: translate(0,6px) scale(.7); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(12px,-24px) scale(1.12); }
}

/* Bored */
@keyframes boredLook {
  0%,18%   { transform: translate(-9px, 3px); }
  40%,58%  { transform: translate(9px, 3px); }
  80%,100% { transform: translate(-9px, 3px); }
}
@keyframes boredSway {
  0%,100% { transform: rotate(-2deg) translateY(2px); }
  50%     { transform: rotate(2deg)  translateY(4px); }
}
@keyframes boredDot {
  0%,100% { opacity: .25; }
  50%     { opacity: 1; }
}

/* ════════════════════════════════════════════
   ACCESIBILIDAD — prefers-reduced-motion
   Se apagan los bucles continuos (respirar, saltar, sacudir,
   confeti, Zzz…). La EMOCIÓN sigue legible: la pose facial
   (cejas/párpados/boca/mirada) y los accesorios permanecen
   visibles de forma estática.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #cuerpo_completo,
  #parpado_izquierdo_superior, #parpado_derecho_superior,
  #brazo_izquierdo_grupo, #brazo_derecho_grupo,
  #brazo_izq_fore, #brazo_der_fore,
  #pupila_izquierda, #pupila_derecha,
  #micro_pulso,
  #zzz_1, #zzz_2, #zzz_3,
  .confeti_pieza,
  #punto_aburrido_1, #punto_aburrido_2, #punto_aburrido_3,
  #bombilla_idea, #destellos_orgullo, #alerta_coste,
  #burbuja_pensando, #lupa_analisis, #burbuja_grafico,
  #burbuja_consejo, #lineas_saludo, #burbuja_aburrido {
    animation: none !important;
  }
}