body {
    background: linear-gradient(180deg, #1e3a8a 0%, #3b82f6 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; perspective: 1000px;
    cursor: default; user-select: none; -webkit-tap-highlight-color: transparent;
}

/* --- Estilos Generales --- */
.trail-particle { position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(72,149,239,0) 70%); border-radius: 50%; pointer-events: none; z-index: 9999; animation: fadeOutParticle 1s forwards; }
@keyframes fadeOutParticle { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }
.falling-item { position: absolute; top: -10vh; font-size: 1.5rem; animation: fall linear infinite; z-index: 1; pointer-events: none; opacity: 0.7; text-shadow: 0 0 5px rgba(255,255,255,0.3); }
@keyframes fall { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 100% { transform: translateY(110vh) translateX(20px) rotate(360deg); opacity: 0.2; } }

/* --- STITCH FACE --- */
.stitch-head { width: 140px; height: 110px; background-color: #4895EF; border-radius: 45% 45% 40% 40%; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 20; transition: transform 0.1s; }
.stitch-ear-l, .stitch-ear-r { position: absolute; bottom: 30px; width: 50px; height: 120px; background-color: #4895EF; z-index: -10; border-radius: 50% 50% 0 0; transition: transform 0.3s; }
.stitch-ear-l { left: -35px; transform: rotate(-45deg); border-left: 10px solid #1e3a8a; }
.stitch-ear-r { right: -35px; transform: rotate(45deg); border-right: 10px solid #1e3a8a; }
.stitch-ear-inner { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 70%; background-color: #F72585; border-radius: 50% 50% 0 0; opacity: 0.8; }
.eye-socket { position: absolute; top: 40px; width: 35px; height: 45px; background: none; z-index: 10; }
.socket-l { left: 20px; transform: rotate(-10deg); } .socket-r { right: 20px; transform: rotate(10deg); }
.stitch-eye { width: 100%; height: 100%; background-color: #0f172a; border-radius: 50%; position: relative; }
.stitch-eye::after { content: ''; position: absolute; top: 10px; right: 8px; width: 10px; height: 10px; background: white; border-radius: 50%; }
.stitch-eye-patch { position: absolute; top: 30px; width: 50px; height: 60px; background-color: #a5d8ff; border-radius: 50%; z-index: -1; opacity: 0.6; }
.patch-l { left: 12px; transform: rotate(-10deg); } .patch-r { right: 12px; transform: rotate(10deg); }
.stitch-nose { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 45px; height: 30px; background-color: #1e3a8a; border-radius: 40% 40% 60% 60%; cursor: pointer; z-index: 50; transition: background 0.3s; }
.stitch-nose:hover { background-color: #0f172a; }
.nose-popup { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: white; color: #1e3a8a; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; pointer-events: none; opacity: 0; transition: opacity 0.3s; width: max-content; }
.animate-sneeze { animation: sneeze 0.4s ease-in-out; }
.gift-btn:hover .stitch-head { transform: scale(1.05); }

/* --- CARD STYLES --- */
#main-content { perspective: 1000px; transform-style: preserve-3d; }
.glass-panel { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform-style: preserve-3d; transition: transform 0.1s ease-out; will-change: transform; cursor: grab; }
.glass-panel:active { cursor: grabbing; }
.glass-panel > * { transform: translateZ(20px); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.cursor { display: inline-block; width: 2px; height: 1em; background-color: #fff; margin-left: 2px; vertical-align: bottom; animation: blinkCursor 0.7s infinite; }
.dot { transition: all 0.3s ease; opacity: 0.5; } .dot.active { opacity: 1; transform: scale(1.2); background-color: #fff; }
.neon-title { animation: pulseGlow 3s infinite alternate; }

/* --- LIGHTS --- */
.lights-strand { position: absolute; top: -15px; left: 0; width: 100%; height: 30px; display: flex; justify-content: space-around; z-index: 50; pointer-events: none; }
.light-bulb { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: flash 2s infinite alternate; position: relative; }
.light-bulb::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 2px; height: 8px; background: #222; }
.light-bulb:nth-child(odd) { background: #F72585; box-shadow: 0 0 15px #F72585; animation-delay: 0.5s; }
.light-bulb:nth-child(even) { background: #4895EF; box-shadow: 0 0 15px #4895EF; animation-delay: 1s; }
.light-bulb:nth-child(3n) { background: #FFD700; box-shadow: 0 0 15px #FFD700; animation-delay: 1.5s; }

/* --- MODALS --- */
#nutrition-modal, #prescription-modal { display: none; }
.modal-overlay.active { display: flex; animation: popIn 0.3s ease-out; }
.nutrition-label { background: white; color: black; font-family: 'Roboto Condensed', sans-serif; padding: 15px; border: 2px solid black; width: 280px; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: rotate(-2deg); }
.nutrition-header { border-bottom: 10px solid black; padding-bottom: 5px; margin-bottom: 5px; }
.nutrition-title { font-size: 2rem; font-weight: 900; line-height: 1; }
.nutrition-row { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 3px 0; font-size: 0.9rem; }
.nutrition-row.bold { border-bottom: 4px solid black; font-weight: 700; }
.nutrition-row.thick { border-bottom: 2px solid black; }
.prescription-paper { background: #fffef0; color: #333; font-family: 'Indie Flower', cursive; padding: 20px; width: 300px; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.3); border-radius: 5px; position: relative; border-top: 10px solid #4895EF; background-image: repeating-linear-gradient(transparent, transparent 30px, #e5e5f7 30px, #e5e5f7 31px); line-height: 31px; }
.rx-symbol { font-size: 3rem; font-weight: bold; color: #4895EF; position: absolute; top: 10px; left: 15px; opacity: 0.2; }
.signature { font-family: 'Pacifico', cursive; color: #1e3a8a; transform: rotate(-5deg); margin-top: 10px; font-size: 1.2rem; }

.chat-bubble { position: absolute; top: -60px; left: 50%; transform: translateX(-50%) scale(0); background: white; color: #1e3a8a; padding: 8px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); pointer-events: none; z-index: 60; opacity: 0; transition: all 0.3s ease; }
.chat-bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-style: solid; border-color: white transparent; }
.chat-bubble.show { transform: translateX(-50%) scale(1); opacity: 1; animation: pop-in 0.4s ease forwards; }
.big-heart-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 8rem; color: #F72585; z-index: 100; pointer-events: none; animation: popHeart 1.5s ease-out forwards; filter: drop-shadow(0 0 20px rgba(247, 37, 133, 0.5)); }
@keyframes popHeart { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }

/* Audio Player Visuals */
.audio-player-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px; padding: 8px 16px; margin-bottom: 10px;
    cursor: pointer; transition: all 0.3s;
}
.audio-player-btn:hover { background: rgba(255, 255, 255, 0.3); }
.audio-bars { display: flex; gap: 3px; height: 15px; align-items: flex-end; }
.bar { width: 3px; background: white; height: 5px; transition: height 0.2s; }
.playing .bar { animation: soundBars 0.5s infinite ease-in-out alternate; }
.bar:nth-child(1) { animation-delay: 0s; } .bar:nth-child(2) { animation-delay: 0.1s; } .bar:nth-child(3) { animation-delay: 0.2s; } .bar:nth-child(4) { animation-delay: 0.3s; }
@keyframes soundBars { 0% { height: 5px; } 100% { height: 15px; } }