/* ═════════ Guía 3D ═════════ */
.guide {
  position: fixed; z-index: 15; pointer-events: none;
  right: max(.75rem, env(safe-area-inset-right)); bottom: max(.25rem, env(safe-area-inset-bottom));
  width: 300px; height: 420px;
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .6s var(--spring), transform .8s var(--spring);
}
.guide canvas { width: 100%; height: 100%; display: block; }
/* aparece cuando ya estás recorriendo los proyectos (en el reel taparía la pausa) */
.guide.ready.joined { opacity: 1; transform: none; }

.guide-hide, .guide-show {
  position: fixed; z-index: 16; cursor: pointer; color: var(--ink);
  border: 1px solid var(--line); background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  transition: opacity .3s var(--spring), transform .12s ease-out;
}
.guide-hide svg, .guide-show svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guide-hide:active, .guide-show:active { transform: scale(.94); }
.guide-hide {
  right: max(.75rem, env(safe-area-inset-right)); bottom: calc(max(.25rem, env(safe-area-inset-bottom)) + 420px - 2.75rem);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  opacity: 0; pointer-events: none;
}
.guide.ready.joined ~ .guide-hide { opacity: .85; pointer-events: auto; }
.guide-show {
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem 0 .8rem;
  border-radius: var(--r-pill); font: 600 .875rem/1 var(--font);
}
html.guide-off .guide, html.guide-off .guide-hide { display: none; }
html.guide-off .guide-show { display: inline-flex; }
html.guide-failed .guide, html.guide-failed .guide-hide, html.guide-failed .guide-show { display: none; }

@media (max-width: 760px) {
  .guide { width: 160px; height: 224px; }
  .guide-hide { bottom: calc(max(.25rem, env(safe-area-inset-bottom)) + 224px - 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .guide { transform: none; transition: opacity .3s linear; }
}

/* Zona clicable: solo la silueta del personaje (guide.js la ajusta); el resto deja pasar los clics */
.guide-hit {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; border-radius: 40px;
  background: transparent; cursor: pointer; pointer-events: auto;
}
.guide-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ═════════ Globo de conversación ═════════
   Vidrio con un pico hacia la cabeza del personaje. Entra con la receta de Jakub
   (opacidad + desplazamiento + enfoque) y cambia de texto con un fundido cruzado. */
:root { --gw: 300px; --gh: 420px; --gr: max(.75rem, env(safe-area-inset-right)); --gb: max(.25rem, env(safe-area-inset-bottom)); }
.guide-bubble {
  position: fixed; z-index: 16;
  right: calc(var(--gr) + var(--gw) * .62);
  bottom: calc(var(--gb) + var(--gh) * .74);
  width: min(19rem, calc(100vw - var(--gr) - var(--gw) * .62 - 1rem));
  padding: .95rem 1.1rem .75rem; border-radius: 20px 20px 6px 20px;
  background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--card-edge); box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, .35);
  transform-origin: bottom right;
  opacity: 0; transform: translate3d(8px, 10px, 0) scale(.96); pointer-events: none;
  transition: opacity .2s var(--exit), transform .2s var(--exit);   /* salida corta */
}
.guide-bubble.in { opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .6s var(--spring), transform .75s var(--spring); }
/* pico hacia la cabeza */
.guide-bubble::after {
  content: ""; position: absolute; right: -7px; bottom: 10px; width: 14px; height: 14px;
  background: inherit; border: inherit; border-left: 0; border-top: 0;
  transform: rotate(-45deg); border-radius: 0 0 4px 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gb-title { margin: 0 0 .3rem; font: 700 .75rem/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.gb-text { margin: 0; font-size: .9375rem; line-height: 1.45; text-wrap: pretty; transition: opacity .16s ease; }
.guide-bubble.swap .gb-text, .guide-bubble.swap .gb-title { opacity: 0; }
.gb-next {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; min-height: 2.75rem; padding: 0;
  border: 0; background: none; color: var(--accent); font: 600 .8125rem/1 var(--font); cursor: pointer;
}
.gb-next svg { width: .65rem; height: .65rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--spring); }
.gb-next:hover svg { transform: translateX(2px); }
.gb-next:active { opacity: .6; }
html.guide-off .guide-bubble, html.guide-failed .guide-bubble { display: none; }

@media (max-width: 760px) {
  :root { --gw: 160px; --gh: 224px; }
  .guide-bubble { right: calc(var(--gr) + var(--gw) * .55); bottom: calc(var(--gb) + var(--gh) * .7); width: min(15rem, calc(100vw - var(--gr) - var(--gw) * .55 - 1rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-bubble, .guide-bubble.in { transform: none; transition: opacity .2s linear; }
}

/* Plegado: botón "Anécdota"; abierto (.open): globo de conversación con su X */
.guide-bubble:not(.open) { width: auto; padding: .3rem; }
.guide-bubble .gb-open {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: 0 .85rem 0 .7rem;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--ink); cursor: pointer;
  font: 600 .8125rem/1 var(--font); white-space: nowrap;
}
.guide-bubble .gb-open svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.guide-bubble .gb-open:hover { color: var(--accent); }
.guide-bubble .gb-open:focus-visible, .guide-bubble .gb-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-bubble .gb-open i { display: none; position: absolute; top: .3rem; left: 1.45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.guide-bubble.new .gb-open i { display: block; animation: gb-ping 1.6s ease-out 2; }
.guide-bubble.open .gb-open { display: none; }
.guide-bubble .gb-close {
  display: none; position: absolute; top: .35rem; right: .35rem; width: 2rem; height: 2rem; padding: 0; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer;
}
.guide-bubble .gb-close svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.guide-bubble .gb-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.guide-bubble.open .gb-close { display: grid; }
.guide-bubble .gb-title { padding-right: 1.6rem; }
@keyframes gb-ping { 0% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .guide-bubble.new .gb-open i { animation: none; } }