/* ---------------------------------- */
/*           ANIMACIÓN AVION           */
/* ---------------------------------- */
.img-airplane {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 10%;
    left: -10%;
    animation: airplane-animation 8s linear infinite;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

@keyframes airplane-animation {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    15% {
        transform: translateX(25vw) translateY(20px);
        opacity: 1;
    }
    30% {
        transform: translateX(50vw) translateY(-10px);
        opacity: 1;
    }
    45% {
        transform: translateX(75vw) translateY(15px);
        opacity: 1;
    }
    60% {
        transform: translateX(100vw) translateY(0);
        opacity: 0;
    }
    75% {
        transform: translateX(120vw) translateY(10px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(150vw) translateY(0);
        opacity: 0;
    }
}

/* ---------------------------------- */
/*           RESPONSIVE AVION          */
/* ---------------------------------- */
@media (max-width: 1100px) {
    .img-airplane {
        top: 8%;
        animation-duration: 6s;
    }
    
    @keyframes airplane-animation {
        0% { transform: translateX(-20%) translateY(0); opacity: 0; }
        15% { transform: translateX(15vw) translateY(10px); opacity: 1; }
        30% { transform: translateX(40vw) translateY(-5px); opacity: 1; }
        45% { transform: translateX(65vw) translateY(8px); opacity: 1; }
        60% { transform: translateX(90vw) translateY(0); opacity: 0.5; }
        75% { transform: translateX(110vw) translateY(5px); opacity: 0.3; }
        100% { transform: translateX(120vw) translateY(0); opacity: 0; }
    }
}

@media (max-width: 768px) {
    .img-airplane {
        top: 5%;
        animation-duration: 5s;
    }
    
    @keyframes airplane-animation {
        0% { transform: translateX(-30%) translateY(0); opacity: 0; }
        15% { transform: translateX(10vw) translateY(5px); opacity: 1; }
        30% { transform: translateX(30vw) translateY(-3px); opacity: 1; }
        45% { transform: translateX(50vw) translateY(5px); opacity: 1; }
        60% { transform: translateX(70vw) translateY(0); opacity: 0.5; }
        75% { transform: translateX(90vw) translateY(5px); opacity: 0.3; }
        100% { transform: translateX(110vw) translateY(-3px); opacity: 0; }
    }
}