/* Weboo V4.16.2 — OO Integración Nativa
   Mascota SVG reactiva, transparente y controlada por estados reales. */

.oo-stage{
  min-height:330px;
  margin:18px auto 8px;
  overflow:visible;
}

.oo-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  height:210px;
  transform:translate(-50%,-49%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(63,196,247,.13),rgba(63,196,247,.025) 52%,transparent 73%);
  filter:blur(5px);
  pointer-events:none;
}

.oo-live-mascot{
  position:relative;
  z-index:2;
  display:block;
  width:min(100%,345px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 24px 24px rgba(0,15,24,.28));
  transform-origin:50% 55%;
  animation:ooLiveFloat 6.4s ease-in-out infinite;
  will-change:transform;
}

.oo-live-shadow{
  position:absolute;
  left:50%;
  bottom:34px;
  z-index:1;
  width:145px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,16,25,.23);
  filter:blur(8px);
  animation:ooLiveShadow 6.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ooLiveFloat{
  0%,100%{transform:translateY(0) rotate(-.12deg)}
  29%{transform:translateY(-5px) rotate(.18deg)}
  54%{transform:translateY(-1px) rotate(-.08deg)}
  79%{transform:translateY(-7px) rotate(.14deg)}
}
@keyframes ooLiveShadow{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.62}
  29%{transform:translateX(-50%) scaleX(.92);opacity:.49}
  79%{transform:translateX(-50%) scaleX(.88);opacity:.43}
}

/* Partes animables del personaje */
.oo-live-mascot [data-oo-part="pupil-left"],
.oo-live-mascot [data-oo-part="pupil-right"],
.oo-live-mascot [data-oo-part="brow-left"],
.oo-live-mascot [data-oo-part="brow-right"],
.oo-live-mascot [data-oo-part="eye-left"],
.oo-live-mascot [data-oo-part="eye-right"],
.oo-live-mascot [data-oo-part="ring-blue"],
.oo-live-mascot [data-oo-part="ring-coral"],
.oo-live-mascot [data-oo-part="mouth-smile"],
.oo-live-mascot [data-oo-part="mouth-talk"]{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .27s cubic-bezier(.2,.8,.2,1),opacity .14s ease;
}

/* Parpadeo */
.oo-live-mascot.is-blinking [data-oo-part="eye-left"],
.oo-live-mascot.is-blinking [data-oo-part="eye-right"]{
  transform:scaleY(.06);
}

/* Escucha: mira hacia el formulario */
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="pupil-right"]{
  transform:translate(8px,2px);
}
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="brow-left"],
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="brow-right"]{
  transform:translateY(-4px);
}

/* Entendimiento: micro-pausa cognitiva */
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="pupil-right"]{
  transform:translate(0,-7px);
}
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="brow-left"]{
  transform:translateY(-2px) rotate(7deg);
}
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="brow-right"]{
  transform:translateY(-2px) rotate(-7deg);
}

/* Guía/acción: mira hacia el botón */
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="pupil-right"]{
  transform:translate(8px,7px);
}
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="brow-left"],
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="brow-right"]{
  transform:translateY(-5px);
}

/* Pensamiento real: se mantiene mientras la petición está activa */
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="pupil-right"]{
  animation:ooLiveThinkEyes .92s ease-in-out infinite alternate;
}
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="ring-blue"],
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="ring-coral"]{
  animation:ooLiveThinkRings 1.05s ease-in-out infinite alternate;
}
@keyframes ooLiveThinkEyes{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes ooLiveThinkRings{from{transform:scale(1)}to{transform:scale(1.016)}}

/* Hablando */
.oo-live-mascot[data-oo-state="speaking"] [data-oo-part="brow-left"],
.oo-live-mascot[data-oo-state="speaking"] [data-oo-part="brow-right"]{
  transform:translateY(-2px);
}

/* Respuesta lista */
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="brow-left"],
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="brow-right"]{
  transform:translateY(-5px);
}
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="ring-blue"],
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="ring-coral"]{
  animation:ooLiveHappy .52s cubic-bezier(.2,.9,.2,1);
}
@keyframes ooLiveHappy{50%{transform:scale(1.04)}}

