/* Botón flotante de WhatsApp */
.whatsapp {
    position: fixed;
    bottom: 100px; /* Ajusta la distancia desde la parte inferior */
    right: 45px; /* Ajusta la distancia desde la derecha */
    width: 46px; /* Tamaño del botón */
    height: 46px;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.back-to-top-avion {
  position: fixed;
  right: 45px;
  bottom: 45px ;
  z-index: 11;
}
.btn-avion-active {
  cursor: pointer;
  bottom: 100px !important;
}
.whatsapp img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Hace el botón circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.whatsapp:hover {
    transform: scale(1.2); /* Agranda el botón al pasar el mouse */
    opacity: 0.8;
}

/* Estilo para el avión */
/* Animación del avión */
.avion {
    position: absolute;
    top: 40px; /* Altura inicial */
    left: -50px; /* Empieza fuera de la pantalla */
    width: 160px; /* Tamaño grande del avión */
    animation: movimientoSenoidal 10s linear infinite; /* Animación lenta y continua */
}

.avion img {
    width: 50%; /* Ajusta la imagen al tamaño del contenedor */
    height: auto;
}

/* Animación de trayectoria senoidal */
@keyframes movimientoSenoidal {
    0% {
        transform: translateX(5vw) translateY(-15);
    }
    25% {
        transform: translateX(25vw) translateY(-30px); /* Altura máxima del seno */
    }
    50% {
        transform: translateX(50vw) translateY(-15px); /* Regresa al nivel base */
    }
    75% {
        transform: translateX(75vw) translateY(-30px); /* Altura mínima del seno */
    }
    100% {
        transform: translateX(100vw) translateY(0); /* Sale por la derecha */
    }
}


.sombra {
    bottom: 40px;
    position: absolute;
    top: 75px; /* Ajusta la posición para que esté bajo el avión */
    left: 0;
    width: 100px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    animation: sombraMovimiento 10s linear infinite;
}

@keyframes sombraMovimiento {
    0% {
        transform: translateX(0) scale(1); /* Escala inicial */
    }
    25% {
        transform: translateX(25vw) scale(0.7); /* Más cerca del suelo */
    }
    50% {
        transform: translateX(50vw) scale(1); /* Escala inicial */
    }
    75% {
        transform: translateX(75vw) scale(0.7); /* Escala inicial */
    }
    100% {
        transform: translateX(100vw) scale(0.8); /* Escala inicial */
    }
}