/* hitos.css — el rótulo con tu nombre cuando la portada celebra un hito (js/hitos.js, 28-sep) */
.pa-hito {
    position: fixed; z-index: 9985; left: 50%; top: calc(var(--sai-top, 0px) + 74px);
    width: min(92vw, 400px); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 10px;
    border-radius: 22px; background: linear-gradient(135deg, #3B2168 0%, #5B2A9E 100%); color: #fff;
    box-shadow: 0 0 0 2px #F5B82E, 0 14px 34px rgba(40, 10, 80, .45);
    translate: -50% -160%; opacity: 0; cursor: pointer; font-family: inherit;
    transition: translate 520ms cubic-bezier(.3, 1.5, .5, 1), opacity 260ms ease;
}
.pa-hito.is-in { translate: -50% 0; opacity: 1; }
.pa-hito.is-out { translate: -50% -160%; opacity: 0; transition-duration: 380ms, 300ms; }
.pa-hito__img { flex: none; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: pa-hito-salta 900ms ease-out 400ms; }
@keyframes pa-hito-salta { 20% { transform: translateY(-12px) rotate(-6deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } }
.pa-hito__t { flex: 1; min-width: 0; text-align: left; }
.pa-hito__t b { display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.2; color: #FFE58A; }
.pa-hito__t span { display: block; margin-top: 2px; font-size: .8rem; font-weight: 700; color: #E3D4FF; }
.pa-hito__mas { display: inline-block; margin-top: 5px; font-size: .68rem; font-weight: 900; color: #3B2A00; background: #F5B82E; padding: 1px 8px; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .pa-hito, .pa-hito.is-out { transition: opacity 200ms; } .pa-hito__img { animation: none; } }