/* Error/pausa: expresivo pero no triste */
.oo-live-mascot[data-oo-state="error"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="error"] [data-oo-part="pupil-right"]{
  transform:translate(-3px,4px);
}
.oo-live-mascot[data-oo-state="error"] [data-oo-part="brow-left"]{transform:rotate(-7deg)}
.oo-live-mascot[data-oo-state="error"] [data-oo-part="brow-right"]{transform:rotate(7deg)}

/* El antiguo círculo OO y el rectángulo blanco desaparecen completamente. */
.oo-state-icon{display:none !important}

/* El orbit queda más sutil ahora que OO flota libremente. */
.oo-orbit{
  width:295px;
  height:295px;
  opacity:.62;
  border-color:rgba(89,204,250,.12);
  box-shadow:0 0 0 34px rgba(61,187,242,.018),0 0 0 68px rgba(61,187,242,.012);
}
.oo-console[data-state="thinking"] .oo-orbit::before{opacity:.55}

/* En estados nativos ya no aplicamos reglas heredadas del video antiguo. */
.oo-console[data-state="thinking"] .oo-live-mascot,
.oo-console[data-state="success"] .oo-live-mascot{
  filter:drop-shadow(0 24px 24px rgba(0,15,24,.28));
}

@media (max-width:760px){
  .oo-stage{min-height:285px;margin-top:10px}
  .oo-live-mascot{width:min(100%,315px)}
  .oo-live-shadow{bottom:26px}
}

@media (prefers-reduced-motion:reduce){
  .oo-live-mascot,
  .oo-live-shadow,
  .oo-live-mascot *{
    animation:none !important;
    transition:none !important;
  }
}


/* ==========================================================
   V4.16.2 — Refinamiento visual y orgánico
   ========================================================== */

/* OO ocupa mejor el panel y el diálogo queda más cerca. */
.oo-stage{
  width:calc(100% + 34px);
  min-height:304px;
  margin:4px -17px -2px;
  overflow:visible;
}

/* Halo muy suave: apariencia de nube flotante, nunca de tarjeta. */
.oo-stage::before{
  width:330px;
  height:225px;
  top:48%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 45% 48%,
    rgba(70,204,255,.115) 0%,
    rgba(62,190,244,.055) 42%,
    rgba(62,190,244,.018) 61%,
    transparent 75%);
  filter:blur(10px);
}

/* Aproximadamente 16 % más grande que V4.16.1. */
.oo-live-mascot{
  width:min(116%,402px);
  max-width:none;
  filter:drop-shadow(0 18px 21px rgba(0,15,24,.22))
         drop-shadow(0 0 20px rgba(71,196,247,.07));
  animation:ooLiveFloatV4162 8.8s cubic-bezier(.45,.05,.42,.96) infinite;
}

.oo-live-shadow{
  bottom:20px;
  width:158px;
  height:17px;
  background:rgba(0,14,23,.20);
  filter:blur(10px);
  animation:ooLiveShadowV4162 8.8s cubic-bezier(.45,.05,.42,.96) infinite;
}

/* Secuencia asimétrica para que no se perciba como un loop mecánico. */
@keyframes ooLiveFloatV4162{
  0%   {transform:translateY(-5px) rotate(-.13deg) scale(1)}
  17%  {transform:translateY(-9px) rotate(.12deg) scale(1.002)}
  34%  {transform:translateY(-6px) rotate(.02deg) scale(.999)}
  52%  {transform:translateY(-12px) rotate(.16deg) scale(1.003)}
  69%  {transform:translateY(-7px) rotate(-.10deg) scale(1)}
  84%  {transform:translateY(-10px) rotate(.05deg) scale(1.001)}
  100% {transform:translateY(-5px) rotate(-.13deg) scale(1)}
}
@keyframes ooLiveShadowV4162{
  0%   {transform:translateX(-50%) scaleX(.98);opacity:.53}
  17%  {transform:translateX(-50%) scaleX(.91);opacity:.44}
  34%  {transform:translateX(-50%) scaleX(.96);opacity:.50}
  52%  {transform:translateX(-50%) scaleX(.86);opacity:.39}
  69%  {transform:translateX(-50%) scaleX(.94);opacity:.47}
  84%  {transform:translateX(-50%) scaleX(.89);opacity:.42}
  100% {transform:translateX(-50%) scaleX(.98);opacity:.53}
}

