/* Guía: Lisa con notas al margen */
/* ---------- Guía: Lisa con notas al margen ---------- */
.guide{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:flex-start;justify-content:center;gap:8px;width:min(500px, calc(100vw - 660px))}
.note{flex:1;min-width:0;background:rgba(18,16,14,.9);border:1px solid rgba(239,231,218,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px 4px 14px 14px;padding:12px 14px 13px;display:grid;gap:7px;box-shadow:0 16px 34px rgba(0,0,0,.55);margin-top:10px}
.note[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.note-h span{white-space:nowrap}
.note-x{margin-left:auto;background:none;border:0;color:var(--fg-soft);font-size:15px;line-height:1;padding:0 2px}
.note-n{display:none}
.note p{margin:0;font-size:13px;line-height:1.5;color:var(--fg);min-height:3em}
.dog{flex:none;height:118px;min-width:90px;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.dog img{display:block;height:100%;width:auto;max-width:220px;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 12px 10px rgba(0,0,0,.55));animation:breathe 3.6s ease-in-out infinite;user-select:none}
.dog img.sleep{height:auto;width:160px;animation-duration:5s}
@keyframes breathe{0%,100%{transform:none}50%{transform:scale(1.015,.985)}}
.dog.perk img{animation:hop .7s var(--ease)}
.dog{position:relative}
.dog.bark img{animation:bark .9s ease-out}
@keyframes bark{0%,100%{transform:none}10%{transform:translateY(-7px) scale(1.05,.95) rotate(-3deg)}22%{transform:translateY(0) rotate(2deg)}38%{transform:translateY(-6px) scale(1.04,.96) rotate(-2deg)}52%{transform:rotate(1.5deg)}70%{transform:translateY(-2px)}}
.woof{position:absolute;right:62%;top:-6px;z-index:2;font-family:var(--f-display);font-style:italic;font-size:22px;line-height:1;letter-spacing:.02em;color:#1b140d;background:#fdf6e9;border:2px solid #1b140d;border-radius:16px;padding:7px 12px 6px;white-space:nowrap;box-shadow:3px 3px 0 #1b140d;opacity:0;transform:scale(.3) rotate(-14deg);transform-origin:100% 100%;pointer-events:none}
.woof::after{content:"";position:absolute;right:-9px;bottom:4px;border-left:12px solid #1b140d;border-top:7px solid transparent;border-bottom:7px solid transparent}
.dog.bark .woof{animation:woof .95s var(--ease)}
@keyframes woof{0%{opacity:0;transform:scale(.3) rotate(-14deg)}18%{opacity:1;transform:scale(1.12) rotate(-6deg)}30%{transform:scale(.96) rotate(-8deg)}45%{transform:scale(1.06) rotate(-5deg)}80%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:scale(.9) rotate(-6deg) translateY(-8px)}}
@keyframes hop{0%{transform:scale(1.06,.9)}40%{transform:translateY(-14px) scale(.97,1.04)}75%{transform:scale(1.03,.97)}100%{transform:none}}
@media (max-width:760px){
  .guide{position:relative;right:auto;top:auto;left:auto;transform:none;width:100%;max-width:440px;margin:14px auto 0}
  .dog{height:110px}
}