/* ===== Pipo, el pingüino vendedor viajero ===== */
.pipo-img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: bottom; pointer-events: auto; cursor: pointer; transition: transform .15s; filter: drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.npc-pipo .sprite { cursor: pointer; }
.npc-pipo.walking .pipo-img { animation: pipoWaddle .45s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pipoWaddle { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.npc-pipo .sprite:hover .pipo-img { filter: drop-shadow(0 0 10px rgba(255,220,120,.95)) drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.pipo-leave { animation: pipoLeave 1.6s ease-in forwards; }
@keyframes pipoLeave { 70% { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }
.label.npc .nametag { white-space: nowrap; }

/* diálogo */
.nt-box.pipo { border-color: #2a6ab8; background: radial-gradient(circle at 12% 15%, rgba(140,200,255,.35), transparent 50%), linear-gradient(160deg, #f4fbff, #d8ecfb); color: #10345f; }
.nt-box.pipo .nt-portrait { background-size: cover; background-position: center; background-color: #d6ecfa; }

/* tienda */
.ps2-box { position: relative; width: 1100px; padding: 30px 36px 26px; border-radius: 32px; border: 6px solid #2a6ab8; font-family: var(--font);
  background: radial-gradient(circle at 85% 0%, rgba(140,220,255,.45), transparent 55%), linear-gradient(170deg, #f6fbff, #dcefff); color: #10345f; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ps2-box .x-btn { right: -24px; top: -24px; }
.ps2-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ps2-head img { height: 120px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); animation: pipoHi 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pipoHi { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.ps2-head h2 { margin: 0; font: 700 44px var(--font); color: #1d4e89; }
.ps2-head p { margin: 4px 0 0; font: 600 22px var(--font); color: #3a6a9a; display: flex; align-items: center; gap: 6px; }
.ps2-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps2-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border-radius: 24px; background: #fff; border: 4px solid #b9dcf6; text-align: center; transition: transform .15s, box-shadow .15s; }
.ps2-item:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(30,80,140,.18); }
.ps2-bear { width: 190px; height: 260px; }
.ps2-bear svg { width: 100%; height: 100%; overflow: visible; }
.ps2-card { width: 195px; height: 260px; border-radius: 18px; border: 5px solid #fff; background-size: cover; background-position: center; box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 3px #b9dcf6; }
.ps2-item h3 { margin: 4px 0 0; font: 700 28px var(--font); color: #1d4e89; }
.ps2-item p { margin: 0; font: 500 18px/1.3 var(--font); color: #3a5a80; min-height: 48px; }
.ps2-price { font: 700 28px var(--font); color: #8a5a00; display: flex; align-items: center; gap: 8px; }
.ps2-note { margin: 14px 0 0; text-align: center; font: 500 18px var(--font); color: #3a6a9a; }