.sobre-animacion {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sobre {
    position: relative;
    width: 190px;
    height: 128px;
    transform: translateY(30px) scale(.75);
    opacity: 0;
}

.cuerpo-sobre {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #e9b8c8;
    border: 2px solid #c98da3;
    border-radius: 7px;
}

.solapa {
    position: absolute;
    top: 4px;
    left: 0;
    width: 190px;
    height: 74px;
    background: #e3aabd;
    border: 2px solid #c98da3;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 3;
}

.frontal {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #e9b8c8;
    border: 2px solid #c98da3;
    border-radius: 7px;
    clip-path: polygon(0 40%, 50% 70%, 100% 40%, 100% 100%, 0 100%);
}

.sobre::before {
    content: "♡";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d982a0;
    color: #fff4f7;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(80,30,50,.2);
}

@keyframes sobreApareceYDesaparece {
    0% {
        opacity: 1;
        transform: translateY(30px) scale(.7) rotate(-10deg);
    }
    70% {
        opacity: 1;
        transform: translateY(-8px) scale(1.02) rotate(.5deg);
    }
    80% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(.9);
    }
}

    /* STICKERSS */

    .sticker-flotante {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 65px;
    z-index: 999;

    transform: rotate(-8deg);
    animation: flotar 3.5s ease-in-out infinite;

    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
    will-change: transform;
    }

    .sticker-flotante img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    }

.sticker-flotante2 {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 105px;
    z-index: 999;
    
    transform: rotate(8deg);
    animation: flotarInferior 3.5s ease-in-out infinite;
    
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
    will-change: transform;
}

.sticker-flotante2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

    .sticker-flotante3 {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    width: 100px;
    z-index: 999;

    animation: flotarMedioAbajo 3.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
    will-change: transform;
    pointer-events: none;
    }

.sticker-flotante3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes flotarInferior {
    0% {
        transform: translateY(0px) rotate(8deg);
    }
    50% {
        transform: translateY(-10px) rotate(4deg);
    }
    100% {
        transform: translateY(0px) rotate(8deg);
    }
}

@keyframes flotar {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes flotarMedioAbajo {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 10px));
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

img {
    pointer-events: none;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
}