/* ============================================================
   INS-CHAN — Mascota de INSANOS SCAN
   ============================================================
   Gata con capucha que camina, persigue el cursor, se sienta,
   duerme y saluda. 100% SVG + CSS; sin sprites ni librerías. */

.ins-mascot,.ins-toggle{--ins-pink:#FF006E;--ins-card:#0D0D1B;--ins-text:#DDE1F0;--ins-muted:#6B7299;--ins-cyan:#00E5FF}
.ins-mascot{position:fixed;bottom:0;z-index:9990;user-select:none;pointer-events:none;transition:opacity .24s ease,transform .28s ease}
.ins-mascot *{pointer-events:none}
.ins-char-wrap{position:relative;display:flex;flex-direction:column;align-items:center;cursor:grab;pointer-events:all;touch-action:none}
.ins-char-wrap:active{cursor:grabbing}
.ins-char-wrap:focus-visible{outline:2px solid var(--ins-cyan);outline-offset:4px;border-radius:6px}
.ins-mascot.is-blocked{visibility:hidden}
.ins-mascot.is-away{opacity:0;transform:translateY(var(--ins-escape-distance,140%))}
.ins-mascot.is-blocked .ins-char-wrap,.ins-mascot.is-away .ins-char-wrap{pointer-events:none!important}
.ins-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}
/* La tarjeta permanece por encima incluso durante un cambio de viewport. */
.acceso-page .ins-mascot,.acceso-page .ins-toggle{z-index:4}

/* Globo de diálogo */
.ins-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.8);background:var(--ins-card);border:1px solid var(--ins-pink);box-shadow:0 0 14px rgba(255,0,110,.35),inset 0 0 8px rgba(255,0,110,.05);padding:.5rem .9rem;white-space:normal;width:max-content;max-width:min(260px,calc(100vw - 24px));font-family:Rajdhani,system-ui,sans-serif;font-size:.78rem;font-weight:600;color:var(--ins-text);letter-spacing:.03em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ins-bubble::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ins-pink);border-bottom:none}
.ins-bubble::before{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ins-card);border-bottom:none;z-index:1}
.ins-bubble.visible{opacity:1;transform:translateX(-50%) scale(1)}
.ins-bubble.is-obstructed{visibility:hidden}
.ins-bubble.is-detached::before,.ins-bubble.is-detached::after{display:none}
.ins-bubble-name{font-family:var(--in-display,Orbitron,monospace);font-size:.55rem;color:var(--ins-pink);letter-spacing:.15em;display:block;margin-bottom:.15rem}

/* Botón de mostrar/ocultar (esquina inferior izquierda) */
.ins-toggle{position:fixed;bottom:1rem;left:1rem;z-index:10000;background:var(--ins-card);border:1px solid rgba(255,0,110,.3);color:var(--ins-muted);width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .2s,background .2s}
.ins-toggle:hover{border-color:var(--ins-pink);color:var(--ins-pink);box-shadow:0 0 10px rgba(255,0,110,.3)}
.ins-toggle:focus-visible{outline:2px solid var(--ins-cyan);outline-offset:4px}
.ins-toggle[hidden]{display:none!important}
.ins-toggle svg{width:18px;height:18px}

/* Personaje SVG */
.ins-svg{width:80px;height:105px;overflow:visible;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}

