/* Credis · mascota flotante de Credisnet · v5 final */
#credis-assistant {
  --credis-green: var(--green, #00C853);
  --credis-green-light: var(--green-light, #5EFC8D);
  --credis-navy: var(--navy-mid, #0F2040);
  --credis-deep: var(--navy-deep, #060F1E);
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  font-family: inherit;
}

.credis-mascot {
  position: fixed;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    left .42s cubic-bezier(.2,.9,.22,1.12),
    top .42s cubic-bezier(.2,.9,.22,1.12),
    transform .32s cubic-bezier(.2,.9,.22,1.08),
    filter .2s ease;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.30));
}
.credis-mascot:focus-visible {
  outline: 3px solid rgba(94,252,141,.85);
  outline-offset: 4px;
  border-radius: 15px;
}
.credis-mascot:hover {
  filter: drop-shadow(0 9px 18px rgba(0,200,83,.20)) drop-shadow(0 7px 14px rgba(0,0,0,.25));
}
.credis-mascot.is-dragging {
  cursor: grabbing;
  transition: none;
  filter: drop-shadow(0 11px 22px rgba(0,0,0,.38));
}

.credis-figure {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  animation: credisFloat 4s ease-in-out infinite;
  transform-origin: 50% 58%;
}
.credis-mascot.is-dragging .credis-figure {
  animation: none;
  transform: rotate(-4deg) scale(1.055);
}
.credis-mascot.is-happy .credis-figure {
  animation: credisHappy .56s cubic-bezier(.2,.9,.2,1.25) 1;
}
.credis-mascot.is-waking .credis-figure {
  animation: credisWake .42s ease-out 1;
}
.credis-mascot.is-curious .credis-figure {
  animation: credisCurious .72s ease-in-out 1;
}

.credis-fullimg {
  position: absolute;
  inset: 0;
  width: 46px;
  height: auto;
  margin: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Cara animable: tapa la cara original y dibuja ojos + boca con estados propios. */
.credis-liveface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.credis-eye-cover { fill: #04dc75; }
.credis-eye-white {
  fill: #fff;
  stroke: rgba(6,15,30,.18);
  stroke-width: 1.8;
}
.credis-pupil { fill: #07152d; }
.credis-pupil-shine { fill: #fff; }
.credis-pupil-group {
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
}

/* Gestos corporales muy sutiles, como el personaje de Binance. */
.credis-mascot.pose-left .credis-figure { transform: rotate(-4deg) translateX(-1px); }
.credis-mascot.pose-right .credis-figure { transform: rotate(4deg) translateX(1px); }
.credis-mascot.pose-happy .credis-figure { transform: translateY(-1px) scale(1.035); }
.credis-brow-live {
  fill: none;
  stroke: #0f2040;
  stroke-width: 10;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .26s ease;
}
.credis-mouth-patch { fill: url(#credisMouthPatch); opacity: .98; }

.credis-mouth {
  fill: none;
  stroke: #0f2040;
  stroke-width: 10.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .25s ease, transform .28s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.credis-mouth.mouth-soft { opacity: 1; }
.credis-mascot.mouth-neutral .credis-mouth { opacity: 0; }
.credis-mascot.mouth-neutral .mouth-neutral { opacity: 1; }
.credis-mascot.mouth-soft .credis-mouth { opacity: 0; }
.credis-mascot.mouth-soft .mouth-soft { opacity: 1; }
.credis-mascot.mouth-big .credis-mouth { opacity: 0; }
.credis-mascot.mouth-big .mouth-big { opacity: 1; }

.credis-mascot.mouth-neutral .mouth-neutral { transform: scaleX(.88) translateY(2px); }
.credis-mascot.mouth-soft .mouth-soft { transform: scaleX(.98) scaleY(.88); }
.credis-mascot.mouth-big .mouth-big { transform: scaleX(1.08) scaleY(1.08) translateY(-1px); }

.credis-eye-live {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .09s ease;
}
.credis-lid {
  fill: none;
  stroke: #0f2040;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.credis-mascot.is-blinking .credis-eye-live { transform: scaleY(.10); }
.credis-mascot.is-blinking .credis-lid { opacity: 1; }

.credis-mascot.look-left .brow-left { transform: translateY(2px) rotate(-7deg); }
.credis-mascot.look-left .brow-right { transform: translateY(-2px) rotate(-4deg); }
.credis-mascot.look-right .brow-left { transform: translateY(-2px) rotate(4deg); }
.credis-mascot.look-right .brow-right { transform: translateY(2px) rotate(7deg); }
.credis-mascot.is-curious .brow-left { transform: translateY(-2px) rotate(-6deg); }
.credis-mascot.is-curious .brow-right { transform: translateY(2px) rotate(5deg); }

/* Tras 3 s sin actividad, la MISMA mascota se desplaza medio cuerpo fuera de la pantalla. */
.credis-mascot.is-peeking.side-right { transform: translateX(23px); }
.credis-mascot.is-peeking.side-left { transform: translateX(-23px); }

.credis-speech {
  position: absolute;
  top: 50%;
  min-width: max-content;
  max-width: 210px;
  padding: 8px 11px;
  border: 1px solid rgba(94,252,141,.23);
  border-radius: 13px;
  background: rgba(6,15,30,.96);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(.92);
  transition: opacity .2s ease, transform .24s ease, visibility .2s;
  pointer-events: none;
  white-space: normal;
}
#credis-assistant.side-right .credis-speech { right: calc(100% + 10px); transform-origin: 100% 50%; }
#credis-assistant.side-left .credis-speech { left: calc(100% + 10px); transform-origin: 0 50%; }
.credis-speech.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }

.credis-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,8,18,.44);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}
.credis-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(370px, calc(100vw - 32px));
  max-height: min(650px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(94,252,141,.16);
  border-radius: 24px;
  background: radial-gradient(circle at 88% 0%, rgba(0,200,83,.13), transparent 34%), linear-gradient(145deg, #0b172b 0%, #07111f 100%);
  color: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.035);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.22,1.06), visibility .22s;
}
#credis-assistant.is-open .credis-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
#credis-assistant.is-open .credis-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.credis-panel-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.credis-mini { width: 42px; height: 42px; flex: 0 0 42px; display: block; }
.credis-mini img { width: 100%; height: auto; display: block; }
.credis-title-wrap { min-width: 0; flex: 1; }
.credis-kicker { color: var(--credis-green-light); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.credis-title { margin: 2px 0 0; font-size: 21px; line-height: 1.1; font-weight: 850; color: #fff; }
.credis-close {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  background: rgba(255,255,255,.045); color: #d8e1ef; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .18s ease, transform .18s ease; flex: 0 0 auto;
}
.credis-close:hover { background: rgba(255,255,255,.09); transform: rotate(3deg); }
.credis-intro { margin: 0 0 14px; color: #c9d4e3; font-size: 14px; line-height: 1.45; }
.credis-intro strong { color: #fff; }
.credis-options { display: grid; gap: 9px; }
.credis-option {
  width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.085); border-radius: 15px;
  padding: 12px 13px; background: rgba(255,255,255,.045); color: #fff; font: inherit;
  font-size: 14px; font-weight: 760; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.credis-option:hover, .credis-option:focus-visible { transform: translateY(-1px); border-color: rgba(94,252,141,.35); background: rgba(0,200,83,.08); outline: none; }
.credis-option span { display: inline-flex; width: 26px; justify-content: center; margin-right: 5px; }
.credis-answer {
  display: none; margin-top: 12px; padding: 13px; border-radius: 16px;
  border: 1px solid rgba(94,252,141,.18); background: rgba(0,200,83,.075);
}
.credis-answer.is-visible { display: block; animation: credisAnswerIn .22s ease both; }
.credis-answer-title { margin: 0 0 5px; color: #fff; font-size: 14px; font-weight: 850; }
.credis-answer-text { margin: 0 0 11px; color: #cbd6e4; font-size: 13px; line-height: 1.42; }
.credis-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 10px 13px; border: 0; border-radius: 13px; text-decoration: none;
  background: #25D366; color: #04140b; font-size: 14px; font-weight: 900;
  box-shadow: 0 10px 24px rgba(37,211,102,.18); transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.credis-wa:hover { color: #04140b; text-decoration: none; background: #40df7a; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,211,102,.25); }
.credis-wa svg { width: 19px; height: 19px; fill: currentColor; }
.credis-direct { margin-top: 12px; }
.credis-note { margin: 10px 2px 0; color: #748399; font-size: 10.5px; line-height: 1.35; text-align: center; }

@keyframes credisFloat {
  0%,100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-2px) rotate(.9deg); }
}
@keyframes credisHappy {
  0% { transform: scale(1); }
  38% { transform: scale(1.095) rotate(-3deg); }
  70% { transform: scale(.985) rotate(1.5deg); }
  100% { transform: scale(1); }
}
@keyframes credisWake {
  0% { transform: scale(.98); }
  45% { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1); }
}
@keyframes credisCurious {
  0%,100% { transform: rotate(0); }
  45% { transform: rotate(4deg) translateY(-1px); }
}
@keyframes credisAnswerIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .credis-mascot { width: 44px; height: 44px; }
  .credis-fullimg { width: 44px; }
  .credis-mascot.is-peeking.side-right { transform: translateX(22px); }
  .credis-mascot.is-peeking.side-left { transform: translateX(-22px); }
  .credis-panel { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: min(620px, calc(100vh - 20px)); padding: 16px; border-radius: 22px; }
  .credis-speech { max-width: 175px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .credis-figure,
  .credis-mascot.is-happy .credis-figure,
  .credis-mascot.is-waking .credis-figure,
  .credis-mascot.is-curious .credis-figure { animation: none !important; }
  .credis-mascot,
  .credis-panel,
  .credis-backdrop,
  .credis-speech { transition-duration: .01ms !important; }
}