/* =========================================================================
   LA GUÍA — la esfera narradora (assets/guide.js). Misma esfera de vidrio del loader.
   ========================================================================= */
.guide{position:fixed;inset:0;z-index:70;pointer-events:none}
.guide-pos{--s:60px;position:absolute;left:var(--gutter);bottom:var(--gutter);width:var(--s);height:var(--s)}
.guide-orb{pointer-events:auto;position:relative;width:100%;height:100%;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.34) 0 3%,rgba(255,255,255,.1) 12%,transparent 30%),
    radial-gradient(circle at 70% 82%,rgba(var(--glow-warm),.32),transparent 46%),
    radial-gradient(circle at 50% 45%,#17181e 0%,#08080a 64%,#030303 100%);
  box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),inset 5px 7px 16px rgba(255,255,255,.07),0 18px 40px -14px rgba(0,0,0,.9),0 0 34px -10px rgba(var(--glow),.6);
  transition:box-shadow .5s}
.guide-orb::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:conic-gradient(from 210deg,transparent 0 8%,rgba(var(--glow),.6) 16%,transparent 30%,rgba(var(--glow-warm),.4) 48%,transparent 62%,rgba(255,255,255,.3) 80%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.guide-orb:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* rostro: pantalla de robot con ojos cian */
.guide-face{position:absolute;left:12%;top:16%;width:76%;height:66%;fill:#4cf2ff;stroke:#4cf2ff;stroke-width:0;filter:drop-shadow(0 0 2.5px rgba(76,242,255,.95)) drop-shadow(0 0 7px rgba(76,242,255,.45));pointer-events:none;overflow:visible}
.guide-face .ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guide-face .hrt{fill:#ff4d7a;stroke:none;filter:drop-shadow(0 0 3px rgba(255,77,122,.9))}
.guide-face{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.guide-face .look{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.guide-face .red{fill:#ff3b6b;stroke:#ff3b6b;filter:drop-shadow(0 0 3px rgba(255,59,107,.9))}
.guide-face .hrt{transform-box:fill-box;transform-origin:center;animation:guide-beat 1.1s ease-in-out infinite}
@keyframes guide-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(.96)}45%{transform:scale(1.12)}}
.guide-face .eyes{transform-box:fill-box;transform-origin:center;animation:guide-blink 5.5s infinite}
.guide-face .mouth-o{transform-box:fill-box;transform-origin:center;animation:guide-talk .26s ease-in-out infinite alternate}
@keyframes guide-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes guide-talk{from{transform:scaleY(.55)}to{transform:scaleY(1.25)}}
.guide-ring{position:absolute;inset:-7px;border-radius:50%;border:1.5px solid transparent;opacity:0;transition:opacity .4s,border-color .4s}
/* estados */
.guide-orb.is-idle{animation:guide-float 5s ease-in-out infinite,guide-breathe 4s ease-in-out infinite}
.guide-orb.is-talking{box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),inset 5px 7px 16px rgba(255,255,255,.07),0 18px 40px -14px rgba(0,0,0,.9),0 0 46px -6px rgba(var(--glow-warm),.85);animation:guide-float 5s ease-in-out infinite}
.guide-orb.is-listening,.guide-orb.is-thinking,.guide-orb.is-pointing{animation:guide-float 5s ease-in-out infinite}
.guide-orb.is-listening .guide-ring{opacity:1;border-color:rgba(var(--glow),.9)}
.guide-orb.is-thinking .guide-ring{opacity:1;border:0;padding:2px;background:conic-gradient(from 0deg,transparent 0 50%,#FF0A4E 70%,#2F6BFF 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:guide-spin 1.2s linear infinite}
.guide-orb.is-pointing{box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),0 0 50px -8px rgba(var(--glow),.9)}
@keyframes guide-float{50%{translate:0 -4px}}
@keyframes guide-breathe{50%{filter:brightness(1.18)}}
@keyframes guide-spin{to{transform:rotate(360deg)}}
/* burbuja de vidrio */
.guide-bubble{pointer-events:auto;position:absolute;left:var(--gutter);bottom:calc(var(--gutter) + 76px);width:min(320px,calc(100vw - 32px));padding:16px 44px 16px 18px;border-radius:18px;color:var(--ink);background:rgba(16,16,20,.92);border:1px solid var(--stroke-hi);box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 50px -30px rgba(var(--glow),.8);animation:guide-in .35s cubic-bezier(.16,1,.3,1);transform-origin:0 100%}
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 50px -30px rgba(var(--glow),.8);animation:guide-in .35s cubic-bezier(.16,1,.3,1)}
.guide-bubble[hidden]{display:none}
.guide-bubble p{font-size:15px;line-height:1.45}
.guide-actions{display:flex;flex-wrap:wrap;gap:8px}
.guide-actions:not(:empty){margin-top:12px}
.guide-actions .btn{font-size:10px;padding:9px 14px}
.guide-min{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--stroke);font-size:16px;line-height:1;transition:color .3s,border-color .3s}
.guide-min:hover,.guide-min:focus-visible{color:var(--ink);border-color:var(--stroke-hi)}
.guide-bubble::after{content:"";position:absolute;left:22px;bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid var(--stroke-hi);border-bottom:1px solid var(--stroke-hi);transform:rotate(45deg)}
@keyframes guide-in{from{opacity:0;scale:.96}}
/* control de sonido, siempre visible junto a la casa de la esfera */
.guide-sound{pointer-events:auto;position:absolute;left:calc(var(--gutter) + 72px);bottom:calc(var(--gutter) + 13px);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:color .3s,box-shadow .3s}
.guide-sound svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guide-sound .on{opacity:.25}
.guide-sound.is-on{color:var(--ink);box-shadow:0 0 22px -6px rgba(var(--glow),.9)}
.guide-sound.is-on .on{opacity:1}
.guide-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* la tarjeta reacciona cuando la esfera se posa */

/* el chat se abre desde la esfera: su botón queda invisible pero conserva el lugar */
/* el chat se abre desde la esfera (abajo a la izquierda); WhatsApp queda solo a la derecha */
.guide-on .fab [data-chat-open]{display:none}
.guide-on .fab .chat{position:fixed;left:var(--gutter);right:auto;bottom:calc(var(--gutter) + 76px)}
/* minimizada: no salta ni habla, queda en casa como entrada al asistente */
.guide.is-min .guide-bubble{display:none}
.guide.is-min .guide-orb{animation:none;opacity:.85}
.menu.is-open ~ .guide{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .guide-orb,.guide-orb.is-idle,.guide-orb.is-talking{animation:none} .guide-orb.is-thinking .guide-ring{animation:none} .guide-bubble{animation:none} }

@media (max-width:480px){
  .guide-pos{--s:48px;left:16px;bottom:16px}
  .guide-bubble{left:12px;right:12px;width:auto;bottom:80px}
  .guide-sound{left:72px;bottom:23px;width:30px;height:30px}
  .guide-on .fab .chat{left:12px;bottom:80px}
}
@media (prefers-reduced-motion:reduce){ .guide-orb.is-listening,.guide-orb.is-thinking,.guide-orb.is-pointing{animation:none} .guide-face .eyes,.guide-face .mouth{animation:none!important} }
/* ---------- modo juego ---------- */
.guide-roll{position:absolute;inset:3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.10) 22%,transparent 30% 60%,rgba(var(--glow),.16) 66%,transparent 74%)}
.guide.is-playing .guide-bubble{display:none}
.guide-playbtn{pointer-events:auto;position:absolute;left:calc(var(--gutter) + 112px);bottom:calc(var(--gutter) + 13px);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:color .3s,box-shadow .3s}
.guide-playbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guide-playbtn circle{fill:currentColor;stroke:none}
.guide-playbtn.is-on{color:var(--ink);box-shadow:0 0 22px -6px rgba(var(--glow),.9)}
.guide-playbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.guide.is-min .guide-playbtn{display:none}
@media (max-width:480px){ .guide-playbtn{left:108px;bottom:23px;width:30px;height:30px} }