/* Estados */
.ins-mascot[data-state="idle"] .ins-body-g{animation:ins-idle 2.2s ease-in-out infinite;transform-origin:40px 50px}
@keyframes ins-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ins-mascot[data-state="walk"] .ins-body-g{animation:ins-walk .46s ease-in-out infinite;transform-origin:40px 75px}
@keyframes ins-walk{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}}
.ins-mascot[data-state="walk"] .ins-leg-l{animation:ins-leg-l .46s ease-in-out infinite;transform-origin:28px 87px}
.ins-mascot[data-state="walk"] .ins-leg-r{animation:ins-leg-r .46s ease-in-out infinite;transform-origin:52px 87px}
@keyframes ins-leg-l{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes ins-leg-r{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
.ins-mascot[data-state="chase"] .ins-body-g{animation:ins-walk .22s ease-in-out infinite;transform-origin:40px 75px}
.ins-mascot[data-state="chase"] .ins-leg-l{animation:ins-leg-l .22s ease-in-out infinite;transform-origin:28px 87px}
.ins-mascot[data-state="chase"] .ins-leg-r{animation:ins-leg-r .22s ease-in-out infinite;transform-origin:52px 87px}
.ins-mascot[data-state="flee"] .ins-body-g{animation:ins-walk .18s ease-in-out infinite;transform-origin:40px 75px}
.ins-mascot[data-state="flee"] .ins-leg-l{animation:ins-leg-l .18s ease-in-out infinite;transform-origin:28px 87px}
.ins-mascot[data-state="flee"] .ins-leg-r{animation:ins-leg-r .18s ease-in-out infinite;transform-origin:52px 87px}
.ins-mascot[data-state="sit"] .ins-body-g{animation:ins-sit .3s ease-out forwards}
@keyframes ins-sit{to{transform:scaleY(.82) translateY(8px)}}
.ins-mascot[data-state="sit"] .ins-legs-g{animation:ins-sit-legs .3s ease-out forwards}
@keyframes ins-sit-legs{to{transform:translateY(-4px) scaleX(1.3)}}
.ins-mascot[data-state="sleep"] .ins-svg{animation:ins-sleep-tilt .4s ease-out forwards}
@keyframes ins-sleep-tilt{to{transform:rotate(-10deg) translateX(-6px)}}
.ins-mascot[data-state="sleep"] .ins-zzz{display:block}
.ins-zzz{display:none;position:absolute;top:-30px;right:-5px;pointer-events:none}
.ins-zzz text{font-family:var(--in-display,Orbitron,monospace);font-size:10px;fill:rgba(0,229,255,.7)}
.ins-zzz text:nth-child(1){animation:ins-zzz-a 2s 0s infinite}
.ins-zzz text:nth-child(2){animation:ins-zzz-a 2s .5s infinite;font-size:8px}
.ins-zzz text:nth-child(3){animation:ins-zzz-a 2s 1s infinite;font-size:6px}
@keyframes ins-zzz-a{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(12px,-22px)}}
.ins-mascot[data-state="wave"] .ins-arm-r{animation:ins-wave .4s ease-in-out 4;transform-origin:65px 60px}
@keyframes ins-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-55deg) translateY(-4px)}}
.ins-mascot[data-state="wave"] .ins-body-g{animation:ins-idle .8s ease-in-out infinite}
.ins-mascot[data-state="excited"] .ins-body-g{animation:ins-excited .4s ease-in-out 3}
@keyframes ins-excited{0%,100%{transform:translateY(0)}25%{transform:translateY(-18px)}75%{transform:translateY(-8px)}}
.ins-eye-l,.ins-eye-r{transform-box:fill-box;transform-origin:center}
.ins-eye-l{animation:ins-blink 4.2s 0s infinite}
.ins-eye-r{animation:ins-blink 4.2s .15s infinite}
@keyframes ins-blink{0%,88%,100%{transform:scaleY(1)}94%{transform:scaleY(.07)}}
.ins-antenna-orb{animation:ins-ant-pulse 1.8s ease-in-out infinite}
@keyframes ins-ant-pulse{0%,100%{opacity:1;filter:drop-shadow(0 0 3px #FF006E)}50%{opacity:.55;filter:drop-shadow(0 0 8px #FF006E)}}
.ins-mascot[data-dir="-1"] .ins-svg{transform:scaleX(-1)}
.ins-char-wrap:hover .ins-jacket{filter:brightness(1.15)}

/* Corazones al hacer click (iconos Lucide, sin emojis) */
.ins-heart{position:absolute;pointer-events:none;z-index:1;color:#FF006E;animation:ins-heart-fly .7s ease-out forwards}
.ins-heart svg{width:16px;height:16px;fill:currentColor}
@keyframes ins-heart-fly{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-45px) scale(1.4)}}

@media(prefers-reduced-motion:reduce){
  .ins-mascot .ins-body-g,.ins-mascot .ins-leg-l,.ins-mascot .ins-leg-r,.ins-mascot .ins-svg,
  .ins-eye-l,.ins-eye-r,.ins-antenna-orb,.ins-zzz text,.ins-heart{animation:none!important}
  .ins-mascot,.ins-toggle{transition:none!important}
  .ins-mascot.is-away{transform:none!important;visibility:hidden}
  .ins-bubble{transition:none!important}
}