/* =====================================================================
   Club Bear - Catálogo de Mascotas (revista)
   ===================================================================== */
.pet-mag .pspread { display: flex; flex: 1; min-width: 0; transform-origin: left center; }
.pet-mag .pspread[hidden] { display: none; }
.pet-mag .pspread.turn-next { animation: turnNext .55s cubic-bezier(.2,.8,.3,1); }
.pet-mag .pspread.turn-prev { animation: turnPrev .55s cubic-bezier(.2,.8,.3,1); transform-origin: right center; }
.pet-mag .page.left { color: #fff; }
.pm-coins { position: absolute; right: 70px; top: -58px; display: flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 26px;
  background: #fff6d8; border: 4px solid #b8820c; font: 700 26px var(--font); color: #7a5200; }
.pm-tabs { position: absolute; left: 50%; top: -64px; transform: translateX(-50%); display: flex; gap: 8px; }
.pm-tabs button { width: 62px; height: 54px; border-radius: 16px 16px 0 0; border: 4px solid #2b2b36; border-bottom: 0; background: #e8dcc6; font-size: 28px; cursor: pointer; transition: transform .15s; }
.pm-tabs button:hover { transform: translateY(-4px); }
.pm-tabs button.on { background: #fdfaf3; transform: translateY(-6px); }

/* ---------- portada ---------- */
.page.left.pm-cover { background: radial-gradient(circle at 30% 18%, #ffe9a8, transparent 40%), linear-gradient(160deg, #5ac8e8, #3a8ad8 55%, #2a4fa8); }
.pm-parade { position: absolute; left: 0; right: 0; bottom: 50px; height: 200px; overflow: hidden; }
.pm-walker { position: absolute; bottom: 0; height: 120px; left: -200px; animation: pmWalk 12s linear infinite; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
@keyframes pmWalk { 0% { left: -200px; transform: translateY(0); } 25% { transform: translateY(-14px); } 50% { transform: translateY(0); } 75% { transform: translateY(-14px); } 100% { left: 110%; transform: translateY(0); } }
.pm-care .pm-care-ic { font-size: 84px; line-height: 1.1; animation: floaty 2.4s ease-in-out infinite; }
.pm-care h3 { font-size: 30px !important; }
.pm-care p { font-size: 18px !important; }
.pm-have { font: 600 18px var(--font); color: #6a5a4a; }
.pm-go-cos { margin-top: 22px; display: flex; align-items: center; gap: 16px; padding: 12px 26px 12px 16px; border-radius: 22px; cursor: pointer;
  border: 4px solid #2b2b36; background: linear-gradient(135deg, #fff1c4, #ffd27a); font-family: var(--font); color: #3a2a10; text-align: left;
  box-shadow: 0 6px 0 rgba(0,0,0,.18); transform: rotate(-2deg); transition: transform .15s; }
.pm-go-cos:hover { transform: rotate(0) scale(1.04); }
.pm-go-cos b { display: block; font-size: 26px; }
.pm-go-cos small { font-size: 18px; opacity: .8; }
.pm-go-hat { width: 90px; flex: none; animation: floaty 2.4s ease-in-out infinite; }
.pm-go-hat svg { width: 100%; display: block; }

/* ---------- páginas de especie ---------- */
.page.left.pm-species { overflow: hidden; }
.page.left.pm-seal { background: linear-gradient(170deg, #9fe0ff, #4aa8e0 55%, #1d5f9a); }
.page.left.pm-bromi { background: linear-gradient(170deg, #ffd27a, #e88a3a 55%, #8a3a14); }
.page.left.pm-turtle { background: linear-gradient(170deg, #b8f0a8, #4ab86a 55%, #1d6a3a); }
.pm-deco { position: absolute; inset: 0; pointer-events: none; }
.pm-bubble { position: absolute; bottom: -40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.18); animation: pmBubble 6s linear infinite; }
@keyframes pmBubble { to { transform: translateY(-1000px) translateX(30px); opacity: 0; } }
.pm-leaf { position: absolute; top: -50px; font-size: 40px; font-style: normal; animation: pmLeaf 7s linear infinite; }
@keyframes pmLeaf { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(480px) translateX(40px) rotate(180deg); } 100% { transform: translateY(1000px) translateX(-20px) rotate(360deg); opacity: .6; } }
.pm-pond { position: absolute; left: 14%; right: 14%; bottom: 192px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse, #6fd0e8, #2a8ab8); border: 6px solid rgba(255,255,255,.5); }
.pm-ripple { position: absolute; bottom: 215px; width: 60px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.8); animation: pmRipple 3s ease-out infinite; }
@keyframes pmRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.pm-hero { position: absolute; left: 50%; bottom: 200px; transform: translateX(-50%); width: 400px; height: 330px; display: grid; place-items: end center; z-index: 2; }
.pm-hero img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 12px 8px rgba(0,0,0,.3)); animation: cvBounce 2.4s ease-in-out infinite; }
.pm-hero.pop img { animation: pmPop .45s cubic-bezier(.2,1.6,.4,1), cvBounce 2.4s ease-in-out .45s infinite; }
@keyframes pmPop { from { transform: scale(.88) rotate(-5deg); } to { transform: scale(1) rotate(0); } }
.pm-hero-name { position: absolute; left: 0; right: 0; bottom: 118px; text-align: center; font: 700 34px var(--font); text-shadow: 0 4px 0 rgba(0,0,0,.25); z-index: 2; }
.pm-hero-price { display: block; margin-top: 2px; font-size: 26px; }
.pm-dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; z-index: 2; padding: 0 12px; }
.pm-dot { width: 52px; height: 46px; border-radius: 14px; border: 3px solid rgba(255,255,255,.6); background: rgba(255,255,255,.25); cursor: pointer; display: grid; place-items: center; padding: 3px; transition: transform .15s; }
.pm-dot img { max-width: 100%; max-height: 100%; }
.pm-dot:hover { transform: translateY(-4px); }
.pm-dot.on { background: #fff; border-color: #ffd23f; transform: translateY(-6px) scale(1.08); }

.pet-mag .page.right { overflow-y: auto; }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.pm-pet { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 20px; cursor: pointer; font-family: var(--font);
  background: #fff7ea; border: 4px solid #f0d9b5; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pm-pet.rare { border-color: #d07ae0; background: linear-gradient(#fff, #fff0fb); }
.pm-pet img { height: 92px; max-width: 140px; object-fit: contain; }
.pm-pet b { font-size: 20px; color: #a8541a; }
.pm-pet small { font-size: 15px; font-weight: 700; color: #3c8a3c; }
.pm-pet:hover, .pm-pet.on { transform: translateY(-4px); border-color: #e0a91c; box-shadow: 0 0 16px rgba(255,190,40,.55); }

/* ---------- cosméticos ---------- */
.page.left.pm-cos-page { background: radial-gradient(circle at 70% 20%, #ffe08a, transparent 45%), linear-gradient(160deg, #2a3a5a, #1d2440 55%, #3a1d2a); overflow: hidden; }
.pm-cos-show { position: absolute; left: 0; right: 0; bottom: 90px; height: 380px; display: flex; align-items: flex-end; justify-content: center; }
.pm-cos-pet { position: relative; flex: none; }
.pm-cos-pet img { height: 100%; width: 100%; display: block; filter: drop-shadow(0 12px 8px rgba(0,0,0,.35)); }
.pm-cos-show.pop .pm-cos-pet { animation: pmPop .45s cubic-bezier(.2,1.6,.4,1); }
.pm-cos-item { max-width: 460px; margin: 0 auto; }
.pm-hat-big { width: 260px; animation: floaty 2.4s ease-in-out infinite; }
.pm-hat-big svg, .pm-hat-big img { width: 100%; display: block; }

/* ---------- brillitos de mascotas negras y arcoíris (pet-sparkle.js) ---------- */
/* brillo fijo (sin animation, para no pisar los saltitos de cada pantalla) */
img[src*="_arcoiris"][src*="pets/"] { filter: drop-shadow(0 0 5px rgba(255,140,220,.75)) drop-shadow(0 0 12px rgba(120,200,255,.5)); }
.pet-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pet-sparkles i { position: absolute; width: calc(26px * var(--s, 1)); aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: skTwinkle 2.4s ease-in-out infinite; }
.pet-sparkles.sk-black i { background: radial-gradient(circle, #fff 0 30%, #d9ccff 70%); }
.pet-sparkles.sk-black i.k1 { background: radial-gradient(circle, #fff 0 30%, #b8a6ff 75%); }
.pet-sparkles.sk-black i.k2 { background: radial-gradient(circle, #fff 0 35%, #e8e8f8 80%); }
.pet-sparkles.sk-rainbow i { background: radial-gradient(circle, #fff 0 25%, #ff8fd0 70%); }
.pet-sparkles.sk-rainbow i.k1 { background: radial-gradient(circle, #fff 0 25%, #ffe66b 70%); }
.pet-sparkles.sk-rainbow i.k2 { background: radial-gradient(circle, #fff 0 25%, #7fd4ff 70%); }
@keyframes skTwinkle { 0% { opacity: 0; transform: scale(.2) rotate(0); } 30% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.8) rotate(90deg) translateY(-6px); } 100% { opacity: 0; transform: scale(.2) rotate(135deg) translateY(-14px); } }

/* ---------- mascotas de Octubre (october-pets.js) ---------- */
.page.left.pm-ghost { background: radial-gradient(circle at 75% 18%, rgba(255,240,180,.35), transparent 35%), linear-gradient(170deg, #4a3a7a, #2a1d4a 55%, #140c28); }
.page.left.pm-bat { background: radial-gradient(circle at 25% 18%, rgba(255,200,120,.35), transparent 35%), linear-gradient(170deg, #ff9a4a, #7a2a6a 50%, #1d0f30); }
.pm-badge { position: relative; z-index: 3; display: inline-block; margin-bottom: 6px; padding: 6px 18px; border-radius: 20px; background: #ff8a1f; color: #2a0d00; font: 700 22px var(--font); box-shadow: 0 4px 0 rgba(0,0,0,.25); transform: rotate(-3deg); }
.pm-moon { position: absolute; right: 12%; top: 9%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe0, #ffe08a 70%); box-shadow: 0 0 40px rgba(255,230,150,.7); opacity: .85; }
.pm-float { position: absolute; bottom: -60px; font-style: normal; opacity: .8; animation: pmFloatUp 7s ease-in-out infinite; }
@keyframes pmFloatUp { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 50% { transform: translate(30px, -480px); } 100% { transform: translate(-10px, -1000px); opacity: 0; } }
.pm-flap { position: absolute; left: -60px; font-style: normal; animation: pmFlap 6s linear infinite; }
@keyframes pmFlap { 0% { transform: translate(0, 0); } 25% { transform: translate(180px, -40px); } 50% { transform: translate(360px, 10px); } 75% { transform: translate(540px, -30px); } 100% { transform: translate(760px, 0); } }
.pm-locked .pm-pet { filter: saturate(.75); }
.pm-locked .pm-pet small { color: #a0581a; }
/* fantasmas y murciélagos flotan al acompañarte */
.pet-follower img[src*="fantasma_"], .pet-follower img[src*="murcielago_"], .pet-pic-wrap img[src*="fantasma_"], .pet-pic-wrap img[src*="murcielago_"] { animation: petFloat 2.2s ease-in-out infinite; }
.pet-follower img[src*="murcielago_"] { animation-duration: 1.1s; }
@keyframes petFloat { 0%, 100% { translate: 0 -18%; } 50% { translate: 0 -30%; } }

/* ---------- cosméticos de mascotas (pet-cosmetics.js) ---------- */
.pet-cos-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pet-cos-btn { display: flex; align-items: center; gap: 8px; }
.pet-cos-art { width: 46px; flex: none; }
.pet-cos-art svg, .pet-cos-art img { width: 100%; display: block; }
.pet-follower:not(.hop):has(img[src*="fantasma_"]) .pet-hatbox,
.pet-follower:not(.hop):has(img[src*="murcielago_"]) .pet-hatbox,
.pet-pic-wrap:has(img[src*="fantasma_"]) .pet-hatbox,
.pet-pic-wrap:has(img[src*="murcielago_"]) .pet-hatbox { animation: petFloat 2.2s ease-in-out infinite; }
.pet-follower:not(.hop):has(img[src*="murcielago_"]) .pet-hatbox,
.pet-pic-wrap:has(img[src*="murcielago_"]) .pet-hatbox { animation-duration: 1.1s; }
.pm-cos-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.pm-cos-list .pm-cos-item { max-width: none; margin: 0; padding: 12px; }
.pm-cos-list .pm-hat-big { width: 170px; margin: 0 auto; }
.pm-cos-list h3 { font-size: 26px; }
.pm-cos-list p { font-size: 17px; }
.candy-bear { height: 150px; aspect-ratio: 477 / 720; animation: floaty 3s ease-in-out infinite; }
.candy-bear svg { width: 100%; height: 100%; overflow: visible; }