/* Mirada de escucha un poco más clara. */
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="listening"] [data-oo-part="pupil-right"]{
  transform:translate(9px,2px);
}

/* Entendiendo: mira levemente hacia arriba. */
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="understanding"] [data-oo-part="pupil-right"]{
  transform:translate(1px,-8px);
}

/* Cuando la idea ya está lista, mira claramente al CTA. */
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="attention"] [data-oo-part="pupil-right"]{
  transform:translate(11px,9px);
}

/* Pensamiento algo más lento y natural. */
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="pupil-left"],
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="pupil-right"]{
  animation:ooLiveThinkEyesV4162 1.05s ease-in-out infinite alternate;
}
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="ring-blue"],
.oo-live-mascot[data-oo-state="thinking"] [data-oo-part="ring-coral"]{
  animation:ooLiveThinkRingsV4162 1.18s ease-in-out infinite alternate;
}
@keyframes ooLiveThinkEyesV4162{
  from{transform:translate(-7px,-2px)}
  to{transform:translate(7px,1px)}
}
@keyframes ooLiveThinkRingsV4162{
  from{transform:scale(.998)}
  to{transform:scale(1.016)}
}

/* Celebración de resultado: una sola reacción, nunca un loop. */
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="ring-blue"],
.oo-live-mascot[data-oo-state="happy"] [data-oo-part="ring-coral"]{
  animation:ooLiveHappyV4162 .58s cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes ooLiveHappyV4162{
  0%,100%{transform:scale(1)}
  46%{transform:scale(1.047)}
  70%{transform:scale(.997)}
}

/* Orbit más sutil: acompaña al personaje sin encerrarlo. */
.oo-orbit{
  width:304px;
  height:304px;
  opacity:.36;
  border-color:rgba(89,204,250,.10);
  box-shadow:0 0 0 36px rgba(61,187,242,.010),
             0 0 0 72px rgba(61,187,242,.006);
}
.oo-console[data-state="thinking"] .oo-orbit::before{opacity:.42}

/* Burbuja más próxima al personaje y visualmente más liviana. */
.oo-speech{
  min-height:68px;
  margin:-2px 0 14px;
  padding:15px 17px;
  border-color:rgba(126,215,252,.12);
  background:rgba(255,255,255,.045);
  line-height:1.5;
}

.oo-console__status{
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.oo-console[data-state="thinking"] .oo-console__status{
  color:#e8f9ff;
  border-color:rgba(67,199,251,.20);
  background:rgba(67,199,251,.075);
}
.oo-console[data-state="success"] .oo-console__status{
  color:#fff1ed;
  border-color:rgba(255,121,95,.18);
  background:rgba(255,121,95,.07);
}

.oo-console[data-state="thinking"] .oo-live-mascot,
.oo-console[data-state="success"] .oo-live-mascot{
  filter:drop-shadow(0 18px 21px rgba(0,15,24,.22))
         drop-shadow(0 0 20px rgba(71,196,247,.07));
}

@media (max-width:760px){
  .oo-stage{
    width:calc(100% + 18px);
    min-height:275px;
    margin:2px -9px -2px;
  }
  .oo-live-mascot{width:min(112%,350px)}
  .oo-live-shadow{bottom:18px;width:142px}
  .oo-stage::before{width:290px;height:205px}
  .oo-speech{margin-top:-4px}
}